@cueplusplus/ui 0.20.0 → 0.21.0

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" }),

package/dist/elements/event-feed.d.ts

@@ -0,0 +1,88 @@
+import { EventFeedLabels } from "./vocabulary.js";
+import * as React from "react";
+//#region src/elements/event-feed.d.ts
+/** The tone a row's dot is drawn in. `neutral` is the default. */
+type FeedEventTone = "neutral" | "ok" | "warn" | "danger" | "busy";
+/** One record in an activity feed. */
+interface FeedEvent {
+  /** Stable across renders; what `onSelect` reports and `selectedId` names. */
+  id: string;
+  /** What kind of record it is: `tool`, `permission`, `error`. The filter chips are built from these. */
+  kind: string;
+  /** The one line that says what happened. */
+  title: string;
+  /** A second line of context, truncated to one line. */
+  preview?: string;
+  /** When it happened. A `Date` or epoch milliseconds is formatted as a time of day; a string is drawn as given. */
+  timestamp: Date | number | string;
+  /** The dot's tone: `neutral` (the default), `ok`, `warn`, `danger` or `busy`. */
+  tone?: FeedEventTone;
+}
+interface EventRowProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSelect"> {
+  /** The record this row draws. */
+  event: FeedEvent;
+  /** Whether this row is the selected one. */
+  selected?: boolean;
+  /** Called with the event's `id` when the row is clicked. */
+  onSelect?: (id: string) => void;
+  /** Formats the time column. Defaults to a time of day for a `Date` or a number. */
+  formatTime?: (timestamp: FeedEvent["timestamp"]) => string;
+}
+/**
+ * One event, as a feed row: time, a toned dot, kind, title, and a one-line
+ * preview under the title. Exported for a list of the caller's own.
+ *
+ * Inside an {@link EventFeed} it is an `option` of the feed's listbox. Drawn
+ * alone it claims no role, and in a listbox of the caller's it takes
+ * `role="option"` from its props; either way `aria-selected` follows `selected`
+ * only when the row is an option.
+ *
+ * @example
+ * <div role="listbox" aria-label="Recent">
+ *   <EventRow role="option" event={event} selected={event.id === id} onSelect={setId} />
+ * </div>
+ */
+declare const EventRow: React.ForwardRefExoticComponent<EventRowProps & React.RefAttributes<HTMLDivElement>>;
+interface EventFeedProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSelect"> {
+  /** The feed's accessible name: `Run events`. */
+  label: string;
+  /** The records, oldest first or newest first: the feed keeps the order given. */
+  events: readonly FeedEvent[];
+  /** The kind the feed keeps, or `all`, when the caller holds it. */
+  filter?: string;
+  /** The kind to start on when nothing controls it. Defaults to `all`. */
+  defaultFilter?: string;
+  /** Called with the kind, or `all`, when a chip is pressed. */
+  onFilterChange?: (filter: string) => void;
+  /** The selected event's `id`, or `null` for none. */
+  selectedId?: string | null;
+  /** Called with an event's `id` when a row is clicked or the keyboard moves to it. */
+  onSelect?: (id: string) => void;
+  /** Formats the time column. Defaults to a time of day for a `Date` or a number. */
+  formatTime?: (timestamp: FeedEvent["timestamp"]) => string;
+  /** Replace any of the feed's own copy. */
+  labels?: Partial<EventFeedLabels>;
+}
+/**
+ * A filterable activity feed: timestamped, typed records with a one-line
+ * preview, and a selection the detail pane follows (#103).
+ *
+ * The chips are built from the kinds present, in the order each first
+ * appears, each with its count, so a feed never offers a filter that keeps
+ * nothing. The rows are a listbox: j and k, or the arrows, move the selection
+ * through the rows the filter keeps, and Home and End jump to the ends. The
+ * selection follows the keyboard, so the detail beside it follows too.
+ *
+ * @example
+ * const [selected, setSelected] = React.useState<string | null>(null);
+ *
+ * <EventFeed
+ *   label="Run events"
+ *   events={events}
+ *   selectedId={selected}
+ *   onSelect={setSelected}
+ * />
+ */
+declare const EventFeed: React.ForwardRefExoticComponent<EventFeedProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { EventFeed, EventFeedProps, EventRow, EventRowProps, FeedEvent, FeedEventTone };

package/dist/elements/event-feed.js

