@cueplusplus/ui 0.13.0

package/dist/chat/agent-pile.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+//#region src/chat/agent-pile.d.ts
+/** Rung of the control ladder the avatars sit on. */
+type AgentPileSize = "sm" | "md" | "lg";
+/** One agent in the roster. */
+interface AgentPileEntry {
+  /** Stable identifier. Decides the colour, and comes back through `onSelect`. */
+  slug: string;
+  /** Display name. Defaults to `slug`. */
+  name?: string;
+  /** A run of this agent's is in flight — draws the working arc. */
+  working?: boolean;
+  /** This agent is waiting on the user — draws the `?` badge. */
+  asking?: boolean;
+}
+interface AgentPileProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onSelect"> {
+  /** The roster, in the order it should read. Renders nothing when empty. */
+  agents: readonly AgentPileEntry[];
+  /** Slug of the orchestrator: takes the theme accent and wears the crown. */
+  root?: string;
+  /** Slug of the lane currently open — that avatar gets a ring. */
+  selected?: string;
+  /** Called with a slug when an avatar is pressed. Omit for a read-only pile. */
+  onSelect?: (slug: string) => void;
+  /** Show at most this many; the rest collapse into a `+N` chip. */
+  max?: number;
+  /** Force the fan open or shut. Omit to let hover and focus decide. */
+  fanned?: boolean;
+  /** Rung of the control ladder. Defaults to `"md"`. */
+  size?: AgentPileSize;
+  /** Accessible name for the group. Required in practice — name the roster. */
+  "aria-label"?: string;
+}
+/**
+ * The roster of agents working on a thread, stacked into one object.
+ *
+ * Three states ride on each avatar, and none of them is colour-only: the
+ * orchestrator wears a crown, a working agent gets a spinning arc, and an agent
+ * waiting on the user gets a `?` badge — each of them also spelled into the
+ * avatar's accessible name, so a screen reader hears "Researcher · working"
+ * rather than nothing at all.
+ *
+ * Avatars are outlined in the agent's colour rather than filled with it. A fill
+ * would put arbitrary-hue ink on an arbitrary-hue ground at 20px; the outline
+ * treatment is the same tinted-chip recipe the rest of the system uses and
+ * stays legible on every theme.
+ *
+ * @example
+ * <AgentPile aria-label="Agents" agents={roster} root="chief" onSelect={openLane} />
+ * @example
+ * <AgentPile aria-label="Agents" agents={roster} max={5} fanned />
+ */
+declare const AgentPile: React.ForwardRefExoticComponent<AgentPileProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AgentPile, AgentPileEntry, AgentPileProps, AgentPileSize };

package/dist/chat/agent-pile.js

