@adea-ai/ui 0.140.0 → 0.142.0

package/dist/components/composites/inline-citation/inline-citation.js

@@ -0,0 +1,272 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { ActionButton } from "../action-button/action-button.js";
+import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "../../ui/popover/popover.js";
+import { TextLink } from "../../ui/text-link/text-link.js";
+import { boundText, safeSourceUrl, sourceHost, sourceTitle } from "../sources/source.js";
+import { citationLabel, citationName, nextCitationMode, wrapIndex } from "./citation.js";
+import { createComponent, insert, memo, template } from "solid-js/web";
+import { ChevronLeft, ChevronRight } from "lucide-solid";
+import { Show, createSignal, onCleanup, splitProps } from "solid-js";
+//#region src/components/composites/inline-citation/inline-citation.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span aria-hidden=true class="max-w-32 truncate">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span aria-hidden=true>+`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div class="flex items-center justify-between gap-2"><span role=status aria-live=polite class="text-xs text-muted-foreground tabular-nums">Source <!> of </span><span class="flex items-center gap-0.5">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div class="flex min-w-0 flex-col gap-1.5 px-2 py-1.5">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<p class="m-0 text-xs text-muted-foreground [overflow-wrap:anywhere]">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<p class="m-0 text-xs text-muted-foreground">Address not linked`);
+var _tmpl$7 = /*#__PURE__*/ template(`<p class="m-0 line-clamp-6 text-xs text-muted-foreground [overflow-wrap:anywhere]">`);
+var _tmpl$8 = /*#__PURE__*/ template(`<span class=visually-hidden> (opens in a new tab)`);
+var LEAVE_DELAY = 200;
+function InlineCitation(props) {
+	const [local] = splitProps(props, [
+		"sources",
+		"index",
+		"hoverDelay",
+		"class"
+	]);
+	const [mode, setMode] = createSignal("closed");
+	const [position, setPosition] = createSignal(0);
+	let timer;
+	let content;
+	let pressing = false;
+	let restoringFocus = false;
+	const count = () => local.sources.length;
+	const active = () => local.sources[wrapIndex(position(), count())];
+	const clear = () => {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+	};
+	onCleanup(clear);
+	const dispatch = (event) => setMode((current) => nextCitationMode(current, event));
+	const schedule = (event, delay) => {
+		clear();
+		timer = setTimeout(() => dispatch(event), delay);
+	};
+	const onPointerEnter = (event) => {
+		if (event.pointerType === "touch") return;
+		schedule("enter", local.hoverDelay ?? 150);
+	};
+	const onPointerLeave = (event) => {
+		if (event.pointerType === "touch") return;
+		schedule("leave", LEAVE_DELAY);
+	};
+	const onClick = () => {
+		clear();
+		const wasPeeking = mode() === "peek";
+		dispatch("press");
+		pressing = true;
+		queueMicrotask(() => {
+			pressing = false;
+		});
+		if (wasPeeking) queueMicrotask(() => content?.focus());
+	};
+	return createComponent(Show, {
+		get when() {
+			return count() > 0;
+		},
+		get children() {
+			return createComponent(Popover, {
+				get open() {
+					return mode() !== "closed";
+				},
+				onOpenChange: (next) => {
+					if (!next && !pressing) dispatch("dismiss");
+				},
+				placement: "bottom",
+				gutter: 6,
+				get children() {
+					return [createComponent(PopoverTrigger, {
+						as: Button,
+						variant: "subtle",
+						size: "2xs",
+						touchTarget: "comfortable",
+						"data-slot": "inline-citation",
+						get ["aria-label"]() {
+							return citationName(local.sources, local.index);
+						},
+						get ["class"]() {
+							return cn("mx-0.5 align-baseline tabular-nums", local.class);
+						},
+						onClick,
+						onPointerEnter,
+						onPointerLeave,
+						onFocus: (event) => {
+							if (restoringFocus) return;
+							if (event.currentTarget.matches(":focus-visible")) dispatch("focus");
+						},
+						onBlur: () => dispatch("blur"),
+						get children() {
+							return [(() => {
+								var _el$ = _tmpl$();
+								insert(_el$, () => citationLabel(local.index, local.sources[0]));
+								return _el$;
+							})(), createComponent(Show, {
+								get when() {
+									return count() > 1;
+								},
+								get children() {
+									var _el$2 = _tmpl$2();
+									_el$2.firstChild;
+									insert(_el$2, () => count() - 1, null);
+									return _el$2;
+								}
+							})];
+						}
+					}), createComponent(PopoverContent, {
+						ref: (element) => content = element,
+						"class": "w-72 max-w-full",
+						onOpenAutoFocus: (event) => {
+							if (mode() === "peek") event.preventDefault();
+						},
+						onCloseAutoFocus: () => {
+							restoringFocus = true;
+							queueMicrotask(() => {
+								restoringFocus = false;
+							});
+						},
+						onPointerEnter: (event) => {
+							if (event.pointerType !== "touch") clear();
+						},
+						onPointerLeave,
+						get children() {
+							return createComponent(Show, {
+								get when() {
+									return active();
+								},
+								children: (source) => (() => {
+									var _el$4 = _tmpl$4();
+									insert(_el$4, createComponent(Show, {
+										get when() {
+											return count() > 1;
+										},
+										get children() {
+											var _el$5 = _tmpl$3(), _el$6 = _el$5.firstChild, _el$9 = _el$6.firstChild.nextSibling;
+											_el$9.nextSibling;
+											var _el$0 = _el$6.nextSibling;
+											insert(_el$6, () => wrapIndex(position(), count()) + 1, _el$9);
+											insert(_el$6, count, null);
+											insert(_el$0, createComponent(ActionButton, {
+												variant: "ghost",
+												size: "icon-xs",
+												"aria-label": "Previous source",
+												tooltip: "Previous source",
+												onClick: () => setPosition((value) => wrapIndex(value - 1, count())),
+												get children() {
+													return createComponent(ChevronLeft, {});
+												}
+											}), null);
+											insert(_el$0, createComponent(ActionButton, {
+												variant: "ghost",
+												size: "icon-xs",
+												"aria-label": "Next source",
+												tooltip: "Next source",
+												onClick: () => setPosition((value) => wrapIndex(value + 1, count())),
+												get children() {
+													return createComponent(ChevronRight, {});
+												}
+											}), null);
+											return _el$5;
+										}
+									}), null);
+									insert(_el$4, createComponent(PopoverTitle, {
+										"class": "p-0 [overflow-wrap:anywhere]",
+										get children() {
+											return sourceTitle(source());
+										}
+									}), null);
+									insert(_el$4, createComponent(CitationDetails, { get source() {
+										return source();
+									} }), null);
+									return _el$4;
+								})()
+							});
+						}
+					})];
+				}
+			});
+		}
+	});
+}
+/**
+* Citation markers for `MessageText`, from the sources a reply really used.
+*
+* `[^2]` in the text becomes the second source's badge; `[^1,3]` one badge for
+* sources 1 and 3. A number beyond the list leaves the marker as written, and an
+* empty list makes every marker literal, so text can never cite a source the host
+* did not supply.
+*
+*     <MessageText text={reply} citations={messageCitations(sources)} />
+*/
+function messageCitations(sources) {
+	return {
+		count: sources.length,
+		render: (numbers) => createComponent(InlineCitation, {
+			get index() {
+				return numbers[0];
+			},
+			get sources() {
+				return numbers.flatMap((number) => {
+					const source = sources[number - 1];
+					return source ? [source] : [];
+				});
+			}
+		})
+	};
+}
+function CitationDetails(props) {
+	const href = () => safeSourceUrl(props.source.url);
+	const host = () => sourceHost(props.source.url);
+	const snippet = () => props.source.snippet ? boundText(props.source.snippet, 480) : "";
+	const withheld = () => props.source.url !== void 0 && props.source.url !== "" && !href();
+	return [
+		createComponent(Show, {
+			get when() {
+				return host();
+			},
+			get children() {
+				var _el$1 = _tmpl$5();
+				insert(_el$1, host);
+				return _el$1;
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return href();
+			},
+			children: (url) => createComponent(TextLink, {
+				get href() {
+					return url();
+				},
+				target: "_blank",
+				rel: "noreferrer noopener",
+				"class": "w-fit max-w-full text-xs [overflow-wrap:anywhere]",
+				get children() {
+					return [memo(() => boundText(url(), 96)), _tmpl$8()];
+				}
+			})
+		}),
+		createComponent(Show, {
+			get when() {
+				return withheld();
+			},
+			get children() {
+				return _tmpl$6();
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return snippet();
+			},
+			get children() {
+				var _el$11 = _tmpl$7();
+				insert(_el$11, snippet);
+				return _el$11;
+			}
+		})
+	];
+}
+//#endregion
+export { InlineCitation, messageCitations };
+
+//# sourceMappingURL=inline-citation.js.map

