@cueplusplus/ui 0.20.1 → 0.21.0

package/dist/lib/auto-grow.js

@@ -0,0 +1,42 @@
+"use client";
+import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import * as React from "react";
+//#region src/lib/auto-grow.ts
+/** Whether this browser sizes a textarea to its content itself (`field-sizing: content`). */
+function sizesItself() {
+	return typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("field-sizing", "content");
+}
+/**
+* Grow a textarea with what it holds, where CSS cannot.
+*
+* `field-sizing: content` sizes a textarea to its text in the browsers that
+* have it, and a `max-height` caps it, so in those this does nothing. Where the
+* property is missing, the textarea is measured instead: its height is reset
+* and set to its `scrollHeight` on every input, and again whenever `value`
+* changes from outside, so a composer the parent clears after sending shrinks
+* back to one line. The cap stays the stylesheet's.
+*
+* Returns a ref for the textarea. A caller that passes its own `ref` after this
+* one replaces it, and the field then sizes with CSS alone.
+*
+* @param value The textarea's value, so a change made from outside re-measures it.
+*/
+function useAutoGrow(value) {
+	const node = React.useRef(null);
+	const fit = React.useCallback(() => {
+		const element = node.current;
+		if (element === null || sizesItself()) return;
+		element.style.height = "auto";
+		element.style.height = `${element.scrollHeight}px`;
+	}, []);
+	const ref = React.useCallback((element) => {
+		node.current?.removeEventListener("input", fit);
+		node.current = element;
+		element?.addEventListener("input", fit);
+		fit();
+	}, [fit]);
+	useIsomorphicLayoutEffect(fit, [value, fit]);
+	return { ref };
+}
+//#endregion
+export { useAutoGrow };

package/dist/overlays/_surface.d.ts

@@ -73,9 +73,9 @@ declare const overlaySurfaceClasses = "rounded-overlay border-transparent border
  * composed declaration without entering it; at rest the property is theirs.
  * The pseudo's `transition` and timing are its own classes: Tailwind
  * registers `--tw-duration` and `--tw-ease` with `inherits: false`, so the
- * scrim's `duration-150 ease-out` never reach it.
+ * scrim's `duration-fast ease-out` never reach it.
  */
-declare const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) before:absolute before:inset-0 before:content-[''] before:pointer-events-none before:[backdrop-filter:var(--cue-paint-scrim-filter,none)] transition-[background-color,backdrop-filter] duration-150 ease-out before:transition-opacity before:duration-150 before:ease-out motion-reduce:transition-none motion-reduce:before:transition-none data-[starting-style]:bg-transparent data-[ending-style]:bg-transparent data-[starting-style]:[backdrop-filter:none] data-[ending-style]:[backdrop-filter:none] data-[starting-style]:before:opacity-0 data-[ending-style]:before:opacity-0";
+declare const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) before:absolute before:inset-0 before:content-[''] before:pointer-events-none before:[backdrop-filter:var(--cue-paint-scrim-filter,none)] transition-[background-color,backdrop-filter] duration-fast ease-out before:transition-opacity before:duration-fast before:ease-out motion-reduce:transition-none motion-reduce:before:transition-none data-[starting-style]:bg-transparent data-[ending-style]:bg-transparent data-[starting-style]:[backdrop-filter:none] data-[ending-style]:[backdrop-filter:none] data-[starting-style]:before:opacity-0 data-[ending-style]:before:opacity-0";
 /**
  * What a Base UI `Positioner` needs and nothing more: it is a layout box, not a
  * painted one. The stacking context lives here so the popup itself can stay
@@ -88,14 +88,14 @@ declare const overlayPositionerClasses = "z-50 outline-none";
  * transitions — no animation library, and nothing to run on the main thread
  * when the user has asked for reduced motion.
  */
-declare const overlayPopupTransitionClasses = "origin-(--transform-origin) transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
+declare const overlayPopupTransitionClasses = "origin-(--transform-origin) transition-[opacity,scale] duration-instant ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
 /**
  * Enter/exit for a centred modal surface. Split from
  * {@link overlayPopupTransitionClasses} because a dialog is centred with a
  * translate, and animating `scale` alongside a static `translate` needs the
  * transition property list to name both.
  */