@@ -0,0 +1,121 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { agentColor } from "./agent-color.js";
+import { CrownGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/agent-pile.tsx
+const AVATAR_SIZES = {
+	sm: "size-control-sm text-(length:--cue-text-micro)",
+	md: "size-control-md text-(length:--cue-text-label)",
+	lg: "size-control-lg text-(length:--cue-text-ui)"
+};
+/**
+* The fan.
+*
+* Collapsed, avatars overlap by 12px so a roster of eight still reads as one
+* object; hovering (or focusing into) the pile pushes them out to a 4px gap so
+* every face is clickable. Logical margins, so the stack flips in RTL, and the
+* transition stills under `prefers-reduced-motion`.
+*/
+const OVERLAP = "[margin-inline-start:-0.75rem]";
+const FANNED = "[margin-inline-start:0.25rem]";
+const FAN_ON_HOVER = "group-hover/pile:[margin-inline-start:0.25rem] group-focus-within/pile:[margin-inline-start:0.25rem]";
+/**
+* The roster of agents working on a thread, stacked into one object.
+*
+* Three states ride on each avatar, and none of them is colour-only: the
+* orchestrator wears a crown, a working agent gets a spinning arc, and an agent
+* waiting on the user gets a `?` badge — each of them also spelled into the
+* avatar's accessible name, so a screen reader hears "Researcher · working"
+* rather than nothing at all.
+*
+* Avatars are outlined in the agent's colour rather than filled with it. A fill
+* would put arbitrary-hue ink on an arbitrary-hue ground at 20px; the outline
+* treatment is the same tinted-chip recipe the rest of the system uses and
+* stays legible on every theme.
+*
+* @example
+* <AgentPile aria-label="Agents" agents={roster} root="chief" onSelect={openLane} />
+* @example
+* <AgentPile aria-label="Agents" agents={roster} max={5} fanned />
+*/
+const AgentPile = React.forwardRef(function AgentPile({ className, agents, root, selected, onSelect, max, fanned, size = "md", "aria-label": ariaLabel, ...elementProps }, ref) {
+	if (agents.length === 0) return null;
+	const visible = max === void 0 ? agents : agents.slice(0, Math.max(0, max));
+	const overflow = agents.length - visible.length;
+	const spacing = fanned === true ? FANNED : fanned === false ? OVERLAP : cn(OVERLAP, FAN_ON_HOVER);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": ariaLabel,
+		"data-slot": "agent-pile",
+		"data-fanned": fanned === void 0 ? void 0 : String(fanned),
+		className: cn("group/pile flex min-w-0 items-center", className),
+		...elementProps,
+		children: [visible.map((agent, index) => {
+			const isRoot = agent.slug === root;
+			const name = agent.name ?? agent.slug;
+			const label = [
+				name,
+				isRoot ? "orchestrator" : null,
+				agent.working === true ? "working" : null,
+				agent.asking === true ? "asking a question" : null
+			].filter(Boolean).join(" · ");
+			const avatarClasses = cn("relative flex shrink-0 items-center justify-center rounded-full border border-(--agent-color) bg-surface-2 font-mono leading-none text-(--agent-color) uppercase outline-none", AVATAR_SIZES[size], selected === agent.slug ? "ring-2 ring-(--agent-color)" : null, onSelect === void 0 ? null : "cursor-pointer transition-colors hover:bg-surface-3 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent");
+			const initial = name.slice(0, 1).toUpperCase();
+			return /* @__PURE__ */ jsxs("span", {
+				"data-slot": "agent-pile-item",
+				"data-slug": agent.slug,
+				"data-root": isRoot ? "" : void 0,
+				"data-working": agent.working === true ? "" : void 0,
+				"data-asking": agent.asking === true ? "" : void 0,
+				"data-selected": selected === agent.slug ? "" : void 0,
+				className: cn("relative inline-flex rounded-full ring-1 ring-bg transition-[margin] duration-150 ease-out motion-reduce:transition-none", index === 0 ? null : spacing, agent.working === true ? "z-10" : null),
+				style: { "--agent-color": agentColor(agent.slug, { root }) },
+				children: [
+					onSelect === void 0 ? /* @__PURE__ */ jsx("span", {
+						role: "img",
+						"aria-label": label,
+						className: avatarClasses,
+						children: /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: initial
+						})
+					}) : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": label,
+						"aria-pressed": selected === void 0 ? void 0 : selected === agent.slug,
+						className: avatarClasses,
+						onClick: () => onSelect(agent.slug),
+						children: /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: initial
+						})
+					}),
+					isRoot ? /* @__PURE__ */ jsx(CrownGlyph, {
+						"data-slot": "agent-pile-crown",
+						className: "pointer-events-none absolute -top-[0.3rem] -start-[0.2rem] size-icon-sm -rotate-[18deg] text-(--agent-color)"
+					}) : null,
+					agent.working === true ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-slot": "agent-pile-arc",
+						className: "pointer-events-none absolute -inset-[2px] animate-spin rounded-full border border-transparent [border-inline-end-color:var(--agent-color)] [border-top-color:var(--agent-color)] motion-reduce:animate-none"
+					}) : null,
+					agent.asking === true ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-slot": "agent-pile-asking",
+						className: "pointer-events-none absolute -top-[0.15rem] -end-[0.15rem] flex size-[0.75rem] items-center justify-center rounded-full bg-accent font-mono text-[0.5rem] leading-none text-accent-fg ring-1 ring-bg",
+						children: "?"
+					}) : null
+				]
+			}, agent.slug);
+		}), overflow > 0 ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "agent-pile-overflow",
+			className: cn("relative inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-surface-3 font-mono leading-none text-fg-muted ring-1 ring-bg transition-[margin] duration-150 ease-out motion-reduce:transition-none", AVATAR_SIZES[size], spacing),
+			children: `+${overflow}`
+		}) : null]
+	});
+});
+//#endregion
+export { AgentPile };

