@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/ai-response/response-text.js

@@ -0,0 +1,63 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { InlineCitation } from "../ai-sources/ai-sources.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/ai-response/response-text.tsx
+const PREFIX = "dowel-ai-response";
+const STYLES = `
+@keyframes ${PREFIX}-word{from{opacity:0;filter:blur(4px);translate:0 2px}}
+@keyframes ${PREFIX}-pop{from{opacity:0;scale:.6}}
+.${PREFIX}-word{display:inline-block;animation:${PREFIX}-word calc(220ms * var(--motion-scale,1)) var(--ease-out-quint) both}
+.${PREFIX}-pop{display:inline-block;animation:${PREFIX}-pop calc(250ms * var(--motion-scale,1)) var(--ease-overshoot) both}
+`;
+const TOKEN_SPLIT = /(\s+|\[\d+\])/;
+const CITATION_MARKER = /^\[(\d+)\]$/;
+const HAS_WORD_CHARACTER = /[\p{L}\p{N}]/u;
+const WHITESPACE = /^\s+$/;
+function tokenize(text) {
+	return text.split(TOKEN_SPLIT).filter((token) => token !== "");
+}
+function ResponseText({ className, text, citations, animateInitial = false, ...props }) {
+	const tokens = tokenize(text);
+	const [baseline] = useState(() => animateInitial ? 0 : tokens.length);
+	const rendered = tokens.map((token, position) => {
+		const arrived = position >= baseline;
+		if (WHITESPACE.test(token)) return token;
+		const marker = CITATION_MARKER.exec(token);
+		if (marker) {
+			const index = Number(marker[1]);
+			const citation = citations?.find((candidate) => candidate.index === index);
+			if (!citation) return token;
+			return /* @__PURE__ */ jsx("span", {
+				"data-slot": "response-citation",
+				className: arrived ? `${PREFIX}-pop` : void 0,
+				children: /* @__PURE__ */ jsx(InlineCitation, {
+					index,
+					title: citation.title,
+					href: citation.href
+				})
+			}, position);
+		}
+		if (!HAS_WORD_CHARACTER.test(token)) return token;
+		return /* @__PURE__ */ jsx("span", {
+			"data-slot": "response-word",
+			className: arrived ? `${PREFIX}-word` : void 0,
+			children: token
+		}, position);
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "response-text",
+		className: cn(className),
+		...props,
+		children: [/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}), rendered]
+	});
+}
+//#endregion
+export { ResponseText };
+
+//# sourceMappingURL=response-text.js.map

package/dist/components/ai-response/response-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"response-text.js","names":[],"sources":["../../../src/components/ai-response/response-text.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AI Response (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { useState, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { InlineCitation } from \"@/components/ai-sources\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Streamed plain text whose words blur in as they arrive.\n *\n * Only words that arrive after the first render animate. Keys are positional,\n * so a word that already exists keeps its DOM node — and a node that is not\n * remounted does not replay its entrance. That is \"animate only what arrived\"\n * without reading a ref during render. There is no stagger: token arrival is\n * the stagger.\n *\n * Whitespace and bare punctuation stay text nodes, so text extraction is\n * unchanged and a line never breaks between a word and its comma. `[n]`\n * markers matching a citation become `InlineCitation`s, which carry the\n * source title in their accessible name.\n *\n * Like `Response`, this is not a live region: announcing a stream token by\n * token is unusable with a screen reader (ADR 0009).\n */\n\nexport interface ResponseCitation {\n  /** Matches the `[n]` marker in the text. */\n  index: number;\n  /** Becomes the citation's accessible name. */\n  title: string;\n  /** Without one the marker is text, not a dead link. */\n  href?: string;\n}\n\nexport interface ResponseTextProps extends Omit<ComponentPropsWithRef<\"span\">, \"children\"> {\n  /** The plain-text stream so far. Re-render it as it grows. */\n  text: string;\n  /** Sources for `[n]` markers. Unmatched markers stay literal text. */\n  citations?: ResponseCitation[];\n  /**\n   * Animate the words present on first render. Off by default, so a replayed\n   * transcript does not blur in its entire history.\n   */\n  animateInitial?: boolean;\n}\n\nconst PREFIX = \"dowel-ai-response\";\n\nconst STYLES = `\n@keyframes ${PREFIX}-word{from{opacity:0;filter:blur(4px);translate:0 2px}}\n@keyframes ${PREFIX}-pop{from{opacity:0;scale:.6}}\n.${PREFIX}-word{display:inline-block;animation:${PREFIX}-word calc(220ms * var(--motion-scale,1)) var(--ease-out-quint) both}\n.${PREFIX}-pop{display:inline-block;animation:${PREFIX}-pop calc(250ms * var(--motion-scale,1)) var(--ease-overshoot) both}\n`;\n\nconst TOKEN_SPLIT = /(\\s+|\\[\\d+\\])/;\nconst CITATION_MARKER = /^\\[(\\d+)\\]$/;\nconst HAS_WORD_CHARACTER = /[\\p{L}\\p{N}]/u;\nconst WHITESPACE = /^\\s+$/;\n\nfunction tokenize(text: string): string[] {\n  return text.split(TOKEN_SPLIT).filter((token) => token !== \"\");\n}\n\nexport function ResponseText({\n  className,\n  text,\n  citations,\n  animateInitial = false,\n  ...props\n}: ResponseTextProps) {\n  const tokens = tokenize(text);\n  // Everything below this index was on screen at first render.\n  const [baseline] = useState(() => (animateInitial ? 0 : tokens.length));\n\n  const rendered: ReactNode[] = tokens.map((token, position) => {\n    const arrived = position >= baseline;\n\n    if (WHITESPACE.test(token)) return token;\n\n    const marker = CITATION_MARKER.exec(token);\n    if (marker) {\n      const index = Number(marker[1]);\n      const citation = citations?.find((candidate) => candidate.index === index);\n      if (!citation) return token;\n      return (\n        <span\n          key={position}\n          data-slot=\"response-citation\"\n          className={arrived ? `${PREFIX}-pop` : undefined}\n        >\n          <InlineCitation index={index} title={citation.title} href={citation.href} />\n        </span>\n      );\n    }\n\n    if (!HAS_WORD_CHARACTER.test(token)) return token;\n\n    return (\n      <span\n        key={position}\n        data-slot=\"response-word\"\n        className={arrived ? `${PREFIX}-word` : undefined}\n      >\n        {token}\n      </span>\n    );\n  });\n\n  return (\n    <span data-slot=\"response-text\" className={cn(className)} {...props}>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      {rendered}\n    </span>\n  );\n}\n"],"mappings":";;;;;;AA+CA,MAAM,SAAS;AAEf,MAAM,SAAS;aACF,OAAO;aACP,OAAO;GACjB,OAAO,uCAAuC,OAAO;GACrD,OAAO,sCAAsC,OAAO;;AAGvD,MAAM,cAAc;AACpB,MAAM,kBAAkB;AACxB,MAAM,qBAAqB;AAC3B,MAAM,aAAa;AAEnB,SAAS,SAAS,MAAwB;CACxC,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,QAAQ,UAAU,UAAU,EAAE;AAC/D;AAEA,SAAgB,aAAa,EAC3B,WACA,MACA,WACA,iBAAiB,OACjB,GAAG,SACiB;CACpB,MAAM,SAAS,SAAS,IAAI;CAE5B,MAAM,CAAC,YAAY,eAAgB,iBAAiB,IAAI,OAAO,MAAO;CAEtE,MAAM,WAAwB,OAAO,KAAK,OAAO,aAAa;EAC5D,MAAM,UAAU,YAAY;EAE5B,IAAI,WAAW,KAAK,KAAK,GAAG,OAAO;EAEnC,MAAM,SAAS,gBAAgB,KAAK,KAAK;EACzC,IAAI,QAAQ;GACV,MAAM,QAAQ,OAAO,OAAO,EAAE;GAC9B,MAAM,WAAW,WAAW,MAAM,cAAc,UAAU,UAAU,KAAK;GACzE,IAAI,CAAC,UAAU,OAAO;GACtB,OACE,oBAAC,QAAD;IAEE,aAAU;IACV,WAAW,UAAU,GAAG,OAAO,QAAQ,KAAA;IAEvC,UAAA,oBAAC,gBAAD;KAAuB;KAAO,OAAO,SAAS;KAAO,MAAM,SAAS;IAAO,CAAA;GACvE,GALC,QAKD;EAEV;EAEA,IAAI,CAAC,mBAAmB,KAAK,KAAK,GAAG,OAAO;EAE5C,OACE,oBAAC,QAAD;GAEE,aAAU;GACV,WAAW,UAAU,GAAG,OAAO,SAAS,KAAA;GAEvC,UAAA;EACG,GALC,QAKD;CAEV,CAAC;CAED,OACE,qBAAC,QAAD;EAAM,aAAU;EAAgB,WAAW,GAAG,SAAS;EAAG,GAAI;EAA9D,UAAA,CACE,oBAAC,SAAD;GAAO,MAAM;GAAQ,YAAW;GAC7B,UAAA;EACI,CAAA,GACN,QACG;;AAEV"}

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

