@cueplusplus/ui 0.20.1 → 0.21.0

package/dist/layout/_collapse.js

@@ -30,7 +30,7 @@ import { QUIET_INK } from "../system/_style-quiet-ink.js";
 * size and leading and the hover ground, and lane R6.Z its weight (falling back
 * through the label weight to the `400` it drew), the same way.
 */
-const collapseTriggerClasses = `group/collapse flex ${COLLAPSE_HEIGHT} w-full cursor-pointer items-center ${COLLAPSE_GAP} ${COLLAPSE_PAD} ${COLLAPSE_RADIUS} text-left ${CONTROL_FACE} ${COLLAPSE_SIZE} ${COLLAPSE_LEADING} ${QUIET_INK} ${COLLAPSE_WEIGHT} transition-colors duration-150 outline-none select-none ${COLLAPSE_HOVER_INK} ${COLLAPSE_HOVER_GROUND} ${COLLAPSE_FOCUS_RING} ${COLLAPSE_OPEN_INK} data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
+const collapseTriggerClasses = `group/collapse flex ${COLLAPSE_HEIGHT} w-full cursor-pointer items-center ${COLLAPSE_GAP} ${COLLAPSE_PAD} ${COLLAPSE_RADIUS} text-left ${CONTROL_FACE} ${COLLAPSE_SIZE} ${COLLAPSE_LEADING} ${QUIET_INK} ${COLLAPSE_WEIGHT} transition-colors duration-fast outline-none select-none ${COLLAPSE_HOVER_INK} ${COLLAPSE_HOVER_GROUND} ${COLLAPSE_FOCUS_RING} ${COLLAPSE_OPEN_INK} data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
 /** The label between the summary row's gutters — truncates, never wraps. */
 const collapseLabelClasses = "min-w-0 flex-1 truncate";
 /**
@@ -39,7 +39,7 @@ const collapseLabelClasses = "min-w-0 flex-1 truncate";
 * Its size and ink read the style set (round 6, lane R6.Z), falling back to
 * the `icon-sm` and `fg-subtle` it drew.
 */
-const collapseCaretClasses = `${COLLAPSE_CARET_SIZE} shrink-0 ${COLLAPSE_CARET_INK} ${COLLAPSE_CARET_OPACITY} transition-transform duration-150 ease-out group-data-[panel-open]/collapse:rotate-90 motion-reduce:transition-none`;
+const collapseCaretClasses = `${COLLAPSE_CARET_SIZE} shrink-0 ${COLLAPSE_CARET_INK} ${COLLAPSE_CARET_OPACITY} transition-transform duration-fast ease-out group-data-[panel-open]/collapse:rotate-90 motion-reduce:transition-none`;
 /**
 * Enter/exit for a panel, animated from the height Base UI measures for us.
 *
@@ -48,7 +48,7 @@ const collapseCaretClasses = `${COLLAPSE_CARET_SIZE} shrink-0 ${COLLAPSE_CARET_I
 * make the panel jump at both ends. The body lives one element in — see
 * {@link collapsePanelBodyClasses}.
 */
-const PANEL_MOTION = "overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0";
+const PANEL_MOTION = "overflow-hidden transition-[height] duration-fast ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0";
 /** {@link PANEL_MOTION} against the accordion's measured height. */
 const accordionPanelClasses = `${PANEL_MOTION} h-(--accordion-panel-height)`;
 /** {@link PANEL_MOTION} against the collapsible's measured height. */

package/dist/layout/bento.js