-declare const overlayModalTransitionClasses = "transition-[opacity,scale] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
+declare const overlayModalTransitionClasses = "transition-[opacity,scale] duration-fast ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
 /**
  * Body copy inside an overlay: the body voice (mono unless a style set names
  * another face — `_style-body.ts`), one rung under the panel's own text.

package/dist/overlays/_surface.js

@@ -88,9 +88,9 @@ const overlaySurfaceClasses = `rounded-overlay ${STROKE_SURFACE_2} ${ELEVATION_2
 * composed declaration without entering it; at rest the property is theirs.
 * The pseudo's `transition` and timing are its own classes: Tailwind
 * registers `--tw-duration` and `--tw-ease` with `inherits: false`, so the
-* scrim's `duration-150 ease-out` never reach it.
+* scrim's `duration-fast ease-out` never reach it.
 */
-const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) before:absolute before:inset-0 before:content-[''] before:pointer-events-none before:[backdrop-filter:var(--cue-paint-scrim-filter,none)] transition-[background-color,backdrop-filter] duration-150 ease-out before:transition-opacity before:duration-150 before:ease-out motion-reduce:transition-none motion-reduce:before:transition-none data-[starting-style]:bg-transparent data-[ending-style]:bg-transparent data-[starting-style]:[backdrop-filter:none] data-[ending-style]:[backdrop-filter:none] data-[starting-style]:before:opacity-0 data-[ending-style]:before:opacity-0";
+const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) before:absolute before:inset-0 before:content-[''] before:pointer-events-none before:[backdrop-filter:var(--cue-paint-scrim-filter,none)] transition-[background-color,backdrop-filter] duration-fast ease-out before:transition-opacity before:duration-fast before:ease-out motion-reduce:transition-none motion-reduce:before:transition-none data-[starting-style]:bg-transparent data-[ending-style]:bg-transparent data-[starting-style]:[backdrop-filter:none] data-[ending-style]:[backdrop-filter:none] data-[starting-style]:before:opacity-0 data-[ending-style]:before:opacity-0";
 /**
 * What a Base UI `Positioner` needs and nothing more: it is a layout box, not a
 * painted one. The stacking context lives here so the popup itself can stay
@@ -103,14 +103,14 @@ const overlayPositionerClasses = "z-50 outline-none";
 * transitions — no animation library, and nothing to run on the main thread
 * when the user has asked for reduced motion.
 */
-const overlayPopupTransitionClasses = "origin-(--transform-origin) transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
+const overlayPopupTransitionClasses = "origin-(--transform-origin) transition-[opacity,scale] duration-instant ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
 /**
 * Enter/exit for a centred modal surface. Split from
 * {@link overlayPopupTransitionClasses} because a dialog is centred with a
 * translate, and animating `scale` alongside a static `translate` needs the
 * transition property list to name both.
 */