@@ -1,5 +1,5 @@
 import { Collapsible } from "radix-ui";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, ReactNode } from "react";
 //#region src/components/ai-sources/ai-sources.d.ts
 /**
  * Where a response came from.
@@ -8,6 +8,8 @@ import { ComponentPropsWithRef } from "react";
  * check, so they are first-class here rather than a footnote: an inline marker
  * next to the sentence, and a list underneath that says what each marker is.
  */
+/** Hostname without "www.", or the input unchanged when it is not a URL. */
+declare function sourceHost(href: string): string;
 /**
  * An inline citation marker.
  *
@@ -21,14 +23,33 @@ interface InlineCitationProps extends ComponentPropsWithRef<"a"> {
   index: number;
   /** What is being cited. Becomes the accessible name. */
   title: string;
+  /**
+   * Show a preview card — host, title, description — on hover and on keyboard
+   * focus. Requires `href`: a text marker is not focusable, and a preview that
+   * only hover can reach is not allowed.
+   */
+  preview?: boolean;
+  /** Excerpt shown in the preview card. */
+  description?: string;
+  /** The source's mark in the preview header. Decorative; an <img> needs `alt=""`. */
+  favicon?: ReactNode;
+  /** Open delay for the preview, in milliseconds. */
+  previewDelay?: number;
 }
-declare function InlineCitation({ className, index, title, href, ...props }: InlineCitationProps): import("react").JSX.Element;
+declare function InlineCitation({ className, index, title, href, preview, description, favicon, previewDelay, ...props }: InlineCitationProps): import("react").JSX.Element;
 type SourcesProps = ComponentPropsWithRef<typeof Collapsible.Root>;
 declare function Sources({ className, ...props }: SourcesProps): import("react").JSX.Element;
 interface SourcesTriggerProps extends ComponentPropsWithRef<typeof Collapsible.Trigger> {
   count: number;
+  /**
+   * Marks shown as an overlapping stack before the label. Decorative: the
+   * count is already in the trigger's words. A `null` entry shows a globe.
+   */
+  favicons?: ReactNode[];
+  /** How many marks before a "+n" chip. */
+  stackLimit?: number;
 }