@@ -0,0 +1,190 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
+import { mono } from "./surfaces.js";
+import { EVENT_FEED_LABELS } from "./vocabulary.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/elements/event-feed.tsx
+/** The dot's paint per tone. Each tone also stamps `data-tone` on its row. */
+const TONE_DOT = {
+	neutral: "bg-fg-subtle",
+	ok: "bg-ok",
+	warn: "bg-warn",
+	danger: "bg-danger",
+	busy: "bg-stream"
+};
+/** A time of day in the reader's locale, at second precision, or the caller's own string. */
+function formatTimestamp(timestamp) {
+	if (typeof timestamp === "string") return timestamp;
+	return new Date(timestamp).toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+}
+/**
+* Whether a row sits in an {@link EventFeed}'s listbox. Inside one, a row is an
+* `option`; drawn alone it claims no role, because an option with no listbox
+* around it is a broken tree for a screen reader.
+*/
+const InFeedContext = React.createContext(false);
+/**
+* One event, as a feed row: time, a toned dot, kind, title, and a one-line
+* preview under the title. Exported for a list of the caller's own.
+*
+* Inside an {@link EventFeed} it is an `option` of the feed's listbox. Drawn
+* alone it claims no role, and in a listbox of the caller's it takes
+* `role="option"` from its props; either way `aria-selected` follows `selected`
+* only when the row is an option.
+*
+* @example
+* <div role="listbox" aria-label="Recent">
+*   <EventRow role="option" event={event} selected={event.id === id} onSelect={setId} />
+* </div>
+*/
+const EventRow = React.forwardRef(function EventRow({ event, selected = false, onSelect, formatTime = formatTimestamp, role, className, ...elementProps }, ref) {
+	const tone = event.tone ?? "neutral";
+	const inFeed = React.useContext(InFeedContext);
+	const resolved = role ?? (inFeed ? "option" : void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: resolved,
+		"aria-selected": resolved === "option" ? selected : void 0,
+		"data-slot": "event-row",
+		"data-kind": event.kind,
+		"data-tone": tone,
+		"data-selected": selected || void 0,
+		onClick: () => onSelect?.(event.id),
+		className: cn("grid cursor-default grid-cols-[auto_auto_1fr] items-baseline gap-x-(--cue-space-2) rounded-control px-(--cue-space-2) py-(--cue-space-1) text-(length:--cue-text-ui) hover:bg-surface-2 data-selected:bg-accent/10", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsx("time", {
+				className: cn(mono, "text-fg-subtle tabular-nums"),
+				children: formatTime(event.timestamp)
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-(--cue-space-1)",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: cn("size-1.5 shrink-0 self-center rounded-full", TONE_DOT[tone])
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-fg-muted"),
+					children: event.kind
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "event-row-title",
+				className: "min-w-0 truncate text-fg",
+				children: event.title
+			}),
+			event.preview === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "event-row-preview",
+				className: "col-start-3 min-w-0 truncate text-fg-muted",
+				children: event.preview
+			})
+		]
+	});
+});
+/**
+* A filterable activity feed: timestamped, typed records with a one-line
+* preview, and a selection the detail pane follows (#103).
+*
+* The chips are built from the kinds present, in the order each first
+* appears, each with its count, so a feed never offers a filter that keeps
+* nothing. The rows are a listbox: j and k, or the arrows, move the selection
+* through the rows the filter keeps, and Home and End jump to the ends. The
+* selection follows the keyboard, so the detail beside it follows too.
+*
+* @example
+* const [selected, setSelected] = React.useState<string | null>(null);
+*
+* <EventFeed
+*   label="Run events"
+*   events={events}
+*   selectedId={selected}
+*   onSelect={setSelected}
+* />
+*/
+const EventFeed = React.forwardRef(function EventFeed({ label, events, filter, defaultFilter = "all", onFilterChange, selectedId = null, onSelect, formatTime, labels, className, ...elementProps }, ref) {
+	const copy = {
+		...EVENT_FEED_LABELS,
+		...labels
+	};
+	const base = React.useId();
+	const [ownFilter, setOwnFilter] = React.useState(defaultFilter);
+	const kept = filter ?? ownFilter;
+	const kinds = React.useMemo(() => {
+		const counts = /* @__PURE__ */ new Map();
+		for (const event of events) counts.set(event.kind, (counts.get(event.kind) ?? 0) + 1);
+		return [...counts];
+	}, [events]);
+	const visible = kept === "all" ? events : events.filter((event) => event.kind === kept);
+	const rowId = (id) => `${base}-${id}`;
+	const active = visible.some((event) => event.id === selectedId) ? selectedId : null;
+	const choose = (next) => {
+		if (filter === void 0) setOwnFilter(next);
+		onFilterChange?.(next);
+	};
+	const chip = (value, text, count) => /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-pressed": kept === value,
+		"aria-label": `${text}, ${count}`,
+		onClick: () => choose(value),
+		className: `flex items-center gap-(--cue-space-1) rounded-full border border-border px-(--cue-space-2) py-px text-(length:--cue-text-label) text-fg-muted transition-colors duration-fast outline-none hover:text-fg aria-pressed:border-accent/40 aria-pressed:bg-accent/10 aria-pressed:text-fg ${FOCUS_RING_INSET_2} motion-reduce:transition-none`,
+		children: [text, /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums text-fg-subtle",
+			children: count
+		})]
+	}, value);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "event-feed",
+		className: cn("flex min-h-0 flex-col gap-(--cue-space-2)", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": copy.filter,
+				className: "flex flex-wrap gap-(--cue-space-1)",
+				children: [chip("all", copy.all, events.length), kinds.map(([kind, count]) => chip(kind, kind, count))]
+			}),
+			visible.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "px-(--cue-space-2) py-(--cue-space-3) text-(length:--cue-text-ui) text-fg-subtle",
+				children: copy.empty
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				role: "listbox",
+				"aria-label": label,
+				tabIndex: 0,
+				"aria-activedescendant": active === null ? void 0 : rowId(active),
+				onKeyDown: (event) => {
+					if (visible.length === 0) return;
+					const at = visible.findIndex((row) => row.id === active);
+					let next;
+					if (event.key === "j" || event.key === "ArrowDown") next = at === -1 ? 0 : Math.min(visible.length - 1, at + 1);
+					else if (event.key === "k" || event.key === "ArrowUp") next = at === -1 ? 0 : Math.max(0, at - 1);
+					else if (event.key === "Home") next = 0;
+					else if (event.key === "End") next = visible.length - 1;
+					if (next === void 0) return;
+					event.preventDefault();
+					const target = visible[next];
+					if (target !== void 0 && target.id !== active) onSelect?.(target.id);
+				},
+				className: `flex min-h-0 flex-col overflow-y-auto rounded-control outline-none ${FOCUS_RING_INSET_2}`,
+				children: /* @__PURE__ */ jsx(InFeedContext.Provider, {
+					value: true,
+					children: visible.map((event) => /* @__PURE__ */ jsx(EventRow, {
+						id: rowId(event.id),
+						event,
+						selected: event.id === active,
+						onSelect,
+						formatTime
+					}, event.id))
+				})
+			})
+		]
+	});
+});
+//#endregion
+export { EventFeed, EventRow };

package/dist/elements/feedback-dialog.js

