@fiestaboard/ui 6.0.3 → 6.1.0

package/dist/components/ai/actions.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Button } from "../forms/button";
+/**
+ * Actions — the small icon affordances under an assistant turn: copy,
+ * retry, undo.
+ *
+ * Each {@link Action} is an icon-only button, so the `label` prop is
+ * required: it is the accessible name AND the tooltip. The 24px `icon-xs`
+ * size is the package's floor for a target (SC 2.5.8).
+ */
+declare function Actions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export interface ActionProps extends Omit<React.ComponentProps<typeof Button>, "aria-label"> {
+    /** Accessible name and tooltip text. */
+    label: string;
+}
+declare function Action({ className, label, children, ...props }: ActionProps): React.JSX.Element;
+export { Action, Actions };

package/dist/components/ai/actions.js

@@ -0,0 +1,33 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../forms/button.js";
+import { Tooltip as n, TooltipContent as r, TooltipTrigger as i } from "../overlays/tooltip.js";
+import "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/ai/actions.tsx
+function s({ className: t, ...n }) {
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "actions",
+		className: e("flex items-center gap-0.5", t),
+		...n
+	});
+}
+function c({ className: s, label: c, children: l, ...u }) {
+	return /* @__PURE__ */ o(n, { children: [/* @__PURE__ */ a(i, {
+		asChild: !0,
+		children: /* @__PURE__ */ a(t, {
+			"data-slot": "action",
+			type: "button",
+			variant: "ghost",
+			size: "icon-xs",
+			"aria-label": c,
+			className: e("text-muted-foreground hover:text-foreground", s),
+			...u,
+			children: l
+		})
+	}), /* @__PURE__ */ a(r, { children: c })] });
+}
+//#endregion
+export { c as Action, s as Actions };
+
+//# sourceMappingURL=actions.js.map

package/dist/components/ai/actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.js","names":[],"sources":["../../../src/components/ai/actions.tsx"],"mappings":";;;;;;;AAiBA,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAsC;CACrE,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAU,WAAW,EAAG,6BAA6B,CAAS;EAAG,GAAI;CAAQ,CAAA;AACrG;AAOA,SAAS,EAAO,EAAE,cAAW,UAAO,aAAU,GAAG,KAAsB;CACrE,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAgB,SAAA;EACd,UAAA,kBAAC,GAAD;GACE,aAAU;GACV,MAAK;GACL,SAAQ;GACR,MAAK;GACL,cAAY;GACZ,WAAW,EAAG,+CAA+C,CAAS;GACtE,GAAI;GAEH;EACK,CAAA;CACM,CAAA,GAChB,kBAAC,GAAD,EAAA,UAAiB,EAAsB,CAAA,CAChC,EAAA,CAAA;AAEb"}

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Button } from "../forms/button";
+/**
+ * Conversation — the scrolling transcript of a chat.
+ *
+ * Mirrors the shadcn "AI Elements" `Conversation` vocabulary (Conversation /
+ * ConversationContent / ConversationScrollButton) so an app written against
+ * that API reads the same here. Behaviour is what matters:
+ *
+ * - it is a `role="log"` region, which is how assistive technology is told
+ *   "new entries append at the end" without re-announcing the whole list;
+ * - it sticks to the bottom while the user is at the bottom (a streaming
+ *   reply keeps scrolling into view) and STOPS sticking the moment the user
+ *   scrolls up to read — the one thing a naive `scrollIntoView` on every
+ *   token gets wrong;
+ * - {@link ConversationScrollButton} appears only while the user is away
+ *   from the bottom, and jumps back.
+ *
+ * "At the bottom" is measured, not assumed: the scroll handler updates
+ * state, and a ResizeObserver on the content re-pins the viewport only
+ * when the last measurement said the user was there. The observer runs in
+ * an effect but never calls setState — it scrolls the DOM — so this stays
+ * on the right side of the set-state-in-effect rule.
+ */
+export interface ConversationLabels {
+    /** Accessible name of the log region. */
+    conversation: string;
+    /** Accessible name of the jump-to-latest button. */
+    scrollToBottom: string;
+}
+export declare const DEFAULT_CONVERSATION_LABELS: ConversationLabels;
+export interface ConversationProps extends React.ComponentProps<"div"> {
+    labels?: Partial<ConversationLabels>;
+}
+declare function Conversation({ className, children, labels, onScroll, ...props }: ConversationProps): React.JSX.Element;
+/** The padded stack the messages live in. */
+declare function ConversationContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Appears while the user has scrolled away from the newest entry. Rendered
+ * as nothing at all — not merely hidden — while at the bottom, so it never
+ * sits in the tab order as a no-op.
+ */
+declare function ConversationScrollButton({ className, ...props }: Omit<React.ComponentProps<typeof Button>, "children">): React.JSX.Element | null;
+export { Conversation, ConversationContent, ConversationScrollButton };

