@dowel-ui/react 0.1.0

package/dist/components/ai-agent-status/ai-agent-status.js

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ai-agent-status/ai-agent-status.tsx
+const STATE_LABEL = {
+	idle: "Idle",
+	thinking: "Thinking",
+	working: "Working",
+	waiting: "Waiting for input",
+	done: "Done",
+	error: "Error"
+};
+const agentStatusVariants = cva("inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium", {
+	variants: { state: {
+		idle: "border-border bg-muted text-muted-foreground",
+		thinking: "border-info/30 bg-info/10 text-info",
+		working: "border-primary/30 bg-primary/10 text-primary",
+		waiting: "border-warning/35 bg-warning/10 text-warning",
+		done: "border-success/30 bg-success/10 text-success",
+		error: "border-destructive/30 bg-destructive/10 text-destructive"
+	} },
+	defaultVariants: { state: "idle" }
+});
+function AgentStatus({ className, state = "idle", label, live = false, children, ...props }) {
+	const busy = state === "thinking" || state === "working";
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "agent-status",
+		"data-state": state,
+		role: live ? "status" : void 0,
+		"aria-live": live ? "polite" : void 0,
+		className: cn(agentStatusVariants({ state }), className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cn("size-1.5 rounded-full bg-current", busy && "animate-pulse-soft")
+		}), children ?? label ?? STATE_LABEL[state]]
+	});
+}
+//#endregion
+export { AgentStatus, agentStatusVariants };
+
+//# sourceMappingURL=ai-agent-status.js.map

package/dist/components/ai-agent-status/ai-agent-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-agent-status.js","names":[],"sources":["../../../src/components/ai-agent-status/ai-agent-status.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * What an agent is doing right now.\n *\n * Always a word, never only a colour. Agent states matter most when something\n * has gone wrong, which is exactly when a colour-only signal fails the people\n * who most need to notice.\n */\n\nexport type AgentState = \"idle\" | \"thinking\" | \"working\" | \"waiting\" | \"done\" | \"error\";\n\nconst STATE_LABEL: Record<AgentState, string> = {\n  idle: \"Idle\",\n  thinking: \"Thinking\",\n  working: \"Working\",\n  waiting: \"Waiting for input\",\n  done: \"Done\",\n  error: \"Error\",\n};\n\nconst agentStatusVariants = cva(\n  \"inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium\",\n  {\n    variants: {\n      state: {\n        idle: \"border-border bg-muted text-muted-foreground\",\n        thinking: \"border-info/30 bg-info/10 text-info\",\n        working: \"border-primary/30 bg-primary/10 text-primary\",\n        waiting: \"border-warning/35 bg-warning/10 text-warning\",\n        done: \"border-success/30 bg-success/10 text-success\",\n        error: \"border-destructive/30 bg-destructive/10 text-destructive\",\n      },\n    },\n    defaultVariants: {\n      state: \"idle\",\n    },\n  },\n);\n\nexport interface AgentStatusProps\n  extends ComponentPropsWithRef<\"span\">, VariantProps<typeof agentStatusVariants> {\n  state?: AgentState;\n  /** Overrides the wording. The state must still be readable as text. */\n  label?: string;\n  /**\n   * Announce changes politely.\n   *\n   * Off by default: several agents each announcing their own transitions turns\n   * a dashboard into noise. Turn it on for the one agent the user is watching.\n   */\n  live?: boolean;\n}\n\nexport function AgentStatus({\n  className,\n  state = \"idle\",\n  label,\n  live = false,\n  children,\n  ...props\n}: AgentStatusProps) {\n  const busy = state === \"thinking\" || state === \"working\";\n\n  return (\n    <span\n      data-slot=\"agent-status\"\n      data-state={state}\n      role={live ? \"status\" : undefined}\n      aria-live={live ? \"polite\" : undefined}\n      className={cn(agentStatusVariants({ state }), className)}\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\"size-1.5 rounded-full bg-current\", busy && \"animate-pulse-soft\")}\n      />\n      {children ?? label ?? STATE_LABEL[state]}\n    </span>\n  );\n}\n\nexport { agentStatusVariants };\n"],"mappings":";;;;;AAiBA,MAAM,cAA0C;CAC9C,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO;AACT;AAEA,MAAM,sBAAsB,IAC1B,wFACA;CACE,UAAU,EACR,OAAO;EACL,MAAM;EACN,UAAU;EACV,SAAS;EACT,SAAS;EACT,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,OAAO,OACT;AACF,CACF;AAgBA,SAAgB,YAAY,EAC1B,WACA,QAAQ,QACR,OACA,OAAO,OACP,UACA,GAAG,SACgB;CACnB,MAAM,OAAO,UAAU,cAAc,UAAU;CAE/C,OACE,qBAAC,QAAD;EACE,aAAU;EACV,cAAY;EACZ,MAAM,OAAO,WAAW,KAAA;EACxB,aAAW,OAAO,WAAW,KAAA;EAC7B,WAAW,GAAG,oBAAoB,EAAE,MAAM,CAAC,GAAG,SAAS;EACvD,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GACE,eAAY;GACZ,WAAW,GAAG,oCAAoC,QAAQ,oBAAoB;EAC/E,CAAA,GACA,YAAY,SAAS,YAAY,MAC9B;;AAEV"}