package/dist/components/composites/inline-citation/inline-citation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-citation.js","names":["ChevronLeft","ChevronRight","createSignal","onCleanup","Show","splitProps","cn","ActionButton","Button","MessageCitations","Popover","PopoverContent","PopoverTitle","PopoverTrigger","TextLink","SOURCE_SNIPPET_LIMIT","boundText","safeSourceUrl","sourceHost","sourceTitle","Source","citationLabel","citationName","nextCitationMode","wrapIndex","CitationEvent","CitationMode","InlineCitationProps","sources","index","hoverDelay","class","LEAVE_DELAY","InlineCitation","props","local","mode","setMode","position","setPosition","timer","ReturnType","setTimeout","content","HTMLElement","pressing","restoringFocus","count","length","active","clear","undefined","clearTimeout","dispatch","event","current","schedule","delay","onPointerEnter","PointerEvent","pointerType","onPointerLeave","onClick","wasPeeking","queueMicrotask","focus","_$createComponent","when","children","open","onOpenChange","next","placement","gutter","as","variant","size","touchTarget","aria-label","onFocus","FocusEvent","currentTarget","matches","onBlur","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","_el$3","firstChild","ref","element","onOpenAutoFocus","Event","preventDefault","onCloseAutoFocus","source","_el$4","_tmpl$4","_el$5","_tmpl$3","_el$6","_el$7","_el$9","nextSibling","_el$8","_el$0","tooltip","value","CitationDetails","messageCitations","render","numbers","flatMap","number","href","url","host","snippet","withheld","_el$1","_tmpl$5","target","rel","_$memo","_tmpl$8","_tmpl$6","_el$11","_tmpl$7","_$createComponent","_$memo"],"sources":["../../../../src/components/composites/inline-citation/inline-citation.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-solid'\nimport { createSignal, onCleanup, Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { ActionButton } from '../action-button'\nimport { Button } from '../../ui/button'\nimport type { MessageCitations } from '../../ui/message'\nimport { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from '../../ui/popover'\nimport { TextLink } from '../../ui/text-link'\nimport {\n  SOURCE_SNIPPET_LIMIT,\n  boundText,\n  safeSourceUrl,\n  sourceHost,\n  sourceTitle,\n  type Source,\n} from '../sources/source'\nimport {\n  citationLabel,\n  citationName,\n  nextCitationMode,\n  wrapIndex,\n  type CitationEvent,\n  type CitationMode,\n} from './citation'\n\n/**\n * InlineCitation.\n *\n * A small badge inside a sentence — \"1\", or a host — that opens the source(s)\n * behind the claim: title, host, address, snippet, and Previous/Next when several\n * sources share one marker. It is an inline element for prose such as\n * `MessageText`: it never breaks across lines, stays on the text baseline, and\n * adds no block of its own. For the list of everything a reply used, reach for\n * `Sources`; the two number sources the same way.\n *\n * ## One popover, two ways to open it\n *\n * A hover card would exclude everyone who is not holding a mouse, so this is a\n * `Popover` that a pointer can also *peek* at:\n *\n * - **Hover or keyboard focus peeks.** The popover opens without taking focus\n *   and closes when the pointer or focus leaves. Touch has no hover, so a touch\n *   never peeks.\n * - **Click, tap, Enter or Space pins.** Focus moves into the popover so its\n *   link and Previous/Next are reachable; it stays until Escape, an outside press,\n *   or the badge is pressed again, and focus returns to the badge. Pressing a badge\n *   that is only peeking pins it rather than toggling it shut — the transitions\n *   are the pure `nextCitationMode`.\n *\n * Kobalte's trigger toggles on every press, so `open` is controlled and its own\n * close request is ignored for the press that we already decided (`pressing`).\n * Without that, hover-then-click, the commonest pointer path, would close the card.\n *\n * ## It makes no claim without sources\n *\n * No sources renders nothing: a marker that points nowhere is not a citation.\n * The address is a link only when `safeSourceUrl` allows it; the host comes from\n * the parsed URL; titles and snippets are clipped, cleaned of direction\n * overrides and rendered as text. The badge's accessible name carries the title\n * and host (the visible label is only a number or a host), so a reader hears\n * what is cited without opening anything.\n */\nexport type InlineCitationProps = {\n  /** One source, or several that support the same claim. */\n  sources: readonly Source[]\n  /**\n   * The 1-based number to show, matching the source's position in `Sources`.\n   * Omit it to show the host instead; a number is never guessed.\n   */\n  index?: number\n  /** Milliseconds a pointer rests before the peek opens. */\n  hoverDelay?: number\n  class?: string\n}\n\nconst LEAVE_DELAY = 200\n\nexport function InlineCitation(props: InlineCitationProps) {\n  const [local] = splitProps(props, ['sources', 'index', 'hoverDelay', 'class'])\n  const [mode, setMode] = createSignal<CitationMode>('closed')\n  const [position, setPosition] = createSignal(0)\n  let timer: ReturnType<typeof setTimeout> | undefined\n  let content: HTMLElement | undefined\n  let pressing = false\n  // Focus handed back to the badge as the popover closes is not a request to\n  // peek again; without this, Escape from a pinned card reopens it as a preview.\n  let restoringFocus = false\n\n  const count = () => local.sources.length\n  const active = () => local.sources[wrapIndex(position(), count())]\n  const clear = () => {\n    if (timer !== undefined) clearTimeout(timer)\n    timer = undefined\n  }\n  onCleanup(clear)\n\n  const dispatch = (event: CitationEvent) => setMode((current) => nextCitationMode(current, event))\n  const schedule = (event: CitationEvent, delay: number) => {\n    clear()\n    timer = setTimeout(() => dispatch(event), delay)\n  }\n\n  const onPointerEnter = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return\n    schedule('enter', local.hoverDelay ?? 150)\n  }\n  const onPointerLeave = (event: PointerEvent) => {\n    if (event.pointerType === 'touch') return\n    schedule('leave', LEAVE_DELAY)\n  }\n\n  const onClick = () => {\n    clear()\n    const wasPeeking = mode() === 'peek'\n    dispatch('press')\n    // Kobalte toggles right after this handler; its request is not a dismissal.\n    pressing = true\n    queueMicrotask(() => {\n      pressing = false\n    })\n    // The peek never took focus; a deliberate press must hand it over.\n    if (wasPeeking) queueMicrotask(() => content?.focus())\n  }\n\n  return (\n    <Show when={count() > 0}>\n      <Popover\n        open={mode() !== 'closed'}\n        onOpenChange={(next) => {\n          if (!next && !pressing) dispatch('dismiss')\n        }}\n        placement=\"bottom\"\n        gutter={6}\n      >\n        <PopoverTrigger\n          as={Button}\n          variant=\"subtle\"\n          size=\"2xs\"\n          touchTarget=\"comfortable\"\n          data-slot=\"inline-citation\"\n          aria-label={citationName(local.sources, local.index)}\n          class={cn('mx-0.5 align-baseline tabular-nums', local.class)}\n          onClick={onClick}\n          onPointerEnter={onPointerEnter}\n          onPointerLeave={onPointerLeave}\n          onFocus={(event: FocusEvent & { currentTarget: HTMLElement }) => {\n            // Mouse focus follows the press; only keyboard focus peeks.\n            if (restoringFocus) return\n            if (event.currentTarget.matches(':focus-visible')) dispatch('focus')\n          }}\n          onBlur={() => dispatch('blur')}\n        >\n          <span aria-hidden=\"true\" class=\"max-w-32 truncate\">\n            {citationLabel(local.index, local.sources[0])}\n          </span>\n          <Show when={count() > 1}>\n            <span aria-hidden=\"true\">+{count() - 1}</span>\n          </Show>\n        </PopoverTrigger>\n        <PopoverContent\n          ref={(element: HTMLElement) => (content = element)}\n          class=\"w-72 max-w-full\"\n          onOpenAutoFocus={(event: Event) => {\n            if (mode() === 'peek') event.preventDefault()\n          }}\n          onCloseAutoFocus={() => {\n            // The focus move that follows is synchronous; the microtask ends the window.\n            restoringFocus = true\n            queueMicrotask(() => {\n              restoringFocus = false\n            })\n          }}\n          onPointerEnter={(event: PointerEvent) => {\n            if (event.pointerType !== 'touch') clear()\n          }}\n          onPointerLeave={onPointerLeave}\n        >\n          <Show when={active()}>\n            {(source) => (\n              <div class=\"flex min-w-0 flex-col gap-1.5 px-2 py-1.5\">\n                <Show when={count() > 1}>\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span\n                      role=\"status\"\n                      aria-live=\"polite\"\n                      class=\"text-xs text-muted-foreground tabular-nums\"\n                    >\n                      Source {wrapIndex(position(), count()) + 1} of {count()}\n                    </span>\n                    <span class=\"flex items-center gap-0.5\">\n                      <ActionButton\n                        variant=\"ghost\"\n                        size=\"icon-xs\"\n                        aria-label=\"Previous source\"\n                        tooltip=\"Previous source\"\n                        onClick={() => setPosition((value) => wrapIndex(value - 1, count()))}\n                      >\n                        <ChevronLeft />\n                      </ActionButton>\n                      <ActionButton\n                        variant=\"ghost\"\n                        size=\"icon-xs\"\n                        aria-label=\"Next source\"\n                        tooltip=\"Next source\"\n                        onClick={() => setPosition((value) => wrapIndex(value + 1, count()))}\n                      >\n                        <ChevronRight />\n                      </ActionButton>\n                    </span>\n                  </div>\n                </Show>\n                <PopoverTitle class=\"p-0 [overflow-wrap:anywhere]\">\n                  {sourceTitle(source())}\n                </PopoverTitle>\n                <CitationDetails source={source()} />\n              </div>\n            )}\n          </Show>\n        </PopoverContent>\n      </Popover>\n    </Show>\n  )\n}\n\n/**\n * Citation markers for `MessageText`, from the sources a reply really used.\n *\n * `[^2]` in the text becomes the second source's badge; `[^1,3]` one badge for\n * sources 1 and 3. A number beyond the list leaves the marker as written, and an\n * empty list makes every marker literal, so text can never cite a source the host\n * did not supply.\n *\n *     <MessageText text={reply} citations={messageCitations(sources)} />\n */\nexport function messageCitations(sources: readonly Source[]): MessageCitations {\n  return {\n    count: sources.length,\n    render: (numbers) => (\n      <InlineCitation\n        index={numbers[0]}\n        sources={numbers.flatMap((number) => {\n          const source = sources[number - 1]\n          return source ? [source] : []\n        })}\n      />\n    ),\n  }\n}\n\nfunction CitationDetails(props: { source: Source }) {\n  const href = () => safeSourceUrl(props.source.url)\n  const host = () => sourceHost(props.source.url)\n  const snippet = () =>\n    props.source.snippet ? boundText(props.source.snippet, SOURCE_SNIPPET_LIMIT) : ''\n  const withheld = () => props.source.url !== undefined && props.source.url !== '' && !href()\n\n  return (\n    <>\n      <Show when={host()}>\n        <p class=\"m-0 text-xs text-muted-foreground [overflow-wrap:anywhere]\">{host()}</p>\n      </Show>\n      <Show when={href()}>\n        {(url) => (\n          <TextLink\n            href={url()}\n            target=\"_blank\"\n            rel=\"noreferrer noopener\"\n            class=\"w-fit max-w-full text-xs [overflow-wrap:anywhere]\"\n          >\n            {boundText(url(), 96)}\n            <span class=\"visually-hidden\"> (opens in a new tab)</span>\n          </TextLink>\n        )}\n      </Show>\n      <Show when={withheld()}>\n        <p class=\"m-0 text-xs text-muted-foreground\">Address not linked</p>\n      </Show>\n      <Show when={snippet()}>\n        <p class=\"m-0 line-clamp-6 text-xs text-muted-foreground [overflow-wrap:anywhere]\">\n          {snippet()}\n        </p>\n      </Show>\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/composites/message-scroller/index.d.ts

