@cueplusplus/ui 0.20.1 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,120 @@
 # @cueplusplus/ui
 
+## 0.21.0
+
+### Minor Changes
+
+- 4476be5: **`ComposerInput` takes a `size`.** `md`, the default, is the composer as it was. `sm` is the
+  smaller rung for a compact console: a 36px floor, tighter padding and body type. The element states
+  its size as `data-size`, so a caller no longer overrides two utilities to get a smaller field.
+- 46b191e: **`ComposerInput` holds more than one line.** It is a `<textarea>` now. It grows with what it holds,
+  to a cap: `field-sizing: content` where the browser has it, and measured where it does not. Enter
+  still sends, Shift+Enter breaks the line, and accepting an IME candidate still does neither.
+
+  ### Migrating
+  - **Its props are a textarea's.** `ComponentProps<"textarea">` replaces `ComponentProps<"input">`.
+    A `ref` typed `HTMLInputElement`, or an `onChange` handler typed
+    `ChangeEvent<HTMLInputElement>`, becomes `HTMLTextAreaElement`. Input-only attributes such as
+    `type` no longer apply.
+  - **Enter's default is prevented before `onSubmit` runs**, so sending never adds a newline. A
+    handler of your own that calls `event.preventDefault()` on Enter still stops the send, as before.
+  - **A `ref` you pass replaces the one that measures the field.** It then grows by CSS alone,
+    which covers every browser that supports `field-sizing`.
+
+- 90c02ab: **`AgentSurface` can wear Cursor's agent pane: `skin="cursor"`.** Before this, Cursor's palette was
+  only a private gallery study, so a consumer that wanted the look copied the values and owned the drift.
+  `@cueplusplus/ui/elements.css` now carries them under `[data-cue-skin="cursor"]`, in the same three
+  blocks assistant-ui's skin uses. The light and dark halves follow `data-mode`, including `system`.
+
+  - **Colour at every fidelity.** The skin re-points every token the elements family reads, including
+    Cursor's own status hues, and draws the focus ring in Cursor's blue.
+  - **Corners and faces at `fidelity="upstream"`.** A 6 / 8 / 12px radius ladder, and Inter and
+    Geist Mono first in the font stacks. The library ships neither face: load them yourself, or
+    the stacks fall through to the platform's. Cursor's type sizes and spacing were never recorded,
+    so those stay cue's at both fidelities.
+  - **`GenerativeUI`** takes `skin="cursor"` too, with Cursor's corners on its card, field and button.
+
+  The study's `--clone-*` marks (the user bubble, the brand mark, the git colours) are not part of the
+  skin. Nothing in the library reads them. A consumer carrying a copy of the study can drop the
+  palette and wrap the subtree in `<AgentSurface skin="cursor">` instead.
+
+- 74b66a8: **`EventFeed` and `EventRow`: a filterable activity feed** (#103), in `@cueplusplus/ui/elements`. Each
+  `FeedEvent` is `{ id, kind, title, preview?, timestamp, tone? }`, drawn as a time, a toned dot, the kind,
+  the title and a one-line preview. The filter chips are built from the kinds present, in the order each
+  first appears and with its count, controlled (`filter`, `onFilterChange`) or not. 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 detail stays the host's, for `SplitPane`'s detail slot. `EventRow` draws one event
+  for a list of your own: it is an `option` inside a feed, takes `role="option"` in a listbox of yours, and
+  claims no role drawn alone. The copy is `EVENT_FEED_LABELS`.
+- 74b66a8: **`PaneSeam`: one accessible seam that resizes one pane, with no dependency** (cue-ui-55). It ships from
+  the core barrel, so a side pane no longer needs the optional `react-resizable-panels` peer. It owns a
+  number, not a layout: apply `value` to the pane's width or height.
+
+  It is a focusable `role="separator"` that says its size and its bounds (`aria-valuenow`, `-valuemin`,
+  `-valuemax`) under a required `label`. The arrows move it by `step` (16px), Shift by `largeStep` (64px),
+  and Home and End jump to `min` and `max`. Pointer drags use pointer capture, and every value is clamped.
+  `edge` says which side the pane is on and flips under `dir="rtl"`; `orientation="horizontal"` resizes a
+  height. `Resizable` is unchanged.
+
+- b60b39e: **The request cards offer only the decisions the agent offered, and say where an answer has got to**
+  (cue-ui-57).
+
+  - **`ApprovalCard` takes `options` and `onDecide`.** Each option is an `{ id, label, tone? }` and draws
+    one button, in order, so the card offers exactly what the agent listed. Without `options` it draws
+    the default buttons as before, except **Always allow, which is now drawn only when `onAlwaysAllow` is
+    set**. A card that offered a standing grant nothing could honour was making a false statement.
+  - **`delivery` on `ApprovalCard`, `ElicitationForm` and the new `QuestionCard`**: `sending`, `sent` or
+    `failed`. While the answer is on its way, and once it has arrived, the card offers nothing to press,
+    so it cannot answer twice. `failed` says so and offers the decisions again. `sent` says the answer
+    arrived and does not claim the tool then ran: an outcome `state` still says that, and wins once set.
+  - **`QuestionCard`**, for a free-text question. Enter sends, Shift+Enter breaks the line, and Skip is
+    drawn only when `onDismiss` is set. A failed delivery puts the answer back in the field.
+  - **`UnsupportedRequestCard`**, for a request this client cannot answer. It says so, prints the
+    request's `kind` in mono, and offers no answer.
+  - The copy is data: `DELIVERY_LABELS`, `QUESTION_LABELS` and `UNSUPPORTED_REQUEST_LABELS`, with
+    `REQUEST_DELIVERIES` and the `RequestDelivery` type.
+
+  ### Migrating
+  - **A card that relied on Always allow being drawn without a handler** loses that button. It did
+    nothing when pressed. Pass `onAlwaysAllow` to keep it.
+
+- 74b66a8: **`SplitPane`: a list beside its detail, stacking into a drill-in when narrow** (#102). Side by side while
+  the detail would be at least twice the list, measured on the frame with a `ResizeObserver` so it works in
+  any column; `stackBelow` names a width instead. When stacked it shows the list, or, with `detailOpen`, the
+  detail under a `Back to …` button, and Escape inside the detail calls `onBack` too. The list resizes on a
+  `PaneSeam` (`listSize`, `minListSize`, `maxListSize`), and `collapsible` folds it to a thin tab. Selection
+  and the list's own keyboard stay with the list.
+- 605d3a3: **Tool calls say how they ended, draw inline, and name their empty results.**
+
+  - `ToolCall` takes `state`: `running`, `done`, `failed` or `refused`. Each settled state ends the
+    row with its own mark: a check, a cross in the danger ink, or a muted ban. A failed call no
+    longer shows the success check. `running` still works, read only when `state` is absent, and is
+    deprecated.
+  - `ToolGroup`'s `GroupedToolState` gains `refused`, counted in the header like `failed`. While a
+    call runs, a collapsed group keeps its own label and shows the running command on a faint line
+    under it, rather than rewriting the header on every argument.
+  - `ToolCall` and `ToolGroup` take `variant="inline"`: a denser row that spans its column, with no
+    card or paper, so a transcript of many calls reads as a list. `card` stays the default.
+  - `ToolCall` takes `absence`: `none`, `refused` or `unanswered`. An empty `result` then says
+    "No result", "Refused" or "Not answered" instead of one blank panel.
+  - `ToolState` and `ToolAbsence` are exported from `@cueplusplus/ui/elements`.
+  - `@cueplusplus/ui/elements/markdown` still needs only `react-markdown` and `rehype-sanitize`.
+
+### Patch Changes
+
+- 6c80e70: **A duration ladder.** `@cueplusplus/tokens` declares seven motion tokens, `--cue-duration-instant`
+  (100ms), `-fast` (150ms), `-brisk` (200ms), `-base` (300ms), `-slow` (500ms), `-slower` (700ms) and
+  `-slowest` (1000ms), and bridges each into Tailwind, so `duration-fast` is a utility that reads the
+  token at the element. Override one in your CSS and every component that spends that rung retimes
+  with it.
+
+  `@cueplusplus/ui` now spends those rungs everywhere it used a numeric `duration-*`, at the same
+  values, so nothing moves on screen. `--cue-transition-fast` and `--cue-transition-base` are
+  unchanged.
+
+- Updated dependencies [6c80e70]
+  - @cueplusplus/tokens@0.21.0
+
 ## 0.20.1
 
 ### Patch Changes

package/dist/chat/agent-pile.js

@@ -72,7 +72,7 @@ const AgentPile = React.forwardRef(function AgentPile({ className, agents, root,
 				"data-working": agent.working === true ? "" : void 0,
 				"data-asking": agent.asking === true ? "" : void 0,
 				"data-selected": selected === agent.slug ? "" : void 0,
-				className: cn("relative inline-flex rounded-full ring-1 ring-bg transition-[margin] duration-150 ease-out motion-reduce:transition-none", index === 0 ? null : spacing, agent.working === true ? "z-10" : null),
+				className: cn("relative inline-flex rounded-full ring-1 ring-bg transition-[margin] duration-fast ease-out motion-reduce:transition-none", index === 0 ? null : spacing, agent.working === true ? "z-10" : null),
 				style: { "--agent-color": agentColor(agent.slug, { root }) },
 				children: [
 					onSelect === void 0 ? /* @__PURE__ */ jsx("span", {
@@ -113,7 +113,7 @@ const AgentPile = React.forwardRef(function AgentPile({ className, agents, root,
 			}, agent.slug);
 		}), overflow > 0 ? /* @__PURE__ */ jsx("span", {
 			"data-slot": "agent-pile-overflow",
-			className: cn("relative inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-surface-3 font-mono leading-none text-fg-muted ring-1 ring-bg transition-[margin] duration-150 ease-out motion-reduce:transition-none", AVATAR_SIZES[size], spacing),
+			className: cn("relative inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-surface-3 font-mono leading-none text-fg-muted ring-1 ring-bg transition-[margin] duration-fast ease-out motion-reduce:transition-none", AVATAR_SIZES[size], spacing),
 			children: `+${overflow}`
 		}) : null]
 	});

package/dist/chrome/_status-bar.js

@@ -64,7 +64,7 @@ const ITEM_BASE = "inline-flex min-w-0 shrink-0 items-center gap-(--cue-space-2)
 * never match `:disabled` — the pseudo-class is defined on form controls — so
 * without the data twin a disabled link would read as perfectly live.
 */
-const INTERACTIVE_CHASSIS = `h-full cursor-pointer border-0 bg-transparent py-0 ${LABEL_FACE} text-(length:--cue-text-label) outline-none transition-colors duration-150 ${FOCUS_RING_INSET} disabled:pointer-events-none disabled:opacity-40 data-[disabled]:pointer-events-none data-[disabled]:opacity-40 motion-reduce:transition-none`;
+const INTERACTIVE_CHASSIS = `h-full cursor-pointer border-0 bg-transparent py-0 ${LABEL_FACE} text-(length:--cue-text-label) outline-none transition-colors duration-fast ${FOCUS_RING_INSET} disabled:pointer-events-none disabled:opacity-40 data-[disabled]:pointer-events-none data-[disabled]:opacity-40 motion-reduce:transition-none`;
 /**
 * A quiet control's gutter, and the negative margin that pays for it.
 *

package/dist/chrome/app-shell.js

@@ -144,7 +144,7 @@ const AppShell = {
 				brand === void 0 ? null : /* @__PURE__ */ jsx("div", {
 					"data-slot": "app-shell-brand",
 					...dragProps,
-					className: cn("flex w-auto min-w-0 shrink-0 items-center gap-(--cue-space-3) border-r border-border px-(--cue-pad-row-x) transition-[width] duration-150 ease-out md:w-(--cue-nav-width) motion-reduce:transition-none", dragClasses, brandClassName),
+					className: cn("flex w-auto min-w-0 shrink-0 items-center gap-(--cue-space-3) border-r border-border px-(--cue-pad-row-x) transition-[width] duration-fast ease-out md:w-(--cue-nav-width) motion-reduce:transition-none", dragClasses, brandClassName),
 					children: /* @__PURE__ */ jsx("div", {
 						"data-slot": "app-shell-brand-content",
 						className: clusterClasses,

package/dist/chrome/navigation-menu.js

@@ -67,10 +67,10 @@ const NavigationMenu$1 = {
 		return /* @__PURE__ */ jsxs(NavigationMenu.Trigger, {
 			ref,
 			"data-slot": "navigation-menu-trigger",
-			className: cn(`inline-flex ${NAV_TRIGGER_HEIGHT} cursor-default items-center gap-(--cue-space-2) rounded-control ${NAV_TRIGGER_PAD} ${NAV_TRIGGER_VOICE} whitespace-nowrap ${NAV_TRIGGER_INK} no-underline transition-colors duration-150 outline-none select-none ${NAV_TRIGGER_HOVER_INK} ${FOCUS_RING_INSET} ${NAV_OPEN_GROUND} data-[popup-open]:text-fg`, className),
+			className: cn(`inline-flex ${NAV_TRIGGER_HEIGHT} cursor-default items-center gap-(--cue-space-2) rounded-control ${NAV_TRIGGER_PAD} ${NAV_TRIGGER_VOICE} whitespace-nowrap ${NAV_TRIGGER_INK} no-underline transition-colors duration-fast outline-none select-none ${NAV_TRIGGER_HOVER_INK} ${FOCUS_RING_INSET} ${NAV_OPEN_GROUND} data-[popup-open]:text-fg`, className),
 			...elementProps,
 			children: [children, caret ? /* @__PURE__ */ jsx(NavigationMenu.Icon, {
-				className: "flex items-center transition-transform duration-150 data-[popup-open]:rotate-180 motion-reduce:transition-none",
+				className: "flex items-center transition-transform duration-fast data-[popup-open]:rotate-180 motion-reduce:transition-none",
 				children: /* @__PURE__ */ jsx(CaretDownGlyph, { className: `size-icon-sm ${NAV_CARET_INK}` })
 			}) : null]
 		});
@@ -89,7 +89,7 @@ const NavigationMenu$1 = {
 			"data-slot": "navigation-menu-link",
 			"data-active": active === true ? "" : void 0,
 			"aria-current": active === true ? "page" : void 0,
-			className: cn(`flex cursor-pointer flex-col gap-(--cue-space-1) rounded-control px-(--cue-space-3) py-(--cue-space-2) text-(length:--cue-text-ui) text-fg-muted no-underline transition-colors duration-150 outline-none select-none hover:bg-surface-3 hover:text-fg ${FOCUS_RING_INSET} data-[active]:text-accent`, CONTROL_FACE, className),
+			className: cn(`flex cursor-pointer flex-col gap-(--cue-space-1) rounded-control px-(--cue-space-3) py-(--cue-space-2) text-(length:--cue-text-ui) text-fg-muted no-underline transition-colors duration-fast outline-none select-none hover:bg-surface-3 hover:text-fg ${FOCUS_RING_INSET} data-[active]:text-accent`, CONTROL_FACE, className),
 			...elementProps,
 			children: [/* @__PURE__ */ jsx("span", { children }), description === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				className: "text-(length:--cue-text-label) leading-(--cue-leading-ui) text-fg-subtle",

package/dist/chrome/row.js

@@ -29,7 +29,7 @@ const rowVariants = cva(`flex w-full items-center gap-(--cue-space-3) px-(--cue-
 			false: `border-t border-border first:border-t-0 [[data-slot=panel-header]+&]:border-t-0 ${ROW_RULE_STYLE} ${ROW_BLOCK_PAD}`
 		},
 		interactive: {
-			true: `cursor-pointer text-left transition-colors duration-150 outline-none hover:bg-surface-2 ${FOCUS_RING_INSET_2} disabled:pointer-events-none disabled:opacity-40`,
+			true: `cursor-pointer text-left transition-colors duration-fast outline-none hover:bg-surface-2 ${FOCUS_RING_INSET_2} disabled:pointer-events-none disabled:opacity-40`,
 			false: ""
 		}
 	},

package/dist/chrome/scroll-area.js

@@ -12,7 +12,7 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
 * A console packs panels edge to edge, and a permanent 12px trough on every one
 * of them is 12px of chrome per panel that says nothing.
 */
-const SCROLLBAR_CLASSES = `flex touch-none justify-center rounded-full opacity-0 transition-opacity delay-300 duration-150 select-none data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0 motion-reduce:transition-none ${SCROLLBAR_SIZE_H} data-[orientation=horizontal]:flex-col ${SCROLLBAR_SIZE_V}`;
+const SCROLLBAR_CLASSES = `flex touch-none justify-center rounded-full opacity-0 transition-opacity delay-300 duration-fast select-none data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0 motion-reduce:transition-none ${SCROLLBAR_SIZE_H} data-[orientation=horizontal]:flex-col ${SCROLLBAR_SIZE_V}`;
 /**
 * A scrolling region with the system's own scrollbar instead of the platform's.
 *

package/dist/chrome/section-header.js

@@ -40,7 +40,7 @@ const SectionHeader = React.forwardRef(function SectionHeader({ className, label
 	const headContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		collapsible ? /* @__PURE__ */ jsx(ChevronRightGlyph, {
 			"data-slot": "section-header-chevron",
-			className: cn("size-icon-sm shrink-0 text-fg-subtle transition-transform duration-150 motion-reduce:transition-none", open ? "rotate-90" : "rotate-0")
+			className: cn("size-icon-sm shrink-0 text-fg-subtle transition-transform duration-fast motion-reduce:transition-none", open ? "rotate-90" : "rotate-0")
 		}) : null,
 		/* @__PURE__ */ jsx("span", {
 			"data-slot": "section-header-label",

package/dist/chrome/segmented-control.js

@@ -28,7 +28,7 @@ const ITEM_SIZES = {
 * track and its inset — through the segment names: `_style-segmented-control.ts`
 * for the pressed segment, and `_style-segment.ts` for the half `Tabs` shares.
 */
-const ITEM_CLASSES = `inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap ${SEGMENT_RADIUS} ${CONTROL_FACE} ${SEGMENT_IDLE_INK} transition-colors duration-150 outline-none hover:text-fg ${SEGMENT_PRESSED} ${FOCUS_RING_INSET} disabled:pointer-events-none disabled:opacity-40 data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
+const ITEM_CLASSES = `inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap ${SEGMENT_RADIUS} ${CONTROL_FACE} ${SEGMENT_IDLE_INK} transition-colors duration-fast outline-none hover:text-fg ${SEGMENT_PRESSED} ${FOCUS_RING_INSET} disabled:pointer-events-none disabled:opacity-40 data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
 /**
 * A one-of-N switch drawn as a row of segments: the console's view picker.
 *

package/dist/chrome/tabs.js

@@ -49,7 +49,7 @@ const TabsTab = React.forwardRef(function TabsTab({ className, ...elementProps }
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
 		ref,
 		"data-slot": "tabs-tab",
-		className: cn(`relative inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) ${TAB_SHAPE} ${SEGMENT_PAD} text-(length:--cue-text-ui) whitespace-nowrap ${SEGMENT_IDLE_INK} transition-colors duration-150 outline-none select-none`, CONTROL_FACE, `${TAB_HOVER_INK} ${FOCUS_RING_INSET_2}`, "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-transparent after:content-['']", `${TAB_ACTIVE} ${TAB_UNDERLINE}`, className),
+		className: cn(`relative inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) ${TAB_SHAPE} ${SEGMENT_PAD} text-(length:--cue-text-ui) whitespace-nowrap ${SEGMENT_IDLE_INK} transition-colors duration-fast outline-none select-none`, CONTROL_FACE, `${TAB_HOVER_INK} ${FOCUS_RING_INSET_2}`, "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-transparent after:content-['']", `${TAB_ACTIVE} ${TAB_UNDERLINE}`, className),
 		...elementProps
 	});
 });

package/dist/chrome/toolbar.js

@@ -57,7 +57,7 @@ const Toolbar$1 = {
 		return /* @__PURE__ */ jsxs(Toolbar.Button, {
 			ref,
 			"data-slot": "toolbar-button",
-			className: cn(`inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) rounded-control px-(--cue-space-3) font-mono text-(length:--cue-text-ui) whitespace-nowrap ${GHOST_INK} transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, className),
+			className: cn(`inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) rounded-control px-(--cue-space-3) font-mono text-(length:--cue-text-ui) whitespace-nowrap ${GHOST_INK} transition-colors duration-fast outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, className),
 			...elementProps,
 			children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": "true",

package/dist/chrome/tree.js

@@ -163,7 +163,7 @@ const Tree = React.forwardRef(function Tree({ className, items, expanded: expand
 							setExpanded(item.id, !row.expanded);
 						},
 						className: "flex size-icon-sm shrink-0 cursor-pointer items-center justify-center text-fg-subtle",
-						children: /* @__PURE__ */ jsx(ChevronRightGlyph, { className: cn("size-icon-sm transition-transform duration-150 motion-reduce:transition-none", row.expanded ? "rotate-90" : null) })
+						children: /* @__PURE__ */ jsx(ChevronRightGlyph, { className: cn("size-icon-sm transition-transform duration-fast motion-reduce:transition-none", row.expanded ? "rotate-90" : null) })
 					}) : /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
 						className: "size-icon-sm shrink-0"
@@ -190,7 +190,7 @@ const Tree = React.forwardRef(function Tree({ className, items, expanded: expand
 					rowControls === void 0 ? null : /* @__PURE__ */ jsx("span", {
 						"data-slot": "tree-row-controls",
 						onClick: (event) => event.stopPropagation(),
-						className: "flex shrink-0 items-center gap-(--cue-space-1) opacity-0 transition-opacity duration-150 group-hover/tree-row:opacity-100 group-focus-within/tree-row:opacity-100 motion-reduce:transition-none",
+						className: "flex shrink-0 items-center gap-(--cue-space-1) opacity-0 transition-opacity duration-fast group-hover/tree-row:opacity-100 group-focus-within/tree-row:opacity-100 motion-reduce:transition-none",
 						children: rowControls(item, row)
 					})
 				]
@@ -240,7 +240,7 @@ const TreeVisibilityToggle = React.forwardRef(function TreeVisibilityToggle({ cl
 			if (event.defaultPrevented) return;
 			onValueChange(NEXT_VISIBILITY[value]);
 		},
-		className: cn(`flex size-icon-md shrink-0 cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} motion-reduce:transition-none data-[state=visible]:text-fg-subtle data-[state=ghost]:text-info data-[state=hidden]:text-warn`, className),
+		className: cn(`flex size-icon-md shrink-0 cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 outline-none transition-colors duration-fast hover:text-fg ${FOCUS_RING} motion-reduce:transition-none data-[state=visible]:text-fg-subtle data-[state=ghost]:text-info data-[state=hidden]:text-warn`, className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx(Glyph, { className: "size-icon-sm" })
 	});

package/dist/date/calendar.js

@@ -35,15 +35,15 @@ const CALENDAR_CLASSES = {
 	month_caption: `flex ${DAY_HEIGHT} items-center justify-center`,
 	caption_label: `${LABEL_FACE} ${CAPTION_SIZE_LABEL} ${CAPTION_WEIGHT} ${LABEL_TRACKING} text-fg-subtle ${LABEL_CASE}`,
 	nav: `absolute inset-x-0 top-0 flex ${DAY_HEIGHT} items-center justify-between`,
-	button_previous: `flex ${DAY_SIZE} cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 ${GLYPH_INK_SUBTLE} outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
-	button_next: `flex ${DAY_SIZE} cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 ${GLYPH_INK_SUBTLE} outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
+	button_previous: `flex ${DAY_SIZE} cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 ${GLYPH_INK_SUBTLE} outline-none transition-colors duration-fast hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
+	button_next: `flex ${DAY_SIZE} cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 ${GLYPH_INK_SUBTLE} outline-none transition-colors duration-fast hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
 	chevron: `size-icon-sm fill-current ${GLYPH_OPACITY}`,
 	month_grid: "border-collapse border-spacing-0",
 	weekdays: "",
 	weekday: `${DAY_SIZE} p-0 text-center align-middle ${LABEL_FACE} ${CAPTION_SIZE_MICRO} ${CAPTION_WEIGHT_NORMAL} ${LABEL_TRACKING_TIGHT} text-fg-subtle ${LABEL_CASE}`,
 	week: "",
 	day: "p-0 text-center align-middle",
-	day_button: `${DAY_SIZE} cursor-pointer rounded-control border-0 bg-transparent p-0 font-mono text-(length:--cue-text-ui) tabular-nums ${DAY_INK} outline-none transition-colors duration-150 hover:bg-surface-3 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
+	day_button: `${DAY_SIZE} cursor-pointer rounded-control border-0 bg-transparent p-0 font-mono text-(length:--cue-text-ui) tabular-nums ${DAY_INK} outline-none transition-colors duration-fast hover:bg-surface-3 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
 	today: "[&_button]:font-medium [&_button]:ring-1 [&_button]:ring-inset [&_button]:ring-accent/60",
 	outside: "[&_button]:text-fg-subtle [&_button]:opacity-50",
 	disabled: "opacity-40",

package/dist/dmx/channel-matrix.js

@@ -280,7 +280,7 @@ function ControlButton({ pressed, onClick, children }) {
 		type: "button",
 		"aria-pressed": pressed,
 		onClick,
-		className: `flex h-control-sm cursor-pointer items-center rounded-control px-(--cue-space-3) font-mono text-(length:--cue-text-label) text-fg-muted outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} aria-pressed:bg-accent-soft aria-pressed:text-accent motion-reduce:transition-none`,
+		className: `flex h-control-sm cursor-pointer items-center rounded-control px-(--cue-space-3) font-mono text-(length:--cue-text-label) text-fg-muted outline-none transition-colors duration-fast hover:text-fg ${FOCUS_RING} aria-pressed:bg-accent-soft aria-pressed:text-accent motion-reduce:transition-none`,
 		children
 	});
 }

package/dist/dmx/universe-grid.js

@@ -111,7 +111,7 @@ const UniverseGrid = React.forwardRef(function UniverseGrid({ className, allocat
 						"data-conflict": block.conflict ? "true" : void 0,
 						"aria-label": `${block.label}: channels ${block.start} to ${block.end}`,
 						onClick: () => onSelect(block.allocation),
-						className: cn(`absolute inset-y-0 min-w-[2px] cursor-pointer rounded-[2px] outline-none transition-opacity duration-150 hover:opacity-85 ${FOCUS_RING} motion-reduce:transition-none`, BLOCK_TONES[block.tone], block.conflict ? "z-10 ring-1 ring-danger" : void 0),
+						className: cn(`absolute inset-y-0 min-w-[2px] cursor-pointer rounded-[2px] outline-none transition-opacity duration-fast hover:opacity-85 ${FOCUS_RING} motion-reduce:transition-none`, BLOCK_TONES[block.tone], block.conflict ? "z-10 ring-1 ring-danger" : void 0),
 						style: {
 							left: `${block.left}%`,
 							width: `${block.width}%`

package/dist/elements/agent-handoff.js

@@ -22,12 +22,12 @@ function AgentHandoff({ from, to, reason, carried, settled, className, ...props
 				className: "flex items-center gap-2",
 				children: [
 					/* @__PURE__ */ jsxs("span", {
-						className: cn(field, "text-fg-muted flex items-center gap-1.5 rounded-full px-2.5 py-1 text-(length:--cue-text-ui) transition-opacity duration-500", settled && "opacity-45"),
+						className: cn(field, "text-fg-muted flex items-center gap-1.5 rounded-full px-2.5 py-1 text-(length:--cue-text-ui) transition-opacity duration-slow", settled && "opacity-45"),
 						children: [/* @__PURE__ */ jsx(BotIcon, { className: "size-3" }), from]
 					}),
-					/* @__PURE__ */ jsx(ArrowRightIcon, { className: cn("size-3.5 shrink-0 transition-colors duration-500", settled ? "text-fg-subtle" : "text-stream") }),
+					/* @__PURE__ */ jsx(ArrowRightIcon, { className: cn("size-3.5 shrink-0 transition-colors duration-slow", settled ? "text-fg-subtle" : "text-stream") }),
 					/* @__PURE__ */ jsxs("span", {
-						className: cn("flex items-center gap-1.5 rounded-full px-2.5 py-1 text-(length:--cue-text-ui) transition-colors duration-500", settled ? cn(field, "text-fg-muted") : "bg-stream/15 text-stream"),
+						className: cn("flex items-center gap-1.5 rounded-full px-2.5 py-1 text-(length:--cue-text-ui) transition-colors duration-slow", settled ? cn(field, "text-fg-muted") : "bg-stream/15 text-stream"),
 						children: [/* @__PURE__ */ jsx(BotIcon, { className: "size-3" }), to]
 					})
 				]

package/dist/elements/agent-plan.js

@@ -43,7 +43,7 @@ function AgentPlan({ steps, activeIndex, className, ...props }) {
 			/* @__PURE__ */ jsx("div", {
 				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-500",
+					className: "bg-accent block h-full rounded-full transition-[width] duration-slow",
 					style: { width: `${progress}%` }
 				})
 			}),

package/dist/elements/agent-status.js

@@ -26,7 +26,7 @@ function AgentStatus({ state, label, elapsed, className, ...props }) {
 				className: cn("size-1.5 shrink-0 rounded-full motion-reduce:animate-none", state === "working" ? "animate-pulse bg-stream" : "bg-surface-3 animate-pulse")
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "cue-elements-fade-in cue-elements-blur-in-2 cue-elements-animate-in max-w-44 truncate text-(length:--cue-text-ui) duration-300 motion-reduce:animate-none",
+				className: "cue-elements-fade-in cue-elements-blur-in-2 cue-elements-animate-in max-w-44 truncate text-(length:--cue-text-ui) duration-base motion-reduce:animate-none",
 				children: label
 			}, label),
 			elapsed !== void 0 && state !== "done" && /* @__PURE__ */ jsx("span", {

package/dist/elements/agent-surface.d.ts

@@ -4,14 +4,16 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/elements/agent-surface.d.ts
 interface AgentSurfaceProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
   /**
-   * Which value-set paints the subtree: `cue` (the default) or `aui`, which
-   * installs assistant-ui's own inks, grounds and hues.
+   * Which value-set paints the subtree: `cue` (the default); `aui`, which
+   * installs assistant-ui's own inks, grounds and hues; or `cursor`, Cursor's
+   * agent-pane values. Both halves of each follow `data-mode`.
    */
   skin?: AgentSkin;
   /**
    * How much a supersede island re-points: `cue-metrics` (the default, colour
-   * only) or `upstream`, which also pins assistant-ui's radii, literal type
-   * sizes and spacing so the density ladder stops at the island edge.
+   * only) or `upstream`, which also pins the skin's own geometry. For `aui`
+   * that is its radii, literal type sizes and spacing, so the density ladder
+   * stops at the island edge; for `cursor`, its corners and faces.
    */
   fidelity?: AgentFidelity;
   /**
@@ -38,8 +40,9 @@ interface AgentSurfaceProps extends Omit<React.ComponentPropsWithoutRef<"div">,
  * `data-density` are untouched, and a light app keeps a light island. And it is
  * not needed for cue mode: the elements were rewritten onto cue's tokens by the
  * vendoring codemod, so `skin="cue"` is what they already do. Reach for this to
- * show an element the way assistant-ui drew it, or to hand a chat panel back to
- * upstream's design language inside a console that is otherwise cue's.
+ * show an element the way assistant-ui drew it, to hand a chat panel back to
+ * upstream's design language inside a console that is otherwise cue's, or to
+ * wear Cursor's agent pane with `skin="cursor"` rather than copying its palette.
  *
  * What an `aui` island re-points is this family's own vocabulary rather than the
  * whole token contract: `--cue-busy`, `--cue-info`, `--cue-selection`,

package/dist/elements/agent-surface.js

@@ -20,8 +20,9 @@ import { useRender } from "@base-ui/react/use-render";
 * `data-density` are untouched, and a light app keeps a light island. And it is
 * not needed for cue mode: the elements were rewritten onto cue's tokens by the
 * vendoring codemod, so `skin="cue"` is what they already do. Reach for this to
-* show an element the way assistant-ui drew it, or to hand a chat panel back to
-* upstream's design language inside a console that is otherwise cue's.
+* show an element the way assistant-ui drew it, to hand a chat panel back to
+* upstream's design language inside a console that is otherwise cue's, or to
+* wear Cursor's agent pane with `skin="cursor"` rather than copying its palette.
 *
 * What an `aui` island re-points is this family's own vocabulary rather than the
 * whole token contract: `--cue-busy`, `--cue-info`, `--cue-selection`,

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

@@ -1,3 +1,4 @@
+import { RequestDelivery } from "./vocabulary.js";
 import { ComponentProps } from "react";
 //#region src/elements/approval-card.d.ts
 /**
@@ -5,6 +6,15 @@ import { ComponentProps } from "react";
  * `done` or `denied`.
  */
 type ApprovalState = "request" | "running" | "done" | "denied";
+/** One decision the agent offered, drawn as one button. */
+interface ApprovalOption {
+  /** What `onDecide` is called with. The agent's own id for the decision. */
+  id: string;
+  /** What the button says. */
+  label: string;
+  /** `primary` draws the filled button; `quiet`, the default, the plain one. */
+  tone?: "primary" | "quiet";
+}
 /**
  * Human in the loop: the agent asks before it runs anything with side effects.
  *
@@ -20,7 +30,7 @@ type ApprovalState = "request" | "running" | "done" | "denied";
  *   onDeny={() => deny()}
  * />
  */
-declare function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAllow, onDeny, className, ...props }: Omit<ComponentProps<"div">, "children" | "state" | "command" | "title" | "subtitle" | "onAllowOnce" | "onAlwaysAllow" | "onDeny"> & {
+declare function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAllow, onDeny, options, onDecide, delivery, className, ...props }: Omit<ComponentProps<"div">, "children" | "state" | "command" | "title" | "subtitle" | "onAllowOnce" | "onAlwaysAllow" | "onDeny" | "options" | "onDecide" | "delivery"> & {
   /** Lifecycle of the card: request with actions, running spinner, done check, or denied. */
   state: ApprovalState;
   /** Command shown in the mono field the agent wants to run. */
@@ -31,10 +41,26 @@ declare function ApprovalCard({ state, command, title, subtitle, onAllowOnce, on
   subtitle: string;
   /** Called when the user clicks Allow once. */
   onAllowOnce?: () => void;
-  /** Called when the user clicks Always allow. */
+  /**
+   * Called when the user clicks Always allow. The button is drawn only when this is
+   * set, so a card never offers a standing grant nothing can honour.
+   */
   onAlwaysAllow?: () => void;
   /** Called when the user clicks Deny. */
   onDeny?: () => void;
+  /**
+   * The decisions the agent offered, one button each and in this order. Replaces the
+   * default Deny, Always allow and Allow once.
+   */
+  options?: readonly ApprovalOption[];
+  /** Called with an option's `id` when the user picks it. */
+  onDecide?: (id: string) => void;
+  /**
+   * Where the answer has got to: `sending`, `sent` or `failed`. While it is on its way
+   * and once it has arrived, the card offers nothing to press. `failed` offers the
+   * decisions again. An outcome `state` wins over it.
+   */
+  delivery?: RequestDelivery;
 }): import("react").JSX.Element;
 //#endregion
-export { ApprovalCard, ApprovalState };
+export { ApprovalCard, ApprovalOption, ApprovalState };

package/dist/elements/approval-card.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { field, inkButton, paper } from "./surfaces.js";
+import { DeliveryNote } from "./request-delivery.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, Loader2Icon, TerminalIcon, XIcon } from "lucide-react";
 //#region src/elements/approval-card.tsx
@@ -19,7 +20,7 @@ import { CheckIcon, Loader2Icon, TerminalIcon, XIcon } from "lucide-react";
 *   onDeny={() => deny()}
 * />
 */
-function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAllow, onDeny, className, ...props }) {
+function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAllow, onDeny, options, onDecide, delivery, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "approval-card",
 		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-overlay p-4", className),
@@ -46,18 +47,21 @@ function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAl
 				children: command
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "flex h-8 items-center justify-end gap-2",
-				children: state === "request" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				className: "flex min-h-8 flex-wrap items-center justify-end gap-2",
+				children: state === "request" && (delivery === "sending" || delivery === "sent") ? /* @__PURE__ */ jsx(DeliveryNote, { delivery }) : state === "request" ? /* @__PURE__ */ jsxs(Fragment, { children: [delivery === "failed" ? /* @__PURE__ */ jsx(DeliveryNote, {
+					delivery: "failed",
+					className: "me-auto"
+				}) : null, options === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: onDeny,
-						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96]",
 						children: "Deny"
 					}),
-					/* @__PURE__ */ jsx("button", {
+					onAlwaysAllow === void 0 ? null : /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: onAlwaysAllow,
-						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+						className: "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96]",
 						children: "Always allow"
 					}),
 					/* @__PURE__ */ jsx("button", {
@@ -66,8 +70,14 @@ function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAl
 						className: cn(inkButton, "flex h-8 items-center rounded-full px-3.5 text-(length:--cue-text-ui) font-medium"),
 						children: "Allow once"
 					})
-				] }) : /* @__PURE__ */ jsx("div", {
-					className: "cue-elements-fade-in cue-elements-animate-in text-fg-muted flex items-center gap-2 text-(length:--cue-text-ui) duration-300",
+				] }) : options.map((option) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-tone": option.tone ?? "quiet",
+					onClick: () => onDecide?.(option.id),
+					className: option.tone === "primary" ? cn(inkButton, "flex h-8 items-center rounded-full px-3.5 text-(length:--cue-text-ui) font-medium") : "text-fg-muted hover:bg-surface-2 hover:text-fg h-8 rounded-full px-3.5 text-(length:--cue-text-ui) font-medium transition-[background-color,color,scale] duration-fast active:scale-[0.96]",
+					children: option.label
+				}, option.id))] }) : /* @__PURE__ */ jsx("div", {
+					className: "cue-elements-fade-in cue-elements-animate-in text-fg-muted flex items-center gap-2 text-(length:--cue-text-ui) duration-base",
 					children: state === "running" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2Icon, { className: "text-fg-muted size-3.5 animate-spin" }), "Approved, running"] }) : state === "denied" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XIcon, { className: "text-fg-muted size-3.5" }), "Denied"] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-ok" }), "Finished with exit 0"] })
 				}, state)
 			})

package/dist/elements/artifact-card.js

@@ -20,7 +20,7 @@ import { ArrowUpRightIcon, FileTextIcon } from "lucide-react";
 function ArtifactCard({ title, meta, generating = false, words = 0, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "artifact-card",
-		className: cn(paper, "group flex w-full max-w-xs cursor-pointer items-center gap-3 rounded-overlay p-3.5 transition-transform duration-150 hover:-translate-y-px active:scale-[0.98]", className),
+		className: cn(paper, "group flex w-full max-w-xs cursor-pointer items-center gap-3 rounded-overlay p-3.5 transition-transform duration-fast hover:-translate-y-px active:scale-[0.98]", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("span", {
@@ -46,7 +46,7 @@ function ArtifactCard({ title, meta, generating = false, words = 0, className, .
 						})
 					]
 				}) : /* @__PURE__ */ jsx("p", {
-					className: cn(mono, "cue-elements-fade-in cue-elements-blur-in-2 cue-elements-animate-in text-fg-subtle duration-300 motion-reduce:animate-none"),
+					className: cn(mono, "cue-elements-fade-in cue-elements-blur-in-2 cue-elements-animate-in text-fg-subtle duration-base motion-reduce:animate-none"),
 					children: meta
 				})]
 			}),

package/dist/elements/canvas-split.js

@@ -54,7 +54,7 @@ function CanvasSplitMessage({ speaker, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "canvas-split-message",
 		"data-speaker": speaker,
-		className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-300", speaker === "user" ? cn(field, "text-fg-muted ms-auto rounded-overlay px-3 py-2") : "text-fg-muted", className),
+		className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-base", speaker === "user" ? cn(field, "text-fg-muted ms-auto rounded-overlay px-3 py-2") : "text-fg-muted", className),
 		...props
 	});
 }
@@ -86,7 +86,7 @@ function CanvasSplitHeader({ title, version, saved, onCopy, onClose, className,
 				children: ["v", version]
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: cn(mono, "shrink-0 transition-colors duration-300", saved ? "text-ok" : "text-fg-subtle"),
+				className: cn(mono, "shrink-0 transition-colors duration-base", saved ? "text-ok" : "text-fg-subtle"),
 				children: saved ? /* @__PURE__ */ jsxs("span", {
 					className: "flex items-center gap-1",
 					children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-3" }), "saved"]
@@ -130,7 +130,7 @@ function CanvasSplitBody({ writing, className, children, ...props }) {
 function CanvasSplitLine({ heading, className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "canvas-split-line",
-		className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-300", heading ? "text-fg font-medium" : "text-fg-muted", className),
+		className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-base", heading ? "text-fg font-medium" : "text-fg-muted", className),
 		...props
 	});
 }

package/dist/elements/chart.js

@@ -85,7 +85,7 @@ function Chart({ label, value, delta, points, visibleCount, variant = "area", cl
 						width: barWidth,
 						height: Math.max(1, 82 - top),
 						rx: "1.5",
-						className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both duration-300", i === lastIndex ? "fill-stream" : "fill-fg-subtle"),
+						className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both duration-base", i === lastIndex ? "fill-stream" : "fill-fg-subtle"),
 						style: { animationDelay: `${i * 40}ms` }
 					}, i);
 				}) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/elements/chat-panel.js

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