@cueplusplus/ui 0.20.0 → 0.21.0

package/dist/layout/split-pane.d.ts

@@ -0,0 +1,74 @@
+import * as React from "react";
+//#region src/layout/split-pane.d.ts
+/** Whether the panes sit side by side or stack into a drill-in. */
+type SplitPaneLayout = "split" | "stacked";
+interface SplitPaneProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** The master: a list of rows, a tree, a feed. It owns its own keyboard. */
+  list: React.ReactNode;
+  /** The detail for whatever the list has selected. */
+  detail: React.ReactNode;
+  /**
+   * What the list is, in a word or two: `events`. It names the seam (`Resize
+   * the events`), the Back button (`Back to events`) and the fold (`Hide
+   * events`), so each control says what it acts on.
+   */
+  listLabel: string;
+  /** The list's width in pixels, when the caller holds it. */
+  listSize?: number;
+  /** The list's starting width when nothing controls it. Defaults to 320. */
+  defaultListSize?: number;
+  /** Called with every new list width, clamped to `minListSize` and `maxListSize`. */
+  onListSizeChange?: (size: number) => void;
+  /** The narrowest the list may be dragged, in pixels. Defaults to 200. */
+  minListSize?: number;
+  /** The widest the list may be dragged, in pixels. Defaults to 480. */
+  maxListSize?: number;
+  /**
+   * The frame width, in pixels, below which the panes stack. Unset, they stack
+   * once the detail would be narrower than twice the list.
+   */
+  stackBelow?: number;
+  /**
+   * Which pane shows when stacked: the detail when `true`, the list when not.
+   * Side by side, both always show.
+   */
+  detailOpen?: boolean;
+  /** Called by the stacked detail's Back button and by Escape inside it. */
+  onBack?: () => void;
+  /** Whether the list can fold to a thin tab while side by side. */
+  collapsible?: boolean;
+  /** Whether the list is folded, when the caller holds it. */
+  collapsed?: boolean;
+  /** Whether the list starts folded when nothing controls it. */
+  defaultCollapsed?: boolean;
+  /** Called when the list folds (`true`) or opens (`false`). */
+  onCollapsedChange?: (collapsed: boolean) => void;
+}
+/**
+ * A list beside its detail, which stacks into a drill-in when narrow (#102).
+ *
+ * The master-detail opinion on top of {@link PaneSeam}. Side by side while
+ * the detail would be at least twice the list, measured on the frame rather
+ * than the window, so it works in any column. Below that it stacks the way a
+ * phone does: the list, or the detail with a Back button, and Escape inside the
+ * detail goes back too. `detailOpen` says which shows; selection and the list's
+ * own keyboard stay with the list.
+ *
+ * The frame measures itself with a `ResizeObserver` and draws side by side
+ * until it has, so a server render and a browser without one get the split.
+ *
+ * @example
+ * const [selected, setSelected] = React.useState<string | null>(null);
+ *
+ * <SplitPane
+ *   listLabel="events"
+ *   list={<EventFeed events={events} selectedId={selected} onSelect={setSelected} />}
+ *   detail={selected ? <EventDetail id={selected} /> : <EmptyState title="Pick an event" />}
+ *   detailOpen={selected !== null}
+ *   onBack={() => setSelected(null)}
+ *   collapsible
+ * />
+ */
+declare const SplitPane: React.ForwardRefExoticComponent<SplitPaneProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SplitPane, SplitPaneLayout, SplitPaneProps };

package/dist/layout/split-pane.js

