@cueplusplus/ui 0.13.0

package/dist/elements/draft-restore.js

@@ -0,0 +1,54 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ghostButton, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PencilLineIcon, XIcon } from "lucide-react";
+//#region src/elements/draft-restore.tsx
+/**
+* Come back to a thread and the sentence you never sent is still waiting.
+*
+* @example
+* import { DraftRestore } from "@cueplusplus/ui/elements";
+*
+* <DraftRestore
+*   draft="Add a regression test for draft restore"
+*   savedAt="2 minutes ago"
+*   onRestore={restore}
+*   onDiscard={discard}
+* />
+*/
+function DraftRestore({ draft, savedAt, onRestore, onDiscard, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "draft-restore",
+		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in flex w-full max-w-sm items-center gap-2.5 rounded-(--radius-overlay) py-2 pr-2 pl-3.5 duration-300", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(PencilLineIcon, { className: "text-fg-subtle size-3.5 shrink-0" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-fg-muted truncate text-(length:--cue-text-body)",
+					children: draft
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-fg-subtle"),
+					children: ["unsent draft · ", savedAt]
+				})]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRestore,
+				className: "text-fg-muted hover:bg-surface-2 hover:text-fg shrink-0 rounded-full px-2.5 py-1 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+				children: "Restore"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Discard the draft",
+				onClick: onDiscard,
+				className: cn(ghostButton, "size-7 shrink-0"),
+				children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+			})
+		]
+	});
+}
+//#endregion
+export { DraftRestore };

package/dist/elements/edit-message.d.ts

