@cueplusplus/ui 0.20.1 → 0.22.0

package/dist/elements/schedule-card.js

@@ -48,8 +48,8 @@ function ScheduleCard({ name, cadence, nextRun, enabled, history, onToggle, clas
 						"aria-checked": enabled,
 						"aria-label": `${enabled ? "Pause" : "Resume"} ${name}`,
 						onClick: onToggle,
-						className: cn("flex h-5 w-9 shrink-0 items-center rounded-full p-0.5 transition-colors duration-200", enabled ? "bg-accent" : "bg-surface-3"),
-						children: /* @__PURE__ */ jsx("span", { className: cn("bg-bg size-4 rounded-full transition-transform duration-200 motion-reduce:transition-none", enabled && "translate-x-4") })
+						className: cn("flex h-5 w-9 shrink-0 items-center rounded-full p-0.5 transition-colors duration-brisk", enabled ? "bg-accent" : "bg-surface-3"),
+						children: /* @__PURE__ */ jsx("span", { className: cn("bg-bg size-4 rounded-full transition-transform duration-brisk motion-reduce:transition-none", enabled && "translate-x-4") })
 					})
 				]
 			}),

package/dist/elements/score-breakdown.js

@@ -43,7 +43,7 @@ function ScoreBreakdown({ verdict, total, outOf, criteria, visibleCount, classNa
 		}), /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-2",
 			children: take(criteria, visibleCount).map((criterion) => /* @__PURE__ */ jsxs("div", {
-				className: "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 duration-300",
+				className: "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 duration-base",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex items-baseline gap-2",
@@ -65,7 +65,7 @@ function ScoreBreakdown({ verdict, total, outOf, criteria, visibleCount, classNa
 					/* @__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: `${pct(criterion.score, outOf)}%` }
 						})
 					}),

package/dist/elements/scroll-anchor.js

@@ -100,7 +100,7 @@ function ScrollAnchor({ messages, paused = false, onSettled, className, ...props
 				ref: viewportRef,
 				className: "flex h-full flex-col gap-2.5 overflow-y-hidden scroll-smooth motion-reduce:scroll-auto p-4",
 				children: messages.slice(0, count).map((message, i) => /* @__PURE__ */ jsx("div", {
-					className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in max-w-[85%] text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-300 motion-reduce:animate-none", message.role === "user" ? cn(field, "self-end rounded-overlay px-3 py-1.5") : "text-fg-muted self-start"),
+					className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in max-w-[85%] text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-base motion-reduce:animate-none", message.role === "user" ? cn(field, "self-end rounded-overlay px-3 py-1.5") : "text-fg-muted self-start"),
 					children: message.text
 				}, i))
 			}),
@@ -111,7 +111,7 @@ function ScrollAnchor({ messages, paused = false, onSettled, className, ...props
 			!pinned && newCount > 0 && /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				onClick: jump,
-				className: cn("bg-surface-2 border border-border-overlay", "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in absolute inset-x-0 bottom-3 mx-auto flex w-fit items-center gap-1.5 rounded-full px-3.5 py-1.5 text-(length:--cue-text-ui) transition-transform duration-200 hover:-translate-y-px"),
+				className: cn("bg-surface-2 border border-border-overlay", "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in absolute inset-x-0 bottom-3 mx-auto flex w-fit items-center gap-1.5 rounded-full px-3.5 py-1.5 text-(length:--cue-text-ui) transition-transform duration-brisk hover:-translate-y-px"),
 				children: [
 					/* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-3 opacity-60" }),
 					newCount,

package/dist/elements/settings-panel.js

@@ -37,7 +37,7 @@ function SettingsPanel({ model, models, systemPrompt, temperature, toggles, onMo
 						type: "button",
 						"aria-pressed": option === model,
 						onClick: () => onModelChange?.(option),
-						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]", option === model ? "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]", option === model ? "bg-bg text-fg" : "text-fg-muted hover:text-fg-muted"),
 						children: option
 					}, option))
 				})]
@@ -96,8 +96,8 @@ function SettingsPanel({ model, models, systemPrompt, temperature, toggles, onMo
 						"aria-checked": toggle.on,
 						"aria-label": toggle.label,
 						onClick: () => onToggle?.(toggle.key),
-						className: cn("flex h-5 w-9 shrink-0 items-center rounded-full p-0.5 transition-colors duration-200", toggle.on ? "bg-accent" : "bg-surface-3"),
-						children: /* @__PURE__ */ jsx("span", { className: cn("bg-bg size-4 rounded-full transition-transform duration-200 motion-reduce:transition-none", toggle.on && "translate-x-4") })
+						className: cn("flex h-5 w-9 shrink-0 items-center rounded-full p-0.5 transition-colors duration-brisk", toggle.on ? "bg-accent" : "bg-surface-3"),
+						children: /* @__PURE__ */ jsx("span", { className: cn("bg-bg size-4 rounded-full transition-transform duration-brisk motion-reduce:transition-none", toggle.on && "translate-x-4") })
 					})]
 				}, toggle.key))
 			})