@@ -0,0 +1,3 @@
+export { MessageScroller, type MessageScrollerProps } from './message-scroller';
+export { captureAnchor, restoreAnchor, type ScrollAnchor } from './scroll-anchor';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/composites/message-scroller/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/message-scroller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC/E,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/components/composites/message-scroller/index.js

@@ -0,0 +1,3 @@
+import { captureAnchor, restoreAnchor } from "./scroll-anchor.js";
+import { MessageScroller } from "./message-scroller.js";
+export { MessageScroller, captureAnchor, restoreAnchor };

package/dist/components/composites/message-scroller/message-scroller.d.ts

@@ -0,0 +1,55 @@
+import { type JSX } from 'solid-js';
+import { type ConversationSurfaceProps } from '../../conversation/conversation-surface';
+/**
+ * MessageScroller.
+ *
+ * The thread. It owns the three scroll behaviours a chat gets wrong when each
+ * is bolted on separately, and keeps them from fighting:
+ *
+ * 1. **Follow the reply only while the reader is at the bottom.** New and
+ *    streaming content scrolls into view when the reader is already at the end,
+ *    and never otherwise. Scrolling up parks the view; the "Jump to latest"
+ *    control brings it back. (This is `ConversationSurface`'s follow contract,
+ *    which this component wraps rather than reimplements.)
+ * 2. **Load history without moving what the reader is looking at.** When the
+ *    reader reaches the top, `onLoadOlder` is asked for earlier turns. Turns
+ *    inserted *above* the viewport would normally push the visible content down
+ *    by exactly their height; here the first visible turn (found by
+ *    `data-anchor-id`, which `Message` sets from `anchorId`) is measured before
+ *    the load and put back to the same offset after it, on every layout change
+ *    until the load settles — so images and code blocks that size themselves
+ *    late do not jolt the view either. A "Load earlier" button is always present
+ *    while there is more, because the scroll trigger alone is unreachable to a
+ *    keyboard or switch user and fires nothing in a short pane.
+ * 3. **Announce without flooding.** The scroller is a polite log, and a turn that
+ *    is still arriving marks itself `aria-busy`, so a screen reader waits for the
+ *    settled turn instead of reading every token. `announcement` is a separate
+ *    status region for the two moments that matter: a response starting and a
+ *    response finishing.
+ *
+ * What it does not own: which turns exist, their identity, or what "older"
+ * means. The host passes children and a loader; a session switch is
+ * `resetKey`, which re-arms follow and discards any in-flight anchor.
+ */
+export type MessageScrollerProps = Omit<ConversationSurfaceProps, 'header' | 'empty'> & {
+    /** There are earlier turns the host can load. */
+    hasOlder?: boolean;
+    /** The host is loading earlier turns right now. */
+    loadingOlder?: boolean;
+    /**
+     * Load earlier turns. The scroller preserves the reader's position across the
+     * resulting insert whether the host resolves before or after rendering them.
+     */
+    onLoadOlder?: () => void | Promise<void>;
+    /** Words for the loader row; override for another language. */
+    olderLabel?: string;
+    loadingOlderLabel?: string;
+    /** Rendered above the first turn, below the history control. */
+    header?: JSX.Element;
+    /** Rendered when there are no turns. */
+    empty?: JSX.Element;
+    /** A short sentence for the live status region ("Assistant is responding"). */
+    announcement?: string;
+};
+export declare function MessageScroller(props: MessageScrollerProps): JSX.Element;
+//# sourceMappingURL=message-scroller.d.ts.map

