@cueplusplus/ui 0.20.1 → 0.22.0

package/dist/elements/mcp-server-panel.js

@@ -60,7 +60,7 @@ function McpServerPanel({ servers, expandedId, onToggle, onAuthorize, className,
 					onClick: () => onToggle?.(server.id),
 					className: "hover:bg-surface-1 flex items-center gap-2.5 rounded-surface px-1.5 py-2 text-start transition-colors",
 					children: [
-						/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-200 motion-reduce:transition-none", expanded && "rotate-90") }),
+						/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-brisk motion-reduce:transition-none", expanded && "rotate-90") }),
 						/* @__PURE__ */ jsx(PlugIcon, { className: "text-fg-subtle size-3.5 shrink-0" }),
 						/* @__PURE__ */ jsx("span", {
 							className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
@@ -80,7 +80,7 @@ function McpServerPanel({ servers, expandedId, onToggle, onAuthorize, className,
 						})
 					]
 				}), expanded && /* @__PURE__ */ jsxs("div", {
-					className: "cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col gap-1.5 px-1.5 ps-8 pb-2 duration-200",
+					className: "cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col gap-1.5 px-1.5 ps-8 pb-2 duration-brisk",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-2",
 						children: [
@@ -95,7 +95,7 @@ function McpServerPanel({ servers, expandedId, onToggle, onAuthorize, className,
 							server.status === "needs-auth" && onAuthorize && /* @__PURE__ */ jsx("button", {
 								type: "button",
 								onClick: () => onAuthorize?.(server.id),
-								className: "ms-auto rounded-full bg-warn/15 px-2 py-0.5 text-(length:--cue-text-label) font-medium text-warn transition-[background-color,scale] duration-150 hover:bg-warn/25 active:scale-[0.96]",
+								className: "ms-auto rounded-full bg-warn/15 px-2 py-0.5 text-(length:--cue-text-label) font-medium text-warn transition-[background-color,scale] duration-fast hover:bg-warn/25 active:scale-[0.96]",
 								children: "Authorize"
 							})
 						]

package/dist/elements/memory-chips.js

@@ -27,7 +27,7 @@ function MemoryChips({ chips, onForget, className, ...props }) {
 		}), /* @__PURE__ */ jsx("div", {
 			className: "flex flex-wrap gap-1.5",
 			children: chips.map((chip) => /* @__PURE__ */ jsxs("span", {
-				className: cn("cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-animate-in cue-elements-fill-mode-both group flex items-center gap-1 rounded-full py-1 pr-1 pl-2.5 text-(length:--cue-text-ui) duration-300", chip.change === "existing" ? cn(field, "text-fg-muted") : "bg-stream/15 text-stream"),
+				className: cn("cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-animate-in cue-elements-fill-mode-both group flex items-center gap-1 rounded-full py-1 pr-1 pl-2.5 text-(length:--cue-text-ui) duration-base", chip.change === "existing" ? cn(field, "text-fg-muted") : "bg-stream/15 text-stream"),
 				children: [chip.text, /* @__PURE__ */ jsx("button", {
 					type: "button",
 					"aria-label": `Forget "${chip.text}"`,

package/dist/elements/message-attachment.js

@@ -17,11 +17,11 @@ function MessageAttachments({ attachments, onOpen, className, ...props }) {
 		children: attachments.map((item) => item.kind === "image" ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => onOpen?.(item.id),
-			className: cn(paper, "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both group flex w-full items-center gap-3 overflow-hidden rounded-overlay p-2 text-start duration-300"),
+			className: cn(paper, "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both group flex w-full items-center gap-3 overflow-hidden rounded-overlay p-2 text-start duration-base"),
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
-					className: "size-12 shrink-0 rounded-surface bg-cover bg-center transition-transform duration-300 group-hover:scale-[1.04] motion-reduce:transition-none",
+					className: "size-12 shrink-0 rounded-surface bg-cover bg-center transition-transform duration-base group-hover:scale-[1.04] motion-reduce:transition-none",
 					style: {
 						backgroundImage: item.swatch,
 						backgroundColor: "var(--cue-fg)"
@@ -42,7 +42,7 @@ function MessageAttachments({ attachments, onOpen, className, ...props }) {
 		}, item.id) : /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => onOpen?.(item.id),
-			className: cn(field, "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-2 flex w-full items-center gap-2.5 rounded-overlay px-3 py-2.5 text-start transition-colors duration-300"),
+			className: cn(field, "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-2 flex w-full items-center gap-2.5 rounded-overlay px-3 py-2.5 text-start transition-colors duration-base"),
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "bg-bg text-fg-muted flex size-8 shrink-0 items-center justify-center rounded-surface",
 				children: item.kind === "document" ? /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-3.5" })

package/dist/elements/message-branches.js

@@ -32,7 +32,7 @@ function MessageBranches({ variants, index, onIndexChange, className, ...props }
 		className: cn("flex max-w-sm flex-col gap-2", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("p", {
-			className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in text-fg min-h-[4.25rem] text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-300 motion-reduce:animate-none",
+			className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in text-fg min-h-[4.25rem] text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-base motion-reduce:animate-none",
 			children: message
 		}, index), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1",

package/dist/elements/message-pair.js

@@ -34,9 +34,9 @@ function MessagePair({ userMessage, words, visibleWords, streaming, variant = "b
 				children: [shown.map((word, index) => {
 					const fresh = streaming && shown.length - 1 - index < 2;
 					return /* @__PURE__ */ jsxs("span", {
-						className: "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both duration-500 motion-reduce:animate-none",
+						className: "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both duration-slow motion-reduce:animate-none",
 						children: [/* @__PURE__ */ jsx("span", {
-							className: cn("transition-colors duration-700 motion-reduce:transition-none", fresh && "text-stream"),
+							className: cn("transition-colors duration-slower motion-reduce:transition-none", fresh && "text-stream"),
 							children: word
 						}), " "]
 					}, `${word}-${index}`);

package/dist/elements/message-queue.js

@@ -52,7 +52,7 @@ function MessageQueue({ running, queued, onCancel, className, ...props }) {
 			/* @__PURE__ */ jsx("ul", {
 				className: "flex flex-col gap-1.5",
 				children: queued.map((message, index) => /* @__PURE__ */ jsxs("li", {
-					className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex items-center gap-2.5 rounded-overlay py-2 pr-2 pl-3 duration-300"),
+					className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex items-center gap-2.5 rounded-overlay py-2 pr-2 pl-3 duration-base"),
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: cn(mono, "text-fg-subtle w-3 shrink-0 tabular-nums"),

package/dist/elements/message-timing.js

@@ -19,7 +19,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function MessageTiming({ stats, streaming, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "message-timing",
-		className: cn("cue-elements-fade-in cue-elements-animate-in flex w-full max-w-sm flex-wrap items-center gap-x-3 gap-y-1 duration-500", className),
+		className: cn("cue-elements-fade-in cue-elements-animate-in flex w-full max-w-sm flex-wrap items-center gap-x-3 gap-y-1 duration-slow", className),
 		...props,
 		children: stats.map((stat) => /* @__PURE__ */ jsxs("span", {
 			className: "flex items-baseline gap-1",

package/dist/elements/mobile-composer.js

@@ -27,7 +27,7 @@ function MobileComposer({ value, keyboardOpen, running, actions, onAction, onAtt
 		...props,
 		children: [
 			!keyboardOpen && /* @__PURE__ */ jsx("div", {
-				className: "cue-elements-fade-in cue-elements-animate-in -mx-3 flex gap-1.5 overflow-x-auto px-3 pb-0.5 duration-200",
+				className: "cue-elements-fade-in cue-elements-animate-in -mx-3 flex gap-1.5 overflow-x-auto px-3 pb-0.5 duration-brisk",
 				children: actions.map((action) => /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: () => onAction?.(action),

package/dist/elements/model-picker.js

@@ -34,7 +34,7 @@ function ModelPicker({ models, selectedId, onSelect, className, ...props }) {
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "flex size-3.5 shrink-0 items-center justify-center",
-							children: selected && /* @__PURE__ */ jsx(CheckIcon, { className: "cue-elements-fade-in cue-elements-zoom-in-90 cue-elements-animate-in text-fg-muted size-3.5 duration-200" })
+							children: selected && /* @__PURE__ */ jsx(CheckIcon, { className: "cue-elements-fade-in cue-elements-zoom-in-90 cue-elements-animate-in text-fg-muted size-3.5 duration-brisk" })
 						}),
 						/* @__PURE__ */ jsxs("span", {
 							className: "flex min-w-0 flex-1 flex-col gap-1",

package/dist/elements/number-ticker.js

@@ -7,7 +7,7 @@ function RollingDigit({ digit }) {
 	return /* @__PURE__ */ jsx("span", {
 		className: "inline-flex h-[1.15em] overflow-hidden",
 		children: /* @__PURE__ */ jsx("span", {
-			className: "flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+			className: "flex flex-col transition-transform duration-slow ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
 			style: { transform: `translateY(-${digit * 1.15}em)` },
 			children: Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ jsx("span", {
 				className: "h-[1.15em] leading-[1.15]",

package/dist/elements/onboarding.js

@@ -22,7 +22,7 @@ function Onboarding({ steps, index, onNext, onSkip, className, ...props }) {
 		className: cn(paper, "flex w-full max-w-sm flex-col gap-4 rounded-overlay p-5", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "cue-elements-fade-in cue-elements-animate-in flex flex-col gap-2 duration-300",
+			className: "cue-elements-fade-in cue-elements-animate-in flex flex-col gap-2 duration-base",
 			children: [
 				/* @__PURE__ */ jsxs("span", {
 					className: cn(mono, "text-fg-subtle tabular-nums"),
@@ -52,13 +52,13 @@ function Onboarding({ steps, index, onNext, onSkip, className, ...props }) {
 					className: "flex gap-1.5",
 					children: steps.map((_, i) => /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: cn("h-1 rounded-full transition-all duration-300 motion-reduce:transition-none", i === current ? "bg-accent w-4" : "bg-surface-3 w-1")
+						className: cn("h-1 rounded-full transition-all duration-base motion-reduce:transition-none", i === current ? "bg-accent w-4" : "bg-surface-3 w-1")
 					}, i))
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: onSkip,
-					className: "text-fg-muted hover:bg-surface-2 hover:text-fg ms-auto h-8 rounded-full px-3 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 ms-auto h-8 rounded-full px-3 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96]",
 					children: "Skip"
 				}),
 				/* @__PURE__ */ jsx("button", {

package/dist/elements/permission-grant.js

@@ -59,13 +59,13 @@ function PermissionGrant({ capability, requester, reach, scope, onGrant, classNa
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => onGrant?.("denied"),
-						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3 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 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96]",
 						children: "Deny"
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => onGrant?.("session"),
-						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3 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 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96]",
 						children: "This session"
 					}),
 					/* @__PURE__ */ jsx("button", {
@@ -75,7 +75,7 @@ function PermissionGrant({ capability, requester, reach, scope, onGrant, classNa
 						children: "Always"
 					})
 				] }) : /* @__PURE__ */ jsx("span", {
-					className: cn(field, mono, "cue-elements-fade-in cue-elements-animate-in text-fg-muted rounded-full px-2.5 py-1.5 duration-300"),
+					className: cn(field, mono, "cue-elements-fade-in cue-elements-animate-in text-fg-muted rounded-full px-2.5 py-1.5 duration-base"),
 					children: scope === "denied" ? "denied" : `granted · ${scope}`
 				}, scope)
 			})

package/dist/elements/prompt-library.js

@@ -99,7 +99,7 @@ function PromptLibrary({ prompts, query, selectedId, onQueryChange, onSelect, on
 				]
 			}),
 			selected && /* @__PURE__ */ jsxs("div", {
-				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in flex flex-col gap-2 rounded-surface p-2.5 duration-200"),
+				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in flex flex-col gap-2 rounded-surface p-2.5 duration-brisk"),
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui) break-words",
 					children: selected.body

package/dist/elements/question-card.d.ts

@@ -0,0 +1,50 @@
+import { QuestionLabels, RequestDelivery } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/question-card.d.ts
+interface QuestionCardProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSubmit"> {
+  /** What the agent asked, in its own words. It also names the answer field. */
+  question: string;
+  /** A supporting line under the question: who is asking, or why. */
+  context?: string;
+  /** The field's resting text. Defaults to `QUESTION_LABELS.placeholder`. */
+  placeholder?: string;
+  /**
+   * The answer as the caller holds it. Drawn as sent while `delivery` is
+   * `sending` or `sent`, and put back in the field when it is `failed`, so a
+   * retry is one press.
+   */
+  answer?: string;
+  /**
+   * Where the answer has got to: `sending`, `sent` or `failed`. Unset while
+   * the question is still waiting on the person.
+   */
+  delivery?: RequestDelivery;
+  /** Called with the typed answer, trimmed, when the person sends it. */
+  onAnswer?: (answer: string) => void;
+  /** Called when the person skips the question. Skip is drawn only when this is set. */
+  onDismiss?: () => void;
+  /** Replace any of the card's own copy. */
+  labels?: Partial<QuestionLabels>;
+}
+/**
+ * An agent's free-text question, answered in place.
+ *
+ * The answer is the caller's to deliver. The card reports it through
+ * `onAnswer` and says where it has got to from `delivery`: on its way, arrived,
+ * or not arrived. It never claims more than that.
+ *
+ * @example
+ * import { QuestionCard } from "@cueplusplus/ui/elements";
+ *
+ * <QuestionCard
+ *   question="Which branch should I deploy?"
+ *   context="Asked by the release agent"
+ *   onAnswer={(text) => reply(request.id, text)}
+ * />
+ * @example
+ * // While the answer travels, the card shows it and takes no other.
+ * <QuestionCard question="Which branch?" answer="main" delivery="sending" />
+ */
+declare const QuestionCard: React.ForwardRefExoticComponent<QuestionCardProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { QuestionCard, QuestionCardProps };

package/dist/elements/question-card.js

@@ -0,0 +1,117 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
+import { field, inkButton, paper } from "./surfaces.js";
+import { QUESTION_LABELS } from "./vocabulary.js";
+import { DeliveryNote } from "./request-delivery.js";
+import { useAutoGrow } from "../lib/auto-grow.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MessageCircleQuestionIcon } from "lucide-react";
+//#region src/elements/question-card.tsx
+/**
+* An agent's free-text question, answered in place.
+*
+* The answer is the caller's to deliver. The card reports it through
+* `onAnswer` and says where it has got to from `delivery`: on its way, arrived,
+* or not arrived. It never claims more than that.
+*
+* @example
+* import { QuestionCard } from "@cueplusplus/ui/elements";
+*
+* <QuestionCard
+*   question="Which branch should I deploy?"
+*   context="Asked by the release agent"
+*   onAnswer={(text) => reply(request.id, text)}
+* />
+* @example
+* // While the answer travels, the card shows it and takes no other.
+* <QuestionCard question="Which branch?" answer="main" delivery="sending" />
+*/
+const QuestionCard = React.forwardRef(function QuestionCard({ question, context, placeholder, answer, delivery, onAnswer, onDismiss, labels, className, ...elementProps }, ref) {
+	const copy = {
+		...QUESTION_LABELS,
+		...labels
+	};
+	const questionId = React.useId();
+	const [draft, setDraft] = React.useState(answer ?? "");
+	const { ref: grow } = useAutoGrow(draft);
+	React.useEffect(() => {
+		if (answer !== void 0) setDraft(answer);
+	}, [answer]);
+	const locked = delivery === "sending" || delivery === "sent";
+	const text = draft.trim();
+	const send = () => {
+		if (text !== "") onAnswer?.(text);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "question-card",
+		"data-delivery": delivery,
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-overlay p-4", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-surface",
+					children: /* @__PURE__ */ jsx(MessageCircleQuestionIcon, {
+						"aria-hidden": true,
+						className: "size-4"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ jsx("p", {
+						id: questionId,
+						className: "text-(length:--cue-text-body) font-medium",
+						children: question
+					}), context === void 0 ? null : /* @__PURE__ */ jsx("p", {
+						className: "text-fg-muted text-(length:--cue-text-ui)",
+						children: context
+					})]
+				})]
+			}),
+			locked ? /* @__PURE__ */ jsx("p", {
+				className: cn(field, "text-fg-muted rounded-surface px-3.5 py-2.5 text-(length:--cue-text-body) whitespace-pre-wrap"),
+				children: answer ?? draft
+			}) : /* @__PURE__ */ jsx("textarea", {
+				ref: grow,
+				rows: 2,
+				"aria-labelledby": questionId,
+				value: draft,
+				placeholder: placeholder ?? copy.placeholder,
+				onChange: (event) => setDraft(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+					event.preventDefault();
+					send();
+				},
+				className: cn(field, `placeholder:text-fg-subtle max-h-48 w-full resize-none rounded-surface px-3.5 py-2.5 text-(length:--cue-text-body) outline-none field-sizing-content ${FOCUS_RING}`)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-h-8 flex-wrap items-center justify-end gap-2",
+				children: delivery === "sending" || delivery === "sent" ? /* @__PURE__ */ jsx(DeliveryNote, { delivery }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					delivery === "failed" ? /* @__PURE__ */ jsx(DeliveryNote, {
+						delivery: "failed",
+						className: "me-auto"
+					}) : null,
+					onDismiss === void 0 ? null : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onDismiss,
+						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: copy.skip
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: text === "",
+						onClick: send,
+						className: cn(inkButton, "flex h-8 items-center rounded-full px-3.5 text-(length:--cue-text-ui) font-medium disabled:opacity-50"),
+						children: copy.send
+					})
+				] })
+			})
+		]
+	});
+});
+//#endregion
+export { QuestionCard };

package/dist/elements/queue-dock.js

@@ -84,7 +84,7 @@ const QueueDock = React.forwardRef(function QueueDock({ messages, open, onOpenCh
 			className: `hover:bg-surface-2 flex items-center gap-2.5 rounded-overlay px-3 py-2 text-start transition-colors ${FOCUS_RING_INSET_2} motion-reduce:transition-none`,
 			children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
 				"aria-hidden": true,
-				className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-90")
+				className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-brisk motion-reduce:transition-none", open && "rotate-90")
 			}), /* @__PURE__ */ jsx("span", {
 				className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-ui)",
 				children: said

package/dist/elements/quota-banner.js

@@ -38,7 +38,7 @@ function QuotaBanner({ used, limit, unit, resetsIn, upgradeLabel, onUpgrade, cla
 			/* @__PURE__ */ jsx("span", {
 				className: "bg-surface-2 h-1 w-full overflow-hidden rounded-full",
 				children: /* @__PURE__ */ jsx("span", {
-					className: cn("block h-full rounded-full transition-[width] duration-500 motion-reduce:transition-none", tight ? "bg-warn" : "bg-surface-3"),
+					className: cn("block h-full rounded-full transition-[width] duration-slow motion-reduce:transition-none", tight ? "bg-warn" : "bg-surface-3"),
 					style: { width: `${pct(used, limit)}%` }
 				})
 			}),

package/dist/elements/quote-reply.js

@@ -50,20 +50,20 @@ function QuoteReply({ before, selection, after, actions, toolbarVisible, quoted,
 			/* @__PURE__ */ jsx("div", {
 				className: "flex h-9 items-start",
 				children: toolbarVisible && /* @__PURE__ */ jsx("div", {
-					className: cn("bg-surface-2 border border-border-overlay", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-slide-in-from-top-1 cue-elements-animate-in flex items-center gap-0.5 rounded-full p-1 duration-200"),
+					className: cn("bg-surface-2 border border-border-overlay", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-slide-in-from-top-1 cue-elements-animate-in flex items-center gap-0.5 rounded-full p-1 duration-brisk"),
 					children: actions.map((action) => {
 						const Icon = ICON[action.icon];
 						return /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							onClick: () => onAction?.(action.key),
-							className: "text-fg-muted hover:bg-surface-2 hover:text-fg flex h-7 items-center gap-1.5 rounded-full px-2.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 flex h-7 items-center gap-1.5 rounded-full px-2.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96]",
 							children: [/* @__PURE__ */ jsx(Icon, { className: "size-3.5" }), action.label]
 						}, action.key);
 					})
 				})
 			}),
 			quoted && /* @__PURE__ */ jsxs("div", {
-				className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in flex flex-col gap-1 duration-300",
+				className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in flex flex-col gap-1 duration-base",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
 					children: "replying to"

package/dist/elements/read-aloud.js

@@ -31,7 +31,7 @@ function ReadAloud({ words, spokenIndex, playing, rate, elapsed, duration, onTog
 		children: [/* @__PURE__ */ jsx("p", {
 			className: "text-(length:--cue-text-body) leading-(--cue-leading-ui)",
 			children: words.map((word, i) => /* @__PURE__ */ jsxs("span", {
-				className: cn("transition-colors duration-200 motion-reduce:transition-none", i < spokenIndex ? "text-fg-subtle" : i === spokenIndex ? "text-fg rounded-control bg-stream/15" : "text-fg-muted"),
+				className: cn("transition-colors duration-brisk motion-reduce:transition-none", i < spokenIndex ? "text-fg-subtle" : i === spokenIndex ? "text-fg rounded-control bg-stream/15" : "text-fg-muted"),
 				children: [word, " "]
 			}, `${i}-${word}`))
 		}), /* @__PURE__ */ jsxs("div", {
@@ -47,7 +47,7 @@ function ReadAloud({ words, spokenIndex, playing, rate, elapsed, duration, onTog
 				/* @__PURE__ */ jsx("span", {
 					className: "bg-surface-2 h-[3px] min-w-0 flex-1 overflow-hidden rounded-full",
 					children: /* @__PURE__ */ jsx("span", {
-						className: "block h-full rounded-full bg-stream transition-[width] duration-200 ease-linear motion-reduce:transition-none",
+						className: "block h-full rounded-full bg-stream transition-[width] duration-brisk ease-linear motion-reduce:transition-none",
 						style: { width: `${progress}%` }
 					})
 				}),

package/dist/elements/reasoning-effort.js

@@ -48,7 +48,7 @@ function ReasoningEffort({ levels, selectedKey, spent, onSelect, className, ...p
 						type: "button",
 						"aria-pressed": active,
 						onClick: () => onSelect?.(level.key),
-						className: cn("flex-1 rounded-full py-1 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.97]", active ? "bg-bg text-fg" : "text-fg-muted hover:text-fg-muted"),
+						className: cn("flex-1 rounded-full py-1 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.97]", active ? "bg-bg text-fg" : "text-fg-muted hover:text-fg-muted"),
 						children: level.label
 					}, level.key);
 				})
@@ -56,7 +56,7 @@ function ReasoningEffort({ levels, selectedKey, spent, onSelect, className, ...p
 			/* @__PURE__ */ jsx("span", {
 				className: "bg-surface-2 h-[3px] w-full overflow-hidden rounded-full",
 				children: /* @__PURE__ */ jsx("span", {
-					className: "block h-full rounded-full bg-stream transition-[width] duration-500 motion-reduce:transition-none",
+					className: "block h-full rounded-full bg-stream transition-[width] duration-slow motion-reduce:transition-none",
 					style: { width: `${used}%` }
 				})
 			})

package/dist/elements/reasoning-panel.js

@@ -44,7 +44,7 @@ function ReasoningPanel({ steps, visibleSteps, streaming, open, onOpenChange, re
 					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle tabular-nums"),
 					children: elapsed
 				})] }), /* @__PURE__ */ jsx(Fragment, { children: restingLabel })]
-			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5 shrink-0 opacity-60 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[panel-open]/trigger:rotate-180 motion-reduce:transition-none" })]
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5 shrink-0 opacity-60 transition-transform duration-brisk ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[panel-open]/trigger:rotate-180 motion-reduce:transition-none" })]
 		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
 			className: cn(collapsePanel, "outline-none"),
 			children: /* @__PURE__ */ jsx("ol", {
@@ -52,10 +52,10 @@ function ReasoningPanel({ steps, visibleSteps, streaming, open, onOpenChange, re
 				children: shown.map((step, i) => {
 					const active = streaming && i === shown.length - 1;
 					return /* @__PURE__ */ jsxs("li", {
-						className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex gap-3 duration-300",
+						className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex gap-3 duration-base",
 						children: [/* @__PURE__ */ jsx("span", {
 							"aria-hidden": true,
-							className: cn("mt-[7px] size-[5px] shrink-0 rounded-full transition-colors duration-300", active ? "animate-pulse bg-stream" : "bg-surface-3")
+							className: cn("mt-[7px] size-[5px] shrink-0 rounded-full transition-colors duration-base", active ? "animate-pulse bg-stream" : "bg-surface-3")
 						}), /* @__PURE__ */ jsxs("span", {
 							className: "flex min-w-0 flex-1 flex-col",
 							children: [/* @__PURE__ */ jsx("p", {

package/dist/elements/recommendation-card.js

@@ -63,7 +63,7 @@ function RecommendationCard({ state, question, children, confidenceLabel, accept
 					children: [/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: onAlternatives,
-						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: "Alternatives"
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
@@ -72,7 +72,7 @@ function RecommendationCard({ state, question, children, confidenceLabel, accept
 						children: "Accept"
 					})]
 				})] }) : /* @__PURE__ */ jsxs("div", {
-					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: "cue-elements-fade-in cue-elements-animate-in text-fg-muted flex items-center gap-2 text-(length:--cue-text-ui) duration-base",
 					children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-ok" }), acceptedLabel]
 				}, "accepted")
 			})

package/dist/elements/regenerate-menu.js

@@ -31,7 +31,7 @@ function RegenerateMenu({ options, open, currentId, onOpenChange, onPick, classN
 			className: cn(ghostButton, "size-7 self-start", open && "bg-surface-2 text-fg"),
 			children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: "size-3.5" })
 		}), open && /* @__PURE__ */ jsx("div", {
-			className: cn("bg-surface-2 border border-border-overlay", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col gap-0.5 rounded-overlay p-1.5 duration-200"),
+			className: cn("bg-surface-2 border border-border-overlay", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col gap-0.5 rounded-overlay p-1.5 duration-brisk"),
 			children: options.map((option) => /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				onClick: () => onPick?.(option.id),

package/dist/elements/request-delivery.js

@@ -0,0 +1,31 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { DELIVERY_LABELS } from "./vocabulary.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, Loader2Icon, TriangleAlertIcon } from "lucide-react";
+//#region src/elements/request-delivery.tsx
+/**
+* Where a request card's answer has got to, as one status line.
+*
+* @internal Drawn by the request cards; not exported from the barrel.
+*/
+function DeliveryNote({ delivery, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		role: "status",
+		"data-slot": "delivery-note",
+		"data-delivery": delivery,
+		className: cn("flex items-center gap-2 text-(length:--cue-text-ui)", delivery === "failed" ? "text-danger" : "text-fg-muted", className),
+		children: [delivery === "sending" ? /* @__PURE__ */ jsx(Loader2Icon, {
+			"aria-hidden": true,
+			className: "size-3.5 animate-spin motion-reduce:animate-none"
+		}) : delivery === "sent" ? /* @__PURE__ */ jsx(CheckIcon, {
+			"aria-hidden": true,
+			className: "size-3.5"
+		}) : /* @__PURE__ */ jsx(TriangleAlertIcon, {
+			"aria-hidden": true,
+			className: "size-3.5"
+		}), DELIVERY_LABELS[delivery]]
+	});
+}
+//#endregion
+export { DeliveryNote };

package/dist/elements/research-report.js

@@ -58,7 +58,7 @@ function ResearchReport({ title, sections, sourcesRead, className, ...props }) {
 						})
 					]
 				}), section.preview && /* @__PURE__ */ jsx("p", {
-					className: "text-fg-muted cue-elements-fade-in cue-elements-animate-in ps-5.5 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-300",
+					className: "text-fg-muted cue-elements-fade-in cue-elements-animate-in ps-5.5 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-base",
 					children: section.preview
 				})]
 			}, section.id))

package/dist/elements/retrieval-chunks.js

@@ -34,14 +34,14 @@ function RetrievalChunks({ query, chunks, visibleCount, searching, className, ..
 					className: "relative inline-block leading-none",
 					children: "Retrieving"
 				}) : /* @__PURE__ */ jsxs("span", {
-					className: "cue-elements-fade-in cue-elements-animate-in duration-300",
+					className: "cue-elements-fade-in cue-elements-animate-in duration-base",
 					children: [chunks.length, " passages above threshold"]
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex min-h-[7rem] flex-col gap-1.5",
 				children: take(chunks, visibleCount).map((chunk) => /* @__PURE__ */ jsxs("div", {
-					className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex flex-col gap-1.5 rounded-overlay px-3.5 py-2.5 duration-300"),
+					className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex flex-col gap-1.5 rounded-overlay px-3.5 py-2.5 duration-base"),
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex items-baseline gap-2",
@@ -67,7 +67,7 @@ function RetrievalChunks({ query, chunks, visibleCount, searching, className, ..
 						/* @__PURE__ */ jsx("span", {
 							className: "bg-surface-2 h-[2px] w-full overflow-hidden rounded-full",
 							children: /* @__PURE__ */ jsx("span", {
-								className: "block h-full rounded-full bg-stream/70 transition-[width] duration-500",
+								className: "block h-full rounded-full bg-stream/70 transition-[width] duration-slow",
 								style: { width: `${pct(chunk.score, 1)}%` }
 							})
 						})

package/dist/elements/revert-dock.js

@@ -312,7 +312,7 @@ const RevertDock = React.forwardRef(function RevertDock({ label = "Revert to thi
 								onConfirmingChange?.(null);
 								onRestore?.(confirming);
 							},
-							className: `bg-danger text-danger-fg flex items-center gap-1.5 rounded-control px-3 py-1.5 text-(length:--cue-text-ui) font-medium outline-none transition-[opacity,scale] duration-150 enabled:hover:opacity-90 enabled:active:scale-[0.96] disabled:opacity-60 ${FOCUS_RING} motion-reduce:transition-none`,
+							className: `bg-danger text-danger-fg flex items-center gap-1.5 rounded-control px-3 py-1.5 text-(length:--cue-text-ui) font-medium outline-none transition-[opacity,scale] duration-fast enabled:hover:opacity-90 enabled:active:scale-[0.96] disabled:opacity-60 ${FOCUS_RING} motion-reduce:transition-none`,
 							children: [/* @__PURE__ */ jsx(RotateCcwIcon, {
 								"aria-hidden": true,
 								className: "size-3.5"

package/dist/elements/reviewable-diff.js

@@ -50,7 +50,7 @@ function ReviewableDiff({ filename, hunks, onKeep, onDiscard, onApply, className
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-col",
 				children: hunks.map((hunk) => /* @__PURE__ */ jsxs("div", {
-					className: cn("border-border border-t transition-opacity duration-300", hunk.decision === "discarded" && "opacity-40"),
+					className: cn("border-border border-t transition-opacity duration-base", hunk.decision === "discarded" && "opacity-40"),
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-2 px-4 py-1.5",
 						children: [/* @__PURE__ */ jsx("span", {
@@ -62,16 +62,16 @@ function ReviewableDiff({ filename, hunks, onKeep, onDiscard, onApply, className
 								type: "button",
 								"aria-label": `Discard hunk ${hunk.range}`,
 								onClick: () => onDiscard?.(hunk.id),
-								className: "text-fg-muted hover:bg-surface-2 hover:text-fg flex h-6 items-center gap-1 rounded-full px-2 text-(length:--cue-text-label) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+								className: "text-fg-muted hover:bg-surface-2 hover:text-fg flex h-6 items-center gap-1 rounded-full px-2 text-(length:--cue-text-label) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96]",
 								children: [/* @__PURE__ */ jsx(XIcon, { className: "size-3" }), "Discard"]
 							}), /* @__PURE__ */ jsxs("button", {
 								type: "button",
 								"aria-label": `Keep hunk ${hunk.range}`,
 								onClick: () => onKeep?.(hunk.id),
-								className: "flex h-6 items-center gap-1 rounded-full bg-ok/12 px-2 text-(length:--cue-text-label) font-medium text-ok transition-[background-color,scale] duration-150 hover:bg-ok/20 active:scale-[0.96]",
+								className: "flex h-6 items-center gap-1 rounded-full bg-ok/12 px-2 text-(length:--cue-text-label) font-medium text-ok transition-[background-color,scale] duration-fast hover:bg-ok/20 active:scale-[0.96]",
 								children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3" }), "Keep"]
 							})] }) : /* @__PURE__ */ jsx("span", {
-								className: cn(mono, "cue-elements-fade-in cue-elements-animate-in duration-300", hunk.decision === "kept" ? "text-ok" : "text-fg-subtle"),
+								className: cn(mono, "cue-elements-fade-in cue-elements-animate-in duration-base", hunk.decision === "kept" ? "text-ok" : "text-fg-subtle"),
 								children: hunk.decision
 							})
 						})]