@@ -0,0 +1,135 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
+import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
+import { PaneSeam } from "./pane-seam.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/layout/split-pane.tsx
+/**
+* A list beside its detail, which stacks into a drill-in when narrow (#102).
+*
+* The master-detail opinion on top of {@link PaneSeam}. Side by side while
+* the detail would be at least twice the list, measured on the frame rather
+* than the window, so it works in any column. Below that it stacks the way a
+* phone does: the list, or the detail with a Back button, and Escape inside the
+* detail goes back too. `detailOpen` says which shows; selection and the list's
+* own keyboard stay with the list.
+*
+* The frame measures itself with a `ResizeObserver` and draws side by side
+* until it has, so a server render and a browser without one get the split.
+*
+* @example
+* const [selected, setSelected] = React.useState<string | null>(null);
+*
+* <SplitPane
+*   listLabel="events"
+*   list={<EventFeed events={events} selectedId={selected} onSelect={setSelected} />}
+*   detail={selected ? <EventDetail id={selected} /> : <EmptyState title="Pick an event" />}
+*   detailOpen={selected !== null}
+*   onBack={() => setSelected(null)}
+*   collapsible
+* />
+*/
+const SplitPane = React.forwardRef(function SplitPane({ list, detail, listLabel, listSize, defaultListSize = 320, onListSizeChange, minListSize = 200, maxListSize = 480, stackBelow, detailOpen = false, onBack, collapsible = false, collapsed, defaultCollapsed = false, onCollapsedChange, className, ...elementProps }, ref) {
+	const node = React.useRef(null);
+	const setNode = React.useCallback((element) => {
+		node.current = element;
+		if (typeof ref === "function") ref(element);
+		else if (ref) ref.current = element;
+	}, [ref]);
+	const [ownSize, setOwnSize] = React.useState(defaultListSize);
+	const size = listSize ?? ownSize;
+	const [ownCollapsed, setOwnCollapsed] = React.useState(defaultCollapsed);
+	const folded = collapsible && (collapsed ?? ownCollapsed);
+	const [width, setWidth] = React.useState(null);
+	React.useLayoutEffect(() => {
+		const element = node.current;
+		if (element === null || typeof ResizeObserver === "undefined") return;
+		const measure = () => setWidth(element.getBoundingClientRect().width);
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		measure();
+		return () => observer.disconnect();
+	}, []);
+	const threshold = stackBelow ?? size * 3;
+	const layout = width !== null && width < threshold ? "stacked" : "split";
+	const resize = (next) => {
+		if (listSize === void 0) setOwnSize(next);
+		onListSizeChange?.(next);
+	};
+	const fold = (next) => {
+		if (collapsed === void 0) setOwnCollapsed(next);
+		onCollapsedChange?.(next);
+	};
+	const quiet = `flex items-center justify-center rounded-control text-fg-muted transition-colors duration-fast outline-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET_2} motion-reduce:transition-none`;
+	return /* @__PURE__ */ jsx("div", {
+		ref: setNode,
+		"data-slot": "split-pane",
+		"data-layout": layout,
+		"data-detail-open": detailOpen || void 0,
+		"data-collapsed": folded || void 0,
+		className: cn("flex min-h-0 min-w-0", className),
+		...elementProps,
+		children: layout === "stacked" ? detailOpen ? /* @__PURE__ */ jsxs("div", {
+			"data-slot": "split-pane-detail",
+			className: "flex min-h-0 min-w-0 flex-1 flex-col",
+			onKeyDown: (event) => {
+				if (event.key !== "Escape" || event.defaultPrevented) return;
+				event.preventDefault();
+				onBack?.();
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center border-b border-border px-(--cue-space-2) py-(--cue-space-1)",
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: onBack,
+					className: cn(quiet, "gap-(--cue-space-1) px-(--cue-space-2) py-(--cue-space-1) text-(length:--cue-text-ui)"),
+					children: [/* @__PURE__ */ jsx(ChevronLeftGlyph, { className: "size-3" }), `Back to ${listLabel}`]
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 min-w-0 flex-1",
+				children: detail
+			})]
+		}) : /* @__PURE__ */ jsx("div", {
+			"data-slot": "split-pane-list",
+			className: "min-h-0 min-w-0 flex-1",
+			children: list
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [folded ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": false,
+			onClick: () => fold(false),
+			className: cn(quiet, "w-(--cue-space-6) shrink-0 self-stretch rounded-none border-e border-border"),
+			children: [/* @__PURE__ */ jsx(ChevronRightGlyph, { className: "size-3" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: `Show ${listLabel}`
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "split-pane-list",
+			className: "relative min-h-0 shrink-0",
+			style: { width: size },
+			children: [list, collapsible ? /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": true,
+				onClick: () => fold(true),
+				className: cn(quiet, "absolute end-(--cue-space-1) top-(--cue-space-1) size-(--cue-space-6)"),
+				children: [/* @__PURE__ */ jsx(ChevronLeftGlyph, { className: "size-3" }), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: `Hide ${listLabel}`
+				})]
+			}) : null]
+		}), /* @__PURE__ */ jsx(PaneSeam, {
+			label: `Resize the ${listLabel}`,
+			min: minListSize,
+			max: maxListSize,
+			value: Math.min(maxListSize, Math.max(minListSize, size)),
+			onValueChange: resize
+		})] }), /* @__PURE__ */ jsx("div", {
+			"data-slot": "split-pane-detail",
+			className: "min-h-0 min-w-0 flex-1",
+			children: detail
+		})] })
+	});
+});
+//#endregion
+export { SplitPane };

package/dist/layout/stepper.js

@@ -19,7 +19,7 @@ const INDEX_TONES = {
 	current: "text-accent",
 	upcoming: "text-fg-subtle"
 };
