@gntik-ai/chat 0.0.0-stage → 0.5.0

package/dist/index.js

@@ -0,0 +1,2597 @@
+'use client';
+import { Avatar, Badge, Button, Collapsible, CollapsiblePanel, CollapsibleTrigger, IconButton, Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Radio, RadioGroup, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectTrigger, SimpleTooltip, Spinner, StatusTag, Textarea, TooltipProvider, cn, fileKind, getInitials, interpolate, useI18n } from "@gntik-ai/ui";
+import { AlertCircle, ArrowDown, ArrowUp, Check, CircleAlert, Copy, ExternalLink, File, FileArchive, FileAudio, FileCode, FileImage, FileSpreadsheet, FileText, FileVideo, Globe, Paperclip, RefreshCw, RotateCcw, Sparkles, Square, ThumbsDown, ThumbsUp, Upload, Wrench, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, memo, useCallback, useEffect, useId, useRef, useState } from "react";
+import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
+import remarkGfm from "remark-gfm";
+//#region src/utils/format.ts
+/** "840 ms" below a second, "2.4 s" below a minute, "1 m 05 s" above. */
+function formatDuration(ms) {
+	if (ms < 1e3) return `${Math.round(ms)} ms`;
+	if (ms < 6e4) return `${(ms / 1e3).toFixed(1)} s`;
+	const m = Math.floor(ms / 6e4);
+	const s = Math.round(ms % 6e4 / 1e3);
+	return `${m} m ${String(s).padStart(2, "0")} s`;
+}
+/** "12 KB", "3.4 MB". */
+function formatBytes(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1048576) return `${Math.round(bytes / 1024)} KB`;
+	return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+/** Short local time ("14:05") for a message timestamp. */
+function formatTime(date) {
+	return date.toLocaleTimeString(void 0, {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+/** Pretty-prints any value as JSON; falls back to String() for cyclic or exotic values. */
+function toJson(value) {
+	if (typeof value === "string") return value;
+	try {
+		return JSON.stringify(value, null, 2) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
+//#endregion
+//#region src/utils/i18n.ts
+/**
+* English fallbacks for the chat keys added after the first `@gntik-ai/ui` release. The
+* strings live in the ui catalogs (en + es); these keep the pack readable when it runs
+* against an older `@gntik-ai/ui` whose catalog does not have them yet.
+*/
+const FALLBACK = {
+	"chat.typing": "{author} is typing",
+	"chat.feedback": "Response feedback",
+	"chat.feedbackTitle": "What went wrong?",
+	"chat.feedbackReason": "Reason",
+	"chat.feedbackComment": "Comment (optional)",
+	"chat.feedbackPlaceholder": "Tell us more…",
+	"chat.feedbackSubmit": "Send feedback",
+	"chat.feedbackThanks": "Thanks for your feedback",
+	"chat.feedbackCleared": "Feedback removed",
+	"chat.reasonInaccurate": "Inaccurate",
+	"chat.reasonUnhelpful": "Not helpful",
+	"chat.reasonIncomplete": "Incomplete",
+	"chat.reasonUnsafe": "Harmful or unsafe",
+	"chat.reasonOther": "Other",
+	"chat.regenerate": "Regenerate",
+	"chat.uploading": "Uploading {name}",
+	"chat.uploadFailed": "Upload failed",
+	"chat.retryUpload": "Retry uploading {name}",
+	"chat.dropFiles": "Drop files to attach",
+	"chat.fileTooLarge": "{name} is larger than {max}",
+	"chat.fileTypeNotAllowed": "{name} is not an allowed file type",
+	"chat.tooManyFiles": "You can attach up to {max} files",
+	"chat.model": "Model",
+	"chat.selectModel": "Select a model",
+	"chat.capabilityVision": "Vision",
+	"chat.capabilityTools": "Tools",
+	"chat.capabilityReasoning": "Reasoning",
+	"chat.capabilityFiles": "Files",
+	"chat.capabilityWeb": "Web search",
+	"chat.capabilityAudio": "Audio",
+	"chat.contextWindow": "{size} context",
+	"chat.unavailable": "Unavailable"
+};
+/** `useI18n()` plus `tc()`, a translator for the newer chat keys with English fallbacks. */
+function useChatI18n() {
+	const i18n = useI18n();
+	const tc = (key, vars) => {
+		const out = i18n.t(key, vars);
+		return out === key ? interpolate(FALLBACK[key], vars, i18n.locale) : out;
+	};
+	return {
+		...i18n,
+		tc
+	};
+}
+//#endregion
+//#region src/utils/focus.ts
+/** Focus ring shared by every interactive element in the pack (brand rule). */
+const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring";
+//#endregion
+//#region src/Attachment/attachment.variants.ts
+/** Slot classes for AttachmentChip / AttachmentList. */
+const attachmentStyles = {
+	list: "flex flex-wrap gap-1.5",
+	item: "min-w-0",
+	chip: ["relative inline-flex h-10 max-w-64 min-w-0 items-center gap-2 overflow-hidden rounded-md border border-border bg-secondary/50 ps-1.5 pe-1 text-[12px] text-foreground", "data-[status=error]:border-destructive/60 data-[status=error]:bg-destructive/8"].join(" "),
+	tile: ["relative flex w-28 flex-col overflow-hidden rounded-lg border border-border bg-card text-[12px] text-foreground", "data-[status=error]:border-destructive/60"].join(" "),
+	media: "grid size-7 shrink-0 place-items-center overflow-hidden rounded bg-background text-muted-foreground",
+	mediaError: "text-destructive-text",
+	tileMedia: "grid aspect-square w-full place-items-center overflow-hidden bg-secondary/50 text-muted-foreground",
+	img: "size-full object-cover",
+	text: "flex min-w-0 flex-1 flex-col leading-4",
+	tileText: "flex min-w-0 flex-col gap-0.5 px-2 py-1.5 leading-4",
+	name: "truncate font-medium",
+	meta: "truncate font-mono text-[10.5px] text-muted-foreground",
+	metaError: "truncate text-[11px] text-destructive-chip-text",
+	button: `grid size-6 shrink-0 place-items-center rounded text-muted-foreground hover:bg-foreground/10 hover:text-foreground disabled:pointer-events-none disabled:opacity-50 ${focusRing}`,
+	tileActions: "absolute end-1 top-1 flex gap-0.5 rounded-md bg-card/90",
+	track: "absolute inset-x-0 bottom-0 h-0.5 bg-border",
+	bar: "h-full bg-primary transition-[width] duration-200 motion-reduce:transition-none",
+	barIndeterminate: "h-full w-1/3 bg-primary animate-pulse motion-reduce:animate-none"
+};
+//#endregion
+//#region src/Attachment/AttachmentChip.tsx
+const ICONS = {
+	image: FileImage,
+	video: FileVideo,
+	audio: FileAudio,
+	archive: FileArchive,
+	code: FileCode,
+	spreadsheet: FileSpreadsheet,
+	document: FileText,
+	file: File
+};
+/** Status of an attachment from its progress and error fields. */
+function attachmentStatus(a) {
+	if (a.error) return "error";
+	if (a.progress === null || typeof a.progress === "number" && a.progress < 100) return "uploading";
+	return "idle";
+}
+/**
+* One attached file: image thumbnail or file-type icon, name, size, upload progress
+* (a progressbar), error with retry, and a remove button.
+*/
+function AttachmentChip({ attachment: a, variant = "chip", onRemove, onRetry, disabled = false, className, ref }) {
+	const { t, tc } = useChatI18n();
+	const status = attachmentStatus(a);
+	const kind = fileKind(a.name, a.type);
+	const Icon = status === "error" ? AlertCircle : ICONS[kind];
+	const showImage = a.previewUrl !== void 0 && kind === "image" && status !== "error";
+	const tile = variant === "tile";
+	const pct = typeof a.progress === "number" ? Math.max(0, Math.min(100, Math.round(a.progress))) : null;
+	const media = /* @__PURE__ */ jsx("span", {
+		className: cn(tile ? attachmentStyles.tileMedia : attachmentStyles.media, status === "error" && attachmentStyles.mediaError),
+		children: showImage ? /* @__PURE__ */ jsx("img", {
+			src: a.previewUrl,
+			alt: "",
+			className: attachmentStyles.img
+		}) : /* @__PURE__ */ jsx(Icon, {
+			size: tile ? 22 : 14,
+			"aria-hidden": true
+		})
+	});
+	const meta = status === "error" ? /* @__PURE__ */ jsx("span", {
+		className: attachmentStyles.metaError,
+		children: typeof a.error === "string" ? a.error : tc("chat.uploadFailed")
+	}) : status === "uploading" ? /* @__PURE__ */ jsx("span", {
+		className: attachmentStyles.meta,
+		children: pct === null ? t("common.loading") : `${pct}%`
+	}) : a.size !== void 0 ? /* @__PURE__ */ jsx("span", {
+		className: attachmentStyles.meta,
+		children: formatBytes(a.size)
+	}) : null;
+	const buttons = /* @__PURE__ */ jsxs(Fragment, { children: [status === "error" && onRetry && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: attachmentStyles.button,
+		"aria-label": tc("chat.retryUpload", { name: a.name }),
+		disabled,
+		onClick: () => onRetry(a.id),
+		children: /* @__PURE__ */ jsx(RotateCcw, {
+			size: 12,
+			"aria-hidden": true
+		})
+	}), onRemove && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: attachmentStyles.button,
+		"aria-label": t("common.removeItem", { label: a.name }),
+		disabled,
+		onClick: () => onRemove(a.id),
+		children: /* @__PURE__ */ jsx(X, {
+			size: 12,
+			"aria-hidden": true
+		})
+	})] });
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-status": status,
+		"data-kind": kind,
+		className: cn(tile ? attachmentStyles.tile : attachmentStyles.chip, className),
+		children: [
+			media,
+			/* @__PURE__ */ jsxs("span", {
+				className: tile ? attachmentStyles.tileText : attachmentStyles.text,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: attachmentStyles.name,
+					title: a.name,
+					children: a.name
+				}), meta]
+			}),
+			tile ? (onRemove || status === "error" && onRetry) && /* @__PURE__ */ jsx("span", {
+				className: attachmentStyles.tileActions,
+				children: buttons
+			}) : buttons,
+			status === "uploading" && /* @__PURE__ */ jsx("span", {
+				role: "progressbar",
+				"aria-label": tc("chat.uploading", { name: a.name }),
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": pct ?? void 0,
+				className: attachmentStyles.track,
+				children: /* @__PURE__ */ jsx("span", {
+					className: pct === null ? attachmentStyles.barIndeterminate : attachmentStyles.bar,
+					style: pct === null ? void 0 : { width: `${pct}%` }
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Attachment/AttachmentList.tsx
+/** A labelled list of AttachmentChips. Renders nothing when empty. */
+function AttachmentList({ attachments, variant = "chip", onRemove, onRetry, disabled, label, className, ref }) {
+	const { t } = useChatI18n();
+	if (attachments.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		"aria-label": label ?? t("chat.attachments"),
+		className: cn(attachmentStyles.list, className),
+		children: attachments.map((a) => /* @__PURE__ */ jsx("li", {
+			className: attachmentStyles.item,
+			children: /* @__PURE__ */ jsx(AttachmentChip, {
+				attachment: a,
+				variant,
+				onRemove,
+				onRetry,
+				disabled
+			})
+		}, a.id))
+	});
+}
+//#endregion
+//#region src/Attachment/validateFiles.ts
+/** Whether a file matches an `accept` list (extensions, exact MIME types and `type/*`). */
+function matchesAccept(file, accept) {
+	if (!accept?.trim()) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return accept.split(",").map((a) => a.trim().toLowerCase()).filter(Boolean).some((rule) => {
+		if (rule.startsWith(".")) return name.endsWith(rule);
+		if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+		return type === rule;
+	});
+}
+/** Splits files into accepted ones and rejections (without messages) by type, size and count. */
+function validateFiles(files, { accept, maxSize, maxFiles, current = 0 }) {
+	const accepted = [];
+	const rejected = [];
+	for (const file of files) if (!matchesAccept(file, accept)) rejected.push({
+		file,
+		reason: "type"
+	});
+	else if (maxSize !== void 0 && file.size > maxSize) rejected.push({
+		file,
+		reason: "size"
+	});
+	else if (maxFiles !== void 0 && current + accepted.length >= maxFiles) rejected.push({
+		file,
+		reason: "count"
+	});
+	else accepted.push(file);
+	return {
+		accepted,
+		rejected
+	};
+}
+//#endregion
+//#region src/Attachment/Attachment.doc.ts
+const doc = {
+	name: "AttachmentList",
+	group: "Display",
+	status: "beta",
+	description: "Files attached to a message or waiting in the composer. Each AttachmentChip shows an image thumbnail or a file-type icon, the name, the size, upload progress (a labelled progressbar; indeterminate holds still under reduced motion), an error with Retry, and a Remove button. `variant=\"tile\"` gives larger image previews inside a message. `validateFiles` / `matchesAccept` back the composer’s accept and max-size checks.",
+	pattern: "list",
+	keyboard: [["Tab", "Moves through each chip’s Retry (on error) and Remove buttons"], ["Enter / Space", "Activates the focused Retry or Remove button"]],
+	tokens: [
+		"secondary",
+		"card",
+		"border",
+		"muted-foreground",
+		"primary",
+		"destructive",
+		"destructive-text",
+		"focus-ring"
+	]
+};
+//#endregion
+//#region src/ChatComposer/chatComposer.variants.ts
+/** Slot classes for ChatComposer (focus ring on the frame, like the legacy composer). */
+const chatComposerStyles = {
+	root: [
+		"relative overflow-hidden rounded-xl border border-border bg-card shadow-sm transition-colors motion-reduce:transition-none",
+		"focus-within:border-primary/60 focus-within:ring-2 focus-within:ring-ring/25",
+		"data-[disabled]:opacity-60 data-[dragging]:border-primary/60"
+	].join(" "),
+	dropOverlay: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center gap-2 rounded-xl border-2 border-dashed border-primary/60 bg-card/95 text-[13px] font-medium text-primary-text",
+	errors: "mx-3 mt-3 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/8 px-2.5 py-1.5 text-[12px] text-destructive-chip-text",
+	errorList: "flex min-w-0 flex-1 flex-col gap-0.5",
+	errorDismiss: `-me-1 grid size-5 shrink-0 place-items-center rounded text-destructive-chip-text hover:bg-foreground/10 ${focusRing}`,
+	attachments: "flex flex-wrap gap-1.5 px-3 pt-3",
+	/** @deprecated Chips render AttachmentChip (see attachmentStyles). */
+	chip: "inline-flex h-7 max-w-60 items-center gap-1.5 rounded-md border border-border bg-secondary/50 ps-2 pe-1 text-[12px] text-foreground",
+	chipName: "truncate font-medium",
+	chipSize: "shrink-0 font-mono text-[10.5px] text-muted-foreground",
+	chipRemove: `grid size-5 shrink-0 place-items-center rounded text-muted-foreground hover:bg-foreground/10 hover:text-foreground ${focusRing}`,
+	textarea: ["block max-h-[220px] min-h-[52px] w-full resize-none bg-transparent px-3.5 py-3 text-[14px] leading-6 text-foreground", "field-sizing-content placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"].join(" "),
+	toolbar: "flex items-center justify-between gap-2 px-2 pb-2",
+	tools: "flex min-w-0 items-center gap-1",
+	end: "flex shrink-0 items-center gap-2",
+	count: "font-mono text-[11px] text-muted-foreground tabular-nums",
+	countOver: "text-destructive-text",
+	hint: "mt-1.5 px-1 text-center text-[11.5px] text-muted-foreground"
+};
+//#endregion
+//#region src/ChatComposer/ChatComposer.tsx
+/**
+* Message box for a chat: grows with its content, Enter sends and Shift+Enter adds a line,
+* files (picked, pasted or dropped, validated against accept / maxSize / maxFiles) show as
+* removable chips with previews and upload progress, a model picker can sit in the toolbar, and while a reply
+* streams the send button becomes Stop (Escape also stops).
+*/
+function ChatComposer({ value, defaultValue = "", onValueChange, onSubmit, streaming = false, onStop, disabled = false, placeholder: placeholderProp, label: labelProp, maxLength, attachments = [], onAttach, onRemoveAttachment, onRetryAttachment, accept, maxSize, maxFiles, onReject, modelPicker, tools, hint, className, ref }) {
+	const { t, tc } = useChatI18n();
+	const placeholder = placeholderProp ?? t("chat.placeholder");
+	const label = labelProp ?? t("chat.messageLabel");
+	const id = useId();
+	const [inner, setInner] = useState(defaultValue);
+	const text = value ?? inner;
+	const fileInput = useRef(null);
+	const dragDepth = useRef(0);
+	const [dragging, setDragging] = useState(false);
+	const [errors, setErrors] = useState([]);
+	const canAttach = onAttach !== void 0 && !disabled;
+	const setText = (next) => {
+		if (value === void 0) setInner(next);
+		onValueChange?.(next);
+	};
+	const length = text.length;
+	const over = maxLength !== void 0 && length > maxLength;
+	const showCount = maxLength !== void 0 && length >= maxLength * .8;
+	const canSend = !disabled && !streaming && !over && (text.trim().length > 0 || attachments.length > 0);
+	const send = () => {
+		if (!canSend) return;
+		onSubmit(text.trim(), attachments);
+		if (value === void 0) setInner("");
+	};
+	const onKeyDown = (e) => {
+		if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+			e.preventDefault();
+			send();
+		} else if (e.key === "Escape" && streaming && onStop) {
+			e.preventDefault();
+			onStop();
+		}
+	};
+	const addFiles = (files) => {
+		if (!onAttach || files.length === 0) return;
+		const { accepted, rejected } = validateFiles(files, {
+			accept,
+			maxSize,
+			maxFiles,
+			current: attachments.length
+		});
+		const rejections = rejected.map(({ file, reason }) => ({
+			file,
+			reason,
+			message: reason === "type" ? tc("chat.fileTypeNotAllowed", { name: file.name }) : reason === "size" ? tc("chat.fileTooLarge", {
+				name: file.name,
+				max: formatBytes(maxSize ?? 0)
+			}) : tc("chat.tooManyFiles", { max: maxFiles ?? 0 })
+		}));
+		setErrors([...new Set(rejections.map((r) => r.message))]);
+		if (rejections.length) onReject?.(rejections);
+		if (accepted.length) onAttach(accepted);
+	};
+	const onFiles = (e) => {
+		addFiles(Array.from(e.target.files ?? []));
+		e.target.value = "";
+	};
+	const onPaste = (e) => {
+		const files = Array.from(e.clipboardData?.files ?? []);
+		if (!canAttach || files.length === 0) return;
+		e.preventDefault();
+		addFiles(files);
+	};
+	const hasFiles = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
+	const dropHandlers = canAttach ? {
+		onDragEnter: (e) => {
+			if (!hasFiles(e)) return;
+			e.preventDefault();
+			dragDepth.current += 1;
+			setDragging(true);
+		},
+		onDragOver: (e) => {
+			if (!hasFiles(e)) return;
+			e.preventDefault();
+			if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+		},
+		onDragLeave: () => {
+			dragDepth.current = Math.max(0, dragDepth.current - 1);
+			if (dragDepth.current === 0) setDragging(false);
+		},
+		onDrop: (e) => {
+			e.preventDefault();
+			dragDepth.current = 0;
+			setDragging(false);
+			addFiles(Array.from(e.dataTransfer?.files ?? []));
+		}
+	} : {};
+	const hintNode = hint === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("kbd", {
+			className: "font-sans",
+			children: t("kbd.enter")
+		}),
+		" ",
+		t("chat.hintSend"),
+		" ·",
+		" ",
+		/* @__PURE__ */ jsx("kbd", {
+			className: "font-sans",
+			children: t("chat.shiftEnter")
+		}),
+		" ",
+		t("chat.hintNewLine")
+	] }) : hint;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsxs("form", {
+			className: chatComposerStyles.root,
+			"data-disabled": disabled || void 0,
+			"data-dragging": dragging || void 0,
+			...dropHandlers,
+			onSubmit: (e) => {
+				e.preventDefault();
+				send();
+			},
+			children: [
+				dragging && /* @__PURE__ */ jsxs("div", {
+					"aria-hidden": true,
+					className: chatComposerStyles.dropOverlay,
+					children: [/* @__PURE__ */ jsx(Upload, { size: 16 }), tc("chat.dropFiles")]
+				}),
+				/* @__PURE__ */ jsx(AttachmentList, {
+					attachments,
+					onRemove: onRemoveAttachment,
+					onRetry: onRetryAttachment,
+					disabled,
+					className: chatComposerStyles.attachments
+				}),
+				/* @__PURE__ */ jsx("div", {
+					role: "alert",
+					className: cn(errors.length > 0 && chatComposerStyles.errors),
+					children: errors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ul", {
+						className: chatComposerStyles.errorList,
+						children: errors.map((m) => /* @__PURE__ */ jsx("li", { children: m }, m))
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: chatComposerStyles.errorDismiss,
+						"aria-label": t("common.dismiss"),
+						onClick: () => setErrors([]),
+						children: /* @__PURE__ */ jsx(X, {
+							size: 12,
+							"aria-hidden": true
+						})
+					})] })
+				}),
+				/* @__PURE__ */ jsx("textarea", {
+					ref,
+					id: `${id}-input`,
+					rows: 1,
+					value: text,
+					onChange: (e) => setText(e.target.value),
+					onKeyDown,
+					onPaste,
+					disabled,
+					placeholder,
+					"aria-label": label,
+					"aria-invalid": over || void 0,
+					"aria-describedby": showCount ? `${id}-count` : void 0,
+					className: chatComposerStyles.textarea
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: chatComposerStyles.toolbar,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: chatComposerStyles.tools,
+						children: [onAttach && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+							size: "sm",
+							icon: Paperclip,
+							label: t("chat.attach"),
+							disabled,
+							onClick: () => fileInput.current?.click()
+						}), /* @__PURE__ */ jsx("input", {
+							ref: fileInput,
+							type: "file",
+							multiple: true,
+							hidden: true,
+							accept,
+							"aria-label": t("chat.attach"),
+							onChange: onFiles
+						})] }), tools]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: chatComposerStyles.end,
+						children: [
+							showCount && /* @__PURE__ */ jsxs("span", {
+								id: `${id}-count`,
+								className: cn(chatComposerStyles.count, over && chatComposerStyles.countOver),
+								children: [
+									length,
+									"/",
+									maxLength,
+									over && /* @__PURE__ */ jsxs("span", {
+										className: "sr-only",
+										children: [" ", t("chat.overLimit")]
+									})
+								]
+							}),
+							modelPicker,
+							streaming ? /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "secondary",
+								icon: Square,
+								"aria-label": t("chat.stop"),
+								onClick: onStop,
+								disabled: !onStop,
+								children: t("common.stop")
+							}) : /* @__PURE__ */ jsx(IconButton, {
+								size: "sm",
+								variant: "primary",
+								icon: ArrowUp,
+								label: t("chat.send"),
+								type: "submit",
+								disabled: !canSend
+							})
+						]
+					})]
+				})
+			]
+		}), hintNode !== null && /* @__PURE__ */ jsx("p", {
+			className: chatComposerStyles.hint,
+			children: hintNode
+		})]
+	});
+}
+//#endregion
+//#region src/ChatComposer/ChatComposer.doc.ts
+const doc$1 = {
+	name: "ChatComposer",
+	group: "Forms",
+	status: "beta",
+	description: "Chat input: autosizing textarea, Enter sends and Shift+Enter adds a line, attachments (pick, paste or drag-and-drop files; `accept`, `maxSize` and `maxFiles` validation with messages in an alert; chips with image thumbnails, file-type icons, size, upload progress, error + Retry and Remove), a model-picker slot (e.g. a compact ModelPicker), a character counter near the limit, a disabled state, and a Stop button while a reply streams.",
+	keyboard: [
+		["Enter", "Sends the message (ignored while streaming or during IME composition)"],
+		["Shift+Enter", "Inserts a new line"],
+		["Escape", "While a reply streams: stops it"],
+		["Tab", "Moves through attachment Retry/Remove buttons, the text box, attach, tools, the model picker and Send/Stop"],
+		["Ctrl/⌘+V", "In the text box: pasted files are attached (validated) instead of inserted"]
+	],
+	tokens: [
+		"card",
+		"destructive-chip-text",
+		"primary-text",
+		"border",
+		"primary",
+		"ring",
+		"secondary",
+		"muted-foreground",
+		"destructive-text",
+		"focus-ring"
+	]
+};
+//#endregion
+//#region src/TypingIndicator/typingIndicator.variants.ts
+/** Slot classes for TypingIndicator. Dots pulse in sequence; static under reduced motion. */
+const typingIndicatorStyles = {
+	root: "inline-flex items-center gap-2 text-muted-foreground",
+	dots: "inline-flex h-6 items-center gap-1",
+	dot: "size-1.5 rounded-full bg-muted-foreground animate-pulse motion-reduce:animate-none",
+	label: "text-[12.5px]",
+	size: {
+		sm: {
+			dots: "h-4 gap-0.5",
+			dot: "size-1"
+		},
+		md: {
+			dots: "",
+			dot: ""
+		}
+	}
+};
+/** Thin blinking caret after streamed plain text (static under reduced motion). */
+const streamingCaret = "ms-0.5 inline-block h-[1.05em] w-[2px] translate-y-[2px] bg-primary animate-pulse motion-reduce:animate-none";
+//#endregion
+//#region src/TypingIndicator/TypingIndicator.tsx
+/**
+* Three dots that pulse while a reply is being written. The dots are decorative; the text
+* ("Assistant is typing") is always in the accessibility tree. Under reduced motion the dots
+* hold still.
+*/
+function TypingIndicator({ author, showLabel = false, label, size = "md", announce = false, className, ref }) {
+	const { t, tc } = useChatI18n();
+	const text = label ?? tc("chat.typing", { author: author ?? t("chat.assistant") });
+	const sz = typingIndicatorStyles.size[size];
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		"data-slot": "typing-indicator",
+		role: announce ? "status" : void 0,
+		className: cn(typingIndicatorStyles.root, className),
+		children: [/* @__PURE__ */ jsxs("span", {
+			"aria-hidden": true,
+			className: cn(typingIndicatorStyles.dots, sz.dots),
+			children: [
+				/* @__PURE__ */ jsx("span", { className: cn(typingIndicatorStyles.dot, sz.dot) }),
+				/* @__PURE__ */ jsx("span", { className: cn(typingIndicatorStyles.dot, sz.dot, "[animation-delay:150ms]") }),
+				/* @__PURE__ */ jsx("span", { className: cn(typingIndicatorStyles.dot, sz.dot, "[animation-delay:300ms]") })
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: showLabel ? typingIndicatorStyles.label : "sr-only",
+			children: text
+		})]
+	});
+}
+//#endregion
+//#region src/TypingIndicator/TypingIndicator.doc.ts
+const doc$11 = {
+	name: "TypingIndicator",
+	group: "Feedback",
+	status: "beta",
+	description: "Three pulsing dots shown while a reply is being written, with the text \"Assistant is typing\" for screen readers (or visible with `showLabel`). The dots are decorative and hold still under reduced motion. ChatMessage renders it while a streaming turn is still empty.",
+	keyboard: [],
+	tokens: ["muted-foreground"]
+};
+//#endregion
+//#region src/utils/useCopy.ts
+/**
+* Copies text to the clipboard and exposes a short-lived `copied` flag for the button label.
+* The reset timer is cleared on unmount and on every new copy.
+*/
+function useCopy(resetMs = 1600) {
+	const [copied, setCopied] = useState(false);
+	const timer = useRef(void 0);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	return {
+		copied,
+		copy: useCallback(async (text) => {
+			try {
+				await navigator.clipboard?.writeText(text);
+			} catch {}
+			setCopied(true);
+			clearTimeout(timer.current);
+			timer.current = setTimeout(() => setCopied(false), resetMs);
+		}, [resetMs])
+	};
+}
+//#endregion
+//#region src/ChatMessage/chatMessage.variants.ts
+/** Slot classes for ChatMessage, per role. */
+const chatMessageStyles = {
+	root: "group/message relative flex gap-3 outline-none",
+	avatar: "mt-0.5 shrink-0",
+	body: "flex min-w-0 flex-1 flex-col gap-1",
+	meta: "flex items-baseline gap-2 text-[12px] leading-5",
+	author: "font-semibold text-foreground",
+	time: "font-mono text-[11px] text-muted-foreground",
+	content: "min-w-0 text-[14px] leading-[1.7] text-foreground",
+	actions: ["flex items-center gap-0.5 transition-opacity motion-reduce:transition-none", "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 [@media(hover:none)]:opacity-100"].join(" "),
+	actionsVisible: "opacity-100",
+	/** @deprecated The empty streaming state renders TypingIndicator (see typingIndicatorStyles). */
+	typing: "inline-flex h-6 items-center gap-1",
+	/** @deprecated See typingIndicatorStyles.dot. */
+	typingDot: "size-1.5 rounded-full bg-muted-foreground animate-pulse motion-reduce:animate-none",
+	role: {
+		user: {
+			root: "flex-row-reverse",
+			body: "items-end",
+			meta: "flex-row-reverse",
+			content: "max-w-[85%] rounded-2xl rounded-se-md bg-secondary px-4 py-2.5 whitespace-pre-wrap [overflow-wrap:anywhere]"
+		},
+		assistant: {
+			root: "",
+			body: "",
+			meta: "",
+			content: ""
+		},
+		participant: {
+			root: "",
+			body: "items-start",
+			meta: "",
+			content: "max-w-[85%] rounded-2xl rounded-ss-md border border-border bg-card px-4 py-2.5 whitespace-pre-wrap [overflow-wrap:anywhere]"
+		},
+		system: {
+			root: "justify-center",
+			body: "items-center",
+			meta: "sr-only",
+			content: "rounded-full border border-border bg-card px-3 py-1 text-center text-[12px] leading-5 text-muted-foreground"
+		},
+		tool: {
+			root: "",
+			body: "",
+			meta: "",
+			content: "text-[13px]"
+		}
+	}
+};
+//#endregion
+//#region src/ChatMessage/ChatMessage.tsx
+const DEFAULT_AUTHOR = {
+	user: "chat.you",
+	assistant: "chat.assistant",
+	participant: "chat.participant",
+	system: "chat.system",
+	tool: "chat.tool"
+};
+function DefaultAvatar({ role, author, src }) {
+	if (role === "assistant") return /* @__PURE__ */ jsx(Avatar, {
+		size: "sm",
+		tone: "primary",
+		fallback: /* @__PURE__ */ jsx(Sparkles, {
+			size: 15,
+			"aria-hidden": true
+		})
+	});
+	if (role === "tool") return /* @__PURE__ */ jsx(Avatar, {
+		size: "sm",
+		tone: "secondary",
+		fallback: /* @__PURE__ */ jsx(Wrench, {
+			size: 14,
+			"aria-hidden": true
+		})
+	});
+	return /* @__PURE__ */ jsx(Avatar, {
+		size: "sm",
+		tone: role === "participant" ? "accent" : "secondary",
+		src,
+		initials: getInitials(author)
+	});
+}
+/**
+* One turn in a conversation. User turns are right-aligned bubbles, participant turns (another
+* person) are start-aligned outlined bubbles, assistant turns are full-width prose, system notes are centred pills and tool turns hold a ToolCallCard. Copy,
+* retry and feedback actions appear on hover or keyboard focus and are reachable with Tab.
+*/
+function ChatMessage({ role, author, avatar, avatarSrc, timestamp, children, streaming = false, showCaret = true, copyText, onRetry, feedback = null, onFeedback, actions, alwaysShowActions = false, className, ref }) {
+	const id = useId();
+	const { t } = useI18n();
+	const name = author ?? t(DEFAULT_AUTHOR[role]);
+	const v = chatMessageStyles.role[role];
+	const { copied, copy } = useCopy();
+	const isEmpty = children === void 0 || children === null || children === "";
+	const time = timestamp instanceof Date ? /* @__PURE__ */ jsx("time", {
+		dateTime: timestamp.toISOString(),
+		className: chatMessageStyles.time,
+		children: formatTime(timestamp)
+	}) : timestamp ? /* @__PURE__ */ jsx("span", {
+		className: chatMessageStyles.time,
+		children: timestamp
+	}) : null;
+	const hasActions = !streaming && role !== "system" && (copyText !== void 0 || onRetry || onFeedback || actions);
+	const showAvatar = role !== "system" && avatar !== null;
+	return /* @__PURE__ */ jsxs("article", {
+		ref,
+		"aria-labelledby": `${id}-author`,
+		"aria-busy": streaming || void 0,
+		"data-role": role,
+		"data-streaming": streaming || void 0,
+		className: cn(chatMessageStyles.root, v.root, className),
+		children: [showAvatar && /* @__PURE__ */ jsx("div", {
+			className: chatMessageStyles.avatar,
+			children: avatar ?? /* @__PURE__ */ jsx(DefaultAvatar, {
+				role,
+				author: name,
+				src: avatarSrc
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn(chatMessageStyles.body, v.body),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(chatMessageStyles.meta, v.meta),
+					children: [/* @__PURE__ */ jsx("span", {
+						id: `${id}-author`,
+						className: chatMessageStyles.author,
+						children: name
+					}), time]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn(chatMessageStyles.content, v.content),
+					children: streaming && isEmpty ? /* @__PURE__ */ jsx(TypingIndicator, { author: name }) : streaming && showCaret && (typeof children === "string" || typeof children === "number") ? /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						"data-slot": "streaming-caret",
+						className: streamingCaret
+					})] }) : children
+				}),
+				hasActions && /* @__PURE__ */ jsxs("div", {
+					role: "group",
+					"aria-label": t("chat.actionsFor", { name }),
+					className: cn(chatMessageStyles.actions, alwaysShowActions && chatMessageStyles.actionsVisible),
+					children: [
+						copyText !== void 0 && /* @__PURE__ */ jsx(SimpleTooltip, {
+							content: copied ? t("common.copied") : t("common.copy"),
+							children: /* @__PURE__ */ jsx(IconButton, {
+								size: "sm",
+								icon: copied ? Check : Copy,
+								label: copied ? t("common.copied") : t("chat.copyMessage"),
+								onClick: () => void copy(copyText)
+							})
+						}),
+						onRetry && /* @__PURE__ */ jsx(SimpleTooltip, {
+							content: t("common.retry"),
+							children: /* @__PURE__ */ jsx(IconButton, {
+								size: "sm",
+								icon: RotateCcw,
+								label: t("common.retry"),
+								onClick: onRetry
+							})
+						}),
+						onFeedback && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SimpleTooltip, {
+							content: t("chat.goodResponse"),
+							children: /* @__PURE__ */ jsx(IconButton, {
+								size: "sm",
+								icon: ThumbsUp,
+								label: t("chat.goodResponse"),
+								"aria-pressed": feedback === "up",
+								className: cn(feedback === "up" && "text-primary-text"),
+								onClick: () => onFeedback(feedback === "up" ? null : "up")
+							})
+						}), /* @__PURE__ */ jsx(SimpleTooltip, {
+							content: t("chat.badResponse"),
+							children: /* @__PURE__ */ jsx(IconButton, {
+								size: "sm",
+								icon: ThumbsDown,
+								label: t("chat.badResponse"),
+								"aria-pressed": feedback === "down",
+								className: cn(feedback === "down" && "text-destructive-text"),
+								onClick: () => onFeedback(feedback === "down" ? null : "down")
+							})
+						})] }),
+						actions
+					]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/ChatMessage/ChatAnnouncer.tsx
+/**
+* Screen-reader strategy for streaming: the thread itself is not a live region (it would
+* re-announce every token). This single polite, atomic status says "Assistant is responding…"
+* when a stream starts and reads the finished reply once when it ends.
+*/
+function ChatAnnouncer({ streaming, lastReply, author, maxLength = 600 }) {
+	const { t } = useI18n();
+	let text = "";
+	if (streaming) text = t("chat.responding", { author: author ?? t("chat.assistant") });
+	else if (lastReply) text = lastReply.length > maxLength ? `${lastReply.slice(0, maxLength)}…` : lastReply;
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		className: "sr-only",
+		children: text
+	});
+}
+//#endregion
+//#region src/ChatMessage/ChatMessage.doc.ts
+const doc$4 = {
+	name: "ChatMessage",
+	group: "Display",
+	status: "beta",
+	description: "One conversation turn for the roles user (end-aligned bubble), participant (another person, e.g. a teammate: start-aligned outlined bubble with their name and avatar via `author` / `avatarSrc`), assistant, system and tool: avatar, author, timestamp, body and hover/focus actions (copy, retry, thumbs feedback). While streaming it is aria-busy, hides its actions and shows a TypingIndicator (\"Assistant is typing\") until text arrives and a caret after streamed plain text; ChatAnnouncer announces start and end once instead of every token.",
+	pattern: "article",
+	keyboard: [
+		["Tab", "Reaches each action in order (copy, retry, good, bad); focusing one reveals the action group"],
+		["Enter", "Activates the focused action"],
+		["Space", "Activates the focused action; thumbs toggle (aria-pressed)"]
+	],
+	tokens: [
+		"foreground",
+		"muted-foreground",
+		"secondary",
+		"card",
+		"border",
+		"primary",
+		"primary-text",
+		"destructive-text",
+		"focus-ring"
+	]
+};
+//#endregion
+//#region src/MessageFeedback/messageFeedback.variants.ts
+/** Slot classes for MessageFeedback. */
+const messageFeedbackStyles = {
+	root: "inline-flex items-center gap-0.5",
+	up: "text-primary-text",
+	down: "text-destructive-text",
+	popup: "w-80 max-w-[calc(100vw-2rem)]",
+	form: "flex flex-col gap-3",
+	title: "text-[13px] font-semibold text-foreground",
+	label: "mb-1.5 block text-[12.5px] font-medium text-foreground",
+	footer: "flex justify-end gap-2"
+};
+//#endregion
+//#region src/MessageFeedback/MessageFeedback.tsx
+const DEFAULT_REASONS = [
+	{
+		value: "inaccurate",
+		key: "chat.reasonInaccurate"
+	},
+	{
+		value: "unhelpful",
+		key: "chat.reasonUnhelpful"
+	},
+	{
+		value: "incomplete",
+		key: "chat.reasonIncomplete"
+	},
+	{
+		value: "unsafe",
+		key: "chat.reasonUnsafe"
+	},
+	{
+		value: "other",
+		key: "chat.reasonOther"
+	}
+];
+const EMPTY = { rating: null };
+/**
+* Feedback for an assistant reply: thumbs up / down toggles (aria-pressed), and on thumbs down
+* a popover asking for a reason and an optional comment. Copy and Regenerate sit alongside.
+*/
+function MessageFeedback({ value: valueProp, onFeedback, reasons: reasonsProp, askDetails = true, copyText, onRegenerate, label, disabled = false, className, ref }) {
+	const { t, tc } = useChatI18n();
+	const id = useId();
+	const [inner, setInner] = useState(EMPTY);
+	const value = valueProp ?? inner;
+	const [open, setOpen] = useState(false);
+	const [reason, setReason] = useState("");
+	const [comment, setComment] = useState("");
+	const [announcement, setAnnouncement] = useState("");
+	const { copied, copy } = useCopy();
+	const reasons = reasonsProp ?? DEFAULT_REASONS.map((r) => ({
+		value: r.value,
+		label: tc(r.key)
+	}));
+	const emit = (next) => {
+		if (valueProp === void 0) setInner(next);
+		onFeedback?.(next);
+	};
+	const pressUp = () => {
+		setOpen(false);
+		const next = value.rating === "up" ? EMPTY : { rating: "up" };
+		emit(next);
+		setAnnouncement(next.rating ? tc("chat.feedbackThanks") : tc("chat.feedbackCleared"));
+	};
+	const pressDown = () => {
+		if (value.rating === "down") {
+			setOpen(false);
+			emit(EMPTY);
+			setAnnouncement(tc("chat.feedbackCleared"));
+			return;
+		}
+		emit({ rating: "down" });
+		setReason("");
+		setComment("");
+		if (askDetails) setOpen(true);
+		else setAnnouncement(tc("chat.feedbackThanks"));
+	};
+	const submit = (e) => {
+		e.preventDefault();
+		const trimmed = comment.trim();
+		emit({
+			rating: "down",
+			...reason ? { reason } : {},
+			...trimmed ? { comment: trimmed } : {}
+		});
+		setOpen(false);
+		setAnnouncement(tc("chat.feedbackThanks"));
+	};
+	const upLabel = t("chat.goodResponse");
+	const downLabel = t("chat.badResponse");
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": label ?? tc("chat.feedback"),
+		className: cn(messageFeedbackStyles.root, className),
+		children: [
+			copyText !== void 0 && /* @__PURE__ */ jsx(SimpleTooltip, {
+				content: copied ? t("common.copied") : t("common.copy"),
+				children: /* @__PURE__ */ jsx(IconButton, {
+					size: "sm",
+					icon: copied ? Check : Copy,
+					label: copied ? t("common.copied") : t("chat.copyMessage"),
+					disabled,
+					onClick: () => void copy(copyText)
+				})
+			}),
+			onRegenerate && /* @__PURE__ */ jsx(SimpleTooltip, {
+				content: tc("chat.regenerate"),
+				children: /* @__PURE__ */ jsx(IconButton, {
+					size: "sm",
+					icon: RefreshCw,
+					label: tc("chat.regenerate"),
+					disabled,
+					onClick: onRegenerate
+				})
+			}),
+			/* @__PURE__ */ jsx(SimpleTooltip, {
+				content: upLabel,
+				children: /* @__PURE__ */ jsx(IconButton, {
+					size: "sm",
+					icon: ThumbsUp,
+					label: upLabel,
+					"aria-pressed": value.rating === "up",
+					disabled,
+					className: cn(value.rating === "up" && messageFeedbackStyles.up),
+					onClick: pressUp
+				})
+			}),
+			/* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: (next) => {
+					if (!next) setOpen(false);
+				},
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					render: /* @__PURE__ */ jsx(IconButton, {
+						size: "sm",
+						icon: ThumbsDown,
+						label: downLabel,
+						"aria-pressed": value.rating === "down",
+						disabled,
+						className: cn(value.rating === "down" && messageFeedbackStyles.down)
+					}),
+					onClick: pressDown
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					side: "top",
+					align: "end",
+					className: messageFeedbackStyles.popup,
+					children: /* @__PURE__ */ jsxs("form", {
+						className: messageFeedbackStyles.form,
+						onSubmit: submit,
+						children: [
+							/* @__PURE__ */ jsx(PopoverTitle, {
+								id: `${id}-title`,
+								className: messageFeedbackStyles.title,
+								children: tc("chat.feedbackTitle")
+							}),
+							reasons.length > 0 && /* @__PURE__ */ jsx(RadioGroup, {
+								"aria-labelledby": `${id}-title`,
+								value: reason,
+								onValueChange: (v) => setReason(String(v)),
+								children: reasons.map((r) => /* @__PURE__ */ jsx(Radio, {
+									value: r.value,
+									label: r.label
+								}, r.value))
+							}),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+								htmlFor: `${id}-comment`,
+								className: messageFeedbackStyles.label,
+								children: tc("chat.feedbackComment")
+							}), /* @__PURE__ */ jsx(Textarea, {
+								id: `${id}-comment`,
+								rows: 3,
+								value: comment,
+								onValueChange: setComment,
+								placeholder: tc("chat.feedbackPlaceholder")
+							})] }),
+							/* @__PURE__ */ jsxs("div", {
+								className: messageFeedbackStyles.footer,
+								children: [/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									size: "sm",
+									variant: "ghost",
+									onClick: () => setOpen(false),
+									children: t("common.cancel")
+								}), /* @__PURE__ */ jsx(Button, {
+									type: "submit",
+									size: "sm",
+									children: tc("chat.feedbackSubmit")
+								})]
+							})
+						]
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+//#region src/MessageFeedback/MessageFeedback.doc.ts
+const doc$7 = {
+	name: "MessageFeedback",
+	group: "Actions",
+	status: "beta",
+	description: "Actions for an assistant reply: copy, regenerate and thumbs up / down toggles (aria-pressed). Thumbs down opens a popover with a reason picker and an optional comment. Controlled with `value` + `onFeedback`; pressing the active thumb clears it. A polite status confirms the feedback.",
+	primitive: "Popover",
+	pattern: "toggle button + dialog",
+	keyboard: [
+		["Tab", "Moves through copy, regenerate, good and bad"],
+		["Enter / Space", "Toggles the focused thumb (aria-pressed); a second press clears it"],
+		["Enter / Space (on bad)", "Also opens the details popover; focus moves into it"],
+		["Arrow keys", "Inside the popover: move between reasons"],
+		["Escape", "Closes the popover (the rating stays) and returns focus to the thumb"]
+	],
+	tokens: [
+		"muted-foreground",
+		"primary-text",
+		"destructive-text",
+		"popover",
+		"border",
+		"focus-ring"
+	]
+};
+//#endregion
+//#region src/ModelPicker/modelPicker.variants.ts
+/** Slot classes for ModelPicker. */
+const modelPickerStyles = {
+	trigger: "w-auto max-w-full min-w-0",
+	compactTrigger: "h-7 w-auto max-w-56 min-w-0 gap-1 border-transparent bg-transparent ps-2 pe-1.5 shadow-none hover:bg-secondary/70 hover:border-transparent",
+	triggerValue: "flex min-w-0 items-center gap-1.5",
+	triggerIcon: "shrink-0 text-muted-foreground",
+	triggerName: "truncate font-medium",
+	triggerProvider: "truncate text-muted-foreground",
+	popup: "w-80 max-w-[calc(100vw-2rem)]",
+	item: "items-start",
+	itemBody: "flex min-w-0 flex-col gap-1 py-0.5 whitespace-normal",
+	itemName: "font-medium text-foreground",
+	itemDescription: "text-[11.5px] leading-4 text-muted-foreground",
+	badges: "flex flex-wrap gap-1",
+	reason: "text-[11.5px] leading-4 text-muted-foreground italic"
+};
+//#endregion
+//#region src/ModelPicker/ModelPicker.tsx
+const CAPABILITY_KEY = {
+	vision: "chat.capabilityVision",
+	tools: "chat.capabilityTools",
+	reasoning: "chat.capabilityReasoning",
+	files: "chat.capabilityFiles",
+	web: "chat.capabilityWeb",
+	audio: "chat.capabilityAudio"
+};
+/** Models grouped by provider, keeping first-seen order. */
+function groupModels(models) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const m of models) {
+		const list = groups.get(m.provider);
+		if (list) list.push(m);
+		else groups.set(m.provider, [m]);
+	}
+	return [...groups.entries()].map(([provider, items]) => ({
+		provider,
+		items
+	}));
+}
+/**
+* Model / provider select for a chat: options grouped by provider with capability badges
+* (vision, tools, context size…) and disabled models that say why. `compact` renders a small
+* borderless trigger for the composer toolbar. Built on Select (Base UI).
+*/
+function ModelPicker({ models, value, onValueChange, compact = false, label, placeholder, disabled, hideProvider = false, className, ref }) {
+	const { tc, formatNumber } = useChatI18n();
+	const byId = new Map(models.map((m) => [m.id, m]));
+	const items = models.map((m) => ({
+		value: m.id,
+		label: m.name
+	}));
+	return /* @__PURE__ */ jsxs(Select, {
+		items,
+		value,
+		disabled,
+		onValueChange: (next) => {
+			if (next !== null) onValueChange(next);
+		},
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			ref,
+			size: "sm",
+			"aria-label": label ?? tc("chat.model"),
+			placeholder: placeholder ?? tc("chat.selectModel"),
+			className: cn(compact ? modelPickerStyles.compactTrigger : modelPickerStyles.trigger, className),
+			children: (id) => {
+				const m = id === null ? void 0 : byId.get(id);
+				if (!m) return placeholder ?? tc("chat.selectModel");
+				return /* @__PURE__ */ jsxs("span", {
+					className: modelPickerStyles.triggerValue,
+					children: [
+						/* @__PURE__ */ jsx(Sparkles, {
+							size: 13,
+							"aria-hidden": true,
+							className: modelPickerStyles.triggerIcon
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: modelPickerStyles.triggerName,
+							children: m.name
+						}),
+						!compact && !hideProvider && /* @__PURE__ */ jsxs("span", {
+							className: modelPickerStyles.triggerProvider,
+							children: ["· ", m.provider]
+						})
+					]
+				});
+			}
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			className: modelPickerStyles.popup,
+			align: compact ? "end" : "start",
+			children: groupModels(models).map((g) => /* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectGroupLabel, { children: g.provider }), g.items.map((m) => /* @__PURE__ */ jsx(SelectItem, {
+				value: m.id,
+				disabled: m.disabled,
+				label: m.name,
+				className: modelPickerStyles.item,
+				children: /* @__PURE__ */ jsxs("span", {
+					className: modelPickerStyles.itemBody,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: modelPickerStyles.itemName,
+							children: m.name
+						}),
+						m.description && /* @__PURE__ */ jsx("span", {
+							className: modelPickerStyles.itemDescription,
+							children: m.description
+						}),
+						(m.capabilities?.length || m.contextWindow) && /* @__PURE__ */ jsxs("span", {
+							className: modelPickerStyles.badges,
+							children: [m.capabilities?.map((c) => /* @__PURE__ */ jsx(Badge, {
+								size: "sm",
+								tone: "neutral",
+								children: tc(CAPABILITY_KEY[c])
+							}, c)), m.contextWindow !== void 0 && /* @__PURE__ */ jsx(Badge, {
+								size: "sm",
+								tone: "neutral",
+								variant: "outline",
+								children: tc("chat.contextWindow", { size: formatNumber(m.contextWindow, {
+									notation: "compact",
+									maximumFractionDigits: 1
+								}) })
+							})]
+						}),
+						m.disabled && /* @__PURE__ */ jsx("span", {
+							className: modelPickerStyles.reason,
+							children: m.disabledReason ?? tc("chat.unavailable")
+						})
+					]
+				})
+			}, m.id))] }, g.provider))
+		})]
+	});
+}
+//#endregion
+//#region src/ModelPicker/fixtures.ts
+/** Generic, product-agnostic models for examples and the demo. */
+const DEMO_MODELS = [
+	{
+		id: "swift",
+		name: "Swift",
+		provider: "Hosted",
+		description: "Fast answers for everyday questions.",
+		capabilities: ["tools"],
+		contextWindow: 128e3
+	},
+	{
+		id: "balanced",
+		name: "Balanced",
+		provider: "Hosted",
+		description: "Good default for analysis and writing.",
+		capabilities: [
+			"vision",
+			"tools",
+			"files"
+		],
+		contextWindow: 2e5
+	},
+	{
+		id: "deep",
+		name: "Deep reasoning",
+		provider: "Hosted",
+		description: "Plans multi-step work; slower.",
+		capabilities: [
+			"vision",
+			"tools",
+			"reasoning"
+		],
+		contextWindow: 1e6,
+		disabled: true,
+		disabledReason: "Needs an upgraded plan"
+	},
+	{
+		id: "local-small",
+		name: "Local small",
+		provider: "Self-hosted",
+		description: "Runs in your own cluster.",
+		contextWindow: 32e3
+	},
+	{
+		id: "local-vision",
+		name: "Local vision",
+		provider: "Self-hosted",
+		capabilities: ["vision"],
+		contextWindow: 64e3
+	}
+];
+//#endregion
+//#region src/ModelPicker/ModelPicker.doc.ts
+const doc$8 = {
+	name: "ModelPicker",
+	group: "Forms",
+	status: "beta",
+	description: "Choose the model (and provider) for a conversation: options grouped by provider with a description, capability badges (vision, tools, reasoning, files, web, audio) and the context size; unavailable models stay listed, disabled, with the reason. `compact` gives a small borderless trigger for the ChatComposer toolbar. Controlled (`value` + `onValueChange`).",
+	primitive: "Select",
+	pattern: "select-only combobox",
+	keyboard: [
+		["Enter / Space / ArrowDown", "On the trigger: opens the list"],
+		["ArrowDown / ArrowUp", "Moves between models; a disabled one can be highlighted (its reason is read) but not selected"],
+		["Type a character", "Jumps to the model whose name starts with it"],
+		["Enter", "Selects the highlighted model and closes"],
+		["Escape", "Closes without changing; focus returns to the trigger"]
+	],
+	tokens: [
+		"background",
+		"popover",
+		"border",
+		"secondary",
+		"primary",
+		"primary-text",
+		"muted-foreground",
+		"focus-ring"
+	]
+};
+//#endregion
+//#region src/useChatScroll/useChatScroll.ts
+/** Imperative DOM write kept outside the hook (state values must not be mutated in place). */
+function pinToBottom(el) {
+	el.scrollTop = el.scrollHeight;
+}
+function distanceFromBottom(el) {
+	return el.scrollHeight - el.scrollTop - el.clientHeight;
+}
+/**
+* Auto-scroll for a chat thread that respects the reader: new content keeps the view pinned
+* to the bottom only while the user is already there. Scrolling up unpins it (and
+* `isAtBottom` turns false, so a "scroll to latest" button can show); `scrollToBottom()`
+* pins it again.
+*/
+function useChatScroll({ threshold = 48 } = {}) {
+	const [scrollEl, setScrollEl] = useState(null);
+	const [contentEl, setContentEl] = useState(null);
+	const [isAtBottom, setIsAtBottom] = useState(true);
+	const pinned = useRef(true);
+	const lastTop = useRef(0);
+	useEffect(() => {
+		if (!scrollEl) return;
+		lastTop.current = scrollEl.scrollTop;
+		const onScroll = () => {
+			const top = scrollEl.scrollTop;
+			if (distanceFromBottom(scrollEl) <= threshold) pinned.current = true;
+			else if (top < lastTop.current) pinned.current = false;
+			lastTop.current = top;
+			setIsAtBottom(pinned.current);
+		};
+		scrollEl.addEventListener("scroll", onScroll, { passive: true });
+		return () => scrollEl.removeEventListener("scroll", onScroll);
+	}, [scrollEl, threshold]);
+	useEffect(() => {
+		if (!scrollEl) return;
+		const follow = () => {
+			if (!pinned.current) return;
+			pinToBottom(scrollEl);
+			lastTop.current = scrollEl.scrollTop;
+		};
+		follow();
+		const target = contentEl ?? scrollEl;
+		const mo = new MutationObserver(follow);
+		mo.observe(target, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(follow) : void 0;
+		ro?.observe(target);
+		return () => {
+			mo.disconnect();
+			ro?.disconnect();
+		};
+	}, [scrollEl, contentEl]);
+	return {
+		scrollRef: setScrollEl,
+		contentRef: setContentEl,
+		isAtBottom,
+		scrollToBottom: useCallback((behavior = "smooth") => {
+			if (!scrollEl) return;
+			pinned.current = true;
+			setIsAtBottom(true);
+			const reduce = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			if (typeof scrollEl.scrollTo === "function") scrollEl.scrollTo({
+				top: scrollEl.scrollHeight,
+				behavior: reduce ? "auto" : behavior
+			});
+			else pinToBottom(scrollEl);
+		}, [scrollEl])
+	};
+}
+//#endregion
+//#region src/ChatLayout/chatLayout.variants.ts
+/** Slot classes for ChatLayout (plain strings: this package does not ship tailwind-variants). */
+const chatLayoutStyles = {
+	root: "flex h-full min-h-0 w-full bg-background text-foreground",
+	thread: "flex min-w-0 flex-1 flex-col",
+	header: "shrink-0 border-b border-border",
+	viewport: "relative min-h-0 flex-1",
+	scroller: `h-full overflow-y-auto overscroll-contain ${focusRing} focus-visible:-outline-offset-2`,
+	content: "mx-auto flex w-full max-w-3xl flex-col gap-6 px-4 py-6 sm:px-6",
+	jump: "pointer-events-none absolute inset-x-0 bottom-3 flex justify-center",
+	jumpButton: "pointer-events-auto rounded-full shadow-md",
+	composer: "shrink-0 bg-background px-4 pb-4 pt-2 sm:px-6",
+	composerInner: "mx-auto w-full max-w-3xl",
+	handle: [
+		"group relative w-1.5 shrink-0 cursor-col-resize touch-none bg-transparent",
+		"after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-border",
+		"hover:after:w-0.5 hover:after:bg-primary/60 data-[dragging]:after:w-0.5 data-[dragging]:after:bg-primary",
+		"focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-focus-ring"
+	].join(" "),
+	panel: "flex min-h-0 shrink-0 flex-col overflow-hidden border-s border-border bg-card"
+};
+//#endregion
+//#region src/ChatLayout/ChatLayout.tsx
+const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+const isRtl = (el) => getComputedStyle(el).direction === "rtl";
+/**
+* Full-height chat frame: a scrollable thread with auto-scroll that respects scrolling up,
+* a "jump to latest" button, the composer pinned below, and an optional side panel that the
+* user can resize by dragging or with the arrow keys on its separator.
+*/
+function ChatLayout({ children, composer, header, panel, panelLabel: panelLabelProp, defaultPanelWidth = 380, minPanelWidth = 260, maxPanelWidth = 720, onPanelWidthChange, label: labelProp, scrollButtonLabel: scrollButtonLabelProp, className, contentClassName, ref }) {
+	const { t } = useI18n();
+	const panelLabel = panelLabelProp ?? t("chat.details");
+	const label = labelProp ?? t("chat.conversation");
+	const scrollButtonLabel = scrollButtonLabelProp ?? t("chat.scrollToBottom");
+	const { scrollRef, contentRef, isAtBottom, scrollToBottom } = useChatScroll();
+	const [width, setWidth] = useState(() => clamp(defaultPanelWidth, minPanelWidth, maxPanelWidth));
+	const [dragging, setDragging] = useState(false);
+	const drag = useRef(null);
+	const resize = (next) => {
+		const w = clamp(Math.round(next), minPanelWidth, maxPanelWidth);
+		setWidth(w);
+		onPanelWidthChange?.(w);
+	};
+	const onPointerDown = (e) => {
+		e.currentTarget.setPointerCapture?.(e.pointerId);
+		drag.current = {
+			x: e.clientX,
+			width,
+			sign: isRtl(e.currentTarget) ? -1 : 1
+		};
+		setDragging(true);
+	};
+	const onPointerMove = (e) => {
+		if (!drag.current) return;
+		resize(drag.current.width + (drag.current.x - e.clientX) * drag.current.sign);
+	};
+	const endDrag = () => {
+		drag.current = null;
+		setDragging(false);
+	};
+	const onHandleKey = (e) => {
+		const step = (e.shiftKey ? 64 : 16) * (isRtl(e.currentTarget) ? -1 : 1);
+		const action = {
+			ArrowLeft: () => resize(width + step),
+			ArrowRight: () => resize(width - step),
+			Home: () => resize(maxPanelWidth),
+			End: () => resize(minPanelWidth)
+		}[e.key];
+		if (action) {
+			e.preventDefault();
+			action();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn(chatLayoutStyles.root, className),
+		children: [/* @__PURE__ */ jsxs("section", {
+			"aria-label": label,
+			className: chatLayoutStyles.thread,
+			children: [
+				header && /* @__PURE__ */ jsx("div", {
+					className: chatLayoutStyles.header,
+					children: header
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: chatLayoutStyles.viewport,
+					children: [/* @__PURE__ */ jsx("div", {
+						ref: scrollRef,
+						tabIndex: 0,
+						"aria-label": t("chat.messages"),
+						role: "region",
+						className: chatLayoutStyles.scroller,
+						children: /* @__PURE__ */ jsx("div", {
+							ref: contentRef,
+							className: cn(chatLayoutStyles.content, contentClassName),
+							children
+						})
+					}), !isAtBottom && /* @__PURE__ */ jsx("div", {
+						className: chatLayoutStyles.jump,
+						children: /* @__PURE__ */ jsx(IconButton, {
+							icon: ArrowDown,
+							label: scrollButtonLabel,
+							variant: "secondary",
+							size: "sm",
+							className: chatLayoutStyles.jumpButton,
+							onClick: () => scrollToBottom()
+						})
+					})]
+				}),
+				composer && /* @__PURE__ */ jsx("div", {
+					className: chatLayoutStyles.composer,
+					children: /* @__PURE__ */ jsx("div", {
+						className: chatLayoutStyles.composerInner,
+						children: composer
+					})
+				})
+			]
+		}), panel && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-label": t("chat.resizePanel", { panel: panelLabel.toLowerCase() }),
+			"aria-valuenow": width,
+			"aria-valuemin": minPanelWidth,
+			"aria-valuemax": maxPanelWidth,
+			tabIndex: 0,
+			"data-dragging": dragging || void 0,
+			className: chatLayoutStyles.handle,
+			onPointerDown,
+			onPointerMove,
+			onPointerUp: endDrag,
+			onPointerCancel: endDrag,
+			onKeyDown: onHandleKey
+		}), /* @__PURE__ */ jsx("aside", {
+			"aria-label": panelLabel,
+			className: chatLayoutStyles.panel,
+			style: { width },
+			children: panel
+		})] })]
+	});
+}
+//#endregion
+//#region src/ChatLayout/ChatLayout.doc.ts
+const doc$3 = {
+	name: "ChatLayout",
+	group: "Layout",
+	status: "beta",
+	description: "Full-height chat frame: scrollable thread with auto-scroll that respects scrolling up, a jump-to-latest button, a composer pinned below and an optional resizable side panel (artifact or details).",
+	pattern: "window splitter",
+	keyboard: [
+		["Tab", "Moves through the thread, the composer, the resize handle and the panel"],
+		["ArrowLeft", "On the resize handle: widens the side panel (Shift for bigger steps)"],
+		["ArrowRight", "On the resize handle: narrows the side panel"],
+		["Home", "On the resize handle: panel to its maximum width"],
+		["End", "On the resize handle: panel to its minimum width"]
+	],
+	tokens: [
+		"background",
+		"foreground",
+		"card",
+		"border",
+		"primary",
+		"focus-ring"
+	]
+};
+//#endregion
+//#region src/Citation/citation.variants.ts
+/** Slot classes for Citation and CitationList. */
+const citationStyles = {
+	trigger: [
+		"mx-0.5 inline-flex h-[18px] min-w-[18px] -translate-y-px cursor-pointer items-center justify-center rounded-md px-1",
+		"bg-primary/14 align-baseline font-mono text-[10.5px] font-semibold leading-none text-primary-chip-text",
+		`transition-colors hover:bg-primary/24 data-[popup-open]:bg-primary/24 motion-reduce:transition-none ${focusRing}`
+	].join(" "),
+	popup: "w-80",
+	head: "flex items-center gap-2 text-[11.5px] text-muted-foreground",
+	index: "grid h-[18px] min-w-[18px] place-items-center rounded-md bg-secondary px-1 font-mono text-[10.5px] font-semibold text-foreground",
+	title: "mt-1.5 text-[13px] font-semibold leading-snug text-foreground",
+	snippet: "mt-1 line-clamp-4 text-[12.5px] leading-relaxed text-muted-foreground",
+	open: `mt-2.5 inline-flex items-center gap-1 rounded-sm text-[12.5px] font-medium text-primary-text hover:underline ${focusRing}`,
+	list: "flex flex-col gap-1.5",
+	heading: "mb-1 text-[11.5px] font-semibold tracking-wide text-muted-foreground uppercase",
+	item: "flex gap-2.5 rounded-lg border border-border bg-card px-3 py-2.5",
+	itemBody: "min-w-0 flex-1",
+	itemTitle: `rounded-sm text-[13px] font-medium text-foreground hover:text-primary-text hover:underline ${focusRing}`,
+	itemHost: "mt-0.5 truncate font-mono text-[11px] text-muted-foreground"
+};
+//#endregion
+//#region src/Citation/Citation.tsx
+/** Host name of a URL ("docs.example.com"), or undefined if it cannot be parsed. */
+function sourceHost(url) {
+	if (!url) return void 0;
+	try {
+		return new URL(url).host.replace(/^www\./, "");
+	} catch {
+		return;
+	}
+}
+/** Only http(s) sources become links. */
+function safeSourceUrl(url) {
+	return url && /^https?:\/\//i.test(url) ? url : void 0;
+}
+/**
+* Inline numbered reference ([1]). Hovering, focusing + Enter or clicking opens a preview
+* card with the title, host, snippet and a link to the source.
+*/
+function Citation({ index, source, delay = 200, className }) {
+	const { t } = useI18n();
+	const host = source.publisher ?? sourceHost(source.url);
+	const href = safeSourceUrl(source.url);
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		openOnHover: true,
+		delay,
+		"aria-label": t("chat.source", {
+			index,
+			title: source.title
+		}),
+		className: cn(citationStyles.trigger, className),
+		children: index
+	}), /* @__PURE__ */ jsxs(PopoverContent, {
+		side: "top",
+		align: "start",
+		className: citationStyles.popup,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: citationStyles.head,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: citationStyles.index,
+						children: index
+					}),
+					/* @__PURE__ */ jsx(Globe, {
+						size: 12,
+						"aria-hidden": true
+					}),
+					host && /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: host
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(PopoverTitle, {
+				className: citationStyles.title,
+				children: source.title
+			}),
+			source.snippet && /* @__PURE__ */ jsx(PopoverDescription, {
+				className: citationStyles.snippet,
+				children: source.snippet
+			}),
+			href && /* @__PURE__ */ jsxs("a", {
+				href,
+				target: "_blank",
+				rel: "noopener noreferrer nofollow",
+				className: citationStyles.open,
+				children: [
+					t("chat.openSource"),
+					/* @__PURE__ */ jsx(ExternalLink, {
+						size: 12,
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						children: [" ", t("link.external")]
+					})
+				]
+			})
+		]
+	})] });
+}
+/** Numbered list of the sources cited in a reply, matching the inline markers. */
+function CitationList({ sources, heading: headingProp, className }) {
+	const { t } = useI18n();
+	const heading = headingProp ?? t("chat.sources");
+	const headingId = useId();
+	if (sources.length === 0) return null;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": headingId,
+		className,
+		children: [/* @__PURE__ */ jsx("h3", {
+			id: headingId,
+			className: citationStyles.heading,
+			children: heading
+		}), /* @__PURE__ */ jsx("ol", {
+			className: citationStyles.list,
+			children: sources.map((src, i) => {
+				const href = safeSourceUrl(src.url);
+				const host = src.publisher ?? sourceHost(src.url);
+				return /* @__PURE__ */ jsxs("li", {
+					className: citationStyles.item,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: citationStyles.index,
+						"aria-hidden": true,
+						children: i + 1
+					}), /* @__PURE__ */ jsxs("div", {
+						className: citationStyles.itemBody,
+						children: [href ? /* @__PURE__ */ jsxs("a", {
+							href,
+							target: "_blank",
+							rel: "noopener noreferrer nofollow",
+							className: citationStyles.itemTitle,
+							children: [src.title, /* @__PURE__ */ jsxs("span", {
+								className: "sr-only",
+								children: [" ", t("link.external")]
+							})]
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "text-[13px] font-medium text-foreground",
+							children: src.title
+						}), host && /* @__PURE__ */ jsx("div", {
+							className: citationStyles.itemHost,
+							children: host
+						})]
+					})]
+				}, `${i}-${src.title}`);
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/Citation/Citation.doc.ts
+const doc$5 = {
+	name: "Citation",
+	group: "Display",
+	status: "beta",
+	description: "Numbered source references for grounded answers: an inline [n] marker that previews the source (title, host, snippet, link) on hover, focus + Enter or click, and CitationList, the numbered list of sources under a reply. Only http(s) URLs become links.",
+	primitive: "@base-ui/react/popover",
+	pattern: "dialog (non-modal)",
+	keyboard: [
+		["Enter", "On a marker: opens the source preview"],
+		["Space", "On a marker: opens the source preview"],
+		["Escape", "Closes the preview and returns focus to the marker"],
+		["Tab", "Moves to the \"Open source\" link inside an open preview"]
+	],
+	tokens: [
+		"primary",
+		"primary-text",
+		"popover",
+		"secondary",
+		"card",
+		"border",
+		"muted-foreground",
+		"focus-ring"
+	]
+};
+//#endregion
+//#region src/Markdown/markdown.variants.ts
+/**
+* Blinking caret drawn after the last block while text streams in. Pure CSS (an ::after on the
+* last child), so it follows paragraphs, list items and code without extra DOM.
+*/
+const streamingCaretClass = [
+	"[&>:last-child]:after:ms-0.5 [&>:last-child]:after:inline-block [&>:last-child]:after:h-[1.05em] [&>:last-child]:after:w-[2px]",
+	"[&>:last-child]:after:translate-y-[2px] [&>:last-child]:after:bg-primary [&>:last-child]:after:content-['']",
+	"[&>:last-child]:after:animate-pulse motion-reduce:[&>:last-child]:after:animate-none"
+].join(" ");
+/** Element classes for Markdown (token colours only). */
+const markdownStyles = {
+	root: "min-w-0 text-[14px] leading-[1.7] text-foreground [overflow-wrap:anywhere] [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+	h1: "mt-5 mb-2 text-[18px] font-semibold tracking-tight",
+	h2: "mt-5 mb-2 text-[16px] font-semibold tracking-tight",
+	h3: "mt-4 mb-1.5 text-[14.5px] font-semibold",
+	h4: "mt-4 mb-1.5 text-[13.5px] font-semibold text-muted-foreground",
+	p: "my-2.5",
+	ul: "my-2.5 list-disc space-y-1 ps-5 marker:text-muted-foreground",
+	ol: "my-2.5 list-decimal space-y-1 ps-5 marker:text-muted-foreground",
+	li: "ps-1 [&>ul]:my-1 [&>ol]:my-1 [&.task-list-item]:list-none [&.task-list-item]:-ms-5",
+	blockquote: "my-3 border-s-2 border-primary/50 ps-3.5 text-muted-foreground",
+	hr: "my-5 border-border",
+	link: `rounded-sm font-medium text-primary-text underline decoration-primary/40 underline-offset-2 hover:decoration-primary ${focusRing}`,
+	linkIcon: "ms-0.5 inline-block align-[-1px]",
+	inlineCode: "rounded-md border border-border bg-secondary/60 px-1.5 py-px font-mono text-[12.5px]",
+	tableWrap: "my-3 overflow-x-auto rounded-lg border border-border",
+	table: "w-full border-collapse text-start text-[13px]",
+	th: "border-b border-border bg-secondary/50 px-3 py-2 font-semibold",
+	td: "border-b border-border px-3 py-2 align-top [tr:last-child_&]:border-b-0",
+	checkbox: "me-1.5 align-[-2px] accent-primary",
+	image: "text-muted-foreground italic",
+	code: {
+		root: "my-3 overflow-hidden rounded-lg border border-border bg-secondary/40",
+		header: "flex h-9 items-center justify-between border-b border-border bg-secondary/50 ps-3 pe-1.5",
+		lang: "font-mono text-[11px] tracking-wide text-muted-foreground uppercase",
+		pre: "overflow-x-auto p-3 font-mono text-[12.5px] leading-6"
+	}
+};
+//#endregion
+//#region src/Markdown/CodeBlock.tsx
+const s$1 = markdownStyles.code;
+/** Fenced code with a language label and a copy button. */
+function CodeBlock({ code, language, className }) {
+	const { copied, copy } = useCopy();
+	const { t } = useI18n();
+	return /* @__PURE__ */ jsxs("div", {
+		className: className ? `${s$1.root} ${className}` : s$1.root,
+		"data-language": language,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: s$1.header,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: s$1.lang,
+				children: language || "text"
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				icon: copied ? Check : Copy,
+				"aria-label": copied ? t("chat.copiedCode") : t("chat.copyCode"),
+				className: "h-7 px-2",
+				onClick: () => void copy(code),
+				children: copied ? t("common.copied") : t("common.copy")
+			})]
+		}), /* @__PURE__ */ jsx("pre", {
+			className: s$1.pre,
+			children: /* @__PURE__ */ jsx("code", { children: code })
+		})]
+	});
+}
+//#endregion
+//#region src/Markdown/Markdown.tsx
+const SAFE_PROTOCOL = /^(https?|mailto|tel):/i;
+/**
+* URL policy: relative URLs, anchors and http(s)/mailto/tel only. Everything else
+* (javascript:, data:, vbscript:, …) is dropped, on top of react-markdown's own transform.
+*/
+function safeUrl(url) {
+	const cleaned = defaultUrlTransform(url);
+	if (!cleaned) return "";
+	const compact = Array.from(cleaned).filter((c) => c.charCodeAt(0) > 32).join("");
+	if (/^[a-z][a-z0-9+.-]*:/i.test(compact) && !SAFE_PROTOCOL.test(compact)) return "";
+	return cleaned;
+}
+/**
+* Makes partial streamed markdown render sanely: a fence that has opened but not closed is
+* closed at the end, so the tail renders as code instead of flashing as paragraphs.
+*/
+function repairStreamingMarkdown(text) {
+	const fences = text.match(/^ {0,3}(`{3,}|~{3,})/gm) ?? [];
+	if (fences.length % 2 === 0) return text;
+	const opener = (fences[fences.length - 1] ?? "```").trim();
+	return `${text}${text.endsWith("\n") ? "" : "\n"}${opener}`;
+}
+const isExternal = (href) => /^https?:\/\//i.test(href);
+/** Drops react-markdown's `node` (hast) prop before spreading onto a DOM element. */
+/** Screen-reader note on links that open a new tab. */
+function NewTabHint() {
+	const { t } = useI18n();
+	return /* @__PURE__ */ jsxs("span", {
+		className: "sr-only",
+		children: [" ", t("link.external")]
+	});
+}
+/** Remote images can track readers and break layout mid-stream: show them as links. */
+function ImageLink({ href, alt }) {
+	const { t } = useI18n();
+	const text = t("chat.image", { alt: alt || t("chat.untitled") });
+	return href ? /* @__PURE__ */ jsxs("a", {
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer nofollow",
+		className: markdownStyles.link,
+		children: [text, /* @__PURE__ */ jsx(NewTabHint, {})]
+	}) : /* @__PURE__ */ jsx("span", {
+		className: markdownStyles.image,
+		children: text
+	});
+}
+function TaskCheckbox({ checked }) {
+	const { t } = useI18n();
+	return /* @__PURE__ */ jsx("input", {
+		type: "checkbox",
+		checked,
+		readOnly: true,
+		disabled: true,
+		"aria-label": checked ? t("chat.taskDone") : t("chat.taskNotDone"),
+		className: markdownStyles.checkbox
+	});
+}
+function omitNode(props) {
+	const { node, ...rest } = props;
+	return rest;
+}
+const components = {
+	h1: (p) => /* @__PURE__ */ jsx("h1", {
+		...omitNode(p),
+		className: markdownStyles.h1
+	}),
+	h2: (p) => /* @__PURE__ */ jsx("h2", {
+		...omitNode(p),
+		className: markdownStyles.h2
+	}),
+	h3: (p) => /* @__PURE__ */ jsx("h3", {
+		...omitNode(p),
+		className: markdownStyles.h3
+	}),
+	h4: (p) => /* @__PURE__ */ jsx("h4", {
+		...omitNode(p),
+		className: markdownStyles.h4
+	}),
+	h5: (p) => /* @__PURE__ */ jsx("h4", {
+		...omitNode(p),
+		className: markdownStyles.h4
+	}),
+	h6: (p) => /* @__PURE__ */ jsx("h4", {
+		...omitNode(p),
+		className: markdownStyles.h4
+	}),
+	p: (p) => /* @__PURE__ */ jsx("p", {
+		...omitNode(p),
+		className: markdownStyles.p
+	}),
+	ul: (p) => /* @__PURE__ */ jsx("ul", {
+		...omitNode(p),
+		className: cn(markdownStyles.ul, p.className === "contains-task-list" && "ps-1")
+	}),
+	ol: (p) => /* @__PURE__ */ jsx("ol", {
+		...omitNode(p),
+		className: markdownStyles.ol
+	}),
+	li: (p) => /* @__PURE__ */ jsx("li", {
+		...omitNode(p),
+		className: cn(markdownStyles.li, p.className)
+	}),
+	blockquote: (p) => /* @__PURE__ */ jsx("blockquote", {
+		...omitNode(p),
+		className: markdownStyles.blockquote
+	}),
+	hr: () => /* @__PURE__ */ jsx("hr", { className: markdownStyles.hr }),
+	table: (p) => /* @__PURE__ */ jsx("div", {
+		className: markdownStyles.tableWrap,
+		children: /* @__PURE__ */ jsx("table", {
+			...omitNode(p),
+			className: markdownStyles.table
+		})
+	}),
+	th: (p) => /* @__PURE__ */ jsx("th", {
+		...omitNode(p),
+		className: markdownStyles.th
+	}),
+	td: (p) => /* @__PURE__ */ jsx("td", {
+		...omitNode(p),
+		className: markdownStyles.td
+	}),
+	a: (props) => {
+		const { href, children, ...p } = omitNode(props);
+		if (!href) return /* @__PURE__ */ jsx("span", { children });
+		if (!isExternal(href)) return /* @__PURE__ */ jsx("a", {
+			href,
+			className: markdownStyles.link,
+			...p,
+			children
+		});
+		return /* @__PURE__ */ jsxs("a", {
+			href,
+			target: "_blank",
+			rel: "noopener noreferrer nofollow",
+			className: markdownStyles.link,
+			...p,
+			children: [
+				children,
+				/* @__PURE__ */ jsx(ExternalLink, {
+					size: 12,
+					"aria-hidden": true,
+					className: markdownStyles.linkIcon
+				}),
+				/* @__PURE__ */ jsx(NewTabHint, {})
+			]
+		});
+	},
+	img: ({ src, alt }) => /* @__PURE__ */ jsx(ImageLink, {
+		href: typeof src === "string" ? src : "",
+		alt
+	}),
+	input: ({ checked, type }) => type === "checkbox" ? /* @__PURE__ */ jsx(TaskCheckbox, { checked: !!checked }) : null,
+	code: ({ className, children }) => /* @__PURE__ */ jsx("code", {
+		className: cn(markdownStyles.inlineCode, className),
+		children
+	}),
+	pre: ({ children }) => {
+		const child = Children.toArray(children)[0];
+		if (!isValidElement(child)) return /* @__PURE__ */ jsx("pre", {
+			className: markdownStyles.code.pre,
+			children
+		});
+		const language = /language-([\w+#.-]+)/.exec(child.props.className ?? "")?.[1];
+		const code = String(Children.toArray(child.props.children).join("")).replace(/\n$/, "");
+		return /* @__PURE__ */ jsx(CodeBlock, {
+			code,
+			language
+		});
+	}
+};
+const remarkPlugins = [remarkGfm];
+/**
+* Safe markdown for model output: raw HTML is never rendered (skipped, not parsed), links are
+* restricted to http(s)/mailto/tel/relative, external links open in a new tab with a marker,
+* and fenced code gets a copy button. Partial input from a stream is tolerated.
+*/
+const Markdown = memo(function Markdown({ children, streaming = false, className }) {
+	const source = streaming ? repairStreamingMarkdown(children) : children;
+	return /* @__PURE__ */ jsx("div", {
+		"data-streaming": streaming || void 0,
+		className: cn(markdownStyles.root, streaming && streamingCaretClass, className),
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			remarkPlugins,
+			components,
+			skipHtml: true,
+			urlTransform: safeUrl,
+			children: source
+		})
+	});
+});
+//#endregion
+//#region src/Markdown/Markdown.doc.ts
+const doc$6 = {
+	name: "Markdown",
+	group: "Display",
+	status: "beta",
+	description: "Safe, token-styled markdown for model output (react-markdown + remark-gfm): headings, lists, task lists, tables, blockquotes, inline and fenced code with a copy button, links with an external marker. Raw HTML is never rendered, unsafe URL schemes are stripped, and partial streamed input (unclosed fences) renders cleanly.",
+	keyboard: [["Tab", "Moves through links and code-block copy buttons in reading order"], ["Enter", "Follows a link or copies the focused code block"]],
+	tokens: [
+		"foreground",
+		"muted-foreground",
+		"primary-text",
+		"secondary",
+		"border",
+		"focus-ring"
+	]
+};
+//#endregion
+//#region src/SuggestionChips/suggestionChips.variants.ts
+/** Slot classes for SuggestionChips. */
+const suggestionChipsStyles = {
+	root: "w-full",
+	heading: "mb-2.5 text-[12px] font-semibold tracking-wide text-muted-foreground uppercase",
+	grid: "grid gap-2 sm:grid-cols-2",
+	row: "flex flex-wrap gap-2",
+	card: [
+		"group flex w-full cursor-pointer items-start gap-2.5 rounded-lg border border-border bg-card px-3.5 py-3 text-start shadow-sm",
+		"transition-colors hover:border-primary/40 hover:bg-secondary/40 motion-reduce:transition-none",
+		"disabled:pointer-events-none disabled:opacity-50",
+		focusRing
+	].join(" "),
+	chip: [
+		"inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-full border border-border bg-card px-3 text-[12.5px] font-medium text-foreground",
+		"transition-colors hover:border-primary/40 hover:bg-secondary/40 motion-reduce:transition-none",
+		"disabled:pointer-events-none disabled:opacity-50",
+		focusRing
+	].join(" "),
+	icon: "mt-0.5 shrink-0 text-muted-foreground group-hover:text-primary-text",
+	label: "block text-[13px] font-medium text-foreground",
+	description: "mt-0.5 block text-[12px] leading-5 text-muted-foreground"
+};
+//#endregion
+//#region src/SuggestionChips/SuggestionChips.tsx
+const normalize = (x) => typeof x === "string" ? { label: x } : x;
+/** Prompt suggestions for an empty conversation (cards) or as follow-ups after a reply (chips). */
+function SuggestionChips({ suggestions, onSelect, layout = "cards", heading, label: labelProp, disabled = false, className }) {
+	const { t } = useI18n();
+	const label = labelProp ?? t("chat.suggestions");
+	const headingId = useId();
+	const items = suggestions.map(normalize);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-labelledby": heading ? headingId : void 0,
+		"aria-label": heading ? void 0 : label,
+		className: cn(suggestionChipsStyles.root, className),
+		children: [heading && /* @__PURE__ */ jsx("div", {
+			id: headingId,
+			className: suggestionChipsStyles.heading,
+			children: heading
+		}), /* @__PURE__ */ jsx("div", {
+			className: layout === "cards" ? suggestionChipsStyles.grid : suggestionChipsStyles.row,
+			children: items.map((item) => {
+				const Icon = item.icon;
+				const prompt = item.prompt ?? item.label;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					disabled,
+					className: layout === "cards" ? suggestionChipsStyles.card : suggestionChipsStyles.chip,
+					onClick: () => onSelect(prompt, item),
+					children: [Icon && /* @__PURE__ */ jsx(Icon, {
+						size: layout === "cards" ? 16 : 14,
+						"aria-hidden": true,
+						className: layout === "cards" ? suggestionChipsStyles.icon : "shrink-0 text-muted-foreground"
+					}), layout === "cards" ? /* @__PURE__ */ jsxs("span", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: suggestionChipsStyles.label,
+							children: item.label
+						}), item.description && /* @__PURE__ */ jsx("span", {
+							className: suggestionChipsStyles.description,
+							children: item.description
+						})]
+					}) : item.label]
+				}, item.id ?? item.label);
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/SuggestionChips/SuggestionChips.doc.ts
+const doc$9 = {
+	name: "SuggestionChips",
+	group: "Actions",
+	status: "beta",
+	description: "Prompt suggestions: a two-column grid of cards with descriptions for an empty conversation, or a row of pills for follow-ups after a reply. Choosing one calls onSelect with its prompt.",
+	pattern: "button group",
+	keyboard: [
+		["Tab", "Moves between suggestions"],
+		["Enter", "Sends the focused suggestion"],
+		["Space", "Sends the focused suggestion"]
+	],
+	tokens: [
+		"card",
+		"border",
+		"primary",
+		"primary-text",
+		"secondary",
+		"muted-foreground",
+		"focus-ring"
+	]
+};
+//#endregion
+//#region src/ToolCallCard/toolCallCard.variants.ts
+/** Slot classes for ToolCallCard and JsonView. */
+const toolCallCardStyles = {
+	root: "w-full overflow-hidden rounded-lg border border-border bg-card text-[13px]",
+	trigger: ["flex h-auto w-full min-w-0 justify-start gap-2.5 rounded-none px-3 py-2.5 text-start hover:bg-secondary/50", "focus-visible:-outline-offset-2"].join(" "),
+	icon: "grid size-6 shrink-0 place-items-center rounded-md bg-secondary text-muted-foreground",
+	iconFailed: "bg-destructive/15 text-destructive-chip-text",
+	label: "flex min-w-0 flex-1 items-baseline gap-1.5",
+	verb: "shrink-0 text-muted-foreground",
+	name: "truncate font-mono text-[12.5px] font-semibold text-foreground",
+	meta: "flex shrink-0 items-center gap-2",
+	duration: "font-mono text-[11px] text-muted-foreground tabular-nums",
+	body: "flex flex-col gap-2 border-t border-border px-3 pb-3 pt-1",
+	error: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[12.5px] text-destructive-chip-text",
+	json: {
+		trigger: "mx-0 h-7 px-1 text-[11.5px] font-semibold tracking-wide text-muted-foreground uppercase",
+		content: "pt-1",
+		pre: "max-h-64 overflow-auto rounded-md border border-border bg-secondary/40 p-2.5 font-mono text-[12px] leading-5 text-foreground"
+	}
+};
+//#endregion
+//#region src/ToolCallCard/JsonView.tsx
+const s = toolCallCardStyles.json;
+/** A small collapsible, scrollable JSON block. */
+function JsonView({ label, value, defaultOpen = true }) {
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		defaultOpen,
+		children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+			className: s.trigger,
+			children: label
+		}), /* @__PURE__ */ jsx(CollapsiblePanel, {
+			className: s.content,
+			children: /* @__PURE__ */ jsx("pre", {
+				tabIndex: 0,
+				"aria-label": label,
+				className: s.pre,
+				children: /* @__PURE__ */ jsx("code", { children: toJson(value) })
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/ToolCallCard/ToolCallCard.tsx
+const VERB = {
+	running: "toolCall.calling",
+	succeeded: "toolCall.called",
+	failed: "toolCall.failed"
+};
+/**
+* A tool invocation inside an assistant turn: name, status, duration, and a collapsible body
+* with the arguments and the result (or error) as small JSON views.
+*/
+function ToolCallCard({ name, status, durationMs, args, result, error, defaultOpen, open, onOpenChange, className, ref }) {
+	const { t } = useI18n();
+	const failed = status === "failed";
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		ref,
+		defaultOpen: defaultOpen ?? failed,
+		open,
+		onOpenChange: onOpenChange ? (o) => onOpenChange(o) : void 0,
+		"data-status": status,
+		className: cn(toolCallCardStyles.root, className),
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: toolCallCardStyles.trigger,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: cn(toolCallCardStyles.icon, failed && toolCallCardStyles.iconFailed),
+					children: status === "running" ? /* @__PURE__ */ jsx(Spinner, { size: 13 }) : failed ? /* @__PURE__ */ jsx(CircleAlert, {
+						size: 13,
+						"aria-hidden": true
+					}) : /* @__PURE__ */ jsx(Wrench, {
+						size: 13,
+						"aria-hidden": true
+					})
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: toolCallCardStyles.label,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: toolCallCardStyles.verb,
+						children: t(VERB[status])
+					}), /* @__PURE__ */ jsx("span", {
+						className: toolCallCardStyles.name,
+						children: name
+					})]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: toolCallCardStyles.meta,
+					children: [durationMs !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: toolCallCardStyles.duration,
+						children: formatDuration(durationMs)
+					}), /* @__PURE__ */ jsx(StatusTag, {
+						status,
+						size: "sm"
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsx(CollapsiblePanel, {
+			className: "pt-0",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: toolCallCardStyles.body,
+				children: [
+					args !== void 0 && /* @__PURE__ */ jsx(JsonView, {
+						label: t("toolCall.arguments"),
+						value: args
+					}),
+					failed && error && /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: toolCallCardStyles.error,
+						children: error
+					}),
+					result !== void 0 && /* @__PURE__ */ jsx(JsonView, {
+						label: t("toolCall.result"),
+						value: result
+					}),
+					status === "running" && result === void 0 && /* @__PURE__ */ jsx("p", {
+						className: "text-[12.5px] text-muted-foreground",
+						children: t("toolCall.waiting")
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/ToolCallCard/ToolCallCard.doc.ts
+const doc$10 = {
+	name: "ToolCallCard",
+	group: "Display",
+	status: "beta",
+	description: "A tool invocation in an assistant turn: name, status (running, succeeded, failed), duration and a collapsible body with the arguments and the result or error as small collapsible JSON views. Failed calls open by default.",
+	primitive: "@base-ui/react/collapsible",
+	pattern: "disclosure",
+	keyboard: [
+		["Enter", "Expands or collapses the card (or a JSON section)"],
+		["Space", "Expands or collapses the card (or a JSON section)"],
+		["Tab", "Moves to the JSON sections and their scrollable code"]
+	],
+	tokens: [
+		"card",
+		"border",
+		"secondary",
+		"muted-foreground",
+		"success-text",
+		"destructive",
+		"destructive-text",
+		"focus-ring"
+	]
+};
+//#endregion
+//#region src/ChatDemo/demoScript.ts
+/** Fixtures for ChatDemo: generic workspace data, no product names. */
+const DEMO_SUGGESTIONS = [
+	{
+		label: "Summarise deployments",
+		description: "What shipped this week across projects"
+	},
+	{
+		label: "Find unpaid invoices",
+		description: "Invoices still open from last month"
+	},
+	{
+		label: "Review member access",
+		description: "Who has admin rights"
+	},
+	{
+		label: "Explain a failed build",
+		description: "Likely cause and a fix"
+	}
+];
+const DEMO_SOURCES = [{
+	title: "Deployment history · web-app",
+	url: "https://app.example.com/projects/web-app/deployments",
+	snippet: "12 deployments in the last 7 days, 1 rolled back."
+}, {
+	title: "Rollback guide",
+	url: "https://docs.example.com/deployments/rollback",
+	snippet: "Roll back from the Deployments page or with the CLI."
+}];
+const DEMO_TOOL = {
+	name: "list_deployments",
+	args: {
+		project: "web-app",
+		since: "7d"
+	},
+	result: {
+		count: 12,
+		succeeded: 11,
+		rolledBack: 1,
+		latest: "v2.14.0"
+	},
+	durationMs: 640
+};
+const DEMO_REPLY = `Here is the summary for **web-app** over the last 7 days:
+
+| Status | Count |
+| --- | --- |
+| Succeeded | 11 |
+| Rolled back | 1 |
+
+The rollback was \`v2.13.2\`: a health check failed in one region, so traffic went back to the previous build.
+
+To pin a release from the CLI:
+
+\`\`\`bash
+deploy pin --project web-app --version v2.14.0
+\`\`\`
+
+See the [rollback guide](https://docs.example.com/deployments/rollback) for the full steps.`;
+/** Splits text into small chunks to imitate token streaming. */
+function chunk(text, size = 6) {
+	const out = [];
+	for (let i = 0; i < text.length; i += size) out.push(text.slice(i, i + size));
+	return out;
+}
+//#endregion
+//#region src/ChatDemo/ChatDemo.tsx
+/**
+* End-to-end example: suggestions, a user turn with attachments, a tool call, a streamed
+* markdown reply with sources, Stop, Regenerate and feedback, and a compact model picker. Streaming is mocked with timers that are cleared on
+* Stop and on unmount.
+*/
+function ChatDemo({ withPanel = true, tickMs = 30, className }) {
+	const [messages, setMessages] = useState([]);
+	const [streaming, setStreaming] = useState(false);
+	const [model, setModel] = useState("balanced");
+	const [files, setFiles] = useState([]);
+	const nextId = useRef(1);
+	const timers = useRef([]);
+	const objectUrls = useRef([]);
+	const clearTimers = () => {
+		timers.current.forEach((t) => clearTimeout(t));
+		timers.current = [];
+	};
+	useEffect(() => () => {
+		clearTimers();
+		objectUrls.current.forEach((u) => URL.revokeObjectURL(u));
+	}, []);
+	const attach = (picked) => {
+		const added = picked.map((f) => {
+			let previewUrl;
+			if (f.type.startsWith("image/") && typeof URL.createObjectURL === "function") {
+				previewUrl = URL.createObjectURL(f);
+				objectUrls.current.push(previewUrl);
+			}
+			return {
+				id: `file-${nextId.current++}`,
+				name: f.name,
+				size: f.size,
+				type: f.type,
+				previewUrl
+			};
+		});
+		setFiles((all) => [...all, ...added]);
+	};
+	const patch = (id, fn) => setMessages((ms) => ms.map((m) => m.id === id ? fn(m) : m));
+	const respond = () => {
+		clearTimers();
+		const toolId = nextId.current++;
+		const replyId = nextId.current++;
+		const now = /* @__PURE__ */ new Date();
+		setStreaming(true);
+		setMessages((ms) => [
+			...ms,
+			{
+				id: toolId,
+				role: "tool",
+				text: "",
+				time: now,
+				tool: { status: "running" }
+			},
+			{
+				id: replyId,
+				role: "assistant",
+				text: "",
+				time: now,
+				streaming: true
+			}
+		]);
+		const pieces = chunk(DEMO_REPLY);
+		const startAt = DEMO_TOOL.durationMs;
+		timers.current.push(setTimeout(() => patch(toolId, (m) => ({
+			...m,
+			tool: {
+				status: "succeeded",
+				durationMs: DEMO_TOOL.durationMs
+			}
+		})), startAt));
+		pieces.forEach((piece, i) => {
+			timers.current.push(setTimeout(() => patch(replyId, (m) => ({
+				...m,
+				text: m.text + piece
+			})), startAt + (i + 1) * tickMs));
+		});
+		timers.current.push(setTimeout(() => {
+			patch(replyId, (m) => ({
+				...m,
+				streaming: false,
+				sources: true
+			}));
+			setStreaming(false);
+		}, startAt + (pieces.length + 1) * tickMs));
+	};
+	const send = (text, attachments = []) => {
+		setMessages((ms) => [...ms, {
+			id: nextId.current++,
+			role: "user",
+			text,
+			time: /* @__PURE__ */ new Date(),
+			attachments
+		}]);
+		setFiles([]);
+		respond();
+	};
+	const stop = () => {
+		clearTimers();
+		setMessages((ms) => ms.map((m) => m.streaming ? {
+			...m,
+			streaming: false
+		} : m.tool?.status === "running" ? {
+			...m,
+			tool: {
+				status: "failed",
+				durationMs: 0
+			}
+		} : m));
+		setStreaming(false);
+	};
+	const retry = (id) => {
+		setMessages((ms) => {
+			const at = ms.findIndex((m) => m.id === id);
+			const cut = at > 0 && ms[at - 1]?.role === "tool" ? at - 1 : at;
+			return ms.slice(0, cut);
+		});
+		respond();
+	};
+	const lastReply = [...messages].reverse().find((m) => m.role === "assistant" && !m.streaming)?.text;
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
+		className: cn("h-[640px] overflow-hidden rounded-xl border border-border", className),
+		children: /* @__PURE__ */ jsxs(ChatLayout, {
+			header: /* @__PURE__ */ jsx("div", {
+				className: "px-4 py-3 text-[13px] font-semibold text-foreground",
+				children: "New conversation"
+			}),
+			panel: withPanel ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4 p-4 text-[13px]",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+					className: "font-semibold text-foreground",
+					children: "Details"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-muted-foreground",
+					children: "Workspace assistant with read access to projects, deployments and invoices."
+				})] }), /* @__PURE__ */ jsx(CitationList, {
+					sources: DEMO_SOURCES,
+					heading: "Context sources"
+				})]
+			}) : void 0,
+			composer: /* @__PURE__ */ jsx(ChatComposer, {
+				onSubmit: send,
+				streaming,
+				onStop: stop,
+				maxLength: 4e3,
+				attachments: files,
+				onAttach: attach,
+				onRemoveAttachment: (id) => setFiles((all) => all.filter((f) => f.id !== id)),
+				accept: ".pdf,.csv,.md,.txt,.json,image/*",
+				maxSize: 10485760,
+				maxFiles: 5,
+				modelPicker: /* @__PURE__ */ jsx(ModelPicker, {
+					compact: true,
+					models: DEMO_MODELS,
+					value: model,
+					onValueChange: setModel
+				})
+			}),
+			children: [
+				messages.length === 0 && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-5 pt-10",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-center text-[20px] font-semibold tracking-tight text-foreground",
+						children: "How can I help?"
+					}), /* @__PURE__ */ jsx(SuggestionChips, {
+						suggestions: DEMO_SUGGESTIONS,
+						onSelect: (text) => send(text)
+					})]
+				}),
+				messages.map((m) => {
+					if (m.role === "tool" && m.tool) return /* @__PURE__ */ jsx(ChatMessage, {
+						role: "tool",
+						author: "Tool",
+						timestamp: m.time,
+						children: /* @__PURE__ */ jsx(ToolCallCard, {
+							name: DEMO_TOOL.name,
+							status: m.tool.status,
+							durationMs: m.tool.durationMs,
+							args: DEMO_TOOL.args,
+							result: m.tool.status === "succeeded" ? DEMO_TOOL.result : void 0,
+							error: m.tool.status === "failed" ? "Stopped by the user." : void 0
+						})
+					}, m.id);
+					if (m.role === "assistant") return /* @__PURE__ */ jsxs(ChatMessage, {
+						role: "assistant",
+						timestamp: m.time,
+						streaming: m.streaming,
+						alwaysShowActions: m.feedback?.rating === "down",
+						actions: /* @__PURE__ */ jsx(MessageFeedback, {
+							copyText: m.text,
+							onRegenerate: streaming ? void 0 : () => retry(m.id),
+							value: m.feedback ?? { rating: null },
+							onFeedback: (f) => patch(m.id, (x) => ({
+								...x,
+								feedback: f
+							}))
+						}),
+						children: [m.text && /* @__PURE__ */ jsx(Markdown, {
+							streaming: m.streaming,
+							children: m.text
+						}), m.sources && /* @__PURE__ */ jsx(CitationList, {
+							sources: DEMO_SOURCES,
+							className: "mt-3"
+						})]
+					}, m.id);
+					return /* @__PURE__ */ jsxs(ChatMessage, {
+						role: m.role,
+						timestamp: m.time,
+						children: [m.text, m.attachments && m.attachments.length > 0 && /* @__PURE__ */ jsx(AttachmentList, {
+							attachments: m.attachments,
+							variant: "tile",
+							className: "mt-2"
+						})]
+					}, m.id);
+				}),
+				/* @__PURE__ */ jsx(ChatAnnouncer, {
+					streaming,
+					lastReply
+				})
+			]
+		})
+	}) });
+}
+//#endregion
+//#region src/ChatDemo/ChatDemo.doc.ts
+const doc$2 = {
+	name: "ChatDemo",
+	group: "Layout",
+	status: "experimental",
+	description: "Reference composition of the chat pack: suggestions in the empty state, attachments (pick, paste or drop), a compact ModelPicker in the composer, a tool call, a streamed markdown reply with sources (TypingIndicator, caret), Stop, MessageFeedback (copy, regenerate, thumbs with reasons), and a resizable details panel. Streaming is mocked with timers that are cleaned up.",
+	keyboard: [["Enter", "In the composer: sends; on a suggestion: sends it"], ["Escape", "In the composer while streaming: stops the reply"]],
+	tokens: [
+		"background",
+		"card",
+		"border",
+		"primary",
+		"focus-ring"
+	]
+};
+//#endregion
+export { AttachmentChip, AttachmentList, ChatAnnouncer, ChatComposer, ChatDemo, ChatLayout, ChatMessage, Citation, CitationList, CodeBlock, DEMO_MODELS, JsonView, Markdown, MessageFeedback, ModelPicker, SuggestionChips, ToolCallCard, TypingIndicator, doc as attachmentListDoc, attachmentStatus, attachmentStyles, doc$1 as chatComposerDoc, chatComposerStyles, doc$2 as chatDemoDoc, doc$3 as chatLayoutDoc, chatLayoutStyles, doc$4 as chatMessageDoc, chatMessageStyles, doc$5 as citationDoc, citationStyles, groupModels, doc$6 as markdownDoc, markdownStyles, matchesAccept, doc$7 as messageFeedbackDoc, messageFeedbackStyles, doc$8 as modelPickerDoc, modelPickerStyles, repairStreamingMarkdown, safeSourceUrl, safeUrl, sourceHost, streamingCaret, streamingCaretClass, doc$9 as suggestionChipsDoc, suggestionChipsStyles, doc$10 as toolCallCardDoc, toolCallCardStyles, doc$11 as typingIndicatorDoc, typingIndicatorStyles, useChatScroll, validateFiles };
+
+//# sourceMappingURL=index.js.map