package/dist/chat/ask-box.d.ts

@@ -0,0 +1,88 @@
+import * as React from "react";
+//#region src/chat/ask-box.d.ts
+/** The shapes an answer can take. `text` is the fallback for anything unmodelled. */
+type AskKind = "text" | "single" | "multi" | "boolean" | "number";
+/** How much damage saying yes could do. Rated by the asker, painted in the shared tones. */
+type AskDanger = "low" | "high" | "critical";
+/** What comes back through `onAnswer`, shaped by {@link AskKind}. */
+type AskAnswer = string | readonly string[] | boolean | number;
+/** One choice offered by a `single` or `multi` question. */
+interface AskOption {
+  /** The value handed back through `onAnswer`. */
+  value: string;
+  /** What the reader sees. Defaults to `value`. */
+  label?: React.ReactNode;
+  /** A second line under the label — when the choice needs explaining. */
+  description?: React.ReactNode;
+}
+interface AskBoxProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onSubmit" | "defaultValue"> {
+  /** The question, as text or nodes. Rendered verbatim — never parsed. */
+  question: React.ReactNode;
+  /** Which widget to offer. Defaults to `"text"`. */
+  kind?: AskKind;
+  /** Choices for a `single` or `multi` question. */
+  options?: readonly AskOption[];
+  /** Fired once with the answer. The host is responsible for resuming the run. */
+  onAnswer: (value: AskAnswer) => void;
+  /**
+   * The answer, once there is one. Present means answered: the box collapses to
+   * a one-line summary and stops accepting input.
+   */
+  answer?: AskAnswer;
+  /** Slug of the agent asking, for the byline and the box's colour. */
+  asker?: string;
+  /** Slug of the orchestrator, so its questions take the theme accent. */
+  rootAgent?: string;
+  /** Tool this question is approving, if it is an approval. */
+  tool?: string;
+  /** Risk rating for the tool call. Omit for a plain question. */
+  danger?: AskDanger;
+  /** Initial widget value. A string for `text`/`single`, an array for `multi`, a number for `number`. */
+  defaultValue?: AskAnswer;
+  /** Placeholder for the `text` widget. */
+  placeholder?: string;
+  /** Lower bound for the `number` widget. */
+  min?: number;
+  /** Upper bound for the `number` widget. */
+  max?: number;
+  /** Increment the `number` widget's stepper moves by. */
+  step?: number;
+  /** Unit shown beside a number, and in the answered summary. */
+  unit?: string;
+  /** Label on the affirmative half of a `boolean`. Defaults to `"Confirm"`. */
+  confirmLabel?: string;
+  /** Label on the negative half of a `boolean`. Defaults to `"Reject"`. */
+  rejectLabel?: string;
+  /** Label on the submit button. Defaults to `"Submit"`. */
+  submitLabel?: React.ReactNode;
+  /** The answer is in flight: locks the widget and says so. */
+  busy?: boolean;
+  /** Expand the answered summary from the start. Defaults to `false`. */
+  defaultOpen?: boolean;
+  /** Accessible name for the widget when `question` is not plain text. */
+  "aria-label"?: string;
+}
+/**
+ * The human-in-the-loop question: an agent stops, asks, and waits.
+ *
+ * Controlled by design. The box holds the *draft* answer while the user is
+ * choosing, but it never holds the fact of having answered — that comes back as
+ * the `answer` prop once the host has recorded it. Anything else and a
+ * component's local state becomes the source of truth for a decision the run
+ * depends on, which survives exactly until the pane unmounts.
+ *
+ * Answered questions collapse to `question · answer ✓` and expand on click, so
+ * a long thread reads as a decision log rather than a wall of settled forms.
+ *
+ * The prompt is rendered verbatim, never parsed as markup: an approval prompt
+ * interpolates model-controlled text, and a `![](url)` in a consent statement
+ * is an exfiltration channel.
+ *
+ * @example
+ * <AskBox question="Which merge mode?" kind="single" options={modes} onAnswer={resume} />
+ * @example
+ * <AskBox question="Delete the rig?" kind="boolean" tool="rig.delete" danger="critical" onAnswer={resume} />
+ */
+declare const AskBox: React.ForwardRefExoticComponent<AskBoxProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AskAnswer, AskBox, AskBoxProps, AskDanger, AskKind, AskOption };

