@dowel-ui/react 0.7.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-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

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

@@ -1 +1 @@
-{"version":3,"file":"ai-message.js","names":[],"sources":["../../../src/components/ai-message/ai-message.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * One turn in a conversation.\n *\n * The role is stated in text, not only in layout. Alignment and colour are how\n * a sighted reader tells a question from an answer; a screen reader user gets\n * nothing from either, so every message carries a visually hidden label naming\n * who is speaking.\n */\n\nconst messageVariants = cva(\"group/message flex w-full gap-3\", {\n  variants: {\n    role: {\n      user: \"flex-row-reverse\",\n      assistant: \"flex-row\",\n      system: \"flex-row\",\n    },\n  },\n  defaultVariants: {\n    role: \"assistant\",\n  },\n});\n\nconst messageBodyVariants = cva(\"min-w-0 rounded-xl px-4 py-3 text-sm\", {\n  variants: {\n    role: {\n      user: \"max-w-[85%] bg-primary text-primary-foreground\",\n      assistant: \"w-full bg-transparent px-0 py-0 text-foreground\",\n      system:\n        \"w-full border border-dashed border-border bg-muted/40 text-xs text-muted-foreground\",\n    },\n  },\n  defaultVariants: {\n    role: \"assistant\",\n  },\n});\n\nexport type MessageRole = \"user\" | \"assistant\" | \"system\";\n\nexport interface MessageProps\n  extends ComponentPropsWithRef<\"li\">, Omit<VariantProps<typeof messageVariants>, \"role\"> {\n  /**\n   * Who is speaking.\n   *\n   * Named `from` rather than `role` on purpose. `role` is a global HTML\n   * attribute, and a component prop that shadows it cannot be told apart from\n   * the real thing by static analysis — every consumer's accessibility linter\n   * would flag ordinary usage of this component. The values are still the\n   * familiar conversation roles.\n   */\n  from?: MessageRole;\n  /** Overrides the visually hidden speaker label. */\n  fromLabel?: string;\n}\n\nconst DEFAULT_ROLE_LABELS: Record<MessageRole, string> = {\n  user: \"You said\",\n  assistant: \"Assistant said\",\n  system: \"System\",\n};\n\nexport function Message({\n  className,\n  from = \"assistant\",\n  fromLabel,\n  children,\n  ...props\n}: MessageProps) {\n  return (\n    <li\n      data-slot=\"message\"\n      data-from={from}\n      className={cn(messageVariants({ role: from }), className)}\n      {...props}\n    >\n      {/* Names the speaker for anyone who cannot see the layout. */}\n      <span className=\"sr-only\">{fromLabel ?? DEFAULT_ROLE_LABELS[from]}:</span>\n      {children}\n    </li>\n  );\n}\n\nexport interface MessageBodyProps\n  extends ComponentPropsWithRef<\"div\">, Omit<VariantProps<typeof messageBodyVariants>, \"role\"> {\n  /** Who is speaking. See the note on MessageProps for why not `role`. */\n  from?: MessageRole;\n}\n\nexport function MessageBody({ className, from = \"assistant\", ...props }: MessageBodyProps) {\n  return (\n    <div\n      data-slot=\"message-body\"\n      className={cn(messageBodyVariants({ role: from }), className)}\n      {...props}\n    />\n  );\n}\n\nexport interface MessageAvatarProps extends ComponentPropsWithRef<\"div\"> {\n  asChild?: boolean;\n}\n\n/** Decorative: the speaker is already named by the hidden label on Message. */\nexport function MessageAvatar({ className, asChild, ...props }: MessageAvatarProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n\n  return (\n    <Comp\n      data-slot=\"message-avatar\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"grid size-7 shrink-0 place-items-center rounded-full border border-border bg-muted\",\n        \"text-xs font-medium text-muted-foreground\",\n        \"[&_svg:not([class*='size-'])]:size-3.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Per-message controls: copy, regenerate, feedback.\n *\n * Revealed on hover for pointer users but always present in the DOM and in the\n * tab order — hiding controls behind hover makes them unreachable by keyboard\n * and invisible on touch.\n */\nexport function MessageActions({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-actions\"\n      className={cn(\n        \"mt-1.5 flex items-center gap-1\",\n        \"opacity-0 transition-opacity duration-[var(--duration-fast)]\",\n        \"group-focus-within/message:opacity-100 group-hover/message:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Attachments, citations and other content that hangs off a message. */\nexport function MessageFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-footer\"\n      className={cn(\"mt-2 flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { messageBodyVariants, messageVariants };\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,kBAAkB,IAAI,mCAAmC;CAC7D,UAAU,EACR,MAAM;EACJ,MAAM;EACN,WAAW;EACX,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,MAAM,YACR;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,wCAAwC;CACtE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,WAAW;EACX,QACE;CACJ,EACF;CACA,iBAAiB,EACf,MAAM,YACR;AACF,CAAC;AAoBD,MAAM,sBAAmD;CACvD,MAAM;CACN,WAAW;CACX,QAAQ;AACV;AAEA,SAAgB,QAAQ,EACtB,WACA,OAAO,aACP,WACA,UACA,GAAG,SACY;CACf,OACE,qBAAC,MAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAAG,gBAAgB,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS;EACxD,GAAI;EAJN,UAAA,CAOE,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CAA2B,aAAa,oBAAoB,OAAM,GAAO;EACxE,CAAA,GAAA,QACC;;AAER;AAQA,SAAgB,YAAY,EAAE,WAAW,OAAO,aAAa,GAAG,SAA2B;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,oBAAoB,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;;AAOA,SAAgB,cAAc,EAAE,WAAW,SAAS,GAAG,SAA6B;CAClF,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,sFACA,6CACA,0CACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;;AASA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAuC;CACpF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kCACA,gEACA,0EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAuC;CACnF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0CAA0C,SAAS;EACjE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"ai-message.js","names":[],"sources":["../../../src/components/ai-message/ai-message.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AI Message (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * One turn in a conversation.\n *\n * The role is stated in text, not only in layout. Alignment and colour are how\n * a sighted reader tells a question from an answer; a screen reader user gets\n * nothing from either, so every message carries a visually hidden label naming\n * who is speaking.\n */\n\nconst messageVariants = cva(\"group/message flex w-full gap-3\", {\n  variants: {\n    role: {\n      user: \"flex-row-reverse\",\n      assistant: \"flex-row\",\n      system: \"flex-row\",\n    },\n  },\n  defaultVariants: {\n    role: \"assistant\",\n  },\n});\n\nconst messageBodyVariants = cva(\"min-w-0 rounded-xl px-4 py-3 text-sm\", {\n  variants: {\n    role: {\n      user: \"max-w-[85%] bg-primary text-primary-foreground\",\n      assistant: \"w-full bg-transparent px-0 py-0 text-foreground\",\n      system:\n        \"w-full border border-dashed border-border bg-muted/40 text-xs text-muted-foreground\",\n    },\n  },\n  defaultVariants: {\n    role: \"assistant\",\n  },\n});\n\nexport type MessageRole = \"user\" | \"assistant\" | \"system\";\n\nexport interface MessageProps\n  extends ComponentPropsWithRef<\"li\">, Omit<VariantProps<typeof messageVariants>, \"role\"> {\n  /**\n   * Who is speaking.\n   *\n   * Named `from` rather than `role` on purpose. `role` is a global HTML\n   * attribute, and a component prop that shadows it cannot be told apart from\n   * the real thing by static analysis — every consumer's accessibility linter\n   * would flag ordinary usage of this component. The values are still the\n   * familiar conversation roles.\n   */\n  from?: MessageRole;\n  /** Overrides the visually hidden speaker label. */\n  fromLabel?: string;\n}\n\nconst DEFAULT_ROLE_LABELS: Record<MessageRole, string> = {\n  user: \"You said\",\n  assistant: \"Assistant said\",\n  system: \"System\",\n};\n\nexport function Message({\n  className,\n  from = \"assistant\",\n  fromLabel,\n  children,\n  ...props\n}: MessageProps) {\n  return (\n    <li\n      data-slot=\"message\"\n      data-from={from}\n      className={cn(messageVariants({ role: from }), className)}\n      {...props}\n    >\n      {/* Names the speaker for anyone who cannot see the layout. */}\n      <span className=\"sr-only\">{fromLabel ?? DEFAULT_ROLE_LABELS[from]}:</span>\n      {children}\n    </li>\n  );\n}\n\nexport interface MessageBodyProps\n  extends ComponentPropsWithRef<\"div\">, Omit<VariantProps<typeof messageBodyVariants>, \"role\"> {\n  /** Who is speaking. See the note on MessageProps for why not `role`. */\n  from?: MessageRole;\n}\n\nexport function MessageBody({ className, from = \"assistant\", ...props }: MessageBodyProps) {\n  return (\n    <div\n      data-slot=\"message-body\"\n      className={cn(messageBodyVariants({ role: from }), className)}\n      {...props}\n    />\n  );\n}\n\nexport interface MessageAvatarProps extends ComponentPropsWithRef<\"div\"> {\n  asChild?: boolean;\n}\n\n/** Decorative: the speaker is already named by the hidden label on Message. */\nexport function MessageAvatar({ className, asChild, ...props }: MessageAvatarProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n\n  return (\n    <Comp\n      data-slot=\"message-avatar\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"grid size-7 shrink-0 place-items-center rounded-full border border-border bg-muted\",\n        \"text-xs font-medium text-muted-foreground\",\n        \"[&_svg:not([class*='size-'])]:size-3.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst PREFIX = \"dowel-ai-message\";\n\n/*\n * Only a private custom property lives here: which way the actions slide in.\n * They come out of the bubble's own edge — the inline start for the assistant,\n * the inline end for the user — and the sign flips in RTL. Everything visible\n * is a layered utility on the container, so a consumer className still wins.\n */\nconst STYLES = `\n[data-slot=message-actions]{--dowel-message-slide:-6px}\n[data-from=user] [data-slot=message-actions]{--dowel-message-slide:6px}\n[data-slot=message-actions]:dir(rtl){--dowel-message-slide:6px}\n[data-from=user] [data-slot=message-actions]:dir(rtl){--dowel-message-slide:-6px}\n`;\n\n/**\n * Per-message controls: copy, regenerate, feedback.\n *\n * Revealed on hover for pointer users but always present in the DOM and in the\n * tab order — hiding controls behind hover makes them unreachable by keyboard\n * and invisible on touch. On devices that cannot hover they are always shown.\n */\nexport function MessageActions({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <div\n        data-slot=\"message-actions\"\n        className={cn(\n          \"mt-1.5 flex items-center gap-1\",\n          \"translate-x-(--dowel-message-slide) scale-90 opacity-0\",\n          \"transition-[opacity,translate,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n          \"group-focus-within/message:translate-x-0 group-focus-within/message:scale-100 group-focus-within/message:opacity-100\",\n          \"group-hover/message:translate-x-0 group-hover/message:scale-100 group-hover/message:opacity-100\",\n          \"[@media(hover:none)]:translate-x-0 [@media(hover:none)]:scale-100 [@media(hover:none)]:opacity-100\",\n          className,\n        )}\n        {...props}\n      />\n    </>\n  );\n}\n\nexport interface MessageTimestampProps extends ComponentPropsWithRef<\"time\"> {\n  /** Machine-readable value for `dateTime`. Children are the display text. */\n  dateTime?: string;\n}\n\n/**\n * When the message was sent.\n *\n * A real `<time>`, so the display text can be relative (\"2 min ago\") while the\n * machine-readable value stays exact.\n */\nexport function MessageTimestamp({ className, ...props }: MessageTimestampProps) {\n  return (\n    <time\n      data-slot=\"message-timestamp\"\n      className={cn(\"text-xs text-muted-foreground tabular-nums\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Attachments, citations and other content that hangs off a message. */\nexport function MessageFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-footer\"\n      className={cn(\"mt-2 flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { messageBodyVariants, messageVariants };\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,kBAAkB,IAAI,mCAAmC;CAC7D,UAAU,EACR,MAAM;EACJ,MAAM;EACN,WAAW;EACX,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,MAAM,YACR;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,wCAAwC;CACtE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,WAAW;EACX,QACE;CACJ,EACF;CACA,iBAAiB,EACf,MAAM,YACR;AACF,CAAC;AAoBD,MAAM,sBAAmD;CACvD,MAAM;CACN,WAAW;CACX,QAAQ;AACV;AAEA,SAAgB,QAAQ,EACtB,WACA,OAAO,aACP,WACA,UACA,GAAG,SACY;CACf,OACE,qBAAC,MAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAAG,gBAAgB,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS;EACxD,GAAI;EAJN,UAAA,CAOE,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CAA2B,aAAa,oBAAoB,OAAM,GAAO;EACxE,CAAA,GAAA,QACC;;AAER;AAQA,SAAgB,YAAY,EAAE,WAAW,OAAO,aAAa,GAAG,SAA2B;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,oBAAoB,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;;AAOA,SAAgB,cAAc,EAAE,WAAW,SAAS,GAAG,SAA6B;CAClF,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,sFACA,6CACA,0CACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,SAAS;AAQf,MAAM,SAAS;;;;;;;;;;;;;AAcf,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAuC;CACpF,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,GACP,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kCACA,0DACA,uGACA,wHACA,mGACA,sGACA,SACF;EACA,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN;;;;;;;AAaA,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAgC;CAC/E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,8CAA8C,SAAS;EACrE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAuC;CACnF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0CAA0C,SAAS;EACjE,GAAI;CACL,CAAA;AAEL"}

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

@@ -1,2 +1,2 @@
-import { Message, MessageActions, MessageAvatar, MessageAvatarProps, MessageBody, MessageBodyProps, MessageFooter, MessageProps, MessageRole, messageBodyVariants, messageVariants } from "./ai-message.js";
-export { Message, MessageActions, MessageAvatar, type MessageAvatarProps, MessageBody, type MessageBodyProps, MessageFooter, type MessageProps, type MessageRole, messageBodyVariants, messageVariants };
+import { Message, MessageActions, MessageAvatar, MessageAvatarProps, MessageBody, MessageBodyProps, MessageFooter, MessageProps, MessageRole, MessageTimestamp, MessageTimestampProps, messageBodyVariants, messageVariants } from "./ai-message.js";
+export { Message, MessageActions, MessageAvatar, type MessageAvatarProps, MessageBody, type MessageBodyProps, MessageFooter, type MessageProps, type MessageRole, MessageTimestamp, type MessageTimestampProps, messageBodyVariants, messageVariants };

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

@@ -1,2 +1,2 @@
-import { Message, MessageActions, MessageAvatar, MessageBody, MessageFooter, messageBodyVariants, messageVariants } from "./ai-message.js";
-export { Message, MessageActions, MessageAvatar, MessageBody, MessageFooter, messageBodyVariants, messageVariants };
+import { Message, MessageActions, MessageAvatar, MessageBody, MessageFooter, MessageTimestamp, messageBodyVariants, messageVariants } from "./ai-message.js";
+export { Message, MessageActions, MessageAvatar, MessageBody, MessageFooter, MessageTimestamp, messageBodyVariants, messageVariants };

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

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["class-variance-authority", "radix-ui"],
 	registryDependencies: [],
 	files: ["ai-message.tsx"],
-	a11y: "Every message carries a visually hidden label naming the speaker. Alignment and colour tell a sighted reader who is talking and tell a screen reader user nothing, so the role is always in text. Message actions fade in on hover but stay in the DOM and in the tab order — a control that only exists on hover is unreachable by keyboard and invisible on touch."
+	a11y: "Every message carries a visually hidden label naming the speaker. Alignment and colour tell a sighted reader who is talking and tell a screen reader user nothing, so the role is always in text. Message actions fade in on hover but stay in the DOM and in the tab order — a control that only exists on hover is unreachable by keyboard and invisible on touch — and on devices that cannot hover they are always shown. MessageTimestamp is a real <time>."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-message/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-message\",\n  title: \"AI Message\",\n  description: \"One turn in a conversation, with role, avatar, actions and footer slots.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"ai-message.tsx\"],\n  a11y:\n    \"Every message carries a visually hidden label naming the speaker. Alignment and colour tell \" +\n    \"a sighted reader who is talking and tell a screen reader user nothing, so the role is always \" +\n    \"in text. Message actions fade in on hover but stay in the DOM and in the tab order — a \" +\n    \"control that only exists on hover is unreachable by keyboard and invisible on touch.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-message/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-message\",\n  title: \"AI Message\",\n  description: \"One turn in a conversation, with role, avatar, actions and footer slots.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"ai-message.tsx\"],\n  a11y:\n    \"Every message carries a visually hidden label naming the speaker. Alignment and colour tell \" +\n    \"a sighted reader who is talking and tell a screen reader user nothing, so the role is always \" +\n    \"in text. Message actions fade in on hover but stay in the DOM and in the tab order — a \" +\n    \"control that only exists on hover is unreachable by keyboard and invisible on touch — and \" +\n    \"on devices that cannot hover they are always shown. MessageTimestamp is a real <time>.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AAKJ,CAAC"}

package/dist/components/ai-prompt-input/ai-prompt-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-prompt-input.d.ts","names":[],"sources":["../../../src/components/ai-prompt-input/ai-prompt-input.tsx"],"mappings":";;UA2CiB,yBAAyB,KAAK;EAC7C,YAAY,OAAO,UAAU;;EAE7B;;EAEA;;iBAGc,cACd,WACA,UACA,UACA,MACA,aACG,SACF,mCAAgB,IAAA;UA+CF,iCAAiC,KAChD;EAGA;;;;;;;EAOA;;iBAGc,sBACd,WACA,SACA,eACA,WACA,aACG,SACF,2CAAwB,IAAA;;iBAuDX,qBAAqB,cAAc,SAAS,+CAA4B,IAAA;UAUvE,+BAA+B;;EAE9C;;EAEA;;EAEA;;;;;;;;;iBAUc,oBACd,WACA,OACA,WACA,WACG,SACF,yCAAsB,IAAA;UAsCR,gCAAgC;EAC/C;EACA;;EAEA;;;;;;;;;;;;;;iBAec,qBACd,WACA,OACA,KACA,WACG,SACF,0CAAuB,IAAA"}
+{"version":3,"file":"ai-prompt-input.d.ts","names":[],"sources":["../../../src/components/ai-prompt-input/ai-prompt-input.tsx"],"mappings":";;UA4CiB,yBAAyB,KAAK;EAC7C,YAAY,OAAO,UAAU;;EAE7B;;EAEA;;iBAGc,cACd,WACA,UACA,UACA,MACA,aACG,SACF,mCAAgB,IAAA;UA+CF,iCAAiC,KAChD;EAGA;;;;;;;EAOA;;iBAGc,sBACd,WACA,SACA,eACA,WACA,aACG,SACF,2CAAwB,IAAA;;iBAuDX,qBAAqB,cAAc,SAAS,+CAA4B,IAAA;UAUvE,+BAA+B;;EAE9C;;EAEA;;EAEA;;;;;;;;;iBAUc,oBACd,WACA,OACA,WACA,WACG,SACF,yCAAsB,IAAA;UAgER,gCAAgC;EAC/C;EACA;;EAEA;;;;;;;;;;;;;;iBAec,qBACd,WACA,OACA,KACA,WACG,SACF,0CAAuB,IAAA"}