-declare function SourcesTrigger({ className, count, children, ...props }: SourcesTriggerProps): import("react").JSX.Element;
+declare function SourcesTrigger({ className, count, favicons, stackLimit, children, ...props }: SourcesTriggerProps): import("react").JSX.Element;
 declare function SourcesContent({ className, children, ...props }: ComponentPropsWithRef<typeof Collapsible.Content>): import("react").JSX.Element;
 interface SourceProps extends ComponentPropsWithRef<"a"> {
   index: number;
@@ -37,8 +58,13 @@ interface SourceProps extends ComponentPropsWithRef<"a"> {
   origin?: string;
   /** The quoted passage, if there is one. */
   excerpt?: string;
+  /**
+   * The source's mark, shown before the title. Decorative — an <img> needs
+   * `alt=""` — and the index badge stays, since it links marker and row.
+   */
+  favicon?: ReactNode;
 }
-declare function Source({ className, index, title, origin, excerpt, ...props }: SourceProps): import("react").JSX.Element;
+declare function Source({ className, index, title, origin, excerpt, favicon, ...props }: SourceProps): import("react").JSX.Element;
 //#endregion
-export { InlineCitation, InlineCitationProps, Source, SourceProps, Sources, SourcesContent, SourcesProps, SourcesTrigger, SourcesTriggerProps };
+export { InlineCitation, InlineCitationProps, Source, SourceProps, Sources, SourcesContent, SourcesProps, SourcesTrigger, SourcesTriggerProps, sourceHost };
 //# sourceMappingURL=ai-sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ai-sources.d.ts","names":[],"sources":["../../../src/components/ai-sources/ai-sources.tsx"],"mappings":";;;;;;;;;;;;;;;;;;UAwBiB,4BAA4B;;EAE3C;;EAEA;;iBAGc,iBACd,WACA,OACA,OACA,SACG,SACF,sCAAmB,IAAA;KAmCV,eAAe,6BAA6B,YAAqB;iBAE7D,UAAU,cAAc,SAAS,+BAAY,IAAA;UAU5C,4BAA4B,6BACpC,YAAqB;EAE5B;;iBAGc,iBAAiB,WAAW,OAAO,aAAa,SAAS,sCAAmB,IAAA;iBAgC5E,iBACd,WACA,aACG,SACF,6BAA6B,YAAqB,2BAAQ,IAAA;UAkB5C,oBAAoB;EACnC;EACA;;EAEA;;EAEA;;iBAGc,SAAS,WAAW,OAAO,OAAO,QAAQ,YAAY,SAAS,8BAAW,IAAA"}
+{"version":3,"file":"ai-sources.d.ts","names":[],"sources":["../../../src/components/ai-sources/ai-sources.tsx"],"mappings":";;;;;;;;;;;iBAwBgB,WAAW;;;;;;;;;UAoCV,4BAA4B;;EAE3C;;EAEA;;;;;;EAMA;;EAEA;;EAEA,UAAU;;EAEV;;iBAGc,iBACd,WACA,OACA,OACA,MACA,SACA,aACA,SACA,iBACG,SACF,sCAAmB,IAAA;KAyFV,eAAe,6BAA6B,YAAqB;iBAE7D,UAAU,cAAc,SAAS,+BAAY,IAAA;UAU5C,4BAA4B,6BACpC,YAAqB;EAE5B;;;;;EAKA,WAAW;;EAEX;;iBAGc,iBACd,WACA,OACA,UACA,YACA,aACG,SACF,sCAAmB,IAAA;iBA6DN,iBACd,WACA,aACG,SACF,6BAA6B,YAAqB,2BAAQ,IAAA;UAkB5C,oBAAoB;EACnC;EACA;;EAEA;;EAEA;;;;;EAKA,UAAU;;iBAeI,SACd,WACA,OACA,OACA,QACA,SACA,YACG,SACF,8BAAW,IAAA"}

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

@@ -1,10 +1,56 @@
 "use client";
-import { focusRing } from "../../lib/styles.js";
+import { focusRing, mirrorForDirection } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
+import { Tooltip as Tooltip$1, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
 import { Collapsible } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 //#region src/components/ai-sources/ai-sources.tsx
-function InlineCitation({ className, index, title, href, ...props }) {
+/**
+* Where a response came from.
+*
+* Citations are the difference between an assertion and a claim someone can
+* check, so they are first-class here rather than a footnote: an inline marker
+* next to the sentence, and a list underneath that says what each marker is.
+*/
+/** Hostname without "www.", or the input unchanged when it is not a URL. */
+function sourceHost(href) {
+	try {
+		const { hostname } = new URL(href);
+		return hostname ? hostname.replace(/^www\./, "") : href;
+	} catch {
+		return href;
+	}
+}
+/** The neutral mark for a source with no favicon — never a fake letter badge. */
+function GlobeMark({ className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		className,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9",
+			stroke: "currentColor",
+			strokeWidth: "2"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M3 12h18M12 3c2.5 2.5 3.5 5.5 3.5 9s-1 6.5-3.5 9c-2.5-2.5-3.5-5.5-3.5-9s1-6.5 3.5-9Z",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinejoin: "round"
+		})]
+	});
+}
+/** A decorative mark slot that sizes whatever it is given (an <img alt="">, an SVG). */
+const markSlot = "grid shrink-0 place-items-center overflow-hidden rounded-full [&>*]:size-full [&>*]:object-cover";
+function InlineCitation({ className, index, title, href, preview = false, description, favicon, previewDelay = 0, ...props }) {
+	const unreachablePreview = preview && !href;
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || !unreachablePreview) return;
+		console.warn("InlineCitation: `preview` needs an `href`. Without one the marker is not focusable, so the preview would be reachable by hover alone; it is not rendered.");
+	}, [unreachablePreview]);
 	const shared = cn("mx-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded px-1 align-[0.15em]", "bg-muted text-2xs font-medium text-muted-foreground tabular-nums", className);
 	if (!href) return /* @__PURE__ */ jsxs("span", {
 		"data-slot": "inline-citation",
@@ -22,7 +68,7 @@ function InlineCitation({ className, index, title, href, ...props }) {
 			]
 		})]
 	});
