@protobase/ui 0.54.3 → 0.54.5

package/dist/chat/chat-divider.d.ts

@@ -10,6 +10,9 @@ export type ChatDividerProps =
   tone: 'new';
   label?: string;
 };
-/** A line across a chat with a label in its middle, between the messages of two days or above the new ones. */
+/**
+ * A line across a chat with a label in its middle, between the messages of two days or above the new ones. Marked
+ * `data-chat-divider`, so a thread keeps the reader's place on the message below it, not on the divider.
+ */
 export declare const ChatDivider: ({ tone, label }: ChatDividerProps) => import("react").JSX.Element;
 //#endregion

package/dist/chat/chat-divider.js

@@ -2,7 +2,10 @@ import { cn } from "../lib/cn.js";
 import { text } from "./messages.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/chat-divider.tsx
-/** A line across a chat with a label in its middle, between the messages of two days or above the new ones. */
+/**
+* A line across a chat with a label in its middle, between the messages of two days or above the new ones. Marked
+* `data-chat-divider`, so a thread keeps the reader's place on the message below it, not on the divider.
+*/
 const ChatDivider = ({ tone = "day", label }) => {
 	const shown = label ?? text("newMessages");
 	const line = cn("h-px flex-1", tone === "new" ? "bg-danger" : "bg-border");
@@ -10,6 +13,7 @@ const ChatDivider = ({ tone = "day", label }) => {
 		role: "separator",
 		"aria-label": shown,
 		"data-tone": tone,
+		"data-chat-divider": "",
 		className: "flex items-center gap-3 text-xs font-medium",
 		children: [
 			/* @__PURE__ */ jsx("span", { className: line }),

package/dist/chat/chat-thread.js

@@ -1,25 +1,11 @@
 import { cn } from "../lib/cn.js";
 import { Button } from "../primitives/button.js";
 import { text } from "./messages.js";
-import { isAtEnd, scrollAfterChange } from "./thread-scroll.js";
+import { scrollAfterChange } from "./thread-scroll.js";
+import { readPlace } from "./read-place.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/chat-thread.tsx
-/** The message the reader is reading: the first whose bottom shows. */
-const readPlace = (box, list, followKey) => {
-	const top = box.getBoundingClientRect().top;
-	const element = [...list.children].find((child) => child.getBoundingClientRect().bottom > top);
-	const anchor = element && { anchor: {
-		element,
-		top: element.getBoundingClientRect().top - top
-	} };
-	return {
-		atEnd: isAtEnd(box),
-		first: list.firstElementChild ?? void 0,
-		followKey,
-		...anchor
-	};
-};
 /**
 * The scrolling list of a chat's messages. A reader at the end follows new messages; one who scrolled back stays where
 * they are until `followKey` changes, and earlier messages loaded above keep them on the message they were reading. It

package/dist/chat/read-place.js

@@ -0,0 +1,22 @@
+import { isAtEnd } from "./thread-scroll.js";
+//#region src/chat/read-place.ts
+/**
+* The message the reader is reading: the first whose bottom shows, or the first below the top when none shows. Never a
+* divider, since a day divider moves to the new first message when earlier ones of the same day load above it.
+*/
+const readPlace = (box, list, followKey) => {
+	const top = box.getBoundingClientRect().top;
+	const element = Array.from(list.children).find((child) => !child.hasAttribute("data-chat-divider") && child.getBoundingClientRect().bottom > top);
+	const anchor = element && { anchor: {
+		element,
+		top: element.getBoundingClientRect().top - top
+	} };
+	return {
+		atEnd: isAtEnd(box),
+		first: list.firstElementChild ?? void 0,
+		followKey,
+		...anchor
+	};
+};
+//#endregion
+export { readPlace };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.54.3";
+var version = "0.54.5";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };