@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/ai-conversation/ai-conversation.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../../lib/utils.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region src/components/ai-conversation/ai-conversation.tsx
 const ConversationContext = createContext(null);
@@ -9,6 +9,18 @@ function useConversation(component) {
 	if (!context) throw new Error(`${component} must be rendered inside <Conversation>.`);
 	return context;
 }
+/**
+* Resolves `"smooth"` to `"auto"` for readers who asked for less motion.
+*
+* The theme's `scroll-behavior: auto !important` only governs the CSS default:
+* an explicit `behavior: "smooth"` passed to `scrollTo` still animates, so the
+* preference has to be honoured here.
+*/
+function resolveBehavior(behavior) {
+	if (behavior !== "smooth") return behavior;
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return behavior;
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : behavior;
+}
 /** How close to the bottom still counts as "at the bottom", in pixels. */
 const BOTTOM_THRESHOLD = 32;
 function Conversation({ className, autoScroll = true, children, ...props }) {
@@ -17,9 +29,13 @@ function Conversation({ className, autoScroll = true, children, ...props }) {
 	const scrollToBottom = useCallback((behavior = "smooth") => {
 		const viewport = viewportRef.current;
 		if (!viewport) return;
+		if (typeof viewport.scrollTo !== "function") {
+			viewport.scrollTop = viewport.scrollHeight;
+			return;
+		}
 		viewport.scrollTo({
 			top: viewport.scrollHeight,
-			behavior
+			behavior: resolveBehavior(behavior)
 		});
 	}, []);
 	useEffect(() => {
@@ -82,6 +98,15 @@ function ConversationMessages({ className, ...props }) {
 		...props
 	});
 }
+/** Default wording per state. `idle` is empty, so first paint announces nothing. */
+const STATE_LABELS = {
+	idle: "",
+	listening: "Listening",
+	thinking: "Thinking",
+	streaming: "Generating response",
+	done: "Response complete",
+	error: "Response failed"
+};
 /**
 * A polite live region for conversation state.
 *
@@ -89,33 +114,76 @@ function ConversationMessages({ className, ...props }) {
 * the response *text* here instead is the mistake this component exists to
 * prevent.
 */
-function ConversationStatus({ className, children, ...props }) {
+function ConversationStatus({ className, children, state, stateLabels, ...props }) {
+	const worded = state === void 0 ? void 0 : stateLabels?.[state] ?? STATE_LABELS[state];
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "conversation-status",
 		role: "status",
 		"aria-live": "polite",
 		className: cn("px-4 text-xs text-muted-foreground", className),
 		...props,
-		children
+		children: children ?? worded
 	});
 }
+const PREFIX = "dowel-ai-conversation";
+const STYLES = `
+@keyframes ${PREFIX}-pill-in{from{opacity:0;translate:0 8px;scale:.96}}
+@keyframes ${PREFIX}-pill-out{to{opacity:0;translate:0 8px;scale:.96}}
+[data-slot=conversation-scroll-button][data-state=open]{animation:${PREFIX}-pill-in calc(250ms * var(--motion-scale,1)) var(--ease-out-quint) both}
+[data-slot=conversation-scroll-button][data-state=closed]{animation:${PREFIX}-pill-out calc(130ms * var(--motion-scale,1)) var(--ease-in-quint) both;pointer-events:none}
+`;
+/** Unmounts a closing pill even if its exit animation never reports ending. */
+const EXIT_FALLBACK_MS = 400;
 /**
 * Returns the reader to the newest message.
 *
 * Rendered only when they have scrolled away, and removed from the DOM
 * otherwise so it is never a focus stop pointing at where the reader already
-* is.
+* is. While it plays its exit it is `inert` and `aria-hidden`: already gone as
+* far as focus, clicks and assistive technology are concerned.
 */
-function ConversationScrollButton({ className, label = "Jump to latest", ...props }) {
+function ConversationScrollButton({ className, label = "Jump to latest", ref, ...props }) {
 	const { atBottom, scrollToBottom } = useConversation("ConversationScrollButton");
-	if (atBottom) return null;
-	return /* @__PURE__ */ jsxs("button", {
+	const [phase, setPhase] = useState(atBottom ? "hidden" : "open");
+	const buttonRef = useRef(null);
+	if (!atBottom && phase !== "open") setPhase("open");
+	if (atBottom && phase === "open") setPhase("closing");
+	useEffect(() => {
+		if (phase !== "closing") return;
+		const button = buttonRef.current;
+		const finish = (event) => {
+			if (event && event.target !== button) return;
+			setPhase("hidden");
+		};
+		const timer = setTimeout(finish, EXIT_FALLBACK_MS);
+		button?.addEventListener("animationend", finish);
+		return () => {
+			clearTimeout(timer);
+			button?.removeEventListener("animationend", finish);
+		};
+	}, [phase]);
+	if (phase === "hidden") return null;
+	const closing = phase === "closing";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsxs("button", {
 		type: "button",
+		ref: (node) => {
+			buttonRef.current = node;
+			if (typeof ref === "function") return ref(node);
+			if (ref) ref.current = node;
+		},
 		"data-slot": "conversation-scroll-button",
+		"data-state": closing ? "closed" : "open",
+		inert: closing || void 0,
+		"aria-hidden": closing || void 0,
+		tabIndex: closing ? -1 : void 0,
 		onClick: () => {
 			scrollToBottom();
 		},
-		className: cn("absolute bottom-3 left-1/2 z-[var(--z-sticky)] flex -translate-x-1/2 items-center gap-1.5", "rounded-full border border-border bg-popover px-3 py-1.5 text-xs font-medium shadow-md", "transition-colors duration-[var(--duration-fast)] hover:bg-accent", "outline-none focus-visible:ring-2 focus-visible:ring-ring/55", className),
+		className: cn("absolute inset-x-0 bottom-3 z-[var(--z-sticky)] mx-auto flex w-fit items-center gap-1.5", "rounded-full border border-border bg-popover px-3 py-1.5 text-xs font-medium shadow-md", "transition-colors duration-[var(--duration-fast)] hover:bg-accent", "outline-none focus-visible:ring-2 focus-visible:ring-ring/55", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("svg", {
 			viewBox: "0 0 24 24",
@@ -130,7 +198,7 @@ function ConversationScrollButton({ className, label = "Jump to latest", ...prop
 				strokeLinejoin: "round"
 			})
 		}), label]
-	});
+	})] });
 }
 //#endregion
 export { Conversation, ConversationMessages, ConversationScrollButton, ConversationStatus };