-	return /* @__PURE__ */ jsx("a", {
+	const link = /* @__PURE__ */ jsx("a", {
 		"data-slot": "inline-citation",
 		href,
 		"aria-label": `Source ${String(index)}: ${title}`,
@@ -33,6 +79,60 @@ function InlineCitation({ className, index, title, href, ...props }) {
 			children: index
 		})
 	});
+	if (!preview) return link;
+	const host = sourceHost(href);
+	return /* @__PURE__ */ jsxs(Tooltip$1, {
+		delayDuration: previewDelay,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: link
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			side: "top",
+			"aria-label": description ? `${host}. ${description}` : host,
+			className: "w-72 max-w-none rounded-xl border border-border bg-popover p-3 text-start text-wrap text-popover-foreground shadow-lg",
+			children: /* @__PURE__ */ jsxs("span", {
+				"data-slot": "inline-citation-preview",
+				className: "block",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5 text-xs text-muted-foreground",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: cn(markSlot, "size-3.5"),
+								children: favicon ?? /* @__PURE__ */ jsx(GlobeMark, {})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 truncate",
+								children: host
+							}),
+							/* @__PURE__ */ jsx("svg", {
+								viewBox: "0 0 24 24",
+								fill: "none",
+								"aria-hidden": "true",
+								className: cn("size-3 shrink-0", mirrorForDirection),
+								children: /* @__PURE__ */ jsx("path", {
+									d: "M7 17 17 7M8 7h9v9",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									strokeLinecap: "round",
+									strokeLinejoin: "round"
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "mt-1.5 block text-sm font-medium text-popover-foreground",
+						children: title
+					}),
+					description ? /* @__PURE__ */ jsx("span", {
+						className: "mt-1 block text-xs text-muted-foreground",
+						children: description
+					}) : null
+				]
+			})
+		})]
+	});
 }
 function Sources({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Root, {
@@ -41,24 +141,44 @@ function Sources({ className, ...props }) {
 		...props
 	});
 }
-function SourcesTrigger({ className, count, children, ...props }) {
+function SourcesTrigger({ className, count, favicons, stackLimit = 3, children, ...props }) {
+	const shown = favicons ? favicons.slice(0, Math.max(0, stackLimit)) : [];
+	const overflow = favicons ? favicons.length - shown.length : 0;
 	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 		"data-slot": "sources-trigger",
-		className: cn("flex items-center gap-1.5 rounded-md text-xs text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:text-foreground", "[&[data-state=open]>svg:last-child]:rotate-180", focusRing, className),
+		className: cn("group/trigger flex items-center gap-1.5 rounded-md text-xs text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:text-foreground", "[&[data-state=open]>svg:last-child]:rotate-180", focusRing, className),
 		...props,
-		children: [children ?? `${String(count)} ${count === 1 ? "source" : "sources"}`, /* @__PURE__ */ jsx("svg", {
-			viewBox: "0 0 24 24",
-			fill: "none",
-			"aria-hidden": "true",
-			className: "size-3.5 shrink-0 transition-transform duration-[var(--duration-normal)]",
-			children: /* @__PURE__ */ jsx("path", {
-				d: "m6 9 6 6 6-6",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeLinecap: "round",
-				strokeLinejoin: "round"
+		children: [
+			favicons && favicons.length > 0 ? /* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				"data-slot": "sources-stack",
+				className: "flex items-center",
+				children: [shown.map((favicon, position) => /* @__PURE__ */ jsx("span", {
+					"data-slot": "sources-stack-mark",
+					style: { zIndex: shown.length - position },
+					className: cn(markSlot, "relative size-4.5 border border-border bg-background text-muted-foreground", position > 0 && "-ms-2 transition-[margin-inline-start] duration-[calc(250ms*var(--motion-scale))] ease-[var(--ease-out-quint)] group-hover/trigger:group-data-[state=closed]/trigger:ms-0.5 group-focus-visible/trigger:group-data-[state=closed]/trigger:ms-0.5"),
+					children: favicon ?? /* @__PURE__ */ jsx(GlobeMark, {})
+				}, position)), overflow > 0 ? /* @__PURE__ */ jsxs("span", {
+					"data-slot": "sources-stack-overflow",
+					className: "ms-1 tabular-nums",
+					children: ["+", overflow]
+				}) : null]
+			}) : null,
+			children ?? `${String(count)} ${count === 1 ? "source" : "sources"}`,
+			/* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true",
+				className: "size-3.5 shrink-0 transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "m6 9 6 6 6-6",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
 			})
-		})]
+		]
 	});
 }
 function SourcesContent({ className, children, ...props }) {
@@ -72,41 +192,62 @@ function SourcesContent({ className, children, ...props }) {
 		})
 	});
 }
-function Source({ className, index, title, origin, excerpt, ...props }) {
-	return /* @__PURE__ */ jsx("li", {
+const PREFIX = "dowel-ai-sources";
+const STYLES = `
+@keyframes ${PREFIX}-row-in{from{opacity:0;translate:0 4px}}
+[data-slot=sources-content][data-state=open] [data-slot=source]{animation:${PREFIX}-row-in calc(250ms * var(--motion-scale,1)) var(--ease-out-quint) both;animation-delay:calc(var(--dowel-i,0) * 35ms * var(--motion-scale,1))}
+`;
+/** Rows after this many share the last row's delay. */
+const STAGGER_CAP = 10;
+function Source({ className, index, title, origin, excerpt, favicon, ...props }) {
+	const order = Math.min(Math.max(index - 1, 0), STAGGER_CAP);
+	return /* @__PURE__ */ jsxs("li", {
 		"data-slot": "source",
-		children: /* @__PURE__ */ jsxs("a", {
+		style: { "--dowel-i": order },
+		children: [/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}), /* @__PURE__ */ jsxs("a", {
 			className: cn("flex gap-2 rounded-md border border-border bg-card/50 px-2.5 py-2", "transition-colors duration-[var(--duration-fast)] hover:bg-accent/50", focusRing, className),
 			...props,
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: "mt-0.5 grid size-4 shrink-0 place-items-center rounded bg-muted text-2xs font-medium text-muted-foreground tabular-nums",
-				children: index
-			}), /* @__PURE__ */ jsxs("span", {
-				className: "min-w-0 flex-1",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "block truncate text-xs font-medium text-foreground",
-						children: title
-					}),
-					origin ? /* @__PURE__ */ jsx("span", {
-						className: "block truncate text-2xs text-muted-foreground",
-						children: origin
-					}) : null,
-					excerpt ? /* @__PURE__ */ jsxs("span", {
-						className: "mt-1 line-clamp-2 block text-xs text-muted-foreground",
-						children: [
-							"“",
-							excerpt,
-							"”"
-						]
-					}) : null
-				]
-			})]
-		})
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "mt-0.5 grid size-4 shrink-0 place-items-center rounded bg-muted text-2xs font-medium text-muted-foreground tabular-nums",
+					children: index
+				}),
+				favicon ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cn(markSlot, "mt-0.5 size-4"),
+					children: favicon
+				}) : null,
+				/* @__PURE__ */ jsxs("span", {
+					className: "min-w-0 flex-1",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "block truncate text-xs font-medium text-foreground",
+							children: title
+						}),
+						origin ? /* @__PURE__ */ jsx("span", {
+							className: "block truncate text-2xs text-muted-foreground",
+							children: origin
+						}) : null,
+						excerpt ? /* @__PURE__ */ jsxs("span", {
+							className: "mt-1 line-clamp-2 block text-xs text-muted-foreground",
+							children: [
+								"“",
+								excerpt,
+								"”"
+							]
+						}) : null
+					]
+				})
+			]
+		})]
 	});
 }
 //#endregion