package/dist/chat/ask-box.js

@@ -0,0 +1,341 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { AGENT_ROOT_COLOR, agentColor } from "./agent-color.js";
+import { CheckGlyph } from "./_glyphs.js";
+import { Checkbox } from "../forms/checkbox.js";
+import { Input } from "../forms/input.js";
+import { NumberField } from "../forms/number-field.js";
+import { Radio, RadioGroup } from "../forms/radio-group.js";
+import { Button } from "../primitives/button.js";
+import { Chip } from "../primitives/chip.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/ask-box.tsx
+/**
+* Risk maps onto the tone vocabulary the rest of the system already speaks, so
+* a "critical" approval is the same red as a failed meter. There is deliberately
+* no `safe` level: a green "safe" chip on a card the user is being asked to
+* approve is noise, and the tool name alone is the useful signal there.
+*/
+const DANGER_TONES = {
+	low: "ok",
+	high: "warn",
+	critical: "danger"
+};
+/** The label a reader would recognise for one option value. */
+function labelFor(options, value) {
+	return (options?.find((entry) => entry.value === value))?.label ?? value;
+}
+/**
+* The answer, spelled the way it was offered.
+*
+* A summary reading `question · ltp ✓` is a riddle; `question · Latest takes
+* precedence ✓` is a record. Option labels win over raw values, booleans come
+* back as the button the user actually pressed, and a number keeps its unit.
+*/
+function formatAnswer(answer, options, labels) {
+	if (typeof answer === "boolean") return answer ? labels.confirm : labels.reject;
+	if (typeof answer === "number") return labels.unit === void 0 ? String(answer) : `${answer} ${labels.unit}`;
+	if (Array.isArray(answer)) {
+		const parts = answer.map((value) => labelFor(options, value));
+		return parts.length === 0 ? "—" : parts.map((part, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [index === 0 ? null : ", ", part] }, index));
+	}
+	return labelFor(options, answer);
+}
+/**
+* The human-in-the-loop question: an agent stops, asks, and waits.
+*
+* Controlled by design. The box holds the *draft* answer while the user is
+* choosing, but it never holds the fact of having answered — that comes back as
+* the `answer` prop once the host has recorded it. Anything else and a
+* component's local state becomes the source of truth for a decision the run
+* depends on, which survives exactly until the pane unmounts.
+*
+* Answered questions collapse to `question · answer ✓` and expand on click, so
+* a long thread reads as a decision log rather than a wall of settled forms.
+*
+* The prompt is rendered verbatim, never parsed as markup: an approval prompt
+* interpolates model-controlled text, and a `![](url)` in a consent statement
+* is an exfiltration channel.
+*
+* @example
+* <AskBox question="Which merge mode?" kind="single" options={modes} onAnswer={resume} />
+* @example
+* <AskBox question="Delete the rig?" kind="boolean" tool="rig.delete" danger="critical" onAnswer={resume} />
+*/
+const AskBox = React.forwardRef(function AskBox({ className, question, kind = "text", options, onAnswer, answer, asker, rootAgent, tool, danger, defaultValue, placeholder, min, max, step, unit, confirmLabel = "Confirm", rejectLabel = "Reject", submitLabel = "Submit", busy = false, defaultOpen = false, "aria-label": ariaLabel, style, ...elementProps }, ref) {
+	const questionId = React.useId();
+	const [open, setOpen] = React.useState(defaultOpen);
+	const [text, setText] = React.useState(typeof defaultValue === "string" ? defaultValue : "");
+	const [choice, setChoice] = React.useState(typeof defaultValue === "string" ? defaultValue : "");
+	const [checked, setChecked] = React.useState(Array.isArray(defaultValue) ? defaultValue : []);
+	const [number, setNumber] = React.useState(typeof defaultValue === "number" ? defaultValue : null);
+	const color = asker === void 0 ? AGENT_ROOT_COLOR : agentColor(asker, { root: rootAgent });
+	const answered = answer !== void 0;
+	const boxStyle = {
+		"--agent-color": color,
+		...style
+	};
+	const summary = answered ? formatAnswer(answer, options, {
+		confirm: confirmLabel,
+		reject: rejectLabel,
+		unit
+	}) : null;
+	const byline = asker === void 0 ? null : /* @__PURE__ */ jsxs("span", {
+		"data-slot": "ask-box-asker",
+		className: "flex min-w-0 items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-micro) text-fg-subtle",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "text-(--agent-color)",
+			children: "●"
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "truncate",
+			children: ["asked by ", /* @__PURE__ */ jsx("span", {
+				className: "text-(--agent-color)",
+				children: asker
+			})]
+		})]
+	});
+	const approval = tool === void 0 ? null : /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 items-center gap-(--cue-space-2)",
+		children: [/* @__PURE__ */ jsx("code", {
+			"data-slot": "ask-box-tool",
+			className: "min-w-0 truncate font-mono text-(length:--cue-text-micro) text-fg",
+			children: tool
+		}), danger === void 0 ? null : /* @__PURE__ */ jsx(Chip, {
+			"data-slot": "ask-box-danger",
+			tone: DANGER_TONES[danger],
+			"data-danger": danger,
+			children: danger
+		})]
+	});
+	if (answered) return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "ask-box",
+		"data-answered": "true",
+		"data-kind": kind,
+		className: cn("flex min-w-0 flex-col rounded-(--radius-surface) border border-border bg-surface-1 px-(--cue-space-4) py-(--cue-space-3)", className),
+		style: boxStyle,
+		...elementProps,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-slot": "ask-box-summary",
+			"aria-expanded": open,
+			className: "relative flex min-w-0 cursor-pointer items-center gap-(--cue-space-2) border-0 bg-transparent p-0 text-start font-mono text-(length:--cue-text-ui) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent",
+			onClick: () => setOpen((current) => !current),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "shrink-0 text-(--agent-color)",
+					children: "●"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate text-fg-muted",
+					children: question
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "shrink-0 text-fg-subtle",
+					children: "·"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "ask-box-answer",
+					className: "min-w-0 truncate text-fg",
+					children: summary
+				}),
+				/* @__PURE__ */ jsx(CheckGlyph, { className: "size-icon-sm shrink-0 text-ok" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "answered"
+				})
+			]
+		}), open ? /* @__PURE__ */ jsxs("div", {
+			"data-slot": "ask-box-detail",
+			className: "mt-(--cue-space-3) flex flex-col gap-(--cue-space-2) border-t border-border pt-(--cue-space-3)",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-(length:--cue-text-ui) leading-(--cue-leading-ui) break-words whitespace-pre-wrap text-fg-muted",
+					children: question
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-(length:--cue-text-ui) text-fg",
+					children: summary
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-(--cue-space-3)",
+					children: [byline, approval]
+				})
+			]
+		}) : null]
+	});
+	const submit = (value) => {
+		if (busy) return;
+		onAnswer(value);
+	};
+	const widget = (() => {
+		switch (kind) {
+			case "boolean": return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-(--cue-space-3)",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "primary",
+					size: "sm",
+					disabled: busy,
+					onClick: () => submit(true),
+					children: confirmLabel
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					disabled: busy,
+					onClick: () => submit(false),
+					children: rejectLabel
+				})]
+			});
+			case "single": return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-start gap-(--cue-space-3)",
+				children: [/* @__PURE__ */ jsx(RadioGroup, {
+					"aria-labelledby": questionId,
+					value: choice === "" ? null : choice,
+					onValueChange: (next) => setChoice(String(next ?? "")),
+					disabled: busy,
+					children: (options ?? []).map((option) => /* @__PURE__ */ jsx(Radio, {
+						value: option.value,
+						label: /* @__PURE__ */ jsxs("span", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ jsx("span", { children: option.label ?? option.value }), option.description === void 0 ? null : /* @__PURE__ */ jsx("span", {
+								className: "text-(length:--cue-text-micro) text-fg-subtle",
+								children: option.description
+							})]
+						})
+					}, option.value))
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "primary",
+					size: "sm",
+					disabled: busy || choice === "",
+					onClick: () => submit(choice),
+					children: submitLabel
+				})]
+			});
+			case "multi": return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-start gap-(--cue-space-3)",
+				children: [/* @__PURE__ */ jsx("div", {
+					role: "group",
+					"aria-labelledby": questionId,
+					className: "flex flex-col gap-(--cue-space-2)",
+					children: (options ?? []).map((option) => /* @__PURE__ */ jsx(Checkbox, {
+						checked: checked.includes(option.value),
+						disabled: busy,
+						label: /* @__PURE__ */ jsxs("span", {
+							className: "flex flex-col",
+							children: [/* @__PURE__ */ jsx("span", { children: option.label ?? option.value }), option.description === void 0 ? null : /* @__PURE__ */ jsx("span", {
+								className: "text-(length:--cue-text-micro) text-fg-subtle",
+								children: option.description
+							})]
+						}),
+						onCheckedChange: (next) => setChecked((current) => next ? [...current, option.value] : current.filter((entry) => entry !== option.value))
+					}, option.value))
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "primary",
+					size: "sm",
+					disabled: busy,
+					onClick: () => submit((options ?? []).filter((o) => checked.includes(o.value)).map((o) => o.value)),
+					children: submitLabel
+				})]
+			});
+			case "number": return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-(--cue-space-3)",
+				children: [
+					/* @__PURE__ */ jsx(NumberField, {
+						"aria-label": typeof question === "string" ? question : ariaLabel ?? "Answer",
+						size: "sm",
+						value: number,
+						onValueChange: setNumber,
+						disabled: busy,
+						className: "w-[9rem]",
+						...min === void 0 ? null : { min },
+						...max === void 0 ? null : { max },
+						...step === void 0 ? null : { step }
+					}),
+					unit === void 0 ? null : /* @__PURE__ */ jsx("span", {
+						className: "font-mono text-(length:--cue-text-label) text-fg-subtle",
+						children: unit
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "primary",
+						size: "sm",
+						disabled: busy || number === null,
+						onClick: () => submit(number),
+						children: submitLabel
+					})
+				]
+			});
+			default: return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-(--cue-space-3)",
+				children: [/* @__PURE__ */ jsx(Input, {
+					"aria-labelledby": questionId,
+					size: "sm",
+					value: text,
+					placeholder,
+					disabled: busy,
+					className: "min-w-0 flex-1",
+					onChange: (event) => setText(event.target.value),
+					onKeyDown: (event) => {
+						if (event.key !== "Enter") return;
+						event.preventDefault();
+						if (text.trim().length > 0) submit(text.trim());
+					}
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "primary",
+					size: "sm",
+					disabled: busy || text.trim().length === 0,
+					onClick: () => submit(text.trim()),
+					children: submitLabel
+				})]
+			});
+		}
+	})();
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "ask-box",
+		"data-answered": "false",
+		"data-kind": kind,
+		className: cn("flex min-w-0 flex-col gap-(--cue-space-3) rounded-(--radius-surface) border border-(--agent-color) bg-surface-1 px-(--cue-space-4) py-(--cue-space-3)", className),
+		style: boxStyle,
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-wrap items-center justify-between gap-(--cue-space-3)",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-wrap items-center gap-(--cue-space-3)",
+					children: [byline, approval]
+				}), /* @__PURE__ */ jsxs("span", {
+					role: "status",
+					"data-slot": "ask-box-state",
+					className: "flex shrink-0 items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-micro) text-fg-subtle",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "size-[0.375rem] shrink-0 animate-pulse rounded-full bg-(--agent-color) motion-reduce:animate-none"
+					}), busy ? "submitting…" : "waiting for you"]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: questionId,
+				"data-slot": "ask-box-question",
+				className: "min-w-0 text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words whitespace-pre-wrap text-fg",
+				children: question
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "ask-box-widget",
+				className: "flex min-w-0 flex-col",
+				children: widget
+			})
+		]
+	});
+});
+//#endregion
+export { AskBox };

package/dist/chat/composer.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+//#region src/chat/composer.d.ts
+/** Which gesture sends. `"enter"` keeps Shift+Enter for a newline; `"mod+enter"` inverts the pair. */
+type ComposerSubmitKey = "enter" | "mod+enter";
+interface ComposerProps extends Omit<React.ComponentPropsWithoutRef<"form">, "onSubmit" | "onChange"> {
+  /** Fired with the trimmed draft. Never fired with an empty string. */
+  onSend: (value: string) => void;
+  /** Draft when the host owns it. Pass with `onValueChange`. */
+  value?: string;
+  /** Initial draft when uncontrolled. */
+  defaultValue?: string;
+  /** Called on every keystroke with the new draft. */
+  onValueChange?: (value: string) => void;
+  /** Placeholder for the empty box. Defaults to `"Message"`. */
+  placeholder?: string;
+  /** Block sending — a closed thread, a failed connection. */
+  disabled?: boolean;
+  /** A run is in flight. With `onStop`, swaps Send for Stop. */
+  busy?: boolean;
+  /** Abort the in-flight run. Renders the Stop button while `busy`. */
+  onStop?: () => void;
+  /** Which gesture submits. Defaults to `"enter"`. */
+  submitKey?: ComposerSubmitKey;
+  /** Rows the box may grow to before it scrolls. Defaults to `8`. */
+  maxRows?: number;
+  /** Label on the send button. Defaults to `"Send"`. */
+  sendLabel?: React.ReactNode;
+  /** Label on the stop button. Defaults to `"Stop"`. */
+  stopLabel?: React.ReactNode;
+  /** Tray above the input — attachment chips, a reply-to quote. */
+  attachments?: React.ReactNode;
+  /** Controls beside the send button — an attach button, a model picker. */
+  toolbar?: React.ReactNode;
+  /** Quiet strip under the input — a keyboard hint, a character count. */
+  hint?: React.ReactNode;
+  /** Accessible name for the input. Defaults to `"Message"`. */
+  "aria-label"?: string;
+}
+/**
+ * The thing you type into: an auto-growing textarea, a send affordance, and
+ * slots for everything a host wants to hang off them.
+ *
+ * Three decisions worth stating:
+ *
+ * - **It grows, it does not scroll.** A one-line box that hides the second half
+ *   of what you wrote is the most-complained-about part of every chat UI. The
+ *   box starts at the tall control rung and grows to `maxRows` before it gives
+ *   up and scrolls.
+ * - **The submit gesture is a setting.** Enter-to-send is right for a chat lane
+ *   and wrong for a prompt editor where every draft is three paragraphs, so
+ *   both are first-class and the *other* key always inserts a newline.
+ * - **Stop is never disabled.** While a run is in flight the composer is
+ *   `disabled`, but the button that ends the run cannot inherit that — a stop
+ *   you cannot press is not a stop.
+ *
+ * The ref lands on the textarea rather than the form: focusing the composer is
+ * the thing hosts actually reach for.
+ *
+ * @example
+ * <Composer onSend={send} />
+ * @example
+ * <Composer submitKey="mod+enter" busy={running} onStop={abort} onSend={send} />
+ */
+declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+export { Composer, ComposerProps, ComposerSubmitKey };