@keboola/design 11.6.1 → 12.0.0

package/dist/{AIKit-CQxVwyAk.js → AIKit-BD4r7ff-.js}

@@ -1,23 +1,23 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-DnkrFYqY.js";
-import { AlertCircle, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CirclePause, CircleX, Loader2, Maximize2, Minimize2, Play, Send, Sparkles, ThumbsDown, ThumbsUp, TriangleAlert, X, XCircle } from "./icons-Cek151jC.js";
-import { Button } from "./Button-DsRrU5F1.js";
+import { Tooltip, TooltipProvider } from "./utils-Bd28bWgm.js";
+import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, BarChart3, Bell, Bug, Calendar, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert, CircleCheck, CircleHelp, CirclePause, CirclePlay, CirclePlus, CircleStop, CircleX, Clock, Cog, Copy, Database, Download, Ellipsis, ExternalLink, Eye, File, FilePen, FileText, Flag, Folder, Gauge, GitBranch, GitMerge, GitPullRequest, Globe, Hand, History, Hourglass, Info, Key, Layers, LineChart, Link, List, ListChecks, Loader2, Lock, Mail, Maximize2, Minimize2, Minus, Pencil, Play, Plus, RefreshCw, Rocket, RotateCcw, RotateCw, Save, Search, Send, Settings, Sparkles, Star, Table, ThumbsDown, ThumbsUp, Trash2, TriangleAlert, Upload, User, Users, WandSparkles, Warehouse, Workflow, X, XCircle, Zap } from "./icons-wcA70iQx.js";
+import { Button } from "./Button-Ca4Q3VJU.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
-import { ClipboardButton } from "./ClipboardButton-CrljClL1.js";
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-CN9nAs72.js";
+import { ClipboardButton } from "./ClipboardButton-DHa1trtI.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-CD7mYeTz.js";
 import { Truncated } from "./internal/components/Truncated.js";
-import { HoverCard } from "./HoverCard-B9ZMJxjn.js";
-import { Command } from "./Command-CqxoI_De.js";
-import { TextInput } from "./TextInput-DiEMxVF6.js";
-import { Checkbox } from "./Checkbox-Bqr6zXcW.js";
-import { Badge } from "./Badge-o5jURtpB.js";
+import { HoverCard } from "./HoverCard-B8OKu9XZ.js";
+import { Command } from "./Command-BU_cVurn.js";
+import { TextInput } from "./TextInput-CDG2XpBl.js";
+import { Checkbox } from "./Checkbox-8yIIgY7g.js";
+import { Badge } from "./Badge-DIjhwPvh.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { Table } from "./Table-CvYuTuNU.js";
+import { Table as Table$1 } from "./Table-BaVT5Tkn.js";
 import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
 import { DiagramSource } from "./DiagramSource-C5_d8Gdj.js";
 import { Progress } from "./internal/components/Progress.js";
 import { Slot } from "@radix-ui/react-slot";
-import { isValidElement, useCallback, useEffect, useId, useRef, useState } from "react";
+import { createContext, isValidElement, use, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import TextareaAutosize from "react-textarea-autosize";
@@ -26,50 +26,85 @@ import remarkGfm from "remark-gfm";
 //#region src/blocks/AIKit/AnswerActions.tsx
 const VOTE_BUTTONS = [{
 	vote: "up",
-	label: "Good answer",
 	icon: /* @__PURE__ */ jsx(ThumbsUp, { className: "tw:size-4" })
 }, {
 	vote: "down",
-	label: "Bad answer",
 	icon: /* @__PURE__ */ jsx(ThumbsDown, { className: "tw:size-4" })
 }];
+const DEFAULT_LABELS = {
+	up: "Good answer",
+	down: "Bad answer"
+};
+/** Roomier for a panel; compact for a dense transcript. */
+const SIZES = {
+	small: {
+		button: "icon-xs",
+		gap: "extra-small"
+	},
+	medium: {
+		button: "icon-sm",
+		gap: "little-small"
+	}
+};
 /**
-* What a reader can do with a finished answer: take it away, and say whether it was any good.
+* Copy and thumbs up/down for a finished answer.
 *
-* - **Always rendered, never hover-only.** A reveal-on-hover row does not exist for anyone
-*   reaching it without a pointer. The buttons are quiet (`invisible`) rather than hidden.
-* - Copy sits first: it is the one action with no round trip.
-* - **A vote can be changed but not withdrawn.** `aria-pressed` says which one is recorded, and
-*   both buttons stay focusable so a reader can switch. Pressing the pressed one re-sends the
-*   same vote.
-* - The recorded vote and the write are the caller's: the two chats vote against different
-*   endpoints, and only the caller knows whether a turn is finished enough to rate.
+* - Always rendered, never hover-only, so it is reachable without a pointer.
+* - A vote can be changed but not withdrawn; pressing the pressed one re-sends it.
+* - The caller owns the recorded vote and the write.
 */
-const AnswerActions = ({ copyText, vote, onVote }) => {
+const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAULT_LABELS, confirmation, size = "small", layout = "inline" }) => {
+	const { button, gap } = SIZES[size];
+	const votes = VOTE_BUTTONS.map(({ vote: candidate, icon }) => {
+		const isRecorded = vote === candidate;
+		const label = labels[candidate];
+		return /* @__PURE__ */ jsx(Tooltip, {
+			tooltip: label,
+			placement: "top",
+			triggerAsChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				size: button,
+				variant: "invisible",
+				className: cn(isRecorded && candidate === "up" && "tw:bg-success/10 tw:text-success tw:hover:not-disabled:bg-success/20 tw:hover:not-disabled:text-success", isRecorded && candidate === "down" && "tw:bg-destructive/10 tw:text-destructive tw:hover:not-disabled:bg-destructive/20 tw:hover:not-disabled:text-destructive"),
+				"aria-label": label,
+				"aria-pressed": isRecorded,
+				onClick: () => onVote(candidate),
+				children: icon
+			})
+		}, candidate);
+	});
+	const copy = copyText ? /* @__PURE__ */ jsx(ClipboardButton, {
+		text: copyText,
+		tooltip: "Copy answer",
+		size: button,
+		variant: "invisible",
+		onClick: onCopy
+	}) : null;
+	const said = confirmation ? /* @__PURE__ */ jsx("span", {
+		"aria-live": "polite",
+		className: "tw:ml-1 tw:text-xs tw:font-medium tw:text-foreground tw:empty:hidden tw:animate-in tw:fade-in tw:slide-in-from-left-1 tw:duration-300",
+		children: vote ? confirmation[vote] : ""
+	}) : null;
+	if (layout === "split") return /* @__PURE__ */ jsxs("div", {
+		className: "tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-2",
+		children: [/* @__PURE__ */ jsxs(ButtonGroup, {
+			space: gap,
+			"aria-label": "Answer actions",
+			children: [votes, said]
+		}), /* @__PURE__ */ jsxs(ButtonGroup, {
+			space: gap,
+			children: [actions, copy]
+		})]
+	});
 	return /* @__PURE__ */ jsxs(ButtonGroup, {
-		space: "extra-small",
+		space: gap,
 		"aria-label": "Answer actions",
-		children: [copyText ? /* @__PURE__ */ jsx(ClipboardButton, {
-			text: copyText,
-			tooltip: "Copy answer",
-			size: "icon-xs",
-			variant: "invisible"
-		}) : null, VOTE_BUTTONS.map(({ vote: candidate, label, icon }) => {
-			const isRecorded = vote === candidate;
-			return /* @__PURE__ */ jsx(Tooltip, {
-				tooltip: label,
-				placement: "top",
-				triggerAsChild: true,
-				children: /* @__PURE__ */ jsx(Button, {
-					size: "icon-xs",
-					variant: isRecorded ? "secondary" : "invisible",
-					"aria-label": label,
-					"aria-pressed": isRecorded,
-					onClick: () => onVote(candidate),
-					children: icon
-				})
-			}, candidate);
-		})]
+		children: [
+			copy,
+			votes,
+			actions,
+			said
+		]
 	});
 };
 //#endregion
@@ -98,6 +133,12 @@ const variantClasses = {
 	dismissed: "tw:text-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground"
 };
 const iconClasses = "tw:size-3.5 tw:shrink-0 tw:basis-3.5 tw:opacity-70";