@@ -0,0 +1,36 @@
+import { ComponentProps } from "react";
+//#region src/elements/edit-message.d.ts
+/**
+ * Rewrite a turn in place, told up front how many replies the edit throws away.
+ *
+ * @example
+ * import { EditMessage } from "@cueplusplus/ui/elements";
+ *
+ * <EditMessage
+ *   value={value}
+ *   discardedReplies={3}
+ *   editing={editing}
+ *   onValueChange={setValue}
+ *   onStartEdit={() => setEditing(true)}
+ *   onCancel={cancel}
+ *   onSave={save}
+ * />
+ */
+declare function EditMessage({ value, discardedReplies, editing, onValueChange, onSave, onCancel, onStartEdit, className, ...props }: Omit<ComponentProps<"div">, "children" | "value" | "discardedReplies" | "editing" | "onValueChange" | "onSave" | "onCancel" | "onStartEdit"> & {
+  /** The message text, read when resting and edited when open. */
+  value: string;
+  /** How many replies sending would drop. The warning hides at zero. */
+  discardedReplies: number;
+  /** Swaps between the resting bubble and the edit composer. */
+  editing: boolean;
+  /** Called as the message is edited. */
+  onValueChange?: (value: string) => void;
+  /** Called when the edited message is sent. */
+  onSave?: () => void;
+  /** Called when the edit is abandoned. Restore the original yourself. */
+  onCancel?: () => void;
+  /** Called when the resting bubble is clicked. */
+  onStartEdit?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { EditMessage };

package/dist/elements/edit-message.js

@@ -0,0 +1,77 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { field, inkButton, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangleIcon } from "lucide-react";
+//#region src/elements/edit-message.tsx
+/**
+* Rewrite a turn in place, told up front how many replies the edit throws away.
+*
+* @example
+* import { EditMessage } from "@cueplusplus/ui/elements";
+*
+* <EditMessage
+*   value={value}
+*   discardedReplies={3}
+*   editing={editing}
+*   onValueChange={setValue}
+*   onStartEdit={() => setEditing(true)}
+*   onCancel={cancel}
+*   onSave={save}
+* />
+*/
+function EditMessage({ value, discardedReplies, editing, onValueChange, onSave, onCancel, onStartEdit, className, ...props }) {
+	if (!editing) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "edit-message",
+		className: cn("flex w-full max-w-sm justify-end", className),
+		...props,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onStartEdit,
+			className: cn(field, "hover:bg-surface-2 max-w-[85%] rounded-(--radius-overlay) px-3.5 py-2.5 text-start text-(length:--cue-text-body) transition-colors"),
+			children: value
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "edit-message",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-3.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("textarea", {
+				value,
+				onChange: (event) => onValueChange?.(event.target.value),
+				rows: 2,
+				"aria-label": "Edit your message",
+				className: cn(field, "text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent resize-none rounded-(--radius-surface) px-3 py-2.5 text-(length:--cue-text-body) leading-(--cue-leading-ui) outline-none")
+			}),
+			discardedReplies > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-warn",
+				children: [/* @__PURE__ */ jsx(AlertTriangleIcon, { className: "size-3.5 shrink-0" }), /* @__PURE__ */ jsxs("span", {
+					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "tabular-nums"),
+					children: [
+						"sending discards ",
+						discardedReplies,
+						" ",
+						discardedReplies === 1 ? "reply" : "replies"
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-end gap-2",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onCancel,
+					className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onSave,
+					className: cn(inkButton, "flex h-8 items-center rounded-full px-3.5 text-(length:--cue-text-ui) font-medium"),
+					children: "Send"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { EditMessage };

package/dist/elements/elements.css

@@ -0,0 +1,459 @@
+/*! @cueplusplus/ui — the elements family's stylesheet.
+ *
+ * Consumer app CSS, in this order:
+ *   @import "tailwindcss";
+ *   @import "@cueplusplus/ui/styles.css";
+ *   @import "@cueplusplus/ui/elements.css";
+ *
+ * Optional. The vendored elements were rewritten onto `--cue-*` tokens by
+ * `scripts/elements-sync`, so in cue mode they are already this system's
+ * components and need no stylesheet at all. This file exists for the three
+ * things a codemod could not produce:
+ *
+ * 1. **The vocabularies upstream never shipped.** assistant-ui's elements spend
+ *    `tw-shimmer` and `tw-animate-css` classes that its own registry does not
+ *    declare (internals report §3). Rewriting entrance motion would have been a
+ *    design decision inside a mechanical transform, so the effect below is
+ *    upstream's — but the *names* are not: they are `tw-animate-css`'s, the
+ *    animation library shadcn installs by default, and an app that has both
+ *    would get two `.animate-in` rules with import order deciding. So the
+ *    codemod renames them at emit and everything here is declared under
+ *    `cue-elements-`. The debt and the rename table are both in
+ *    `scripts/elements-sync/elements-sync.lock.json` (`unresolvedVocabularies`,
+ *    `classRenames`), and a test holds this file against them.
+ * 2. **The supersede island.** `<AgentSurface skin="aui">` stamps two
+ *    attributes; the rules below re-declare, under them, the tokens the family
+ *    reads. Because every element utility dereferences its variable at the
+ *    point of use — cue's Tailwind bridge and shadcn's are both `@theme inline`
+ *    — a value-set is all it takes. No layers, no `!important`, no `:where`.
+ * 3. **The mode ladder.** `data-agent-mode` and the quadruple it drives — the
+ *    one idea in the field study that is a *token contract* rather than a
+ *    component, and the reason `AgentModeBadge` is four properties and a chip
+ *    rather than a colour prop. The section below carries the reasoning.
+ *
+ * Plain CSS, no Tailwind at-rules: a values sheet has to work in an app that
+ * imports it after everything else.
+ */
+
+/* ── The sweep ─────────────────────────────────────────────────────────
+ *
+ * Upstream's `ShimmerLabel` takes its animation from `tw-shimmer`, a package
+ * this system does not add as a dependency. This is the same effect out of
+ * cue's own tokens: a band of full-strength ink travelling through a muted
+ * label, clipped to the glyphs.
+ *
+ * The ink and the sheen are named properties so a caller can retune one label
+ * without re-deriving the gradient.
+ */
+@keyframes cue-elements-shimmer {
+  from {
+    background-position: 150% center;
+  }
+  to {
+    background-position: -50% center;
+  }
+}
+
+.cue-elements-shimmer {
+  --cue-elements-shimmer-ink: var(--cue-fg-muted);
+  --cue-elements-shimmer-sheen: var(--cue-fg);
+  background-image: linear-gradient(
+    90deg,
+    var(--cue-elements-shimmer-ink) 0%,
+    var(--cue-elements-shimmer-ink) 35%,
+    var(--cue-elements-shimmer-sheen) 50%,
+    var(--cue-elements-shimmer-ink) 65%,
+    var(--cue-elements-shimmer-ink) 100%
+  );
+  background-size: 250% 100%;
+  background-repeat: no-repeat;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: cue-elements-shimmer 1.8s linear infinite;
+}
+
+/* ── The entrance ──────────────────────────────────────────────────────
+ *
+ * `tw-animate-css`'s nine-utility subset, as the vendored spine uses it: one
+ * keyframe reading five custom properties, and a modifier class per property.
+ * The duration comes from the `duration-*` utility written beside it, which is
+ * what upstream expects — Tailwind publishes it as `--tw-duration`.
+ *
+ * The names are this family's, not upstream's. `.animate-in` and its eight
+ * companions belong to `tw-animate-css`; declaring them here would collide,
+ * silently, with any app that has it installed. `scripts/elements-sync` renames
+ * every one at emit (`rules.mjs`, `CLASS_RENAMES`), so the emitted tree writes
+ * `cue-elements-animate-in` and this file is the only thing that answers it.
+ */
+@keyframes cue-elements-enter {
+  from {
+    opacity: var(--cue-elements-enter-opacity, 1);
+    filter: blur(var(--cue-elements-enter-blur, 0));
+    transform: translate3d(
+        var(--cue-elements-enter-translate-x, 0),
+        var(--cue-elements-enter-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--cue-elements-enter-scale, 1),
+        var(--cue-elements-enter-scale, 1),
+        1
+      );
+  }
+}
+
+.cue-elements-animate-in {
+  animation-name: cue-elements-enter;
+  animation-duration: var(--tw-duration, 150ms);
+  animation-timing-function: var(--tw-ease, ease-out);
+}
+
+.cue-elements-fill-mode-both {
+  animation-fill-mode: both;
+}
+
+.cue-elements-fade-in {
+  --cue-elements-enter-opacity: 0;
+}
+
+.cue-elements-zoom-in-90 {
+  --cue-elements-enter-scale: 0.9;
+}
+
+.cue-elements-zoom-in-95 {
+  --cue-elements-enter-scale: 0.95;
+}
+
+/* Upstream writes this one as `blur-in-[2px]`, an arbitrary value; it is a
+ * class like the other eight here. */
+.cue-elements-blur-in-2 {
+  --cue-elements-enter-blur: 2px;
+}
+
+.cue-elements-slide-in-from-top-1 {
+  --cue-elements-enter-translate-y: calc(var(--spacing, 0.25rem) * -1);
+}
+
+.cue-elements-slide-in-from-bottom-1 {
+  --cue-elements-enter-translate-y: var(--spacing, 0.25rem);
+}
+
+.cue-elements-slide-in-from-bottom-2 {
+  --cue-elements-enter-translate-y: calc(var(--spacing, 0.25rem) * 2);
+}
+
+.cue-elements-slide-in-from-left-1 {
+  --cue-elements-enter-translate-x: calc(var(--spacing, 0.25rem) * -1);
+}
+
+/* A reader who asked for less motion gets none of it. The sweep has to be
+ * undone rather than paused: the label's own colour is transparent and its
+ * glyphs are painted by a clipped gradient, so a stopped animation would leave
+ * the text frozen wherever the sweep happened to be — including nowhere. */
+@media (prefers-reduced-motion: reduce) {
+  .cue-elements-shimmer {
+    background-image: none;
+    color: var(--cue-elements-shimmer-ink);
+    animation: none;
+  }
+
+  .cue-elements-animate-in {
+    animation: none;
+  }
+}
+
+/* ── The mode ladder ───────────────────────────────────────────────────
+ *
+ * The most distinctive systemic idea in the field study, as four custom
+ * properties. Claude Code's panel puts `data-permission-mode` on the composer,
+ * the send button and the spinner, and each one re-derives its accent from it —
+ * six modes painted in four colours, because the thing a mode *means* is how
+ * much authority the run is holding and that ladder has four rungs everywhere.
+ * Cursor keeps the same idea as tokens: a quadruple per mode (`background`,
+ * `text`, `border`, `icon`) that the mode chip, the composer border and the
+ * transcript accent all read.
+ *
+ * So: sixteen properties, four per rung, declared on the element that carries
+ * `data-agent-mode`; then four aliases — the unprefixed quadruple — pointing at
+ * whichever rung the attribute names. A composer stamped
+ * `data-agent-mode="unsafe"` tints its focus ring, its send button and its rail
+ * out of `var(--cue-elements-mode-icon)` with no branch in any component, and a
+ * mode picker sitting inside it can still reach every rung by name.
+ *
+ * Three decisions worth writing down:
+ *
+ * - **They are declared here and not at `:root`.** A custom property's `var()`
+ *   references are substituted at the element that declares them, so a rung
+ *   declared at `:root` would resolve against the *page's* accent and a badge
+ *   inside an `<AgentSurface skin="aui">` would paint in the console's palette
+ *   while everything around it painted in the island's. Declared on
+ *   `[data-agent-mode]`, each rung resolves wherever the attribute lands —
+ *   which is the same reasoning that keeps the derived `*-soft` tokens out of
+ *   the island block below.
+ *
+ * - **The default is neutral, not `manual`.** `[data-agent-mode="something-we-
+ *   do-not-know"]` gets the family's plain chip, because the two failure modes
+ *   are not symmetric: an unmapped mode painted brand-orange would be claiming
+ *   the run asks before it acts, and that is exactly the claim nobody should
+ *   make on a guess. These four neutrals are the same values
+ *   `agent-mode-badge.tsx` falls back to when this stylesheet is not imported
+ *   at all, so the unpainted and the unmapped chip look alike on purpose.
+ *
+ * - **`plan` is `--cue-stream`.** The reference paints it in the host's focus
+ *   blue; this family's blue is the streaming hue the codemod already put every
+ *   upstream `blue-500` on, and a second blue would be a second meaning.
+ */
+
+[data-agent-mode] {
+  --cue-elements-mode-manual-background: color-mix(in oklab, var(--cue-accent) 14%, transparent);
+  --cue-elements-mode-manual-text: var(--cue-fg);
+  --cue-elements-mode-manual-border: color-mix(in oklab, var(--cue-accent) 40%, transparent);
+  --cue-elements-mode-manual-icon: var(--cue-accent);
+
+  --cue-elements-mode-auto-edit-background: color-mix(in oklab, var(--cue-fg) 10%, transparent);
+  --cue-elements-mode-auto-edit-text: var(--cue-fg);
+  --cue-elements-mode-auto-edit-border: color-mix(in oklab, var(--cue-fg) 28%, transparent);
+  --cue-elements-mode-auto-edit-icon: var(--cue-fg);
+
+  --cue-elements-mode-plan-background: color-mix(in oklab, var(--cue-stream) 14%, transparent);
+  --cue-elements-mode-plan-text: var(--cue-fg);
+  --cue-elements-mode-plan-border: color-mix(in oklab, var(--cue-stream) 40%, transparent);
+  --cue-elements-mode-plan-icon: var(--cue-stream);
+
+  --cue-elements-mode-unsafe-background: color-mix(in oklab, var(--cue-danger) 16%, transparent);
+  --cue-elements-mode-unsafe-text: var(--cue-fg);
+  --cue-elements-mode-unsafe-border: color-mix(in oklab, var(--cue-danger) 45%, transparent);
+  --cue-elements-mode-unsafe-icon: var(--cue-danger);
+
+  /* The active four, which is what every mode-aware surface reads. */
+  --cue-elements-mode-background: var(--cue-surface-2);
+  --cue-elements-mode-text: var(--cue-fg-muted);
+  --cue-elements-mode-border: var(--cue-border);
+  --cue-elements-mode-icon: var(--cue-fg-subtle);
+}
+
+[data-agent-mode="manual"] {
+  --cue-elements-mode-background: var(--cue-elements-mode-manual-background);
+  --cue-elements-mode-text: var(--cue-elements-mode-manual-text);
+  --cue-elements-mode-border: var(--cue-elements-mode-manual-border);
+  --cue-elements-mode-icon: var(--cue-elements-mode-manual-icon);
+}
+
+[data-agent-mode="auto-edit"] {
+  --cue-elements-mode-background: var(--cue-elements-mode-auto-edit-background);
+  --cue-elements-mode-text: var(--cue-elements-mode-auto-edit-text);
+  --cue-elements-mode-border: var(--cue-elements-mode-auto-edit-border);
+  --cue-elements-mode-icon: var(--cue-elements-mode-auto-edit-icon);
+}
+
+[data-agent-mode="plan"] {
+  --cue-elements-mode-background: var(--cue-elements-mode-plan-background);
+  --cue-elements-mode-text: var(--cue-elements-mode-plan-text);
+  --cue-elements-mode-border: var(--cue-elements-mode-plan-border);
+  --cue-elements-mode-icon: var(--cue-elements-mode-plan-icon);
+}
+
+[data-agent-mode="unsafe"] {
+  --cue-elements-mode-background: var(--cue-elements-mode-unsafe-background);
+  --cue-elements-mode-text: var(--cue-elements-mode-unsafe-text);
+  --cue-elements-mode-border: var(--cue-elements-mode-unsafe-border);
+  --cue-elements-mode-icon: var(--cue-elements-mode-unsafe-icon);
+}
+
+/* ── Supersede mode: assistant-ui's values ─────────────────────────────
+ *
+ * The whole of upstream's colour system is four shadcn variables —
+ * `--background`, `--foreground`, `--popover`, `--border` — plus four literal
+ * Tailwind hues (internals report §2 and §3). Below, those eight are spelled
+ * into the cue tokens the emitted tree reads, so one DOM paints two ways.
+ *
+ * Two are not literal transcriptions and say so:
+ *
+ * - The ink ramp. Upstream has no muted/subtle tokens; it writes
+ *   `text-foreground/45` and `text-foreground/30` by hand, ~380 times between
+ *   them. The two alphas here are the centroids of those two clusters, derived
+ *   from the island's own foreground so light and dark need one rule.
+ * - `--cue-sunken`, the terminal slab. Upstream paints it
+ *   `bg-foreground dark:bg-popover` — near-black in light — while keeping the
+ *   text on `--foreground`, which only reads because its own demos are dark.
+ *   The vendored tree inherits that ink, so the island spends shadcn's own
+ *   recessed greys instead and the slab stays both a slab and readable.
+ *
+ * What is NOT here, and why — the same accounting the metrics block below
+ * carries for `--radius-*`:
+ *
+ * - **Absent by choice:** `--cue-busy`, `--cue-info`, `--cue-selection`,
+ *   `--cue-focus`, `--cue-scrim`. No element in this family reads them — the
+ *   codemod maps upstream's blue onto `--cue-stream`, and upstream has no
+ *   selection or scrim of its own to transcribe. The consequence is worth
+ *   knowing before you mix families: a *cue* component rendered inside an
+ *   island — a `Chip tone="busy"`, a `Toast`, anything that draws a focus ring
+ *   — paints half in each palette, its ground and ink from assistant-ui and its
+ *   tone from the console's theme. That is a mixed surface, not a bug, and the
+ *   island is not the place to fix it: re-pointing the whole contract here
+ *   would make this a theme, which is exactly what `AgentSurface` is documented
+ *   not to be.
+ *
+ * - **Absent by construction:** every derived token —
+ *   `--cue-ok-soft`, `--cue-stream-border`, `--cue-accent-soft`, `--cue-hair`,
+ *   `--cue-row-hover` and the rest. They cannot follow the island. Each is a
+ *   `color-mix()` over `var(--cue-<base>)` declared on the theme block at
+ *   `:root`, and a custom property's `var()` references are substituted at the
+ *   element that declares them — a descendant inherits the resolved colour, not
+ *   the recipe. So a `bg-ok-soft` inside an island would keep painting the
+ *   console's green while every `bg-ok/10` beside it turned assistant-ui's, and
+ *   nothing anywhere would be red. (Restating all sixteen derivations in both
+ *   halves of this island would work, and is the trade the metrics block makes
+ *   for three radii; sixteen colours in two modes is a second palette to keep
+ *   in step, which is how two copies drift.) The family is therefore
+ *   written in the alpha form — `bg-ok/10`, `border-stream/30`, which
+ *   composites at the point of use — and `scripts/elements-sync/rules.mjs`
+ *   refuses to emit a derived token at all: the sync fails loudly rather than
+ *   writing a file whose island silently half-applies.
+ */
+[data-cue-skin="aui"] {
+  color-scheme: dark;
+  --cue-bg: oklch(0.141 0.005 285.823);
+  --cue-fg: oklch(0.985 0 0);
+  --cue-fg-muted: color-mix(in oklab, var(--cue-fg) 50%, transparent);
+  --cue-fg-subtle: color-mix(in oklab, var(--cue-fg) 32%, transparent);
+  --cue-sunken: oklch(0.141 0.005 285.823);
+  --cue-surface-1: oklch(0.21 0.006 285.885);
+  --cue-surface-2: color-mix(in oklab, var(--cue-fg) 6%, transparent);
+  --cue-surface-3: color-mix(in oklab, var(--cue-fg) 15%, transparent);
+  --cue-border: color-mix(in oklab, oklch(1 0 0 / 10%) 60%, transparent);
+  --cue-border-strong: color-mix(in oklab, var(--cue-fg) 20%, transparent);
+  --cue-border-overlay: color-mix(in oklab, oklch(1 0 0 / 10%) 60%, transparent);
+  --cue-accent: var(--cue-fg);
+  --cue-accent-hover: color-mix(in oklab, var(--cue-fg) 90%, transparent);
+  --cue-accent-fg: var(--cue-bg);
+  --cue-ok: oklch(0.765 0.177 163.223);
+  --cue-danger: oklch(0.704 0.191 22.216);
+  /* The ink on the red. Upstream has no such token — it writes `text-white` on
+   * `bg-destructive` and its own demos are dark, where that happens to read.
+   * Here the two halves of the island disagree, which is the whole reason the
+   * token exists: this dark red is light enough to carry the island's ground
+   * (6.93:1) and the light half's red is bright enough that the same white ink
+   * reaches only 3.82:1 and its ink has to be the island's type instead. */
+  --cue-danger-fg: var(--cue-bg);
+  --cue-warn: oklch(0.828 0.189 84.429);
+  /* The ink on the amber, here for the same reason: this block re-tints
+   * `--cue-warn`, so an ink the app chose against its own amber would be an ink
+   * chosen against a colour nobody is looking at in here. The amber splits the
+   * same way the red above does, with more room on both sides — the island's
+   * ground on this half at 11.56:1, its type on the light half at 9.25:1. */
+  --cue-warn-fg: var(--cue-bg);
+  --cue-stream: oklch(0.707 0.165 254.624);
+}
+
+/* The light half. Two selectors, because the stamp lands two ways: on an
+ * ancestor for an app in light mode, and on the island itself for a portal
+ * container, which carries every axis at once. */
+[data-mode="light"] [data-cue-skin="aui"],
+[data-cue-skin="aui"][data-mode="light"] {
+  color-scheme: light;
+  --cue-bg: oklch(1 0 0);
+  --cue-fg: oklch(0.141 0.005 285.823);
+  --cue-fg-muted: color-mix(in oklab, var(--cue-fg) 50%, transparent);
+  --cue-fg-subtle: color-mix(in oklab, var(--cue-fg) 32%, transparent);
+  --cue-sunken: oklch(0.967 0.001 286.375);
+  --cue-surface-1: oklch(1 0 0);
+  --cue-surface-2: color-mix(in oklab, var(--cue-fg) 6%, transparent);
+  --cue-surface-3: color-mix(in oklab, var(--cue-fg) 15%, transparent);
+  --cue-border: color-mix(in oklab, oklch(0.92 0.004 286.32) 60%, transparent);
+  --cue-border-strong: color-mix(in oklab, var(--cue-fg) 20%, transparent);
+  --cue-border-overlay: color-mix(in oklab, oklch(0.92 0.004 286.32) 60%, transparent);
+  --cue-accent: var(--cue-fg);
+  --cue-accent-hover: color-mix(in oklab, var(--cue-fg) 90%, transparent);
+  --cue-accent-fg: var(--cue-bg);
+  --cue-ok: oklch(0.696 0.17 162.48);
+  --cue-danger: oklch(0.637 0.237 25.331);
+  /* The other half of the asymmetry above: dark ink on the light half's red. */
+  --cue-danger-fg: var(--cue-fg);
+  --cue-warn: oklch(0.769 0.188 70.08);
+  /* And the amber's other half: the island's type on the light amber, 9.25:1. */
+  --cue-warn-fg: var(--cue-fg);
+  --cue-stream: oklch(0.623 0.214 259.815);
+}
+
+/* And the same again for an app whose mode is `system`, mirroring the
+ * `mode-light` variant in `styles.css`. */
+@media (prefers-color-scheme: light) {
+  [data-mode="system"] [data-cue-skin="aui"],
+  [data-cue-skin="aui"][data-mode="system"] {
+    color-scheme: light;
+    --cue-bg: oklch(1 0 0);
+    --cue-fg: oklch(0.141 0.005 285.823);
+    --cue-fg-muted: color-mix(in oklab, var(--cue-fg) 50%, transparent);
+    --cue-fg-subtle: color-mix(in oklab, var(--cue-fg) 32%, transparent);
+    --cue-sunken: oklch(0.967 0.001 286.375);
+    --cue-surface-1: oklch(1 0 0);
+    --cue-surface-2: color-mix(in oklab, var(--cue-fg) 6%, transparent);
+    --cue-surface-3: color-mix(in oklab, var(--cue-fg) 15%, transparent);
+    --cue-border: color-mix(in oklab, oklch(0.92 0.004 286.32) 60%, transparent);
+    --cue-border-strong: color-mix(in oklab, var(--cue-fg) 20%, transparent);
+    --cue-border-overlay: color-mix(in oklab, oklch(0.92 0.004 286.32) 60%, transparent);
+    --cue-accent: var(--cue-fg);
+    --cue-accent-hover: color-mix(in oklab, var(--cue-fg) 90%, transparent);
+    --cue-accent-fg: var(--cue-bg);
+    --cue-ok: oklch(0.696 0.17 162.48);
+    --cue-danger: oklch(0.637 0.237 25.331);
+    /* The other half of the asymmetry above: dark ink on the light half's red. */
+    --cue-danger-fg: var(--cue-fg);
+    --cue-warn: oklch(0.769 0.188 70.08);
+    /* And the amber's other half: the island's type on the light amber, 9.25:1. */
+    --cue-warn-fg: var(--cue-fg);
+    --cue-stream: oklch(0.623 0.214 259.815);
+  }
+}
+
+/* ── Metrics ───────────────────────────────────────────────────────────
+ *
+ * `fidelity="upstream"` pins geometry to assistant-ui's, which means the
+ * density ladder stops here. Three groups of numbers, all of them upstream's:
+ *
+ * - Radii, from shadcn's `--radius: 0.625rem` ladder as the codemod banded it:
+ *   `rounded-2xl` (18px) became the overlay rung, `rounded-xl` (14px) the
+ *   surface rung, and bare `rounded` (4px) the control rung.
+ * - Type, from the literal pixel sizes the codemod could not keep: `text-xs`
+ *   is 12px, `text-[13px]` and `text-[13.5px]` share the body rung, `mono` is
+ *   11px. Written as pixels rather than rem multiples, which is also what pins
+ *   the font scale.
+ * - `--spacing`, Tailwind's own default, which every `gap-*`, `p-*` and
+ *   `size-*` in the family multiplies.
+ *
+ * Both halves of the radius ladder are set, and that is not redundancy. cue's
+ * Tailwind bridge declares `--radius-overlay` as
+ * `calc(var(--cue-radius-overlay) * var(--cue-radius-scale))`, and Tailwind
+ * emits that on `:root` — where the substitution happens. A descendant
+ * inherits the answer, not the sum, so an island that re-pointed only the
+ * `--cue-` token would change nothing a `rounded-(--radius-overlay)` renders.
+ */
+[data-cue-fidelity="upstream"] {
+  --spacing: 0.25rem;
+  --cue-radius-scale: 1;
+  --cue-radius-control: 0.25rem;
+  --cue-radius-surface: 0.875rem;
+  --cue-radius-overlay: 1.125rem;
+  --radius-control: 0.25rem;
+  --radius-surface: 0.875rem;
+  --radius-overlay: 1.125rem;
+  --cue-text-micro: 10px;
+  --cue-text-label: 11px;
+  --cue-text-ui: 12px;
+  --cue-text-body: 13.5px;
+  --cue-text-emphasis: 16px;
+  --cue-text-title: 24px;
+}
+
+/* `fidelity="cue-metrics"` is the default and changes only one thing — but it
+ * is the thing the density ladder could not otherwise reach. Every box size and
+ * gap in the family is a Tailwind spacing utility, which multiplies
+ * `--spacing`; the ladder's own `--cue-space-*` tokens are never named by
+ * vendored code. Scaling `--spacing` by `--cue-density` is what makes an island
+ * tighten with the console around it. At the default rung the multiplier is 1,
+ * so this costs nothing until somebody changes density. */
+[data-cue-fidelity="cue-metrics"] {
+  --spacing: calc(0.25rem * var(--cue-density, 1));
+}

package/dist/elements/elicitation-form.d.ts

@@ -0,0 +1,48 @@
+import { ComponentProps } from "react";
+//#region src/elements/elicitation-form.d.ts
+type ElicitationState = "request" | "accepted" | "declined";
+interface ElicitationField {
+  /** Field name sent back to the server. */
+  name: string;
+  /** Label shown above the control. */
+  label: string;
+  /** Current value, already resolved to what should be displayed. */
+  value: string;
+  /** Chooses the control: a value chip, a row of options, or a switch. */
+  kind: "text" | "choice" | "toggle";
+  /** Choices rendered when kind is choice. */
+  options?: readonly string[];
+  /** Marks the label with an asterisk. */
+  required?: boolean;
+}
+/**
+ * A server pausing mid-tool-call to ask you for the fields it still needs.
+ *
+ * @example
+ * import { ElicitationForm } from "@cueplusplus/ui/elements";
+ *
+ * <ElicitationForm
+ *   server="github-mcp"
+ *   message="Confirm where the release notes should be published."
+ *   fields={fields}
+ *   state="request"
+ *   onAccept={send}
+ *   onDecline={decline}
+ * />
+ */
+declare function ElicitationForm({ server, message, fields, state, onAccept, onDecline, className, ...props }: Omit<ComponentProps<"div">, "children" | "server" | "message" | "fields" | "state" | "onAccept" | "onDecline"> & {
+  /** Which server paused to ask. */
+  server: string;
+  /** Why the input is needed, in the server's words. */
+  message: string;
+  /** The schema the server sent, already resolved to display values. */
+  fields: readonly ElicitationField[];
+  /** Swaps the action row for the outcome once the user answers. */
+  state: ElicitationState;
+  /** Called when the filled form is sent back. */
+  onAccept?: () => void;
+  /** Called when the request is refused. */
+  onDecline?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+export { ElicitationField, ElicitationForm, ElicitationState };