package/dist/components/ai/conversation.js

@@ -0,0 +1,91 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../forms/button.js";
+import { ArrowDown as n } from "lucide-react";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/ai/conversation.tsx
+var a = {
+	conversation: "Conversation",
+	scrollToBottom: "Jump to latest"
+}, o = r.createContext(null);
+function s(e) {
+	let t = r.useContext(o);
+	if (!t) throw Error(`${e} must be rendered inside <Conversation>`);
+	return t;
+}
+var c = 24;
+function l({ className: t, children: n, labels: s, onScroll: l, ...u }) {
+	let d = {
+		...a,
+		...s
+	}, f = r.useRef(null), [p, m] = r.useState(!0), h = r.useRef(!0), g = r.useCallback(() => {
+		let e = f.current;
+		return !e || e.scrollHeight - e.scrollTop - e.clientHeight <= c;
+	}, []), _ = r.useCallback(() => {
+		let e = f.current;
+		e && (e.scrollTop = e.scrollHeight, h.current = !0, m(!0));
+	}, []), v = (e) => {
+		let t = g();
+		h.current = t, m(t), l?.(e);
+	};
+	r.useEffect(() => {
+		let e = f.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(() => {
+			h.current && (e.scrollTop = e.scrollHeight);
+		});
+		for (let n of Array.from(e.children)) t.observe(n);
+		return () => t.disconnect();
+	}, []);
+	let y = {
+		isAtBottom: p,
+		scrollToBottom: _,
+		labels: d
+	};
+	return /* @__PURE__ */ i(o.Provider, {
+		value: y,
+		children: /* @__PURE__ */ i("div", {
+			"data-slot": "conversation",
+			className: e("relative flex min-h-0 flex-1 flex-col has-[[data-slot=conversation-viewport]:focus-visible]:shadow-[var(--focus-ring-shadow)]", t),
+			...u,
+			children: /* @__PURE__ */ i("div", {
+				ref: f,
+				"data-slot": "conversation-viewport",
+				role: "log",
+				"aria-label": d.conversation,
+				"aria-live": "polite",
+				"aria-relevant": "additions text",
+				tabIndex: 0,
+				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain rounded-[inherit] outline-none",
+				onScroll: v,
+				children: n
+			})
+		})
+	});
+}
+function u({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "conversation-content",
+		className: e("flex flex-col gap-3 p-3", t),
+		...n
+	});
+}
+function d({ className: r, ...a }) {
+	let { isAtBottom: o, scrollToBottom: c, labels: l } = s("ConversationScrollButton");
+	return o ? null : /* @__PURE__ */ i(t, {
+		"data-slot": "conversation-scroll-button",
+		type: "button",
+		variant: "outline",
+		size: "icon-sm",
+		"aria-label": l.scrollToBottom,
+		className: e("absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full shadow-card", r),
+		onClick: c,
+		...a,
+		children: /* @__PURE__ */ i(n, { "aria-hidden": "true" })
+	});
+}
+//#endregion
+export { l as Conversation, u as ConversationContent, d as ConversationScrollButton, a as DEFAULT_CONVERSATION_LABELS };
+
+//# sourceMappingURL=conversation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"conversation.js","names":[],"sources":["../../../src/components/ai/conversation.tsx"],"mappings":";;;;;;;AAsCA,IAAa,IAAkD;CAC7D,cAAc;CACd,gBAAgB;AAClB,GAQM,IAAsB,EAAM,cAA+C,IAAI;AAErF,SAAS,EAAgB,GAA6C;CACpE,IAAM,IAAM,EAAM,WAAW,CAAmB;CAChD,IAAI,CAAC,GAAK,MAAU,MAAM,GAAG,EAAU,wCAAwC;CAC/E,OAAO;AACT;AAGA,IAAM,IAAmB;AAMzB,SAAS,EAAa,EAAE,cAAW,aAAU,WAAQ,aAAU,GAAG,KAA4B;CAC5F,IAAM,IAAI;EAAE,GAAG;EAA6B,GAAG;CAAO,GAChD,IAAc,EAAM,OAA8B,IAAI,GACtD,CAAC,GAAY,KAAiB,EAAM,SAAS,EAAI,GAEjD,IAAc,EAAM,OAAO,EAAI,GAE/B,IAAU,EAAM,kBAAkB;EACtC,IAAM,IAAK,EAAY;EAEvB,OADA,CAAK,KACE,EAAG,eAAe,EAAG,YAAY,EAAG,gBAAgB;CAC7D,GAAG,CAAC,CAAC,GAEC,IAAiB,EAAM,kBAAkB;EAC7C,IAAM,IAAK,EAAY;EAClB,MACL,EAAG,YAAY,EAAG,cAClB,EAAY,UAAU,IACtB,EAAc,EAAI;CACpB,GAAG,CAAC,CAAC,GAEC,KAAgB,MAAyC;EAC7D,IAAM,IAAO,EAAQ;EAGrB,AAFA,EAAY,UAAU,GACtB,EAAc,CAAI,GAClB,IAAW,CAAK;CAClB;CAEA,EAAM,gBAAgB;EACpB,IAAM,IAAK,EAAY;EACvB,IAAI,CAAC,KAAM,OAAO,iBAAmB,KAAa;EAClD,IAAM,IAAW,IAAI,qBAAqB;GAGxC,AAAI,EAAY,YAAS,EAAG,YAAY,EAAG;EAC7C,CAAC;EACD,KAAK,IAAM,KAAS,MAAM,KAAK,EAAG,QAAQ,GAAG,EAAS,QAAQ,CAAK;EACnE,aAAa,EAAS,WAAW;CACnC,GAAG,CAAC,CAAC;CAEL,IAAM,IAAkC;EAAE;EAAY;EAAgB,QAAQ;CAAE;CAEhF,OACE,kBAAC,EAAoB,UAArB;EAAqC;EACnC,UAAA,kBAAC,OAAD;GACE,aAAU;GACV,WAAW,EAKT,iIACA,CACF;GACA,GAAI;GAEJ,UAAA,kBAAC,OAAD;IACE,KAAK;IACL,aAAU;IACV,MAAK;IACL,cAAY,EAAE;IACd,aAAU;IACV,iBAAc;IAKd,UAAU;IACV,WAAU;IACV,UAAU;IAET;GACE,CAAA;EACF,CAAA;CACuB,CAAA;AAElC;AAGA,SAAS,EAAoB,EAAE,cAAW,GAAG,KAAsC;CACjF,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAuB,WAAW,EAAG,2BAA2B,CAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;AAOA,SAAS,EAAyB,EAAE,cAAW,GAAG,KAAgE;CAChH,IAAM,EAAE,eAAY,mBAAgB,cAAW,EAAgB,0BAA0B;CAEzF,OADI,IAAmB,OAErB,kBAAC,GAAD;EACE,aAAU;EACV,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY,EAAO;EACnB,WAAW,EAAG,wEAAwE,CAAS;EAC/F,SAAS;EACT,GAAI;EAEJ,UAAA,kBAAC,GAAD,EAAW,eAAY,OAAQ,CAAA;CACzB,CAAA;AAEZ"}

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+/**
+ * Loader — "the assistant is working" with optional text.
+ *
+ * Composes {@link Spinner}, which already swaps its rotation for a static
+ * ring under reduced motion, so this inherits the WCAG 2.2.2 answer rather
+ * than restating it. The `role="status"` lives on the Spinner when there is
+ * no text and on the wrapper when there is, so the message is announced
+ * once, not twice.
+ */
+export interface LoaderProps extends React.ComponentProps<"div"> {
+    /** What is happening — "Thinking…". Announced politely. */
+    children?: React.ReactNode;
+    /** Announced when there is no visible text. */
+    label?: string;
+}
+declare function Loader({ className, children, label, ...props }: LoaderProps): React.JSX.Element;
+export { Loader };

package/dist/components/ai/loader.js

@@ -0,0 +1,26 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Spinner as t } from "../feedback/spinner.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/ai/loader.tsx
+function i({ className: i, children: a, label: o = "Loading", ...s }) {
+	let c = a != null;
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "loader",
+		role: c ? "status" : void 0,
+		className: e("inline-flex items-center gap-2 text-sm text-muted-foreground", i),
+		...s,
+		children: [/* @__PURE__ */ n(t, {
+			size: "sm",
+			label: c ? null : o
+		}), c ? /* @__PURE__ */ n("span", {
+			"data-slot": "loader-text",
+			children: a
+		}) : null]
+	});
+}
+//#endregion
+export { i as Loader };
+
+//# sourceMappingURL=loader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","names":[],"sources":["../../../src/components/ai/loader.tsx"],"mappings":";;;;;;AAwBA,SAAS,EAAO,EAAE,cAAW,aAAU,WAAQ,WAAW,GAAG,KAAsB;CACjF,IAAM,IAAU,KAAuC;CACvD,OACE,kBAAC,OAAD;EACE,aAAU;EACV,MAAM,IAAU,WAAW,KAAA;EAC3B,WAAW,EAAG,gEAAgE,CAAS;EACvF,GAAI;EAJN,UAAA,CAME,kBAAC,GAAD;GAAS,MAAK;GAAK,OAAO,IAAU,OAAO;EAAQ,CAAA,GAClD,IAAU,kBAAC,QAAD;GAAM,aAAU;GAAe;EAAe,CAAA,IAAI,IAC1D;;AAET"}

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

@@ -0,0 +1,51 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+/**
+ * Message — one turn of a conversation, from the user or the assistant.
+ *
+ * `from` is the only axis. It is stamped as `data-from` on the row so the
+ * bubble and anything a consumer places inside can style off it
+ * (`group-data-[from=user]:…`) without a second prop threaded down.
+ *
+ * The assistant's turn is deliberately NOT a bubble: it is the page's own
+ * ground with the ink of body copy, because it carries markdown, tool
+ * cards and step timelines that need the full width. The user's turn is
+ * the bubble — short, right-aligned, on the accent surface.
+ */
+declare const messageVariants: (props?: ({
+    from?: "user" | "assistant" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface MessageProps extends React.ComponentProps<"div">, VariantProps<typeof messageVariants> {
+    from: "user" | "assistant";
+}
+declare function Message({ className, from, ...props }: MessageProps): React.JSX.Element;
+declare const messageContentVariants: (props?: ({
+    from?: "user" | "assistant" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface MessageContentProps extends React.ComponentProps<"div">, VariantProps<typeof messageContentVariants> {
+}
+/**
+ * The body of a turn. Reads `from` off the nearest {@link Message} when not
+ * given, so the common case is `<Message from="user"><MessageContent>…`.
+ */
+declare function MessageContent({ className, from, ...props }: MessageContentProps): React.JSX.Element;
+export interface MessageAvatarProps extends React.ComponentProps<"span"> {
+    /**
+     * Fallback initial when no child glyph is given. One character is used.
+     */
+    name?: string;
+    /**
+     * Decorative by default: the turn's `from` is already conveyed by
+     * position and content, and a screen reader announcing "assistant
+     * avatar" before every reply is noise. Pass `decorative={false}` and an
+     * `aria-label` when the avatar is the only thing naming the speaker.
+     */
+    decorative?: boolean;
+}
+/**
+ * A small round mark beside a turn: an icon child, or the first letter of
+ * `name`. Not an image component — chat avatars here are glyphs, and the
+ * package ships no image loading.
+ */
+declare function MessageAvatar({ className, name, decorative, children, ...props }: MessageAvatarProps): React.JSX.Element;
+export { Message, MessageAvatar, MessageContent, messageContentVariants, messageVariants };

package/dist/components/ai/message.js

@@ -0,0 +1,48 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { cva as n } from "class-variance-authority";
+//#region src/components/ai/message.tsx
+var r = n("group flex w-full gap-2", {
+	variants: { from: {
+		user: "flex-row-reverse",
+		assistant: "flex-row"
+	} },
+	defaultVariants: { from: "assistant" }
+});
+function i({ className: n, from: i, ...a }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "message",
+		"data-from": i,
+		className: e(r({ from: i }), n),
+		...a
+	});
+}
+var a = n("min-w-0 text-sm leading-relaxed", {
+	variants: { from: {
+		user: "max-w-[85%] rounded-xl rounded-br-sm bg-accent px-3 py-2 text-accent-foreground",
+		assistant: "flex-1 text-foreground"
+	} },
+	defaultVariants: { from: "assistant" }
+});
+function o({ className: n, from: r, ...i }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "message-content",
+		className: e(a({ from: r }), r === void 0 && "group-data-[from=user]:max-w-[85%] group-data-[from=user]:rounded-xl group-data-[from=user]:rounded-br-sm group-data-[from=user]:bg-accent group-data-[from=user]:px-3 group-data-[from=user]:py-2 group-data-[from=user]:text-accent-foreground", n),
+		...i
+	});
+}
+function s({ className: n, name: r, decorative: i = !0, children: a, ...o }) {
+	return /* @__PURE__ */ t("span", {
+		"data-slot": "message-avatar",
+		"aria-hidden": i || void 0,
+		className: e("inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", n),
+		...o,
+		children: a ?? (r ? r.trim().charAt(0).toUpperCase() : null)
+	});
+}
+//#endregion
+export { i as Message, s as MessageAvatar, o as MessageContent, a as messageContentVariants, r as messageVariants };
+
+//# sourceMappingURL=message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message.js","names":[],"sources":["../../../src/components/ai/message.tsx"],"mappings":";;;;;;AAmBA,IAAM,IAAkB,EAAI,2BAA2B;CACrD,UAAU,EACR,MAAM;EACJ,MAAM;EACN,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,YACR;AACF,CAAC;AAMD,SAAS,EAAQ,EAAE,cAAW,SAAM,GAAG,KAAuB;CAC5D,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAU,aAAW;EAAM,WAAW,EAAG,EAAgB,EAAE,QAAK,CAAC,GAAG,CAAS;EAAG,GAAI;CAAQ,CAAA;AACpH;AAEA,IAAM,IAAyB,EAAI,mCAAmC;CACpE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,YACR;AACF,CAAC;AAQD,SAAS,EAAe,EAAE,cAAW,SAAM,GAAG,KAA8B;CAC1E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,EAAuB,EAAE,QAAK,CAAC,GAC/B,MAAS,KAAA,KACP,oPACF,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAqBA,SAAS,EAAc,EAAE,cAAW,SAAM,gBAAa,IAAM,aAAU,GAAG,KAA6B;CACrG,OACE,kBAAC,QAAD;EACE,aAAU;EACV,eAAa,KAAc,KAAA;EAC3B,WAAW,EACT,2HACA,uFACA,CACF;EACA,GAAI;EAEH,UAAA,MAAa,IAAO,EAAK,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI;CACvD,CAAA;AAEV"}

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

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { Button } from "../forms/button";
+import { Textarea } from "../forms/textarea";
+/**
+ * PromptInput — the composer at the bottom of a chat.
+ *
+ * Follows the "AI Elements" composition (PromptInput / PromptInputTextarea
+ * / PromptInputToolbar / PromptInputTools / PromptInputSubmit) with one
+ * shared `status`:
+ *
+ *   ready      the user may send
+ *   submitted  sent, nothing streamed yet
+ *   streaming  a reply is arriving — the submit button becomes Stop
+ *   error      the last send failed; sending is allowed again
+ *
+ * Keyboard: Enter sends, Shift+Enter inserts a newline (the convention
+ * every chat product has settled on). IME composition is respected — an
+ * Enter that commits a Japanese/Chinese candidate never sends.
+ *
+ * Data in, events out: the form's `onSubmit` fires with the native event;
+ * the consumer owns the value and clears it. The family never fetches.
+ */
+export type PromptInputStatus = "ready" | "submitted" | "streaming" | "error";
+export interface PromptInputLabels {
+    /** Accessible name of the send button. */
+    send: string;
+    /** Accessible name of the stop button (shown while streaming). */
+    stop: string;
+}
+export declare const DEFAULT_PROMPT_INPUT_LABELS: PromptInputLabels;
+export interface PromptInputProps extends React.ComponentProps<"form"> {
+    status?: PromptInputStatus;
+    labels?: Partial<PromptInputLabels>;
+}
+declare function PromptInput({ className, status, labels, ...props }: PromptInputProps): React.JSX.Element;
+export interface PromptInputTextareaProps extends React.ComponentProps<typeof Textarea> {
+    /** Rows shown before the textarea grows with its content. */
+    minRows?: number;
+    /** Rows at which growth stops and the textarea scrolls. */
+    maxRows?: number;
+}
+/**
+ * Enter submits the enclosing form; Shift+Enter is a newline. The textarea
+ * grows with its content between `minRows` and `maxRows`, measured from
+ * the real scroll height so a pasted paragraph is fully visible.
+ */
+declare function PromptInputTextarea({ className, minRows, maxRows, onKeyDown, onInput, ref, ...props }: PromptInputTextareaProps): React.JSX.Element;
+/** The row under the textarea: tools on the left, submit on the right. */
+declare function PromptInputToolbar({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** The left-hand group of the toolbar: model picker, attachments, modes. */
+declare function PromptInputTools({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export interface PromptInputSubmitProps extends Omit<React.ComponentProps<typeof Button>, "children" | "type"> {
+    /** Called instead of submitting while `status` is `streaming`. */
+    onStop?: () => void;
+}
+/**
+ * Send while ready, Stop while streaming. The Stop form is `type="button"`
+ * so a click can never accidentally submit the form it sits in.
+ */
+declare function PromptInputSubmit({ className, onStop, disabled, ...props }: PromptInputSubmitProps): React.JSX.Element;
+export { PromptInput, PromptInputSubmit, PromptInputTextarea, PromptInputToolbar, PromptInputTools };

package/dist/components/ai/prompt-input.js

@@ -0,0 +1,104 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../forms/button.js";
+import { Textarea as n } from "../forms/textarea.js";
+import { ArrowUp as r, Square as i } from "lucide-react";
+import * as a from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/ai/prompt-input.tsx
+var s = {
+	send: "Send",
+	stop: "Stop"
+}, c = a.createContext({
+	status: "ready",
+	labels: s
+});
+function l({ className: t, status: n = "ready", labels: r, ...i }) {
+	let a = {
+		status: n,
+		labels: {
+			...s,
+			...r
+		}
+	};
+	return /* @__PURE__ */ o(c.Provider, {
+		value: a,
+		children: /* @__PURE__ */ o("form", {
+			"data-slot": "prompt-input",
+			"data-status": n,
+			className: e("flex w-full flex-col rounded-xl border bg-card shadow-card transition-[box-shadow,border-color] duration-base", "focus-within:border-ring focus-within:shadow-[var(--focus-ring-shadow)]", t),
+			...i
+		})
+	});
+}
+function u({ className: t, minRows: r = 1, maxRows: i = 6, onKeyDown: s, onInput: c, ref: l, ...u }) {
+	let d = a.useRef(null), f = (e) => {
+		d.current = e, typeof l == "function" ? l(e) : l && (l.current = e);
+	}, p = () => {
+		let e = d.current;
+		if (!e) return;
+		let t = Number.parseFloat(getComputedStyle(e).lineHeight) || 20;
+		e.style.height = "auto";
+		let n = t * i;
+		e.style.height = `${Math.min(e.scrollHeight, n)}px`, e.style.overflowY = e.scrollHeight > n ? "auto" : "hidden";
+	};
+	return /* @__PURE__ */ o(n, {
+		ref: f,
+		"data-slot": "prompt-input-textarea",
+		rows: r,
+		className: e("min-h-0 resize-none border-0 bg-transparent px-3 py-2.5 shadow-none", "focus-visible:border-transparent focus-visible:ring-0 hover:border-transparent", t),
+		onInput: (e) => {
+			p(), c?.(e);
+		},
+		onKeyDown: (e) => {
+			s?.(e), !e.defaultPrevented && e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), e.currentTarget.form?.requestSubmit());
+		},
+		...u
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ o("div", {
+		"data-slot": "prompt-input-toolbar",
+		className: e("flex items-center justify-between gap-2 px-2 pb-2", t),
+		...n
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ o("div", {
+		"data-slot": "prompt-input-tools",
+		className: e("flex items-center gap-1", t),
+		...n
+	});
+}
+function p({ className: n, onStop: s, disabled: l, ...u }) {
+	let { status: d, labels: f } = a.useContext(c);
+	return d === "streaming" ? /* @__PURE__ */ o(t, {
+		"data-slot": "prompt-input-submit",
+		"data-status": d,
+		type: "button",
+		size: "icon-sm",
+		variant: "outline",
+		"aria-label": f.stop,
+		className: e("rounded-full", n),
+		onClick: s,
+		...u,
+		children: /* @__PURE__ */ o(i, {
+			"aria-hidden": "true",
+			className: "size-3.5 fill-current"
+		})
+	}) : /* @__PURE__ */ o(t, {
+		"data-slot": "prompt-input-submit",
+		"data-status": d,
+		type: "submit",
+		size: "icon-sm",
+		"aria-label": f.send,
+		disabled: l || d === "submitted",
+		className: e("rounded-full", n),
+		...u,
+		children: /* @__PURE__ */ o(r, { "aria-hidden": "true" })
+	});
+}
+//#endregion
+export { s as DEFAULT_PROMPT_INPUT_LABELS, l as PromptInput, p as PromptInputSubmit, u as PromptInputTextarea, d as PromptInputToolbar, f as PromptInputTools };
+
+//# sourceMappingURL=prompt-input.js.map

package/dist/components/ai/prompt-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt-input.js","names":[],"sources":["../../../src/components/ai/prompt-input.tsx"],"mappings":";;;;;;;;AAsCA,IAAa,IAAiD;CAC5D,MAAM;CACN,MAAM;AACR,GAOM,IAAqB,EAAM,cAAuC;CACtE,QAAQ;CACR,QAAQ;AACV,CAAC;AAOD,SAAS,EAAY,EAAE,cAAW,YAAS,SAAS,WAAQ,GAAG,KAA2B;CAExF,IAAM,IAAiC;EAAE;EAAQ,QAAQ;GAD7C,GAAG;GAA6B,GAAG;EACU;CAAE;CAC3D,OACE,kBAAC,EAAmB,UAApB;EAAoC;EAClC,UAAA,kBAAC,QAAD;GACE,aAAU;GACV,eAAa;GACb,WAAW,EACT,iHACA,2EACA,CACF;GACA,GAAI;EACL,CAAA;CAC0B,CAAA;AAEjC;AAcA,SAAS,EAAoB,EAC3B,cACA,aAAU,GACV,aAAU,GACV,cACA,YACA,QACA,GAAG,KACwB;CAC3B,IAAM,IAAW,EAAM,OAAmC,IAAI,GAExD,KAAW,MAAqC;EAEpD,AADA,EAAS,UAAU,GACf,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,MAAK,EAA4D,UAAU;CACtF,GAEM,UAAe;EACnB,IAAM,IAAK,EAAS;EACpB,IAAI,CAAC,GAAI;EACT,IAAM,IAAO,OAAO,WAAW,iBAAiB,CAAE,CAAC,CAAC,UAAU,KAAK;EACnE,EAAG,MAAM,SAAS;EAClB,IAAM,IAAM,IAAO;EAEnB,AADA,EAAG,MAAM,SAAS,GAAG,KAAK,IAAI,EAAG,cAAc,CAAG,EAAE,KACpD,EAAG,MAAM,YAAY,EAAG,eAAe,IAAM,SAAS;CACxD;CAEA,OACE,kBAAC,GAAD;EACE,KAAK;EACL,aAAU;EACV,MAAM;EACN,WAAW,EACT,uEACA,kFACA,CACF;EACA,UAAU,MAAU;GAElB,AADA,EAAO,GACP,IAAU,CAAK;EACjB;EACA,YAAY,MAAU;GACpB,IAAY,CAAK,GACb,GAAM,oBACN,EAAM,QAAQ,WAAW,CAAC,EAAM,YAAY,CAAC,EAAM,YAAY,gBACjE,EAAM,eAAe,GACrB,EAAM,cAAc,MAAM,cAAc;EAE5C;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAmB,EAAE,cAAW,GAAG,KAAsC;CAChF,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,qDAAqD,CAAS;EAC5E,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAiB,EAAE,cAAW,GAAG,KAAsC;CAC9E,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAqB,WAAW,EAAG,2BAA2B,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC9G;AAWA,SAAS,EAAkB,EAAE,cAAW,WAAQ,aAAU,GAAG,KAAiC;CAC5F,IAAM,EAAE,WAAQ,cAAW,EAAM,WAAW,CAAkB;CAmB9D,OAlBkB,MAAW,cAGzB,kBAAC,GAAD;EACE,aAAU;EACV,eAAa;EACb,MAAK;EACL,MAAK;EACL,SAAQ;EACR,cAAY,EAAO;EACnB,WAAW,EAAG,gBAAgB,CAAS;EACvC,SAAS;EACT,GAAI;EAEJ,UAAA,kBAAC,GAAD;GAAQ,eAAY;GAAO,WAAU;EAAyB,CAAA;CACxD,CAAA,IAIV,kBAAC,GAAD;EACE,aAAU;EACV,eAAa;EACb,MAAK;EACL,MAAK;EACL,cAAY,EAAO;EACnB,UAAU,KAAY,MAAW;EACjC,WAAW,EAAG,gBAAgB,CAAS;EACvC,GAAI;EAEJ,UAAA,kBAAC,GAAD,EAAS,eAAY,OAAQ,CAAA;CACvB,CAAA;AAEZ"}

package/dist/components/ai/shimmer.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+/**
+ * Shimmer — text with a light sweep, for a status line that is still in
+ * progress ("Running create_page…").
+ *
+ * The sweep is `.ai-shimmer` in theme.css: a gradient clipped to the text,
+ * moving on `ai-shimmer` keyframes. Under reduced motion the class pins
+ * the gradient's position so the text is a plain, fully legible
+ * muted-foreground — an infinite sweep is exactly what WCAG 2.2.2 (Pause,
+ * Stop, Hide) exists for, and the global 1ms backstop alone would freeze
+ * it at an arbitrary frame.
+ */
+declare function Shimmer({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Shimmer };

package/dist/components/ai/shimmer.js

@@ -0,0 +1,16 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/ai/shimmer.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("span", {
+		"data-slot": "shimmer",
+		className: e("ai-shimmer text-sm", n),
+		...r
+	});
+}
+//#endregion
+export { n as Shimmer };
+
+//# sourceMappingURL=shimmer.js.map

package/dist/components/ai/shimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer.js","names":[],"sources":["../../../src/components/ai/shimmer.tsx"],"mappings":";;;;;AAiBA,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAuC;CACtE,OAAO,kBAAC,QAAD;EAAM,aAAU;EAAU,WAAW,EAAG,sBAAsB,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC/F"}

package/dist/components/ai/spotlight.d.ts

@@ -0,0 +1,59 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+/**
+ * Spotlight — the visual language for "the assistant is working HERE".
+ *
+ * Three presentational parts an app positions itself (the package knows
+ * nothing about the app's DOM, routes or which element is meant):
+ *
+ * - {@link SpotlightRing} — a ring drawn around a target rectangle, with a
+ *   tone: `driving` (the assistant is acting on this), `landed` (the change
+ *   arrived), `error`. `aria-hidden`: the ring is for sighted users; the
+ *   caption and the app's own live regions carry the same information.
+ * - {@link SpotlightCaption} — a small bubble that says what is happening
+ *   ("Typing the name…"), a polite live region, with an optional slot for
+ *   controls (Stop, Approve/Deny).
+ * - {@link GhostValue} — a value being "typed into" a control the app must
+ *   not actually mutate: renders the typed prefix with a caret at
+ *   `progress`, or the whole value as a badge for controls with no text
+ *   box (a switch, a select). `aria-hidden`: the real control keeps its
+ *   accessible value; the caption narrates the change.
+ *
+ * The pulse and caret are `.ai-spotlight-pulse` / `.ai-caret` in
+ * theme.css, each with a reduced-motion pose (a static ring, a solid
+ * caret) rather than an arbitrary frozen frame.
+ *
+ * The app positions these with inline `style` (a measured rect), which is
+ * why none of them carries a position of its own: they are `absolute`
+ * boxes in whatever coordinate space the consumer puts them in.
+ */
+export type SpotlightTone = "driving" | "landed" | "error";
+declare const spotlightRingVariants: (props?: ({
+    tone?: "error" | "driving" | "landed" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SpotlightRingProps extends React.ComponentProps<"div">, VariantProps<typeof spotlightRingVariants> {
+    tone?: SpotlightTone;
+}
+declare function SpotlightRing({ className, tone, ...props }: SpotlightRingProps): React.JSX.Element;
+export interface SpotlightCaptionProps extends React.ComponentProps<"div"> {
+    tone?: SpotlightTone;
+    /** Controls rendered after the text: Stop, Approve, Deny. */
+    controls?: React.ReactNode;
+}
+declare function SpotlightCaption({ className, tone, controls, children, ...props }: SpotlightCaptionProps): React.JSX.Element;
+export interface GhostValueProps extends Omit<React.ComponentProps<"span">, "children"> {
+    /** The full value being revealed. */
+    value: string;
+    /** 0..1 — how much of `value` is shown; 1 shows all of it. */
+    progress?: number;
+    /**
+     * `replica` overlays a text box and shows the typed prefix with a caret;
+     * `badge` sits beside a control with no text (a switch, a select) and
+     * shows the whole value at once.
+     */
+    variant?: "replica" | "badge";
+}
+/** The number of characters visible at `progress`, never past the end. */
+export declare function revealedLength(value: string, progress: number): number;
+declare function GhostValue({ className, value, progress, variant, ...props }: GhostValueProps): React.JSX.Element;
+export { GhostValue, SpotlightCaption, SpotlightRing, spotlightRingVariants };