-const STEP_BUTTON_CLASSES = `inline-flex cursor-pointer items-center gap-(--cue-space-2) rounded-control border-0 bg-transparent p-0 ${LABEL_FACE} text-[length:inherit] tracking-[inherit] text-inherit ${LABEL_CASE} transition-colors duration-150 outline-none hover:text-fg ${FOCUS_RING_OFFSET_2}`;
+const STEP_BUTTON_CLASSES = `inline-flex cursor-pointer items-center gap-(--cue-space-2) rounded-control border-0 bg-transparent p-0 ${LABEL_FACE} text-[length:inherit] tracking-[inherit] text-inherit ${LABEL_CASE} transition-colors duration-fast outline-none hover:text-fg ${FOCUS_RING_OFFSET_2}`;
 /**
 * The step trail: `1 target · 2 preview · 3 apply`.
 *

package/dist/lib/auto-grow.js

@@ -0,0 +1,42 @@
+"use client";
+import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import * as React from "react";
+//#region src/lib/auto-grow.ts
+/** Whether this browser sizes a textarea to its content itself (`field-sizing: content`). */
+function sizesItself() {
+	return typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("field-sizing", "content");
+}
+/**
+* Grow a textarea with what it holds, where CSS cannot.
+*
+* `field-sizing: content` sizes a textarea to its text in the browsers that
+* have it, and a `max-height` caps it, so in those this does nothing. Where the
+* property is missing, the textarea is measured instead: its height is reset
+* and set to its `scrollHeight` on every input, and again whenever `value`
+* changes from outside, so a composer the parent clears after sending shrinks
+* back to one line. The cap stays the stylesheet's.
+*
+* Returns a ref for the textarea. A caller that passes its own `ref` after this
+* one replaces it, and the field then sizes with CSS alone.
+*
+* @param value The textarea's value, so a change made from outside re-measures it.
+*/
+function useAutoGrow(value) {
+	const node = React.useRef(null);
+	const fit = React.useCallback(() => {
+		const element = node.current;
+		if (element === null || sizesItself()) return;
+		element.style.height = "auto";
+		element.style.height = `${element.scrollHeight}px`;
+	}, []);
+	const ref = React.useCallback((element) => {
+		node.current?.removeEventListener("input", fit);
+		node.current = element;
+		element?.addEventListener("input", fit);
+		fit();
+	}, [fit]);
+	useIsomorphicLayoutEffect(fit, [value, fit]);
+	return { ref };
+}
+//#endregion
+export { useAutoGrow };

package/dist/overlays/_surface.d.ts

@@ -73,9 +73,9 @@ declare const overlaySurfaceClasses = "rounded-overlay border-transparent border
  * composed declaration without entering it; at rest the property is theirs.
  * The pseudo's `transition` and timing are its own classes: Tailwind
  * registers `--tw-duration` and `--tw-ease` with `inherits: false`, so the
- * scrim's `duration-150 ease-out` never reach it.
+ * scrim's `duration-fast ease-out` never reach it.
  */
-declare const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) before:absolute before:inset-0 before:content-[''] before:pointer-events-none before:[backdrop-filter:var(--cue-paint-scrim-filter,none)] transition-[background-color,backdrop-filter] duration-150 ease-out before:transition-opacity before:duration-150 before:ease-out motion-reduce:transition-none motion-reduce:before:transition-none data-[starting-style]:bg-transparent data-[ending-style]:bg-transparent data-[starting-style]:[backdrop-filter:none] data-[ending-style]:[backdrop-filter:none] data-[starting-style]:before:opacity-0 data-[ending-style]:before:opacity-0";
+declare const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) before:absolute before:inset-0 before:content-[''] before:pointer-events-none before:[backdrop-filter:var(--cue-paint-scrim-filter,none)] transition-[background-color,backdrop-filter] duration-fast ease-out before:transition-opacity before:duration-fast before:ease-out motion-reduce:transition-none motion-reduce:before:transition-none data-[starting-style]:bg-transparent data-[ending-style]:bg-transparent data-[starting-style]:[backdrop-filter:none] data-[ending-style]:[backdrop-filter:none] data-[starting-style]:before:opacity-0 data-[ending-style]:before:opacity-0";
 /**
  * What a Base UI `Positioner` needs and nothing more: it is a layout box, not a
  * painted one. The stacking context lives here so the popup itself can stay
@@ -88,14 +88,14 @@ declare const overlayPositionerClasses = "z-50 outline-none";
  * transitions — no animation library, and nothing to run on the main thread
  * when the user has asked for reduced motion.
  */
-declare const overlayPopupTransitionClasses = "origin-(--transform-origin) transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
+declare const overlayPopupTransitionClasses = "origin-(--transform-origin) transition-[opacity,scale] duration-instant ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
 /**
  * Enter/exit for a centred modal surface. Split from
  * {@link overlayPopupTransitionClasses} because a dialog is centred with a
  * translate, and animating `scale` alongside a static `translate` needs the
  * transition property list to name both.
  */
-declare const overlayModalTransitionClasses = "transition-[opacity,scale] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
+declare const overlayModalTransitionClasses = "transition-[opacity,scale] duration-fast ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
 /**
  * Body copy inside an overlay: the body voice (mono unless a style set names
  * another face — `_style-body.ts`), one rung under the panel's own text.

package/dist/overlays/_surface.js

@@ -88,9 +88,9 @@ const overlaySurfaceClasses = `rounded-overlay ${STROKE_SURFACE_2} ${ELEVATION_2
 * composed declaration without entering it; at rest the property is theirs.
 * The pseudo's `transition` and timing are its own classes: Tailwind
 * registers `--tw-duration` and `--tw-ease` with `inherits: false`, so the
-* scrim's `duration-150 ease-out` never reach it.
+* scrim's `duration-fast ease-out` never reach it.
 */
-const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) before:absolute before:inset-0 before:content-[''] before:pointer-events-none before:[backdrop-filter:var(--cue-paint-scrim-filter,none)] transition-[background-color,backdrop-filter] duration-150 ease-out before:transition-opacity before:duration-150 before:ease-out motion-reduce:transition-none motion-reduce:before:transition-none data-[starting-style]:bg-transparent data-[ending-style]:bg-transparent data-[starting-style]:[backdrop-filter:none] data-[ending-style]:[backdrop-filter:none] data-[starting-style]:before:opacity-0 data-[ending-style]:before:opacity-0";
+const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) before:absolute before:inset-0 before:content-[''] before:pointer-events-none before:[backdrop-filter:var(--cue-paint-scrim-filter,none)] transition-[background-color,backdrop-filter] duration-fast ease-out before:transition-opacity before:duration-fast before:ease-out motion-reduce:transition-none motion-reduce:before:transition-none data-[starting-style]:bg-transparent data-[ending-style]:bg-transparent data-[starting-style]:[backdrop-filter:none] data-[ending-style]:[backdrop-filter:none] data-[starting-style]:before:opacity-0 data-[ending-style]:before:opacity-0";
 /**
 * What a Base UI `Positioner` needs and nothing more: it is a layout box, not a
 * painted one. The stacking context lives here so the popup itself can stay
@@ -103,14 +103,14 @@ const overlayPositionerClasses = "z-50 outline-none";
 * transitions — no animation library, and nothing to run on the main thread
 * when the user has asked for reduced motion.
 */
-const overlayPopupTransitionClasses = "origin-(--transform-origin) transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
+const overlayPopupTransitionClasses = "origin-(--transform-origin) transition-[opacity,scale] duration-instant ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
 /**
 * Enter/exit for a centred modal surface. Split from
 * {@link overlayPopupTransitionClasses} because a dialog is centred with a
 * translate, and animating `scale` alongside a static `translate` needs the
 * transition property list to name both.
 */
