@cueplusplus/ui 0.20.1 → 0.22.0

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

@@ -18,7 +18,7 @@
  * @example
  * <Popover.Popup className={cn(overlaySurfaceClasses, className)} />
  */
-declare const overlaySurfaceClasses = "rounded-overlay border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-overlay-ground,var(--cue-surface-2)),var(--cue-style-overlay-ground,var(--cue-surface-2))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-overlay-from,var(--cue-border-overlay)),var(--cue-paint-stroke-overlay-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box] shadow-[0_0_0_var(--cue-paint-rim-width)_var(--cue-paint-shade-hairline,transparent),0_calc(2px*var(--cue-paint-shadow-scale))_calc(6px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-near,transparent),0_calc(8px*var(--cue-paint-shadow-scale))_calc(24px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-far,rgba(0,0,0,0.4)),inset_0_1px_0_0_var(--cue-paint-sheen-ink,transparent)]";
+declare const overlaySurfaceClasses = "rounded-overlay border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-overlay-ground,var(--cue-surface-2)),var(--cue-style-overlay-ground,var(--cue-surface-2))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-overlay-from,var(--cue-border-overlay)),var(--cue-paint-stroke-overlay-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box] [--cue-ground:var(--cue-style-overlay-ground,var(--cue-surface-2))] shadow-[0_0_0_var(--cue-paint-rim-width)_var(--cue-paint-shade-hairline,transparent),0_calc(2px*var(--cue-paint-shadow-scale))_calc(6px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-near,transparent),0_calc(8px*var(--cue-paint-shadow-scale))_calc(24px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-far,rgba(0,0,0,0.4)),inset_0_1px_0_0_var(--cue-paint-sheen-ink,transparent)]";
 /**
  * The full-viewport dim behind a modal surface. `--cue-scrim` is theme-owned —
  * dusk and hivehub tune their own — so the value is never hard-coded here.
@@ -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?: "danger" | "info" | "warn" | "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

@@ -133,3 +133,55 @@
     clip-path: none;
   }
 }
+
+/* A container's ground, for the relative field fill (spec 2026-10-08-field-ground R3).
+ *
+ * Every fill utility a container can paint with says what it painted, as
+ * `--cue-ground`, and a control inside `[data-field-ground="relative"]` mixes
+ * its fill from the nearest one (`system/_field-ground.ts`). Declaring it is
+ * free: nothing outside the opt-in reads it. In `base` so a consumer's own
+ * utility or inline `--cue-ground` wins; a container painted any other way — a
+ * gradient, an image, a translucent fill — sets `--cue-ground` itself. */
+@layer base {
+  .bg-bg {
+    --cue-ground: var(--cue-bg);
+  }
+  .bg-sunken {
+    --cue-ground: var(--cue-sunken);
+  }
+  .bg-surface-1 {
+    --cue-ground: var(--cue-surface-1);
+  }
+  .bg-surface-2 {
+    --cue-ground: var(--cue-surface-2);
+  }
+  .bg-surface-3 {
+    --cue-ground: var(--cue-surface-3);
+  }
+}
+
+/* The relative field fill (spec 2026-10-08-field-ground R3), and opt-in.
+ *
+ * Nothing happens until an ancestor carries `data-field-ground="relative"`.
+ * Inside one, a field that wears `field-ground` — every control the recessed
+ * chassis draws does — re-declares its OWN `--cue-sunken` one step off the
+ * nearest container's `--cue-ground` (declared above, and by the raised and
+ * overlay strokes), toward its text colour: lighter on a dark ground, deeper on
+ * a light one, 6% unless `--cue-style-field-step` says otherwise.
+ * `--cue-style-field-toward` changes the direction.
+ *
+ * On the field, never on the ancestor: a custom property resolves its `var()`s
+ * where it is declared, so declared on the opt-in element it would freeze at
+ * that element's ground and every field below — in a card, in a popover —
+ * would fill as if it stood on the page.
+ *
+ * Re-declaring `sunken` rather than adding a term to the field's fill keeps
+ * the chain the stroke already reads, `var(--cue-style-field-fill,
+ * var(--cue-sunken))`: a named fill still wins, a disabled field follows, and
+ * no field's class grows by more than this utility's name. A consumer's own
+ * field can wear `field-ground` too. */
+@utility field-ground {
+  :where([data-field-ground="relative"]) & {
+    --cue-sunken: color-mix(in oklab, var(--cue-ground, var(--cue-bg)), var(--cue-style-field-toward, var(--cue-fg)) var(--cue-style-field-step, 6%));
+  }
+}

package/dist/system/_paint-stroke-sunken.js

@@ -12,8 +12,28 @@
 * The recipe itself, and why its off state is a flat gradient rather than
 * `none`, is documented once in `./_paint`.
 *
+* **The fill is a name first** (spec 2026-10-08-field-ground R2):
+* `--cue-style-field-fill`, declared on no `:root` for the reason
+* `_style-input-face.ts` gives, so with nothing set this resolves to exactly
+* the `--cue-sunken` it always painted. A style set, or any subtree, names it.
+*
 * @internal Not part of the public API.
 */