-const overlayModalTransitionClasses = "transition-[opacity,scale] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
+const overlayModalTransitionClasses = "transition-[opacity,scale] duration-fast ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
 /**
 * Body copy inside an overlay: the body voice (mono unless a style set names
 * another face — `_style-body.ts`), one rung under the panel's own text.

package/dist/overlays/drawer.js

@@ -106,7 +106,7 @@ const Drawer$1 = {
 				children: /* @__PURE__ */ jsxs(Drawer.Popup, {
 					ref,
 					"data-slot": "drawer-popup",
-					className: cn(overlaySurfaceClasses, DRAWER_RADIUS, "flex flex-col overflow-y-auto overscroll-contain outline-none transition-transform duration-200 ease-out data-[swiping]:duration-0 motion-reduce:transition-none", POPUP_GEOMETRY[direction], className),
+					className: cn(overlaySurfaceClasses, DRAWER_RADIUS, "flex flex-col overflow-y-auto overscroll-contain outline-none transition-transform duration-brisk ease-out data-[swiping]:duration-0 motion-reduce:transition-none", POPUP_GEOMETRY[direction], className),
 					...popupProps,
 					children: [grabHandle ? /* @__PURE__ */ jsx("div", {
 						"data-slot": "drawer-grab-handle",

package/dist/overlays/menubar.js

@@ -68,7 +68,7 @@ const Menubar$1 = {
 		return /* @__PURE__ */ jsx(Menu.Trigger, {
 			ref,
 			"data-slot": "menubar-trigger",
-			className: cn(`inline-flex h-control-sm shrink-0 cursor-default items-center rounded-control px-(--cue-space-3) text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted transition-colors duration-150 outline-none select-none hover:text-fg ${FOCUS_RING_INSET} data-[popup-open]:bg-accent-soft data-[popup-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, CONTROL_FACE, className),
+			className: cn(`inline-flex h-control-sm shrink-0 cursor-default items-center rounded-control px-(--cue-space-3) text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted transition-colors duration-fast outline-none select-none hover:text-fg ${FOCUS_RING_INSET} data-[popup-open]:bg-accent-soft data-[popup-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, CONTROL_FACE, className),
 			...elementProps
 		});
 	}),

package/dist/overlays/sheet.js

@@ -23,7 +23,7 @@ import { Dialog } from "@base-ui/react/dialog";
 * into a corner; killing the outer edge is what makes it read as part of the
 * window.
 */
-const sheetPopupVariants = cva(`${overlaySurfaceClasses} fixed z-50 flex flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none transition-transform duration-200 ease-out motion-reduce:transition-none`, {
+const sheetPopupVariants = cva(`${overlaySurfaceClasses} fixed z-50 flex flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none transition-transform duration-brisk ease-out motion-reduce:transition-none`, {
 	variants: { side: {
 		right: "inset-y-0 right-0 w-[min(28rem,calc(100vw-2rem))] rounded-r-none border-y-0 border-r-0 data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full",
 		left: "inset-y-0 left-0 w-[min(28rem,calc(100vw-2rem))] rounded-l-none border-y-0 border-l-0 data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full",

package/dist/overlays/toast.js

@@ -83,7 +83,7 @@ function ToastItem({ toast, className, closeLabel }) {
 	return /* @__PURE__ */ jsxs(Toast.Root, {
 		toast,
 		"data-slot": "toast-root",
-		className: cn(overlaySurfaceClasses, `relative flex flex-col gap-(--cue-space-1) border-l-2 ${TOAST_PAD_Y} pr-(--cue-space-6) ${TOAST_PAD_X} outline-none`, "transition-[opacity,translate] duration-150 ease-out motion-reduce:transition-none", "data-[starting-style]:translate-x-2 data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-2 data-[ending-style]:opacity-0", "data-[limited]:hidden", TOAST_TONE_RAIL[toToastTone(toast.type)], className),
+		className: cn(overlaySurfaceClasses, `relative flex flex-col gap-(--cue-space-1) border-l-2 ${TOAST_PAD_Y} pr-(--cue-space-6) ${TOAST_PAD_X} outline-none`, "transition-[opacity,translate] duration-fast ease-out motion-reduce:transition-none", "data-[starting-style]:translate-x-2 data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-2 data-[ending-style]:opacity-0", "data-[limited]:hidden", TOAST_TONE_RAIL[toToastTone(toast.type)], className),
 		children: [
 			/* @__PURE__ */ jsx(Toast.Title, {
 				"data-slot": "toast-title",

package/dist/primitives/button.js

@@ -38,7 +38,7 @@ import { useRender } from "@base-ui/react/use-render";
 *
 * @internal Not part of the public API; imported by `icon-button.tsx`.
 */
-const buttonChassis = `inline-flex select-none items-center justify-center ${CONTROL_GAP} whitespace-nowrap rounded-control ${CONTROL_FACE} ${CONTROL_WEIGHT} ${CONTROL_TRACKING} ${CONTROL_TRIM} ${CONTROL_CASE} transition-colors duration-150 outline-none ${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-focus-offset,1px)] disabled:pointer-events-none ${DISABLED_OPACITY}`;
+const buttonChassis = `inline-flex select-none items-center justify-center ${CONTROL_GAP} whitespace-nowrap rounded-control ${CONTROL_FACE} ${CONTROL_WEIGHT} ${CONTROL_TRACKING} ${CONTROL_TRIM} ${CONTROL_CASE} transition-colors duration-fast outline-none ${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-focus-offset,1px)] disabled:pointer-events-none ${DISABLED_OPACITY}`;
 /**
 * A style set's chevron cut (structural Looks, spec 2026-10-02 §3.3), for the tones
 * that are a filled shape: primary and danger always, secondary only where the set

package/dist/primitives/chip.d.ts

@@ -2,7 +2,7 @@ import { ClassProp, VariantProps } from "../lib/cva.js";
 import * as React from "react";
 //#region src/primitives/chip.d.ts
 declare const chipVariants: (props?: ({
-  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
+  tone?: "danger" | "info" | "warn" | "busy" | "accent" | "ok" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/system/agent-skin.d.ts

@@ -9,18 +9,24 @@ import "react";
  * - `aui` — supersede mode. `@cueplusplus/ui/elements.css` re-points those same
  *   tokens to assistant-ui's own values under `[data-cue-skin="aui"]`, so one
  *   DOM paints two ways with no branching in any component.
+ * - `cursor` — the same mechanism with Cursor's agent-pane values, under
+ *   `[data-cue-skin="cursor"]`: the gallery study's palette, published so a
+ *   consumer wears it rather than copying it. Its light and dark halves follow
+ *   `data-mode`, as assistant-ui's do.
  */
-type AgentSkin = "cue" | "aui";
+type AgentSkin = "cue" | "aui" | "cursor";
 /**
  * How far the supersede island goes: colour only, or colour and geometry.
  *
  * - `cue-metrics` — the default. Colour is re-pointed; cue's type scale, radius
  *   ladder and density ladder still apply, so an island tracks the density of
  *   the console around it.
- * - `upstream` — assistant-ui's metrics too: their radii, their literal 13.5 /
- *   12 / 11 px type, `--spacing` pinned at Tailwind's default. Density stops at
- *   the island edge, which is the point — this is the mode for showing an
- *   element exactly as its authors drew it.
+ * - `upstream` — the skin's own geometry too. Under `aui` that is
+ *   assistant-ui's radii, their literal 13.5 / 12 / 11 px type and `--spacing`
+ *   pinned at Tailwind's default, so density stops at the island edge, which is
+ *   the point: this is the mode for showing an element exactly as its authors
+ *   drew it. Under `cursor` it is Cursor's corners and its two faces. Cursor's
+ *   type sizes and spacing were never recorded, so those stay cue's.
  */
 type AgentFidelity = "upstream" | "cue-metrics";
 //#endregion

package/manifest/components/agent-surface.json

@@ -5,17 +5,18 @@
   "importPath": "@cueplusplus/ui/elements",
   "peerDependencies": [],
   "clientOnly": true,
-  "description": "The supersede island: one subtree, painted by a different set of values.\n\nRenders a plain `<div data-slot=\"agent-surface\" data-cue-skin=\"…\"\ndata-cue-fidelity=\"…\">` and publishes the same pair on React context. The attributes do the work —\n`@cueplusplus/ui/elements.css` re-declares, under them, the `--cue-*` tokens\nthe whole elements family reads, and custom properties inherit, so every\nelement inside repaints with no prop threading and no branch in any\ncomponent. The context exists for the one place that cannot see the DOM: an\noverlay portaled to `<body>` from inside the island, which\n{@link useCuePortalProps } stamps from the same values.\n\nTwo things this is not. It is not a theme — `data-theme`, `data-mode` and\n`data-density` are untouched, and a light app keeps a light island. And it is\nnot needed for cue mode: the elements were rewritten onto cue's tokens by the\nvendoring codemod, so `skin=\"cue\"` is what they already do. Reach for this to\nshow an element the way assistant-ui drew it, or to hand a chat panel back to\nupstream's design language inside a console that is otherwise cue's.\n\nWhat an `aui` island re-points is this family's own vocabulary rather than the\nwhole token contract: `--cue-busy`, `--cue-info`, `--cue-selection`,\n`--cue-focus`, `--cue-scrim` and every derived `*-soft` / `*-border` stay on\nthe console's theme. Nothing in the elements group reads them, so the island\nis complete for what it is for — but a *cue* component placed inside one (a\n`Chip tone=\"busy\"`, a `Toast`) paints half in each palette, and the\nderivations cannot be made to follow at all: they are `color-mix()` values\nresolved on the theme block and inherited as answers. `elements.css` carries\nthe full accounting beside the values themselves.\n\n`elements.css` is a consumer import: `@import \"@cueplusplus/ui/elements.css\";`\nafter the main stylesheet. Without it a `skin=\"aui\"` island simply stays in\ncue's palette.",
+  "description": "The supersede island: one subtree, painted by a different set of values.\n\nRenders a plain `<div data-slot=\"agent-surface\" data-cue-skin=\"…\"\ndata-cue-fidelity=\"…\">` and publishes the same pair on React context. The attributes do the work —\n`@cueplusplus/ui/elements.css` re-declares, under them, the `--cue-*` tokens\nthe whole elements family reads, and custom properties inherit, so every\nelement inside repaints with no prop threading and no branch in any\ncomponent. The context exists for the one place that cannot see the DOM: an\noverlay portaled to `<body>` from inside the island, which\n{@link useCuePortalProps } stamps from the same values.\n\nTwo things this is not. It is not a theme — `data-theme`, `data-mode` and\n`data-density` are untouched, and a light app keeps a light island. And it is\nnot needed for cue mode: the elements were rewritten onto cue's tokens by the\nvendoring codemod, so `skin=\"cue\"` is what they already do. Reach for this to\nshow an element the way assistant-ui drew it, to hand a chat panel back to\nupstream's design language inside a console that is otherwise cue's, or to\nwear Cursor's agent pane with `skin=\"cursor\"` rather than copying its palette.\n\nWhat an `aui` island re-points is this family's own vocabulary rather than the\nwhole token contract: `--cue-busy`, `--cue-info`, `--cue-selection`,\n`--cue-focus`, `--cue-scrim` and every derived `*-soft` / `*-border` stay on\nthe console's theme. Nothing in the elements group reads them, so the island\nis complete for what it is for — but a *cue* component placed inside one (a\n`Chip tone=\"busy\"`, a `Toast`) paints half in each palette, and the\nderivations cannot be made to follow at all: they are `color-mix()` values\nresolved on the theme block and inherited as answers. `elements.css` carries\nthe full accounting beside the values themselves.\n\n`elements.css` is a consumer import: `@import \"@cueplusplus/ui/elements.css\";`\nafter the main stylesheet. Without it a `skin=\"aui\"` island simply stays in\ncue's palette.",
   "props": [
     {
       "name": "skin",
-      "type": "\"cue\" | \"aui\"",
+      "type": "\"cursor\" | \"cue\" | \"aui\"",
       "required": false,
       "defaultValue": "cue",
-      "description": "Which value-set paints the subtree: `cue` (the default) or `aui`, which\ninstalls assistant-ui's own inks, grounds and hues.",
+      "description": "Which value-set paints the subtree: `cue` (the default); `aui`, which\ninstalls assistant-ui's own inks, grounds and hues; or `cursor`, Cursor's\nagent-pane values. Both halves of each follow `data-mode`.",
       "control": {
         "kind": "enum",
         "members": [
+          "cursor",
           "cue",
           "aui"
         ]
@@ -26,7 +27,7 @@
       "type": "\"upstream\" | \"cue-metrics\"",
       "required": false,
       "defaultValue": "cue-metrics",
-      "description": "How much a supersede island re-points: `cue-metrics` (the default, colour\nonly) or `upstream`, which also pins assistant-ui's radii, literal type\nsizes and spacing so the density ladder stops at the island edge.",
+      "description": "How much a supersede island re-points: `cue-metrics` (the default, colour\nonly) or `upstream`, which also pins the skin's own geometry. For `aui`\nthat is its radii, literal type sizes and spacing, so the density ladder\nstops at the island edge; for `cursor`, its corners and faces.",
       "control": {
         "kind": "enum",
         "members": [

package/manifest/components/approval-card.json

@@ -71,7 +71,7 @@
       "type": "(() => void)",
       "required": false,
       "defaultValue": null,
-      "description": "Called when the user clicks Always allow.",
+      "description": "Called when the user clicks Always allow. The button is drawn only when this is\nset, so a card never offers a standing grant nothing can honour.",
       "control": {
         "kind": "callback",
         "fixture": "callback.log"
@@ -87,10 +87,46 @@
         "kind": "callback",
         "fixture": "callback.log"
       }
+    },
+    {
+      "name": "options",
+      "type": "readonly ApprovalOption[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "The decisions the agent offered, one button each and in this order. Replaces the\ndefault Deny, Always allow and Allow once.",
+      "control": {
+        "kind": "array"
+      }
+    },
+    {
+      "name": "onDecide",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with an option's `id` when the user picks it.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "delivery",
+      "type": "\"failed\" | \"sending\" | \"sent\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Where the answer has got to: `sending`, `sent` or `failed`. While it is on its way\nand once it has arrived, the card offers nothing to press. `failed` offers the\ndecisions again. An outcome `state` wins over it.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "failed",
+          "sending",
+          "sent"
+        ]
+      }
     }
   ],
   "typeReferences": [
-    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"state\"\n  | \"command\"\n  | \"title\"\n  | \"subtitle\"\n  | \"onAllowOnce\"\n  | \"onAlwaysAllow\"\n  | \"onDeny\"\n> & {\n  /** Lifecycle of the card: request with actions, running spinner, done check, or denied. */\n  state: ApprovalState;\n  /** Command shown in the mono field the agent wants to run. */\n  command: string;\n  /** Headline naming the action that needs approval. */\n  title: string;\n  /** Supporting line under the title explaining the request. */\n  subtitle: string;\n  /** Called when the user clicks Allow once. */\n  onAllowOnce?: () => void;\n  /** Called when the user clicks Always allow. */\n  onAlwaysAllow?: () => void;\n  /** Called when the user clicks Deny. */\n  onDeny?: () => void;\n}"
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"state\"\n  | \"command\"\n  | \"title\"\n  | \"subtitle\"\n  | \"onAllowOnce\"\n  | \"onAlwaysAllow\"\n  | \"onDeny\"\n  | \"options\"\n  | \"onDecide\"\n  | \"delivery\"\n> & {\n  /** Lifecycle of the card: request with actions, running spinner, done check, or denied. */\n  state: ApprovalState;\n  /** Command shown in the mono field the agent wants to run. */\n  command: string;\n  /** Headline naming the action that needs approval. */\n  title: string;\n  /** Supporting line under the title explaining the request. */\n  subtitle: string;\n  /** Called when the user clicks Allow once. */\n  onAllowOnce?: () => void;\n  /**\n   * Called when the user clicks Always allow. The button is drawn only when this is\n   * set, so a card never offers a standing grant nothing can honour.\n   */\n  onAlwaysAllow?: () => void;\n  /** Called when the user clicks Deny. */\n  onDeny?: () => void;\n  /**\n   * The decisions the agent offered, one button each and in this order. Replaces the\n   * default Deny, Always allow and Allow once.\n   */\n  options?: readonly ApprovalOption[];\n  /** Called with an option's `id` when the user picks it. */\n  onDecide?: (id: string) => void;\n  /**\n   * Where the answer has got to: `sending`, `sent` or `failed`. While it is on its way\n   * and once it has arrived, the card offers nothing to press. `failed` offers the\n   * decisions again. An outcome `state` wins over it.\n   */\n  delivery?: RequestDelivery;\n}"
   ],
   "subcomponents": [],
   "parts": [],
@@ -122,14 +158,16 @@
   "jsonUrl": "/r/components/approval-card.json",
   "whenToUse": [
     "A command with side effects that must not run until someone says so.",
-    "Carrying that request through its whole lifecycle, since one card covers request, running, done and denied."
+    "Carrying that request through its whole lifecycle, since one card covers request, running, done and denied.",
+    "Drawing exactly the decisions the agent offered. Pass `options` with `onDecide`, and only those buttons appear."
   ],
   "whenNotToUse": [
     "A decision with no command behind it. `command` is required and is shown in a mono field.",
     "Reporting a command that failed. The four states are request, running, done and denied; a failure needs somewhere else to go."
   ],
   "commonMistakes": [
-    "Leaving `state=\"request\"` after the user has answered, so Allow and Deny stay pressable on a command that already ran.",
+    "Leaving `state=\"request\"` after the user has answered with no `delivery`, so Allow and Deny stay pressable. Set `delivery=\"sending\"` as the answer leaves.",
+    "Passing a no-op `onAlwaysAllow`. Always allow is drawn only when the handler is set, so set it only when a standing grant can be honoured.",
     "Folding the explanation into `title`. `title` names the action that needs approval; `subtitle` is the supporting line that explains it."
   ],
   "specimens": [
@@ -139,9 +177,9 @@
       "components": [
         "ApprovalCard"
       ],
-      "code": "<Specimens>\n  {APPROVALS.map((state) => (\n    <Specimen key={state} label={state} wide>\n      <ApprovalCard\n        state={approvals[state] ?? state}\n        command=\"cue unpatch --universe 4 --all\"\n        title=\"Unpatch universe 4\"\n        subtitle=\"48 channels stop responding until they are patched again.\"\n        onAllowOnce={settle(state, \"running\")}\n        onAlwaysAllow={settle(state, \"running\")}\n        onDeny={settle(state, \"denied\")}\n      />\n    </Specimen>\n  ))}\n</Specimens>",
-      "note": "Human in the loop for one action: the command in mono exactly as it will run, and three answers. The four specimens are the four states of the union, and the first one is live: answer it and it moves.",
-      "interaction": "Allow once and Always allow are separate answers, never one control with a modifier. Denying settles the card rather than hiding it."
+      "code": "<Specimens>\n  {APPROVALS.map((state) => (\n    <Specimen key={state} label={state} wide>\n      <ApprovalCard\n        state={approvals[state] ?? state}\n        command=\"cue unpatch --universe 4 --all\"\n        title=\"Unpatch universe 4\"\n        subtitle=\"48 channels stop responding until they are patched again.\"\n        onAllowOnce={settle(state, \"running\")}\n        onAlwaysAllow={settle(state, \"running\")}\n        onDeny={settle(state, \"denied\")}\n      />\n    </Specimen>\n  ))}\n  <Specimen label=\"the agent's own decisions\" wide>\n    <ApprovalCard\n      state=\"request\"\n      command=\"cue patch --universe 3 --fixtures 6\"\n      title=\"Patch universe 3\"\n      subtitle=\"The agent offered two answers, so the card draws two.\"\n      options={[\n        { id: \"reject\", label: \"Reject\" },\n        { id: \"approve\", label: \"Approve\", tone: \"primary\" },\n      ]}\n      onDecide={() => {}}\n    />\n  </Specimen>\n  <Specimen label=\"sending\" wide>\n    <ApprovalCard\n      state=\"request\"\n      delivery=\"sending\"\n      command=\"cue unpatch --universe 4 --all\"\n      title=\"Unpatch universe 4\"\n      subtitle=\"48 channels stop responding until they are patched again.\"\n    />\n  </Specimen>\n  <Specimen label=\"not sent\" wide>\n    <ApprovalCard\n      state=\"request\"\n      delivery=\"failed\"\n      command=\"cue unpatch --universe 4 --all\"\n      title=\"Unpatch universe 4\"\n      subtitle=\"48 channels stop responding until they are patched again.\"\n      onAllowOnce={() => {}}\n      onDeny={() => {}}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Human in the loop for one action: the command in mono exactly as it will run, and the answers the agent offered. The first four specimens are the four states of the union, and the first one is live: answer it and it moves. Then a card drawing the agent's own two decisions rather than the default three, and two deliveries: an answer on its way, which offers nothing to press, and one that did not arrive, which offers the answers again.",
+      "interaction": "Allow once and Always allow are separate answers, never one control with a modifier, and Always allow is drawn only when something can honour it. Denying settles the card rather than hiding it."
     }
   ]
 }

package/manifest/components/composer-input.json

@@ -7,7 +7,7 @@
     "lucide-react"
   ],
   "clientOnly": true,
-  "description": "The text field. Enter submits, guarded against IME composition so accepting a\ncandidate does not send the message.",
+  "description": "The text field: a textarea that grows with what it holds, to a cap. Enter sends and\nShift+Enter breaks the line, both guarded against IME composition so accepting a\ncandidate does not send the message.",
   "props": [
     {
       "name": "onSubmit",
@@ -19,10 +19,24 @@
         "kind": "callback",
         "fixture": "callback.log"
       }
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "`md` (the default) or `sm`: the smaller rung, a 36px floor with body type, for a\ncompact console.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "sm",
+          "md"
+        ]
+      }
     }
   ],
   "typeReferences": [
-    "Omit<ComponentProps<\"input\">, \"onSubmit\"> & {\n  /**\n   * Called on Enter, guarded against IME composition so accepting a candidate does not\n   * send.\n   */\n  onSubmit?: () => void;\n}"
+    "Omit<ComponentProps<\"textarea\">, \"onSubmit\"> & {\n  /**\n   * Called on Enter, guarded against IME composition so accepting a candidate does not\n   * send.\n   */\n  onSubmit?: () => void;\n  /**\n   * `md` (the default) or `sm`: the smaller rung, a 36px floor with body type, for a\n   * compact console.\n   */\n  size?: \"sm\" | \"md\";\n}"
   ],
   "subcomponents": [],
   "parts": [],

package/manifest/components/elicitation-form.json

@@ -76,10 +76,25 @@
         "kind": "callback",
         "fixture": "callback.log"
       }
+    },
+    {
+      "name": "delivery",
+      "type": "\"failed\" | \"sending\" | \"sent\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Where the answer has got to: `sending`, `sent` or `failed`. While it is on its way\nand once it has arrived, the form offers nothing to press. `failed` offers Decline\nand Send again. An outcome `state` wins over it.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "failed",
+          "sending",
+          "sent"
+        ]
+      }
     }
   ],
   "typeReferences": [
-    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"server\"\n  | \"message\"\n  | \"fields\"\n  | \"state\"\n  | \"onAccept\"\n  | \"onDecline\"\n> & {\n  /** Which server paused to ask. */\n  server: string;\n  /** Why the input is needed, in the server's words. */\n  message: string;\n  /** The schema the server sent, already resolved to display values. */\n  fields: readonly ElicitationField[];\n  /** Swaps the action row for the outcome once the user answers. */\n  state: ElicitationState;\n  /** Called when the filled form is sent back. */\n  onAccept?: () => void;\n  /** Called when the request is refused. */\n  onDecline?: () => void;\n}"
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"server\"\n  | \"message\"\n  | \"fields\"\n  | \"state\"\n  | \"onAccept\"\n  | \"onDecline\"\n  | \"delivery\"\n> & {\n  /** Which server paused to ask. */\n  server: string;\n  /** Why the input is needed, in the server's words. */\n  message: string;\n  /** The schema the server sent, already resolved to display values. */\n  fields: readonly ElicitationField[];\n  /** Swaps the action row for the outcome once the user answers. */\n  state: ElicitationState;\n  /** Called when the filled form is sent back. */\n  onAccept?: () => void;\n  /** Called when the request is refused. */\n  onDecline?: () => void;\n  /**\n   * Where the answer has got to: `sending`, `sent` or `failed`. While it is on its way\n   * and once it has arrived, the form offers nothing to press. `failed` offers Decline\n   * and Send again. An outcome `state` wins over it.\n   */\n  delivery?: RequestDelivery;\n}"
   ],
   "subcomponents": [],
   "parts": [],

package/manifest/components/event-feed.json

@@ -0,0 +1,171 @@
+{
+  "name": "EventFeed",
+  "slug": "event-feed",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A filterable activity feed: timestamped, typed records with a one-line\npreview, and a selection the detail pane follows (#103).\n\nThe chips are built from the kinds present, in the order each first\nappears, each with its count, so a feed never offers a filter that keeps\nnothing. The rows are a listbox: j and k, or the arrows, move the selection\nthrough the rows the filter keeps, and Home and End jump to the ends. The\nselection follows the keyboard, so the detail beside it follows too.",
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The feed's accessible name: `Run events`.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "events",
+      "type": "readonly FeedEvent[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The records, oldest first or newest first: the feed keeps the order given.",
+      "control": {
+        "kind": "array",
+        "fixture": "agents.feed"
+      }
+    },
+    {
+      "name": "filter",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "The kind the feed keeps, or `all`, when the caller holds it.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "defaultFilter",
+      "type": "string",
+      "required": false,
+      "defaultValue": "all",
+      "description": "The kind to start on when nothing controls it. Defaults to `all`.",
+      "control": {
+        "kind": "string"
+      }
+    },
+    {
+      "name": "onFilterChange",
+      "type": "((filter: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the kind, or `all`, when a chip is pressed.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "selectedId",
+      "type": "string | null",
+      "required": false,
+      "defaultValue": "null",
+      "description": "The selected event's `id`, or `null` for none.",
+      "control": {
+        "kind": "string",
+        "nullable": true
+      }
+    },
+    {
+      "name": "onSelect",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with an event's `id` when a row is clicked or the keyboard moves to it.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "formatTime",
+      "type": "((timestamp: string | number | Date) => string)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Formats the time column. Defaults to a time of day for a `Date` or a number.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "labels",
+      "type": "Partial<EventFeedLabels>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Replace any of the feed's own copy.",
+      "control": {
+        "kind": "opaque"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\" | \"onSelect\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
+    "--cue-ok",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-stream",
+    "--cue-style-focus-width",
+    "--cue-surface-2",
+    "--cue-text-label",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "A filterable activity feed: typed, timestamped records with a one-line preview and a selection.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "const [selected, setSelected] = React.useState<string | null>(null);\n\n<EventFeed\n  label=\"Run events\"\n  events={events}\n  selectedId={selected}\n  onSelect={setSelected}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/event-feed",
+  "mdUrl": "/docs/components/event-feed.md",
+  "jsonUrl": "/r/components/event-feed.json",
+  "whenToUse": [
+    "Inspecting a run beside its transcript: tool calls, permission asks, compactions, errors.",
+    "Any stream of typed records outside agents: MCP logs, device heartbeats, billing events, CI steps."
+  ],
+  "whenNotToUse": [
+    "The conversation itself. Tool calls in the transcript are `ToolGroup`'s; this is the list beside it.",
+    "Raw log lines with ANSI colour. `LogViewer`, from `@cueplusplus/ui/instruments/log-viewer`, reads those."
+  ],
+  "commonMistakes": [
+    "Drawing the detail inside the feed. The feed reports a selection; put the detail in `SplitPane`'s `detail` slot.",
+    "Kinds that are sentences. Each kind becomes a chip, so keep them to a word: `tool`, `permission`, `error`.",
+    "Formatting time strings and also passing `formatTime`. A string timestamp is drawn as given; pass a `Date` or a number to have it formatted."
+  ],
+  "specimens": [
+    {
+      "title": "EventFeed",
+      "group": "elements",
+      "components": [
+        "EventFeed"
+      ],
+      "code": "<div className=\"w-full max-w-md\">\n  <EventFeed\n    label=\"Patch run events\"\n    events={RUN_EVENTS}\n    selectedId={runEvent}\n    onSelect={setRunEvent}\n  />\n</div>",
+      "note": "The inspector beside a transcript: typed records, each a time, a toned dot, a kind, a title and a one-line preview. The chips are built from the kinds present, each with its count, so no chip keeps nothing. The detail is the host's: in a console it goes in SplitPane's detail slot.",
+      "interaction": "press a chip to keep one kind. Tab into the list, then j and k, or the arrows, move the selection through the rows the filter keeps, and Home and End jump to the ends."
+    }
+  ]
+}