@@ -58,7 +58,7 @@ const MIN_HEIGHT_CLASSES = {
 /** The tile surface, shared by both variants so a link tile is not a second look. */
 const TILE_CLASS = "flex flex-col gap-(--cue-space-3) overflow-hidden rounded-surface border border-border bg-surface-1 p-(--cue-space-5)";
 /** What a link tile adds: the hover tint and the focus ring the whole surface takes. */
-const LINK_TILE_CLASS = `no-underline transition-colors duration-150 outline-none hover:bg-surface-2 ${FOCUS_RING_OFFSET_2}`;
+const LINK_TILE_CLASS = `no-underline transition-colors duration-fast outline-none hover:bg-surface-2 ${FOCUS_RING_OFFSET_2}`;
 /** The host elements a link tile may not contain, plus anything carrying `tabIndex`. */
 const INTERACTIVE_TAGS = /* @__PURE__ */ new Set([
 	"a",

package/dist/layout/breadcrumb.js

@@ -11,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * face, hover ink and the trail's gap read the style set (round 6, spec §11,
 * lane R6.Z: `_style-crumb.ts`), each falling back to what it drew.
 */
-const CRUMB_LINK_CLASSES = `cursor-pointer rounded-control border-0 bg-transparent p-0 ${CRUMB_FACE} ${CRUMB_SIZE} ${CRUMB_INK} no-underline transition-colors duration-150 outline-none ${CRUMB_HOVER_INK} ${FOCUS_RING_OFFSET_2}`;
+const CRUMB_LINK_CLASSES = `cursor-pointer rounded-control border-0 bg-transparent p-0 ${CRUMB_FACE} ${CRUMB_SIZE} ${CRUMB_INK} no-underline transition-colors duration-fast outline-none ${CRUMB_HOVER_INK} ${FOCUS_RING_OFFSET_2}`;
 /**
 * Where you are, and how to get back.
 *

package/dist/layout/carousel.js

@@ -203,7 +203,7 @@ const Carousel = {
 				"aria-label": dotLabel(index),
 				"aria-current": index === selectedIndex ? "true" : void 0,
 				onClick: () => scrollTo(index),
-				className: cn(`size-[0.25rem] cursor-pointer rounded-full border-0 p-0 transition-colors duration-150 outline-none ${FOCUS_RING_OFFSET_2} motion-reduce:transition-none`, index === selectedIndex ? "bg-accent" : "bg-border-strong")
+				className: cn(`size-[0.25rem] cursor-pointer rounded-full border-0 p-0 transition-colors duration-fast outline-none ${FOCUS_RING_OFFSET_2} motion-reduce:transition-none`, index === selectedIndex ? "bg-accent" : "bg-border-strong")
 			}, index))
 		});
 	})

package/dist/layout/collapsible.js

@@ -99,7 +99,7 @@ const Disclosure = React.forwardRef(function Disclosure({ className, label = "ad
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 			ref,
 			"data-slot": "disclosure-trigger",
-			className: cn(`group/disclosure inline-flex cursor-pointer items-center gap-(--cue-space-2) self-start border-0 bg-transparent p-0 py-(--cue-space-2) text-(length:--cue-text-label) ${DISCLOSURE_INK} ${DISCLOSURE_WEIGHT} transition-colors duration-150 outline-none select-none ${DISCLOSURE_HOVER_INK} ${FOCUS_RING_OFFSET_2}`, LABEL_FACE, LABEL_TRACKING, LABEL_CASE, className),
+			className: cn(`group/disclosure inline-flex cursor-pointer items-center gap-(--cue-space-2) self-start border-0 bg-transparent p-0 py-(--cue-space-2) text-(length:--cue-text-label) ${DISCLOSURE_INK} ${DISCLOSURE_WEIGHT} transition-colors duration-fast outline-none select-none ${DISCLOSURE_HOVER_INK} ${FOCUS_RING_OFFSET_2}`, LABEL_FACE, LABEL_TRACKING, LABEL_CASE, className),
 			...elementProps,
 			children: [
 				/* @__PURE__ */ jsx("span", {

package/dist/layout/index.d.ts

@@ -5,7 +5,9 @@ import { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProp
 import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./stack.js";
 import { Bento, BentoColumns, BentoMinHeight, BentoRootProps, BentoRowSpan, BentoRows, BentoSpan, BentoTileProps } from "./bento.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./breadcrumb.js";
+import { PaneSeam, PaneSeamEdge, PaneSeamOrientation, PaneSeamProps } from "./pane-seam.js";
 import { Reveal, RevealProps } from "./reveal.js";
+import { SplitPane, SplitPaneLayout, SplitPaneProps } from "./split-pane.js";
 import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps } from "./card.js";
 import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./collapsible.js";
 import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./description-list.js";
@@ -17,4 +19,4 @@ import { Pagination, PaginationEntry, PaginationProps, paginationRange } from ".
 import { Preview, PreviewAxis, PreviewPresentation, PreviewProps, PreviewResizeOptions } from "./preview.js";
 import { Stepper, StepperProps, StepperState, StepperStep } from "./stepper.js";
 import { Timeline, TimelineContentProps, TimelineItemProps, TimelineMarkerProps, TimelineRootProps } from "./timeline.js";
-export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Container, type ContainerProps, type ContainerWidth, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Disclosure, type DisclosureProps, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Reveal, type RevealProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, type SpaceStep, Stack, type StackAlign, type StackJustify, type StackProps, Stepper, type StepperProps, type StepperState, type StepperStep, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, itemVariants, linkVariants, paginationRange, useSidebar };
+export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Container, type ContainerProps, type ContainerWidth, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Disclosure, type DisclosureProps, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, PaneSeam, type PaneSeamEdge, type PaneSeamOrientation, type PaneSeamProps, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Reveal, type RevealProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, type SpaceStep, SplitPane, type SplitPaneLayout, type SplitPaneProps, Stack, type StackAlign, type StackJustify, type StackProps, Stepper, type StepperProps, type StepperState, type StepperStep, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/index.js

@@ -5,7 +5,9 @@ import { Accordion } from "./accordion.js";
 import { Stack } from "./stack.js";
 import { Bento } from "./bento.js";
 import { Breadcrumb } from "./breadcrumb.js";
+import { PaneSeam } from "./pane-seam.js";
 import { Reveal } from "./reveal.js";
+import { SplitPane } from "./split-pane.js";
 import { Card } from "./card.js";
 import { Collapsible, Disclosure } from "./collapsible.js";
 import { DescriptionList } from "./description-list.js";
@@ -16,4 +18,4 @@ import { Pagination, paginationRange } from "./pagination.js";
 import { Preview } from "./preview.js";
 import { Stepper } from "./stepper.js";
 import { Timeline } from "./timeline.js";
-export { Accordion, Bento, Breadcrumb, Card, Collapsible, Container, DescriptionList, Disclosure, Frames, Grid, Item, Link, Pagination, Preview, Reveal, Sidebar, Stack, Stepper, Timeline, itemVariants, linkVariants, paginationRange, useSidebar };
+export { Accordion, Bento, Breadcrumb, Card, Collapsible, Container, DescriptionList, Disclosure, Frames, Grid, Item, Link, Pagination, PaneSeam, Preview, Reveal, Sidebar, SplitPane, Stack, Stepper, Timeline, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/item.js

@@ -24,7 +24,7 @@ const itemVariants = cva("flex w-full items-center gap-(--cue-space-4) rounded-c
 			soft: "bg-surface-2"
 		},
 		interactive: {
-			true: `cursor-pointer transition-colors duration-150 outline-none hover:bg-surface-2 ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-40`,
+			true: `cursor-pointer transition-colors duration-fast outline-none hover:bg-surface-2 ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-40`,
 			false: ""
 		}
 	},

package/dist/layout/link.js

@@ -38,7 +38,7 @@ import { useRender } from "@base-ui/react/use-render";
 * @example
 * <a className={linkVariants({ variant: "underline" })} href="/docs">Docs</a>
 */
-const linkVariants = cva(`cursor-pointer rounded-control ${CONTROL_FACE} ${LINK_WEIGHT} transition-colors duration-150 outline-none ${HOVER_INK} ${LINK_FOCUS_RING}`, {
+const linkVariants = cva(`cursor-pointer rounded-control ${CONTROL_FACE} ${LINK_WEIGHT} transition-colors duration-fast outline-none ${HOVER_INK} ${LINK_FOCUS_RING}`, {
 	variants: { variant: {
 		plain: `no-underline ${LINK_INK}`,
 		underline: `underline ${INLINE_LINK_INK} ${LINK_RULE} ${LINK_OFFSET} ${HOVER_RULE}`

package/dist/layout/pagination.js

@@ -62,7 +62,7 @@ function paginationRange(page, pageCount, siblingCount = 1) {
 		return typeof before === "number" && typeof after === "number" && after - before === 2 ? before + 1 : entry;
 	});
 }
-const PAGE_BUTTON_CLASSES = `inline-flex h-control-sm min-w-control-sm cursor-pointer items-center justify-center rounded-control border-0 bg-transparent px-(--cue-space-2) ${CONTROL_FACE} font-[number:var(--cue-style-control-weight,inherit)] text-(length:--cue-text-ui) tabular-nums ${GHOST_INK} transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET}`;
+const PAGE_BUTTON_CLASSES = `inline-flex h-control-sm min-w-control-sm cursor-pointer items-center justify-center rounded-control border-0 bg-transparent px-(--cue-space-2) ${CONTROL_FACE} font-[number:var(--cue-style-control-weight,inherit)] text-(length:--cue-text-ui) tabular-nums ${GHOST_INK} transition-colors duration-fast outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET}`;
 /**
 * The pager: previous, a window of page numbers, next.
 *

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

@@ -0,0 +1,75 @@
+import * as React from "react";
+//#region src/layout/pane-seam.d.ts
+/** Which way the seam runs: between side-by-side panes, or between stacked ones. */
+type PaneSeamOrientation = "vertical" | "horizontal";
+/** Which side of the seam the pane it resizes sits on. */
+type PaneSeamEdge = "start" | "end";
+interface PaneSeamProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children" | "defaultValue" | "onChange"> {
+  /**
+   * The name a screen reader lists the seam by: `Resize the inspector`. Required,
+   * because a separator nobody can name is one a keyboard user cannot find.
+   */
+  label: string;
+  /** The pane's size in pixels, when the caller holds it. */
+  value?: number;
+  /** The size to start from when nothing controls it. Defaults to `min`. */
+  defaultValue?: number;
+  /** Called with every new size, already clamped to `min` and `max`. */
+  onValueChange?: (value: number) => void;
+  /** The smallest the pane may become, in pixels. */
+  min: number;
+  /** The largest the pane may become, in pixels. */
+  max: number;
+  /** How far one arrow press moves the seam, in pixels. Defaults to 16. */
+  step?: number;
+  /** How far Shift with an arrow moves it, in pixels. Defaults to 64. */
+  largeStep?: number;
+  /**
+   * `vertical`, the default, divides side-by-side panes and resizes a width;
+   * `horizontal` divides stacked panes and resizes a height.
+   */
+  orientation?: PaneSeamOrientation;
+  /**
+   * Where the pane sits: `start`, the default, before the seam (left, or top),
+   * or `end`, after it. Moving the seam away from the pane grows it. A vertical
+   * seam reads the document's direction, so `start` is the right-hand pane
+   * under `dir="rtl"`.
+   */
+  edge?: PaneSeamEdge;
+}
+/**
+ * One accessible seam that resizes one pane, with no dependency (cue-ui-55).
+ *
+ * `Resizable` divides a frame between panel groups on `react-resizable-panels`,
+ * an optional peer. Most consoles need one thing less: a side pane whose edge a
+ * reader can drag, and move from the keyboard. This is that edge, and nothing
+ * else. It owns a number, not a layout: apply `value` to the pane's width (or
+ * height) and the seam supplies the rest.
+ *
+ * The rest is the part a hand-written separator forgets. It is a focusable
+ * `role="separator"` that says its size and its bounds (`aria-valuenow`,
+ * `-valuemin`, `-valuemax`), so the width is spoken as well as draggable. The
+ * arrows move it by `step`, Shift by `largeStep`, and Home and End jump to the
+ * bounds. Every value is clamped, so the pane can never squeeze its neighbour
+ * out of use.
+ *
+ * @example
+ * const [width, setWidth] = React.useState(320);
+ * const inspector = { width };
+ *
+ * <div className="flex">
+ *   <main className="min-w-0 flex-1">…</main>
+ *   <PaneSeam
+ *     label="Resize the inspector"
+ *     edge="end"
+ *     min={240}
+ *     max={640}
+ *     value={width}
+ *     onValueChange={setWidth}
+ *   />
+ *   <aside style={inspector}>…</aside>
+ * </div>
+ */
+declare const PaneSeam: React.ForwardRefExoticComponent<PaneSeamProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { PaneSeam, PaneSeamEdge, PaneSeamOrientation, PaneSeamProps };

package/dist/layout/pane-seam.js

@@ -0,0 +1,127 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/pane-seam.tsx
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+* One accessible seam that resizes one pane, with no dependency (cue-ui-55).
+*
+* `Resizable` divides a frame between panel groups on `react-resizable-panels`,
+* an optional peer. Most consoles need one thing less: a side pane whose edge a
+* reader can drag, and move from the keyboard. This is that edge, and nothing
+* else. It owns a number, not a layout: apply `value` to the pane's width (or
+* height) and the seam supplies the rest.
+*
+* The rest is the part a hand-written separator forgets. It is a focusable
+* `role="separator"` that says its size and its bounds (`aria-valuenow`,
+* `-valuemin`, `-valuemax`), so the width is spoken as well as draggable. The
+* arrows move it by `step`, Shift by `largeStep`, and Home and End jump to the
+* bounds. Every value is clamped, so the pane can never squeeze its neighbour
+* out of use.
+*
+* @example
+* const [width, setWidth] = React.useState(320);
+* const inspector = { width };
+*
+* <div className="flex">
+*   <main className="min-w-0 flex-1">…</main>
+*   <PaneSeam
+*     label="Resize the inspector"
+*     edge="end"
+*     min={240}
+*     max={640}
+*     value={width}
+*     onValueChange={setWidth}
+*   />
+*   <aside style={inspector}>…</aside>
+* </div>
+*/
+const PaneSeam = React.forwardRef(function PaneSeam({ label, value, defaultValue, onValueChange, min, max, step = 16, largeStep = 64, orientation = "vertical", edge = "start", className, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...elementProps }, ref) {
+	const [own, setOwn] = React.useState(() => clamp(defaultValue ?? min, min, max));
+	const current = clamp(value ?? own, min, max);
+	const drag = React.useRef(null);
+	const [dragging, setDragging] = React.useState(false);
+	const commit = (next) => {
+		const clamped = clamp(Math.round(next), min, max);
+		if (clamped === current) return;
+		if (value === void 0) setOwn(clamped);
+		onValueChange?.(clamped);
+	};
+	/**
+	* Which physical direction grows the pane: +1 is right (or down), -1 left (or
+	* up). Read at the moment of input, from the nearest `dir`, so a seam moved
+	* into a right-to-left subtree follows it.
+	*/
+	const growth = (element) => {
+		const away = edge === "start" ? 1 : -1;
+		if (orientation === "horizontal") return away;
+		return element.closest("[dir]")?.getAttribute("dir") === "rtl" ? -away : away;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "separator",
+		tabIndex: 0,
+		"aria-label": label,
+		"aria-orientation": orientation,
+		"aria-valuenow": current,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"data-slot": "pane-seam",
+		"data-orientation": orientation,
+		"data-edge": edge,
+		"data-dragging": dragging || void 0,
+		className: cn(`relative shrink-0 touch-none bg-border transition-colors duration-fast outline-none select-none hover:bg-accent data-dragging:bg-accent focus-visible:bg-accent ${FOCUS_RING_INSET_2} motion-reduce:transition-none`, orientation === "vertical" ? "min-h-8 w-[0.25rem] cursor-col-resize self-stretch" : "h-[0.25rem] w-full cursor-row-resize", className),
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			const by = event.shiftKey ? largeStep : step;
+			const forward = orientation === "vertical" ? "ArrowRight" : "ArrowDown";
+			const back = orientation === "vertical" ? "ArrowLeft" : "ArrowUp";
+			let next;
+			if (event.key === forward) next = current + by * growth(event.currentTarget);
+			else if (event.key === back) next = current - by * growth(event.currentTarget);
+			else if (event.key === "Home") next = min;
+			else if (event.key === "End") next = max;
+			if (next === void 0) return;
+			event.preventDefault();
+			commit(next);
+		},
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (event.defaultPrevented || event.button !== 0) return;
+			event.preventDefault();
+			event.currentTarget.setPointerCapture?.(event.pointerId);
+			drag.current = {
+				pointer: event.pointerId,
+				from: orientation === "vertical" ? event.clientX : event.clientY,
+				size: current,
+				grow: growth(event.currentTarget)
+			};
+			setDragging(true);
+		},
+		onPointerMove: (event) => {
+			onPointerMove?.(event);
+			const held = drag.current;
+			if (held === null || held.pointer !== event.pointerId) return;
+			const at = orientation === "vertical" ? event.clientX : event.clientY;
+			commit(held.size + (at - held.from) * held.grow);
+		},
+		onPointerUp: (event) => {
+			onPointerUp?.(event);
+			if (drag.current?.pointer !== event.pointerId) return;
+			drag.current = null;
+			setDragging(false);
+			event.currentTarget.releasePointerCapture?.(event.pointerId);
+		},
+		onPointerCancel: (event) => {
+			onPointerCancel?.(event);
+			drag.current = null;
+			setDragging(false);
+		},
+		...elementProps
+	});
+});
+//#endregion
+export { PaneSeam };

package/dist/layout/resizable.d.ts

@@ -20,7 +20,8 @@ interface ResizableHandleProps extends React.ComponentProps<typeof Separator> {
  *
  * `react-resizable-panels` is an **optional peer**: import this from
  * `@cueplusplus/ui/layout/resizable`, never from the core barrel, so an app
- * with no split view never installs one.
+ * with no split view never installs one. For one seam beside one pane,
+ * `PaneSeam` in the core barrel needs no peer at all.
  *
  * @example
  * <Resizable.Group orientation="horizontal">

package/dist/layout/resizable.js

@@ -18,7 +18,8 @@ const ResizableOrientationContext = React.createContext("horizontal");
 *
 * `react-resizable-panels` is an **optional peer**: import this from
 * `@cueplusplus/ui/layout/resizable`, never from the core barrel, so an app
-* with no split view never installs one.
+* with no split view never installs one. For one seam beside one pane,
+* `PaneSeam` in the core barrel needs no peer at all.
 *
 * @example
 * <Resizable.Group orientation="horizontal">
@@ -55,7 +56,7 @@ const Resizable = {
 		return /* @__PURE__ */ jsxs(Separator, {
 			elementRef: elementRef ?? ref,
 			"data-slot": "resizable-handle",
-			className: cn(`relative flex items-center justify-center bg-border transition-colors duration-150 outline-none data-[separator=hover]:bg-accent data-[separator=active]:bg-accent data-[separator=focus]:bg-accent ${FOCUS_RING_INSET_2} data-[separator=disabled]:opacity-40 motion-reduce:transition-none`, orientation === "vertical" ? "h-[0.25rem] w-full" : "w-[0.25rem] self-stretch", className),
+			className: cn(`relative flex items-center justify-center bg-border transition-colors duration-fast outline-none data-[separator=hover]:bg-accent data-[separator=active]:bg-accent data-[separator=focus]:bg-accent ${FOCUS_RING_INSET_2} data-[separator=disabled]:opacity-40 motion-reduce:transition-none`, orientation === "vertical" ? "h-[0.25rem] w-full" : "w-[0.25rem] self-stretch", className),
 			...elementProps,
 			children: [withGrip ? /* @__PURE__ */ jsx("span", {
 				"data-slot": "resizable-grip",

package/dist/layout/sidebar.js

@@ -100,7 +100,7 @@ const SidebarRoot = React.forwardRef(function SidebarRoot({ className, landmark
 			ref,
 			"data-slot": "sidebar",
 			"data-collapsed": collapsed ? "" : void 0,
-			className: cn("group/sidebar relative flex h-full min-h-0 shrink-0 flex-col border-r border-border bg-surface-1 transition-[width] duration-150 ease-out motion-reduce:transition-none", "[counter-reset:cue-rail]", className),
+			className: cn("group/sidebar relative flex h-full min-h-0 shrink-0 flex-col border-r border-border bg-surface-1 transition-[width] duration-fast ease-out motion-reduce:transition-none", "[counter-reset:cue-rail]", className),
 			style: {
 				width: collapsed ? collapsedWidth : width,
 				...style
@@ -161,7 +161,7 @@ const Sidebar = {
 				"data-slot": "sidebar-item",
 				"data-active": active ? "" : void 0,
 				"aria-current": active ? "page" : void 0,
-				className: cn(`relative flex h-control-md w-full cursor-pointer items-center gap-(--cue-space-3) rounded-control border-0 bg-transparent px-(--cue-space-3) text-left font-mono text-(length:--cue-text-ui) no-underline transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} ${NAV_ITEM} ${RAIL_COUNTER} disabled:pointer-events-none disabled:opacity-40`, className),
+				className: cn(`relative flex h-control-md w-full cursor-pointer items-center gap-(--cue-space-3) rounded-control border-0 bg-transparent px-(--cue-space-3) text-left font-mono text-(length:--cue-text-ui) no-underline transition-colors duration-fast outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} ${NAV_ITEM} ${RAIL_COUNTER} disabled:pointer-events-none disabled:opacity-40`, className),
 				children: /* @__PURE__ */ jsxs(Fragment, { children: [
 					Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
 						"aria-hidden": "true",
@@ -193,7 +193,7 @@ const Sidebar = {
 				onClick?.(event);
 				if (!event.defaultPrevented) toggle();
 			},
-			className: cn(`absolute inset-y-0 right-0 w-[0.25rem] translate-x-1/2 cursor-ew-resize border-0 bg-transparent p-0 transition-colors duration-150 outline-none hover:bg-accent ${FOCUS_RING_INSET_2} motion-reduce:transition-none`, className),
+			className: cn(`absolute inset-y-0 right-0 w-[0.25rem] translate-x-1/2 cursor-ew-resize border-0 bg-transparent p-0 transition-colors duration-fast outline-none hover:bg-accent ${FOCUS_RING_INSET_2} motion-reduce:transition-none`, className),
 			...elementProps
 		});
 	})

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`.
 *