-const STROKE_SUNKEN = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-sunken),var(--cue-sunken)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box]";
+const STROKE_SUNKEN = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-field-fill,var(--cue-sunken)),var(--cue-style-field-fill,var(--cue-sunken))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box]";
+/**
+* The same two layers when the field is disabled: the fill read through
+* `style-disabled-fill`, then the field's own fill, then `sunken`, on
+* `:disabled` and on `[data-disabled]`.
+*
+* **Here, beside the resting recipe, and not in `_style-disabled.ts`** with the
+* other disabled recipes (spec 2026-10-08-field-ground R2). Docgen credits every
+* `--cue-*` in a module to each component that imports it, and the button, the
+* checkbox and the switch import that module for their own disabled recipes:
+* left there, all of them would claim a field's fill they never paint. This
+* module is imported by the field chassis alone, so the credit is exact, and
+* the library ships one file per module, so a module of its own would have
+* cost every page that draws a field one more request.
+*/
+const FIELD_DISABLED_FILL = "disabled:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-style-field-fill,var(--cue-sunken))),var(--cue-style-disabled-fill,var(--cue-style-field-fill,var(--cue-sunken)))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] data-[disabled]:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-style-field-fill,var(--cue-sunken))),var(--cue-style-disabled-fill,var(--cue-style-field-fill,var(--cue-sunken)))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))]";
 //#endregion
-export { STROKE_SUNKEN };
+export { FIELD_DISABLED_FILL, STROKE_SUNKEN };

package/dist/system/_paint-stroke-surface-1.js

@@ -12,8 +12,12 @@
 * The recipe itself, and why its off state is a flat gradient rather than
 * `none`, is documented once in `./_paint`.
 *
+* It also says what it painted, as `--cue-ground`, for the relative field fill
+* (spec 2026-10-08-field-ground R3): a field inside `[data-field-ground="relative"]`
+* takes its fill one step off the nearest container's ground.
+*
 * @internal Not part of the public API.
 */
-const STROKE_SURFACE_1 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-surface-1),var(--cue-surface-1)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-raised-from,var(--cue-paint-stroke-from,var(--cue-border))),var(--cue-paint-stroke-raised-to,var(--cue-paint-stroke-to,var(--cue-border))))] bg-origin-border [background-clip:padding-box,border-box]";
+const STROKE_SURFACE_1 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-surface-1),var(--cue-surface-1)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-raised-from,var(--cue-paint-stroke-from,var(--cue-border))),var(--cue-paint-stroke-raised-to,var(--cue-paint-stroke-to,var(--cue-border))))] bg-origin-border [background-clip:padding-box,border-box] [--cue-ground:var(--cue-surface-1)]";
 //#endregion
 export { STROKE_SURFACE_1 };

package/dist/system/_paint-stroke-surface-2.js

@@ -33,8 +33,12 @@
 * The recipe itself, and why its off state is a flat gradient rather than
 * `none`, is documented once in `./_paint`.
 *
+* It also says what it painted, as `--cue-ground`, for the relative field fill
+* (spec 2026-10-08-field-ground R3): a field inside `[data-field-ground="relative"]`
+* takes its fill one step off the nearest container's ground.
+*
 * @internal Not part of the public API.
 */
-const STROKE_SURFACE_2 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-overlay-ground,var(--cue-surface-2)),var(--cue-style-overlay-ground,var(--cue-surface-2))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-overlay-from,var(--cue-border-overlay)),var(--cue-paint-stroke-overlay-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box]";
+const STROKE_SURFACE_2 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-overlay-ground,var(--cue-surface-2)),var(--cue-style-overlay-ground,var(--cue-surface-2))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-overlay-from,var(--cue-border-overlay)),var(--cue-paint-stroke-overlay-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box] [--cue-ground:var(--cue-style-overlay-ground,var(--cue-surface-2))]";
 //#endregion
 export { STROKE_SURFACE_2 };

package/dist/system/_style-disabled.js

@@ -33,12 +33,6 @@ const LABEL_DISABLED_OPACITY = "has-[[data-disabled]]:opacity-[var(--cue-style-d
 /** A disabled control label's ink, falling back to the label ink it drew (`LABEL_INK`). */
 const LABEL_DISABLED_INK = "has-[[data-disabled]]:text-[color:var(--cue-style-disabled-ink,var(--cue-style-label-ink,var(--cue-fg-muted)))]";
 /**
-* The field chassis's fill when disabled: its own two layers (`STROKE_SUNKEN`),
-* with the fill layer's `sunken` read through `style-disabled-fill`, on
-* `:disabled` and on `[data-disabled]`.
-*/
-const FIELD_DISABLED_FILL = "disabled:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,var(--cue-sunken))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] data-[disabled]:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,var(--cue-sunken))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))]";
-/**
 * The button tones' fill and ink when disabled, each falling back to the tone's own resting fill and ink.
 * The two transparent tones keep their ground and take an edge instead (`style-disabled-edge`, falling
 * back to the edge each drew): stripe.com's disabled icon button stays on its ground and draws a 1px rim
@@ -67,4 +61,4 @@ const CHECK_DISABLED = "data-[disabled]:bg-[color:var(--cue-style-disabled-fill,
 /** The switch's track when disabled, unchecked and checked, each state keeping its own fallback. */
 const SWITCH_DISABLED_TRACK = "data-[disabled]:bg-[color:var(--cue-style-disabled-fill,var(--cue-surface-3))] data-[disabled]:data-[checked]:bg-[color:var(--cue-style-disabled-fill,var(--cue-accent))]";
 //#endregion
-export { CHECK_DISABLED, DATA_DISABLED_OPACITY, DISABLED_OPACITY, DISABLED_TONES, FIELD_DISABLED_FILL, LABEL_DISABLED_INK, LABEL_DISABLED_OPACITY, SWITCH_DISABLED_TRACK };
+export { CHECK_DISABLED, DATA_DISABLED_OPACITY, DISABLED_OPACITY, DISABLED_TONES, LABEL_DISABLED_INK, LABEL_DISABLED_OPACITY, SWITCH_DISABLED_TRACK };

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/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/alert-dialog.json

@@ -172,6 +172,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",