@cueplusplus/ui 0.13.0

package/dist/chrome/title-bar.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+//#region src/chrome/title-bar.d.ts
+interface TitleBarProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * Make the bar a window drag handle.
+   *
+   * Emits `data-tauri-drag-region` (Tauri reads the attribute) *and* the
+   * `app-region: drag` CSS property (Electron and Chromium read that), because
+   * the same component ships into both shells and neither one recognises the
+   * other's contract. The interactive clusters are carved back out with
+   * `app-region: no-drag`, or the buttons in the bar would only ever move the
+   * window instead of firing. Both halves of that contract live in
+   * `./_drag.ts`, which `AppShell.Bar` emits from as well — the two bars are
+   * draggable the same way or they are not draggable the same way.
+   *
+   * Double-click-to-maximise is not wired here. Tauri's own injected script
+   * already provides it on any drag region, cancel-by-dragging-away on macOS
+   * included; Electron provides nothing, and an Electron app has to listen for
+   * `dblclick` and toggle the window itself. Neither is a decision a component
+   * in a design system can make on the window's behalf.
+   *
+   * Defaults to `false`.
+   */
+  platformDrag?: boolean;
+  /**
+   * Centre slot: the document name. Absolutely centred on the *bar*, not
+   * between the two clusters, so it does not shift sideways when a button
+   * appears on one side. `pointer-events-none`, so the dead space around a
+   * short title stays draggable.
+   */
+  center?: React.ReactNode;
+  /** Trailing slot: window controls, connection state, an overflow menu. */
+  actions?: React.ReactNode;
+  /** Leading slot: the app mark, a back button, the file menu. */
+  children?: React.ReactNode;
+}
+/**
+ * The window's own bar: app mark left, document name centred, controls right.
+ *
+ * @example
+ * <TitleBar platformDrag center="untitled.cue" actions={<WindowControls />}>
+ *   <Eyebrow>CUE++</Eyebrow>
+ * </TitleBar>
+ */
+declare const TitleBar: React.ForwardRefExoticComponent<TitleBarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TitleBar, TitleBarProps };

package/dist/chrome/title-bar.js

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { DRAG_CLASSES, NO_DRAG_CLASSES } from "./_drag.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/title-bar.tsx
+/**
+* The window's own bar: app mark left, document name centred, controls right.
+*
+* @example
+* <TitleBar platformDrag center="untitled.cue" actions={<WindowControls />}>
+*   <Eyebrow>CUE++</Eyebrow>
+* </TitleBar>
+*/
+const TitleBar = React.forwardRef(function TitleBar({ className, platformDrag = false, center, actions, children, ...elementProps }, ref) {
+	const clusterClasses = cn("flex min-w-0 items-center gap-(--cue-space-2)", platformDrag ? NO_DRAG_CLASSES : void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "title-bar",
+		"data-tauri-drag-region": platformDrag ? "" : void 0,
+		className: cn("relative flex h-(--cue-chrome-titlebar) w-full shrink-0 items-center justify-between gap-(--cue-space-3) border-b border-border bg-surface-1 px-(--cue-pad-row-x) select-none", platformDrag ? DRAG_CLASSES : void 0, className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "title-bar-leading",
+				className: clusterClasses,
+				children
+			}),
+			center === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "title-bar-center",
+				className: "pointer-events-none absolute left-1/2 flex -translate-x-1/2 items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg-muted",
+				children: center
+			}),
+			actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "title-bar-actions",
+				className: cn(clusterClasses, "shrink-0"),
+				children: actions
+			})
+		]
+	});
+});
+//#endregion
+export { TitleBar };

package/dist/chrome/toolbar.d.ts