package/dist/elements/sources.js

@@ -32,7 +32,7 @@ function Sources({ sources, open, onOpenChange, className }) {
 					className: cn(mono, "text-fg-subtle tabular-nums"),
 					children: sources.length
 				}),
-				/* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3 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 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"),

package/dist/elements/spec-sheet.js

@@ -29,7 +29,7 @@ function SpecSheet({ title, subtitle, rows, visibleCount, className, ...props })
 		}), /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col",
 			children: take(rows, visibleCount).map((row) => /* @__PURE__ */ jsxs("div", {
-				className: "border-border cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both flex items-baseline gap-3 border-t py-1.5 duration-300 first:border-t-0 first:pt-0",
+				className: "border-border cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both flex items-baseline gap-3 border-t py-1.5 duration-base first:border-t-0 first:pt-0",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: cn(mono, "text-fg-subtle w-24 shrink-0"),
 					children: row.label

package/dist/elements/stopped-run.js

@@ -33,13 +33,13 @@ function StoppedRun({ words, reason, onContinue, onDiscard, className, ...props
 				/* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: onContinue,
-					className: "text-fg-muted hover:bg-surface-2 hover:text-fg ms-auto flex h-7 items-center gap-1 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 ms-auto flex h-7 items-center gap-1 rounded-full px-2.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96]",
 					children: ["Continue", /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3" })]
 				}),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: onDiscard,
-					className: "text-fg-muted hover:bg-surface-2 hover:text-fg flex h-7 items-center 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 rounded-full px-2.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96]",
 					children: "Discard"
 				})
 			]

package/dist/elements/streaming-text.js

@@ -29,9 +29,9 @@ function StreamingText({ segments, count, streaming, className, ...props }) {
 		children: [shown.map(({ word, mono: isMono }, i) => {
 			const fresh = streaming && shown.length - 1 - i < 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", isMono && "bg-surface-2 rounded-control px-1.5 py-0.5 font-mono text-[0.85em]"),
+					className: cn("transition-colors duration-slower motion-reduce:transition-none", fresh && "text-stream", isMono && "bg-surface-2 rounded-control px-1.5 py-0.5 font-mono text-[0.85em]"),
 					children: word
 				}), " "]
 			}, i);

package/dist/elements/subagent-list.js

@@ -32,7 +32,7 @@ function SubagentList({ agents, completedCount, progress, showSummary, summaryAg
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [
-						done ? /* @__PURE__ */ jsx(CheckIcon, { className: "cue-elements-fade-in cue-elements-zoom-in-90 cue-elements-animate-in size-3.5 shrink-0 text-ok duration-200" }) : /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }),
+						done ? /* @__PURE__ */ jsx(CheckIcon, { className: "cue-elements-fade-in cue-elements-zoom-in-90 cue-elements-animate-in size-3.5 shrink-0 text-ok duration-brisk" }) : /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }),
 						/* @__PURE__ */ jsx("span", {
 							className: "flex-1 truncate text-(length:--cue-text-body)",
 							children: agent.name
@@ -45,13 +45,13 @@ function SubagentList({ agents, completedCount, progress, showSummary, summaryAg
 				}), /* @__PURE__ */ jsx("span", {
 					className: "bg-surface-2 h-[3px] w-full overflow-hidden rounded-full",
 					children: /* @__PURE__ */ jsx("span", {
-						className: cn("block h-full rounded-full transition-[width] duration-700", done ? "bg-ok/70" : "bg-accent"),
+						className: cn("block h-full rounded-full transition-[width] duration-slower", done ? "bg-ok/70" : "bg-accent"),
 						style: { width: `${pct(width, 100)}%` }
 					})
 				})]
 			}, agent.name);
 		}), showSummary && /* @__PURE__ */ jsxs("div", {
-			className: cn("bg-surface-1 border border-border", "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in flex flex-col gap-2 rounded-overlay px-3.5 py-2.5 duration-300"),
+			className: cn("bg-surface-1 border border-border", "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in flex flex-col gap-2 rounded-overlay px-3.5 py-2.5 duration-base"),
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
 				children: [
@@ -68,7 +68,7 @@ function SubagentList({ agents, completedCount, progress, showSummary, summaryAg
 			}), /* @__PURE__ */ jsx("span", {
 				className: "bg-surface-2 h-[3px] w-full overflow-hidden rounded-full",
 				children: /* @__PURE__ */ jsx("span", {
-					className: "bg-accent block h-full rounded-full transition-[width] duration-700",
+					className: "bg-accent block h-full rounded-full transition-[width] duration-slower",
 					style: { width: "42%" }
 				})
 			})]

package/dist/elements/suggestions.js

@@ -26,7 +26,7 @@ function Suggestions({ suggestions, selectedSuggestion, cycle, onSuggestion, var
 			type: "button",
 			"aria-pressed": selectedSuggestion === suggestion,
 			onClick: () => onSuggestion(suggestion),
-			className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both flex cursor-pointer items-center text-(length:--cue-text-body) transition-transform duration-300 hover:-translate-y-px active:scale-[0.96] motion-reduce:animate-none", list ? "w-full rounded-overlay px-4 py-2.5 text-start" : "rounded-full px-4 py-2", selectedSuggestion === suggestion && "bg-accent text-accent-fg"),
+			className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both flex cursor-pointer items-center text-(length:--cue-text-body) transition-transform duration-base hover:-translate-y-px active:scale-[0.96] motion-reduce:animate-none", list ? "w-full rounded-overlay px-4 py-2.5 text-start" : "rounded-full px-4 py-2", selectedSuggestion === suggestion && "bg-accent text-accent-fg"),
 			style: { animationDelay: `${index * 70}ms` },
 			children: suggestion
 		}, suggestion))

package/dist/elements/surfaces.d.ts

@@ -9,19 +9,19 @@ declare const field = "bg-fg/[0.06]";
 /** {@link field} for something clickable. */
 declare const fieldInteractive = "bg-fg/[0.06] transition-colors hover:bg-fg/[0.09]";
 /** The press affordance: a 4% squash on pointer-down, stilled under reduced motion. */
-declare const pressable = "transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.96] motion-reduce:transition-none";
+declare const pressable = "transition-transform duration-fast ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.96] motion-reduce:transition-none";
 /** A round chromeless icon button, with the ring cue puts on everything focusable. */
-declare const ghostButton = "flex items-center justify-center rounded-full text-fg-muted outline-none transition-[background-color,color,scale] duration-150 hover:bg-surface-2 hover:text-fg active:scale-[0.96] focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:outline-offset-1 motion-reduce:transition-none";
+declare const ghostButton = "flex items-center justify-center rounded-full text-fg-muted outline-none transition-[background-color,color,scale] duration-fast hover:bg-surface-2 hover:text-fg active:scale-[0.96] focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:outline-offset-1 motion-reduce:transition-none";
 /** The inverse fill: accent ground, accent ink — the one loud button in a panel. */
-declare const inkButton = "bg-accent text-accent-fg transition-[background-color,scale] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-accent-hover active:scale-[0.96] motion-reduce:transition-none";
+declare const inkButton = "bg-accent text-accent-fg transition-[background-color,scale] duration-fast ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-accent-hover active:scale-[0.96] motion-reduce:transition-none";
 /** The stacked layer of an icon crossfade. Both layers share one grid cell. */
-declare const iconSwap = "[grid-area:1/1] transition-[opacity,scale,filter] duration-200 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none";
+declare const iconSwap = "[grid-area:1/1] transition-[opacity,scale,filter] duration-brisk ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none";
 /** The icon that is showing. */
 declare const iconSwapIn = "scale-100 opacity-100 blur-none";
 /** The icon that is leaving: shrunk, blurred and gone. */
 declare const iconSwapOut = "scale-[0.25] opacity-0 blur-[4px]";
 /** The stacked layer of a label crossfade, measured by {@link SwapLabel}. */
-declare const labelSwap = "col-start-1 row-start-1 flex w-max items-center gap-1.5 leading-none transition-[opacity,filter] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none";
+declare const labelSwap = "col-start-1 row-start-1 flex w-max items-center gap-1.5 leading-none transition-[opacity,filter] duration-base ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none";
 /** The label that is showing. */
 declare const labelSwapIn = "opacity-100 blur-none";
 /** The label that is leaving, and which must not be selectable while it goes. */
@@ -34,7 +34,7 @@ declare const labelSwapOut = "pointer-events-none select-none opacity-0 blur-[2p
  * wired to the peer this package already requires rather than to the one
  * upstream's registry asks for.
  */
-declare const collapsePanel = "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none";
+declare const collapsePanel = "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-brisk ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none";
 /** The streaming hue: what is happening right now, rather than what has happened. */
 declare const live = "text-stream";
 /** The metadata typeface: mono, one rung down, tight. Used about a hundred times. */

package/dist/elements/surfaces.js

@@ -13,19 +13,19 @@ const field = "bg-fg/[0.06]";
 /** {@link field} for something clickable. */
 const fieldInteractive = "bg-fg/[0.06] transition-colors hover:bg-fg/[0.09]";
 /** The press affordance: a 4% squash on pointer-down, stilled under reduced motion. */
-const pressable = "transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.96] motion-reduce:transition-none";
+const pressable = "transition-transform duration-fast ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.96] motion-reduce:transition-none";
 /** A round chromeless icon button, with the ring cue puts on everything focusable. */
-const ghostButton = `flex items-center justify-center rounded-full text-fg-muted outline-none transition-[background-color,color,scale] duration-150 hover:bg-surface-2 hover:text-fg active:scale-[0.96] ${FOCUS_RING} motion-reduce:transition-none`;
+const ghostButton = `flex items-center justify-center rounded-full text-fg-muted outline-none transition-[background-color,color,scale] duration-fast hover:bg-surface-2 hover:text-fg active:scale-[0.96] ${FOCUS_RING} motion-reduce:transition-none`;
 /** The inverse fill: accent ground, accent ink — the one loud button in a panel. */
-const inkButton = "bg-accent text-accent-fg transition-[background-color,scale] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-accent-hover active:scale-[0.96] motion-reduce:transition-none";
+const inkButton = "bg-accent text-accent-fg transition-[background-color,scale] duration-fast ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-accent-hover active:scale-[0.96] motion-reduce:transition-none";
 /** The stacked layer of an icon crossfade. Both layers share one grid cell. */
-const iconSwap = "[grid-area:1/1] transition-[opacity,scale,filter] duration-200 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none";
+const iconSwap = "[grid-area:1/1] transition-[opacity,scale,filter] duration-brisk ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none";
 /** The icon that is showing. */
 const iconSwapIn = "scale-100 opacity-100 blur-none";
 /** The icon that is leaving: shrunk, blurred and gone. */
 const iconSwapOut = "scale-[0.25] opacity-0 blur-[4px]";
 /** The stacked layer of a label crossfade, measured by {@link SwapLabel}. */
-const labelSwap = "col-start-1 row-start-1 flex w-max items-center gap-1.5 leading-none transition-[opacity,filter] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none";
+const labelSwap = "col-start-1 row-start-1 flex w-max items-center gap-1.5 leading-none transition-[opacity,filter] duration-base ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none";
 /** The label that is showing. */
 const labelSwapIn = "opacity-100 blur-none";
 /** The label that is leaving, and which must not be selectable while it goes. */
@@ -38,7 +38,7 @@ const labelSwapOut = "pointer-events-none select-none opacity-0 blur-[2px]";
 * wired to the peer this package already requires rather than to the one
 * upstream's registry asks for.
 */
-const collapsePanel = "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none";
+const collapsePanel = "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-brisk ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none";
 /** The streaming hue: what is happening right now, rather than what has happened. */
 const live = "text-stream";
 /** The metadata typeface: mono, one rung down, tight. Used about a hundred times. */
@@ -96,7 +96,7 @@ function SwapLabel({ active, children, className }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "swap-label",
 		style: width === null ? void 0 : { width },
-		className: cn("grid overflow-x-clip transition-[width] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", className),
+		className: cn("grid overflow-x-clip transition-[width] duration-base ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", className),
 		children: children.map((layer, index) => /* @__PURE__ */ jsx("span", {
 			ref: index === 0 ? restingRef : activeRef,
 			"aria-hidden": active !== index,

package/dist/elements/tail-status.js

@@ -71,7 +71,7 @@ const TailStatus = React.forwardRef(function TailStatus({ action, detail, active
 				children: active ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3.5 animate-spin text-stream motion-reduce:animate-none" }) : null
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				className: cn("flex min-w-0 flex-1 items-baseline gap-1.5 text-(length:--cue-text-ui)", updatesInPlace && "cue-elements-fade-in cue-elements-animate-in duration-200 motion-reduce:animate-none"),
+				className: cn("flex min-w-0 flex-1 items-baseline gap-1.5 text-(length:--cue-text-ui)", updatesInPlace && "cue-elements-fade-in cue-elements-animate-in duration-brisk motion-reduce:animate-none"),
 				children: [/* @__PURE__ */ jsx(ShimmerLabel, {
 					active,
 					className: cn("shrink-0", priority === "attention" ? "text-fg" : "text-fg-muted"),

package/dist/elements/terminal-block.js

@@ -40,7 +40,7 @@ function TerminalBlock({ command, lines, visibleCount, done, variant = "paper",
 			children: [take(lines, visibleCount).map((line, i) => {
 				const isLast = i === lines.length - 1;
 				return /* @__PURE__ */ jsx("div", {
-					className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both duration-300", isLast && "text-fg"),
+					className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both duration-base", isLast && "text-fg"),
 					children: line
 				}, `${i}-${line}`);
 			}), !done && /* @__PURE__ */ jsx("span", {

package/dist/elements/thinking-indicator.js

@@ -22,7 +22,7 @@ function ThinkingIndicator({ label, elapsed, className, ...props }) {
 				className: "size-1.5 shrink-0 animate-pulse rounded-full bg-stream motion-reduce:animate-none"
 			}),
 			/* @__PURE__ */ jsx(ShimmerLabel, {
-				className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in relative inline-block leading-none duration-300",
+				className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in relative inline-block leading-none duration-base",
 				children: label
 			}, label),
 			elapsed !== void 0 && /* @__PURE__ */ jsx("span", {

package/dist/elements/timeline.js

@@ -18,7 +18,7 @@ function ElementsTimeline({ events, visibleCount, className, ...props }) {
 		className: cn(paper, "flex w-full max-w-sm flex-col rounded-overlay p-4", className),
 		...props,
 		children: take(events, visibleCount).map((event, i, shown) => /* @__PURE__ */ jsxs("div", {
-			className: "cue-elements-fade-in cue-elements-slide-in-from-left-1 cue-elements-animate-in cue-elements-fill-mode-both grid grid-cols-[3.5rem_1rem_minmax(0,1fr)] gap-x-2 duration-300",
+			className: "cue-elements-fade-in cue-elements-slide-in-from-left-1 cue-elements-animate-in cue-elements-fill-mode-both grid grid-cols-[3.5rem_1rem_minmax(0,1fr)] gap-x-2 duration-base",
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					className: cn(mono, "pt-[3px] text-end tabular-nums", event.when === "future" ? "text-fg-subtle" : "text-fg-subtle"),

package/dist/elements/todo-list.js

@@ -37,7 +37,7 @@ function TodoList({ items, revision, className, ...props }) {
 		}), /* @__PURE__ */ jsx("ul", {
 			className: "flex flex-col gap-1",
 			children: items.map((item) => /* @__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 items-start gap-2.5 py-0.5 text-(length:--cue-text-body) duration-300",
+				className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex items-start gap-2.5 py-0.5 text-(length:--cue-text-body) duration-base",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "flex size-4 h-5 shrink-0 items-center justify-center",
 					children: item.status === "done" ? /* @__PURE__ */ jsx("span", {

package/dist/elements/tool-call.d.ts

@@ -1,3 +1,4 @@
+import { ToolAbsence, ToolState } from "./tool-state.js";
 //#region src/elements/tool-call.d.ts
 interface ToolCallProps {
   /** Tool name shown on the collapsed trigger row. */
@@ -11,7 +12,22 @@ interface ToolCallProps {
   /** Result payload shown once the call is no longer running. */
   result: string;
   /** When true a spinner replaces the success check on the trigger. */
-  running: boolean;
+  running?: boolean;
+  /**
+   * Where the call got to: `running`, `done`, `failed` or `refused`. Each settled
+   * state ends the row with its own mark. Supersedes `running`.
+   */
+  state?: ToolState;
+  /**
+   * `card` (the default) or `inline`, a denser row that spans its column, for a
+   * transcript of many calls.
+   */
+  variant?: "card" | "inline";
+  /**
+   * What an empty `result` means: `none` (it returned nothing), `refused` or
+   * `unanswered`. Read only when `result` is empty.
+   */
+  absence?: ToolAbsence;
   /** Whether the request and result panel is expanded. */
   open: boolean;
   /** Called when the user expands or collapses the call. */
@@ -36,6 +52,6 @@ interface ToolCallProps {
  *   onOpenChange={setOpen}
  * />
  */
-declare function ToolCall({ label, activeLabel, query, request, result, running, open, onOpenChange, className }: ToolCallProps): import("react").JSX.Element;
+declare function ToolCall({ label, activeLabel, query, request, result, running, state, variant, absence, open, onOpenChange, className }: ToolCallProps): import("react").JSX.Element;
 //#endregion
 export { ToolCall, ToolCallProps };

package/dist/elements/tool-call.js

@@ -2,9 +2,10 @@
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "../system/_focus-ring.js";
 import { ShimmerLabel, SwapLabel, collapsePanel, field, mono } from "./surfaces.js";
+import { ABSENCE_TEXT, ToolStateMark, resolveToolState } from "./tool-state.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { ChevronRightIcon } from "lucide-react";
 //#region src/elements/tool-call.tsx
 /**
 * One tool invocation with its request and result tucked behind a disclosure.
@@ -23,32 +24,40 @@ import { CheckIcon, ChevronRightIcon } from "lucide-react";
 *   onOpenChange={setOpen}
 * />
 */
-function ToolCall({ label, activeLabel, query, request, result, running, open, onOpenChange, className }) {
+function ToolCall({ label, activeLabel, query, request, result, running, state, variant = "card", absence, open, onOpenChange, className }) {
+	const resolved = resolveToolState(state, running);
+	const busy = resolved === "running";
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		"data-slot": "tool-call",
+		"data-state": resolved,
+		"data-variant": variant,
+		"data-inline": variant === "inline" || void 0,
 		open,
 		onOpenChange,
-		className: cn("w-full max-w-sm", className),
+		className: cn("group/tool-call w-full", variant === "card" && "max-w-sm", className),
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
-			className: `group/trigger text-fg-muted hover:text-fg flex items-center gap-2 rounded-control py-1 text-(length:--cue-text-body) transition-colors outline-none ${FOCUS_RING}`,
+			className: `group/trigger text-fg-muted hover:text-fg flex items-center gap-2 group-data-inline/tool-call:gap-1.5 group-data-inline/tool-call:py-0.5 group-data-inline/tool-call:text-(length:--cue-text-ui) rounded-control py-1 text-(length:--cue-text-body) transition-colors outline-none ${FOCUS_RING}`,
 			children: [
-				/* @__PURE__ */ jsx(ChevronRightIcon, { 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-90 motion-reduce:transition-none" }),
+				/* @__PURE__ */ jsx(ChevronRightIcon, { 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-90 motion-reduce:transition-none" }),
 				/* @__PURE__ */ jsxs(SwapLabel, {
-					active: running ? 0 : 1,
+					active: busy ? 0 : 1,
 					className: "text-start",
 					children: [/* @__PURE__ */ jsx(ShimmerLabel, {
-						active: running,
+						active: busy,
 						className: "relative inline-block leading-none",
 						children: activeLabel
 					}), /* @__PURE__ */ jsx(Fragment, { children: label })]
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: cn(mono, "bg-surface-2 text-fg-muted rounded-control px-1.5 py-0.5"),
+					className: cn(mono, "bg-surface-2 text-fg-muted rounded-control px-1.5 py-0.5 group-data-inline/tool-call:bg-transparent group-data-inline/tool-call:px-0"),
 					children: query
 				}),
 				/* @__PURE__ */ jsx("span", {
 					className: "ms-auto flex w-4 items-center justify-end",
-					children: !running && /* @__PURE__ */ jsx(CheckIcon, { className: "cue-elements-fade-in cue-elements-zoom-in-90 cue-elements-animate-in size-3.5 text-ok duration-200" })
+					children: /* @__PURE__ */ jsx(ToolStateMark, {
+						state: resolved,
+						className: "size-3.5"
+					})
 				})
 			]
 		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
@@ -73,8 +82,8 @@ function ToolCall({ label, activeLabel, query, request, result, running, open, o
 							className: cn(mono, "text-fg-subtle mb-1"),
 							children: "Result"
 						}), /* @__PURE__ */ jsx("p", {
-							className: "text-fg",
-							children: result
+							className: result === "" && absence !== void 0 ? "text-fg-muted italic" : "text-fg",
+							children: result === "" && absence !== void 0 ? ABSENCE_TEXT[absence] : result
 						})]
 					})
 				]

package/dist/elements/tool-error.js

@@ -59,13 +59,13 @@ function ToolError({ name, target, message, attempt, maxAttempts, retrying, onRe
 					type: "button",
 					onClick: onSkip,
 					disabled: !onSkip,
-					className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-7 rounded-full px-2.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96] disabled:pointer-events-none disabled:opacity-30",
+					className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-7 rounded-full px-2.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96] disabled:pointer-events-none disabled:opacity-30",
 					children: "Skip"
 				}), /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: onRetry,
 					disabled: retrying,
-					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] disabled:pointer-events-none",
+					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] disabled:pointer-events-none",
 					children: [retrying ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx(RotateCwIcon, { className: "size-3" }), retrying ? "Retrying" : "Retry"]
 				})]
 			})

package/dist/elements/tool-group.d.ts

@@ -1,7 +1,10 @@
 import { ComponentProps } from "react";
 //#region src/elements/tool-group.d.ts
-/** Where one tool in a group got to: still running, finished, or failed. */
-type GroupedToolState = "running" | "done" | "failed";
+/**
+ * Where one tool in a group got to: still running, finished, failed, or refused before
+ * it ran.
+ */
+type GroupedToolState = "running" | "done" | "failed" | "refused";
 /** One row of a tool group: what ran, against what, and how it ended. */
 interface GroupedTool {
   /** Stable identity for the row key. */
@@ -28,7 +31,7 @@ interface GroupedTool {
  *   onOpenChange={setOpen}
  * />
  */
-declare function ToolGroup({ label, tools, open, onOpenChange, className, ...props }: Omit<ComponentProps<"div">, "children" | "label" | "tools" | "open" | "onOpenChange"> & {
+declare function ToolGroup({ label, tools, open, onOpenChange, variant, className, ...props }: Omit<ComponentProps<"div">, "children" | "label" | "tools" | "open" | "onOpenChange"> & {
   /** What the group did, as one line. */
   label: string;
   /**
@@ -40,6 +43,11 @@ declare function ToolGroup({ label, tools, open, onOpenChange, className, ...pro
   open: boolean;
   /** Called when the group is expanded or collapsed. */
   onOpenChange?: (open: boolean) => void;
+  /**
+   * `card` (the default) or `inline`, a row in its column without the paper, for a
+   * transcript of many groups.
+   */
+  variant?: "card" | "inline";
 }): import("react").JSX.Element;
 //#endregion
 export { GroupedTool, GroupedToolState, ToolGroup };

package/dist/elements/tool-group.js

@@ -1,8 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { mono, paper } from "./surfaces.js";
+import { mono } from "./surfaces.js";
+import { ToolStateMark } from "./tool-state.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, ChevronRightIcon, Loader2Icon, XIcon } from "lucide-react";
+import { ChevronRightIcon, Loader2Icon } from "lucide-react";
 //#region src/elements/tool-group.tsx
 /**
 * Calls that went out together, collapsed to one row until you want the detail.
@@ -17,54 +18,77 @@ import { CheckIcon, ChevronRightIcon, Loader2Icon, XIcon } from "lucide-react";
 *   onOpenChange={setOpen}
 * />
 */
-function ToolGroup({ label, tools, open, onOpenChange, className, ...props }) {
+function ToolGroup({ label, tools, open, onOpenChange, variant = "card", className, ...props }) {
 	const running = tools.filter((tool) => tool.state === "running").length;
 	const failed = tools.filter((tool) => tool.state === "failed").length;
+	const refused = tools.filter((tool) => tool.state === "refused").length;
+	const live = open ? void 0 : tools.find((tool) => tool.state === "running");
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "tool-group",
-		className: cn(paper, "flex w-full max-w-sm flex-col overflow-hidden rounded-overlay", className),
+		"data-variant": variant,
+		className: cn(variant === "card" && "bg-surface-1 border border-border", "flex w-full flex-col overflow-hidden", variant === "card" && "max-w-sm rounded-overlay", className),
 		...props,
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": open,
-			onClick: () => onOpenChange?.(!open),
-			className: "hover:bg-surface-1 flex items-center gap-2.5 px-3.5 py-2.5 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", open && "rotate-90") }),
-				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
-					children: label
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
-					children: running > 0 ? `${tools.length - running}/${tools.length}` : failed > 0 ? `${failed} failed` : `${tools.length} done`
-				}),
-				running > 0 ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }) : failed > 0 ? /* @__PURE__ */ jsx(XIcon, { className: "size-3.5 shrink-0 text-danger" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 shrink-0 text-ok" })
-			]
-		}), open && /* @__PURE__ */ jsx("div", {
-			className: "border-border cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col border-t duration-200",
-			children: tools.map((tool) => /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2.5 px-3.5 py-2",
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": open,
+				onClick: () => onOpenChange?.(!open),
+				className: "hover:bg-surface-1 flex items-center gap-2.5 px-3.5 py-2.5 text-start transition-colors",
 				children: [
+					/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-brisk motion-reduce:transition-none", open && "rotate-90") }),
 					/* @__PURE__ */ jsx("span", {
-						className: "flex size-3.5 shrink-0 items-center justify-center",
-						children: tool.state === "running" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3 animate-spin motion-reduce:animate-none" }) : tool.state === "failed" ? /* @__PURE__ */ jsx(XIcon, { className: "size-3 text-danger" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3 text-ok" })
+						className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+						children: label
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-muted shrink-0"),
-						children: tool.name
+						className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
+						children: running > 0 ? `${tools.length - running}/${tools.length}` : failed > 0 ? `${failed} failed` : refused > 0 ? `${refused} refused` : `${tools.length} done`
 					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-body)",
-						children: tool.target
-					}),
-					tool.durationMs !== void 0 && /* @__PURE__ */ jsxs("span", {
-						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0 tabular-nums"),
-						children: [tool.durationMs, "ms"]
+					running > 0 ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx(ToolStateMark, {
+						state: failed > 0 ? "failed" : refused > 0 ? "refused" : "done",
+						animated: false,
+						className: "size-3.5 shrink-0"
 					})
 				]
-			}, tool.id))
-		})]
+			}),
+			live !== void 0 && /* @__PURE__ */ jsxs("p", {
+				"data-slot": "tool-group-live",
+				className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle -mt-1.5 truncate px-3.5 pb-2 ps-9"),
+				children: [
+					live.name,
+					" ",
+					live.target
+				]
+			}),
+			open && /* @__PURE__ */ jsx("div", {
+				className: "border-border cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col border-t duration-brisk",
+				children: tools.map((tool) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2.5 px-3.5 py-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "flex size-3.5 shrink-0 items-center justify-center",
+							children: tool.state === "running" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-subtle size-3 animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx(ToolStateMark, {
+								state: tool.state,
+								animated: false,
+								className: "size-3"
+							})
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-muted shrink-0"),
+							children: tool.name
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-body)",
+							children: tool.target
+						}),
+						tool.durationMs !== void 0 && /* @__PURE__ */ jsxs("span", {
+							className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle shrink-0 tabular-nums"),
+							children: [tool.durationMs, "ms"]
+						})
+					]
+				}, tool.id))
+			})
+		]
 	});
 }
 //#endregion

package/dist/elements/tool-state.d.ts

@@ -0,0 +1,13 @@
+//#region src/elements/tool-state.d.ts
+/**
+ * Where a tool call got to: still running, finished, failed, or refused before
+ * it ran (cue-ui-51). The four a transcript has to tell apart at a glance.
+ */
+type ToolState = "running" | "done" | "failed" | "refused";
+/**
+ * What kind of nothing an empty result is (cue-ui-52): the call ran and
+ * returned nothing, it was refused, or it was never answered.
+ */
+type ToolAbsence = "none" | "refused" | "unanswered";
+//#endregion
+export { ToolAbsence, ToolState };