+const variantStatus = {
+	success: "finished",
+	error: "failed",
+	processing: "running",
+	dismissed: "not run"
+};
 const renderVariantIcon$1 = (variant) => {
 	if (variant === "processing") return /* @__PURE__ */ jsx(Loader2, { className: cn(iconClasses, "tw:animate-spin") });
 	if (variant === "error" || variant === "dismissed") return /* @__PURE__ */ jsx(XCircle, { className: iconClasses });
@@ -108,13 +149,21 @@ const CollapsibleStepHeader = ({ isExpanded, onToggle, label, variant = "success
 		type: "button",
 		"aria-expanded": isExpanded,
 		onClick: onToggle,
+		"data-variant": variant,
 		className: cn("tw:flex tw:w-fit tw:items-center tw:gap-1.5 tw:text-left tw:text-xs tw:font-medium tw:transition-colors tw:focus-visible:outline tw:focus-visible:outline-2 tw:focus-visible:outline-offset-2 tw:disabled:opacity-40", variantClasses[variant]),
 		children: [renderVariantIcon$1(variant), /* @__PURE__ */ jsxs("span", {
 			className: "tw:min-w-0",
-			children: [label, /* @__PURE__ */ jsxs("span", {
-				className: "tw:whitespace-nowrap",
-				children: ["⁠", /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw:ml-1.5 tw:inline-block tw:size-3.5 tw:align-middle tw:transition-transform", isExpanded && "tw:rotate-180") })]
-			})]
+			children: [
+				label,
+				/* @__PURE__ */ jsx("span", {
+					className: "tw:sr-only",
+					children: ` (${variantStatus[variant]})`
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "tw:whitespace-nowrap",
+					children: ["⁠", /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw:ml-1.5 tw:inline-block tw:size-3.5 tw:align-middle tw:transition-transform", isExpanded && "tw:rotate-180") })]
+				})
+			]
 		})]
 	});
 };
@@ -189,20 +238,236 @@ const AnswerSummary = ({ items, variant = "success", noAnswerLabel = "No answer"
 	});
 };
 //#endregion
+//#region src/blocks/AIKit/ChatInlineIcon.tsx
+/**
+* The Lucide component each `icon:<name>` token draws.
+*
+* - Names are FontAwesome-solid ones, published as `CHAT_INLINE_ICON_NAMES`.
+* - The `satisfies` is the drift guard: a name the prompt teaches and this map lacks fails to compile.
+* - Read through `Object.hasOwn`: `icon:constructor` would otherwise hit `Object.prototype`.
+*/
+const ICON_REGISTRY = {
+	"alert-circle": AlertCircle,
+	"arrow-down": ArrowDown,
+	"arrow-left": ArrowLeft,
+	"arrow-right": ArrowRight,
+	"arrow-rotate-back": RotateCcw,
+	"arrow-rotate-left": RotateCcw,
+	"arrow-rotate-right": RotateCw,
+	"arrow-up": ArrowUp,
+	"arrow-up-right-from-square": ExternalLink,
+	"arrows-rotate": RefreshCw,
+	analytics: BarChart3,
+	ban: Ban,
+	bell: Bell,
+	bug: Bug,
+	calendar: Calendar,
+	changes: FilePen,
+	"chart-line": LineChart,
+	check: Check,
+	"check-circle": CircleCheck,
+	"chevron-down": ChevronDown,
+	"chevron-left": ChevronLeft,
+	"chevron-right": ChevronRight,
+	"chevron-up": ChevronUp,
+	circle: Circle,
+	"circle-check": CircleCheck,
+	"circle-exclamation": CircleAlert,
+	"circle-info": Info,
+	"circle-pause": CirclePause,
+	"circle-play": CirclePlay,
+	"circle-plus": CirclePlus,
+	"circle-question": CircleHelp,
+	"circle-stop": CircleStop,
+	"circle-xmark": CircleX,
+	clock: Clock,
+	"clock-rotate-left": History,
+	"code-branch": GitBranch,
+	"code-merge": GitMerge,
+	"code-pull-request": GitPullRequest,
+	cog: Cog,
+	configuration: Settings,
+	copy: Copy,
+	database: Database,
+	"diagram-project": Workflow,
+	download: Download,
+	ellipsis: Ellipsis,
+	envelope: Mail,
+	"exclamation-circle": CircleAlert,
+	"exclamation-triangle": TriangleAlert,
+	eye: Eye,
+	file: File,
+	"file-lines": FileText,
+	flag: Flag,
+	folder: Folder,
+	gauge: Gauge,
+	gear: Settings,
+	globe: Globe,
+	hand: Hand,
+	"hourglass-half": Hourglass,
+	"info-circle": Info,
+	key: Key,
+	"layer-group": Layers,
+	link: Link,
+	"list-check": ListChecks,
+	"list-ul": List,
+	lock: Lock,
+	"magnifying-glass": Search,
+	minus: Minus,
+	"paper-plane-top": Send,
+	pen: Pencil,
+	play: Play,
+	plus: Plus,
+	refresh: RefreshCw,
+	rocket: Rocket,
+	save: Save,
+	"save-changes": Save,
+	search: Search,
+	spinner: Loader2,
+	sparkles: Sparkles,
+	star: Star,
+	stop: CircleStop,
+	table: Table,
+	"thumbs-down": ThumbsDown,
+	"thumbs-up": ThumbsUp,
+	transformation: WandSparkles,
+	trash: Trash2,
+	"triangle-exclamation": TriangleAlert,
+	upload: Upload,
+	user: User,
+	"user-group": Users,
+	warning: TriangleAlert,
+	warehouse: Warehouse,
+	xmark: X,
+	zap: Zap
+};
+/**
+* Extra classes a single name needs.
+*
+* - `spinner` spins (per `MAINTAINING.md`): a still `Loader2` reads as a broken ring.
+* - Read through `Object.hasOwn`, like the registry.
+*/
+const ICON_CLASSES = { spinner: "tw:animate-spin" };
+/**
+* A whole `icon:<name>` token and nothing else.
+*
+* - Must match the name shape `remarkIconSyntax` (`@keboola/kai-chat`) accepts.
+* - Anchored, so inline code like `` `icon: database` `` or `` `icon:` `` stays code.
+*/
+const TOKEN = /^icon:([a-z][a-z0-9-]*)$/;
+/** Built once: an answer is re-parsed per streamed chunk, so `isArriving` runs per code node. */
+const ICON_NAMES = Object.keys(ICON_REGISTRY);
+/** Whether a name is a strict prefix of a registry name: `tabl` → `true`, `table-name` → `false`. */
+const isArriving = (name) => ICON_NAMES.some((key) => key.length > name.length && key.startsWith(name));
+/**
+* The icon name in a code node's text, if the text is a token — drawn, or still arriving.
+*
+* - An unknown name → `undefined`, so the call site's `<code>` fall-through keeps the text.
+* - A prefix of a known name is a token still streaming; `<ChatInlineIcon />` draws it blank.
+* - A name that is both (`save`, of `save-changes`) is drawn now.
+*/
+const getChatInlineIconName = (text) => {
+	const name = TOKEN.exec(text)?.[1];
+	if (name === void 0) return void 0;
+	return Object.hasOwn(ICON_REGISTRY, name) || isArriving(name) ? name : void 0;
+};
+/**
+* One inline `icon:<name>` token, drawn at the size of the text it leads.
+*
+* - An unknown name (a token still arriving) renders nothing.
+* - `mr` widens the single source space, which reads as cramped beside a glyph.
+* - The heavier stroke holds its own beside a bold heading.
+* - `aria-hidden`: the token's text is removed, so the glyph has no label to announce.
+*/
+const ChatInlineIcon = ({ name }) => {
+	const Icon = Object.hasOwn(ICON_REGISTRY, name) ? ICON_REGISTRY[name] : void 0;
+	if (Icon === void 0) return null;
+	return /* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": true,
+		className: cn("tw:mr-[0.15em] tw:inline-block tw:size-[1em] tw:shrink-0 tw:align-[-0.125em] tw:text-muted-foreground", Object.hasOwn(ICON_CLASSES, name) ? ICON_CLASSES[name] : void 0),
+		strokeWidth: 2.25
+	});
+};
+//#endregion
+//#region src/blocks/AIKit/FileDownloadChip.tsx
+/**
+* A file the agent wrote, offered inside its own answer.
+*
+* - The whole chip is the control: a small icon beside a truncating filename is hard to hit.
+* - Presentation only — the host fetches and saves, through its own auth.
+*/
+const FileDownloadChip = ({ fileName, filePath, size, isPending = false, onDownload, className }) => /* @__PURE__ */ jsxs(Button, {
+	variant: "secondary",
+	size: "small",
+	isLoading: isPending,
+	"aria-disabled": isPending,
+	"aria-label": `Download ${filePath ?? fileName}`,
+	title: filePath,
+	onClick: () => {
+		if (!isPending) onDownload();
+	},
+	className: cn("tw:max-w-full tw:justify-start tw:gap-2 tw:font-normal", className),
+	children: [
+		!isPending && /* @__PURE__ */ jsx(FileText, { className: "tw:size-4 tw:shrink-0 tw:text-muted-foreground" }),
+		/* @__PURE__ */ jsx("span", {
+			className: "tw:truncate",
+			children: fileName
+		}),
+		size !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "tw:shrink-0 tw:text-xs tw:text-muted-foreground",
+			children: size
+		}),
+		!isPending && /* @__PURE__ */ jsx(Download, { className: "tw:size-4 tw:shrink-0" })
+	]
+});
+//#endregion
+//#region src/blocks/AIKit/InlineStepGroup.tsx
+/** The surface colour, as the custom property the step icons mask against. */
+const surfaceStyle = (surface) => ({ "--inline-step-surface": surface });
+/**
+* A collapsible run of agent steps behind one summary line; rows arrive as children.
+*
+* - Connector sits at the icon centre line (`pl-5` + half a `size-5` box), drawn once so it
+*   survives icon-less rows.
+* - Animates `grid-template-rows`; children stay mounted while closed.
+* - `role="group"`, not a `region` landmark: dozens per transcript would drown real landmarks.
+*/
+const InlineStepGroup = ({ label, variant = "success", isExpanded, onToggle, surface = "rgb(var(--background))", "aria-label": ariaLabel, "data-testid": testId, className, children }) => /* @__PURE__ */ jsxs("section", {
+	role: "group",
+	className: cn("tw:flex tw:flex-col", className),
+	"aria-label": ariaLabel,
+	"data-testid": testId,
+	children: [/* @__PURE__ */ jsx(CollapsibleStepHeader, {
+		isExpanded,
+		onToggle,
+		label,
+		variant
+	}), /* @__PURE__ */ jsx("div", {
+		className: cn("tw:grid tw:transition-[grid-template-rows] tw:duration-200 tw:ease-out tw:motion-reduce:transition-none", isExpanded ? "tw:grid-rows-[1fr]" : "tw:grid-rows-[0fr]"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "tw:min-h-0 tw:overflow-hidden",
+			inert: !isExpanded,
+			"aria-hidden": isExpanded ? void 0 : true,
+			children: /* @__PURE__ */ jsxs("div", {
+				style: surfaceStyle(surface),
+				className: "tw:relative tw:flex tw:flex-col tw:gap-4 tw:pt-4 tw:pl-5",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "tw:pointer-events-none tw:absolute tw:top-4 tw:bottom-0 tw:left-[30px] tw:w-px tw:bg-border"
+				}), children]
+			})
+		})
+	})]
+});
+//#endregion
 //#region src/blocks/AIKit/DiagramBlock.tsx
 /**
 * One diagram block: a skeleton while its chunk loads, the fence source plus a retry if it fails.
 *
-* - `load` runs once per mount and once per press of the retry button. The loader drops its own
-*   rejected promise, so every attempt is a fresh fetch.
-* - Recovery is a gesture, not a timer: nothing on the page can tell when a chunk became
-*   reachable again, and a tab left open across a deploy points at a URL that is gone for good —
-*   a background loop would retry that one forever.
-* - The failure is already logged by the loader, which knows the chunk's name.
-* - A new `load` resets the block: every fence renders this same component type, so a block that
-*   switches dialect would otherwise keep drawing through the dialect it had before.
-* - Both the renderer and the loader are functions held in state, so they go in through the
-*   setter form — React runs a bare function as a lazy initializer or an updater instead.
+* - Each attempt is a fresh fetch; the loader drops its rejected promise and logs the failure.
+* - Retry is manual: a chunk gone after a deploy never returns, so a timer would loop forever.
+* - A new `load` resets the block, or a dialect switch keeps the previous renderer.
+* - Functions in state go through the setter form, or React calls them.
 */
 const DiagramBlock = ({ load, code }) => {
 	const [Diagram, setDiagram] = useState(null);
@@ -241,16 +506,12 @@ const DiagramBlock = ({ load, code }) => {
 //#endregion
 //#region src/blocks/AIKit/diagramChunk.ts
 /**
-* An on-demand diagram chunk — shared between mounts, and retryable.
+* An on-demand diagram chunk, shared between mounts and retryable.
 *
-* - `lazy()` is deliberately not used here: it memoizes the settled import for the life of the
-*   page, so one failed fetch (a dev server restarting, a stale tab after a deploy, a flaky
-*   network) leaves every diagram in that tab rendering raw source until a full reload.
-* - A resolved import is kept, so the chunk is fetched once however many blocks mount.
-* - A failed one is cleared, so the next mount imports again. Same contract as
-*   `getFlintRuntime()` one level down, inside `FlintChart`.
-* - The failure is logged here, where the chunk's name is known, so the swap to plain source is
-*   never silent and a retry that fails again says so.
+* - Not `lazy()`: it memoizes a failed import, stranding every diagram until a reload.
+* - A resolved import is kept; a failed one is cleared so the next mount retries.
+* - Same contract as `getFlintRuntime()` in `FlintChart`.
+* - Failures are logged here, where the chunk's name is known.
 */
 const diagramChunk = (name, load) => {
 	let pending = null;
@@ -267,7 +528,10 @@ const diagramChunk = (name, load) => {
 //#region src/blocks/AIKit/Markdown.tsx
 const loadMermaid = diagramChunk("MermaidDiagram", () => import("@keboola/design/mermaid").then((module) => module.MermaidDiagram));
 const loadFlint = diagramChunk("FlintChart", () => import("@keboola/design/flint").then((module) => module.FlintChart));
-const proseClass = "tw:prose tw:prose-sm tw:max-w-none tw:break-words tw:[&_pre]:bg-muted tw:[&_pre]:text-foreground tw:[&_:not(pre)>code]:bg-muted tw:[&_:not(pre)>code]:text-foreground tw:[&_:not(pre)>code]:rounded tw:[&_:not(pre)>code]:px-1 tw:[&_:not(pre)>code]:py-0.5 tw:[&_:not(pre)>code]:before:content-none tw:[&_:not(pre)>code]:after:content-none";
+const PROSE_CLASS = {
+	answer: "tw:prose tw:prose-answer tw:prose-code-chip tw:break-words",
+	chrome: "tw:prose tw:prose-sm tw:prose-code-chip tw:break-words"
+};
 const getText = (node) => {
 	if (typeof node === "string") return node;
 	if (typeof node === "number") return String(node);
@@ -282,25 +546,14 @@ const getLanguage = (element) => {
 	if (typeof props.className !== "string") return void 0;
 	return props.className.match(/language-(\S+)/)?.[1];
 };
-/**
-* The plugins this renderer always runs.
-*
-* - GFM is part of its contract: tables route through the design `Table`, and autolinks and
-*   task lists are what an assistant answer is written in.
-* - A caller's own plugins are appended to these, never substituted for them.
-*/
+/** Always run; a caller's plugins are appended, never substituted. */
 const baseRemarkPlugins = [remarkGfm];
 /**
 * Fence language → the on-demand chunk that draws it.
 *
-* - Both dialects are the agent's, not this package's: kai-agent's prompt tells the model to
-*   write ```mermaid for structure and ```flint for quantitative data, so a chat that renders
-*   one and not the other drops output the agent was instructed to produce.
-* - `flint-chart` is an alias — it is the fence tag flint's own docs use, so a model emits it
-*   unprompted often enough to matter. `markdownComponents.tsx` in kbc-ui carries the same pair.
-* - Read through `Object.hasOwn`, never by plain index: a fence tagged ```constructor or
-*   ```valueOf otherwise answers with an `Object.prototype` member, which is truthy, and calling
-*   it as a loader throws — taking the whole message subtree down with it.
+* - Dialects come from kai-agent's prompt; keep in sync with kbc-ui `markdownComponents.tsx`.
+* - `flint-chart`: alias models emit unprompted.
+* - Read via `Object.hasOwn`: ```constructor would otherwise hit `Object.prototype` and throw.
 */
 const DIAGRAM_CHUNKS = {
 	mermaid: loadMermaid,
@@ -310,14 +563,32 @@ const DIAGRAM_CHUNKS = {
 /**
 * The fence languages this renderer draws instead of printing.
 *
-* - For a caller that streams: a diagram mounts a lazily loaded chunk, so an answer arriving a
-*   token at a time has to keep a fence that is still open an ordinary code block, or every
-*   keystroke fetches the chunk. Sharing the list is what keeps that hold-back from missing a
-*   dialect this map has and the caller does not.
-* - Frozen, because it is that shared contract: a consumer that pushed onto it would change how
-*   every other app in the same bundle holds a fence back.
+* - Streaming callers hold an open fence back as plain code, or every keystroke fetches the chunk.
+* - Frozen: it is shared across every app in the bundle.
 */
 const DIAGRAM_LANGUAGES = Object.freeze(Object.keys(DIAGRAM_CHUNKS));
+/**
+* Whether the `code` being rendered sits inside a fenced block.
+*
+* - Set by `pre`: a fence without info string has no `language-…` class, like inline code.
+*/
+const CodeBlockContext = createContext(false);
+/**
+* The `code` renderer: an inline `icon:<name>` token becomes the icon it names.
+*
+* - Fenced blocks never swap.
+* - Unknown names stay code; a name still streaming renders nothing.
+*/
+const MarkdownCode = ({ children, className, ...props }) => {
+	const { node: _node, ...rest } = props;
+	const name = use(CodeBlockContext) ? void 0 : getChatInlineIconName(getText(children));
+	if (name !== void 0) return /* @__PURE__ */ jsx(ChatInlineIcon, { name });
+	return /* @__PURE__ */ jsx("code", {
+		className,
+		...rest,
+		children
+	});
+};
 const baseComponents = {
 	pre({ children, ...props }) {
 		const child = Array.isArray(children) ? children[0] : children;
@@ -344,10 +615,14 @@ const baseComponents = {
 				})
 			}), /* @__PURE__ */ jsx("pre", {
 				...rest,
-				children
+				children: /* @__PURE__ */ jsx(CodeBlockContext, {
+					value: true,
+					children
+				})
 			})]
 		});
 	},
+	code: MarkdownCode,
 	a({ children, href, ...props }) {
 		const { node: _node, ...rest } = props;
 		const isExternal = !!href && /^https?:\/\//.test(href);
@@ -365,7 +640,7 @@ const baseComponents = {
 		const { node: _node, ...rest } = props;
 		return /* @__PURE__ */ jsx("div", {
 			className: "tw:not-prose tw:my-4",
-			children: /* @__PURE__ */ jsx(Table, {
+			children: /* @__PURE__ */ jsx(Table$1, {
 				bordered: true,
 				className: cn("tw:!mb-0", className),
 				...rest
@@ -374,74 +649,80 @@ const baseComponents = {
 	},
 	thead(props) {
 		const { node: _node, ...rest } = props;
-		return /* @__PURE__ */ jsx(Table.Header, { ...rest });
+		return /* @__PURE__ */ jsx(Table$1.Header, { ...rest });
 	},
 	tbody(props) {
 		const { node: _node, ...rest } = props;
-		return /* @__PURE__ */ jsx(Table.Body, { ...rest });
+		return /* @__PURE__ */ jsx(Table$1.Body, { ...rest });
 	},
 	tr(props) {
 		const { node: _node, ...rest } = props;
-		return /* @__PURE__ */ jsx(Table.Row, { ...rest });
+		return /* @__PURE__ */ jsx(Table$1.Row, { ...rest });
 	},
 	th(props) {
 		const { node: _node, ...rest } = props;
-		return /* @__PURE__ */ jsx(Table.Head, { ...rest });
+		return /* @__PURE__ */ jsx(Table$1.Head, { ...rest });
 	},
 	td(props) {
 		const { node: _node, ...rest } = props;
-		return /* @__PURE__ */ jsx(Table.Cell, { ...rest });
+		return /* @__PURE__ */ jsx(Table$1.Cell, { ...rest });
 	}
 };
 /**
-* Read-only GFM Markdown renderer with design-token typography. Pair with
-* `MessageBubble` to render an assistant message body. Code blocks expose a
-* copy button, so mount a `TooltipProvider` once at the app root.
+* The prose surface an answer is drawn on.
+*
+* - Wrap all `Block`s of one answer in one `Root`, so `:first-child`/`:last-child` span the reply.
+* - `data-prose` is `MessageBubble`'s colour hook; Tailwind can't target `tw:prose` directly.
+* - Spacing overrides need `!`: `tw:prose-answer` rules are `(0,2,1)`, above `[&_p]:mb-1`.
 */
-const Markdown = ({ children, className, remarkPlugins, components: componentOverrides }) => {
-	return /* @__PURE__ */ jsx("div", {
-		"data-prose": true,
-		className: cn(proseClass, className),
-		children: /* @__PURE__ */ jsx(ReactMarkdown, {
-			remarkPlugins: remarkPlugins === void 0 ? baseRemarkPlugins : [...baseRemarkPlugins, ...remarkPlugins],
-			components: componentOverrides === void 0 ? baseComponents : {
-				...baseComponents,
-				...componentOverrides
-			},
-			children
-		})
-	});
-};
+const MarkdownRoot = ({ children, className, rhythm = "answer" }) => /* @__PURE__ */ jsx("div", {
+	"data-prose": true,
+	className: cn(PROSE_CLASS[rhythm], className),
+	children
+});
+/** One parsed piece of an answer, with no surface of its own; memoise at the call site. */
+const MarkdownBlock = ({ children, remarkPlugins, components: componentOverrides }) => /* @__PURE__ */ jsx(ReactMarkdown, {
+	remarkPlugins: remarkPlugins === void 0 ? baseRemarkPlugins : [...baseRemarkPlugins, ...remarkPlugins],
+	components: componentOverrides === void 0 ? baseComponents : {
+		...baseComponents,
+		...componentOverrides
+	},
+	children
+});
+/**
+* Read-only GFM Markdown renderer with design-token typography.
+*
+* - Needs a `TooltipProvider` at the app root (code copy button).
+* - Pass `rhythm="chrome"` for content a model did not write.
+*/
+const Markdown = ({ className, rhythm, ...blockProps }) => /* @__PURE__ */ jsx(MarkdownRoot, {
+	className,
+	rhythm,
+	children: /* @__PURE__ */ jsx(MarkdownBlock, { ...blockProps })
+});
+Markdown.Root = MarkdownRoot;
+Markdown.Block = MarkdownBlock;
 //#endregion
 //#region src/blocks/AIKit/MarkdownTable.tsx
 /** How much wider than its column a table has to be before the column is the wrong surface. */
 const EXPAND_RATIO = 1.5;
 /**
-* The token the host paints the table on, which is the colour the fade has to end in.
+* The fade's end colour — must match the host's surface, or it draws a strip over the data.
 *
-* - A gradient hides the cut-off cells by ending in the surface behind them. End it in any other
-*   token and it draws a contrasting strip over the data instead of hiding it.
-* - Full class strings, not a composed `tw:from-${token}`: Tailwind reads literals.
+* - Full class strings: Tailwind reads literals.
 */
 const FADE_SURFACE = {
 	card: "tw:from-card",
 	background: "tw:from-background"
 };
 /**
-* A table in an answer, with the fact that it is cut off on the right said out loud.
+* A table in an answer that shows when it is cut off on the right.
 *
-* - `overflow-x: auto` scrolls silently, so nothing on screen says there is more to the right.
-* - The controls sit in a rail above the grid, never over the header row or the last row — the
-*   data a reader reaches for them to get at. The rail holds its height, so revealing hover
-*   controls or crossing the ratio cannot shift the table under the pointer.
-* - The fade marks the cut edge only while content remains, so it never reads as a border.
-* - A painted gradient rather than the `tw:scroll-fade-x` mask, which needs scroll-driven
-*   animations: the build floor is `baseline-widely-available` (Safari 16, Firefox 104), and there
-*   the utility either fades both edges of a table that fits or, behind the `supports-` guard
-*   `PageLayout` uses, says nothing at all — which is the state this component exists to end. The
-*   mask also has to sit on the scrolling element, and that is `Table`'s own container, not ours.
-* - Past `EXPAND_RATIO` the fade is joined by `onExpand`'s action, drawn without waiting for a
-*   hover: it reports that content is cut off, which the reader needs before going looking.
+* - Controls sit in a fixed-height rail above the grid, so they never cover rows or shift them.
+* - The fade shows only while content remains to the right.
+* - A painted gradient, not `tw:scroll-fade-x`: that needs scroll-driven animations, which the
+*   `baseline-widely-available` build floor lacks, and must sit on `Table`'s own container.
+* - Past `EXPAND_RATIO` the expand action shows without hover.
 */
 const MarkdownTable = ({ children, actions, onExpand, surface = "card", className }) => {
 	const frameRef = useRef(null);
@@ -551,7 +832,7 @@ const contentClasses = cva([
 			"tw:py-2",
 			"tw:rounded-xl",
 			"tw:overflow-hidden",
-			"tw:break-anywhere"
+			"tw:wrap-anywhere"
 		]
 	} },
 	defaultVariants: { variant: "assistant" }
@@ -896,6 +1177,58 @@ const PlanRewritingIndicator = ({ label = "Rewriting the plan..." }) => /* @__PU
 	})]
 });
 //#endregion
+//#region src/blocks/AIKit/constants.ts
+/**
+* Names the container query `PromptInput`'s `inline` row reads to fold into the stacked layout.
+*
+* It has to sit on an **ancestor**: a container query matches descendants only, so the field that
+* would read it cannot name it, and its own wrapper is the width the fold changes. A host that
+* never names it keeps the one-line row at every width.
+*/
+const PROMPT_INPUT_CONTAINER = "tw:@container/composer";
+//#endregion
+//#region src/blocks/AIKit/AnimatedHeight.tsx
+/**
+* A box whose height eases to whatever its content measures.
+*
+* - Content is measured with a `ResizeObserver`; without one (jsdom) the box is plain `auto`.
+* - The first measurement lands without a transition, so mounting with content does not grow in.
+* - Overflow is clipped only while the height moves, so focus rings are not cut off at rest.
+* - `prefers-reduced-motion` drops the transition.
+*/
+const AnimatedHeight = ({ children, className }) => {
+	const contentRef = useRef(null);
+	const heightRef = useRef(void 0);
+	const [height, setHeight] = useState();
+	const [isAnimating, setIsAnimating] = useState(false);
+	useLayoutEffect(() => {
+		const node = contentRef.current;
+		if (!node || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			const next = node.offsetHeight;
+			const prev = heightRef.current;
+			if (prev !== void 0 && prev !== next && hasMotion()) setIsAnimating(true);
+			heightRef.current = next;
+			setHeight(next);
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const handleTransitionEnd = (event) => {
+		if (event.target !== event.currentTarget || event.propertyName !== "height") return;
+		setIsAnimating(false);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: { height },
+		onTransitionEnd: handleTransitionEnd,
+		className: cn("tw:transition-[height] tw:duration-200 tw:ease-out tw:motion-reduce:transition-none", isAnimating && "tw:overflow-hidden", className),
+		children: /* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			children
+		})
+	});
+};
+//#endregion
 //#region src/blocks/AIKit/PromptInputAction.tsx
 const PromptInputAction = ({ ref, onMouseDown, ...rest }) => {
 	const handleOnMouseDown = (event) => {
@@ -910,39 +1243,152 @@ const PromptInputAction = ({ ref, onMouseDown, ...rest }) => {
 };
 //#endregion
 //#region src/blocks/AIKit/PromptInputCommands.tsx
-const PromptInputCommands = ({ items, open, onSelect, filterValue, children }) => {
-	const filtered = filterValue ? items.filter((item) => item.label.toLowerCase().includes(filterValue.toLowerCase()) || item.value.toLowerCase().includes(filterValue.toLowerCase())) : items;
+/** What the menu needs above or below the composer before it will open on that side. */
+const MENU_HEIGHT = 440;
+/** As tall as the list ever gets, however much room there is. */
+const MENU_MAX_HEIGHT = 416;
+/** Space kept from the measured edge; `POPUP_CHROME` is the popup's own border and padding. */
+const MENU_GUTTER = 16;
+const POPUP_CHROME = 10;
+/**
+* The rows a typed filter leaves.
+*
+* - An empty filter keeps everything.
+* - A row matches on its label or its value.
+* - Matching nothing falls back to the action rows.
+*/
+const matchesFilter = (items, filterValue) => {
+	if (!filterValue) return items;
+	const query = filterValue.toLowerCase();
+	const matched = items.filter((item) => item.label.toLowerCase().includes(query) || item.value.toLowerCase().includes(query));
+	return matched.length > 0 ? matched : items.filter((item) => item.onSelect !== void 0);
+};
+/**
+* The band the menu has to stay inside: the window, narrowed by every ancestor that clips.
+*
+* - The chat sidebar's panel clips well below the window's top edge.
+*/
+const CLIPS = /* @__PURE__ */ new Set([
+	"hidden",
+	"auto",
+	"scroll",
+	"clip",
+	"overlay"
+]);
+const clipBand = (node) => {
+	let top = 0;
+	let bottom = window.innerHeight;
+	let parent = node.parentElement;
+	while (parent) {
+		const { overflowY, overflowX } = window.getComputedStyle(parent);
+		if (CLIPS.has(overflowY) || CLIPS.has(overflowX)) {
+			const box = parent.getBoundingClientRect();
+			top = Math.max(top, box.top);
+			bottom = Math.min(bottom, box.bottom);
+		}
+		parent = parent.parentElement;
+	}
+	return {
+		top,
+		bottom
+	};
+};
+const PromptInputCommands = ({ items, open, onSelect, filterValue, emptyText = "No commands found", panel, groupAction, groupHeading, children }) => {
+	const filtered = matchesFilter(items, filterValue);
+	const [highlighted, setHighlighted] = useState();
+	const [wasOpen, setWasOpen] = useState(open);
+	if (open !== wasOpen) {
+		setWasOpen(open);
+		if (open) setHighlighted(void 0);
+	}
+	/**
+	* Which side the menu opens on.
+	*
+	* - Above by default; below when there is not room above and more room below.
+	* - Re-measured while open: the composer and the transcript above it move.
+	*/
+	const rootRef = useRef(null);
+	const [below, setBelow] = useState(false);
+	const [maxHeight, setMaxHeight] = useState(MENU_MAX_HEIGHT);
+	const measure = useCallback(() => {
+		const node = rootRef.current;
+		const box = node?.getBoundingClientRect();
+		if (!node || !box) return;
+		const band = clipBand(node);
+		const above = box.top - band.top;
+		const under = band.bottom - box.bottom;
+		const openBelow = above < MENU_HEIGHT && under > above;
+		setBelow(openBelow);
+		setMaxHeight(Math.max(0, Math.min(MENU_MAX_HEIGHT, (openBelow ? under : above) - MENU_GUTTER - POPUP_CHROME)));
+	}, []);
+	const attachRoot = useCallback((node) => {
+		rootRef.current = node;
+		if (node) measure();
+	}, [measure]);
+	useEffect(() => {
+		if (!open) return;
+		const node = rootRef.current;
+		const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
+		if (node) observer?.observe(node);
+		window.addEventListener("resize", measure);
+		window.addEventListener("scroll", measure, true);
+		return () => {
+			observer?.disconnect();
+			window.removeEventListener("resize", measure);
+			window.removeEventListener("scroll", measure, true);
+		};
+	}, [open, measure]);
+	const highlightedValue = filtered.some((item) => item.value === highlighted) ? highlighted : filtered[0]?.value;
 	const groups = filtered.reduce((acc, item) => {
 		const group = acc[item.group] ?? [];
 		group.push(item);
 		acc[item.group] = group;
 		return acc;
 	}, {});
+	const menuStyle = { "--prompt-menu-max-h": `${maxHeight}px` };
 	return /* @__PURE__ */ jsxs(Command, {
+		ref: attachRoot,
 		loop: true,
 		className: "tw:relative",
 		shouldFilter: false,
+		value: highlightedValue ?? "",
+		onValueChange: setHighlighted,
 		children: [open && /* @__PURE__ */ jsx("div", {
-			className: cn("tw:absolute tw:bottom-full tw:left-0 tw:right-0 tw:z-50 tw:mb-1", "tw:rounded-md tw:border tw:border-border tw:bg-popover tw:text-popover-foreground tw:shadow-lg"),
-			children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", {
-				className: "tw:px-4 tw:py-3 tw:text-center tw:text-sm tw:text-muted-foreground",
-				children: "No commands found"
+			className: cn("tw:absolute tw:left-0 tw:z-50 tw:w-full tw:max-w-lg", below ? "tw:top-full tw:mt-1" : "tw:bottom-full tw:mb-1", "tw:rounded-[14px] tw:border tw:border-border tw:bg-popover tw:text-popover-foreground tw:shadow-lg", "tw:p-1"),
+			style: menuStyle,
+			children: panel ? /* @__PURE__ */ jsx("div", {
+				className: "tw:p-3",
+				children: panel
+			}) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "tw:py-3 tw:pl-4 tw:text-center tw:text-sm tw:text-muted-foreground",
+				children: emptyText
 			}) : /* @__PURE__ */ jsx(Command.List, {
-				viewPortClassName: "tw:max-h-80",
-				children: Object.entries(groups).map(([groupName, groupItems]) => /* @__PURE__ */ jsx(Command.Group, {
-					heading: groupName,
-					children: groupItems.map((item) => /* @__PURE__ */ jsx(Command.Item, {
+				className: "tw:group-data-[variant=argo]/command:px-1 tw:group-data-[variant=argo]/command:pb-1",
+				viewPortClassName: "tw:max-h-[var(--prompt-menu-max-h)] tw:[&>div]:!block",
+				children: Object.entries(groups).map(([groupName, groupItems], index) => /* @__PURE__ */ jsx(Command.Group, {
+					heading: groupName ? /* @__PURE__ */ jsxs("span", {
+						className: "tw:flex tw:items-center tw:justify-between tw:gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "tw:min-w-0 tw:truncate",
+							children: groupHeading?.(groupName) ?? groupName
+						}), groupAction?.(groupName)]
+					}) : void 0,
+					className: cn("tw:[&_[cmdk-group-heading]]:normal-case", "tw:[&_[cmdk-group-heading]]:tracking-normal", "tw:[&_[cmdk-group-heading]]:border-b-0", "tw:[&_[cmdk-group-heading]]:!py-0", "tw:[&_[cmdk-group-heading]]:mt-2", "tw:[&_[cmdk-group-heading]]:mb-1", "tw:[&_[cmdk-group-heading]]:pl-2", "tw:[&_[cmdk-group-heading]]:text-xs", index > 0 && "tw:mt-3"),
+					children: groupItems.map((item) => /* @__PURE__ */ jsxs(Command.Item, {
 						value: item.value,
-						icon: item.icon,
-						onSelect: () => onSelect(item.value),
-						children: /* @__PURE__ */ jsxs("div", {
+						className: "tw:w-full tw:min-w-0 tw:rounded-md",
+						onSelect: () => onSelect(item),
+						children: [item.icon, /* @__PURE__ */ jsxs("div", {
 							className: "tw:flex tw:min-w-0 tw:flex-1 tw:flex-col",
-							children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.description && /* @__PURE__ */ jsx(Truncated, {
+							children: [item.content ?? /* @__PURE__ */ jsx("span", {
+								className: "tw:truncate",
+								children: item.label
+							}), item.description && /* @__PURE__ */ jsx(Truncated, {
 								text: item.description,
 								twoLines: true,
 								className: "tw:text-xs tw:text-muted-foreground"
 							})]
-						})
+						})]
 					}, item.value))
 				}, groupName))
 			})
@@ -950,6 +1396,27 @@ const PromptInputCommands = ({ items, open, onSelect, filterValue, children }) =
 	});
 };
 //#endregion
+//#region src/blocks/AIKit/PromptInputMenuTrigger.tsx
+/**
+* The composer's "add to message" button.
+*
+* - One glyph for both states: a plus rotated 45° reads as a close cross, so nothing swaps.
+* - `aria-expanded` mirrors `open`; the accessible name changes with it.
+* - Wrapped in `PromptInputAction` so a click does not hand focus to the textarea.
+*/
+const PromptInputMenuTrigger = ({ open = false, large = false, className, ref, ...props }) => /* @__PURE__ */ jsx(PromptInputAction, { children: /* @__PURE__ */ jsx(Button, {
+	ref,
+	type: "button",
+	size: large ? "icon" : "icon-sm",
+	variant: "invisible",
+	"aria-expanded": open,
+	"aria-label": open ? "Close menu" : "Add to message",
+	"data-testid": "prompt-input-menu-trigger",
+	className: cn("tw:rounded-full", "tw:hover:not-disabled:bg-muted tw:hover:not-disabled:text-foreground tw:hover:not-disabled:border-transparent", "tw:aria-expanded:bg-muted", className),
+	...props,
+	children: /* @__PURE__ */ jsx(Plus, { className: cn(large ? "tw:size-5" : "tw:size-4", "tw:transition-transform tw:duration-300 tw:ease-out tw:motion-reduce:transition-none", open && "tw:rotate-135") })
+}) });
+//#endregion
 //#region src/blocks/AIKit/PromptInputSubmit.tsx
 const ARIA_LABEL_BY_STATUS = {
 	ready: "Send message",
@@ -996,6 +1463,42 @@ const CMDK_HIJACKED_KEYS = /* @__PURE__ */ new Set([
 	"Enter"
 ]);
 const isCmdkNavigation = (event) => event.key !== "Enter" || !(event.metaKey || event.ctrlKey || event.altKey);
+/**
+* The `@token` the caret sits at the end of, if any.
+*
+* - `@` has to open a word: it must start the value or follow whitespace.
+* - The token holds no whitespace or second `@` and runs past the caret, so a mid-word pick takes the word.
+* - `start` indexes the `@` itself, so replacing `[start, end)` removes the token.
+*/
+const findMentionToken = (value, caret) => {
+	const before = value.slice(0, caret);
+	const match = /(?:^|\s)@([^\s@]*)$/.exec(before);
+	if (!match) return null;
+	const typed = match[1] ?? "";
+	const tail = /^[^\s@]*/.exec(value.slice(caret))?.[0] ?? "";
+	return {
+		start: caret - typed.length - 1,
+		end: caret + tail.length,
+		query: typed + tail
+	};
+};
+/**
+* The `/token` a message leads with, while the caret is still on it.
+*
+* - Only the first token: the Agent SDK expands a skill only at the start of a message.
+* - Text may follow it.
+* - The caret past the token closes the menu.
+*/
+const findSlashToken = (value, caret) => {
+	const match = /^\/(\S*)/.exec(value);
+	if (!match) return null;
+	const end = match[0].length;
+	if (caret > end) return null;
+	return {
+		end,
+		query: match[1] ?? ""
+	};
+};
 const promptInputVariants = cva([
 	"tailwindcss-preflight",
 	"tw:relative",
@@ -1024,11 +1527,7 @@ const promptInputVariants = cva([
 			"tw:pt-3",
 			"tw:pb-2"
 		],
-		inline: [
-			"tw:flex-row",
-			"tw:py-3",
-			"tw:items-center"
-		]
+		inline: ["tw:flex-col", "tw:py-3"]
 	} }
 });
 const wrapperVariants = cva(null, {
@@ -1038,7 +1537,7 @@ const wrapperVariants = cva(null, {
 		inline: ""
 	} }
 });
-const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, disabled, disableSubmit, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, autoFocus, textareaRef: publishedRef, ...textareaProps }) => {
+const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, attachments, className, disabled, disableSubmit, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, commandsGroupAction, panel, mentions, onMentionSelect, mentionsEmptyText = "Nothing to attach", mentionsGroupHeading, mentionsMultiple = false, autoFocus, textareaRef: publishedRef, ...textareaProps }) => {
 	const defaultMinRows = variant === "inline" ? 1 : 2;
 	const isDisabled = (disabled || disableSubmit || !value.trim()) && status !== "streaming" && status !== "interrupted";
 	const textareaId = useId();
@@ -1048,15 +1547,29 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, dis
 		if (publishedRef) publishedRef.current = node;
 	}, [publishedRef]);
 	const [dismissedValue, setDismissedValue] = useState(null);
+	const [caret, setCaret] = useState(0);
+	const [caretValue, setCaretValue] = useState(value);
+	const moveCaret = (next, forValue) => {
+		setCaret(next);
+		setCaretValue(forValue);
+	};
+	if (value !== caretValue) moveCaret(value.length, value);
 	const autoFocusRef = useRef(autoFocus);
 	useEffect(() => {
 		if (autoFocusRef.current) textareaRef.current?.focus({ preventScroll: true });
 	}, []);
 	if (dismissedValue !== null && value !== dismissedValue) setDismissedValue(null);
 	const hasCommands = !!commands && commands.length > 0;
-	const valueLooksLikeSlashCommand = value.startsWith("/") && !/\s/.test(value);
-	const commandsOpen = hasCommands && valueLooksLikeSlashCommand && value !== dismissedValue;
-	const slashFilter = commandsOpen ? value.slice(1) : "";
+	const panelOpen = panel !== void 0;
+	const hasMentions = mentions !== void 0;
+	const hasMenus = hasCommands || hasMentions;
+	const slashToken = hasCommands && !panelOpen && value !== dismissedValue ? findSlashToken(value, Math.min(caret, value.length)) : null;
+	const commandsOpen = slashToken !== null;
+	const mentionToken = hasMentions && !commandsOpen && !panelOpen && value !== dismissedValue ? findMentionToken(value, Math.min(caret, value.length)) : null;
+	const mentionsOpen = mentionToken !== null;
+	const menuOpen = commandsOpen || mentionsOpen || panelOpen;
+	const menuItems = commandsOpen ? commands ?? [] : mentions ?? [];
+	const menuFilter = commandsOpen ? slashToken.query : mentionToken?.query ?? "";
 	const handleSubmit = () => {
 		if (isDisabled) return;
 		if (status === "streaming") onAbort?.();
@@ -1068,21 +1581,71 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, dis
 		handleSubmit();
 	};
 	const handleOnChange = (event) => {
+		moveCaret(event.target.selectionStart ?? event.target.value.length, event.target.value);
 		onValueChange?.(event.target.value);
 	};
-	const handleCommandSelect = (commandValue) => {
-		onValueChange?.(commandValue + " ");
+	const handleOnSelect = (event) => {
+		moveCaret(event.currentTarget.selectionStart ?? 0, event.currentTarget.value);
+	};
+	const handleMenuSelect = (item) => {
+		if (item.onSelect) {
+			const start = mentionToken?.start ?? 0;
+			const end = mentionToken?.end ?? slashToken?.end;
+			if (end !== void 0) {
+				const next = value.slice(0, start) + value.slice(end);
+				onValueChange?.(next);
+				moveCaret(start, next);
+			}
+			item.onSelect();
+			textareaRef.current?.focus();
+			return;
+		}
+		if (mentionToken) {
+			const keep = mentionsMultiple ? "@" : "";
+			const next = value.slice(0, mentionToken.start) + keep + value.slice(mentionToken.end);
+			const nextCaret = mentionToken.start + keep.length;
+			onValueChange?.(next);
+			moveCaret(nextCaret, next);
+			requestAnimationFrame(() => {
+				textareaRef.current?.setSelectionRange(nextCaret, nextCaret);
+			});
+			onMentionSelect?.(item);
+		} else {
+			const rest = slashToken ? value.slice(slashToken.end).replace(/^\s+/, "") : "";
+			const head = `${item.value} `;
+			onValueChange?.(head + rest);
+			moveCaret(head.length, head + rest);
+			requestAnimationFrame(() => {
+				textareaRef.current?.setSelectionRange(head.length, head.length);
+			});
+		}
 		textareaRef.current?.focus();
 	};
+	const dismissMenu = () => {
+		if (value.trim() === "/" || value.trim() === "@") {
+			onValueChange?.("");
+			return;
+		}
+		if (mentionToken && mentionToken.query === "") {
+			const next = (value.slice(0, mentionToken.start) + value.slice(mentionToken.end)).replace(/\s+$/, "");
+			onValueChange?.(next);
+			moveCaret(next.length, next);
+			return;
+		}
+		setDismissedValue(value);
+	};
 	const handleOnKeyDown = (event) => {
-		if (commandsOpen) {
+		if (menuOpen) {
 			if (event.key === "Escape") {
 				event.preventDefault();
-				setDismissedValue(value);
+				if (panel) panel.onClose();
+				else dismissMenu();
 				return;
 			}
-			if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter") return;
-		} else if (hasCommands && CMDK_HIJACKED_KEYS.has(event.key) && isCmdkNavigation(event)) event.stopPropagation();
+			if (panelOpen) return;
+			if (event.key === "ArrowUp" || event.key === "ArrowDown") return;
+			if (event.key === "Enter" && matchesFilter(menuItems, menuFilter).length > 0) return;
+		} else if (hasMenus && CMDK_HIJACKED_KEYS.has(event.key) && isCmdkNavigation(event)) event.stopPropagation();
 		if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
 			event.preventDefault();
 			if (status !== "streaming") handleSubmit();
@@ -1100,48 +1663,69 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, dis
 			"data-status": status,
 			onMouseDown: handleOnMouseDown,
 			onSubmit: handleOnSubmit,
-			className: cn(promptInputVariants({ variant }), disabled && "tw:bg-none tw:border-border tw:shadow-[inset_0_100vw_rgb(var(--muted))] tw:cursor-default"),
+			className: cn(promptInputVariants({ variant }), disabled && "tw:bg-none tw:border-border tw:shadow-[inset_0_100vw_rgb(var(--muted))] tw:cursor-default", className),
 			children: [
-				prefix && /* @__PURE__ */ jsx("div", {
-					className: "tw:flex tw:items-center",
-					children: prefix
+				/* @__PURE__ */ jsx(AnimatedHeight, {
+					className: "tw:-mb-2",
+					children: attachments && /* @__PURE__ */ jsx("div", {
+						className: "tw:flex tw:flex-col tw:gap-2 tw:pb-4",
+						children: attachments
+					})
 				}),
 				/* @__PURE__ */ jsx("label", {
 					htmlFor: textareaId,
 					className: "tw:sr-only",
 					children: "Prompt Input"
 				}),
-				/* @__PURE__ */ jsx(TextareaAutosize, {
-					...textareaProps,
-					disabled,
-					minRows: minRows ?? defaultMinRows,
-					maxRows,
-					id: textareaId,
-					ref: setTextareaNode,
-					value,
-					onChange: handleOnChange,
-					onKeyDown: handleOnKeyDown,
-					className: cn("tw:resize-none", "tw:outline-hidden", "tw:w-full", "tw:px-2", "tw:bg-transparent", disabled ? "tw:text-muted-foreground" : "tw:text-foreground", "tw:text-sm", "tw:font-sans", "tw:transition-[width]", "tw:delay-75", "tw:ease-linear", "tw:overflow-auto")
-				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: cn("tw:flex tw:items-center tw:gap-4", variant === "inline" ? "tw:items-end" : "tw:items-center"),
-					children: [suffix, /* @__PURE__ */ jsx(PromptInputSubmit, {
-						disabled: isDisabled,
-						status
-					})]
+					className: cn("tw:flex tw:min-w-0 tw:gap-2", variant === "inline" ? "tw:flex-row tw:items-center tw:@max-[480px]/composer:flex-wrap" : "tw:flex-col"),
+					children: [
+						prefix && /* @__PURE__ */ jsx("div", {
+							className: "tw:flex tw:shrink-0 tw:items-center",
+							children: prefix
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: cn("tw:flex tw:min-w-0 tw:items-center", variant === "inline" ? "tw:grow tw:@max-[480px]/composer:order-first tw:@max-[480px]/composer:basis-full" : "tw:flex-1"),
+							children: /* @__PURE__ */ jsx(TextareaAutosize, {
+								...textareaProps,
+								disabled,
+								minRows: minRows ?? defaultMinRows,
+								maxRows,
+								id: textareaId,
+								ref: setTextareaNode,
+								value,
+								onChange: handleOnChange,
+								onSelect: handleOnSelect,
+								onKeyDown: handleOnKeyDown,
+								className: cn("tw:resize-none", "tw:outline-hidden", "tw:min-w-32 tw:flex-1", variant === "inline" ? "tw:@max-[480px]/composer:pl-2" : "tw:pl-2 tw:pr-0", "tw:bg-transparent", disabled ? "tw:text-muted-foreground" : "tw:text-foreground", "tw:text-sm", "tw:font-sans", "tw:transition-[width]", "tw:delay-75", "tw:ease-linear", "tw:overflow-auto")
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: cn("tw:flex tw:items-center tw:gap-1", "tw:[&>*:last-child]:ml-1", "tw:shrink-0", variant === "inline" && "tw:pr-2.5 tw:@max-[480px]/composer:grow tw:@max-[480px]/composer:pr-0"),
+							children: [suffix, /* @__PURE__ */ jsx(PromptInputSubmit, {
+								disabled: isDisabled,
+								status
+							})]
+						})
+					]
 				})
 			]
 		})
 	});
-	return /* @__PURE__ */ jsx(TooltipProvider, { children: hasCommands ? /* @__PURE__ */ jsx(PromptInputCommands, {
-		items: commands ?? [],
-		open: commandsOpen,
-		onSelect: handleCommandSelect,
-		filterValue: slashFilter,
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: hasMenus ? /* @__PURE__ */ jsx(PromptInputCommands, {
+		items: menuItems,
+		open: menuOpen,
+		onSelect: handleMenuSelect,
+		filterValue: menuFilter,
+		emptyText: mentionsOpen ? mentionsEmptyText : "No commands found",
+		panel: panel?.content,
+		groupAction: commandsOpen ? commandsGroupAction : void 0,
+		groupHeading: mentionsOpen ? mentionsGroupHeading : void 0,
 		children: formEl
 	}) : formEl });
 };
 PromptInput.Action = PromptInputAction;
+PromptInput.MenuTrigger = PromptInputMenuTrigger;
 //#endregion
 //#region src/blocks/AIKit/Question.tsx
 const handleKeyDown = (callback) => (e) => {
@@ -1154,6 +1738,10 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 	const [isCustomExpanded, setIsCustomExpanded] = useState(false);
 	const isCustomSelected = isCustomExpanded || customAnswer.length > 0;
 	const hasSteps = currentStep != null && totalSteps != null;
+	const showStepControls = hasSteps && totalSteps > 1;
+	const showSkipButton = showSkip && onSkip != null;
+	const showSubmitButton = multiSelect || isCustomSelected;
+	const showFooter = showStepControls || showSkipButton || showSubmitButton;
 	const progressValue = hasSteps ? currentStep / totalSteps * 100 : 0;
 	const isFirstStep = currentStep === 1;
 	const isLastStep = hasSteps && currentStep === totalSteps;
@@ -1280,14 +1868,14 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw:flex tw:flex-col",
-				children: [hasSteps && /* @__PURE__ */ jsx(Progress, {
+				children: [showStepControls && /* @__PURE__ */ jsx(Progress, {
 					size: "sm",
 					value: progressValue,
 					className: "tw:rounded-none"
-				}), /* @__PURE__ */ jsxs("div", {
-					className: cn("tw:flex tw:items-center tw:justify-end tw:gap-4 tw:px-4 tw:py-3", !hasSteps && "tw:border-0 tw:border-t tw:border-solid tw:border-border"),
+				}), showFooter && /* @__PURE__ */ jsxs("div", {
+					className: cn("tw:flex tw:items-center tw:justify-end tw:gap-4 tw:px-4 tw:py-3", !showStepControls && "tw:border-0 tw:border-t tw:border-solid tw:border-border"),
 					children: [
-						hasSteps && /* @__PURE__ */ jsxs("div", {
+						showStepControls && /* @__PURE__ */ jsxs("div", {
 							className: "tw:flex tw:items-center tw:gap-2",
 							children: [
 								/* @__PURE__ */ jsx("button", {
@@ -1316,14 +1904,14 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 								})
 							]
 						}),
-						showSkip && onSkip && /* @__PURE__ */ jsx(Button, {
+						showSkipButton && /* @__PURE__ */ jsx(Button, {
 							variant: "outline",
 							size: "small",
 							onClick: onSkip,
 							"data-testid": "question-skip-button",
 							children: "Skip"
 						}),
-						(multiSelect || isCustomSelected) && (submitTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+						showSubmitButton && (submitTooltip ? /* @__PURE__ */ jsx(Tooltip, {
 							tooltip: submitTooltip,
 							placement: "top",
 							triggerAsChild: true,
@@ -1656,6 +2244,25 @@ const formatPercentage = (value) => {
 	return `${value < 100 ? Math.min(rounded, 99) : rounded}%`;
 };
 //#endregion
+//#region src/blocks/AIKit/UsageBar.tsx
+/**
+* One budget, as a labelled row over a bar.
+*
+* - `value` is clamped by `clampPercentage` — `Progress`'s indicator is unclamped.
+*/
+const UsageBar = ({ value, label, variant, className, ...props }) => /* @__PURE__ */ jsxs("span", {
+	...props,
+	className: cn("tw:flex tw:flex-col tw:gap-1.5 tw:text-xs tw:text-muted-foreground", className),
+	children: [/* @__PURE__ */ jsxs("span", {
+		className: "tw:flex tw:items-baseline tw:justify-between tw:gap-2",
+		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", { children: `${formatPercentage(Math.max(0, 100 - value))} left` })]
+	}), /* @__PURE__ */ jsx(Progress, {
+		size: "sm",
+		variant,
+		value: clampPercentage(value)
+	})]
+});
+//#endregion
 //#region src/blocks/AIKit/UsageStatsRing.tsx
 const UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }) => {
 	const radius = Math.max(0, (size - strokeWidth) / 2 - 1);
@@ -1698,9 +2305,10 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 		onOpenChange,
 		children: [/* @__PURE__ */ jsx(HoverCard.Trigger, {
 			asChild: true,
-			children: /* @__PURE__ */ jsxs("span", {
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
 				"aria-label": ariaLabel ?? defaultLabel,
-				className: cn("tw:relative tw:inline-flex tw:size-8 tw:items-center tw:justify-center", className),
+				className: cn("tw:relative tw:inline-flex tw:size-8 tw:shrink-0 tw:items-center tw:justify-center", "tw:cursor-pointer tw:rounded-full tw:border-0 tw:bg-transparent tw:p-0", "tw:transition-colors tw:hover:bg-muted", "tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-ring/50", className),
 				children: [/* @__PURE__ */ jsx(UsageStatsRing, { value }), hasAlert && /* @__PURE__ */ jsx(AlertCircle, {
 					"data-testid": "usage-stats-alert",
 					className: cn("tw:absolute tw:-right-0.5 tw:-top-0.5 tw:size-3", isWarning ? "tw:text-warning-500" : "tw:text-error-500")
@@ -1715,6 +2323,6 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 	});
 };
 //#endregion
-export { AnswerActions, AnswerSummary, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageStats, UsageStatsRing, clampPercentage, formatPercentage };
+export { AnswerActions, AnswerSummary, ChatInlineIcon, CollapsibleStepHeader, DIAGRAM_LANGUAGES, FileDownloadChip, InlineStepDetail, InlineStepGroup, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PROMPT_INPUT_CONTAINER, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, findMentionToken, findSlashToken, formatPercentage, getChatInlineIconName };
 
-//# sourceMappingURL=AIKit-CQxVwyAk.js.map
+//# sourceMappingURL=AIKit-BD4r7ff-.js.map