@@ -0,0 +1,68 @@
+import { BarOverflow } from "./_edge-scroller.js";
+import * as React from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/chrome/toolbar.d.ts
+interface ToolbarRootProps extends Omit<Toolbar.Root.Props, "className"> {
+  /** Extra classes for the bar. */
+  className?: string;
+  /**
+   * What the bar does when its controls do not fit. Defaults to `"scroll"`.
+   *
+   * `"scroll"` is the library's one overflow behaviour (see
+   * `./_edge-scroller` for why it is scrolling rather than wrapping or a "more"
+   * menu): the bar keeps its single chrome-rung height, the controls scroll
+   * inside it, the overflowing edge is faded and a pager chevron appears there.
+   * A bar whose controls all fit renders exactly as it did before — no mask, no
+   * chevrons, no compositing layer.
+   *
+   * `"clip"` restores the old behaviour and adds no wrapper element, for a bar
+   * that is already inside something which scrolls.
+   *
+   * A vertical toolbar ignores this: the affordance is horizontal, and a
+   * vertical bar overflows on the axis this does not measure.
+   */
+  overflow?: BarOverflow;
+  /** Accessible name for the chevron that reveals controls off the leading edge. */
+  previousLabel?: string;
+  /** Accessible name for the chevron that reveals controls off the trailing edge. */
+  nextLabel?: string;
+}
+interface ToolbarButtonProps extends Omit<Toolbar.Button.Props, "className"> {
+  /** Extra classes for the button. */
+  className?: string;
+  /** Optional leading icon (e.g. a lucide icon), drawn `aria-hidden`. */
+  icon?: React.ElementType;
+}
+interface ToolbarGroupProps extends Omit<Toolbar.Group.Props, "className"> {
+  /** Extra classes for the group. */
+  className?: string;
+}
+interface ToolbarSeparatorProps extends Omit<Toolbar.Separator.Props, "className"> {
+  /** Extra classes for the rule. */
+  className?: string;
+}
+/**
+ * The strip of controls across the top of a view.
+ *
+ * Wraps Base UI's `Toolbar`, so the whole bar is one tab stop with arrow-key
+ * roving focus inside it — which is the entire point of the ARIA toolbar
+ * pattern and the reason not to hand-roll this out of a flex row of buttons.
+ *
+ * @example
+ * <Toolbar.Root aria-label="Cue actions">
+ *   <Toolbar.Group aria-label="Playback">
+ *     <Toolbar.Button icon={Play}>Go</Toolbar.Button>
+ *     <Toolbar.Button icon={Square}>Stop</Toolbar.Button>
+ *   </Toolbar.Group>
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button icon={Save}>Save</Toolbar.Button>
+ * </Toolbar.Root>
+ */
+declare const Toolbar$1: {
+  Root: React.ForwardRefExoticComponent<Omit<ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Button: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Group: React.ForwardRefExoticComponent<Omit<ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Separator: React.ForwardRefExoticComponent<Omit<ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Toolbar$1 as Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps };

package/dist/chrome/toolbar.js