-export { InlineCitation, Source, Sources, SourcesContent, SourcesTrigger };
+export { InlineCitation, Source, Sources, SourcesContent, SourcesTrigger, sourceHost };
 
 //# sourceMappingURL=ai-sources.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ai-sources.js","names":["CollapsiblePrimitive"],"sources":["../../../src/components/ai-sources/ai-sources.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Where a response came from.\n *\n * Citations are the difference between an assertion and a claim someone can\n * check, so they are first-class here rather than a footnote: an inline marker\n * next to the sentence, and a list underneath that says what each marker is.\n */\n\n/**\n * An inline citation marker.\n *\n * The visible text is a bare number, which tells a screen reader user nothing,\n * so the real title goes in the accessible name. Rendered as a link when given\n * an href, and as plain text otherwise — a marker that looks clickable and is\n * not is worse than one that does not.\n */\nexport interface InlineCitationProps extends ComponentPropsWithRef<\"a\"> {\n  /** Position in the source list, starting at 1. */\n  index: number;\n  /** What is being cited. Becomes the accessible name. */\n  title: string;\n}\n\nexport function InlineCitation({\n  className,\n  index,\n  title,\n  href,\n  ...props\n}: InlineCitationProps) {\n  const shared = cn(\n    \"mx-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded px-1 align-[0.15em]\",\n    \"bg-muted text-2xs font-medium text-muted-foreground tabular-nums\",\n    className,\n  );\n\n  if (!href) {\n    return (\n      <span data-slot=\"inline-citation\" className={shared}>\n        <span aria-hidden=\"true\">{index}</span>\n        <span className=\"sr-only\">\n          Source {index}: {title}\n        </span>\n      </span>\n    );\n  }\n\n  return (\n    <a\n      data-slot=\"inline-citation\"\n      href={href}\n      aria-label={`Source ${String(index)}: ${title}`}\n      className={cn(\n        shared,\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n        focusRing,\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\">{index}</span>\n    </a>\n  );\n}\n\nexport type SourcesProps = ComponentPropsWithRef<typeof CollapsiblePrimitive.Root>;\n\nexport function Sources({ className, ...props }: SourcesProps) {\n  return (\n    <CollapsiblePrimitive.Root\n      data-slot=\"sources\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface SourcesTriggerProps extends ComponentPropsWithRef<\n  typeof CollapsiblePrimitive.Trigger\n> {\n  count: number;\n}\n\nexport function SourcesTrigger({ className, count, children, ...props }: SourcesTriggerProps) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      data-slot=\"sources-trigger\"\n      className={cn(\n        \"flex items-center gap-1.5 rounded-md text-xs text-muted-foreground\",\n        \"transition-colors duration-[var(--duration-fast)] hover:text-foreground\",\n        \"[&[data-state=open]>svg:last-child]:rotate-180\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      {children ?? `${String(count)} ${count === 1 ? \"source\" : \"sources\"}`}\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-3.5 shrink-0 transition-transform duration-[var(--duration-normal)]\"\n      >\n        <path\n          d=\"m6 9 6 6 6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </CollapsiblePrimitive.Trigger>\n  );\n}\n\nexport function SourcesContent({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<typeof CollapsiblePrimitive.Content>) {\n  return (\n    <CollapsiblePrimitive.Content\n      data-slot=\"sources-content\"\n      className={cn(\n        \"overflow-hidden\",\n        \"data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Ordered, because the numbers in the inline markers refer to positions\n          in this list. */}\n      <ol className=\"mt-2 flex flex-col gap-1.5\">{children}</ol>\n    </CollapsiblePrimitive.Content>\n  );\n}\n\nexport interface SourceProps extends ComponentPropsWithRef<\"a\"> {\n  index: number;\n  title: string;\n  /** Where it came from — a domain, a filename, a document title. */\n  origin?: string;\n  /** The quoted passage, if there is one. */\n  excerpt?: string;\n}\n\nexport function Source({ className, index, title, origin, excerpt, ...props }: SourceProps) {\n  return (\n    <li data-slot=\"source\">\n      <a\n        className={cn(\n          \"flex gap-2 rounded-md border border-border bg-card/50 px-2.5 py-2\",\n          \"transition-colors duration-[var(--duration-fast)] hover:bg-accent/50\",\n          focusRing,\n          className,\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className=\"mt-0.5 grid size-4 shrink-0 place-items-center rounded bg-muted text-2xs font-medium text-muted-foreground tabular-nums\"\n        >\n          {index}\n        </span>\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-xs font-medium text-foreground\">{title}</span>\n          {origin ? (\n            <span className=\"block truncate text-2xs text-muted-foreground\">{origin}</span>\n          ) : null}\n          {excerpt ? (\n            <span className=\"mt-1 line-clamp-2 block text-xs text-muted-foreground\">\n              “{excerpt}”\n            </span>\n          ) : null}\n        </span>\n      </a>\n    </li>\n  );\n}\n"],"mappings":";;;;;;AA+BA,SAAgB,eAAe,EAC7B,WACA,OACA,OACA,MACA,GAAG,SACmB;CACtB,MAAM,SAAS,GACb,0FACA,oEACA,SACF;CAEA,IAAI,CAAC,MACH,OACE,qBAAC,QAAD;EAAM,aAAU;EAAkB,WAAW;EAA7C,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAQ,UAAA;EAAY,CAAA,GACtC,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IAA0B;IAChB;IAAM;IAAG;GACb;EACF,CAAA,CAAA;;CAIV,OACE,oBAAC,KAAD;EACE,aAAU;EACJ;EACN,cAAY,UAAU,OAAO,KAAK,EAAE,IAAI;EACxC,WAAW,GACT,QACA,2FACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,QAAD;GAAM,eAAY;GAAQ,UAAA;EAAY,CAAA;CACrC,CAAA;AAEP;AAIA,SAAgB,QAAQ,EAAE,WAAW,GAAG,SAAuB;CAC7D,OACE,oBAACA,YAAqB,MAAtB;EACE,aAAU;EACV,WAAW,GAAG,kBAAkB,SAAS;EACzC,GAAI;CACL,CAAA;AAEL;AAQA,SAAgB,eAAe,EAAE,WAAW,OAAO,UAAU,GAAG,SAA8B;CAC5F,OACE,qBAACA,YAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GACT,sEACA,2EACA,kDACA,WACA,SACF;EACA,GAAI;EATN,UAAA,CAWG,YAAY,GAAG,OAAO,KAAK,EAAE,GAAG,UAAU,IAAI,WAAW,aAC1D,oBAAC,OAAD;GACE,SAAQ;GACR,MAAK;GACL,eAAY;GACZ,WAAU;GAEV,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA,CACuB;;AAElC;AAEA,SAAgB,eAAe,EAC7B,WACA,UACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,YAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GACT,mBACA,wFACA,SACF;EACA,GAAI;EAIJ,UAAA,oBAAC,MAAD;GAAI,WAAU;GAA8B;EAAa,CAAA;CAC7B,CAAA;AAElC;AAWA,SAAgB,OAAO,EAAE,WAAW,OAAO,OAAO,QAAQ,SAAS,GAAG,SAAsB;CAC1F,OACE,oBAAC,MAAD;EAAI,aAAU;EACZ,UAAA,qBAAC,KAAD;GACE,WAAW,GACT,qEACA,wEACA,WACA,SACF;GACA,GAAI;GAPN,UAAA,CASE,oBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IAET,UAAA;GACG,CAAA,GACN,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KACE,oBAAC,QAAD;MAAM,WAAU;MAAsD,UAAA;KAAY,CAAA;KACjF,SACC,oBAAC,QAAD;MAAM,WAAU;MAAiD,UAAA;KAAa,CAAA,IAC5E;KACH,UACC,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAAwE;OACpE;OAAQ;MACN;KACJ,CAAA,IAAA;IACA;GACL,CAAA,CAAA;;CACD,CAAA;AAER"}