@@ -28,7 +28,7 @@ function FeedbackDialog({ reasons, selected, note, sent, onToggleReason, onNoteC
 		...props,
 		children: [/* @__PURE__ */ jsx("div", {
 			role: "status",
-			className: sent ? "cue-elements-fade-in cue-elements-animate-in flex items-center gap-2.5 duration-300" : "sr-only",
+			className: sent ? "cue-elements-fade-in cue-elements-animate-in flex items-center gap-2.5 duration-base" : "sr-only",
 			children: sent && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-ok" }), "Thanks. That helps us tune the model."] })
 		}), sent ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -56,7 +56,7 @@ function FeedbackDialog({ reasons, selected, note, sent, onToggleReason, onNoteC
 						type: "button",
 						"aria-pressed": active,
 						onClick: () => onToggleReason?.(reason),
-						className: cn("rounded-full px-2.5 py-1 text-(length:--cue-text-ui) transition-[background-color,color,scale] duration-150 active:scale-[0.96]", active ? "bg-accent text-accent-fg" : cn(field, "text-fg-muted hover:text-fg")),
+						className: cn("rounded-full px-2.5 py-1 text-(length:--cue-text-ui) transition-[background-color,color,scale] duration-fast active:scale-[0.96]", active ? "bg-accent text-accent-fg" : cn(field, "text-fg-muted hover:text-fg")),
 						children: reason
 					}, reason);
 				})

package/dist/elements/file-tree.js

@@ -46,7 +46,7 @@ function FileTree({ nodes, visibleCount, totalAdditions, totalDeletions, classNa
 		}), /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col",
 			children: take(nodes, visibleCount).map((node) => /* @__PURE__ */ jsx("div", {
-				className: "cue-elements-fade-in cue-elements-slide-in-from-left-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 flex items-center gap-2 rounded-surface px-1 py-1 text-(length:--cue-text-body) transition-colors duration-300",
+				className: "cue-elements-fade-in cue-elements-slide-in-from-left-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 flex items-center gap-2 rounded-surface px-1 py-1 text-(length:--cue-text-body) transition-colors duration-base",
 				style: { paddingInlineStart: `${.25 + node.depth * .85}rem` },
 				children: node.kind === "folder" ? /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-fg-subtle size-3 shrink-0" }),

package/dist/elements/flow-graph.js

@@ -55,11 +55,11 @@ function FlowGraph({ nodes, edges, visibleCount, className, ...props }) {
 						d: `M ${a.x + NODE_W / 2} ${a.y} C ${midX} ${a.y}, ${midX} ${b.y}, ${b.x - NODE_W / 2} ${b.y}`,
 						fill: "none",
 						strokeWidth: "1.5",
-						className: cn("transition-opacity duration-500 motion-reduce:transition-none", "stroke-fg-subtle", live ? "opacity-100" : "opacity-30")
+						className: cn("transition-opacity duration-slow motion-reduce:transition-none", "stroke-fg-subtle", live ? "opacity-100" : "opacity-30")
 					}, `${edge.from}-${edge.to}`);
 				})
 			}), shown.map((node) => /* @__PURE__ */ jsx("div", {
-				className: cn("cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-animate-in cue-elements-fill-mode-both absolute flex items-center justify-center rounded-surface border text-center text-(length:--cue-text-ui) leading-tight duration-300", node.state === "done" && "border-border bg-surface-1 text-fg-muted", node.state === "active" && "text-fg border-stream/30 bg-stream/10", node.state === "pending" && "border-border text-fg-subtle border-dashed"),
+				className: cn("cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-animate-in cue-elements-fill-mode-both absolute flex items-center justify-center rounded-surface border text-center text-(length:--cue-text-ui) leading-tight duration-base", node.state === "done" && "border-border bg-surface-1 text-fg-muted", node.state === "active" && "text-fg border-stream/30 bg-stream/10", node.state === "pending" && "border-border text-fg-subtle border-dashed"),
 				style: {
 					left: node.column * COL_W,
 					top: node.row * ROW_H,

package/dist/elements/generative.css

@@ -1101,6 +1101,19 @@
   text-transform: none;
 }
 
+/* Cursor's corners, from the gallery study's recorded ladder (cue-ui-56): the
+ * surface rung on the card, the control rung on the field and the button.
+ * Nothing else. Cursor draws its cards with a hairline rather than a shadow,
+ * which is the vocabulary's own default, and no image radius is recorded, so
+ * the image keeps the console's. Colour arrives through `elements.css`, as it
+ * does for assistant-ui. */
+[data-cue-skin="cursor"] [data-aui="root"],
+[data-aui="root"][data-cue-skin="cursor"] {
+  --aui-card-radius: 0.5rem;
+  --aui-field-radius: 0.375rem;
+  --aui-button-radius: 0.375rem;
+}
+
 /* ── The two fidelities ───────────────────────────────────────────── */
 
 /* `upstream` pins the five density knobs to the numbers assistant-ui's registry

package/dist/elements/generative.d.ts

@@ -68,9 +68,10 @@ interface GenerativeUIProps extends Omit<React.ComponentPropsWithoutRef<"div">,
    */
   maxDepth?: number;
   /**
-   * Which value-set paints this tree: `cue` (the default) or `aui`, which
-   * installs assistant-ui's own surface language. Leave it off inside an
-   * {@link AgentSurface}, which has stamped the subtree already.
+   * Which value-set paints this tree: `cue` (the default), `aui`, which
+   * installs assistant-ui's own surface language, or `cursor`, Cursor's
+   * agent-pane values. Leave it off inside an {@link AgentSurface}, which has
+   * stamped the subtree already.
    */
   skin?: AgentSkin;
   /**
@@ -122,11 +123,12 @@ interface GenerativeUIProps extends Omit<React.ComponentPropsWithoutRef<"div">,
  * import "@cueplusplus/ui/elements/generative.css";
  * ```
  *
- * ## Two skins
+ * ## Skins
  *
  * `skin` and `fidelity` are the same two axes {@link AgentSurface} publishes,
- * and for the same reason: the vocabulary has cue's values by default and
- * assistant-ui's under `skin="aui"`, which is upstream's own
+ * and for the same reason: the vocabulary has cue's values by default,
+ * Cursor's under `skin="cursor"`, and assistant-ui's under `skin="aui"`, which
+ * is upstream's own
  * `data-aui-theme="elements"` layer — a 20px card, a borderless 12px field, a
  * pill button. Pass them here when the tree is its own island; leave them off
  * inside an `AgentSurface`, which has already stamped the subtree and whose

package/dist/elements/generative.js

@@ -87,11 +87,12 @@ function GenerativeTree({ spec, onAction, onFault, renderMarkdown, maxDepth }) {
 * import "@cueplusplus/ui/elements/generative.css";
 * ```
 *
-* ## Two skins
+* ## Skins
 *
 * `skin` and `fidelity` are the same two axes {@link AgentSurface} publishes,
-* and for the same reason: the vocabulary has cue's values by default and
-* assistant-ui's under `skin="aui"`, which is upstream's own
+* and for the same reason: the vocabulary has cue's values by default,
+* Cursor's under `skin="cursor"`, and assistant-ui's under `skin="aui"`, which
+* is upstream's own
 * `data-aui-theme="elements"` layer — a 20px card, a borderless 12px field, a
 * pill button. Pass them here when the tree is its own island; leave them off
 * inside an `AgentSurface`, which has already stamped the subtree and whose

package/dist/elements/image-generation.js

@@ -28,14 +28,14 @@ function ImageGeneration({ prompt, generating, className, ...props }) {
 						const row = Math.floor(dot / 8);
 						const col = dot % 8;
 						return /* @__PURE__ */ jsx("span", {
-							className: cn("bg-surface-3 size-1 rounded-full transition-opacity duration-500", generating ? "animate-pulse motion-reduce:animate-none" : "opacity-0"),
+							className: cn("bg-surface-3 size-1 rounded-full transition-opacity duration-slow", generating ? "animate-pulse motion-reduce:animate-none" : "opacity-0"),
 							style: { animationDelay: `${(row + col) * 90}ms` }
 						}, dot);
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {
 					"aria-hidden": true,
-					className: cn("absolute inset-0 transition-[opacity,filter] duration-1000 ease-out motion-reduce:transition-none", generating ? "opacity-0 blur-xl" : "blur-none opacity-100"),
+					className: cn("absolute inset-0 transition-[opacity,filter] duration-slowest ease-out motion-reduce:transition-none", generating ? "opacity-0 blur-xl" : "blur-none opacity-100"),
 					style: { background: "radial-gradient(120% 90% at 20% 100%, oklch(0.45 0.09 265) 0%, transparent 55%), radial-gradient(110% 80% at 85% 90%, oklch(0.62 0.1 300 / 0.8) 0%, transparent 60%), radial-gradient(130% 100% at 60% 0%, oklch(0.88 0.06 60) 0%, oklch(0.74 0.09 25 / 0.9) 45%, transparent 75%), linear-gradient(to top, oklch(0.35 0.06 275), oklch(0.82 0.07 50))" }
 				}),
 				/* @__PURE__ */ jsx("span", {

package/dist/elements/index.d.ts

@@ -2,13 +2,13 @@ import { AgentFidelity, AgentSkin } from "../system/agent-skin.js";
 import { ActivityGraph } from "./activity-graph.js";
 import { AgentCard, AgentSkill } from "./agent-card.js";
 import { AgentHandoff } from "./agent-handoff.js";
-import { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, AgentMode, Announcements, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, ClampLabels, CompactionState, ContextLabels, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, PermissionLabels, QUEUE_LABELS, QueueLabels, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, RevertLabels, RevertScope, SECURITY_RISKS, SecurityRisk, TAIL_ACTIONS, TURN_ACTION_LABELS, TailAction, TurnActionLabels, VERB_TRIADS, VERDICT_LABELS, VerbKind, VerbTense, VerbTriad, VerdictLabels, verbFor } from "./vocabulary.js";
+import { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, AgentMode, Announcements, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, ClampLabels, CompactionState, ContextLabels, DELIVERY_LABELS, EVENT_FEED_LABELS, EventFeedLabels, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, PermissionLabels, QUESTION_LABELS, QUEUE_LABELS, QuestionLabels, QueueLabels, REQUEST_DELIVERIES, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, RequestDelivery, RevertLabels, RevertScope, SECURITY_RISKS, SecurityRisk, TAIL_ACTIONS, TURN_ACTION_LABELS, TailAction, TurnActionLabels, UNSUPPORTED_REQUEST_LABELS, UnsupportedRequestLabels, VERB_TRIADS, VERDICT_LABELS, VerbKind, VerbTense, VerbTriad, VerdictLabels, verbFor } from "./vocabulary.js";
 import { AgentModeBadge, AgentModeBadgeProps } from "./agent-mode-badge.js";
 import { AgentPlan } from "./agent-plan.js";
 import { AgentState, AgentStatus, StatusStep } from "./agent-status.js";
 import { AgentSurface, AgentSurfaceProps } from "./agent-surface.js";
 import { AnimatedNumber, AnimatedNumberProps, formatCompactNumber } from "./animated-number.js";
-import { ApprovalCard, ApprovalState } from "./approval-card.js";
+import { ApprovalCard, ApprovalOption, ApprovalState } from "./approval-card.js";
 import { ArtifactCard } from "./artifact-card.js";
 import { BackgroundInbox, BackgroundRun, BackgroundState } from "./background-inbox.js";
 import { CanvasSplit, CanvasSplitBody, CanvasSplitDocument, CanvasSplitHeader, CanvasSplitLine, CanvasSplitMessage, CanvasSplitThread } from "./canvas-split.js";
@@ -36,6 +36,7 @@ import { DocumentAnchor, DocumentReference } from "./document-reference.js";
 import { DraftRestore } from "./draft-restore.js";
 import { EditMessage } from "./edit-message.js";
 import { ElicitationField, ElicitationForm, ElicitationState } from "./elicitation-form.js";
+import { EventFeed, EventFeedProps, EventRow, EventRowProps, FeedEvent, FeedEventTone } from "./event-feed.js";
 import { ChatEmptyState, EmptyStateComposer, EmptyStateGreeting, EmptyStateSuggestion, EmptyStateSuggestions } from "./empty-state.js";
 import { ChangeSummary, EndOfTurnSummary, EndOfTurnSummaryProps, formatChangeSummary } from "./end-of-turn-summary.js";
 import { ErrorState, ErrorStateProps } from "./error-state.js";
@@ -66,6 +67,7 @@ import { Onboarding, OnboardingStep } from "./onboarding.js";
 import { GrantScope, PermissionGrant } from "./permission-grant.js";
 import { AlwaysAllowInput, AlwaysAllowLabel, PermissionScope, PermissionScopes, PermissionScopesProps, formatAlwaysAllow } from "./permission-scopes.js";
 import { PromptLibrary, SavedPrompt } from "./prompt-library.js";
+import { QuestionCard, QuestionCardProps } from "./question-card.js";
 import { QueueDock, QueueDockProps, QueuedFollowUp, formatQueueSummary } from "./queue-dock.js";
 import { QuotaBanner } from "./quota-banner.js";
 import { QuoteAction, QuoteReply } from "./quote-reply.js";
@@ -100,6 +102,7 @@ import { ThreadItem, ThreadList } from "./thread-list.js";
 import { SearchableThread, ThreadSearch } from "./thread-search.js";
 import { ElementsTimeline, TimelineEvent, TimelineWhen } from "./timeline.js";
 import { TodoItem, TodoList, TodoStatus } from "./todo-list.js";
+import { ToolAbsence, ToolState } from "./tool-state.js";
 import { ToolCall, ToolCallProps } from "./tool-call.js";
 import { ToolError } from "./tool-error.js";
 import { GroupedTool, GroupedToolState, ToolGroup } from "./tool-group.js";
@@ -107,10 +110,11 @@ import { TimelineStat, TimelineStep, ToolTimeline, ToolTimelineProps } from "./t
 import { SpanStatus, TraceSpan, TraceWaterfall } from "./trace-waterfall.js";
 import { TimeBoundary, TimeBoundaryProps, UnreadDivider, UnreadDividerProps } from "./transcript-rules.js";
 import { TurnFooter, TurnFooterProps, TurnTimestamp } from "./turn-footer.js";
+import { UnsupportedRequestCard, UnsupportedRequestCardProps } from "./unsupported-request-card.js";
 import { TypingIndicator } from "./typing-indicator.js";
 import { VerdictIssue, VerdictRow, VerdictRowProps, VerdictTone, verdictStars } from "./verdict-row.js";
 import { VoiceConversation, VoiceMode, VoiceTurn } from "./voice-conversation.js";
 import { WebPreview } from "./web-preview.js";
 import { WebSearch, WebSearchResult } from "./web-search.js";
 import { WorkCollapse, WorkCollapseProps, WorkSummary, formatWorkDuration, formatWorkLabel } from "./work-collapse.js";
-export { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, ActivityGraph, AgentCard, type AgentFidelity, AgentHandoff, type AgentMode, AgentModeBadge, type AgentModeBadgeProps, AgentPlan, type AgentSkill, type AgentSkin, type AgentState, AgentStatus, AgentSurface, type AgentSurfaceProps, type AlwaysAllowInput, type AlwaysAllowLabel, AnimatedNumber, type AnimatedNumberProps, type Announcements, ApprovalCard, type ApprovalState, ArtifactCard, BackgroundInbox, type BackgroundRun, type BackgroundState, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, CanvasSplit, CanvasSplitBody, CanvasSplitDocument, CanvasSplitHeader, CanvasSplitLine, CanvasSplitMessage, CanvasSplitThread, type ChangeSummary, Chart, type ChartVariant, ChatEmptyState, ChatPanel, ChatPanelAssistantMessage, ChatPanelComposer, ChatPanelMessages, ChatPanelTyping, ChatPanelUserMessage, type Checkpoint, CheckpointHistory, type CitationSource, Clamp, type ClampLabels, type ClampProps, CodeDiff, CodeRunner, CompactionRow, type CompactionRowProps, type CompactionState, ComparisonCard, type ComparisonOption, ComposerActions, ComposerAttachButton, type ComposerAttachment, ComposerAttachmentChip, ComposerAttachments, ComposerBar, type ComposerCommand, ComposerCommandItem, ComposerContext, ComposerInput, ComposerMenu, ComposerMenuItem, type ComposerModel, ComposerModelItem, ComposerModelTrigger, type ComposerPerson, ComposerPersonItem, ComposerSend, ComposerToolbar, type ComposerUsage, ComposerVoice, ComposerVoiceButton, type ComputerStep, ComputerUse, type Confidence, type ConfidenceClaim, ConfidenceMarker, type ConnectionPhase, ConnectionState, ContextBreakdown, type ContextCategory, type ContextLabels, type ContextSegment, type ContextStat, type ContextTone, ContextUsage, type ContextUsageProps, ConversationSearch, type CostLine, CostMeter, type DataTableProps, type DatedMessage, DaySeparator, Diagram, type DiffHunk, type DiffKind, type DiffLine, type DocumentAnchor, DocumentReference, DraftRestore, EditMessage, type EffortLevel, ElementsCommandPalette, ElementsComposer, ElementsDataTable, ElementsTimeline, type ElicitationField, ElicitationForm, type ElicitationState, EmptyStateComposer, EmptyStateGreeting, EmptyStateSuggestion, EmptyStateSuggestions, EndOfTurnSummary, type EndOfTurnSummaryProps, ErrorState, type ErrorStateProps, FeedbackDialog, FileTree, type FileTreeNode, type FlowEdge, FlowGraph, type FlowNode, type FlowNodeState, Frac, GenerationLoader, type GenerationLoaderProps, type GenerationLoaderVariant, type GrantScope, type GroupedTool, type GroupedToolState, GuardrailNotice, type HunkDecision, ImageGeneration, InlineCitation, type InlineCitationProps, JobProgress, type JobStage, LauncherBubble, LiveRegionAnnouncer, type LiveRegionAnnouncerProps, MapAnswer, type MapPin, MathBlock, type MathStep, type McpServer, McpServerPanel, type McpServerStatus, type MemoryChange, type MemoryChip, MemoryChips, MessageActions, type MessageActionsProps, type MessageAttachmentItem, MessageAttachments, MessageBranches, type MessageBranchesProps, MessagePair, type MessagePairProps, MessageQueue, MessageTiming, MobileComposer, ModelPicker, type ModelUsage, NumberTicker, Onboarding, type OnboardingStep, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, type PaletteCommand, PermissionGrant, type PermissionLabels, type PermissionScope, PermissionScopes, type PermissionScopesProps, type PickableModel, PromptLibrary, QUEUE_LABELS, QueueDock, type QueueDockProps, type QueueLabels, type QueuedFollowUp, type QueuedMessage, QuotaBanner, type QuoteAction, QuoteReply, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, type Reaction, ReadAloud, ReasoningEffort, ReasoningPanel, type ReasoningPanelProps, type ReasoningStep, RecommendationCard, type RecommendationState, RegenerateMenu, type RegenerateOption, type ReportSection, ResearchReport, type RetrievalChunk, RetrievalChunks, RevertDock, type RevertDockProps, type RevertLabels, type RevertReach, type RevertScope, ReviewableDiff, RiskBadge, type RiskBadgeProps, type RunState, SECURITY_RISKS, type SavedPrompt, ScheduleCard, type ScheduleRun, ScoreBreakdown, type ScoreCriterion, ScrollAnchor, type ScrollAnchorMessage, type SearchHit, type SearchableThread, type SectionState, type SecurityRisk, type Segment, type SettingToggle, SettingsPanel, SharedConversation, type SharedTurn, ShimmerLabel, type Source, Sources, type SourcesProps, type SpanStatus, SpeakerIdentity, type SpeakerKind, type SpeakerTurn, type SpecRow, SpecSheet, type StatusStep, StoppedRun, StreamingText, Sub, type SubagentItem, SubagentList, Suggestions, type SuggestionsProps, Sup, SwapLabel, TAIL_ACTIONS, TURN_ACTION_LABELS, type TailAction, type TailPriority, TailStatus, type TailStatusProps, TerminalBlock, ThinkingIndicator, type ThreadItem, ThreadList, ThreadSearch, TimeBoundary, type TimeBoundaryProps, type TimelineEvent, type TimelineStat, type TimelineStep, type TimelineWhen, type TimingStat, type TodoItem, TodoList, type TodoStatus, ToolCall, type ToolCallProps, ToolError, ToolGroup, ToolTimeline, type ToolTimelineProps, type TraceSpan, TraceWaterfall, type TurnActionLabels, TurnFooter, type TurnFooterProps, type TurnTimestamp, TypingIndicator, UnreadDivider, type UnreadDividerProps, VERB_TRIADS, VERDICT_LABELS, type VerbKind, type VerbTense, type VerbTriad, type VerdictIssue, type VerdictLabels, VerdictRow, type VerdictRowProps, type VerdictTone, VoiceConversation, type VoiceMode, type VoiceTurn, WebPreview, WebSearch, type WebSearchResult, WorkCollapse, type WorkCollapseProps, type WorkSummary, applyMention, at, clamp, codeScroll, codeSurface, collapsePanel, field, fieldInteractive, floating, formatAlwaysAllow, formatChangeSummary, formatCompactNumber, formatQueueSummary, formatRevertSummary, formatWorkDuration, formatWorkLabel, ghostButton, iconSwap, iconSwapIn, iconSwapOut, indexIn, inkButton, labelSwap, labelSwapIn, labelSwapOut, live, mono, paper, pct, pressable, progressOf, take, useAnnouncerPresent, useMentionMatches, useSlashMatches, verbFor, verdictStars };
+export { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, ActivityGraph, AgentCard, type AgentFidelity, AgentHandoff, type AgentMode, AgentModeBadge, type AgentModeBadgeProps, AgentPlan, type AgentSkill, type AgentSkin, type AgentState, AgentStatus, AgentSurface, type AgentSurfaceProps, type AlwaysAllowInput, type AlwaysAllowLabel, AnimatedNumber, type AnimatedNumberProps, type Announcements, ApprovalCard, type ApprovalOption, type ApprovalState, ArtifactCard, BackgroundInbox, type BackgroundRun, type BackgroundState, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, CanvasSplit, CanvasSplitBody, CanvasSplitDocument, CanvasSplitHeader, CanvasSplitLine, CanvasSplitMessage, CanvasSplitThread, type ChangeSummary, Chart, type ChartVariant, ChatEmptyState, ChatPanel, ChatPanelAssistantMessage, ChatPanelComposer, ChatPanelMessages, ChatPanelTyping, ChatPanelUserMessage, type Checkpoint, CheckpointHistory, type CitationSource, Clamp, type ClampLabels, type ClampProps, CodeDiff, CodeRunner, CompactionRow, type CompactionRowProps, type CompactionState, ComparisonCard, type ComparisonOption, ComposerActions, ComposerAttachButton, type ComposerAttachment, ComposerAttachmentChip, ComposerAttachments, ComposerBar, type ComposerCommand, ComposerCommandItem, ComposerContext, ComposerInput, ComposerMenu, ComposerMenuItem, type ComposerModel, ComposerModelItem, ComposerModelTrigger, type ComposerPerson, ComposerPersonItem, ComposerSend, ComposerToolbar, type ComposerUsage, ComposerVoice, ComposerVoiceButton, type ComputerStep, ComputerUse, type Confidence, type ConfidenceClaim, ConfidenceMarker, type ConnectionPhase, ConnectionState, ContextBreakdown, type ContextCategory, type ContextLabels, type ContextSegment, type ContextStat, type ContextTone, ContextUsage, type ContextUsageProps, ConversationSearch, type CostLine, CostMeter, DELIVERY_LABELS, type DataTableProps, type DatedMessage, DaySeparator, Diagram, type DiffHunk, type DiffKind, type DiffLine, type DocumentAnchor, DocumentReference, DraftRestore, EVENT_FEED_LABELS, EditMessage, type EffortLevel, ElementsCommandPalette, ElementsComposer, ElementsDataTable, ElementsTimeline, type ElicitationField, ElicitationForm, type ElicitationState, EmptyStateComposer, EmptyStateGreeting, EmptyStateSuggestion, EmptyStateSuggestions, EndOfTurnSummary, type EndOfTurnSummaryProps, ErrorState, type ErrorStateProps, EventFeed, type EventFeedLabels, type EventFeedProps, EventRow, type EventRowProps, type FeedEvent, type FeedEventTone, FeedbackDialog, FileTree, type FileTreeNode, type FlowEdge, FlowGraph, type FlowNode, type FlowNodeState, Frac, GenerationLoader, type GenerationLoaderProps, type GenerationLoaderVariant, type GrantScope, type GroupedTool, type GroupedToolState, GuardrailNotice, type HunkDecision, ImageGeneration, InlineCitation, type InlineCitationProps, JobProgress, type JobStage, LauncherBubble, LiveRegionAnnouncer, type LiveRegionAnnouncerProps, MapAnswer, type MapPin, MathBlock, type MathStep, type McpServer, McpServerPanel, type McpServerStatus, type MemoryChange, type MemoryChip, MemoryChips, MessageActions, type MessageActionsProps, type MessageAttachmentItem, MessageAttachments, MessageBranches, type MessageBranchesProps, MessagePair, type MessagePairProps, MessageQueue, MessageTiming, MobileComposer, ModelPicker, type ModelUsage, NumberTicker, Onboarding, type OnboardingStep, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, type PaletteCommand, PermissionGrant, type PermissionLabels, type PermissionScope, PermissionScopes, type PermissionScopesProps, type PickableModel, PromptLibrary, QUESTION_LABELS, QUEUE_LABELS, QuestionCard, type QuestionCardProps, type QuestionLabels, QueueDock, type QueueDockProps, type QueueLabels, type QueuedFollowUp, type QueuedMessage, QuotaBanner, type QuoteAction, QuoteReply, REQUEST_DELIVERIES, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, type Reaction, ReadAloud, ReasoningEffort, ReasoningPanel, type ReasoningPanelProps, type ReasoningStep, RecommendationCard, type RecommendationState, RegenerateMenu, type RegenerateOption, type ReportSection, type RequestDelivery, ResearchReport, type RetrievalChunk, RetrievalChunks, RevertDock, type RevertDockProps, type RevertLabels, type RevertReach, type RevertScope, ReviewableDiff, RiskBadge, type RiskBadgeProps, type RunState, SECURITY_RISKS, type SavedPrompt, ScheduleCard, type ScheduleRun, ScoreBreakdown, type ScoreCriterion, ScrollAnchor, type ScrollAnchorMessage, type SearchHit, type SearchableThread, type SectionState, type SecurityRisk, type Segment, type SettingToggle, SettingsPanel, SharedConversation, type SharedTurn, ShimmerLabel, type Source, Sources, type SourcesProps, type SpanStatus, SpeakerIdentity, type SpeakerKind, type SpeakerTurn, type SpecRow, SpecSheet, type StatusStep, StoppedRun, StreamingText, Sub, type SubagentItem, SubagentList, Suggestions, type SuggestionsProps, Sup, SwapLabel, TAIL_ACTIONS, TURN_ACTION_LABELS, type TailAction, type TailPriority, TailStatus, type TailStatusProps, TerminalBlock, ThinkingIndicator, type ThreadItem, ThreadList, ThreadSearch, TimeBoundary, type TimeBoundaryProps, type TimelineEvent, type TimelineStat, type TimelineStep, type TimelineWhen, type TimingStat, type TodoItem, TodoList, type TodoStatus, type ToolAbsence, ToolCall, type ToolCallProps, ToolError, ToolGroup, type ToolState, ToolTimeline, type ToolTimelineProps, type TraceSpan, TraceWaterfall, type TurnActionLabels, TurnFooter, type TurnFooterProps, type TurnTimestamp, TypingIndicator, UNSUPPORTED_REQUEST_LABELS, UnreadDivider, type UnreadDividerProps, UnsupportedRequestCard, type UnsupportedRequestCardProps, type UnsupportedRequestLabels, VERB_TRIADS, VERDICT_LABELS, type VerbKind, type VerbTense, type VerbTriad, type VerdictIssue, type VerdictLabels, VerdictRow, type VerdictRowProps, type VerdictTone, VoiceConversation, type VoiceMode, type VoiceTurn, WebPreview, WebSearch, type WebSearchResult, WorkCollapse, type WorkCollapseProps, type WorkSummary, applyMention, at, clamp, codeScroll, codeSurface, collapsePanel, field, fieldInteractive, floating, formatAlwaysAllow, formatChangeSummary, formatCompactNumber, formatQueueSummary, formatRevertSummary, formatWorkDuration, formatWorkLabel, ghostButton, iconSwap, iconSwapIn, iconSwapOut, indexIn, inkButton, labelSwap, labelSwapIn, labelSwapOut, live, mono, paper, pct, pressable, progressOf, take, useAnnouncerPresent, useMentionMatches, useSlashMatches, verbFor, verdictStars };

package/dist/elements/index.js

@@ -2,7 +2,7 @@ import { ShimmerLabel, SwapLabel, codeScroll, codeSurface, collapsePanel, field,
 import { ActivityGraph } from "./activity-graph.js";
 import { AgentCard } from "./agent-card.js";
 import { AgentHandoff } from "./agent-handoff.js";
-import { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, QUEUE_LABELS, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, SECURITY_RISKS, TAIL_ACTIONS, TURN_ACTION_LABELS, VERB_TRIADS, VERDICT_LABELS, verbFor } from "./vocabulary.js";
+import { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, DELIVERY_LABELS, EVENT_FEED_LABELS, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, QUESTION_LABELS, QUEUE_LABELS, REQUEST_DELIVERIES, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, SECURITY_RISKS, TAIL_ACTIONS, TURN_ACTION_LABELS, UNSUPPORTED_REQUEST_LABELS, VERB_TRIADS, VERDICT_LABELS, verbFor } from "./vocabulary.js";
 import { AgentModeBadge } from "./agent-mode-badge.js";
 import { at, clamp, indexIn, pct, progressOf, take } from "./range.js";
 import { AgentPlan } from "./agent-plan.js";
@@ -37,6 +37,7 @@ import { DocumentReference } from "./document-reference.js";
 import { DraftRestore } from "./draft-restore.js";
 import { EditMessage } from "./edit-message.js";
 import { ElicitationForm } from "./elicitation-form.js";
+import { EventFeed, EventRow } from "./event-feed.js";
 import { ChatEmptyState, EmptyStateComposer, EmptyStateGreeting, EmptyStateSuggestion, EmptyStateSuggestions } from "./empty-state.js";
 import { EndOfTurnSummary, formatChangeSummary } from "./end-of-turn-summary.js";
 import { ErrorState } from "./error-state.js";
@@ -67,6 +68,7 @@ import { Onboarding } from "./onboarding.js";
 import { PermissionGrant } from "./permission-grant.js";
 import { PermissionScopes, formatAlwaysAllow } from "./permission-scopes.js";
 import { PromptLibrary } from "./prompt-library.js";
+import { QuestionCard } from "./question-card.js";
 import { QueueDock, formatQueueSummary } from "./queue-dock.js";
 import { QuotaBanner } from "./quota-banner.js";
 import { QuoteReply } from "./quote-reply.js";
@@ -106,10 +108,11 @@ import { ToolTimeline } from "./tool-timeline.js";
 import { TraceWaterfall } from "./trace-waterfall.js";
 import { TimeBoundary, UnreadDivider } from "./transcript-rules.js";
 import { TurnFooter } from "./turn-footer.js";
+import { UnsupportedRequestCard } from "./unsupported-request-card.js";
 import { TypingIndicator } from "./typing-indicator.js";
 import { VerdictRow, verdictStars } from "./verdict-row.js";
 import { VoiceConversation } from "./voice-conversation.js";
 import { WebPreview } from "./web-preview.js";
 import { WebSearch } from "./web-search.js";
 import { WorkCollapse, formatWorkDuration, formatWorkLabel } from "./work-collapse.js";
-export { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, ActivityGraph, AgentCard, AgentHandoff, AgentModeBadge, AgentPlan, AgentStatus, AgentSurface, AnimatedNumber, ApprovalCard, ArtifactCard, BackgroundInbox, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, CanvasSplit, CanvasSplitBody, CanvasSplitDocument, CanvasSplitHeader, CanvasSplitLine, CanvasSplitMessage, CanvasSplitThread, Chart, ChatEmptyState, ChatPanel, ChatPanelAssistantMessage, ChatPanelComposer, ChatPanelMessages, ChatPanelTyping, ChatPanelUserMessage, CheckpointHistory, Clamp, CodeDiff, CodeRunner, CompactionRow, ComparisonCard, ComposerActions, ComposerAttachButton, ComposerAttachmentChip, ComposerAttachments, ComposerBar, ComposerCommandItem, ComposerContext, ComposerInput, ComposerMenu, ComposerMenuItem, ComposerModelItem, ComposerModelTrigger, ComposerPersonItem, ComposerSend, ComposerToolbar, ComposerVoice, ComposerVoiceButton, ComputerUse, ConfidenceMarker, ConnectionState, ContextBreakdown, ContextUsage, ConversationSearch, CostMeter, DaySeparator, Diagram, DocumentReference, DraftRestore, EditMessage, ElementsCommandPalette, ElementsComposer, ElementsDataTable, ElementsTimeline, ElicitationForm, EmptyStateComposer, EmptyStateGreeting, EmptyStateSuggestion, EmptyStateSuggestions, EndOfTurnSummary, ErrorState, FeedbackDialog, FileTree, FlowGraph, Frac, GenerationLoader, GuardrailNotice, ImageGeneration, InlineCitation, JobProgress, LauncherBubble, LiveRegionAnnouncer, MapAnswer, MathBlock, McpServerPanel, MemoryChips, MessageActions, MessageAttachments, MessageBranches, MessagePair, MessageQueue, MessageTiming, MobileComposer, ModelPicker, NumberTicker, Onboarding, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, PermissionGrant, PermissionScopes, PromptLibrary, QUEUE_LABELS, QueueDock, QuotaBanner, QuoteReply, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, ReadAloud, ReasoningEffort, ReasoningPanel, RecommendationCard, RegenerateMenu, ResearchReport, RetrievalChunks, RevertDock, ReviewableDiff, RiskBadge, SECURITY_RISKS, ScheduleCard, ScoreBreakdown, ScrollAnchor, SettingsPanel, SharedConversation, ShimmerLabel, Sources, SpeakerIdentity, SpecSheet, StoppedRun, StreamingText, Sub, SubagentList, Suggestions, Sup, SwapLabel, TAIL_ACTIONS, TURN_ACTION_LABELS, TailStatus, TerminalBlock, ThinkingIndicator, ThreadList, ThreadSearch, TimeBoundary, TodoList, ToolCall, ToolError, ToolGroup, ToolTimeline, TraceWaterfall, TurnFooter, TypingIndicator, UnreadDivider, VERB_TRIADS, VERDICT_LABELS, VerdictRow, VoiceConversation, WebPreview, WebSearch, WorkCollapse, applyMention, at, clamp, codeScroll, codeSurface, collapsePanel, field, fieldInteractive, floating, formatAlwaysAllow, formatChangeSummary, formatCompactNumber, formatQueueSummary, formatRevertSummary, formatWorkDuration, formatWorkLabel, ghostButton, iconSwap, iconSwapIn, iconSwapOut, indexIn, inkButton, labelSwap, labelSwapIn, labelSwapOut, live, mono, paper, pct, pressable, progressOf, take, useAnnouncerPresent, useMentionMatches, useSlashMatches, verbFor, verdictStars };
+export { AGENT_MODES, AGENT_MODE_DESCRIPTIONS, AGENT_MODE_LABELS, ANNOUNCEMENTS, ActivityGraph, AgentCard, AgentHandoff, AgentModeBadge, AgentPlan, AgentStatus, AgentSurface, AnimatedNumber, ApprovalCard, ArtifactCard, BackgroundInbox, CLAMP_LABELS, COMPACTION_LABELS, COMPACTION_STATES, CONTEXT_CATEGORY_LABELS, CONTEXT_LABELS, CONTEXT_STAT_LABELS, CanvasSplit, CanvasSplitBody, CanvasSplitDocument, CanvasSplitHeader, CanvasSplitLine, CanvasSplitMessage, CanvasSplitThread, Chart, ChatEmptyState, ChatPanel, ChatPanelAssistantMessage, ChatPanelComposer, ChatPanelMessages, ChatPanelTyping, ChatPanelUserMessage, CheckpointHistory, Clamp, CodeDiff, CodeRunner, CompactionRow, ComparisonCard, ComposerActions, ComposerAttachButton, ComposerAttachmentChip, ComposerAttachments, ComposerBar, ComposerCommandItem, ComposerContext, ComposerInput, ComposerMenu, ComposerMenuItem, ComposerModelItem, ComposerModelTrigger, ComposerPersonItem, ComposerSend, ComposerToolbar, ComposerVoice, ComposerVoiceButton, ComputerUse, ConfidenceMarker, ConnectionState, ContextBreakdown, ContextUsage, ConversationSearch, CostMeter, DELIVERY_LABELS, DaySeparator, Diagram, DocumentReference, DraftRestore, EVENT_FEED_LABELS, EditMessage, ElementsCommandPalette, ElementsComposer, ElementsDataTable, ElementsTimeline, ElicitationForm, EmptyStateComposer, EmptyStateGreeting, EmptyStateSuggestion, EmptyStateSuggestions, EndOfTurnSummary, ErrorState, EventFeed, EventRow, FeedbackDialog, FileTree, FlowGraph, Frac, GenerationLoader, GuardrailNotice, ImageGeneration, InlineCitation, JobProgress, LauncherBubble, LiveRegionAnnouncer, MapAnswer, MathBlock, McpServerPanel, MemoryChips, MessageActions, MessageAttachments, MessageBranches, MessagePair, MessageQueue, MessageTiming, MobileComposer, ModelPicker, NumberTicker, Onboarding, PERMISSION_LABELS, PERMISSION_SCOPE_LABELS, PermissionGrant, PermissionScopes, PromptLibrary, QUESTION_LABELS, QUEUE_LABELS, QuestionCard, QueueDock, QuotaBanner, QuoteReply, REQUEST_DELIVERIES, REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS, RISK_LABELS, ReadAloud, ReasoningEffort, ReasoningPanel, RecommendationCard, RegenerateMenu, ResearchReport, RetrievalChunks, RevertDock, ReviewableDiff, RiskBadge, SECURITY_RISKS, ScheduleCard, ScoreBreakdown, ScrollAnchor, SettingsPanel, SharedConversation, ShimmerLabel, Sources, SpeakerIdentity, SpecSheet, StoppedRun, StreamingText, Sub, SubagentList, Suggestions, Sup, SwapLabel, TAIL_ACTIONS, TURN_ACTION_LABELS, TailStatus, TerminalBlock, ThinkingIndicator, ThreadList, ThreadSearch, TimeBoundary, TodoList, ToolCall, ToolError, ToolGroup, ToolTimeline, TraceWaterfall, TurnFooter, TypingIndicator, UNSUPPORTED_REQUEST_LABELS, UnreadDivider, UnsupportedRequestCard, VERB_TRIADS, VERDICT_LABELS, VerdictRow, VoiceConversation, WebPreview, WebSearch, WorkCollapse, applyMention, at, clamp, codeScroll, codeSurface, collapsePanel, field, fieldInteractive, floating, formatAlwaysAllow, formatChangeSummary, formatCompactNumber, formatQueueSummary, formatRevertSummary, formatWorkDuration, formatWorkLabel, ghostButton, iconSwap, iconSwapIn, iconSwapOut, indexIn, inkButton, labelSwap, labelSwapIn, labelSwapOut, live, mono, paper, pct, pressable, progressOf, take, useAnnouncerPresent, useMentionMatches, useSlashMatches, verbFor, verdictStars };

package/dist/elements/inline-citation.js

@@ -21,7 +21,7 @@ function Citation({ index, source, open, onOpenChange }) {
 				side: "top",
 				sideOffset: 8,
 				children: /* @__PURE__ */ jsxs(PreviewCard.Popup, {
-					className: cn(floating, "z-50 w-64 origin-(--transform-origin) rounded-overlay p-3.5 outline-none", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.97] data-[ending-style]:opacity-0"),
+					className: cn(floating, "z-50 w-64 origin-(--transform-origin) rounded-overlay p-3.5 outline-none", "transition-[opacity,scale] duration-brisk ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.97] data-[ending-style]:opacity-0"),
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center gap-1.5",

package/dist/elements/job-progress.js

@@ -56,7 +56,7 @@ function JobProgress({ title, stages, stageIndex, stageProgress, eta, onCancel,
 			/* @__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 ease-out motion-reduce:transition-none", finished ? "bg-ok" : "bg-stream"),
+					className: cn("block h-full rounded-full transition-[width] duration-slow ease-out motion-reduce:transition-none", finished ? "bg-ok" : "bg-stream"),
 					style: { width: `${overall}%` }
 				})
 			}),