@keboola/design 11.9.0 → 13.0.0

package/dist/{AIKit-ELIsegJz.js → AIKit-DcOlHIBr.js}

@@ -1,23 +1,23 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-BW4AE8VP.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-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-B21oVcPU.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
-import { ClipboardButton } from "./ClipboardButton-KHQnPEh_.js";
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-CN9nAs72.js";
+import { ClipboardButton } from "./ClipboardButton-srUgWgwH.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-Cwnm8WdM.js";
 import { Truncated } from "./internal/components/Truncated.js";
-import { HoverCard } from "./HoverCard-B9ZMJxjn.js";
-import { Command } from "./Command-BDU3C1gg.js";
-import { TextInput } from "./TextInput-CFTf4Cz1.js";
-import { Checkbox } from "./Checkbox-Dq5fPNrO.js";
-import { Badge } from "./Badge-o5jURtpB.js";
+import { HoverCard } from "./HoverCard-B8OKu9XZ.js";
+import { Command } from "./Command-BQPiZCNz.js";
+import { TextInput } from "./TextInput-BWYXbfs4.js";
+import { Checkbox } from "./Checkbox-8yIIgY7g.js";
+import { Badge } from "./Badge-DIjhwPvh.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { Table as Table$1 } 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 { createContext, isValidElement, use, 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";
@@ -35,7 +35,7 @@ const DEFAULT_LABELS = {
 	up: "Good answer",
 	down: "Bad answer"
 };
