@cueplusplus/ui 0.20.1 → 0.22.0

package/dist/elements/chat-panel.js

@@ -46,7 +46,7 @@ function ChatPanelMessages({ className, ...props }) {
 function ChatPanelUserMessage({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "chat-panel-user-message",
-		className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in self-end rounded-overlay px-3 py-1.5 text-(length:--cue-text-ui) duration-300", className),
+		className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in self-end rounded-overlay px-3 py-1.5 text-(length:--cue-text-ui) duration-base", className),
 		...props
 	});
 }
@@ -62,7 +62,7 @@ function ChatPanelAssistantMessage({ className, ...props }) {
 function ChatPanelTyping({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "chat-panel-typing",
-		className: cn("cue-elements-fade-in cue-elements-animate-in flex gap-1 self-start px-1 duration-300", className),
+		className: cn("cue-elements-fade-in cue-elements-animate-in flex gap-1 self-start px-1 duration-base", className),
 		...props,
 		children: [
 			"-0.32s",

package/dist/elements/checkpoint-history.js

@@ -53,7 +53,7 @@ function CheckpointHistory({ checkpoints, currentId, onRestore, className, ...pr
 						type: "button",
 						"aria-label": `Restore to ${checkpoint.label}`,
 						onClick: () => onRestore?.(checkpoint.id),
-						className: "text-fg-muted hover:bg-surface-2 hover:text-fg flex h-6 shrink-0 items-center gap-1 rounded-full px-2 text-(length:--cue-text-label) font-medium opacity-0 transition-[background-color,color,opacity,scale] duration-150 group-hover:opacity-100 focus-visible:opacity-100 active:scale-[0.96]",
+						className: "text-fg-muted hover:bg-surface-2 hover:text-fg flex h-6 shrink-0 items-center gap-1 rounded-full px-2 text-(length:--cue-text-label) font-medium opacity-0 transition-[background-color,color,opacity,scale] duration-fast group-hover:opacity-100 focus-visible:opacity-100 active:scale-[0.96]",
 						children: [/* @__PURE__ */ jsx(RotateCcwIcon, { className: "size-2.5" }), "Restore"]
 					})
 				]

package/dist/elements/code-diff.js

@@ -54,7 +54,7 @@ function CodeDiff({ filename, additions, deletions, lines, cycle, className, ...
 			children: /* @__PURE__ */ jsx("div", {
 				className: codeSurface,
 				children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", {
-					className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both flex px-4 py-0.5 leading-(--cue-leading-ui) whitespace-pre duration-300", line.kind === "context" && "text-fg-muted", line.kind === "added" && "bg-ok/10 text-ok", line.kind === "removed" && "bg-danger/10 text-danger"),
+					className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both flex px-4 py-0.5 leading-(--cue-leading-ui) whitespace-pre duration-base", line.kind === "context" && "text-fg-muted", line.kind === "added" && "bg-ok/10 text-ok", line.kind === "removed" && "bg-danger/10 text-danger"),
 					style: { animationDelay: `${i * 60}ms` },
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "w-4 shrink-0 select-none",

package/dist/elements/code-runner.js

@@ -54,7 +54,7 @@ function CodeRunner({ language, code, state, output, durationMs, onRun, classNam
 				})
 			}),
 			state !== "idle" && /* @__PURE__ */ jsxs("div", {
-				className: "border-border cue-elements-fade-in cue-elements-animate-in flex flex-col border-t px-3.5 py-2.5 duration-300",
+				className: "border-border cue-elements-fade-in cue-elements-animate-in flex flex-col border-t px-3.5 py-2.5 duration-base",
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle pb-1"),

package/dist/elements/composer.d.ts

@@ -197,15 +197,21 @@ declare function ComposerAttachmentChip({ attachment, onRemove, className, ...pr
   onRemove?: (name: string) => void;
 }): import("react").JSX.Element;
 /**
- * The text field. Enter submits, guarded against IME composition so accepting a
+ * The text field: a textarea that grows with what it holds, to a cap. Enter sends and
+ * Shift+Enter breaks the line, both guarded against IME composition so accepting a
  * candidate does not send the message.
  */
-declare function ComposerInput({ onSubmit, onKeyDown, className, ...props }: Omit<ComponentProps<"input">, "onSubmit"> & {
+declare function ComposerInput({ onSubmit, onKeyDown, size, className, ...props }: Omit<ComponentProps<"textarea">, "onSubmit"> & {
   /**
    * Called on Enter, guarded against IME composition so accepting a candidate does not
    * send.
    */
   onSubmit?: () => void;
+  /**
+   * `md` (the default) or `sm`: the smaller rung, a 36px floor with body type, for a
+   * compact console.
+   */
+  size?: "sm" | "md";
 }): import("react").JSX.Element;
 /**
  * What replaces the input while the microphone is open: a level meter, a running clock

package/dist/elements/composer.js

@@ -3,6 +3,7 @@ import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "../system/_focus-ring.js";
 import { ShimmerLabel, field, floating, ghostButton, iconSwap, iconSwapIn, iconSwapOut, inkButton, mono, paper } from "./surfaces.js";
 import { clamp, pct } from "./range.js";
+import { useAutoGrow } from "../lib/auto-grow.js";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUpIcon, CheckIcon, ChevronDownIcon, FileArchiveIcon, FileImageIcon, FileTextIcon, Loader2Icon, MicIcon, PlusIcon, SquareIcon, XIcon } from "lucide-react";
@@ -127,7 +128,7 @@ function ComposerMenu({ open, align = "start", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "composer-menu",
 		"data-open": open || void 0,
-		className: cn(floating, "absolute bottom-full z-10 mb-2 flex w-72 flex-col gap-0.5 rounded-overlay p-1.5", align === "start" ? "start-0 origin-bottom-left" : "end-0 origin-bottom-right", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", open ? "scale-100 opacity-100" : "pointer-events-none scale-[0.97] opacity-0", className),
+		className: cn(floating, "absolute bottom-full z-10 mb-2 flex w-72 flex-col gap-0.5 rounded-overlay p-1.5", align === "start" ? "start-0 origin-bottom-left" : "end-0 origin-bottom-right", "transition-[opacity,scale] duration-brisk ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", open ? "scale-100 opacity-100" : "pointer-events-none scale-[0.97] opacity-0", className),
 		...props
 	});
 }
@@ -240,26 +241,33 @@ function ComposerAttachmentChip({ attachment, onRemove, className, ...props }) {
 			}),
 			attachment.state === "uploading" && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: "absolute inset-x-0 bottom-0 h-0.5 bg-stream/70 transition-[width] duration-300",
+				className: "absolute inset-x-0 bottom-0 h-0.5 bg-stream/70 transition-[width] duration-base",
 				style: { width: `${pct(attachment.progress ?? 0, 100)}%` }
 			})
 		]
 	});
 }
 /**
-* The text field. Enter submits, guarded against IME composition so accepting a
+* The text field: a textarea that grows with what it holds, to a cap. Enter sends and
+* Shift+Enter breaks the line, both guarded against IME composition so accepting a
 * candidate does not send the message.
 */
-function ComposerInput({ onSubmit, onKeyDown, className, ...props }) {
-	return /* @__PURE__ */ jsx("input", {
+function ComposerInput({ onSubmit, onKeyDown, size = "md", className, ...props }) {
+	const grow = useAutoGrow(props.value);
+	return /* @__PURE__ */ jsx("textarea", {
+		...grow,
 		"data-slot": "composer-input",
+		rows: 1,
+		"data-size": size,
+		"data-small": size === "sm" || void 0,
 		onKeyDown: (event) => {
 			onKeyDown?.(event);
 			if (event.defaultPrevented) return;
-			if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+			if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+			event.preventDefault();
 			onSubmit?.();
 		},
-		className: cn(`placeholder:text-fg-subtle min-h-11 w-full bg-transparent px-3 text-(length:--cue-text-emphasis) caret-stream outline-none ${FOCUS_RING}`, className),
+		className: cn(`placeholder:text-fg-subtle min-h-11 max-h-48 w-full resize-none overflow-y-auto bg-transparent px-3 py-2.5 field-sizing-content data-small:min-h-9 data-small:py-1.5 data-small:text-(length:--cue-text-body) text-(length:--cue-text-emphasis) caret-stream outline-none ${FOCUS_RING}`, className),
 		...props
 	});
 }
@@ -282,7 +290,7 @@ function ComposerVoice({ recording, seconds, className, ...props }) {
 				className: "flex h-6 items-center gap-[3px]",
 				"aria-hidden": true,
 				children: BARS.map((bar) => /* @__PURE__ */ jsx("span", {
-					className: cn("w-0.5 rounded-full transition-[height,background-color] duration-150 motion-reduce:transition-none", recording ? "bg-accent" : "bg-surface-3"),
+					className: cn("w-0.5 rounded-full transition-[height,background-color] duration-fast motion-reduce:transition-none", recording ? "bg-accent" : "bg-surface-3"),
 					style: { height: recording ? barHeight(bar, seconds * 10) : 3 }
 				}, bar))
 			}),
@@ -357,7 +365,7 @@ function ComposerModelItem({ entry, selected, ...props }) {
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "flex w-4 justify-end",
-				children: selected && /* @__PURE__ */ jsx(CheckIcon, { className: "cue-elements-fade-in cue-elements-zoom-in-90 cue-elements-animate-in size-3.5 duration-200" })
+				children: selected && /* @__PURE__ */ jsx(CheckIcon, { className: "cue-elements-fade-in cue-elements-zoom-in-90 cue-elements-animate-in size-3.5 duration-brisk" })
 			})
 		]
 	});
@@ -394,7 +402,7 @@ function ComposerContext({ usage, className, ...props }) {
 		className: cn("group/ctx relative", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn(floating, "absolute end-0 bottom-full z-10 mb-2 flex w-60 origin-bottom-right flex-col gap-3.5 rounded-overlay p-4", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "pointer-events-none scale-[0.97] opacity-0", "group-hover/ctx:pointer-events-auto group-hover/ctx:scale-100 group-hover/ctx:opacity-100", "group-focus-within/ctx:pointer-events-auto group-focus-within/ctx:scale-100 group-focus-within/ctx:opacity-100"),
+			className: cn(floating, "absolute end-0 bottom-full z-10 mb-2 flex w-60 origin-bottom-right flex-col gap-3.5 rounded-overlay p-4", "transition-[opacity,scale] duration-brisk ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "pointer-events-none scale-[0.97] opacity-0", "group-hover/ctx:pointer-events-auto group-hover/ctx:scale-100 group-hover/ctx:opacity-100", "group-focus-within/ctx:pointer-events-auto group-focus-within/ctx:scale-100 group-focus-within/ctx:opacity-100"),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-baseline justify-between",
@@ -409,7 +417,7 @@ function ComposerContext({ usage, className, ...props }) {
 				/* @__PURE__ */ jsx("div", {
 					className: "bg-surface-2 flex h-[5px] w-full gap-px overflow-hidden rounded-full",
 					children: segments.map((segment) => /* @__PURE__ */ jsx("span", {
-						className: cn("h-full transition-[width] duration-700 motion-reduce:transition-none", segment.className),
+						className: cn("h-full transition-[width] duration-slower motion-reduce:transition-none", segment.className),
 						style: { width: `${pct(segment.value, usage.total)}%` }
 					}, segment.label))
 				}),
@@ -469,7 +477,7 @@ function ComposerContext({ usage, className, ...props }) {
 					fill: "none",
 					strokeWidth: "2.5",
 					strokeLinecap: "round",
-					className: "stroke-current transition-[stroke-dashoffset] duration-700 motion-reduce:transition-none",
+					className: "stroke-current transition-[stroke-dashoffset] duration-slower motion-reduce:transition-none",
 					strokeDasharray: circumference,
 					strokeDashoffset: circumference * (1 - clamp(fraction, 0, 1))
 				})]

package/dist/elements/computer-use.js

@@ -47,7 +47,7 @@ function ComputerUse({ url, steps, activeIndex, children, className, ...props })
 					children,
 					trail.map((step, i) => /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: "pointer-events-none absolute size-2 rounded-full bg-stream transition-opacity duration-300",
+						className: "pointer-events-none absolute size-2 rounded-full bg-stream transition-opacity duration-base",
 						style: {
 							left: `${step.x}%`,
 							top: `${step.y}%`,
@@ -56,7 +56,7 @@ function ComputerUse({ url, steps, activeIndex, children, className, ...props })
 					}, step.id)),
 					active && /* @__PURE__ */ jsx(MousePointer2Icon, {
 						"aria-hidden": true,
-						className: "pointer-events-none absolute size-4 fill-stream text-stream transition-[left,top] duration-500 ease-out motion-reduce:transition-none",
+						className: "pointer-events-none absolute size-4 fill-stream text-stream transition-[left,top] duration-slow ease-out motion-reduce:transition-none",
 						style: {
 							left: `${active.x}%`,
 							top: `${active.y}%`

package/dist/elements/confidence-marker.js

@@ -47,7 +47,7 @@ function ConfidenceMarker({ claims, hoveredId, onHover, className, ...props }) {
 			children: hovered && /* @__PURE__ */ jsxs("span", {
 				id: basisId,
 				role: "status",
-				className: cn("bg-surface-2 border border-border-overlay", "font-mono text-(length:--cue-text-label) tracking-tight", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-animate-in text-fg-muted flex items-center gap-1.5 rounded-full px-2.5 py-1.5 duration-150"),
+				className: cn("bg-surface-2 border border-border-overlay", "font-mono text-(length:--cue-text-label) tracking-tight", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-animate-in text-fg-muted flex items-center gap-1.5 rounded-full px-2.5 py-1.5 duration-fast"),
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,

package/dist/elements/connection-state.js

@@ -17,7 +17,7 @@ function ConnectionState({ phase, attempt, resumedTokens, onRetry, className, ..
 	if (phase === "online") return null;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "connection-state",
-		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex w-full max-w-sm items-center gap-2.5 rounded-overlay px-3.5 py-2.5 duration-300", className),
+		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex w-full max-w-sm items-center gap-2.5 rounded-overlay px-3.5 py-2.5 duration-base", className),
 		...props,
 		children: [
 			phase === "dropped" && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -29,7 +29,7 @@ function ConnectionState({ phase, attempt, resumedTokens, onRetry, className, ..
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: onRetry,
-					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]",
+					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-fast active:scale-[0.96]",
 					children: "Reconnect"
 				})
 			] }),

package/dist/elements/context-breakdown.js

@@ -39,7 +39,7 @@ function ContextBreakdown({ segments, limit, className, ...props }) {
 			/* @__PURE__ */ jsx("div", {
 				className: "bg-surface-2 flex h-2 w-full overflow-hidden rounded-full",
 				children: segments.map((segment) => /* @__PURE__ */ jsx("span", {
-					className: cn("h-full transition-[width] duration-500 ease-out motion-reduce:transition-none", segment.tint),
+					className: cn("h-full transition-[width] duration-slow ease-out motion-reduce:transition-none", segment.tint),
 					style: { width: `${share(segment.tokens)}%` }
 				}, segment.label))
 			}),

package/dist/elements/context-usage.js

@@ -124,7 +124,7 @@ const ContextUsage = React.forwardRef(function ContextUsage({ categories, limit,
 				children: rows.map(({ category, tone }) => /* @__PURE__ */ jsx("span", {
 					"data-slot": "context-usage-segment",
 					"data-color": tone,
-					className: cn("h-full transition-[width] duration-500 ease-out motion-reduce:transition-none", TONE_FILL[tone]),
+					className: cn("h-full transition-[width] duration-slow ease-out motion-reduce:transition-none", TONE_FILL[tone]),
 					style: { width: `${pct(category.tokens, limit)}%` }
 				}, category.label))
 			}),

package/dist/elements/conversation-search.js

@@ -59,7 +59,7 @@ function ConversationSearch({ query, hits, activeIndex, onQueryChange, onStep, c
 					})
 				]
 			}), active && /* @__PURE__ */ jsxs("div", {
-				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in rounded-surface px-3 py-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-200"),
+				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in rounded-surface px-3 py-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-brisk"),
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "text-fg-muted",
@@ -79,7 +79,7 @@ function ConversationSearch({ query, hits, activeIndex, onQueryChange, onStep, c
 			className: "bg-surface-1 relative w-1.5 shrink-0 rounded-full",
 			children: hits.map((hit, i) => /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("absolute inset-x-0 h-1 rounded-full transition-colors duration-200", i === index ? "bg-warn" : "bg-warn/35"),
+				className: cn("absolute inset-x-0 h-1 rounded-full transition-colors duration-brisk", i === index ? "bg-warn" : "bg-warn/35"),
 				style: { top: `${hit.position}%` }
 			}, hit.id))
 		})]

package/dist/elements/cost-meter.js

@@ -38,7 +38,7 @@ function CostMeter({ runCost, sessionCost, lines, className, ...props }) {
 			/* @__PURE__ */ jsx("div", {
 				className: "bg-surface-2 flex h-1.5 w-full overflow-hidden rounded-full",
 				children: lines.map((line, i) => /* @__PURE__ */ jsx("span", {
-					className: cn("h-full transition-[width] duration-500 motion-reduce:transition-none", i === 0 ? "bg-stream" : i === 1 ? "bg-stream/55" : "bg-surface-3"),
+					className: cn("h-full transition-[width] duration-slow motion-reduce:transition-none", i === 0 ? "bg-stream" : i === 1 ? "bg-stream/55" : "bg-surface-3"),
 					style: { width: `${pct(line.share, 1)}%` }
 				}, line.model))
 			}),

package/dist/elements/data-table.js

@@ -39,7 +39,7 @@ function ElementsDataTable({ rows, cycle, className, ...props }) {
 			}),
 			/* @__PURE__ */ jsx("div", { className: "bg-surface-2 mx-4 h-px" }),
 			/* @__PURE__ */ jsx("div", { children: rows.map((row, index) => /* @__PURE__ */ jsxs("div", {
-				className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 flex items-center gap-2.5 px-4 py-2.5 transition-colors duration-300",
+				className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 flex items-center gap-2.5 px-4 py-2.5 transition-colors duration-base",
 				style: { animationDelay: `${index * 80}ms` },
 				children: [
 					/* @__PURE__ */ jsx("span", {

package/dist/elements/diagram.js

@@ -64,7 +64,7 @@ function Diagram({ title, zoom, children, onZoomIn, onZoomOut, onReset, onExpand
 		}), /* @__PURE__ */ jsx("div", {
 			className: "border-border flex min-h-[10rem] items-center justify-center overflow-hidden border-t p-4",
 			children: /* @__PURE__ */ jsx("div", {
-				className: "origin-center transition-transform duration-200 ease-out motion-reduce:transition-none",
+				className: "origin-center transition-transform duration-brisk ease-out motion-reduce:transition-none",
 				style: { transform: `scale(${zoom})` },
 				children
 			})

package/dist/elements/draft-restore.js

@@ -20,7 +20,7 @@ import { PencilLineIcon, XIcon } from "lucide-react";
 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-overlay py-2 pr-2 pl-3.5 duration-300", className),
+		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-overlay py-2 pr-2 pl-3.5 duration-base", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(PencilLineIcon, { className: "text-fg-subtle size-3.5 shrink-0" }),
@@ -37,7 +37,7 @@ function DraftRestore({ draft, savedAt, onRestore, onDiscard, className, ...prop
 			/* @__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]",
+				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-fast active:scale-[0.96]",
 				children: "Restore"
 			}),
 			/* @__PURE__ */ jsx("button", {

package/dist/elements/edit-message.js

@@ -62,7 +62,7 @@ function EditMessage({ value, discardedReplies, editing, onValueChange, onSave,
 				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]",
+					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-fast active:scale-[0.96]",
 					children: "Cancel"
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",

package/dist/elements/elements.css

@@ -429,6 +429,112 @@
   }
 }
 
+/* ── Supersede mode: Cursor's values ───────────────────────────────────
+ *
+ * Cursor's agent pane, as a skin a consumer can wear with
+ * `<AgentSurface skin="cursor">` (cue-ui-56). The values are the gallery
+ * study's, `CURSOR` in `packages/specimens/src/pages/clones/palette.ts`, where
+ * their provenance is written out: the dark half is quoted from Cursor's own
+ * theme seed, and the light half is synthesised from that seed. The study and
+ * this block are held to each other value for value by
+ * `packages/specimens/test/cursor-skin.test.ts`, so a correction to either
+ * fails until the other agrees.
+ *
+ * The same shape and the same accounting as assistant-ui's island above. Three
+ * blocks, so the light half is reached the three ways a light theme is. Derived
+ * tokens are absent by construction, and `--cue-busy`, `--cue-info`,
+ * `--cue-selection` and `--cue-scrim` are absent by choice. Unlike upstream,
+ * Cursor documents its own status hues, so this island takes them. The ring is
+ * the island's own blue rather than the console's.
+ */
+[data-cue-skin="cursor"] {
+  color-scheme: dark;
+  --cue-bg: #181818;
+  --cue-sunken: #141414;
+  --cue-surface-1: #1f1f1f;
+  --cue-surface-2: color-mix(in srgb, #f0f0f0 6%, transparent);
+  --cue-surface-3: #262626;
+  --cue-fg: #f0f0f0;
+  --cue-fg-muted: color-mix(in srgb, #f0f0f0 74%, transparent);
+  --cue-fg-subtle: color-mix(in srgb, #f0f0f0 60%, transparent);
+  --cue-border: #2c2c2c;
+  --cue-border-strong: #3a3a3a;
+  --cue-border-overlay: #2c2c2c;
+  --cue-accent: #599ce7;
+  --cue-accent-hover: #7db2ee;
+  --cue-accent-fg: #101010;
+  --cue-stream: #599ce7;
+  --cue-ok: #3fa266;
+  --cue-warn: #f1b467;
+  --cue-danger: #e34671;
+  --cue-focus: var(--cue-accent);
+  /* The inks on the red and the amber. The study records neither, because
+   * its chrome never fills a button with either. The dark half's accent ink
+   * reads on both: 4.88:1 on the red and 10.39:1 on the amber. */
+  --cue-danger-fg: var(--cue-accent-fg);
+  --cue-warn-fg: var(--cue-accent-fg);
+}
+
+[data-mode="light"] [data-cue-skin="cursor"],
+[data-cue-skin="cursor"][data-mode="light"] {
+  color-scheme: light;
+  --cue-bg: #ffffff;
+  --cue-sunken: #f2f2f2;
+  --cue-surface-1: #f7f7f7;
+  --cue-surface-2: color-mix(in srgb, #1a1a1a 6%, transparent);
+  --cue-surface-3: #e8e8e8;
+  --cue-fg: #1a1a1a;
+  --cue-fg-muted: color-mix(in srgb, #1a1a1a 74%, transparent);
+  --cue-fg-subtle: color-mix(in srgb, #1a1a1a 60%, transparent);
+  --cue-border: #e0e0e0;
+  --cue-border-strong: #c8c8c8;
+  --cue-border-overlay: #e0e0e0;
+  --cue-accent: #2f6fbf;
+  --cue-accent-hover: #255a9d;
+  --cue-accent-fg: #ffffff;
+  --cue-stream: #2f6fbf;
+  --cue-ok: #2f7d52;
+  --cue-warn: #a86a13;
+  --cue-danger: #c22e50;
+  --cue-focus: var(--cue-accent);
+  /* White on the red, 5.53:1. The amber is the one place this half needs an
+   * ink from outside the palette. Its white reaches 4.43:1 and its type
+   * 3.93:1, both under AA. Black is the only ink that clears it, at 4.74:1. */
+  --cue-danger-fg: var(--cue-accent-fg);
+  --cue-warn-fg: #000000;
+}
+
+@media (prefers-color-scheme: light) {
+  [data-mode="system"] [data-cue-skin="cursor"],
+  [data-cue-skin="cursor"][data-mode="system"] {
+    color-scheme: light;
+    --cue-bg: #ffffff;
+    --cue-sunken: #f2f2f2;
+    --cue-surface-1: #f7f7f7;
+    --cue-surface-2: color-mix(in srgb, #1a1a1a 6%, transparent);
+    --cue-surface-3: #e8e8e8;
+    --cue-fg: #1a1a1a;
+    --cue-fg-muted: color-mix(in srgb, #1a1a1a 74%, transparent);
+    --cue-fg-subtle: color-mix(in srgb, #1a1a1a 60%, transparent);
+    --cue-border: #e0e0e0;
+    --cue-border-strong: #c8c8c8;
+    --cue-border-overlay: #e0e0e0;
+    --cue-accent: #2f6fbf;
+    --cue-accent-hover: #255a9d;
+    --cue-accent-fg: #ffffff;
+    --cue-stream: #2f6fbf;
+    --cue-ok: #2f7d52;
+    --cue-warn: #a86a13;
+    --cue-danger: #c22e50;
+    --cue-focus: var(--cue-accent);
+    /* White on the red, 5.53:1. The amber is the one place this half needs an
+     * ink from outside the palette. Its white reaches 4.43:1 and its type
+     * 3.93:1, both under AA. Black is the only ink that clears it, at 4.74:1. */
+    --cue-danger-fg: var(--cue-accent-fg);
+    --cue-warn-fg: #000000;
+  }
+}
+
 /* ── Metrics ───────────────────────────────────────────────────────────
  *
  * `fidelity="upstream"` pins geometry to assistant-ui's, which means the
@@ -468,6 +574,34 @@
   --cue-text-title: 24px;
 }
 
+/* Cursor's geometry, at `fidelity="upstream"`. What the record has is its
+ * corners and its two faces, so those are what this pins. Its type sizes and
+ * spacing were never recorded. The plain upstream block above still matches a
+ * Cursor island and would pin assistant-ui's literal pixels on it, so this
+ * block hands both back to cue. The type rungs inherit the console's, and
+ * spacing rides the density ladder, as it does at `cue-metrics`. Two attribute
+ * selectors outrank the one above, whatever the order. */
+[data-cue-skin="cursor"][data-cue-fidelity="upstream"] {
+  --spacing: calc(0.25rem * var(--cue-density, 1));
+  --cue-radius-scale: 1;
+  --cue-radius-control: 0.375rem;
+  --cue-radius-surface: 0.5rem;
+  --cue-radius-overlay: 0.75rem;
+  --radius-control: 0.375rem;
+  --radius-surface: 0.5rem;
+  --radius-overlay: 0.75rem;
+  --cue-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
+  --cue-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --cue-text-micro: inherit;
+  --cue-text-label: inherit;
+  --cue-text-ui: inherit;
+  --cue-text-body: inherit;
+  --cue-text-emphasis: inherit;
+  --cue-text-title: inherit;
+}
+
 /* `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

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

@@ -1,3 +1,4 @@
+import { RequestDelivery } from "./vocabulary.js";
 import { ComponentProps } from "react";
 //#region src/elements/elicitation-form.d.ts
 type ElicitationState = "request" | "accepted" | "declined";
@@ -30,7 +31,7 @@ interface ElicitationField {
  *   onDecline={decline}
  * />
  */
-declare function ElicitationForm({ server, message, fields, state, onAccept, onDecline, className, ...props }: Omit<ComponentProps<"div">, "children" | "server" | "message" | "fields" | "state" | "onAccept" | "onDecline"> & {
+declare function ElicitationForm({ server, message, fields, state, onAccept, onDecline, delivery, className, ...props }: Omit<ComponentProps<"div">, "children" | "server" | "message" | "fields" | "state" | "onAccept" | "onDecline" | "delivery"> & {
   /** Which server paused to ask. */
   server: string;
   /** Why the input is needed, in the server's words. */
@@ -43,6 +44,12 @@ declare function ElicitationForm({ server, message, fields, state, onAccept, onD
   onAccept?: () => void;
   /** Called when the request is refused. */
   onDecline?: () => void;
+  /**
+   * Where the answer has got to: `sending`, `sent` or `failed`. While it is on its way
+   * and once it has arrived, the form offers nothing to press. `failed` offers Decline
+   * and Send again. An outcome `state` wins over it.
+   */
+  delivery?: RequestDelivery;
 }): import("react").JSX.Element;
 //#endregion
 export { ElicitationField, ElicitationForm, ElicitationState };

package/dist/elements/elicitation-form.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { field, inkButton, mono, paper } from "./surfaces.js";
+import { DeliveryNote } from "./request-delivery.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, PlugIcon, XIcon } from "lucide-react";
 //#region src/elements/elicitation-form.tsx
@@ -19,7 +20,7 @@ import { CheckIcon, PlugIcon, XIcon } from "lucide-react";
 *   onDecline={decline}
 * />
 */
-function ElicitationForm({ server, message, fields, state, onAccept, onDecline, className, ...props }) {
+function ElicitationForm({ server, message, fields, state, onAccept, onDecline, delivery, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "elicitation-form",
 		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-overlay p-4", className),
@@ -66,8 +67,8 @@ function ElicitationForm({ server, message, fields, state, onAccept, onDecline,
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ jsx("span", {
 							"aria-hidden": true,
-							className: cn("flex h-4 w-7 items-center rounded-full p-0.5 transition-colors duration-200", item.value === "true" ? "bg-accent" : "bg-surface-3"),
-							children: /* @__PURE__ */ jsx("span", { className: cn("bg-bg size-3 rounded-full transition-transform duration-200 motion-reduce:transition-none", item.value === "true" && "translate-x-3") })
+							className: cn("flex h-4 w-7 items-center rounded-full p-0.5 transition-colors duration-brisk", item.value === "true" ? "bg-accent" : "bg-surface-3"),
+							children: /* @__PURE__ */ jsx("span", { className: cn("bg-bg size-3 rounded-full transition-transform duration-brisk motion-reduce:transition-none", item.value === "true" && "translate-x-3") })
 						}), /* @__PURE__ */ jsx("span", {
 							className: "text-fg-muted text-(length:--cue-text-ui)",
 							children: item.value === "true" ? "On" : "Off"
@@ -79,19 +80,26 @@ function ElicitationForm({ server, message, fields, state, onAccept, onDecline,
 				}, item.name))
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "flex h-8 items-center justify-end gap-2",
-				children: state === "request" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: onDecline,
-					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: "Decline"
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: onAccept,
-					className: cn(inkButton, "flex h-8 items-center rounded-full px-3.5 text-(length:--cue-text-ui) font-medium"),
-					children: "Send"
-				})] }) : /* @__PURE__ */ jsx("span", {
-					className: "cue-elements-fade-in cue-elements-animate-in text-fg-muted flex items-center gap-2 text-(length:--cue-text-ui) duration-300",
+				className: "flex min-h-8 flex-wrap items-center justify-end gap-2",
+				children: state === "request" && (delivery === "sending" || delivery === "sent") ? /* @__PURE__ */ jsx(DeliveryNote, { delivery }) : state === "request" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					delivery === "failed" ? /* @__PURE__ */ jsx(DeliveryNote, {
+						delivery: "failed",
+						className: "me-auto"
+					}) : null,
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onDecline,
+						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-fast active:scale-[0.96]",
+						children: "Decline"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onAccept,
+						className: cn(inkButton, "flex h-8 items-center rounded-full px-3.5 text-(length:--cue-text-ui) font-medium"),
+						children: "Send"
+					})
+				] }) : /* @__PURE__ */ jsx("span", {
+					className: "cue-elements-fade-in cue-elements-animate-in text-fg-muted flex items-center gap-2 text-(length:--cue-text-ui) duration-base",
 					children: state === "accepted" ? /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-ok" }),
 						"Sent to ",

package/dist/elements/empty-state.js

@@ -40,7 +40,7 @@ function ChatEmptyState({ className, ...props }) {
 function EmptyStateGreeting({ className, ...props }) {
 	return /* @__PURE__ */ jsx("h2", {
 		"data-slot": "empty-state-greeting",
-		className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both text-center text-(length:--cue-text-title) font-medium tracking-tight duration-500 motion-reduce:animate-none", className),
+		className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both text-center text-(length:--cue-text-title) font-medium tracking-tight duration-slow motion-reduce:animate-none", className),
 		...props
 	});
 }
@@ -64,7 +64,7 @@ function EmptyStateSuggestion({ index = 0, className, style, ...props }) {
 			animationDelay: `${120 + index * 70}ms`,
 			...style
 		},
-		className: cn(paper, `cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both ${FOCUS_RING} rounded-full px-4 py-2 text-(length:--cue-text-body) transition-transform duration-500 outline-none hover:-translate-y-px active:scale-[0.96] motion-reduce:animate-none`, className),
+		className: cn(paper, `cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both ${FOCUS_RING} rounded-full px-4 py-2 text-(length:--cue-text-body) transition-transform duration-slow outline-none hover:-translate-y-px active:scale-[0.96] motion-reduce:animate-none`, className),
 		...props
 	});
 }
@@ -80,7 +80,7 @@ function EmptyStateComposer({ placeholder, onSend, className, style, ...props })
 			animationDelay: "360ms",
 			...style
 		},
-		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both flex h-13 w-full items-center justify-between rounded-full py-2 ps-5 pe-2.5 duration-500 motion-reduce:animate-none", className),
+		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both flex h-13 w-full items-center justify-between rounded-full py-2 ps-5 pe-2.5 duration-slow motion-reduce:animate-none", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "text-fg-subtle text-(length:--cue-text-emphasis)",

package/dist/elements/error-state.js

@@ -21,7 +21,7 @@ function ErrorState({ title, detail, retrying, onRetry, className, ...props }) {
 	if (retrying) return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "error-state",
 		role: "status",
-		className: cn("cue-elements-fade-in cue-elements-animate-in flex w-full max-w-sm items-center gap-2.5 text-(length:--cue-text-body) duration-300 motion-reduce:animate-none", className),
+		className: cn("cue-elements-fade-in cue-elements-animate-in flex w-full max-w-sm items-center gap-2.5 text-(length:--cue-text-body) duration-base motion-reduce:animate-none", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(RefreshCwIcon, { className: "text-fg-muted size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }), /* @__PURE__ */ jsx(ShimmerLabel, {
 			className: "text-fg-muted relative inline-block",
@@ -31,7 +31,7 @@ function ErrorState({ title, detail, retrying, onRetry, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "error-state",
 		role: "alert",
-		className: cn("cue-elements-fade-in cue-elements-animate-in flex w-full max-w-sm items-start gap-2.5 rounded-overlay bg-danger/10 px-4 py-3 text-(length:--cue-text-body) duration-300 motion-reduce:animate-none", className),
+		className: cn("cue-elements-fade-in cue-elements-animate-in flex w-full max-w-sm items-start gap-2.5 rounded-overlay bg-danger/10 px-4 py-3 text-(length:--cue-text-body) duration-base motion-reduce:animate-none", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(CircleAlertIcon, { className: "mt-0.5 size-4 shrink-0 text-danger/80" }),