@@ -0,0 +1,83 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "../lib/compose.js";
+import { EDGE_SCROLLER_CLASSES, EdgeChevrons, useEdgeScroll } from "./_edge-scroller.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toolbar } from "@base-ui/react/toolbar";
+/**
+* The strip of controls across the top of a view.
+*
+* Wraps Base UI's `Toolbar`, so the whole bar is one tab stop with arrow-key
+* roving focus inside it — which is the entire point of the ARIA toolbar
+* pattern and the reason not to hand-roll this out of a flex row of buttons.
+*
+* @example
+* <Toolbar.Root aria-label="Cue actions">
+*   <Toolbar.Group aria-label="Playback">
+*     <Toolbar.Button icon={Play}>Go</Toolbar.Button>
+*     <Toolbar.Button icon={Square}>Stop</Toolbar.Button>
+*   </Toolbar.Group>
+*   <Toolbar.Separator />
+*   <Toolbar.Button icon={Save}>Save</Toolbar.Button>
+* </Toolbar.Root>
+*/
+const Toolbar$1 = {
+	Root: React.forwardRef(function ToolbarRoot({ className, overflow = "scroll", previousLabel = "Show earlier controls", nextLabel = "Show later controls", ...elementProps }, ref) {
+		const scrolls = overflow === "scroll" && elementProps.orientation !== "vertical";
+		const scroll = useEdgeScroll(scrolls);
+		const barRef = useComposedRefs(ref, scroll.ref);
+		const bar = /* @__PURE__ */ jsx(Toolbar.Root, {
+			ref: barRef,
+			"data-slot": "toolbar",
+			className: cn("flex h-(--cue-chrome-toolbar) w-full shrink-0 items-center gap-(--cue-space-2) border-b border-border bg-surface-1 px-(--cue-pad-row-x) data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-(--cue-chrome-toolbar) data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r data-[orientation=vertical]:border-b-0", scrolls ? EDGE_SCROLLER_CLASSES : null, className),
+			...elementProps,
+			style: {
+				...elementProps.style,
+				...scroll.style
+			}
+		});
+		if (!scrolls) return bar;
+		return /* @__PURE__ */ jsxs("div", {
+			"data-slot": "toolbar-frame",
+			className: "relative w-full min-w-0 shrink-0",
+			children: [bar, /* @__PURE__ */ jsx(EdgeChevrons, {
+				edges: scroll.edges,
+				onNudge: scroll.nudge,
+				previousLabel,
+				nextLabel,
+				className: "bottom-px bg-surface-1"
+			})]
+		});
+	}),
+	Button: React.forwardRef(function ToolbarButton({ className, icon: Icon, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs(Toolbar.Button, {
+			ref,
+			"data-slot": "toolbar-button",
+			className: cn("inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40", className),
+			...elementProps,
+			children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": "true",
+				className: "size-icon-md shrink-0"
+			}), children]
+		});
+	}),
+	Group: React.forwardRef(function ToolbarGroup({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Toolbar.Group, {
+			ref,
+			"data-slot": "toolbar-group",
+			className: cn("inline-flex items-center gap-(--cue-space-1)", className),
+			...elementProps
+		});
+	}),
+	Separator: React.forwardRef(function ToolbarSeparator({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Toolbar.Separator, {
+			ref,
+			"data-slot": "toolbar-separator",
+			className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:mx-(--cue-space-1) data-[orientation=vertical]:h-[60%] data-[orientation=vertical]:w-px", className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { Toolbar$1 as Toolbar };

package/dist/chrome/tree.d.ts

@@ -0,0 +1,98 @@
+import { TreeItem, TreeRow } from "./_tree.js";
+import * as React from "react";
+//#region src/chrome/tree.d.ts
+interface TreeProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onSelect"> {
+  /** The roots, in display order. */
+  items: readonly TreeItem[];
+  /** Expanded ids when controlled. Pass with `onExpandedChange`. */
+  expanded?: readonly string[];
+  /** Initially expanded ids when uncontrolled. */
+  defaultExpanded?: readonly string[];
+  /** Called with the whole next expanded set whenever a row is folded or unfolded. */
+  onExpandedChange?: (expanded: string[]) => void;
+  /** Selected id when controlled. Pass with `onSelect`. */
+  selected?: string | null;
+  /** Initially selected id when uncontrolled. */
+  defaultSelected?: string | null;
+  /** Called with the id of the row the user selected. */
+  onSelect?: (id: string) => void;
+  /**
+   * Replace the *body* of a row — the icon, label and badge.
+   *
+   * The row element itself, its ARIA, its tab index and its indent gutter stay
+   * with the component on purpose: those are the parts a call site cannot get
+   * wrong without breaking keyboard navigation for everyone.
+   */
+  renderRow?: (row: TreeRow) => React.ReactNode;
+  /**
+   * Controls hung off the right of each row, revealed on hover or focus.
+   *
+   * This is where the three-state visibility idiom goes — see
+   * {@link TreeVisibilityToggle} — along with focus, rename and delete
+   * affordances. Anything essential belongs in the row body or a context menu
+   * instead: hover-revealed controls are invisible on touch.
+   */
+  rowControls?: (item: TreeItem, row: TreeRow) => React.ReactNode;
+  /** Draw the box-drawing indent gutter. Defaults to `true`. */
+  guides?: boolean;
+  /** Accessible name for the tree. Required in practice — name what it lists. */
+  "aria-label"?: string;
+}
+/**
+ * A hierarchical outline: a rig, a scene graph, a folder of shows.
+ *
+ * Hand-built rather than wrapped, because the pattern's whole cost is in three
+ * details no primitive here provides together:
+ *
+ * - **Roving tabindex.** The tree is one tab stop; the arrow keys move inside
+ *   it. Eighty rows must never mean eighty presses of Tab.
+ * - **A flat DOM.** Rows carry `aria-level` / `aria-posinset` / `aria-setsize`
+ *   instead of nesting `role="group"` wrappers, which is both valid ARIA and the
+ *   shape a virtualizer needs when the outline grows past a screenful.
+ * - **The gutter.** `└ ├ │` in the mono grid, `aria-hidden` — structure you can
+ *   see at a glance without indentation alone having to carry it.
+ *
+ * Selection is a tint (`accent-soft` ground, accent ink), never a solid fill —
+ * the same ruling as the sidebar item and the active tab.
+ *
+ * @example
+ * <Tree
+ *   aria-label="Rig"
+ *   items={rig}
+ *   selected={selected}
+ *   onSelect={setSelected}
+ *   rowControls={(item) => (
+ *     <TreeVisibilityToggle value={visibility[item.id]} onValueChange={set(item.id)} />
+ *   )}
+ * />
+ */
+declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLDivElement>>;
+/** The three states a node can be drawn in. */
+type TreeVisibility = "visible" | "ghost" | "hidden";
+interface TreeVisibilityToggleProps extends Omit<React.ComponentPropsWithoutRef<"button">, "value" | "onChange" | "children"> {
+  /** The node's current visibility. */
+  value: TreeVisibility;
+  /** Called with the next state in the cycle. */
+  onValueChange: (value: TreeVisibility) => void;
+  /** Override the state names used in the accessible label. */
+  labels?: Partial<Record<TreeVisibility, string>>;
+}
+/**
+ * The outliner's three-state visibility control: shown → ghosted → hidden.
+ *
+ * Three states rather than a checkbox because a rig has three answers, not two:
+ * *there*, *there but out of the way*, and *not drawn*. Ghost is the one that
+ * earns the extra state — it is how you keep a truss as spatial reference while
+ * working behind it — and collapsing it into "hidden" is what makes people
+ * toggle things off and lose their bearings.
+ *
+ * Meant for {@link TreeProps.rowControls}. The accessible name states the
+ * *current* state ("Visibility: ghosted") rather than the next action, because
+ * with three states "toggle" names nothing useful; pressing cycles.
+ *
+ * @example
+ * <TreeVisibilityToggle value={state} onValueChange={setState} />
+ */
+declare const TreeVisibilityToggle: React.ForwardRefExoticComponent<TreeVisibilityToggleProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps };

package/dist/chrome/tree.js

@@ -0,0 +1,248 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { TREE_GUIDE_GLYPHS, flattenTree } from "./_tree.js";
+import { ChevronRightGlyph, EyeGlyph, EyeOffGlyph, GhostGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/tree.tsx
+/**
+* A hierarchical outline: a rig, a scene graph, a folder of shows.
+*
+* Hand-built rather than wrapped, because the pattern's whole cost is in three
+* details no primitive here provides together:
+*
+* - **Roving tabindex.** The tree is one tab stop; the arrow keys move inside
+*   it. Eighty rows must never mean eighty presses of Tab.
+* - **A flat DOM.** Rows carry `aria-level` / `aria-posinset` / `aria-setsize`
+*   instead of nesting `role="group"` wrappers, which is both valid ARIA and the
+*   shape a virtualizer needs when the outline grows past a screenful.
+* - **The gutter.** `└ ├ │` in the mono grid, `aria-hidden` — structure you can
+*   see at a glance without indentation alone having to carry it.
+*
+* Selection is a tint (`accent-soft` ground, accent ink), never a solid fill —
+* the same ruling as the sidebar item and the active tab.
+*
+* @example
+* <Tree
+*   aria-label="Rig"
+*   items={rig}
+*   selected={selected}
+*   onSelect={setSelected}
+*   rowControls={(item) => (
+*     <TreeVisibilityToggle value={visibility[item.id]} onValueChange={set(item.id)} />
+*   )}
+* />
+*/
+const Tree = React.forwardRef(function Tree({ className, items, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected = null, onSelect, renderRow, rowControls, guides = true, onKeyDown, ...elementProps }, ref) {
+	const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState(defaultExpanded ?? []);
+	const expandedList = expandedProp ?? uncontrolledExpanded;
+	const expandedSet = React.useMemo(() => new Set(expandedList), [expandedList]);
+	const [uncontrolledSelected, setUncontrolledSelected] = React.useState(defaultSelected);
+	const selected = selectedProp === void 0 ? uncontrolledSelected : selectedProp;
+	const rows = React.useMemo(() => flattenTree(items, expandedSet), [items, expandedSet]);
+	const [activeId, setActiveId] = React.useState(null);
+	const activeRowId = activeId !== null && rows.some((row) => row.item.id === activeId) ? activeId : rows[0]?.item.id ?? null;
+	const rowRefs = React.useRef(/* @__PURE__ */ new Map());
+	const registerRow = React.useCallback((id, element) => {
+		if (element === null) rowRefs.current.delete(id);
+		else rowRefs.current.set(id, element);
+	}, []);
+	const focusRow = React.useCallback((id) => {
+		setActiveId(id);
+		rowRefs.current.get(id)?.focus();
+	}, []);
+	const setExpanded = React.useCallback((id, next) => {
+		const current = expandedProp ?? uncontrolledExpanded;
+		const result = next ? current.includes(id) ? [...current] : [...current, id] : current.filter((entry) => entry !== id);
+		if (expandedProp === void 0) setUncontrolledExpanded(result);
+		onExpandedChange?.(result);
+	}, [
+		expandedProp,
+		onExpandedChange,
+		uncontrolledExpanded
+	]);
+	const select = React.useCallback((row) => {
+		if (row.item.disabled === true) return;
+		if (selectedProp === void 0) setUncontrolledSelected(row.item.id);
+		onSelect?.(row.item.id);
+	}, [onSelect, selectedProp]);
+	const handleKeyDown = React.useCallback((event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.target.getAttribute("data-slot") !== "tree-row") return;
+		const index = rows.findIndex((row) => row.item.id === activeRowId);
+		const row = rows[index];
+		if (row === void 0) return;
+		const move = (target) => {
+			if (target === void 0) return;
+			event.preventDefault();
+			focusRow(target.item.id);
+		};
+		switch (event.key) {
+			case "ArrowDown":
+				move(rows[index + 1]);
+				return;
+			case "ArrowUp":
+				move(rows[index - 1]);
+				return;
+			case "Home":
+				move(rows[0]);
+				return;
+			case "End":
+				move(rows[rows.length - 1]);
+				return;
+			case "ArrowRight": {
+				event.preventDefault();
+				if (row.hasChildren && !row.expanded) {
+					setExpanded(row.item.id, true);
+					return;
+				}
+				const child = rows[index + 1];
+				if (row.expanded && child?.parentId === row.item.id) focusRow(child.item.id);
+				return;
+			}
+			case "ArrowLeft":
+				event.preventDefault();
+				if (row.expanded) setExpanded(row.item.id, false);
+				else if (row.parentId !== null) focusRow(row.parentId);
+				return;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				select(row);
+				return;
+		}
+	}, [
+		activeRowId,
+		focusRow,
+		onKeyDown,
+		rows,
+		select,
+		setExpanded
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "tree",
+		"data-slot": "tree",
+		className: cn("flex flex-col", className),
+		onKeyDown: handleKeyDown,
+		...elementProps,
+		children: rows.map((row) => {
+			const { item } = row;
+			const Icon = item.icon;
+			return /* @__PURE__ */ jsxs("div", {
+				ref: (element) => registerRow(item.id, element),
+				role: "treeitem",
+				tabIndex: activeRowId === item.id ? 0 : -1,
+				"aria-level": row.level + 1,
+				"aria-posinset": row.position,
+				"aria-setsize": row.setSize,
+				"aria-expanded": row.hasChildren ? row.expanded : void 0,
+				"aria-selected": selected === item.id,
+				"aria-disabled": item.disabled === true ? true : void 0,
+				"data-slot": "tree-row",
+				"data-selected": selected === item.id ? "" : void 0,
+				"data-disabled": item.disabled === true ? "" : void 0,
+				onFocus: () => setActiveId(item.id),
+				onClick: () => select(row),
+				className: "group/tree-row flex h-control-sm cursor-default items-center gap-(--cue-space-1) rounded-(--radius-control) pr-(--cue-space-2) font-mono text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted outline-none select-none hover:bg-surface-2 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent data-[selected]:bg-accent-soft data-[selected]:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+				children: [
+					guides ? row.guides.map((guide, depth) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-slot": "tree-guide",
+						className: "w-(--cue-space-4) shrink-0 text-center text-fg-subtle",
+						children: TREE_GUIDE_GLYPHS[guide]
+					}, depth)) : null,
+					row.hasChildren ? /* @__PURE__ */ jsx("span", {
+						role: "presentation",
+						"data-slot": "tree-toggle",
+						"aria-hidden": "true",
+						onClick: (event) => {
+							event.stopPropagation();
+							setExpanded(item.id, !row.expanded);
+						},
+						className: "flex size-icon-sm shrink-0 cursor-pointer items-center justify-center text-fg-subtle",
+						children: /* @__PURE__ */ jsx(ChevronRightGlyph, { className: cn("size-icon-sm transition-transform duration-150 motion-reduce:transition-none", row.expanded ? "rotate-90" : null) })
+					}) : /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "size-icon-sm shrink-0"
+					}),
+					renderRow === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+							"aria-hidden": "true",
+							className: "size-icon-sm shrink-0"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"data-slot": "tree-label",
+							className: "min-w-0 flex-1 truncate",
+							children: item.label
+						}),
+						item.badge === void 0 ? null : /* @__PURE__ */ jsx("span", {
+							"data-slot": "tree-badge",
+							className: "shrink-0 text-fg-subtle",
+							children: item.badge
+						})
+					] }) : /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: renderRow(row)
+					}),
+					rowControls === void 0 ? null : /* @__PURE__ */ jsx("span", {
+						"data-slot": "tree-row-controls",
+						onClick: (event) => event.stopPropagation(),
+						className: "flex shrink-0 items-center gap-(--cue-space-1) opacity-0 transition-opacity duration-150 group-hover/tree-row:opacity-100 group-focus-within/tree-row:opacity-100 motion-reduce:transition-none",
+						children: rowControls(item, row)
+					})
+				]
+			}, item.id);
+		})
+	});
+});
+/** Which state the toggle moves to next. */
+const NEXT_VISIBILITY = {
+	visible: "ghost",
+	ghost: "hidden",
+	hidden: "visible"
+};
+/** What each state is called when the button announces itself. */
+const VISIBILITY_LABELS = {
+	visible: "visible",
+	ghost: "ghosted",
+	hidden: "hidden"
+};
+/**
+* The outliner's three-state visibility control: shown → ghosted → hidden.
+*
+* Three states rather than a checkbox because a rig has three answers, not two:
+* *there*, *there but out of the way*, and *not drawn*. Ghost is the one that
+* earns the extra state — it is how you keep a truss as spatial reference while
+* working behind it — and collapsing it into "hidden" is what makes people
+* toggle things off and lose their bearings.
+*
+* Meant for {@link TreeProps.rowControls}. The accessible name states the
+* *current* state ("Visibility: ghosted") rather than the next action, because
+* with three states "toggle" names nothing useful; pressing cycles.
+*
+* @example
+* <TreeVisibilityToggle value={state} onValueChange={setState} />
+*/
+const TreeVisibilityToggle = React.forwardRef(function TreeVisibilityToggle({ className, value, onValueChange, labels, onClick, ...elementProps }, ref) {
+	const Glyph = value === "visible" ? EyeGlyph : value === "ghost" ? GhostGlyph : EyeOffGlyph;
+	const name = labels?.[value] ?? VISIBILITY_LABELS[value];
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"aria-label": `Visibility: ${name}`,
+		"data-slot": "tree-visibility-toggle",
+		"data-state": value,
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			onValueChange(NEXT_VISIBILITY[value]);
+		},
+		className: cn("flex size-icon-md shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 outline-none transition-colors duration-150 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none data-[state=visible]:text-fg-subtle data-[state=ghost]:text-info data-[state=hidden]:text-warn", className),
+		...elementProps,
+		children: /* @__PURE__ */ jsx(Glyph, { className: "size-icon-sm" })
+	});
+});
+//#endregion
+export { Tree, TreeVisibilityToggle };