package/dist/components/ai-agent-status/index.d.ts

@@ -0,0 +1,2 @@
+import { AgentState, AgentStatus, AgentStatusProps, agentStatusVariants } from "./ai-agent-status.js";
+export { type AgentState, AgentStatus, type AgentStatusProps, agentStatusVariants };

package/dist/components/ai-agent-status/index.js

@@ -0,0 +1,2 @@
+import { AgentStatus, agentStatusVariants } from "./ai-agent-status.js";
+export { AgentStatus, agentStatusVariants };

package/dist/components/ai-agent-status/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/ai-agent-status/meta.ts
+const meta = defineMeta({
+	name: "ai-agent-status",
+	title: "AI Agent Status",
+	description: "A pill showing what an agent is doing, in words as well as colour.",
+	category: "ai",
+	status: "stable",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["ai-agent-status.tsx"],
+	a11y: "The state is always text. Agent states matter most when something has failed, which is exactly when a colour-only signal fails the people who most need to see it. Live announcements are off by default — several agents each announcing their transitions turns a dashboard into noise; enable it for the one agent being watched."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/ai-agent-status/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-agent-status/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-agent-status\",\n  title: \"AI Agent Status\",\n  description: \"A pill showing what an agent is doing, in words as well as colour.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"ai-agent-status.tsx\"],\n  a11y:\n    \"The state is always text. Agent states matter most when something has failed, which is \" +\n    \"exactly when a colour-only signal fails the people who most need to see it. Live \" +\n    \"announcements are off by default — several agents each announcing their transitions turns a \" +\n    \"dashboard into noise; enable it for the one agent being watched.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,qBAAqB;CAC7B,MACE;AAIJ,CAAC"}

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

@@ -0,0 +1,45 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/ai-conversation/ai-conversation.d.ts
+interface ConversationProps extends ComponentPropsWithRef<"div"> {
+  /**
+   * Follow new content while the reader is at the bottom.
+   *
+   * Turning this off never scrolls automatically; it does not pin the view.
+   */
+  autoScroll?: boolean;
+}
+declare function Conversation({ className, autoScroll, children, ...props }: ConversationProps): import("react").JSX.Element;
+/**
+ * The transcript.
+ *
+ * An ordered list, deliberately not a live region — see the note on
+ * `Conversation`. Order is meaning here, and list semantics give a screen
+ * reader user position and count ("3 of 12") as they move through it.
+ */
+declare function ConversationMessages({ className, ...props }: ComponentPropsWithRef<"ol">): import("react").JSX.Element;
+interface ConversationStatusProps extends ComponentPropsWithRef<"div"> {
+  /** Announced politely when it changes. Keep it short: state, never content. */
+  children?: ReactNode;
+}
+/**
+ * A polite live region for conversation state.
+ *
+ * This is where "generating response" and "response complete" belong. Putting
+ * the response *text* here instead is the mistake this component exists to
+ * prevent.
+ */
+declare function ConversationStatus({ className, children, ...props }: ConversationStatusProps): import("react").JSX.Element;
+interface ConversationScrollButtonProps extends ComponentPropsWithRef<"button"> {
+  label?: string;
+}
+/**
+ * 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.
+ */
+declare function ConversationScrollButton({ className, label, ...props }: ConversationScrollButtonProps): import("react").JSX.Element | null;
+//#endregion
+export { Conversation, ConversationMessages, ConversationProps, ConversationScrollButton, ConversationScrollButtonProps, ConversationStatus, ConversationStatusProps };
+//# sourceMappingURL=ai-conversation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-conversation.d.ts","names":[],"sources":["../../../src/components/ai-conversation/ai-conversation.tsx"],"mappings":";;UAuDiB,0BAA0B;;;;;;EAMzC;;iBAGc,eACd,WACA,YACA,aACG,SACF,oCAAiB,IAAA;;;;;;;;iBA4EJ,uBAAuB,cAAc,SAAS,8CAA2B,IAAA;UAUxE,gCAAgC;;EAE/C,WAAW;;;;;;;;;iBAUG,qBAAqB,WAAW,aAAa,SAAS,0CAAuB,IAAA;UAc5E,sCAAsC;EACrD;;;;;;;;;iBAUc,2BACd,WACA,UACG,SACF,gDAA6B,IAAA"}

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

@@ -0,0 +1,138 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { 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);
+function useConversation(component) {
+	const context = useContext(ConversationContext);
+	if (!context) throw new Error(`${component} must be rendered inside <Conversation>.`);
+	return context;
+}
+/** How close to the bottom still counts as "at the bottom", in pixels. */
+const BOTTOM_THRESHOLD = 32;
+function Conversation({ className, autoScroll = true, children, ...props }) {
+	const viewportRef = useRef(null);
+	const [atBottom, setAtBottom] = useState(true);
+	const scrollToBottom = useCallback((behavior = "smooth") => {
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		viewport.scrollTo({
+			top: viewport.scrollHeight,
+			behavior
+		});
+	}, []);
+	useEffect(() => {
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		function handleScroll() {
+			if (!viewport) return;
+			const distance = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+			setAtBottom(distance <= BOTTOM_THRESHOLD);
+		}
+		handleScroll();
+		viewport.addEventListener("scroll", handleScroll, { passive: true });
+		return () => {
+			viewport.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
+	useLayoutEffect(() => {
+		const viewport = viewportRef.current;
+		if (!viewport || !autoScroll) return;
+		const observer = new ResizeObserver(() => {
+			if (atBottom) viewport.scrollTop = viewport.scrollHeight;
+		});
+		for (const child of viewport.children) observer.observe(child);
+		return () => {
+			observer.disconnect();
+		};
+	}, [autoScroll, atBottom]);
+	const context = useMemo(() => ({
+		viewportRef,
+		atBottom,
+		scrollToBottom
+	}), [atBottom, scrollToBottom]);
+	return /* @__PURE__ */ jsx(ConversationContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "conversation",
+			"data-at-bottom": atBottom || void 0,
+			className: cn("relative flex min-h-0 flex-1 flex-col", className),
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: viewportRef,
+				"data-slot": "conversation-viewport",
+				className: "flex-1 overflow-y-auto overscroll-contain",
+				children
+			})
+		})
+	});
+}
+/**
+* The transcript.
+*
+* An ordered list, deliberately not a live region — see the note on
+* `Conversation`. Order is meaning here, and list semantics give a screen
+* reader user position and count ("3 of 12") as they move through it.
+*/
+function ConversationMessages({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "conversation-messages",
+		className: cn("flex flex-col gap-6 p-4", className),
+		...props
+	});
+}
+/**
+* A polite live region for conversation state.
+*
+* This is where "generating response" and "response complete" belong. Putting
+* the response *text* here instead is the mistake this component exists to
+* prevent.
+*/
+function ConversationStatus({ className, children, ...props }) {
+	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
+	});
+}
+/**
+* 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.
+*/
+function ConversationScrollButton({ className, label = "Jump to latest", ...props }) {
+	const { atBottom, scrollToBottom } = useConversation("ConversationScrollButton");
+	if (atBottom) return null;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-slot": "conversation-scroll-button",
+		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),
+		...props,
+		children: [/* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			"aria-hidden": "true",
+			className: "size-3.5",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M12 5v14m0 0-6-6m6 6 6-6",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}), label]
+	});
+}
+//#endregion
+export { Conversation, ConversationMessages, ConversationScrollButton, ConversationStatus };
+
+//# sourceMappingURL=ai-conversation.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +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 };

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

@@ -0,0 +1,2 @@
+import { Conversation, ConversationMessages, ConversationScrollButton, ConversationStatus } from "./ai-conversation.js";
+export { Conversation, ConversationMessages, ConversationScrollButton, ConversationStatus };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/ai-conversation/meta.ts
+const meta = defineMeta({
+	name: "ai-conversation",
+	title: "AI Conversation",
+	description: "The scrolling transcript container, with follow-on-new-content and a status region.",
+	category: "ai",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: [],
+	files: ["ai-conversation.tsx"],
+	a11y: "The transcript is an ordered list, NOT a live region. A live region that updates on every streamed token is unusable with a screen reader, and is the most common accessibility failure in chat interfaces. Announce state — \"generating\", \"response complete\" — through ConversationStatus instead, and let the reader navigate the transcript at their own pace. Auto-scroll stops the moment the reader scrolls up, and ConversationScrollButton is the explicit way back."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-conversation/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-conversation\",\n  title: \"AI Conversation\",\n  description:\n    \"The scrolling transcript container, with follow-on-new-content and a status region.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"ai-conversation.tsx\"],\n  a11y:\n    \"The transcript is an ordered list, NOT a live region. A live region that updates on every \" +\n    \"streamed token is unusable with a screen reader, and is the most common accessibility \" +\n    'failure in chat interfaces. Announce state — \"generating\", \"response complete\" — through ' +\n    \"ConversationStatus instead, and let the reader navigate the transcript at their own pace. \" +\n    \"Auto-scroll stops the moment the reader scrolls up, and ConversationScrollButton is the \" +\n    \"explicit way back.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,qBAAqB;CAC7B,MACE;AAMJ,CAAC"}

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

@@ -0,0 +1,56 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/ai-message/ai-message.d.ts
+/**
+ * One turn in a conversation.
+ *
+ * The role is stated in text, not only in layout. Alignment and colour are how
+ * a sighted reader tells a question from an answer; a screen reader user gets
+ * nothing from either, so every message carries a visually hidden label naming
+ * who is speaking.
+ */
+declare const messageVariants: (props?: ({
+  role?: "user" | "assistant" | "system" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const messageBodyVariants: (props?: ({
+  role?: "user" | "assistant" | "system" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type MessageRole = "user" | "assistant" | "system";
+interface MessageProps extends ComponentPropsWithRef<"li">, Omit<VariantProps<typeof messageVariants>, "role"> {
+  /**
+   * Who is speaking.
+   *
+   * Named `from` rather than `role` on purpose. `role` is a global HTML
+   * attribute, and a component prop that shadows it cannot be told apart from
+   * the real thing by static analysis — every consumer's accessibility linter
+   * would flag ordinary usage of this component. The values are still the
+   * familiar conversation roles.
+   */
+  from?: MessageRole;
+  /** Overrides the visually hidden speaker label. */
+  fromLabel?: string;
+}
+declare function Message({ className, from, fromLabel, children, ...props }: MessageProps): import("react").JSX.Element;
+interface MessageBodyProps extends ComponentPropsWithRef<"div">, Omit<VariantProps<typeof messageBodyVariants>, "role"> {
+  /** Who is speaking. See the note on MessageProps for why not `role`. */
+  from?: MessageRole;
+}
+declare function MessageBody({ className, from, ...props }: MessageBodyProps): import("react").JSX.Element;
+interface MessageAvatarProps extends ComponentPropsWithRef<"div"> {
+  asChild?: boolean;
+}
+/** Decorative: the speaker is already named by the hidden label on Message. */
+declare function MessageAvatar({ className, asChild, ...props }: MessageAvatarProps): import("react").JSX.Element;
+/**
+ * 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.
+ */
+declare function MessageActions({ className, ...props }: ComponentPropsWithRef<"div">): 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 };
+//# sourceMappingURL=ai-message.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,90 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Slot } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ai-message/ai-message.tsx
+/**
+* One turn in a conversation.
+*
+* The role is stated in text, not only in layout. Alignment and colour are how
+* a sighted reader tells a question from an answer; a screen reader user gets
+* nothing from either, so every message carries a visually hidden label naming
+* who is speaking.
+*/
+const messageVariants = cva("group/message flex w-full gap-3", {
+	variants: { role: {
+		user: "flex-row-reverse",
+		assistant: "flex-row",
+		system: "flex-row"
+	} },
+	defaultVariants: { role: "assistant" }
+});
+const messageBodyVariants = cva("min-w-0 rounded-xl px-4 py-3 text-sm", {
+	variants: { role: {
+		user: "max-w-[85%] bg-primary text-primary-foreground",
+		assistant: "w-full bg-transparent px-0 py-0 text-foreground",
+		system: "w-full border border-dashed border-border bg-muted/40 text-xs text-muted-foreground"
+	} },
+	defaultVariants: { role: "assistant" }
+});
+const DEFAULT_ROLE_LABELS = {
+	user: "You said",
+	assistant: "Assistant said",
+	system: "System"
+};
+function Message({ className, from = "assistant", fromLabel, children, ...props }) {
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "message",
+		"data-from": from,
+		className: cn(messageVariants({ role: from }), className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [fromLabel ?? DEFAULT_ROLE_LABELS[from], ":"]
+		}), children]
+	});
+}
+function MessageBody({ className, from = "assistant", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-body",
+		className: cn(messageBodyVariants({ role: from }), className),
+		...props
+	});
+}
+/** Decorative: the speaker is already named by the hidden label on Message. */
+function MessageAvatar({ className, asChild, ...props }) {
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "message-avatar",
+		"aria-hidden": "true",
+		className: cn("grid size-7 shrink-0 place-items-center rounded-full border border-border bg-muted", "text-xs font-medium text-muted-foreground", "[&_svg:not([class*='size-'])]:size-3.5", className),
+		...props
+	});
+}
+/**
+* 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.
+*/
+function MessageActions({ className, ...props }) {
+	return /* @__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),
+		...props
+	});
+}
+/** Attachments, citations and other content that hangs off a message. */
+function MessageFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-footer",
+		className: cn("mt-2 flex flex-wrap items-center gap-2", className),
+		...props
+	});
+}
+//#endregion
+export { Message, MessageActions, MessageAvatar, MessageBody, MessageFooter, messageBodyVariants, messageVariants };
+
+//# sourceMappingURL=ai-message.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +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 };

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

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

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/ai-message/meta.ts
+const meta = defineMeta({
+	name: "ai-message",
+	title: "AI Message",
+	description: "One turn in a conversation, with role, avatar, actions and footer slots.",
+	category: "ai",
+	status: "stable",
+	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."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +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"}

package/dist/components/ai-model-selector/ai-model-selector.d.ts

@@ -0,0 +1,42 @@
+import { SelectTrigger } from "../select/select.js";
+import "../select/index.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/ai-model-selector/ai-model-selector.d.ts
+/**
+ * Picks the model a conversation runs on.
+ *
+ * A thin, opinionated layer over Select rather than a new control: model
+ * pickers differ between products in what they show, not in how they behave.
+ * What this adds is the shape of the option — a name, a short description, and
+ * the fact that some models are unavailable on the current plan — which is the
+ * part every implementation gets wrong in the same way, by hiding the reason a
+ * model cannot be chosen.
+ */
+interface ModelOption {
+  id: string;
+  name: string;
+  /** One line on what the model is for. */
+  description?: string;
+  /** Grouping, for example a provider name. */
+  group?: string;
+  disabled?: boolean;
+  /**
+   * Why it is unavailable.
+   *
+   * Shown and announced alongside the name. A disabled option with no reason
+   * makes the user think the interface is broken.
+   */
+  disabledReason?: string;
+  badge?: ReactNode;
+}
+interface ModelSelectorProps extends Omit<ComponentPropsWithRef<typeof SelectTrigger>, "children"> {
+  models: ModelOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+}
+declare function ModelSelector({ className, models, value, defaultValue, onValueChange, placeholder, ...props }: ModelSelectorProps): import("react").JSX.Element;
+//#endregion
+export { ModelOption, ModelSelector, ModelSelectorProps };
+//# sourceMappingURL=ai-model-selector.d.ts.map

package/dist/components/ai-model-selector/ai-model-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-model-selector.d.ts","names":[],"sources":["../../../src/components/ai-model-selector/ai-model-selector.tsx"],"mappings":";;;;;;;;;;;;;;UA0BiB;EACf;EACA;;EAEA;;EAEA;EACA;;;;;;;EAOA;EACA,QAAQ;;UAGO,2BAA2B,KAC1C,6BAA6B;EAG7B,QAAQ;EACR;EACA;EACA,iBAAiB;EACjB;;iBAGc,gBACd,WACA,QACA,OACA,cACA,eACA,gBACG,SACF,qCAAkB,IAAA"}

package/dist/components/ai-model-selector/ai-model-selector.js

@@ -0,0 +1,48 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "../select/select.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai-model-selector/ai-model-selector.tsx
+function ModelSelector({ className, models, value, defaultValue, onValueChange, placeholder = "Select a model", ...props }) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const model of models) {
+		const key = model.group ?? "";
+		groups.set(key, [...groups.get(key) ?? [], model]);
+	}
+	return /* @__PURE__ */ jsxs(Select, {
+		value,
+		defaultValue,
+		onValueChange,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			"data-slot": "model-selector",
+			className: cn("w-auto min-w-44 gap-2", className),
+			...props,
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			className: "min-w-64",
+			children: [...groups].map(([group, groupModels]) => /* @__PURE__ */ jsxs(SelectGroup, { children: [group ? /* @__PURE__ */ jsx(SelectLabel, { children: group }) : null, groupModels.map((model) => /* @__PURE__ */ jsx(SelectItem, {
+				value: model.id,
+				disabled: model.disabled,
+				textValue: model.name,
+				label: model.name,
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-col gap-0.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "flex items-center gap-2",
+						children: model.badge
+					}), model.disabled && model.disabledReason ? /* @__PURE__ */ jsx("span", {
+						className: "text-2xs text-muted-foreground",
+						children: model.disabledReason
+					}) : model.description ? /* @__PURE__ */ jsx("span", {
+						className: "text-2xs text-muted-foreground",
+						children: model.description
+					}) : null]
+				})
+			}, model.id))] }, group || "ungrouped"))
+		})]
+	});
+}
+//#endregion
+export { ModelSelector };
+
+//# sourceMappingURL=ai-model-selector.js.map