package/dist/components/composites/message-scroller/message-scroller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-scroller.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/message-scroller/message-scroller.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2D,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAG5F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,yCAAyC,CAAA;AAGhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,wBAAwB,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IACtF,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACxC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,gEAAgE;IAChE,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,wCAAwC;IACxC,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACnB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAQD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAwO1D"}

package/dist/components/composites/message-scroller/message-scroller.js

@@ -0,0 +1,201 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { ConversationSurface } from "../../conversation/conversation-surface.js";
+import { anchorIds, captureAnchor, restoreAnchor } from "./scroll-anchor.js";
+import { className, createComponent, effect, insert, memo, mergeProps, template, use } from "solid-js/web";
+import { History, LoaderCircle } from "lucide-solid";
+import { Show, createEffect, createSignal, onCleanup, splitProps } from "solid-js";
+//#region src/components/composites/message-scroller/message-scroller.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=message-scroller><p role=status class=sr-only>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<p role=status class="flex h-control-sm items-center gap-1.5 text-xs text-muted-foreground">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=message-scroller-older class="flex justify-center py-2">`);
+/** How far from the top counts as "reached the top", in px. */
+var TOP_MARGIN = 160;
+/** How long a host that still reports `loadingOlder` is waited for, in frames (~10 s). */
+var MAX_HOST_WAIT_FRAMES = 600;
+function MessageScroller(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"hasOlder",
+		"loadingOlder",
+		"onLoadOlder",
+		"olderLabel",
+		"loadingOlderLabel",
+		"header",
+		"empty",
+		"announcement",
+		"ref",
+		"resetKey",
+		"children"
+	]);
+	let scroller;
+	let holdFollow;
+	let epoch = 0;
+	const [inFlight, setInFlight] = createSignal(false);
+	let nativeAnchoring;
+	const holdNativeAnchoring = () => {
+		if (!scroller || nativeAnchoring !== void 0) return;
+		nativeAnchoring = scroller.style.overflowAnchor;
+		scroller.style.overflowAnchor = "none";
+	};
+	const releaseNativeAnchoring = () => {
+		if (scroller && nativeAnchoring !== void 0) scroller.style.overflowAnchor = nativeAnchoring;
+		nativeAnchoring = void 0;
+	};
+	createEffect(() => {
+		local.resetKey;
+		epoch += 1;
+		setInFlight(false);
+		stopWatching();
+		releaseNativeAnchoring();
+	});
+	const settle = (anchor, run, heightBefore, restoreFocus, releaseHold) => {
+		const finish = () => {
+			if (run !== epoch) return releaseHold?.();
+			if (scroller) restoreAnchor(scroller, anchor);
+			stopWatching();
+			releaseNativeAnchoring();
+			setInFlight(false);
+			if (restoreFocus && scroller && document.activeElement === document.body) (scroller.querySelector("[data-slot=\"message-scroller-older\"] button") ?? scroller).focus({ preventScroll: true });
+			if (scroller && local.hasOlder && scroller.scrollTop < TOP_MARGIN && scroller.scrollHeight > heightBefore) load();
+			releaseHold?.();
+		};
+		const wait = (waited) => requestAnimationFrame(() => {
+			if (run !== epoch) return releaseHold?.();
+			if (local.loadingOlder && waited < MAX_HOST_WAIT_FRAMES) return void wait(waited + 1);
+			finish();
+		});
+		requestAnimationFrame(() => wait(0));
+	};
+	let observer;
+	let resizer;
+	let unfollow;
+	const stopWatching = () => {
+		observer?.disconnect();
+		resizer?.disconnect();
+		unfollow?.();
+		unfollow = void 0;
+	};
+	const load = async (fromControl = false) => {
+		if (!scroller || !local.onLoadOlder || !local.hasOlder || local.loadingOlder || inFlight()) return;
+		const run = epoch;
+		const anchor = captureAnchor(scroller);
+		anchor.known = anchorIds(scroller);
+		const heightBefore = scroller.scrollHeight;
+		const restoreFocus = fromControl && document.activeElement?.closest("[data-slot=\"message-scroller-older\"]") != null;
+		setInFlight(true);
+		holdNativeAnchoring();
+		stopWatching();
+		observer = new MutationObserver(() => {
+			if (run === epoch && scroller) restoreAnchor(scroller, anchor);
+		});
+		observer.observe(scroller, {
+			childList: true,
+			subtree: true
+		});
+		const content = scroller.querySelector("[data-slot=\"conversation-content\"]");
+		if (content && typeof ResizeObserver !== "undefined") {
+			resizer = new ResizeObserver(() => {
+				if (run === epoch && scroller) restoreAnchor(scroller, anchor);
+			});
+			resizer.observe(content);
+		}
+		const follow = () => {
+			if (run === epoch && scroller) restoreAnchor(scroller, anchor);
+		};
+		scroller.addEventListener("scroll", follow, { passive: true });
+		const watched = scroller;
+		unfollow = () => watched.removeEventListener("scroll", follow);
+		try {
+			await local.onLoadOlder();
+		} catch {}
+		settle(anchor, run, heightBefore, restoreFocus, run !== epoch ? holdFollow?.() : void 0);
+	};
+	onCleanup(() => {
+		epoch += 1;
+		stopWatching();
+		releaseNativeAnchoring();
+	});
+	const watchTop = (element) => {
+		if (typeof IntersectionObserver === "undefined") return;
+		const io = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) load();
+		}, {
+			root: scroller ?? null,
+			rootMargin: `${TOP_MARGIN}px 0px 0px 0px`
+		});
+		io.observe(element);
+		onCleanup(() => io.disconnect());
+	};
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		insert(_el$, createComponent(ConversationSurface, mergeProps({
+			role: "log",
+			"aria-live": "polite",
+			"aria-relevant": "additions",
+			get resetKey() {
+				return local.resetKey;
+			},
+			onFollowHold: (hold) => {
+				holdFollow = hold;
+			}
+		}, rest, {
+			ref: (element) => {
+				scroller = element;
+				if (typeof local.ref === "function") local.ref(element);
+			},
+			"class": "flex-1",
+			get header() {
+				return [createComponent(Show, {
+					get when() {
+						return local.hasOlder || local.loadingOlder;
+					},
+					get children() {
+						var _el$3 = _tmpl$3();
+						use(watchTop, _el$3);
+						insert(_el$3, createComponent(Show, {
+							get when() {
+								return local.loadingOlder || inFlight();
+							},
+							get fallback() {
+								return createComponent(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									"class": "gap-1.5 text-muted-foreground",
+									onClick: () => void load(true),
+									get children() {
+										return [createComponent(History, { "aria-hidden": "true" }), memo(() => local.olderLabel ?? "Load earlier messages")];
+									}
+								});
+							},
+							get children() {
+								var _el$4 = _tmpl$2();
+								insert(_el$4, createComponent(LoaderCircle, {
+									"aria-hidden": "true",
+									"class": "size-3.5 motion-safe:animate-spin"
+								}), null);
+								insert(_el$4, () => local.loadingOlderLabel ?? "Loading earlier messages…", null);
+								return _el$4;
+							}
+						}));
+						return _el$3;
+					}
+				}), memo(() => local.header)];
+			},
+			get empty() {
+				return local.empty;
+			},
+			get children() {
+				return local.children;
+			}
+		})), _el$2);
+		insert(_el$2, () => local.announcement);
+		effect(() => className(_el$, cn("relative flex min-h-0 flex-1 flex-col", local.class)));
+		return _el$;
+	})();
+}
+//#endregion
+export { MessageScroller };
+
+//# sourceMappingURL=message-scroller.js.map