-const overlayModalTransitionClasses = "transition-[opacity,scale] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
+const overlayModalTransitionClasses = "transition-[opacity,scale] duration-fast ease-out motion-reduce:transition-none data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0";
 /**
 * Body copy inside an overlay: the body voice (mono unless a style set names
 * another face — `_style-body.ts`), one rung under the panel's own text.

package/dist/overlays/drawer.js

@@ -106,7 +106,7 @@ const Drawer$1 = {
 				children: /* @__PURE__ */ jsxs(Drawer.Popup, {
 					ref,
 					"data-slot": "drawer-popup",
-					className: cn(overlaySurfaceClasses, DRAWER_RADIUS, "flex flex-col overflow-y-auto overscroll-contain outline-none transition-transform duration-200 ease-out data-[swiping]:duration-0 motion-reduce:transition-none", POPUP_GEOMETRY[direction], className),
+					className: cn(overlaySurfaceClasses, DRAWER_RADIUS, "flex flex-col overflow-y-auto overscroll-contain outline-none transition-transform duration-brisk ease-out data-[swiping]:duration-0 motion-reduce:transition-none", POPUP_GEOMETRY[direction], className),
 					...popupProps,
 					children: [grabHandle ? /* @__PURE__ */ jsx("div", {
 						"data-slot": "drawer-grab-handle",

package/dist/overlays/menubar.js

@@ -68,7 +68,7 @@ const Menubar$1 = {
 		return /* @__PURE__ */ jsx(Menu.Trigger, {
 			ref,
 			"data-slot": "menubar-trigger",
-			className: cn(`inline-flex h-control-sm shrink-0 cursor-default items-center rounded-control px-(--cue-space-3) text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted transition-colors duration-150 outline-none select-none hover:text-fg ${FOCUS_RING_INSET} data-[popup-open]:bg-accent-soft data-[popup-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, CONTROL_FACE, className),
+			className: cn(`inline-flex h-control-sm shrink-0 cursor-default items-center rounded-control px-(--cue-space-3) text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted transition-colors duration-fast outline-none select-none hover:text-fg ${FOCUS_RING_INSET} data-[popup-open]:bg-accent-soft data-[popup-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, CONTROL_FACE, className),
 			...elementProps
 		});
 	}),

package/dist/overlays/sheet.js

@@ -23,7 +23,7 @@ import { Dialog } from "@base-ui/react/dialog";
 * into a corner; killing the outer edge is what makes it read as part of the
 * window.
 */
-const sheetPopupVariants = cva(`${overlaySurfaceClasses} fixed z-50 flex flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none transition-transform duration-200 ease-out motion-reduce:transition-none`, {
+const sheetPopupVariants = cva(`${overlaySurfaceClasses} fixed z-50 flex flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none transition-transform duration-brisk ease-out motion-reduce:transition-none`, {
 	variants: { side: {
 		right: "inset-y-0 right-0 w-[min(28rem,calc(100vw-2rem))] rounded-r-none border-y-0 border-r-0 data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full",
 		left: "inset-y-0 left-0 w-[min(28rem,calc(100vw-2rem))] rounded-l-none border-y-0 border-l-0 data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full",

package/dist/overlays/toast.js

@@ -83,7 +83,7 @@ function ToastItem({ toast, className, closeLabel }) {
 	return /* @__PURE__ */ jsxs(Toast.Root, {
 		toast,
 		"data-slot": "toast-root",
-		className: cn(overlaySurfaceClasses, `relative flex flex-col gap-(--cue-space-1) border-l-2 ${TOAST_PAD_Y} pr-(--cue-space-6) ${TOAST_PAD_X} outline-none`, "transition-[opacity,translate] duration-150 ease-out motion-reduce:transition-none", "data-[starting-style]:translate-x-2 data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-2 data-[ending-style]:opacity-0", "data-[limited]:hidden", TOAST_TONE_RAIL[toToastTone(toast.type)], className),
+		className: cn(overlaySurfaceClasses, `relative flex flex-col gap-(--cue-space-1) border-l-2 ${TOAST_PAD_Y} pr-(--cue-space-6) ${TOAST_PAD_X} outline-none`, "transition-[opacity,translate] duration-fast ease-out motion-reduce:transition-none", "data-[starting-style]:translate-x-2 data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-2 data-[ending-style]:opacity-0", "data-[limited]:hidden", TOAST_TONE_RAIL[toToastTone(toast.type)], className),
 		children: [
 			/* @__PURE__ */ jsx(Toast.Title, {
 				"data-slot": "toast-title",

package/dist/primitives/button.js

@@ -38,7 +38,7 @@ import { useRender } from "@base-ui/react/use-render";
 *
 * @internal Not part of the public API; imported by `icon-button.tsx`.
 */
-const buttonChassis = `inline-flex select-none items-center justify-center ${CONTROL_GAP} whitespace-nowrap rounded-control ${CONTROL_FACE} ${CONTROL_WEIGHT} ${CONTROL_TRACKING} ${CONTROL_TRIM} ${CONTROL_CASE} transition-colors duration-150 outline-none ${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-focus-offset,1px)] disabled:pointer-events-none ${DISABLED_OPACITY}`;
+const buttonChassis = `inline-flex select-none items-center justify-center ${CONTROL_GAP} whitespace-nowrap rounded-control ${CONTROL_FACE} ${CONTROL_WEIGHT} ${CONTROL_TRACKING} ${CONTROL_TRIM} ${CONTROL_CASE} transition-colors duration-fast outline-none ${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-focus-offset,1px)] disabled:pointer-events-none ${DISABLED_OPACITY}`;
 /**
 * A style set's chevron cut (structural Looks, spec 2026-10-02 §3.3), for the tones
 * that are a filled shape: primary and danger always, secondary only where the set

package/dist/primitives/chip.d.ts

@@ -2,7 +2,7 @@ import { ClassProp, VariantProps } from "../lib/cva.js";
 import * as React from "react";
 //#region src/primitives/chip.d.ts
 declare const chipVariants: (props?: ({
-  tone?: "info" | "warn" | "danger" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
+  tone?: "danger" | "info" | "warn" | "busy" | "accent" | "ok" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/styles.css

@@ -115,6 +115,18 @@
   clip-path: none;
 }
 
+/* `Reveal`'s server render (`layout/reveal.tsx`): pending content is hidden before hydration, so
+ * it is never shown visible and then hidden by the client. Only where scripting is on — a reader
+ * with no JavaScript sees it — and where motion is welcome, as the client's own entrance is. A
+ * staggered block stays visible and hides the items it marks, as the client does. */
+@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
+  .cue-reveal-pending:not([data-reveal-stagger]),
+  .cue-reveal-pending[data-reveal-stagger] [data-reveal-item] {
+    opacity: 0;
+    transform: translateY(var(--cue-reveal-distance, 28px));
+  }
+}
+
 @media (forced-colors: active) {
   .cue-cut,
   .cue-cut-secondary {

package/dist/system/agent-skin.d.ts

@@ -9,18 +9,24 @@ import "react";
  * - `aui` — supersede mode. `@cueplusplus/ui/elements.css` re-points those same
  *   tokens to assistant-ui's own values under `[data-cue-skin="aui"]`, so one
  *   DOM paints two ways with no branching in any component.
+ * - `cursor` — the same mechanism with Cursor's agent-pane values, under
+ *   `[data-cue-skin="cursor"]`: the gallery study's palette, published so a
+ *   consumer wears it rather than copying it. Its light and dark halves follow
+ *   `data-mode`, as assistant-ui's do.
  */
-type AgentSkin = "cue" | "aui";
+type AgentSkin = "cue" | "aui" | "cursor";
 /**
  * How far the supersede island goes: colour only, or colour and geometry.
  *
  * - `cue-metrics` — the default. Colour is re-pointed; cue's type scale, radius
  *   ladder and density ladder still apply, so an island tracks the density of
  *   the console around it.
- * - `upstream` — assistant-ui's metrics too: their radii, their literal 13.5 /
- *   12 / 11 px type, `--spacing` pinned at Tailwind's default. Density stops at
- *   the island edge, which is the point — this is the mode for showing an
- *   element exactly as its authors drew it.
+ * - `upstream` — the skin's own geometry too. Under `aui` that is
+ *   assistant-ui's radii, their literal 13.5 / 12 / 11 px type and `--spacing`
+ *   pinned at Tailwind's default, so density stops at the island edge, which is
+ *   the point: this is the mode for showing an element exactly as its authors
+ *   drew it. Under `cursor` it is Cursor's corners and its two faces. Cursor's
+ *   type sizes and spacing were never recorded, so those stay cue's.
  */
 type AgentFidelity = "upstream" | "cue-metrics";
 //#endregion

package/dist/system/frame-clock.js

@@ -32,6 +32,7 @@ function useFrameClock({ fps = 30, durationInFrames, loop = true, playing = true
 			last = now;
 			const total = Math.floor(elapsed.current * fps / 1e3);
 			setFrame(loop ? total % durationInFrames : Math.min(total, durationInFrames - 1));
+			if (!loop && total >= durationInFrames - 1) return;
 			handle = requestAnimationFrame(step);
 		});
 		const onVisibility = () => {

package/dist/system/theme-registry.d.ts

@@ -41,7 +41,7 @@ declare function useThemes(): readonly ThemeManifest[];
  */
 declare function useDensities(): readonly DensityEntry[];
 /**
- * The font pairings, by the same rule: the base twelve, then the active theme's.
+ * The font pairings, by the same rule: the base fourteen, then the active theme's.
  *
  * @throws If called outside a `<ThemeProvider>`.
  * @example

package/dist/system/theme-registry.js

@@ -68,7 +68,7 @@ function useDensities() {
 	return useRegistry("useDensities", (registry) => registry.densities);
 }
 /**
-* The font pairings, by the same rule: the base twelve, then the active theme's.
+* The font pairings, by the same rule: the base fourteen, then the active theme's.
 *
 * @throws If called outside a `<ThemeProvider>`.
 * @example

package/manifest/components/agent-surface.json

@@ -5,17 +5,18 @@
   "importPath": "@cueplusplus/ui/elements",
   "peerDependencies": [],
   "clientOnly": true,
-  "description": "The supersede island: one subtree, painted by a different set of values.\n\nRenders a plain `<div data-slot=\"agent-surface\" data-cue-skin=\"…\"\ndata-cue-fidelity=\"…\">` and publishes the same pair on React context. The attributes do the work —\n`@cueplusplus/ui/elements.css` re-declares, under them, the `--cue-*` tokens\nthe whole elements family reads, and custom properties inherit, so every\nelement inside repaints with no prop threading and no branch in any\ncomponent. The context exists for the one place that cannot see the DOM: an\noverlay portaled to `<body>` from inside the island, which\n{@link useCuePortalProps } stamps from the same values.\n\nTwo things this is not. It is not a theme — `data-theme`, `data-mode` and\n`data-density` are untouched, and a light app keeps a light island. And it is\nnot needed for cue mode: the elements were rewritten onto cue's tokens by the\nvendoring codemod, so `skin=\"cue\"` is what they already do. Reach for this to\nshow an element the way assistant-ui drew it, or to hand a chat panel back to\nupstream's design language inside a console that is otherwise cue's.\n\nWhat an `aui` island re-points is this family's own vocabulary rather than the\nwhole token contract: `--cue-busy`, `--cue-info`, `--cue-selection`,\n`--cue-focus`, `--cue-scrim` and every derived `*-soft` / `*-border` stay on\nthe console's theme. Nothing in the elements group reads them, so the island\nis complete for what it is for — but a *cue* component placed inside one (a\n`Chip tone=\"busy\"`, a `Toast`) paints half in each palette, and the\nderivations cannot be made to follow at all: they are `color-mix()` values\nresolved on the theme block and inherited as answers. `elements.css` carries\nthe full accounting beside the values themselves.\n\n`elements.css` is a consumer import: `@import \"@cueplusplus/ui/elements.css\";`\nafter the main stylesheet. Without it a `skin=\"aui\"` island simply stays in\ncue's palette.",
+  "description": "The supersede island: one subtree, painted by a different set of values.\n\nRenders a plain `<div data-slot=\"agent-surface\" data-cue-skin=\"…\"\ndata-cue-fidelity=\"…\">` and publishes the same pair on React context. The attributes do the work —\n`@cueplusplus/ui/elements.css` re-declares, under them, the `--cue-*` tokens\nthe whole elements family reads, and custom properties inherit, so every\nelement inside repaints with no prop threading and no branch in any\ncomponent. The context exists for the one place that cannot see the DOM: an\noverlay portaled to `<body>` from inside the island, which\n{@link useCuePortalProps } stamps from the same values.\n\nTwo things this is not. It is not a theme — `data-theme`, `data-mode` and\n`data-density` are untouched, and a light app keeps a light island. And it is\nnot needed for cue mode: the elements were rewritten onto cue's tokens by the\nvendoring codemod, so `skin=\"cue\"` is what they already do. Reach for this to\nshow an element the way assistant-ui drew it, to hand a chat panel back to\nupstream's design language inside a console that is otherwise cue's, or to\nwear Cursor's agent pane with `skin=\"cursor\"` rather than copying its palette.\n\nWhat an `aui` island re-points is this family's own vocabulary rather than the\nwhole token contract: `--cue-busy`, `--cue-info`, `--cue-selection`,\n`--cue-focus`, `--cue-scrim` and every derived `*-soft` / `*-border` stay on\nthe console's theme. Nothing in the elements group reads them, so the island\nis complete for what it is for — but a *cue* component placed inside one (a\n`Chip tone=\"busy\"`, a `Toast`) paints half in each palette, and the\nderivations cannot be made to follow at all: they are `color-mix()` values\nresolved on the theme block and inherited as answers. `elements.css` carries\nthe full accounting beside the values themselves.\n\n`elements.css` is a consumer import: `@import \"@cueplusplus/ui/elements.css\";`\nafter the main stylesheet. Without it a `skin=\"aui\"` island simply stays in\ncue's palette.",
   "props": [
     {
       "name": "skin",
-      "type": "\"cue\" | \"aui\"",
+      "type": "\"cursor\" | \"cue\" | \"aui\"",
       "required": false,
       "defaultValue": "cue",
-      "description": "Which value-set paints the subtree: `cue` (the default) or `aui`, which\ninstalls assistant-ui's own inks, grounds and hues.",
+      "description": "Which value-set paints the subtree: `cue` (the default); `aui`, which\ninstalls assistant-ui's own inks, grounds and hues; or `cursor`, Cursor's\nagent-pane values. Both halves of each follow `data-mode`.",
       "control": {
         "kind": "enum",
         "members": [
+          "cursor",
           "cue",
           "aui"
         ]
@@ -26,7 +27,7 @@
       "type": "\"upstream\" | \"cue-metrics\"",
       "required": false,
       "defaultValue": "cue-metrics",
-      "description": "How much a supersede island re-points: `cue-metrics` (the default, colour\nonly) or `upstream`, which also pins assistant-ui's radii, literal type\nsizes and spacing so the density ladder stops at the island edge.",
+      "description": "How much a supersede island re-points: `cue-metrics` (the default, colour\nonly) or `upstream`, which also pins the skin's own geometry. For `aui`\nthat is its radii, literal type sizes and spacing, so the density ladder\nstops at the island edge; for `cursor`, its corners and faces.",
       "control": {
         "kind": "enum",
         "members": [

package/manifest/components/approval-card.json

@@ -71,7 +71,7 @@
       "type": "(() => void)",
       "required": false,
       "defaultValue": null,
-      "description": "Called when the user clicks Always allow.",
+      "description": "Called when the user clicks Always allow. The button is drawn only when this is\nset, so a card never offers a standing grant nothing can honour.",
       "control": {
         "kind": "callback",
         "fixture": "callback.log"
@@ -87,10 +87,46 @@
         "kind": "callback",
         "fixture": "callback.log"
       }
+    },
+    {
+      "name": "options",
+      "type": "readonly ApprovalOption[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "The decisions the agent offered, one button each and in this order. Replaces the\ndefault Deny, Always allow and Allow once.",
+      "control": {
+        "kind": "array"
+      }
+    },
+    {
+      "name": "onDecide",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with an option's `id` when the user picks it.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
+    },
+    {
+      "name": "delivery",
+      "type": "\"failed\" | \"sending\" | \"sent\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Where the answer has got to: `sending`, `sent` or `failed`. While it is on its way\nand once it has arrived, the card offers nothing to press. `failed` offers the\ndecisions again. An outcome `state` wins over it.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "failed",
+          "sending",
+          "sent"
+        ]
+      }
     }
   ],
   "typeReferences": [
-    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"state\"\n  | \"command\"\n  | \"title\"\n  | \"subtitle\"\n  | \"onAllowOnce\"\n  | \"onAlwaysAllow\"\n  | \"onDeny\"\n> & {\n  /** Lifecycle of the card: request with actions, running spinner, done check, or denied. */\n  state: ApprovalState;\n  /** Command shown in the mono field the agent wants to run. */\n  command: string;\n  /** Headline naming the action that needs approval. */\n  title: string;\n  /** Supporting line under the title explaining the request. */\n  subtitle: string;\n  /** Called when the user clicks Allow once. */\n  onAllowOnce?: () => void;\n  /** Called when the user clicks Always allow. */\n  onAlwaysAllow?: () => void;\n  /** Called when the user clicks Deny. */\n  onDeny?: () => void;\n}"
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"state\"\n  | \"command\"\n  | \"title\"\n  | \"subtitle\"\n  | \"onAllowOnce\"\n  | \"onAlwaysAllow\"\n  | \"onDeny\"\n  | \"options\"\n  | \"onDecide\"\n  | \"delivery\"\n> & {\n  /** Lifecycle of the card: request with actions, running spinner, done check, or denied. */\n  state: ApprovalState;\n  /** Command shown in the mono field the agent wants to run. */\n  command: string;\n  /** Headline naming the action that needs approval. */\n  title: string;\n  /** Supporting line under the title explaining the request. */\n  subtitle: string;\n  /** Called when the user clicks Allow once. */\n  onAllowOnce?: () => void;\n  /**\n   * Called when the user clicks Always allow. The button is drawn only when this is\n   * set, so a card never offers a standing grant nothing can honour.\n   */\n  onAlwaysAllow?: () => void;\n  /** Called when the user clicks Deny. */\n  onDeny?: () => void;\n  /**\n   * The decisions the agent offered, one button each and in this order. Replaces the\n   * default Deny, Always allow and Allow once.\n   */\n  options?: readonly ApprovalOption[];\n  /** Called with an option's `id` when the user picks it. */\n  onDecide?: (id: string) => void;\n  /**\n   * Where the answer has got to: `sending`, `sent` or `failed`. While it is on its way\n   * and once it has arrived, the card offers nothing to press. `failed` offers the\n   * decisions again. An outcome `state` wins over it.\n   */\n  delivery?: RequestDelivery;\n}"
   ],
   "subcomponents": [],
   "parts": [],
@@ -122,14 +158,16 @@
   "jsonUrl": "/r/components/approval-card.json",
   "whenToUse": [
     "A command with side effects that must not run until someone says so.",
-    "Carrying that request through its whole lifecycle, since one card covers request, running, done and denied."
+    "Carrying that request through its whole lifecycle, since one card covers request, running, done and denied.",
+    "Drawing exactly the decisions the agent offered. Pass `options` with `onDecide`, and only those buttons appear."
   ],
   "whenNotToUse": [
     "A decision with no command behind it. `command` is required and is shown in a mono field.",
     "Reporting a command that failed. The four states are request, running, done and denied; a failure needs somewhere else to go."
   ],
   "commonMistakes": [
-    "Leaving `state=\"request\"` after the user has answered, so Allow and Deny stay pressable on a command that already ran.",
+    "Leaving `state=\"request\"` after the user has answered with no `delivery`, so Allow and Deny stay pressable. Set `delivery=\"sending\"` as the answer leaves.",
+    "Passing a no-op `onAlwaysAllow`. Always allow is drawn only when the handler is set, so set it only when a standing grant can be honoured.",
     "Folding the explanation into `title`. `title` names the action that needs approval; `subtitle` is the supporting line that explains it."
   ],
   "specimens": [
@@ -139,9 +177,9 @@
       "components": [
         "ApprovalCard"
       ],
-      "code": "<Specimens>\n  {APPROVALS.map((state) => (\n    <Specimen key={state} label={state} wide>\n      <ApprovalCard\n        state={approvals[state] ?? state}\n        command=\"cue unpatch --universe 4 --all\"\n        title=\"Unpatch universe 4\"\n        subtitle=\"48 channels stop responding until they are patched again.\"\n        onAllowOnce={settle(state, \"running\")}\n        onAlwaysAllow={settle(state, \"running\")}\n        onDeny={settle(state, \"denied\")}\n      />\n    </Specimen>\n  ))}\n</Specimens>",
-      "note": "Human in the loop for one action: the command in mono exactly as it will run, and three answers. The four specimens are the four states of the union, and the first one is live: answer it and it moves.",
-      "interaction": "Allow once and Always allow are separate answers, never one control with a modifier. Denying settles the card rather than hiding it."
+      "code": "<Specimens>\n  {APPROVALS.map((state) => (\n    <Specimen key={state} label={state} wide>\n      <ApprovalCard\n        state={approvals[state] ?? state}\n        command=\"cue unpatch --universe 4 --all\"\n        title=\"Unpatch universe 4\"\n        subtitle=\"48 channels stop responding until they are patched again.\"\n        onAllowOnce={settle(state, \"running\")}\n        onAlwaysAllow={settle(state, \"running\")}\n        onDeny={settle(state, \"denied\")}\n      />\n    </Specimen>\n  ))}\n  <Specimen label=\"the agent's own decisions\" wide>\n    <ApprovalCard\n      state=\"request\"\n      command=\"cue patch --universe 3 --fixtures 6\"\n      title=\"Patch universe 3\"\n      subtitle=\"The agent offered two answers, so the card draws two.\"\n      options={[\n        { id: \"reject\", label: \"Reject\" },\n        { id: \"approve\", label: \"Approve\", tone: \"primary\" },\n      ]}\n      onDecide={() => {}}\n    />\n  </Specimen>\n  <Specimen label=\"sending\" wide>\n    <ApprovalCard\n      state=\"request\"\n      delivery=\"sending\"\n      command=\"cue unpatch --universe 4 --all\"\n      title=\"Unpatch universe 4\"\n      subtitle=\"48 channels stop responding until they are patched again.\"\n    />\n  </Specimen>\n  <Specimen label=\"not sent\" wide>\n    <ApprovalCard\n      state=\"request\"\n      delivery=\"failed\"\n      command=\"cue unpatch --universe 4 --all\"\n      title=\"Unpatch universe 4\"\n      subtitle=\"48 channels stop responding until they are patched again.\"\n      onAllowOnce={() => {}}\n      onDeny={() => {}}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Human in the loop for one action: the command in mono exactly as it will run, and the answers the agent offered. The first four specimens are the four states of the union, and the first one is live: answer it and it moves. Then a card drawing the agent's own two decisions rather than the default three, and two deliveries: an answer on its way, which offers nothing to press, and one that did not arrive, which offers the answers again.",
+      "interaction": "Allow once and Always allow are separate answers, never one control with a modifier, and Always allow is drawn only when something can honour it. Denying settles the card rather than hiding it."
     }
   ]
 }