package/dist/color/_checker.js

@@ -0,0 +1,14 @@
+//#region src/color/_checker.ts
+/**
+* The transparency checkerboard.
+*
+* Anywhere a colour with alpha is shown — a swatch, an alpha rail — something
+* has to sit behind it or "50% transparent white" and "opaque light grey" look
+* identical. Drawn as a token-coloured conic gradient rather than an image so it
+* follows the theme (and stays a two-line class string instead of an asset).
+*
+* @internal Not part of the public API.
+*/
+const checkerClasses = "bg-[repeating-conic-gradient(var(--cue-surface-3)_0%_25%,var(--cue-surface-1)_0%_50%)] bg-[length:0.5rem_0.5rem]";
+//#endregion
+export { checkerClasses };

package/dist/color/_convert.d.ts

@@ -0,0 +1,52 @@
+//#region src/color/_convert.d.ts
+/**
+ * The notations this suite reads and writes.
+ *
+ * Two, not ten: hex is what a colour picker natively speaks, oklch is what this
+ * system's tokens are authored in. Everything else (`rgb()`, `hsl()`, named
+ * colours) is *readable* — {@link toHexString} takes whatever CSS understands —
+ * but writing back in a third notation would only invite a token file with
+ * three spellings of the same colour.
+ */
+type ColorFormat = "hex" | "oklch";
+/**
+ * Convert any CSS colour string to `#rrggbb` (or `#rrggbbaa` when it carries
+ * alpha).
+ *
+ * The bridge into React Aria's colour parts, which only parse sRGB notations —
+ * hand them an `oklch()` token value and they throw. Colours outside the sRGB
+ * gamut have their **chroma** pulled in rather than their channels clipped:
+ * clipping `oklch(0.7 0.4 30)` gives pure red, losing the lightness the author
+ * chose, while clamping keeps it at `#ff6551`.
+ *
+ * @param input - Any CSS colour string.
+ * @returns The lower-case hex string, or `null` if the input is not a colour.
+ * @example
+ * toHexString("oklch(0.7 0.15 30)") // "#ed7665"
+ */
+declare function toHexString(input: string): string | null;
+/**
+ * Re-print a colour in one of the two notations the suite writes.
+ *
+ * The oklch form is emitted at the precision a round trip needs — four decimals
+ * of lightness and chroma, two of hue — which is exactly enough for
+ * `toHexString(formatColorString(hex, "oklch")) === hex` across the sRGB cube.
+ * An achromatic colour has no hue, so it prints `0` rather than `NaN`.
+ *
+ * @param input - Any CSS colour string.
+ * @param format - The notation to write.
+ * @returns The formatted colour, or `null` if the input is not a colour.
+ * @example
+ * formatColorString("#3fa9f5", "oklch") // "oklch(0.7083 0.1466 244.05)"
+ */
+declare function formatColorString(input: string, format: ColorFormat): string | null;
+/**
+ * Which notation a value is authored in, so a control can hand back what it was
+ * given instead of quietly rewriting a token file into hex.
+ *
+ * @param input - Any CSS colour string.
+ * @returns `"oklch"` for an `oklch()` value, `"hex"` for everything else.
+ */
+declare function detectColorFormat(input: string): ColorFormat;
+//#endregion
+export { ColorFormat, detectColorFormat, formatColorString, toHexString };