package/dist/components/composites/message-scroller/message-scroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-scroller.js","names":["History","LoaderCircle","createEffect","onCleanup","Show","splitProps","createSignal","JSX","cn","Button","ConversationSurface","ConversationSurfaceProps","anchorIds","captureAnchor","restoreAnchor","ScrollAnchor","MessageScrollerProps","Omit","hasOlder","loadingOlder","onLoadOlder","Promise","olderLabel","loadingOlderLabel","header","Element","empty","announcement","TOP_MARGIN","MAX_HOST_WAIT_FRAMES","MessageScroller","props","local","rest","scroller","HTMLDivElement","holdFollow","epoch","inFlight","setInFlight","nativeAnchoring","holdNativeAnchoring","undefined","style","overflowAnchor","releaseNativeAnchoring","resetKey","stopWatching","settle","anchor","run","heightBefore","restoreFocus","releaseHold","finish","document","activeElement","body","again","querySelector","HTMLElement","focus","preventScroll","scrollTop","scrollHeight","load","wait","waited","requestAnimationFrame","observer","MutationObserver","resizer","ResizeObserver","unfollow","disconnect","fromControl","known","closest","observe","childList","subtree","content","follow","addEventListener","passive","watched","removeEventListener","watchTop","element","IntersectionObserver","io","entries","some","entry","isIntersecting","root","rootMargin","_el$","_tmpl$","_el$2","firstChild","_$insert","_$createComponent","_$mergeProps","role","onFollowHold","hold","ref","when","children","_el$3","_tmpl$3","_$use","fallback","type","variant","size","onClick","_$memo","_el$4","_tmpl$2","_$effect","_$className","class","_$createComponent","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/composites/message-scroller/message-scroller.tsx"],"sourcesContent":["import { History, LoaderCircle } from 'lucide-solid'\nimport { createEffect, onCleanup, Show, splitProps, createSignal, type JSX } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Button } from '../../ui/button'\nimport {\n  ConversationSurface,\n  type ConversationSurfaceProps,\n} from '../../conversation/conversation-surface'\nimport { anchorIds, captureAnchor, restoreAnchor, type ScrollAnchor } from './scroll-anchor'\n\n/**\n * MessageScroller.\n *\n * The thread. It owns the three scroll behaviours a chat gets wrong when each\n * is bolted on separately, and keeps them from fighting:\n *\n * 1. **Follow the reply only while the reader is at the bottom.** New and\n *    streaming content scrolls into view when the reader is already at the end,\n *    and never otherwise. Scrolling up parks the view; the \"Jump to latest\"\n *    control brings it back. (This is `ConversationSurface`'s follow contract,\n *    which this component wraps rather than reimplements.)\n * 2. **Load history without moving what the reader is looking at.** When the\n *    reader reaches the top, `onLoadOlder` is asked for earlier turns. Turns\n *    inserted *above* the viewport would normally push the visible content down\n *    by exactly their height; here the first visible turn (found by\n *    `data-anchor-id`, which `Message` sets from `anchorId`) is measured before\n *    the load and put back to the same offset after it, on every layout change\n *    until the load settles — so images and code blocks that size themselves\n *    late do not jolt the view either. A \"Load earlier\" button is always present\n *    while there is more, because the scroll trigger alone is unreachable to a\n *    keyboard or switch user and fires nothing in a short pane.\n * 3. **Announce without flooding.** The scroller is a polite log, and a turn that\n *    is still arriving marks itself `aria-busy`, so a screen reader waits for the\n *    settled turn instead of reading every token. `announcement` is a separate\n *    status region for the two moments that matter: a response starting and a\n *    response finishing.\n *\n * What it does not own: which turns exist, their identity, or what \"older\"\n * means. The host passes children and a loader; a session switch is\n * `resetKey`, which re-arms follow and discards any in-flight anchor.\n */\nexport type MessageScrollerProps = Omit<ConversationSurfaceProps, 'header' | 'empty'> & {\n  /** There are earlier turns the host can load. */\n  hasOlder?: boolean\n  /** The host is loading earlier turns right now. */\n  loadingOlder?: boolean\n  /**\n   * Load earlier turns. The scroller preserves the reader's position across the\n   * resulting insert whether the host resolves before or after rendering them.\n   */\n  onLoadOlder?: () => void | Promise<void>\n  /** Words for the loader row; override for another language. */\n  olderLabel?: string\n  loadingOlderLabel?: string\n  /** Rendered above the first turn, below the history control. */\n  header?: JSX.Element\n  /** Rendered when there are no turns. */\n  empty?: JSX.Element\n  /** A short sentence for the live status region (\"Assistant is responding\"). */\n  announcement?: string\n}\n\n/** How far from the top counts as \"reached the top\", in px. */\nconst TOP_MARGIN = 160\n\n/** How long a host that still reports `loadingOlder` is waited for, in frames (~10 s). */\nconst MAX_HOST_WAIT_FRAMES = 600\n\nexport function MessageScroller(props: MessageScrollerProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'hasOlder',\n    'loadingOlder',\n    'onLoadOlder',\n    'olderLabel',\n    'loadingOlderLabel',\n    'header',\n    'empty',\n    'announcement',\n    'ref',\n    'resetKey',\n    'children',\n  ])\n  let scroller: HTMLDivElement | undefined\n  let holdFollow: (() => () => void) | undefined\n  let epoch = 0\n  const [inFlight, setInFlight] = createSignal(false)\n\n  // While a load holds the reader's place, the browser's own scroll anchoring is\n  // switched off: it moves the offset by the same insert, and the two corrections\n  // would be added together.\n  let nativeAnchoring: string | undefined\n  const holdNativeAnchoring = () => {\n    if (!scroller || nativeAnchoring !== undefined) return\n    nativeAnchoring = scroller.style.overflowAnchor\n    scroller.style.overflowAnchor = 'none'\n  }\n  const releaseNativeAnchoring = () => {\n    if (scroller && nativeAnchoring !== undefined) scroller.style.overflowAnchor = nativeAnchoring\n    nativeAnchoring = undefined\n  }\n\n  // A session switch invalidates a load that was started for the previous one.\n  createEffect(() => {\n    void local.resetKey\n    epoch += 1\n    setInFlight(false)\n    stopWatching()\n    releaseNativeAnchoring()\n  })\n\n  const settle = (\n    anchor: ScrollAnchor | undefined,\n    run: number,\n    heightBefore: number,\n    restoreFocus: boolean,\n    releaseHold?: () => void\n  ) => {\n    const finish = () => {\n      if (run !== epoch) return releaseHold?.()\n      if (scroller) restoreAnchor(scroller, anchor)\n      stopWatching()\n      releaseNativeAnchoring()\n      setInFlight(false)\n      // The control that started the load was replaced by the loading line, which\n      // takes focus with it. Put it back on the control (or the thread), so a\n      // keyboard user is not dropped onto the page.\n      if (restoreFocus && scroller && document.activeElement === document.body) {\n        const again = scroller.querySelector<HTMLElement>(\n          '[data-slot=\"message-scroller-older\"] button'\n        )\n        ;(again ?? scroller).focus({ preventScroll: true })\n      }\n      // Still at the top after a load that added content: keep going, so a\n      // pane taller than one page of history fills without a second scroll.\n      if (\n        scroller &&\n        local.hasOlder &&\n        scroller.scrollTop < TOP_MARGIN &&\n        scroller.scrollHeight > heightBefore\n      )\n        void load()\n      releaseHold?.()\n    }\n    // Two frames: the first lets the host's insert commit, the second lets\n    // late-sizing content (images, highlighted code) report its height. A host\n    // that says it is still loading (`loadingOlder`) after its promise resolved\n    // is not finished either: its turns will land later, and the anchor must\n    // still be held when they do.\n    const wait = (waited: number) =>\n      requestAnimationFrame(() => {\n        if (run !== epoch) return releaseHold?.()\n        if (local.loadingOlder && waited < MAX_HOST_WAIT_FRAMES) return void wait(waited + 1)\n        finish()\n      })\n    requestAnimationFrame(() => wait(0))\n  }\n\n  let observer: MutationObserver | undefined\n  let resizer: ResizeObserver | undefined\n  let unfollow: (() => void) | undefined\n  const stopWatching = () => {\n    observer?.disconnect()\n    resizer?.disconnect()\n    unfollow?.()\n    unfollow = undefined\n  }\n  const load = async (fromControl = false) => {\n    if (!scroller || !local.onLoadOlder || !local.hasOlder || local.loadingOlder || inFlight())\n      return\n    const run = epoch\n    const anchor = captureAnchor(scroller)\n    anchor.known = anchorIds(scroller)\n    const heightBefore = scroller.scrollHeight\n    const restoreFocus =\n      fromControl && document.activeElement?.closest('[data-slot=\"message-scroller-older\"]') != null\n    setInFlight(true)\n    holdNativeAnchoring()\n    // Every layout change while the load is open re-pins the anchor *before\n    // paint*, which is what makes the insert invisible.\n    stopWatching()\n    observer = new MutationObserver(() => {\n      if (run === epoch && scroller) restoreAnchor(scroller, anchor)\n    })\n    observer.observe(scroller, { childList: true, subtree: true })\n    // Turns that size themselves late (`content-visibility`, images, highlighted code)\n    // move the anchor without adding or removing a node, and with the browser's own\n    // anchoring held off nothing else would carry the reader through that.\n    const content = scroller.querySelector('[data-slot=\"conversation-content\"]')\n    if (content && typeof ResizeObserver !== 'undefined') {\n      resizer = new ResizeObserver(() => {\n        if (run === epoch && scroller) restoreAnchor(scroller, anchor)\n      })\n      resizer.observe(content)\n    }\n    // The reader may carry on scrolling while the host answers. A restore re-takes the\n    // anchor on the turn they have come to, whichever of the observers or this event\n    // reaches it first.\n    const follow = () => {\n      if (run === epoch && scroller) restoreAnchor(scroller, anchor)\n    }\n    scroller.addEventListener('scroll', follow, { passive: true })\n    const watched = scroller\n    unfollow = () => watched.removeEventListener('scroll', follow)\n    try {\n      await local.onLoadOlder()\n    } catch {\n      // The host reports its own failure; the control stays so the reader can retry.\n    }\n    // A load that outlived its conversation inserts into a thread whose reader it knows\n    // nothing about, and the anchor it held is gone. What it does to the layout (rows\n    // taking their height, a clamp, the insert itself) is not the reader scrolling, so the\n    // follow position is held until the two frames the insert needs have passed.\n    settle(anchor, run, heightBefore, restoreFocus, run !== epoch ? holdFollow?.() : undefined)\n  }\n\n  onCleanup(() => {\n    epoch += 1\n    stopWatching()\n    releaseNativeAnchoring()\n  })\n\n  const watchTop = (element: HTMLDivElement) => {\n    if (typeof IntersectionObserver === 'undefined') return\n    const io = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) void load()\n      },\n      { root: scroller ?? null, rootMargin: `${TOP_MARGIN}px 0px 0px 0px` }\n    )\n    io.observe(element)\n    onCleanup(() => io.disconnect())\n  }\n\n  return (\n    <div\n      class={cn('relative flex min-h-0 flex-1 flex-col', local.class)}\n      data-slot=\"message-scroller\"\n    >\n      <ConversationSurface\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions\"\n        resetKey={local.resetKey}\n        onFollowHold={(hold) => {\n          holdFollow = hold\n        }}\n        {...rest}\n        ref={(element) => {\n          scroller = element\n          if (typeof local.ref === 'function') local.ref(element)\n        }}\n        class=\"flex-1\"\n        header={\n          <>\n            <Show when={local.hasOlder || local.loadingOlder}>\n              <div\n                ref={watchTop}\n                data-slot=\"message-scroller-older\"\n                class=\"flex justify-center py-2\"\n              >\n                <Show\n                  when={local.loadingOlder || inFlight()}\n                  fallback={\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      class=\"gap-1.5 text-muted-foreground\"\n                      onClick={() => void load(true)}\n                    >\n                      <History aria-hidden=\"true\" />\n                      {local.olderLabel ?? 'Load earlier messages'}\n                    </Button>\n                  }\n                >\n                  <p\n                    role=\"status\"\n                    // The button's own height: swapping one for the other must not move\n                    // the turns below it by even a pixel while the anchor is being held.\n                    class=\"flex h-control-sm items-center gap-1.5 text-xs text-muted-foreground\"\n                  >\n                    <LoaderCircle aria-hidden=\"true\" class=\"size-3.5 motion-safe:animate-spin\" />\n                    {local.loadingOlderLabel ?? 'Loading earlier messages…'}\n                  </p>\n                </Show>\n              </div>\n            </Show>\n            {local.header}\n          </>\n        }\n        empty={local.empty}\n      >\n        {local.children}\n      </ConversationSurface>\n      <p role=\"status\" class=\"sr-only\">\n        {local.announcement}\n      </p>\n    </div>\n  )\n}\n"],"mappings":"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"}