package/dist/components/ai-conversation/ai-conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-conversation.js","names":[],"sources":["../../../src/components/ai-conversation/ai-conversation.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The scrolling container for a conversation.\n *\n * Two problems here are easy to get wrong and unpleasant to live with.\n *\n * **Scrolling.** A chat should follow new content, but only while the reader is\n * already at the bottom. The moment someone scrolls up to re-read something,\n * yanking them back down is worse than not following at all — so this tracks\n * whether they are pinned to the bottom and stops following as soon as they are\n * not, offering an explicit way back instead.\n *\n * **Announcements.** The obvious thing is to make the transcript a live region.\n * Do not: a live region that updates on every token produces a stream of\n * interruptions that is unusable with a screen reader, and it is the single\n * most common accessibility failure in chat interfaces. The transcript here is\n * an ordinary list, navigable at the reader's pace, and a *separate* status\n * region announces state — \"generating\", \"response complete\" — never content.\n */\n\ninterface ConversationContextValue {\n  viewportRef: React.RefObject<HTMLDivElement | null>;\n  atBottom: boolean;\n  scrollToBottom: (behavior?: ScrollBehavior) => void;\n}\n\nconst ConversationContext = createContext<ConversationContextValue | null>(null);\n\nfunction useConversation(component: string): ConversationContextValue {\n  const context = useContext(ConversationContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Conversation>.`);\n  }\n  return context;\n}\n\n/** How close to the bottom still counts as \"at the bottom\", in pixels. */\nconst BOTTOM_THRESHOLD = 32;\n\nexport interface ConversationProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Follow new content while the reader is at the bottom.\n   *\n   * Turning this off never scrolls automatically; it does not pin the view.\n   */\n  autoScroll?: boolean;\n}\n\nexport function Conversation({\n  className,\n  autoScroll = true,\n  children,\n  ...props\n}: ConversationProps) {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const [atBottom, setAtBottom] = useState(true);\n\n  const scrollToBottom = useCallback((behavior: ScrollBehavior = \"smooth\") => {\n    const viewport = viewportRef.current;\n    if (!viewport) return;\n    viewport.scrollTo({ top: viewport.scrollHeight, behavior });\n  }, []);\n\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    if (!viewport) return;\n\n    function handleScroll() {\n      if (!viewport) return;\n      const distance = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;\n      setAtBottom(distance <= BOTTOM_THRESHOLD);\n    }\n\n    handleScroll();\n    viewport.addEventListener(\"scroll\", handleScroll, { passive: true });\n    return () => {\n      viewport.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, []);\n\n  // Follows content as it grows, but only while the reader is pinned to the\n  // bottom. Layout effect so the jump happens before paint rather than as a\n  // visible lurch.\n  useLayoutEffect(() => {\n    const viewport = viewportRef.current;\n    if (!viewport || !autoScroll) return;\n\n    const observer = new ResizeObserver(() => {\n      if (atBottom) viewport.scrollTop = viewport.scrollHeight;\n    });\n\n    for (const child of viewport.children) observer.observe(child);\n    return () => {\n      observer.disconnect();\n    };\n  }, [autoScroll, atBottom]);\n\n  const context = useMemo<ConversationContextValue>(\n    () => ({ viewportRef, atBottom, scrollToBottom }),\n    [atBottom, scrollToBottom],\n  );\n\n  return (\n    <ConversationContext.Provider value={context}>\n      <div\n        data-slot=\"conversation\"\n        data-at-bottom={atBottom || undefined}\n        className={cn(\"relative flex min-h-0 flex-1 flex-col\", className)}\n        {...props}\n      >\n        <div\n          ref={viewportRef}\n          data-slot=\"conversation-viewport\"\n          className=\"flex-1 overflow-y-auto overscroll-contain\"\n        >\n          {children}\n        </div>\n      </div>\n    </ConversationContext.Provider>\n  );\n}\n\n/**\n * The transcript.\n *\n * An ordered list, deliberately not a live region — see the note on\n * `Conversation`. Order is meaning here, and list semantics give a screen\n * reader user position and count (\"3 of 12\") as they move through it.\n */\nexport function ConversationMessages({ className, ...props }: ComponentPropsWithRef<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"conversation-messages\"\n      className={cn(\"flex flex-col gap-6 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ConversationStatusProps extends ComponentPropsWithRef<\"div\"> {\n  /** Announced politely when it changes. Keep it short: state, never content. */\n  children?: ReactNode;\n}\n\n/**\n * A polite live region for conversation state.\n *\n * This is where \"generating response\" and \"response complete\" belong. Putting\n * the response *text* here instead is the mistake this component exists to\n * prevent.\n */\nexport function ConversationStatus({ className, children, ...props }: ConversationStatusProps) {\n  return (\n    <div\n      data-slot=\"conversation-status\"\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\"px-4 text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface ConversationScrollButtonProps extends ComponentPropsWithRef<\"button\"> {\n  label?: string;\n}\n\n/**\n * Returns the reader to the newest message.\n *\n * Rendered only when they have scrolled away, and removed from the DOM\n * otherwise so it is never a focus stop pointing at where the reader already\n * is.\n */\nexport function ConversationScrollButton({\n  className,\n  label = \"Jump to latest\",\n  ...props\n}: ConversationScrollButtonProps) {\n  const { atBottom, scrollToBottom } = useConversation(\"ConversationScrollButton\");\n  if (atBottom) return null;\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"conversation-scroll-button\"\n      onClick={() => {\n        scrollToBottom();\n      }}\n      className={cn(\n        \"absolute bottom-3 left-1/2 z-[var(--z-sticky)] flex -translate-x-1/2 items-center gap-1.5\",\n        \"rounded-full border border-border bg-popover px-3 py-1.5 text-xs font-medium shadow-md\",\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-ring/55\",\n        className,\n      )}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n        <path\n          d=\"M12 5v14m0 0-6-6m6 6 6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n      {label}\n    </button>\n  );\n}\n"],"mappings":";;;;;AA0CA,MAAM,sBAAsB,cAA+C,IAAI;AAE/E,SAAS,gBAAgB,WAA6C;CACpE,MAAM,UAAU,WAAW,mBAAmB;CAC9C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,GAAG,UAAU,yCAAyC;CAExE,OAAO;AACT;;AAGA,MAAM,mBAAmB;AAWzB,SAAgB,aAAa,EAC3B,WACA,aAAa,MACb,UACA,GAAG,SACiB;CACpB,MAAM,cAAc,OAA8B,IAAI;CACtD,MAAM,CAAC,UAAU,eAAe,SAAS,IAAI;CAE7C,MAAM,iBAAiB,aAAa,WAA2B,aAAa;EAC1E,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,UAAU;EACf,SAAS,SAAS;GAAE,KAAK,SAAS;GAAc;EAAS,CAAC;CAC5D,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,UAAU;EAEf,SAAS,eAAe;GACtB,IAAI,CAAC,UAAU;GACf,MAAM,WAAW,SAAS,eAAe,SAAS,YAAY,SAAS;GACvE,YAAY,YAAY,gBAAgB;EAC1C;EAEA,aAAa;EACb,SAAS,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;EACnE,aAAa;GACX,SAAS,oBAAoB,UAAU,YAAY;EACrD;CACF,GAAG,CAAC,CAAC;CAKL,sBAAsB;EACpB,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,YAAY,CAAC,YAAY;EAE9B,MAAM,WAAW,IAAI,qBAAqB;GACxC,IAAI,UAAU,SAAS,YAAY,SAAS;EAC9C,CAAC;EAED,KAAK,MAAM,SAAS,SAAS,UAAU,SAAS,QAAQ,KAAK;EAC7D,aAAa;GACX,SAAS,WAAW;EACtB;CACF,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,UAAU,eACP;EAAE;EAAa;EAAU;CAAe,IAC/C,CAAC,UAAU,cAAc,CAC3B;CAEA,OACE,oBAAC,oBAAoB,UAArB;EAA8B,OAAO;EACnC,UAAA,oBAAC,OAAD;GACE,aAAU;GACV,kBAAgB,YAAY,KAAA;GAC5B,WAAW,GAAG,yCAAyC,SAAS;GAChE,GAAI;GAEJ,UAAA,oBAAC,OAAD;IACE,KAAK;IACL,aAAU;IACV,WAAU;IAET;GACE,CAAA;EACF,CAAA;CACuB,CAAA;AAElC;;;;;;;;AASA,SAAgB,qBAAqB,EAAE,WAAW,GAAG,SAAsC;CACzF,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;;;;;;;AAcA,SAAgB,mBAAmB,EAAE,WAAW,UAAU,GAAG,SAAkC;CAC7F,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;EAEH;CACE,CAAA;AAET;;;;;;;;AAaA,SAAgB,yBAAyB,EACvC,WACA,QAAQ,kBACR,GAAG,SAC6B;CAChC,MAAM,EAAE,UAAU,mBAAmB,gBAAgB,0BAA0B;CAC/E,IAAI,UAAU,OAAO;CAErB,OACE,qBAAC,UAAD;EACE,MAAK;EACL,aAAU;EACV,eAAe;GACb,eAAe;EACjB;EACA,WAAW,GACT,6FACA,0FACA,qEACA,gEACA,SACF;EACA,GAAI;EAbN,UAAA,CAeE,oBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAY;GAAO,WAAU;GAChE,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA,GACJ,KACK;;AAEZ"}
+{"version":3,"file":"ai-conversation.js","names":[],"sources":["../../../src/components/ai-conversation/ai-conversation.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AI Conversation (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The scrolling container for a conversation.\n *\n * Two problems here are easy to get wrong and unpleasant to live with.\n *\n * **Scrolling.** A chat should follow new content, but only while the reader is\n * already at the bottom. The moment someone scrolls up to re-read something,\n * yanking them back down is worse than not following at all — so this tracks\n * whether they are pinned to the bottom and stops following as soon as they are\n * not, offering an explicit way back instead.\n *\n * **Announcements.** The obvious thing is to make the transcript a live region.\n * Do not: a live region that updates on every token produces a stream of\n * interruptions that is unusable with a screen reader, and it is the single\n * most common accessibility failure in chat interfaces. The transcript here is\n * an ordinary list, navigable at the reader's pace, and a *separate* status\n * region announces state — \"generating\", \"response complete\" — never content.\n */\n\ninterface ConversationContextValue {\n  viewportRef: React.RefObject<HTMLDivElement | null>;\n  atBottom: boolean;\n  scrollToBottom: (behavior?: ScrollBehavior) => void;\n}\n\nconst ConversationContext = createContext<ConversationContextValue | null>(null);\n\nfunction useConversation(component: string): ConversationContextValue {\n  const context = useContext(ConversationContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Conversation>.`);\n  }\n  return context;\n}\n\n/**\n * Resolves `\"smooth\"` to `\"auto\"` for readers who asked for less motion.\n *\n * The theme's `scroll-behavior: auto !important` only governs the CSS default:\n * an explicit `behavior: \"smooth\"` passed to `scrollTo` still animates, so the\n * preference has to be honoured here.\n */\nfunction resolveBehavior(behavior: ScrollBehavior): ScrollBehavior {\n  if (behavior !== \"smooth\") return behavior;\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return behavior;\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ? \"auto\" : behavior;\n}\n\n/** How close to the bottom still counts as \"at the bottom\", in pixels. */\nconst BOTTOM_THRESHOLD = 32;\n\nexport interface ConversationProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Follow new content while the reader is at the bottom.\n   *\n   * Turning this off never scrolls automatically; it does not pin the view.\n   */\n  autoScroll?: boolean;\n}\n\nexport function Conversation({\n  className,\n  autoScroll = true,\n  children,\n  ...props\n}: ConversationProps) {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const [atBottom, setAtBottom] = useState(true);\n\n  const scrollToBottom = useCallback((behavior: ScrollBehavior = \"smooth\") => {\n    const viewport = viewportRef.current;\n    if (!viewport) return;\n    // jsdom and some embedded webviews have no Element.scrollTo.\n    if (typeof viewport.scrollTo !== \"function\") {\n      viewport.scrollTop = viewport.scrollHeight;\n      return;\n    }\n    viewport.scrollTo({ top: viewport.scrollHeight, behavior: resolveBehavior(behavior) });\n  }, []);\n\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    if (!viewport) return;\n\n    function handleScroll() {\n      if (!viewport) return;\n      const distance = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;\n      setAtBottom(distance <= BOTTOM_THRESHOLD);\n    }\n\n    handleScroll();\n    viewport.addEventListener(\"scroll\", handleScroll, { passive: true });\n    return () => {\n      viewport.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, []);\n\n  // Follows content as it grows, but only while the reader is pinned to the\n  // bottom. Layout effect so the jump happens before paint rather than as a\n  // visible lurch.\n  useLayoutEffect(() => {\n    const viewport = viewportRef.current;\n    if (!viewport || !autoScroll) return;\n\n    const observer = new ResizeObserver(() => {\n      if (atBottom) viewport.scrollTop = viewport.scrollHeight;\n    });\n\n    for (const child of viewport.children) observer.observe(child);\n    return () => {\n      observer.disconnect();\n    };\n  }, [autoScroll, atBottom]);\n\n  const context = useMemo<ConversationContextValue>(\n    () => ({ viewportRef, atBottom, scrollToBottom }),\n    [atBottom, scrollToBottom],\n  );\n\n  return (\n    <ConversationContext.Provider value={context}>\n      <div\n        data-slot=\"conversation\"\n        data-at-bottom={atBottom || undefined}\n        className={cn(\"relative flex min-h-0 flex-1 flex-col\", className)}\n        {...props}\n      >\n        <div\n          ref={viewportRef}\n          data-slot=\"conversation-viewport\"\n          className=\"flex-1 overflow-y-auto overscroll-contain\"\n        >\n          {children}\n        </div>\n      </div>\n    </ConversationContext.Provider>\n  );\n}\n\n/**\n * The transcript.\n *\n * An ordered list, deliberately not a live region — see the note on\n * `Conversation`. Order is meaning here, and list semantics give a screen\n * reader user position and count (\"3 of 12\") as they move through it.\n */\nexport function ConversationMessages({ className, ...props }: ComponentPropsWithRef<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"conversation-messages\"\n      className={cn(\"flex flex-col gap-6 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * The conversation's state, in SmoothUI's AIState vocabulary.\n *\n * Named for this component rather than `AIState` so it can never collide with\n * a shared type exported elsewhere in the library.\n */\nexport type ConversationState =\n  \"idle\" | \"listening\" | \"thinking\" | \"streaming\" | \"done\" | \"error\";\n\n/** Default wording per state. `idle` is empty, so first paint announces nothing. */\nconst STATE_LABELS: Record<ConversationState, string> = {\n  idle: \"\",\n  listening: \"Listening\",\n  thinking: \"Thinking\",\n  streaming: \"Generating response\",\n  done: \"Response complete\",\n  error: \"Response failed\",\n};\n\nexport interface ConversationStatusProps extends ComponentPropsWithRef<\"div\"> {\n  /** Announced politely when it changes. Keep it short: state, never content. */\n  children?: ReactNode;\n  /** Renders default wording for a state. `children` wins when both are given. */\n  state?: ConversationState;\n  /** Overrides the default wording per state. */\n  stateLabels?: Partial<Record<ConversationState, string>>;\n}\n\n/**\n * A polite live region for conversation state.\n *\n * This is where \"generating response\" and \"response complete\" belong. Putting\n * the response *text* here instead is the mistake this component exists to\n * prevent.\n */\nexport function ConversationStatus({\n  className,\n  children,\n  state,\n  stateLabels,\n  ...props\n}: ConversationStatusProps) {\n  // Only the text changes with `state`: the region itself stays mounted from\n  // first paint, because a live region announces nothing until it exists.\n  const worded =\n    state === undefined ? undefined : (stateLabels?.[state] ?? STATE_LABELS[state]);\n  return (\n    <div\n      data-slot=\"conversation-status\"\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\"px-4 text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? worded}\n    </div>\n  );\n}\n\nexport interface ConversationScrollButtonProps extends ComponentPropsWithRef<\"button\"> {\n  label?: string;\n}\n\nconst PREFIX = \"dowel-ai-conversation\";\n\n/* The pill rises in and sinks out. Exits are one step faster than entrances\n * (ADR 0004), and both run through --motion-scale, so under reduced motion the\n * exit still ends — which is what unmounts the button. */\nconst STYLES = `\n@keyframes ${PREFIX}-pill-in{from{opacity:0;translate:0 8px;scale:.96}}\n@keyframes ${PREFIX}-pill-out{to{opacity:0;translate:0 8px;scale:.96}}\n[data-slot=conversation-scroll-button][data-state=open]{animation:${PREFIX}-pill-in calc(250ms * var(--motion-scale,1)) var(--ease-out-quint) both}\n[data-slot=conversation-scroll-button][data-state=closed]{animation:${PREFIX}-pill-out calc(130ms * var(--motion-scale,1)) var(--ease-in-quint) both;pointer-events:none}\n`;\n\n/** Unmounts a closing pill even if its exit animation never reports ending. */\nconst EXIT_FALLBACK_MS = 400;\n\ntype PillPhase = \"hidden\" | \"open\" | \"closing\";\n\n/**\n * Returns the reader to the newest message.\n *\n * Rendered only when they have scrolled away, and removed from the DOM\n * otherwise so it is never a focus stop pointing at where the reader already\n * is. While it plays its exit it is `inert` and `aria-hidden`: already gone as\n * far as focus, clicks and assistive technology are concerned.\n */\nexport function ConversationScrollButton({\n  className,\n  label = \"Jump to latest\",\n  ref,\n  ...props\n}: ConversationScrollButtonProps) {\n  const { atBottom, scrollToBottom } = useConversation(\"ConversationScrollButton\");\n  const [phase, setPhase] = useState<PillPhase>(atBottom ? \"hidden\" : \"open\");\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n  // Adjusted during render rather than in an effect, so the pill never paints\n  // a frame in the wrong state.\n  if (!atBottom && phase !== \"open\") setPhase(\"open\");\n  if (atBottom && phase === \"open\") setPhase(\"closing\");\n\n  // A native listener rather than onAnimationEnd: React picks a vendor-prefixed\n  // event name wherever AnimationEvent is missing, and would never hear it.\n  useEffect(() => {\n    if (phase !== \"closing\") return;\n    const button = buttonRef.current;\n    const finish = (event?: Event) => {\n      if (event && event.target !== button) return;\n      setPhase(\"hidden\");\n    };\n    const timer = setTimeout(finish, EXIT_FALLBACK_MS);\n    button?.addEventListener(\"animationend\", finish);\n    return () => {\n      clearTimeout(timer);\n      button?.removeEventListener(\"animationend\", finish);\n    };\n  }, [phase]);\n\n  if (phase === \"hidden\") return null;\n  const closing = phase === \"closing\";\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <button\n        type=\"button\"\n        ref={(node) => {\n          buttonRef.current = node;\n          if (typeof ref === \"function\") return ref(node);\n          if (ref) ref.current = node;\n        }}\n        data-slot=\"conversation-scroll-button\"\n        data-state={closing ? \"closed\" : \"open\"}\n        inert={closing || undefined}\n        aria-hidden={closing || undefined}\n        tabIndex={closing ? -1 : undefined}\n        onClick={() => {\n          scrollToBottom();\n        }}\n        className={cn(\n          \"absolute inset-x-0 bottom-3 z-[var(--z-sticky)] mx-auto flex w-fit items-center gap-1.5\",\n          \"rounded-full border border-border bg-popover px-3 py-1.5 text-xs font-medium shadow-md\",\n          \"transition-colors duration-[var(--duration-fast)] hover:bg-accent\",\n          \"outline-none focus-visible:ring-2 focus-visible:ring-ring/55\",\n          className,\n        )}\n        {...props}\n      >\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n          <path\n            d=\"M12 5v14m0 0-6-6m6 6 6-6\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n        {label}\n      </button>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/ai-conversation/index.d.ts

@@ -1,2 +1,2 @@
-import { Conversation, ConversationMessages, ConversationProps, ConversationScrollButton, ConversationScrollButtonProps, ConversationStatus, ConversationStatusProps } from "./ai-conversation.js";
-export { Conversation, ConversationMessages, type ConversationProps, ConversationScrollButton, type ConversationScrollButtonProps, ConversationStatus, type ConversationStatusProps };
+import { Conversation, ConversationMessages, ConversationProps, ConversationScrollButton, ConversationScrollButtonProps, ConversationState, ConversationStatus, ConversationStatusProps } from "./ai-conversation.js";
+export { Conversation, ConversationMessages, type ConversationProps, ConversationScrollButton, type ConversationScrollButtonProps, type ConversationState, ConversationStatus, type ConversationStatusProps };

package/dist/components/ai-extraction-review/ai-extraction-review.js

@@ -227,7 +227,7 @@ function ReviewField({ field, source, decision, streaming, lowConfidenceBelow, a
 					}),
 					sourced ? /* @__PURE__ */ jsx(FieldButton, {
 						"aria-label": `Show in source — ${field.label}`,
-						className: "ml-auto",
+						className: "ms-auto",
 						onClick: onActivate,
 						children: "Show in source"
 					}) : null

package/dist/components/ai-extraction-review/ai-extraction-review.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-extraction-review.js","names":[],"sources":["../../../src/components/ai-extraction-review/ai-extraction-review.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  evidenceOf,\n  isSourced,\n  segmentSource,\n  summarizeReview,\n  type ExtractionField,\n  type FieldDecision,\n  type SourceRun,\n} from \"./extraction-model\";\n\n/**\n * The check after extraction: the document on one side, what the model read\n * out of it on the other, and a decision about every field.\n *\n * Every extraction demo shows the filled object and stops. The products that\n * run extraction for a living — invoice capture, KYC onboarding, claims intake —\n * all have this screen, each built from scratch, because a value that cannot\n * be checked can only be trusted, and nobody who is paying an invoice trusts a\n * model that far. No component library ships it.\n *\n * The link is the component. Each field carries where in the source it was\n * read from, quoted in text under the value as well as highlighted in the\n * document, so a reviewer who cannot see the highlight still has the evidence.\n * And a value with no evidence is said outright — \"the model supplied this\n * without evidence\" — because that is the case a review exists to catch, and\n * the one every filled-object view renders identically to a good value.\n *\n * Evidence is a text offset, not a bounding box. A language model reads text,\n * and a text layer with offsets is what every OCR pipeline already yields.\n * Boxes over a rendered page need page rendering, zoom and geometry, and are a\n * different component; this one does not pretend at them.\n *\n * Decisions are controlled and the component writes nothing. It reports that\n * a field was accepted as proposed, corrected from what was proposed, or\n * rejected — a richer record than a form's submitted values, and the one an\n * audit later needs — and leaves what to do with it to the application.\n */\n\nexport interface ExtractionReviewProps extends Omit<\n  ComponentPropsWithRef<\"section\">,\n  \"children\"\n> {\n  /** What the model read. Every span indexes into it. */\n  source: string;\n  /** Names the source — \"Invoice 4471.pdf, page 1\". */\n  sourceLabel?: string;\n  /** What is being reviewed, as the heading. */\n  heading: string;\n  fields: ExtractionField[];\n  /** Per-field decisions, keyed by field name. Controlled. */\n  decisions?: Record<string, FieldDecision>;\n  /** Omit to render the review as a record rather than something to operate. */\n  onDecision?: (name: string, decision: FieldDecision) => void;\n  /** True while fields are still arriving. Missing values wait instead of reading as not found. */\n  streaming?: boolean;\n  /** Confidence below this is called low, in words. */\n  lowConfidenceBelow?: number;\n  children?: ReactNode;\n}\n\nexport function ExtractionReview({\n  className,\n  source,\n  sourceLabel = \"Source\",\n  heading,\n  fields,\n  decisions = {},\n  onDecision,\n  streaming = false,\n  lowConfidenceBelow = 0.7,\n  children,\n  ...props\n}: ExtractionReviewProps) {\n  const headingId = useId();\n  const [activeField, setActiveField] = useState<string | null>(null);\n\n  const runs = useMemo(() => segmentSource(source, fields), [source, fields]);\n  const summary = useMemo(\n    () => summarizeReview(source, fields, decisions),\n    [source, fields, decisions],\n  );\n\n  return (\n    <section\n      data-slot=\"extraction-review\"\n      data-complete={summary.complete || undefined}\n      aria-labelledby={headingId}\n      aria-busy={streaming || undefined}\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        <h3 id={headingId} className=\"text-sm font-medium\">\n          {heading}\n        </h3>\n        {/* Live from the start and short, so each decision is followed by\n            where the review stands rather than by silence. Evidence gaps are\n            counted here too: they are the reason to read carefully, and worth\n            knowing before starting rather than discovering on field six. */}\n        <p\n          data-slot=\"extraction-review-summary\"\n          aria-live=\"polite\"\n          className=\"text-xs text-muted-foreground\"\n        >\n          {streaming\n            ? \"Fields are still arriving\"\n            : `${String(summary.reviewed)} of ${String(summary.total)} reviewed`}\n          {summary.unsourced.length > 0\n            ? ` · ${String(summary.unsourced.length)} without evidence`\n            : null}\n        </p>\n      </div>\n\n      {children}\n\n      <div className=\"grid gap-4 md:grid-cols-2\">\n        <SourcePanel\n          label={sourceLabel}\n          runs={runs}\n          active={activeField}\n          decisions={decisions}\n        />\n\n        <ol data-slot=\"extraction-fields\" className=\"m-0 flex list-none flex-col gap-3 p-0\">\n          {fields.map((field) => (\n            <ReviewField\n              key={field.name}\n              field={field}\n              source={source}\n              decision={decisions[field.name]}\n              streaming={streaming}\n              lowConfidenceBelow={lowConfidenceBelow}\n              active={activeField === field.name}\n              onActivate={() => {\n                setActiveField(field.name);\n              }}\n              onDecision={onDecision}\n            />\n          ))}\n        </ol>\n      </div>\n    </section>\n  );\n}\n\nfunction SourcePanel({\n  label,\n  runs,\n  active,\n  decisions,\n}: {\n  label: string;\n  runs: SourceRun[];\n  active: string | null;\n  decisions: Record<string, FieldDecision>;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  // Bring the active field's evidence into view. Focus stays where it is —\n  // in the field — so a keyboard user is shown the source without being\n  // moved into it.\n  useEffect(() => {\n    if (!active || !ref.current) return;\n    const mark = ref.current.querySelector(`mark[data-active]`);\n    mark?.scrollIntoView({ block: \"nearest\" });\n  }, [active]);\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"extraction-source\"\n      // A scrolling box has to be focusable to be scrolled by keyboard, and a\n      // focusable box needs a name.\n      role=\"region\"\n      aria-label={label}\n      tabIndex={0}\n      // Sticks beside the fields on a wide screen, so the evidence for field\n      // nine is still in view when the reviewer reaches it.\n      className={cn(\n        \"max-h-96 overflow-auto rounded-lg border border-border bg-muted/30 p-3 md:sticky md:top-0 md:self-start\",\n        focusRing,\n      )}\n    >\n      {runs.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground\">No source text.</p>\n      ) : (\n        <pre className=\"m-0 font-sans text-sm leading-relaxed break-words whitespace-pre-wrap\">\n          {runs.map((run, index) =>\n            run.fields.length === 0 ? (\n              <span key={index}>{run.text}</span>\n            ) : (\n              // A mark element, so the evidence survives as structure rather\n              // than only as a tint. No label is inserted into the text: a\n              // document read aloud with field names spliced into it is not\n              // the document, and the field already quotes its evidence.\n              <mark\n                key={index}\n                data-fields={run.fields.join(\" \")}\n                data-active={active !== null && run.fields.includes(active) ? \"\" : undefined}\n                className={cn(\n                  \"rounded-[2px] text-inherit\",\n                  run.fields.every((name) => decisions[name]?.kind === \"rejected\")\n                    ? \"bg-muted line-through decoration-muted-foreground\"\n                    : \"bg-primary/15\",\n                  active !== null &&\n                    run.fields.includes(active) &&\n                    \"bg-primary/30 ring-1 ring-primary ring-inset\",\n                )}\n              >\n                {run.text}\n              </mark>\n            ),\n          )}\n        </pre>\n      )}\n    </div>\n  );\n}\n\n/** Whitespace collapsed and cut short, for quoting evidence under a field. */\nfunction quote(text: string, limit = 80): string {\n  const collapsed = text.replace(/\\s+/g, \" \").trim();\n  return collapsed.length > limit ? `${collapsed.slice(0, limit - 1)}…` : collapsed;\n}\n\nfunction ReviewField({\n  field,\n  source,\n  decision,\n  streaming,\n  lowConfidenceBelow,\n  active,\n  onActivate,\n  onDecision,\n}: {\n  field: ExtractionField;\n  source: string;\n  decision?: FieldDecision;\n  streaming: boolean;\n  lowConfidenceBelow: number;\n  active: boolean;\n  onActivate: () => void;\n  onDecision?: (name: string, decision: FieldDecision) => void;\n}) {\n  const inputId = useId();\n  const evidenceId = useId();\n  const statusId = useId();\n  const confidenceId = useId();\n\n  // The reviewer's typing, kept apart from the model's value so the decision\n  // can say which is which.\n  const [draft, setDraft] = useState<string | null>(null);\n\n  const proposed = field.value ?? \"\";\n  const decided = decision && decision.kind !== \"rejected\" ? decision.value : undefined;\n  const current = draft ?? decided ?? proposed;\n  const edited = current !== proposed;\n  const changedSince = decided !== undefined && current !== decided;\n\n  const arriving = streaming && field.value === undefined;\n  const sourced = isSourced(source, field);\n  const evidence = sourced ? evidenceOf(source, field.span) : \"\";\n  const unsourced = !arriving && field.value !== undefined && !sourced;\n\n  const accept = () => {\n    onDecision?.(\n      field.name,\n      edited\n        ? { kind: \"corrected\", value: current, proposed }\n        : { kind: \"accepted\", value: current },\n    );\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (event.key !== \"Enter\") return;\n    // Enter confirms an IME candidate before it means anything else. Without\n    // this, a reviewer typing a Japanese correction accepts a fragment of it.\n    if (event.nativeEvent.isComposing) return;\n    if (field.multiline && !(event.ctrlKey || event.metaKey)) return;\n    event.preventDefault();\n    accept();\n  };\n\n  const status = arriving\n    ? \"Arriving\"\n    : !decision\n      ? \"Not reviewed\"\n      : decision.kind === \"rejected\"\n        ? \"Rejected\"\n        : changedSince\n          ? `Changed since it was ${decision.kind}`\n          : decision.kind === \"accepted\"\n            ? \"Accepted\"\n            : decision.proposed\n              ? `Corrected from “${quote(decision.proposed, 40)}”`\n              : \"Supplied by the reviewer\";\n\n  const low = field.confidence !== undefined && field.confidence < lowConfidenceBelow;\n  const percent =\n    field.confidence === undefined\n      ? null\n      : new Intl.NumberFormat(undefined, { style: \"percent\", maximumFractionDigits: 0 }).format(\n          field.confidence,\n        );\n\n  const describedBy = [evidenceId, statusId, percent !== null ? confidenceId : null]\n    .filter(Boolean)\n    .join(\" \");\n\n  const controlClass = cn(\n    \"w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm\",\n    edited && \"border-warning\",\n    focusRing,\n  );\n\n  return (\n    <li\n      data-slot=\"extraction-field\"\n      data-field={field.name}\n      data-state={arriving ? \"arriving\" : (decision?.kind ?? \"undecided\")}\n      data-active={active || undefined}\n      data-unsourced={unsourced || undefined}\n      // Focus anywhere in the field — value, either button — is the reviewer\n      // looking at it, so the source follows without a separate step.\n      onFocus={onActivate}\n      className={cn(\n        \"flex flex-col gap-1 rounded-lg border p-3\",\n        active ? \"border-primary\" : \"border-border\",\n        decision?.kind === \"rejected\" && \"bg-muted/40\",\n      )}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        {onDecision && !arriving ? (\n          <label htmlFor={inputId} className=\"text-xs font-medium text-muted-foreground\">\n            {field.label}\n          </label>\n        ) : (\n          <span className=\"text-xs font-medium text-muted-foreground\">{field.label}</span>\n        )}\n        {/* Status as a word, outside the label so editing never renames the\n            control under a screen reader user. */}\n        <span\n          id={statusId}\n          data-slot=\"extraction-field-status\"\n          className={cn(\n            \"text-xs\",\n            decision?.kind === \"rejected\" ? \"text-destructive\" : \"text-muted-foreground\",\n            changedSince && \"text-warning\",\n          )}\n        >\n          {status}\n        </span>\n      </div>\n\n      {arriving ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"block h-8 w-full animate-pulse-soft rounded-md bg-muted\"\n        />\n      ) : !onDecision ? (\n        <p className=\"rounded-md bg-muted px-2 py-1.5 text-sm break-words\">\n          {current || <span className=\"text-muted-foreground\">Empty</span>}\n        </p>\n      ) : field.multiline ? (\n        <textarea\n          id={inputId}\n          rows={3}\n          value={current}\n          aria-describedby={describedBy}\n          onChange={(event) => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={onKeyDown}\n          className={cn(controlClass, \"resize-none\")}\n        />\n      ) : (\n        <input\n          id={inputId}\n          type=\"text\"\n          value={current}\n          aria-describedby={describedBy}\n          onChange={(event) => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={onKeyDown}\n          className={controlClass}\n        />\n      )}\n\n      {/* The evidence in text. This is the accessible path to the source, and\n          for a sighted reviewer it is the comparison itself — \"1 March 2026\"\n          beside \"2026-03-01\" is a normalisation, not an error, and only reads\n          that way with both in view. */}\n      <p\n        id={evidenceId}\n        data-slot=\"extraction-field-evidence\"\n        className={cn(\"text-xs\", unsourced ? \"text-warning\" : \"text-muted-foreground\")}\n      >\n        {arriving\n          ? \"Waiting for the model\"\n          : sourced\n            ? `In the source: “${quote(evidence)}”`\n            : field.value === undefined\n              ? \"The model found nothing for this field.\"\n              : \"Not in the source — the model supplied this without evidence.\"}\n      </p>\n\n      {percent !== null ? (\n        <p\n          id={confidenceId}\n          data-slot=\"extraction-field-confidence\"\n          data-low={low || undefined}\n          className={cn(\"text-xs\", low ? \"text-warning\" : \"text-muted-foreground\")}\n        >\n          {low ? `Low confidence, ${percent} — worth checking` : `${percent} confidence`}\n        </p>\n      ) : null}\n\n      {onDecision && !arriving ? (\n        <div className=\"mt-1 flex flex-wrap items-center gap-2\">\n          <FieldButton\n            variant=\"primary\"\n            aria-label={`${edited ? \"Accept correction\" : \"Accept\"} — ${field.label}`}\n            aria-pressed={\n              decision !== undefined && decision.kind !== \"rejected\" && !changedSince\n            }\n            onClick={accept}\n          >\n            {edited ? \"Accept correction\" : \"Accept\"}\n          </FieldButton>\n          <FieldButton\n            aria-label={`Reject — ${field.label}`}\n            aria-pressed={decision?.kind === \"rejected\"}\n            onClick={() => {\n              onDecision(field.name, { kind: \"rejected\" });\n            }}\n          >\n            Reject\n          </FieldButton>\n          {sourced ? (\n            <FieldButton\n              aria-label={`Show in source — ${field.label}`}\n              className=\"ml-auto\"\n              onClick={onActivate}\n            >\n              Show in source\n            </FieldButton>\n          ) : null}\n        </div>\n      ) : null}\n    </li>\n  );\n}\n\nfunction FieldButton({\n  className,\n  variant = \"default\",\n  ...props\n}: ComponentPropsWithRef<\"button\"> & { variant?: \"default\" | \"primary\" }) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"rounded-md border px-2.5 py-1 text-xs font-medium transition-colors\",\n        variant === \"primary\" &&\n          \"border-primary bg-primary text-primary-foreground hover:bg-primary-hover aria-pressed:bg-primary-active\",\n        variant === \"default\" &&\n          \"border-input bg-background hover:bg-accent hover:text-accent-foreground aria-pressed:bg-secondary aria-pressed:text-secondary-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ai-extraction-review.js","names":[],"sources":["../../../src/components/ai-extraction-review/ai-extraction-review.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  evidenceOf,\n  isSourced,\n  segmentSource,\n  summarizeReview,\n  type ExtractionField,\n  type FieldDecision,\n  type SourceRun,\n} from \"./extraction-model\";\n\n/**\n * The check after extraction: the document on one side, what the model read\n * out of it on the other, and a decision about every field.\n *\n * Every extraction demo shows the filled object and stops. The products that\n * run extraction for a living — invoice capture, KYC onboarding, claims intake —\n * all have this screen, each built from scratch, because a value that cannot\n * be checked can only be trusted, and nobody who is paying an invoice trusts a\n * model that far. No component library ships it.\n *\n * The link is the component. Each field carries where in the source it was\n * read from, quoted in text under the value as well as highlighted in the\n * document, so a reviewer who cannot see the highlight still has the evidence.\n * And a value with no evidence is said outright — \"the model supplied this\n * without evidence\" — because that is the case a review exists to catch, and\n * the one every filled-object view renders identically to a good value.\n *\n * Evidence is a text offset, not a bounding box. A language model reads text,\n * and a text layer with offsets is what every OCR pipeline already yields.\n * Boxes over a rendered page need page rendering, zoom and geometry, and are a\n * different component; this one does not pretend at them.\n *\n * Decisions are controlled and the component writes nothing. It reports that\n * a field was accepted as proposed, corrected from what was proposed, or\n * rejected — a richer record than a form's submitted values, and the one an\n * audit later needs — and leaves what to do with it to the application.\n */\n\nexport interface ExtractionReviewProps extends Omit<\n  ComponentPropsWithRef<\"section\">,\n  \"children\"\n> {\n  /** What the model read. Every span indexes into it. */\n  source: string;\n  /** Names the source — \"Invoice 4471.pdf, page 1\". */\n  sourceLabel?: string;\n  /** What is being reviewed, as the heading. */\n  heading: string;\n  fields: ExtractionField[];\n  /** Per-field decisions, keyed by field name. Controlled. */\n  decisions?: Record<string, FieldDecision>;\n  /** Omit to render the review as a record rather than something to operate. */\n  onDecision?: (name: string, decision: FieldDecision) => void;\n  /** True while fields are still arriving. Missing values wait instead of reading as not found. */\n  streaming?: boolean;\n  /** Confidence below this is called low, in words. */\n  lowConfidenceBelow?: number;\n  children?: ReactNode;\n}\n\nexport function ExtractionReview({\n  className,\n  source,\n  sourceLabel = \"Source\",\n  heading,\n  fields,\n  decisions = {},\n  onDecision,\n  streaming = false,\n  lowConfidenceBelow = 0.7,\n  children,\n  ...props\n}: ExtractionReviewProps) {\n  const headingId = useId();\n  const [activeField, setActiveField] = useState<string | null>(null);\n\n  const runs = useMemo(() => segmentSource(source, fields), [source, fields]);\n  const summary = useMemo(\n    () => summarizeReview(source, fields, decisions),\n    [source, fields, decisions],\n  );\n\n  return (\n    <section\n      data-slot=\"extraction-review\"\n      data-complete={summary.complete || undefined}\n      aria-labelledby={headingId}\n      aria-busy={streaming || undefined}\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        <h3 id={headingId} className=\"text-sm font-medium\">\n          {heading}\n        </h3>\n        {/* Live from the start and short, so each decision is followed by\n            where the review stands rather than by silence. Evidence gaps are\n            counted here too: they are the reason to read carefully, and worth\n            knowing before starting rather than discovering on field six. */}\n        <p\n          data-slot=\"extraction-review-summary\"\n          aria-live=\"polite\"\n          className=\"text-xs text-muted-foreground\"\n        >\n          {streaming\n            ? \"Fields are still arriving\"\n            : `${String(summary.reviewed)} of ${String(summary.total)} reviewed`}\n          {summary.unsourced.length > 0\n            ? ` · ${String(summary.unsourced.length)} without evidence`\n            : null}\n        </p>\n      </div>\n\n      {children}\n\n      <div className=\"grid gap-4 md:grid-cols-2\">\n        <SourcePanel\n          label={sourceLabel}\n          runs={runs}\n          active={activeField}\n          decisions={decisions}\n        />\n\n        <ol data-slot=\"extraction-fields\" className=\"m-0 flex list-none flex-col gap-3 p-0\">\n          {fields.map((field) => (\n            <ReviewField\n              key={field.name}\n              field={field}\n              source={source}\n              decision={decisions[field.name]}\n              streaming={streaming}\n              lowConfidenceBelow={lowConfidenceBelow}\n              active={activeField === field.name}\n              onActivate={() => {\n                setActiveField(field.name);\n              }}\n              onDecision={onDecision}\n            />\n          ))}\n        </ol>\n      </div>\n    </section>\n  );\n}\n\nfunction SourcePanel({\n  label,\n  runs,\n  active,\n  decisions,\n}: {\n  label: string;\n  runs: SourceRun[];\n  active: string | null;\n  decisions: Record<string, FieldDecision>;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  // Bring the active field's evidence into view. Focus stays where it is —\n  // in the field — so a keyboard user is shown the source without being\n  // moved into it.\n  useEffect(() => {\n    if (!active || !ref.current) return;\n    const mark = ref.current.querySelector(`mark[data-active]`);\n    mark?.scrollIntoView({ block: \"nearest\" });\n  }, [active]);\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"extraction-source\"\n      // A scrolling box has to be focusable to be scrolled by keyboard, and a\n      // focusable box needs a name.\n      role=\"region\"\n      aria-label={label}\n      tabIndex={0}\n      // Sticks beside the fields on a wide screen, so the evidence for field\n      // nine is still in view when the reviewer reaches it.\n      className={cn(\n        \"max-h-96 overflow-auto rounded-lg border border-border bg-muted/30 p-3 md:sticky md:top-0 md:self-start\",\n        focusRing,\n      )}\n    >\n      {runs.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground\">No source text.</p>\n      ) : (\n        <pre className=\"m-0 font-sans text-sm leading-relaxed break-words whitespace-pre-wrap\">\n          {runs.map((run, index) =>\n            run.fields.length === 0 ? (\n              <span key={index}>{run.text}</span>\n            ) : (\n              // A mark element, so the evidence survives as structure rather\n              // than only as a tint. No label is inserted into the text: a\n              // document read aloud with field names spliced into it is not\n              // the document, and the field already quotes its evidence.\n              <mark\n                key={index}\n                data-fields={run.fields.join(\" \")}\n                data-active={active !== null && run.fields.includes(active) ? \"\" : undefined}\n                className={cn(\n                  \"rounded-[2px] text-inherit\",\n                  run.fields.every((name) => decisions[name]?.kind === \"rejected\")\n                    ? \"bg-muted line-through decoration-muted-foreground\"\n                    : \"bg-primary/15\",\n                  active !== null &&\n                    run.fields.includes(active) &&\n                    \"bg-primary/30 ring-1 ring-primary ring-inset\",\n                )}\n              >\n                {run.text}\n              </mark>\n            ),\n          )}\n        </pre>\n      )}\n    </div>\n  );\n}\n\n/** Whitespace collapsed and cut short, for quoting evidence under a field. */\nfunction quote(text: string, limit = 80): string {\n  const collapsed = text.replace(/\\s+/g, \" \").trim();\n  return collapsed.length > limit ? `${collapsed.slice(0, limit - 1)}…` : collapsed;\n}\n\nfunction ReviewField({\n  field,\n  source,\n  decision,\n  streaming,\n  lowConfidenceBelow,\n  active,\n  onActivate,\n  onDecision,\n}: {\n  field: ExtractionField;\n  source: string;\n  decision?: FieldDecision;\n  streaming: boolean;\n  lowConfidenceBelow: number;\n  active: boolean;\n  onActivate: () => void;\n  onDecision?: (name: string, decision: FieldDecision) => void;\n}) {\n  const inputId = useId();\n  const evidenceId = useId();\n  const statusId = useId();\n  const confidenceId = useId();\n\n  // The reviewer's typing, kept apart from the model's value so the decision\n  // can say which is which.\n  const [draft, setDraft] = useState<string | null>(null);\n\n  const proposed = field.value ?? \"\";\n  const decided = decision && decision.kind !== \"rejected\" ? decision.value : undefined;\n  const current = draft ?? decided ?? proposed;\n  const edited = current !== proposed;\n  const changedSince = decided !== undefined && current !== decided;\n\n  const arriving = streaming && field.value === undefined;\n  const sourced = isSourced(source, field);\n  const evidence = sourced ? evidenceOf(source, field.span) : \"\";\n  const unsourced = !arriving && field.value !== undefined && !sourced;\n\n  const accept = () => {\n    onDecision?.(\n      field.name,\n      edited\n        ? { kind: \"corrected\", value: current, proposed }\n        : { kind: \"accepted\", value: current },\n    );\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (event.key !== \"Enter\") return;\n    // Enter confirms an IME candidate before it means anything else. Without\n    // this, a reviewer typing a Japanese correction accepts a fragment of it.\n    if (event.nativeEvent.isComposing) return;\n    if (field.multiline && !(event.ctrlKey || event.metaKey)) return;\n    event.preventDefault();\n    accept();\n  };\n\n  const status = arriving\n    ? \"Arriving\"\n    : !decision\n      ? \"Not reviewed\"\n      : decision.kind === \"rejected\"\n        ? \"Rejected\"\n        : changedSince\n          ? `Changed since it was ${decision.kind}`\n          : decision.kind === \"accepted\"\n            ? \"Accepted\"\n            : decision.proposed\n              ? `Corrected from “${quote(decision.proposed, 40)}”`\n              : \"Supplied by the reviewer\";\n\n  const low = field.confidence !== undefined && field.confidence < lowConfidenceBelow;\n  const percent =\n    field.confidence === undefined\n      ? null\n      : new Intl.NumberFormat(undefined, { style: \"percent\", maximumFractionDigits: 0 }).format(\n          field.confidence,\n        );\n\n  const describedBy = [evidenceId, statusId, percent !== null ? confidenceId : null]\n    .filter(Boolean)\n    .join(\" \");\n\n  const controlClass = cn(\n    \"w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm\",\n    edited && \"border-warning\",\n    focusRing,\n  );\n\n  return (\n    <li\n      data-slot=\"extraction-field\"\n      data-field={field.name}\n      data-state={arriving ? \"arriving\" : (decision?.kind ?? \"undecided\")}\n      data-active={active || undefined}\n      data-unsourced={unsourced || undefined}\n      // Focus anywhere in the field — value, either button — is the reviewer\n      // looking at it, so the source follows without a separate step.\n      onFocus={onActivate}\n      className={cn(\n        \"flex flex-col gap-1 rounded-lg border p-3\",\n        active ? \"border-primary\" : \"border-border\",\n        decision?.kind === \"rejected\" && \"bg-muted/40\",\n      )}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        {onDecision && !arriving ? (\n          <label htmlFor={inputId} className=\"text-xs font-medium text-muted-foreground\">\n            {field.label}\n          </label>\n        ) : (\n          <span className=\"text-xs font-medium text-muted-foreground\">{field.label}</span>\n        )}\n        {/* Status as a word, outside the label so editing never renames the\n            control under a screen reader user. */}\n        <span\n          id={statusId}\n          data-slot=\"extraction-field-status\"\n          className={cn(\n            \"text-xs\",\n            decision?.kind === \"rejected\" ? \"text-destructive\" : \"text-muted-foreground\",\n            changedSince && \"text-warning\",\n          )}\n        >\n          {status}\n        </span>\n      </div>\n\n      {arriving ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"block h-8 w-full animate-pulse-soft rounded-md bg-muted\"\n        />\n      ) : !onDecision ? (\n        <p className=\"rounded-md bg-muted px-2 py-1.5 text-sm break-words\">\n          {current || <span className=\"text-muted-foreground\">Empty</span>}\n        </p>\n      ) : field.multiline ? (\n        <textarea\n          id={inputId}\n          rows={3}\n          value={current}\n          aria-describedby={describedBy}\n          onChange={(event) => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={onKeyDown}\n          className={cn(controlClass, \"resize-none\")}\n        />\n      ) : (\n        <input\n          id={inputId}\n          type=\"text\"\n          value={current}\n          aria-describedby={describedBy}\n          onChange={(event) => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={onKeyDown}\n          className={controlClass}\n        />\n      )}\n\n      {/* The evidence in text. This is the accessible path to the source, and\n          for a sighted reviewer it is the comparison itself — \"1 March 2026\"\n          beside \"2026-03-01\" is a normalisation, not an error, and only reads\n          that way with both in view. */}\n      <p\n        id={evidenceId}\n        data-slot=\"extraction-field-evidence\"\n        className={cn(\"text-xs\", unsourced ? \"text-warning\" : \"text-muted-foreground\")}\n      >\n        {arriving\n          ? \"Waiting for the model\"\n          : sourced\n            ? `In the source: “${quote(evidence)}”`\n            : field.value === undefined\n              ? \"The model found nothing for this field.\"\n              : \"Not in the source — the model supplied this without evidence.\"}\n      </p>\n\n      {percent !== null ? (\n        <p\n          id={confidenceId}\n          data-slot=\"extraction-field-confidence\"\n          data-low={low || undefined}\n          className={cn(\"text-xs\", low ? \"text-warning\" : \"text-muted-foreground\")}\n        >\n          {low ? `Low confidence, ${percent} — worth checking` : `${percent} confidence`}\n        </p>\n      ) : null}\n\n      {onDecision && !arriving ? (\n        <div className=\"mt-1 flex flex-wrap items-center gap-2\">\n          <FieldButton\n            variant=\"primary\"\n            aria-label={`${edited ? \"Accept correction\" : \"Accept\"} — ${field.label}`}\n            aria-pressed={\n              decision !== undefined && decision.kind !== \"rejected\" && !changedSince\n            }\n            onClick={accept}\n          >\n            {edited ? \"Accept correction\" : \"Accept\"}\n          </FieldButton>\n          <FieldButton\n            aria-label={`Reject — ${field.label}`}\n            aria-pressed={decision?.kind === \"rejected\"}\n            onClick={() => {\n              onDecision(field.name, { kind: \"rejected\" });\n            }}\n          >\n            Reject\n          </FieldButton>\n          {sourced ? (\n            <FieldButton\n              aria-label={`Show in source — ${field.label}`}\n              className=\"ms-auto\"\n              onClick={onActivate}\n            >\n              Show in source\n            </FieldButton>\n          ) : null}\n        </div>\n      ) : null}\n    </li>\n  );\n}\n\nfunction FieldButton({\n  className,\n  variant = \"default\",\n  ...props\n}: ComponentPropsWithRef<\"button\"> & { variant?: \"default\" | \"primary\" }) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"rounded-md border px-2.5 py-1 text-xs font-medium transition-colors\",\n        variant === \"primary\" &&\n          \"border-primary bg-primary text-primary-foreground hover:bg-primary-hover aria-pressed:bg-primary-active\",\n        variant === \"default\" &&\n          \"border-input bg-background hover:bg-accent hover:text-accent-foreground aria-pressed:bg-secondary aria-pressed:text-secondary-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/ai-loader/ai-loader.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/ai-loader/ai-loader.d.ts
+type AILoaderVariant = "dots" | "bar" | "grid";
+declare const aiLoaderVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface AILoaderProps extends Omit<ComponentPropsWithRef<"span">, "children">, VariantProps<typeof aiLoaderVariants> {
+  /** Which loader: thinking dots, an indeterminate bar, or a thinking grid. */
+  variant?: AILoaderVariant;
+  /** Visible text before the indicator, e.g. "Thinking". Also what is announced. */
+  label?: string;
+  /** Announced when there is no visible label. */
+  srLabel?: string;
+  /** Appends a live elapsed-seconds counter. Long waits need a sign of progress. */
+  showElapsed?: boolean;
+}
+/** A labelled AI waiting indicator, optionally counting the seconds. */
+declare function AILoader({ className, variant, size, label, srLabel, showElapsed, ...props }: AILoaderProps): import("react").JSX.Element;
+//#endregion
+export { AILoader, AILoaderProps, AILoaderVariant, aiLoaderVariants };
+//# sourceMappingURL=ai-loader.d.ts.map

package/dist/components/ai-loader/ai-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-loader.d.ts","names":[],"sources":["../../../src/components/ai-loader/ai-loader.tsx"],"mappings":";;;KAwBY;cAEN,mBAAgB;;6CAWpB;UAkBe,sBAEb,KAAK,4CACL,oBAAoB;;EAEtB,UAAU;;EAEV;;EAEA;;EAEA;;;iBAIc,WACd,WACA,SACA,MACA,OACA,SACA,gBACG,SACF,gCAAa,IAAA"}

package/dist/components/ai-loader/ai-loader.js

@@ -0,0 +1,78 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { DotsLoader } from "../dots-loader/dots-loader.js";
+import { BarLoader } from "../bar-loader/bar-loader.js";
+import { GridLoader } from "../grid-loader/grid-loader.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useState } from "react";
+//#region src/components/ai-loader/ai-loader.tsx
+const aiLoaderVariants = cva("inline-flex items-center gap-2 text-muted-foreground", {
+	variants: { size: {
+		sm: "text-xs",
+		md: "text-sm",
+		lg: "text-base"
+	} },
+	defaultVariants: { size: "md" }
+});
+const LOADER_SIZE = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+};
+/** Seconds since mount, to one decimal, re-rendering only when that changes. */
+function useElapsed(enabled) {
+	const [tenths, setTenths] = useState(0);
+	useEffect(() => {
+		if (!enabled) return;
+		const start = performance.now();
+		const id = setInterval(() => {
+			setTenths(Math.floor((performance.now() - start) / 100));
+		}, 100);
+		return () => clearInterval(id);
+	}, [enabled]);
+	return tenths / 10;
+}
+/** A labelled AI waiting indicator, optionally counting the seconds. */
+function AILoader({ className, variant = "dots", size, label, srLabel = "Loading", showElapsed = false, ...props }) {
+	const elapsed = useElapsed(showElapsed);
+	const loaderSize = LOADER_SIZE[size ?? "md"];
+	return /* @__PURE__ */ jsxs("span", {
+		role: "status",
+		"data-slot": "ai-loader",
+		"data-variant": variant,
+		className: cn(aiLoaderVariants({ size }), className),
+		...props,
+		children: [
+			label ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "ai-loader-label",
+				children: label
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: srLabel
+			}),
+			variant === "dots" ? /* @__PURE__ */ jsx(DotsLoader, {
+				variant: "thinking",
+				size: loaderSize
+			}) : null,
+			variant === "bar" ? /* @__PURE__ */ jsx(BarLoader, {
+				variant: "indeterminate",
+				size: loaderSize
+			}) : null,
+			variant === "grid" ? /* @__PURE__ */ jsx(GridLoader, {
+				variant: "thinking",
+				size: loaderSize
+			}) : null,
+			showElapsed ? /* @__PURE__ */ jsxs("span", {
+				"data-slot": "ai-loader-elapsed",
+				"aria-hidden": "true",
+				className: "tabular-nums opacity-60",
+				children: [elapsed.toFixed(1), "s"]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { AILoader, aiLoaderVariants };
+
+//# sourceMappingURL=ai-loader.js.map

package/dist/components/ai-loader/ai-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-loader.js","names":[],"sources":["../../../src/components/ai-loader/ai-loader.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI AI Loader (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useEffect, useState, type ComponentPropsWithRef } from \"react\";\n\nimport { BarLoader } from \"@/components/bar-loader\";\nimport { DotsLoader } from \"@/components/dots-loader\";\nimport { GridLoader } from \"@/components/grid-loader\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * The AI waiting indicator: a label, one of three loaders, and an optional\n * elapsed counter. The motion is not reimplemented here — it is Dowel's own\n * loader families, whose \"thinking\" dots, indeterminate bar and \"thinking\"\n * grid already share SmoothUI's 1.2s cycle, so a page can mix them and stay in\n * step. They carry data-motion=\"indicator\" themselves: under reduced motion\n * they slow rather than freeze.\n *\n * The root is the one status region. The loader inside it stays aria-hidden,\n * and the elapsed counter is hidden from assistive technology too: a live\n * region whose text changes ten times a second would announce continuously.\n */\n\nexport type AILoaderVariant = \"dots\" | \"bar\" | \"grid\";\n\nconst aiLoaderVariants = cva(\"inline-flex items-center gap-2 text-muted-foreground\", {\n  variants: {\n    size: {\n      sm: \"text-xs\",\n      md: \"text-sm\",\n      lg: \"text-base\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst LOADER_SIZE = { sm: \"sm\", md: \"md\", lg: \"lg\" } as const;\n\n/** Seconds since mount, to one decimal, re-rendering only when that changes. */\nfunction useElapsed(enabled: boolean): number {\n  const [tenths, setTenths] = useState(0);\n  useEffect(() => {\n    if (!enabled) return;\n    const start = performance.now();\n    const id = setInterval(() => {\n      setTenths(Math.floor((performance.now() - start) / 100));\n    }, 100);\n    return () => clearInterval(id);\n  }, [enabled]);\n  return tenths / 10;\n}\n\nexport interface AILoaderProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"children\">,\n    VariantProps<typeof aiLoaderVariants> {\n  /** Which loader: thinking dots, an indeterminate bar, or a thinking grid. */\n  variant?: AILoaderVariant;\n  /** Visible text before the indicator, e.g. \"Thinking\". Also what is announced. */\n  label?: string;\n  /** Announced when there is no visible label. */\n  srLabel?: string;\n  /** Appends a live elapsed-seconds counter. Long waits need a sign of progress. */\n  showElapsed?: boolean;\n}\n\n/** A labelled AI waiting indicator, optionally counting the seconds. */\nexport function AILoader({\n  className,\n  variant = \"dots\",\n  size,\n  label,\n  srLabel = \"Loading\",\n  showElapsed = false,\n  ...props\n}: AILoaderProps) {\n  const elapsed = useElapsed(showElapsed);\n  const loaderSize = LOADER_SIZE[size ?? \"md\"];\n\n  return (\n    <span\n      role=\"status\"\n      data-slot=\"ai-loader\"\n      data-variant={variant}\n      className={cn(aiLoaderVariants({ size }), className)}\n      {...props}\n    >\n      {label ? (\n        <span data-slot=\"ai-loader-label\">{label}</span>\n      ) : (\n        <span className=\"sr-only\">{srLabel}</span>\n      )}\n      {variant === \"dots\" ? <DotsLoader variant=\"thinking\" size={loaderSize} /> : null}\n      {variant === \"bar\" ? <BarLoader variant=\"indeterminate\" size={loaderSize} /> : null}\n      {variant === \"grid\" ? <GridLoader variant=\"thinking\" size={loaderSize} /> : null}\n      {showElapsed ? (\n        <span\n          data-slot=\"ai-loader-elapsed\"\n          aria-hidden=\"true\"\n          className=\"tabular-nums opacity-60\"\n        >\n          {elapsed.toFixed(1)}s\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\nexport { aiLoaderVariants };\n"],"mappings":";;;;;;;;;AA0BA,MAAM,mBAAmB,IAAI,wDAAwD;CACnF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;AAED,MAAM,cAAc;CAAE,IAAI;CAAM,IAAI;CAAM,IAAI;AAAK;;AAGnD,SAAS,WAAW,SAA0B;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAS,CAAC;CACtC,gBAAgB;EACd,IAAI,CAAC,SAAS;EACd,MAAM,QAAQ,YAAY,IAAI;EAC9B,MAAM,KAAK,kBAAkB;GAC3B,UAAU,KAAK,OAAO,YAAY,IAAI,IAAI,SAAS,GAAG,CAAC;EACzD,GAAG,GAAG;EACN,aAAa,cAAc,EAAE;CAC/B,GAAG,CAAC,OAAO,CAAC;CACZ,OAAO,SAAS;AAClB;;AAiBA,SAAgB,SAAS,EACvB,WACA,UAAU,QACV,MACA,OACA,UAAU,WACV,cAAc,OACd,GAAG,SACa;CAChB,MAAM,UAAU,WAAW,WAAW;CACtC,MAAM,aAAa,YAAY,QAAQ;CAEvC,OACE,qBAAC,QAAD;EACE,MAAK;EACL,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,iBAAiB,EAAE,KAAK,CAAC,GAAG,SAAS;EACnD,GAAI;EALN,UAAA;GAOG,QACC,oBAAC,QAAD;IAAM,aAAU;IAAmB,UAAA;GAAY,CAAA,IAE/C,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAc,CAAA;GAE1C,YAAY,SAAS,oBAAC,YAAD;IAAY,SAAQ;IAAW,MAAM;GAAa,CAAA,IAAI;GAC3E,YAAY,QAAQ,oBAAC,WAAD;IAAW,SAAQ;IAAgB,MAAM;GAAa,CAAA,IAAI;GAC9E,YAAY,SAAS,oBAAC,YAAD;IAAY,SAAQ;IAAW,MAAM;GAAa,CAAA,IAAI;GAC3E,cACC,qBAAC,QAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAU;IAHZ,UAAA,CAKG,QAAQ,QAAQ,CAAC,GAAE,GAChB;GACJ,CAAA,IAAA;EACA;;AAEV"}

package/dist/components/ai-loader/index.d.ts

@@ -0,0 +1,2 @@
+import { AILoader, AILoaderProps, AILoaderVariant, aiLoaderVariants } from "./ai-loader.js";
+export { AILoader, type AILoaderProps, type AILoaderVariant, aiLoaderVariants };

package/dist/components/ai-loader/index.js

@@ -0,0 +1,2 @@
+import { AILoader, aiLoaderVariants } from "./ai-loader.js";
+export { AILoader, aiLoaderVariants };

package/dist/components/ai-loader/meta.js

@@ -0,0 +1,21 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/ai-loader/meta.ts
+const meta = defineMeta({
+	name: "ai-loader",
+	title: "AI Loader",
+	description: "A labelled AI waiting indicator — thinking dots, an indeterminate bar or a thinking grid — with an optional elapsed-seconds counter.",
+	category: "ai",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [
+		"bar-loader",
+		"dots-loader",
+		"grid-loader"
+	],
+	files: ["ai-loader.tsx"],
+	a11y: "The root is a single role=\"status\" region announcing the label (or `srLabel`, \"Loading\" by default). The loader inside it and the elapsed counter are aria-hidden — a counter ticking ten times a second inside a live region would announce continuously. The loaders are indicators: under reduced motion they slow rather than stop. None fakes determinate progress."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/ai-loader/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-loader/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-loader\",\n  title: \"AI Loader\",\n  description:\n    \"A labelled AI waiting indicator — thinking dots, an indeterminate bar or a thinking grid — with an optional elapsed-seconds counter.\",\n  category: \"ai\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"bar-loader\", \"dots-loader\", \"grid-loader\"],\n  files: [\"ai-loader.tsx\"],\n  a11y:\n    'The root is a single role=\"status\" region announcing the label (or `srLabel`, \"Loading\" by default). The ' +\n    \"loader inside it and the elapsed counter are aria-hidden — a counter ticking ten times a second inside a \" +\n    \"live region would announce continuously. The loaders are indicators: under reduced motion they slow rather \" +\n    \"than stop. None fakes determinate progress.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB;EAAC;EAAc;EAAe;CAAa;CACjE,OAAO,CAAC,eAAe;CACvB,MACE;AAIJ,CAAC"}

package/dist/components/ai-message/ai-message.d.ts

@@ -46,11 +46,22 @@ declare function MessageAvatar({ className, asChild, ...props }: MessageAvatarPr
  *
  * Revealed on hover for pointer users but always present in the DOM and in the
  * tab order — hiding controls behind hover makes them unreachable by keyboard
- * and invisible on touch.
+ * and invisible on touch. On devices that cannot hover they are always shown.
  */
 declare function MessageActions({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+interface MessageTimestampProps extends ComponentPropsWithRef<"time"> {
+  /** Machine-readable value for `dateTime`. Children are the display text. */
+  dateTime?: string;
+}
+/**
+ * When the message was sent.
+ *
+ * A real `<time>`, so the display text can be relative ("2 min ago") while the
+ * machine-readable value stays exact.
+ */
+declare function MessageTimestamp({ className, ...props }: MessageTimestampProps): import("react").JSX.Element;
 /** Attachments, citations and other content that hangs off a message. */
 declare function MessageFooter({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 //#endregion
-export { Message, MessageActions, MessageAvatar, MessageAvatarProps, MessageBody, MessageBodyProps, MessageFooter, MessageProps, MessageRole, messageBodyVariants, messageVariants };
+export { Message, MessageActions, MessageAvatar, MessageAvatarProps, MessageBody, MessageBodyProps, MessageFooter, MessageProps, MessageRole, MessageTimestamp, MessageTimestampProps, messageBodyVariants, messageVariants };
 //# sourceMappingURL=ai-message.d.ts.map

package/dist/components/ai-message/ai-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-message.d.ts","names":[],"sources":["../../../src/components/ai-message/ai-message.tsx"],"mappings":";;;;;;;;;;;cAiBM,kBAAe;;6CAWnB;cAEI,sBAAmB;;6CAYvB;KAEU;UAEK,qBACP,6BAA6B,KAAK,oBAAoB;;;;;;;;;;EAU9D,OAAO;;EAEP;;iBASc,UACd,WACA,MACA,WACA,aACG,SACF,+BAAY,IAAA;UAeE,yBACP,8BAA8B,KAAK,oBAAoB;;EAE/D,OAAO;;iBAGO,cAAc,WAAW,SAAuB,SAAS,mCAAgB,IAAA;UAUxE,2BAA2B;EAC1C;;;iBAIc,gBAAgB,WAAW,YAAY,SAAS,qCAAkB,IAAA;;;;;;;;iBAyBlE,iBAAiB,cAAc,SAAS,+CAA4B,IAAA;;iBAgBpE,gBAAgB,cAAc,SAAS,+CAA4B,IAAA"}
+{"version":3,"file":"ai-message.d.ts","names":[],"sources":["../../../src/components/ai-message/ai-message.tsx"],"mappings":";;;;;;;;;;;cAkBM,kBAAe;;6CAWnB;cAEI,sBAAmB;;6CAYvB;KAEU;UAEK,qBACP,6BAA6B,KAAK,oBAAoB;;;;;;;;;;EAU9D,OAAO;;EAEP;;iBASc,UACd,WACA,MACA,WACA,aACG,SACF,+BAAY,IAAA;UAeE,yBACP,8BAA8B,KAAK,oBAAoB;;EAE/D,OAAO;;iBAGO,cAAc,WAAW,SAAuB,SAAS,mCAAgB,IAAA;UAUxE,2BAA2B;EAC1C;;;iBAIc,gBAAgB,WAAW,YAAY,SAAS,qCAAkB,IAAA;;;;;;;;iBAwClE,iBAAiB,cAAc,SAAS,+CAA4B,IAAA;UAuBnE,8BAA8B;;EAE7C;;;;;;;;iBASc,mBAAmB,cAAc,SAAS,wCAAqB,IAAA;;iBAW/D,gBAAgB,cAAc,SAAS,+CAA4B,IAAA"}

package/dist/components/ai-message/ai-message.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../lib/utils.js";
 import { Slot } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/ai-message/ai-message.tsx
 /**
@@ -62,17 +62,41 @@ function MessageAvatar({ className, asChild, ...props }) {
 		...props
 	});
 }
+const PREFIX = "dowel-ai-message";
+const STYLES = `
+[data-slot=message-actions]{--dowel-message-slide:-6px}
+[data-from=user] [data-slot=message-actions]{--dowel-message-slide:6px}
+[data-slot=message-actions]:dir(rtl){--dowel-message-slide:6px}
+[data-from=user] [data-slot=message-actions]:dir(rtl){--dowel-message-slide:-6px}
+`;
 /**
 * Per-message controls: copy, regenerate, feedback.
 *
 * Revealed on hover for pointer users but always present in the DOM and in the
 * tab order — hiding controls behind hover makes them unreachable by keyboard
-* and invisible on touch.
+* and invisible on touch. On devices that cannot hover they are always shown.
 */
 function MessageActions({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsx("div", {
 		"data-slot": "message-actions",
-		className: cn("mt-1.5 flex items-center gap-1", "opacity-0 transition-opacity duration-[var(--duration-fast)]", "group-focus-within/message:opacity-100 group-hover/message:opacity-100", className),
+		className: cn("mt-1.5 flex items-center gap-1", "translate-x-(--dowel-message-slide) scale-90 opacity-0", "transition-[opacity,translate,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "group-focus-within/message:translate-x-0 group-focus-within/message:scale-100 group-focus-within/message:opacity-100", "group-hover/message:translate-x-0 group-hover/message:scale-100 group-hover/message:opacity-100", "[@media(hover:none)]:translate-x-0 [@media(hover:none)]:scale-100 [@media(hover:none)]:opacity-100", className),
+		...props
+	})] });
+}
+/**
+* When the message was sent.
+*
+* A real `<time>`, so the display text can be relative ("2 min ago") while the
+* machine-readable value stays exact.
+*/
+function MessageTimestamp({ className, ...props }) {
+	return /* @__PURE__ */ jsx("time", {
+		"data-slot": "message-timestamp",
+		className: cn("text-xs text-muted-foreground tabular-nums", className),
 		...props
 	});
 }
@@ -85,6 +109,6 @@ function MessageFooter({ className, ...props }) {
 	});
 }
 //#endregion
-export { Message, MessageActions, MessageAvatar, MessageBody, MessageFooter, messageBodyVariants, messageVariants };
+export { Message, MessageActions, MessageAvatar, MessageBody, MessageFooter, MessageTimestamp, messageBodyVariants, messageVariants };
 
 //# sourceMappingURL=ai-message.js.map