+{"version":3,"file":"ai-sources.js","names":["Tooltip","CollapsiblePrimitive"],"sources":["../../../src/components/ai-sources/ai-sources.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AI Sources and AI Citation (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport {\n  useEffect,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/tooltip\";\nimport { focusRing, mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Where a response came from.\n *\n * Citations are the difference between an assertion and a claim someone can\n * check, so they are first-class here rather than a footnote: an inline marker\n * next to the sentence, and a list underneath that says what each marker is.\n */\n\n/** Hostname without \"www.\", or the input unchanged when it is not a URL. */\nexport function sourceHost(href: string): string {\n  try {\n    const { hostname } = new URL(href);\n    return hostname ? hostname.replace(/^www\\./, \"\") : href;\n  } catch {\n    return href;\n  }\n}\n\n/** The neutral mark for a source with no favicon — never a fake letter badge. */\nfunction GlobeMark({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className={className}>\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      <path\n        d=\"M3 12h18M12 3c2.5 2.5 3.5 5.5 3.5 9s-1 6.5-3.5 9c-2.5-2.5-3.5-5.5-3.5-9s1-6.5 3.5-9Z\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\n/** A decorative mark slot that sizes whatever it is given (an <img alt=\"\">, an SVG). */\nconst markSlot =\n  \"grid shrink-0 place-items-center overflow-hidden rounded-full [&>*]:size-full [&>*]:object-cover\";\n\n/**\n * An inline citation marker.\n *\n * The visible text is a bare number, which tells a screen reader user nothing,\n * so the real title goes in the accessible name. Rendered as a link when given\n * an href, and as plain text otherwise — a marker that looks clickable and is\n * not is worse than one that does not.\n */\nexport interface InlineCitationProps extends ComponentPropsWithRef<\"a\"> {\n  /** Position in the source list, starting at 1. */\n  index: number;\n  /** What is being cited. Becomes the accessible name. */\n  title: string;\n  /**\n   * Show a preview card — host, title, description — on hover and on keyboard\n   * focus. Requires `href`: a text marker is not focusable, and a preview that\n   * only hover can reach is not allowed.\n   */\n  preview?: boolean;\n  /** Excerpt shown in the preview card. */\n  description?: string;\n  /** The source's mark in the preview header. Decorative; an <img> needs `alt=\"\"`. */\n  favicon?: ReactNode;\n  /** Open delay for the preview, in milliseconds. */\n  previewDelay?: number;\n}\n\nexport function InlineCitation({\n  className,\n  index,\n  title,\n  href,\n  preview = false,\n  description,\n  favicon,\n  previewDelay = 0,\n  ...props\n}: InlineCitationProps) {\n  const unreachablePreview = preview && !href;\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\" || !unreachablePreview) return;\n    console.warn(\n      \"InlineCitation: `preview` needs an `href`. Without one the marker is not focusable, \" +\n        \"so the preview would be reachable by hover alone; it is not rendered.\",\n    );\n  }, [unreachablePreview]);\n\n  const shared = cn(\n    \"mx-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded px-1 align-[0.15em]\",\n    \"bg-muted text-2xs font-medium text-muted-foreground tabular-nums\",\n    className,\n  );\n\n  if (!href) {\n    return (\n      <span data-slot=\"inline-citation\" className={shared}>\n        <span aria-hidden=\"true\">{index}</span>\n        <span className=\"sr-only\">\n          Source {index}: {title}\n        </span>\n      </span>\n    );\n  }\n\n  const link = (\n    <a\n      data-slot=\"inline-citation\"\n      href={href}\n      aria-label={`Source ${String(index)}: ${title}`}\n      className={cn(\n        shared,\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n        focusRing,\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\">{index}</span>\n    </a>\n  );\n\n  if (!preview) return link;\n\n  const host = sourceHost(href);\n  return (\n    <Tooltip delayDuration={previewDelay}>\n      <TooltipTrigger asChild>{link}</TooltipTrigger>\n      <TooltipContent\n        side=\"top\"\n        // The title is already the link's name; the description is what adds\n        // to it, so the hidden tooltip copy is host and excerpt only.\n        aria-label={description ? `${host}. ${description}` : host}\n        className=\"w-72 max-w-none rounded-xl border border-border bg-popover p-3 text-start text-wrap text-popover-foreground shadow-lg\"\n      >\n        <span data-slot=\"inline-citation-preview\" className=\"block\">\n          <span className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n            <span aria-hidden=\"true\" className={cn(markSlot, \"size-3.5\")}>\n              {favicon ?? <GlobeMark />}\n            </span>\n            <span className=\"min-w-0 truncate\">{host}</span>\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              aria-hidden=\"true\"\n              className={cn(\"size-3 shrink-0\", mirrorForDirection)}\n            >\n              <path\n                d=\"M7 17 17 7M8 7h9v9\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </span>\n          <span className=\"mt-1.5 block text-sm font-medium text-popover-foreground\">\n            {title}\n          </span>\n          {description ? (\n            <span className=\"mt-1 block text-xs text-muted-foreground\">{description}</span>\n          ) : null}\n        </span>\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n\nexport type SourcesProps = ComponentPropsWithRef<typeof CollapsiblePrimitive.Root>;\n\nexport function Sources({ className, ...props }: SourcesProps) {\n  return (\n    <CollapsiblePrimitive.Root\n      data-slot=\"sources\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface SourcesTriggerProps extends ComponentPropsWithRef<\n  typeof CollapsiblePrimitive.Trigger\n> {\n  count: number;\n  /**\n   * Marks shown as an overlapping stack before the label. Decorative: the\n   * count is already in the trigger's words. A `null` entry shows a globe.\n   */\n  favicons?: ReactNode[];\n  /** How many marks before a \"+n\" chip. */\n  stackLimit?: number;\n}\n\nexport function SourcesTrigger({\n  className,\n  count,\n  favicons,\n  stackLimit = 3,\n  children,\n  ...props\n}: SourcesTriggerProps) {\n  const shown = favicons ? favicons.slice(0, Math.max(0, stackLimit)) : [];\n  const overflow = favicons ? favicons.length - shown.length : 0;\n\n  return (\n    <CollapsiblePrimitive.Trigger\n      data-slot=\"sources-trigger\"\n      className={cn(\n        \"group/trigger flex items-center gap-1.5 rounded-md text-xs text-muted-foreground\",\n        \"transition-colors duration-[var(--duration-fast)] hover:text-foreground\",\n        \"[&[data-state=open]>svg:last-child]:rotate-180\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      {favicons && favicons.length > 0 ? (\n        <span aria-hidden=\"true\" data-slot=\"sources-stack\" className=\"flex items-center\">\n          {shown.map((favicon, position) => (\n            <span\n              key={position}\n              data-slot=\"sources-stack-mark\"\n              style={{ zIndex: shown.length - position }}\n              className={cn(\n                markSlot,\n                \"relative size-4.5 border border-border bg-background text-muted-foreground\",\n                // Fans out on hover and keyboard focus while closed; no React\n                // state, so a moving pointer never re-renders.\n                position > 0 &&\n                  \"-ms-2 transition-[margin-inline-start] duration-[calc(250ms*var(--motion-scale))] ease-[var(--ease-out-quint)] group-hover/trigger:group-data-[state=closed]/trigger:ms-0.5 group-focus-visible/trigger:group-data-[state=closed]/trigger:ms-0.5\",\n              )}\n            >\n              {favicon ?? <GlobeMark />}\n            </span>\n          ))}\n          {overflow > 0 ? (\n            <span data-slot=\"sources-stack-overflow\" className=\"ms-1 tabular-nums\">\n              +{overflow}\n            </span>\n          ) : null}\n        </span>\n      ) : null}\n      {children ?? `${String(count)} ${count === 1 ? \"source\" : \"sources\"}`}\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-3.5 shrink-0 transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\"\n      >\n        <path\n          d=\"m6 9 6 6 6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </CollapsiblePrimitive.Trigger>\n  );\n}\n\nexport function SourcesContent({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<typeof CollapsiblePrimitive.Content>) {\n  return (\n    <CollapsiblePrimitive.Content\n      data-slot=\"sources-content\"\n      className={cn(\n        \"overflow-hidden\",\n        \"data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Ordered, because the numbers in the inline markers refer to positions\n          in this list. */}\n      <ol className=\"mt-2 flex flex-col gap-1.5\">{children}</ol>\n    </CollapsiblePrimitive.Content>\n  );\n}\n\nexport interface SourceProps extends ComponentPropsWithRef<\"a\"> {\n  index: number;\n  title: string;\n  /** Where it came from — a domain, a filename, a document title. */\n  origin?: string;\n  /** The quoted passage, if there is one. */\n  excerpt?: string;\n  /**\n   * The source's mark, shown before the title. Decorative — an <img> needs\n   * `alt=\"\"` — and the index badge stays, since it links marker and row.\n   */\n  favicon?: ReactNode;\n}\n\nconst PREFIX = \"dowel-ai-sources\";\n\n/* Rows rise in one after another when the list opens; the index is capped so\n * a long list is not still arriving seconds later. */\nconst STYLES = `\n@keyframes ${PREFIX}-row-in{from{opacity:0;translate:0 4px}}\n[data-slot=sources-content][data-state=open] [data-slot=source]{animation:${PREFIX}-row-in calc(250ms * var(--motion-scale,1)) var(--ease-out-quint) both;animation-delay:calc(var(--dowel-i,0) * 35ms * var(--motion-scale,1))}\n`;\n\n/** Rows after this many share the last row's delay. */\nconst STAGGER_CAP = 10;\n\nexport function Source({\n  className,\n  index,\n  title,\n  origin,\n  excerpt,\n  favicon,\n  ...props\n}: SourceProps) {\n  const order = Math.min(Math.max(index - 1, 0), STAGGER_CAP);\n  return (\n    <li data-slot=\"source\" style={{ \"--dowel-i\": order } as CSSProperties}>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <a\n        className={cn(\n          \"flex gap-2 rounded-md border border-border bg-card/50 px-2.5 py-2\",\n          \"transition-colors duration-[var(--duration-fast)] hover:bg-accent/50\",\n          focusRing,\n          className,\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className=\"mt-0.5 grid size-4 shrink-0 place-items-center rounded bg-muted text-2xs font-medium text-muted-foreground tabular-nums\"\n        >\n          {index}\n        </span>\n        {favicon ? (\n          <span aria-hidden=\"true\" className={cn(markSlot, \"mt-0.5 size-4\")}>\n            {favicon}\n          </span>\n        ) : null}\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-xs font-medium text-foreground\">{title}</span>\n          {origin ? (\n            <span className=\"block truncate text-2xs text-muted-foreground\">{origin}</span>\n          ) : null}\n          {excerpt ? (\n            <span className=\"mt-1 line-clamp-2 block text-xs text-muted-foreground\">\n              “{excerpt}”\n            </span>\n          ) : null}\n        </span>\n      </a>\n    </li>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import { InlineCitation, InlineCitationProps, Source, SourceProps, Sources, SourcesContent, SourcesProps, SourcesTrigger, SourcesTriggerProps } from "./ai-sources.js";
-export { InlineCitation, type InlineCitationProps, Source, type SourceProps, Sources, SourcesContent, type SourcesProps, SourcesTrigger, type SourcesTriggerProps };
+import { InlineCitation, InlineCitationProps, Source, SourceProps, Sources, SourcesContent, SourcesProps, SourcesTrigger, SourcesTriggerProps, sourceHost } from "./ai-sources.js";
+export { InlineCitation, type InlineCitationProps, Source, type SourceProps, Sources, SourcesContent, type SourcesProps, SourcesTrigger, type SourcesTriggerProps, sourceHost };

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

@@ -1,2 +1,2 @@
-import { InlineCitation, Source, Sources, SourcesContent, SourcesTrigger } from "./ai-sources.js";
-export { InlineCitation, Source, Sources, SourcesContent, SourcesTrigger };
+import { InlineCitation, Source, Sources, SourcesContent, SourcesTrigger, sourceHost } from "./ai-sources.js";
+export { InlineCitation, Source, Sources, SourcesContent, SourcesTrigger, sourceHost };

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

@@ -7,9 +7,9 @@ const meta = defineMeta({
 	category: "ai",
 	status: "stable",
 	dependencies: ["radix-ui"],
-	registryDependencies: [],
+	registryDependencies: ["tooltip"],
 	files: ["ai-sources.tsx"],
-	a11y: "An inline marker shows a bare number, which conveys nothing on its own, so the source title is carried in its accessible name. A marker with no href renders as text rather than as a link that goes nowhere. The source list is ordered, because the marker numbers refer to positions in it."
+	a11y: "An inline marker shows a bare number, which conveys nothing on its own, so the source title is carried in its accessible name. A marker with no href renders as text rather than as a link that goes nowhere. The source list is ordered, because the marker numbers refer to positions in it. The optional citation preview is a Radix Tooltip: it opens on hover and on keyboard focus, Escape closes it, and it describes the link (host and excerpt) only while open. Favicon stacks and marks are decorative and hidden; give an <img> favicon alt=\"\"."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-sources/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-sources\",\n  title: \"AI Sources\",\n  description: \"Inline citation markers and the source list they refer to.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"ai-sources.tsx\"],\n  a11y:\n    \"An inline marker shows a bare number, which conveys nothing on its own, so the source title \" +\n    \"is carried in its accessible name. A marker with no href renders as text rather than as a \" +\n    \"link that goes nowhere. The source list is ordered, because the marker numbers refer to \" +\n    \"positions in it.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-sources/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-sources\",\n  title: \"AI Sources\",\n  description: \"Inline citation markers and the source list they refer to.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [\"tooltip\"],\n  files: [\"ai-sources.tsx\"],\n  a11y:\n    \"An inline marker shows a bare number, which conveys nothing on its own, so the source title \" +\n    \"is carried in its accessible name. A marker with no href renders as text rather than as a \" +\n    \"link that goes nowhere. The source list is ordered, because the marker numbers refer to \" +\n    \"positions in it. The optional citation preview is a Radix Tooltip: it opens on hover and on \" +\n    \"keyboard focus, Escape closes it, and it describes the link (host and excerpt) only while \" +\n    'open. Favicon stacks and marks are decorative and hidden; give an <img> favicon alt=\"\".',\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC,SAAS;CAChC,OAAO,CAAC,gBAAgB;CACxB,MACE;AAMJ,CAAC"}

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

@@ -0,0 +1,24 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/ai-suggestions/ai-suggestions.d.ts
+interface SuggestionItem {
+  id: string;
+  label: string;
+}
+declare const suggestionsVariants: (props?: ({
+  variant?: "outline" | "soft" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SuggestionsProps extends Omit<ComponentPropsWithRef<"div">, "onSelect">, VariantProps<typeof suggestionsVariants> {
+  suggestions: SuggestionItem[];
+  /** Called with the whole suggestion. Prefer filling the composer over sending. */
+  onSelect?: (suggestion: SuggestionItem) => void;
+  /** Visible heading, e.g. "Follow-ups". Also names the list. */
+  label?: string;
+  /** Disables every chip, e.g. while a response streams. */
+  disabled?: boolean;
+}
+/** A row of prompt suggestion chips. */
+declare function Suggestions({ className, suggestions, onSelect, label, variant, disabled, ...props }: SuggestionsProps): import("react").JSX.Element;
+//#endregion
+export { SuggestionItem, Suggestions, SuggestionsProps, suggestionsVariants };
+//# sourceMappingURL=ai-suggestions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-suggestions.d.ts","names":[],"sources":["../../../src/components/ai-suggestions/ai-suggestions.tsx"],"mappings":";;;UA8BiB;EACf;EACA;;cAGI,sBAAmB;;6CAUvB;UAOe,yBAEb,KAAK,2CACL,oBAAoB;EACtB,aAAa;;EAEb,YAAY,YAAY;;EAExB;;EAEA;;;iBAIc,cACd,WACA,aACA,UACA,OACA,SACA,aACG,SACF,mCAAgB,IAAA"}

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

@@ -0,0 +1,68 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId } from "react";
+//#region src/components/ai-suggestions/ai-suggestions.tsx
+const PREFIX = "dowel-ai-suggestions";
+const STAGGER_MS = 45;
+const STYLES = `
+[data-slot=suggestions-item]{animation:${PREFIX}-in var(--duration-normal) var(--ease-overshoot) backwards;animation-delay:calc(var(--stagger) * var(--motion-scale, 1))}
+@keyframes ${PREFIX}-in{from{opacity:0;transform:translateY(6px) scale(.94)}}
+`;
+const suggestionsVariants = cva("rounded-full font-normal active:scale-[0.97]", {
+	variants: { variant: {
+		outline: "",
+		soft: "border-transparent bg-muted text-foreground hover:bg-accent"
+	} },
+	defaultVariants: { variant: "outline" }
+});
+/** Distance from the middle of the row, so the stagger radiates outwards. */
+function centreOut(index, count) {
+	return Math.abs(index - (count - 1) / 2);
+}
+/** A row of prompt suggestion chips. */
+function Suggestions({ className, suggestions, onSelect, label, variant, disabled = false, ...props }) {
+	const labelId = useId();
+	const setKey = suggestions.map((suggestion) => suggestion.id).join("|");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "suggestions",
+		className: cn("flex w-full flex-col gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: PREFIX,
+				precedence: "dowel",
+				children: STYLES
+			}),
+			label ? /* @__PURE__ */ jsx("p", {
+				id: labelId,
+				className: "text-xs tracking-wide text-muted-foreground uppercase",
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx("ul", {
+				"aria-labelledby": label ? labelId : void 0,
+				"aria-label": label ? void 0 : "Suggestions",
+				className: "flex flex-wrap gap-2",
+				children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx("li", {
+					"data-slot": "suggestions-item",
+					style: { "--stagger": `${String(centreOut(index, suggestions.length) * STAGGER_MS)}ms` },
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						disabled,
+						className: cn("h-auto min-h-8 py-1.5 text-start whitespace-normal", suggestionsVariants({ variant })),
+						onClick: () => onSelect?.(suggestion),
+						children: suggestion.label
+					})
+				}, suggestion.id))
+			}, setKey)
+		]
+	});
+}
+//#endregion
+export { Suggestions, suggestionsVariants };
+
+//# sourceMappingURL=ai-suggestions.js.map