-/** Roomier for a panel a reader sits in; the compact one suits a row inside a dense transcript. */
+/** Roomier for a panel; compact for a dense transcript. */
 const SIZES = {
 	small: {
 		button: "icon-xs",
@@ -47,16 +47,11 @@ const SIZES = {
 	}
 };
 /**
-* 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, onCopy, actions, labels = DEFAULT_LABELS, confirmation, size = "small", layout = "inline" }) => {
 	const { button, gap } = SIZES[size];
@@ -247,15 +242,9 @@ const AnswerSummary = ({ items, variant = "success", noAnswerLabel = "No answer"
 /**
 * The Lucide component each `icon:<name>` token draws.
 *
-* - The names are FontAwesome-solid ones: kai-agent's prompt teaches that vocabulary, and
-*   `@keboola/agent-vocabulary` publishes it as `CHAT_INLINE_ICON_NAMES`.
-* - `satisfies Record<ChatInlineIconName, LucideIcon>` is the drift guard — a name the prompt
-*   teaches and this map lacks is a compile error, not a token that silently disappears from an
-*   answer.
-* - Several names map to one component on purpose: FA distinguishes `gear` from `cog` and
-*   `warning` from `triangle-exclamation`; Lucide draws each pair with one icon.
-* - Read through `Object.hasOwn`, never by plain index: a model-emitted `icon:constructor`
-*   otherwise answers with an `Object.prototype` member and React tries to render it.
+* - 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,
@@ -353,50 +342,29 @@ const ICON_REGISTRY = {
 	zap: Zap
 };
 /**
-* Extra classes a single name needs on top of the shared list.
+* Extra classes a single name needs.
 *
-* - `spinner` is the only one: `MAINTAINING.md` maps it to `Loader2` *plus* `tw:animate-spin`,
-*   because Lucide draws the arc and leaves the motion to the caller. A still `Loader2` reads as
-*   a damaged ring, not as waiting.
-* - Read through `Object.hasOwn`, for the same reason the registry is.
+* - `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.
 *
-* - Anchored at both ends, and over the same name shape `remarkIconSyntax` (in
-*   `@keboola/kai-chat`) matches when it turns bare text into an `inlineCode` node. The two
-*   have to agree: a looser reader here accepts inline code the plugin never produced.
-* - That is what keeps ordinary inline code ordinary. A prefix test alone claims
-*   `` `icon: database` ``, `` `icon:` `` and a fence body starting `icon:` — text the plugin
-*   never turned into a token, and none of it is an icon the author asked for.
+* - 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 only ever the start of one this registry draws.
-*
-* - Strictly shorter, so a whole name is never read as an unfinished one.
-* - `tabl` → `true` (`table`); `unicorn` and `table-name` → `false`.
-*/
+/** 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.
 *
-* - `icon:table` → `table`; anything else, including `icon: table`, `icon:Table` and
-*   `icon:unicorn` → `undefined`.
-* - A name the registry lacks answers `undefined` on purpose, so every call site's own `<code>`
-*   fall-through keeps the text its author typed. `icon:` is an ordinary way to name a property,
-*   and this renderer draws vendor descriptions and dashboard text as well as agent answers.
-* - A name that only starts one it draws is a token still arriving, answered with so that
-*   `<ChatInlineIcon />` draws nothing: an answer streams `icon:t`, `icon:ta`, `icon:tab` before
-*   the name lands, and each of those as code is a chip that reflows the line for a frame.
-* - A name that is both — `save`, the start of `save-changes` — is drawn now; waiting would leave
-*   a finished token blank for the rest of the answer.
-* - The token reaches a renderer as inline code either because the model wrote it in backticks
-*   or because a remark plugin turned the bare text into an `inlineCode` node. Parsing the
-*   token is the vocabulary's; producing it is the app's, since the plugin is workspace-internal.
+* - 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];
@@ -406,19 +374,10 @@ const getChatInlineIconName = (text) => {
 /**
 * One inline `icon:<name>` token, drawn at the size of the text it leads.
 *
-* - An unknown name renders nothing, which is how a token still arriving (`icon:tabl`) stays
-*   blank instead of flashing as a code chip. A name `getChatInlineIconName` withholds keeps its
-*   text at the call site's own `<code>` fall-through and never reaches here.
-* - `size-[1em]` tracks the font size, so the icon matches a heading instead of sitting small
-*   beside it, and `align-[-0.125em]` on an inline-block optically centres it against the
-*   baseline.
-* - `mr` tops up the single source space, which is a word gap and reads as cramped between a
-*   glyph and the phrase it labels.
-* - A heavier stroke so an outline icon holds its own next to the bold weight a heading carries.
-* - `spinner` also spins; the mapping owns that, not the caller. See `ICON_CLASSES`.
-* - `aria-hidden`, because the glyph is decorative: the token's text is removed from the answer and
-*   nothing replaces it as a label, so a reader that announces unnamed inline SVGs would read an
-*   unlabelled graphic before every phrase the agent decorates.
+* - 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;
@@ -430,34 +389,48 @@ const ChatInlineIcon = ({ name }) => {
 	});
 };
 //#endregion
-//#region src/blocks/AIKit/InlineStepGroup.tsx
+//#region src/blocks/AIKit/FileDownloadChip.tsx
 /**
-* The surface colour, as the custom property the step icons mask against.
+* A file the agent wrote, offered inside its own answer.
 *
-* - Annotated rather than asserted: `CSSProperties` admits no custom property of its own, and
-*   an intersection with the one this sets keeps the value type-checked at the assignment.
+* - 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 run of steps an agent took, behind one line that says how far along it is.
+* A collapsible run of agent steps behind one summary line; rows arrive as children.
 *
-* - The frame only. What a step *says* is the host's — one product names buckets and tables,
-*   another must never put those words on screen — so the rows arrive as children and this
-*   supplies the header, the collapse, the connector and the rhythm they share.
-* - One rule behind the whole run at the icon centre line: the list's `pl-5` plus half a
-*   `size-5` icon box. Drawn once rather than per row, so it does not vanish beside a row that
-*   happens to have no icon.
-* - `grid-template-rows` rather than height, because the rows are text of unknown length and a
-*   transition needs a number at both ends. The children stay mounted while closed: a group the
-*   reader reopens must not re-run whatever mounting a row costs. A closed group is `inert` and
-*   `aria-hidden`, so staying mounted does not mean staying reachable.
-* - Expansion is the caller's state. Whether a group opens itself while work is happening, and
-*   whether a reader's own toggle outranks that, is a transcript-level decision.
-* - `role="group"` rather than the `<section>`'s own landmark semantics: a transcript draws one
-*   of these per run of steps, so a long conversation would hand a screen reader a landmark
-*   list of dozens of identically named `region`s and drown the page's real landmarks in it.
-*   The name still reads — a named `group` is announced by it — and it is the role the
-*   grounding panel already gives its repeated named answer sections.
+* - 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",
@@ -491,16 +464,10 @@ const InlineStepGroup = ({ label, variant = "success", isExpanded, onToggle, sur
 /**
 * 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);
@@ -539,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;
@@ -565,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);
@@ -580,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,
@@ -608,38 +563,21 @@ 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.
 *
-* - A fence with no info string reaches `code` with no `language-…` class, exactly like inline
-*   code, so the class cannot tell the two apart — `pre` is the only boundary that can.
-* - Set by the `pre` renderer, read by `code`: React renders `pre` before its children, so the
-*   value is in place by the time the `code` inside it renders.
+* - Set by `pre`: a fence without info string has no `language-…` class, like inline code.
 */
 const CodeBlockContext = createContext(false);
 /**
-* The `code` renderer: an `icon:<name>` token becomes the icon it names, anything else stays code.
+* The `code` renderer: an inline `icon:<name>` token becomes the icon it names.
 *
-* - Only inline code is a candidate: a fenced block's body is code the reader asked to see, and
-*   swapping it for a glyph would drop it. `CodeBlockContext` is what separates the two — a fence
-*   with no info string carries no `language-…` class either, so the class cannot.
-* - The token reaches here as inline code because `remarkIconSyntax` (in `@keboola/kai-chat`)
-*   turned the bare text into one, or because the model wrote the backticks itself. Producing the
-*   token is the app's, drawing it is this package's.
-* - A name no icon answers to stays code: `getChatInlineIconName` answers only for names the
-*   registry can draw or is still receiving, and this renderer draws vendor descriptions and
-*   dashboard text too, where `icon:` is an ordinary way to name a property.
-* - A name still arriving draws nothing, so a streamed `icon:tabl` is blank for a frame rather
-*   than a code chip that reflows the line.
-* - A component rather than an inline renderer so it can read the context.
+* - Fenced blocks never swap.
+* - Unknown names stay code; a name still streaming renders nothing.
 */
 const MarkdownCode = ({ children, className, ...props }) => {
 	const { node: _node, ...rest } = props;
@@ -731,54 +669,60 @@ const baseComponents = {
 	}
 };
 /**
-* 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);
@@ -888,7 +832,7 @@ const contentClasses = cva([
 			"tw:py-2",
 			"tw:rounded-xl",
 			"tw:overflow-hidden",
-			"tw:break-anywhere"
+			"tw:wrap-anywhere"
 		]
 	} },
 	defaultVariants: { variant: "assistant" }
@@ -1233,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) => {
@@ -1249,24 +1245,81 @@ const PromptInputAction = ({ ref, onMouseDown, ...rest }) => {
 //#region src/blocks/AIKit/PromptInputCommands.tsx
 /** What the menu needs above or below the composer before it will open on that side. */
 const MENU_HEIGHT = 440;
-const PromptInputCommands = ({ items, open, onSelect, filterValue, emptyText = "No commands found", onClose, children }) => {
-	const filtered = filterValue ? items.filter((item) => item.label.toLowerCase().includes(filterValue.toLowerCase()) || item.value.toLowerCase().includes(filterValue.toLowerCase())) : items;
+/** 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: a composer usually sits at the foot of its panel.
-	* - Below when there is not room above and there is room below — the dashboard composer sits
-	*   near the top of the page, where opening upward clipped the list against the header.
-	* - Re-measured while it is open: the composer grows as the message does, and the transcript
-	*   above it moves, so the side that fit on open may not fit a moment later.
+	* - 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 box = rootRef.current?.getBoundingClientRect();
-		if (!box) return;
-		setBelow(box.top < MENU_HEIGHT && window.innerHeight - box.bottom > MENU_HEIGHT);
+		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;
@@ -1292,6 +1345,7 @@ const PromptInputCommands = ({ items, open, onSelect, filterValue, emptyText = "
 		acc[item.group] = group;
 		return acc;
 	}, {});
+	const menuStyle = { "--prompt-menu-max-h": `${maxHeight}px` };
 	return /* @__PURE__ */ jsxs(Command, {
 		ref: attachRoot,
 		loop: true,
@@ -1299,41 +1353,45 @@ const PromptInputCommands = ({ items, open, onSelect, filterValue, emptyText = "
 		shouldFilter: false,
 		value: highlightedValue ?? "",
 		onValueChange: setHighlighted,
-		children: [open && /* @__PURE__ */ jsxs("div", {
+		children: [open && /* @__PURE__ */ jsx("div", {
 			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"),
-			children: [onClose && /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				size: "icon-xs",
-				variant: "invisible",
-				"aria-label": "Close",
-				className: "tw:absolute tw:right-2 tw:top-2 tw:z-10",
-				onMouseDown: (event) => event.preventDefault(),
-				onClick: onClose,
-				children: /* @__PURE__ */ jsx(X, {})
-			}), filtered.length === 0 ? /* @__PURE__ */ jsx("div", {
-				className: "tw:px-4 tw:py-3 tw:text-center tw:text-sm tw:text-muted-foreground",
+			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, {
 				className: "tw:group-data-[variant=argo]/command:px-1 tw:group-data-[variant=argo]/command:pb-1",
-				viewPortClassName: "tw:max-h-[26rem]",
+				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,
-					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]]:pr-9", "tw:[&_[cmdk-group-heading]]:text-xs", index > 0 && "tw:mt-3"),
-					children: groupItems.map((item) => /* @__PURE__ */ jsx(Command.Item, {
+					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,
-						className: "tw:rounded-md",
+						className: "tw:w-full tw:min-w-0 tw:rounded-md",
 						onSelect: () => onSelect(item),
-						children: /* @__PURE__ */ jsxs("div", {
+						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))
-			})]
+			})
 		}), children]
 	});
 };
@@ -1404,7 +1462,49 @@ const CMDK_HIJACKED_KEYS = /* @__PURE__ */ new Set([
 	"End",
 	"Enter"
 ]);
-const isCmdkNavigation = (event) => event.key !== "Enter" || !(event.metaKey || event.ctrlKey || event.altKey);
+/**
+* Whether the composer's always-mounted cmdk root would act on this keystroke, cancelling its default.
+*
+* - cmdk acts on every `CMDK_HIJACKED_KEYS` key regardless of modifiers, except a modified Enter.
+* - The textarea and the form stop these from bubbling, or a focused button never clicks on Enter.
+*/
+const isCmdkNavigation = (event) => CMDK_HIJACKED_KEYS.has(event.key) && (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",
@@ -1443,7 +1543,7 @@ const wrapperVariants = cva(null, {
 		inline: ""
 	} }
 });
-const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, attachments, className, 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();
@@ -1453,16 +1553,29 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 		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 hasMenus = !!commands && commands.length > 0;
-	const valueLooksLikeSlashCommand = value.startsWith("/") && !/\s/.test(value);
-	const menuOpen = hasMenus && valueLooksLikeSlashCommand && value !== dismissedValue;
-	const menuItems = commands ?? [];
-	const menuFilter = value.slice(1);
+	const hasCommands = !!commands && commands.length > 0;
+	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?.();
@@ -1474,28 +1587,83 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 		handleSubmit();
 	};
 	const handleOnChange = (event) => {
+		moveCaret(event.target.selectionStart ?? event.target.value.length, event.target.value);
 		onValueChange?.(event.target.value);
 	};
+	const handleOnSelect = (event) => {
+		moveCaret(event.currentTarget.selectionStart ?? 0, event.currentTarget.value);
+	};
 	const handleMenuSelect = (item) => {
-		onValueChange?.(item.value + " ");
+		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 (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 (hasMenus && 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 && isCmdkNavigation(event)) event.stopPropagation();
 		if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
 			event.preventDefault();
 			if (status !== "streaming") handleSubmit();
 		}
 	};
+	const handleOnFormKeyDown = (event) => {
+		if (hasMenus && event.target !== textareaRef.current && isCmdkNavigation(event)) event.stopPropagation();
+	};
 	const handleOnMouseDown = (event) => {
-		if (event.target === textareaRef.current) return;
+		const { currentTarget, target } = event;
+		if (target === textareaRef.current) return;
+		if (!(target instanceof Node && currentTarget.contains(target))) return;
 		event.preventDefault();
 		textareaRef.current?.focus();
 	};
@@ -1504,13 +1672,17 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 		children: /* @__PURE__ */ jsxs("form", {
 			"data-testid": "prompt-input",
 			"data-status": status,
+			onKeyDown: handleOnFormKeyDown,
 			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),
 			children: [
-				attachments && /* @__PURE__ */ jsx("div", {
-					className: "tw:flex tw:flex-col tw:gap-2 tw:pb-2",
-					children: attachments
+				/* @__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,
@@ -1518,14 +1690,14 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 					children: "Prompt Input"
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: cn("tw:flex tw:min-w-0 tw:gap-2", variant === "inline" ? "tw:flex-row tw:items-center" : "tw:flex-col"),
+					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: "tw:flex tw:min-w-0 tw:flex-1 tw:items-center",
+							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,
@@ -1535,12 +1707,13 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 								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:px-0" : "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")
+								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:shrink-0 tw:items-center tw:gap-1", "tw:[&>*:last-child]:ml-1", variant === "inline" && "tw:pr-2.5"),
+							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
@@ -1556,8 +1729,10 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 		open: menuOpen,
 		onSelect: handleMenuSelect,
 		filterValue: menuFilter,
-		emptyText: "No commands found",
-		onClose: () => setDismissedValue(value),
+		emptyText: mentionsOpen ? mentionsEmptyText : "No commands found",
+		panel: panel?.content,
+		groupAction: commandsOpen ? commandsGroupAction : void 0,
+		groupHeading: mentionsOpen ? mentionsGroupHeading : void 0,
 		children: formEl
 	}) : formEl });
 };
@@ -2041,7 +2216,7 @@ const ToolCallStatusHeader = ({ icon: IconComponent, iconSpin, status, text, nee
 			className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-center tw:gap-1.5",
 			children: [/* @__PURE__ */ jsx(IconComponent, { className: cn("tw:size-3.5 tw:shrink-0", statusIconInk[status], iconSpin && "tw:animate-spin") }), /* @__PURE__ */ jsx("span", {
 				"data-testid": "tool-status-text",
-				className: cn("tw:truncate tw:pr-0.5 tw:text-xs tw:font-medium", statusInk[status]),
+				className: cn("tw:truncate tw:pr-0.5 tw:text-xs tw:font-medium", needsConfirmation ? "tw:text-foreground" : statusInk[status]),
 				children: text
 			})]
 		}), (needsConfirmation || isCollapsible) && /* @__PURE__ */ jsxs("div", {
@@ -2085,9 +2260,7 @@ const formatPercentage = (value) => {
 /**
 * One budget, as a labelled row over a bar.
 *
-* - The label and the figure sit on one baseline at either end of the row; the bar spans both.
-* - `value` over 100 or `NaN` is clamped by `clampPercentage` — `Progress`'s indicator is
-*   unclamped and would otherwise slide off the row.
+* - `value` is clamped by `clampPercentage` — `Progress`'s indicator is unclamped.
 */
 const UsageBar = ({ value, label, variant, className, ...props }) => /* @__PURE__ */ jsxs("span", {
 	...props,
@@ -2162,6 +2335,6 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 	});
 };
 //#endregion
-export { AnswerActions, AnswerSummary, ChatInlineIcon, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepGroup, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, formatPercentage, getChatInlineIconName };
+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-ELIsegJz.js.map
+//# sourceMappingURL=AIKit-DcOlHIBr.js.map