@cueplusplus/ui 0.13.0

package/dist/midi/threshold-rail.js

@@ -0,0 +1,214 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/midi/threshold-rail.tsx
+const ZONE_TONES = {
+	accent: "bg-accent-soft",
+	ok: "bg-(--cue-ok-soft)",
+	busy: "bg-(--cue-busy-soft)",
+	warn: "bg-(--cue-warn-soft)",
+	danger: "bg-(--cue-danger-soft)",
+	info: "bg-(--cue-info-soft)"
+};
+const HANDLE_TONES = {
+	accent: "border-accent",
+	ok: "border-ok",
+	busy: "border-busy",
+	warn: "border-warn",
+	danger: "border-danger",
+	info: "border-info"
+};
+/** Grid the handles snap to, as a fraction of full scale. */
+const DEFAULT_STEP = .01;
+/** Closest the two handles may get, as a fraction of full scale. */
+const DEFAULT_MIN_GAP = .01;
+/** How many steps a page key jumps. */
+const PAGE_FACTOR = 10;
+/**
+* The trigger level, set by dragging it along the signal it triggers on.
+*
+* A threshold is a number, and a number field would hold it perfectly well —
+* but a threshold is only ever chosen *relative to a signal*, and this control
+* is the one place both are visible at once: the live level fills the rail, the
+* peak-hold needle marks how far it got, and the handle sits where the trigger
+* fires. Unified from ableton-sync's three near-identical threshold editors.
+*
+* Two thresholds make it a window rather than a floor: supply `lower` and the
+* rail arms *between* the handles, which is how a band-triggered cue avoids
+* firing on a peak it was never meant to catch.
+*
+* What the ports did not have is a keyboard. Their handles moved on `mousedown`
+* plus a document listener, so a threshold could not be set by anyone not using
+* a mouse, and no screen reader was ever told what the number was. Here each
+* handle is a `role="slider"` announcing a percentage, arrow keys step, page
+* keys jump, and Home/End go to the limits — the drag is the fast path, not the
+* only path.
+*
+* The `onChange`/`onCommit` split is the same undo-coalescing contract as
+* `Slider` and `ScrubInput`: one drag is one undo entry.
+*
+* @example
+* <ThresholdRail value={threshold} onChange={setThreshold} level={rms} peak={peak} />
+* @example
+* <ThresholdRail value={high} lower={low} onChange={setHigh} onLowerChange={setLow} />
+*/
+const ThresholdRail = React.forwardRef(function ThresholdRail({ className, value, onChange, lower, onLowerChange, onCommit, level, peak, step = DEFAULT_STEP, minGap = DEFAULT_MIN_GAP, belowTone = "danger", aboveTone = "ok", disabled = false, label = "Threshold", formatValue = (fraction) => `${Math.round(fraction * 100)}%`, ...elementProps }, ref) {
+	const trackRef = React.useRef(null);
+	const [drag, setDrag] = React.useState(null);
+	const dual = lower !== void 0;
+	/** What each handle may not pass: the other one, plus the gap. */
+	const bounds = (edge) => edge === "upper" ? {
+		min: dual ? lower + minGap : 0,
+		max: 1
+	} : {
+		min: 0,
+		max: value - minGap
+	};
+	const emit = (edge, next, commit) => {
+		const { min, max } = bounds(edge);
+		const settled = quantise(next, min, max, step);
+		if (settled !== (edge === "upper" ? value : lower)) {
+			if (edge === "upper") onChange(settled);
+			else onLowerChange?.(settled);
+		}
+		if (!commit) return;
+		onCommit?.(edge === "upper" ? {
+			upper: settled,
+			lower
+		} : {
+			upper: value,
+			lower: settled
+		});
+	};
+	const onPointerDown = (edge) => (event) => {
+		if (disabled || event.button !== 0) return;
+		event.preventDefault();
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		setDrag({
+			edge,
+			pointerId: event.pointerId
+		});
+	};
+	const onPointerMove = (event) => {
+		if (disabled || drag === null || drag.pointerId !== event.pointerId) return;
+		const box = trackRef.current?.getBoundingClientRect();
+		if (box === void 0 || box.width === 0) return;
+		emit(drag.edge, (event.clientX - box.left) / box.width, false);
+	};
+	const endDrag = (event) => {
+		if (drag === null || drag.pointerId !== event.pointerId) return;
+		event.currentTarget.releasePointerCapture?.(event.pointerId);
+		setDrag(null);
+		const settled = drag.edge === "upper" ? value : lower;
+		emit(drag.edge, settled, true);
+	};
+	const onKeyDown = (edge) => (event) => {
+		if (disabled) return;
+		const current = edge === "upper" ? value : lower;
+		const { min, max } = bounds(edge);
+		let next = null;
+		if (event.key === "ArrowRight" || event.key === "ArrowUp") next = current + step;
+		else if (event.key === "ArrowLeft" || event.key === "ArrowDown") next = current - step;
+		else if (event.key === "PageUp") next = current + step * PAGE_FACTOR;
+		else if (event.key === "PageDown") next = current - step * PAGE_FACTOR;
+		else if (event.key === "Home") next = min;
+		else if (event.key === "End") next = max;
+		if (next === null) return;
+		event.preventDefault();
+		emit(edge, next, true);
+	};
+	const armedStart = dual ? lower : value;
+	const edges = dual ? ["lower", "upper"] : ["upper"];
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "group",
+		"aria-label": label,
+		"data-slot": "threshold-rail",
+		className: cn("flex h-control-sm w-full items-center", disabled && "opacity-40", className),
+		...elementProps,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: trackRef,
+			"data-slot": "threshold-rail-track",
+			className: "relative h-2 w-full rounded-full border border-border bg-sunken",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "threshold-rail-zone",
+					"data-zone": "below",
+					className: cn("pointer-events-none absolute inset-y-0 left-0 rounded-l-full", ZONE_TONES[belowTone]),
+					style: { width: percent(armedStart) }
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "threshold-rail-zone",
+					"data-zone": "armed",
+					className: cn("pointer-events-none absolute inset-y-0", dual ? null : "rounded-r-full", ZONE_TONES[aboveTone]),
+					style: {
+						left: percent(armedStart),
+						width: percent((dual ? value : 1) - armedStart)
+					}
+				}),
+				dual ? /* @__PURE__ */ jsx("div", {
+					"data-slot": "threshold-rail-zone",
+					"data-zone": "above",
+					className: cn("pointer-events-none absolute inset-y-0 right-0 rounded-r-full", ZONE_TONES[belowTone]),
+					style: {
+						left: percent(value),
+						width: percent(1 - value)
+					}
+				}) : null,
+				typeof level === "number" ? /* @__PURE__ */ jsx("div", {
+					"data-slot": "threshold-rail-level",
+					className: "pointer-events-none absolute inset-y-0 left-0 rounded-l-full bg-fg/55",
+					style: { width: percent(level) }
+				}) : null,
+				typeof peak === "number" ? /* @__PURE__ */ jsx("div", {
+					"data-slot": "threshold-rail-peak",
+					className: "pointer-events-none absolute inset-y-0 w-px bg-warn",
+					style: { left: percent(peak) }
+				}) : null,
+				edges.map((edge) => {
+					const current = edge === "upper" ? value : lower;
+					const { min, max } = bounds(edge);
+					return /* @__PURE__ */ jsx("div", {
+						role: "slider",
+						"data-slot": "threshold-rail-handle",
+						"data-edge": edge,
+						"data-dragging": String(drag?.edge === edge),
+						tabIndex: disabled ? -1 : 0,
+						"aria-label": dual ? `${label} ${edge}` : label,
+						"aria-valuenow": Math.round(current * 100),
+						"aria-valuemin": Math.round(min * 100),
+						"aria-valuemax": Math.round(max * 100),
+						"aria-valuetext": formatValue(current),
+						"aria-orientation": "horizontal",
+						"aria-disabled": disabled ? true : void 0,
+						onPointerDown: onPointerDown(edge),
+						onPointerMove,
+						onPointerUp: endDrag,
+						onPointerCancel: endDrag,
+						onKeyDown: onKeyDown(edge),
+						className: cn("absolute top-1/2 z-10 size-3 -translate-x-1/2 -translate-y-1/2 touch-none rounded-full border-2 bg-bg outline-none transition-transform", "motion-reduce:transition-none data-[dragging=true]:scale-125", "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", edge === "upper" ? HANDLE_TONES[aboveTone] : HANDLE_TONES[belowTone], disabled ? "cursor-default" : drag?.edge === edge ? "cursor-grabbing" : "cursor-grab hover:scale-110"),
+						style: { left: percent(current) }
+					}, edge);
+				})
+			]
+		})
+	});
+});
+/**
+* A fraction as a CSS percentage, clamped to the rail.
+*
+* Rounded, because `0.62 * 100` is `62.00000000000001` and a style attribute
+* carrying that is a diff nobody wants to read.
+*/
+function percent(fraction) {
+	return `${Math.min(100, Math.max(0, Math.round(fraction * 1e6) / 1e4))}%`;
+}
+/** Snap to the step grid, clamp to the bounds, and drop the float noise. */
+function quantise(raw, min, max, step) {
+	if (!Number.isFinite(raw)) return min;
+	const snapped = Math.round(raw / step) * step;
+	return Math.round(Math.min(max, Math.max(min, snapped)) * 1e6) / 1e6;
+}
+//#endregion
+export { ThresholdRail };

package/dist/midi/timeline-ruler.d.ts

@@ -0,0 +1,83 @@
+import { TimeSignature } from "./_time.js";
+import { RulerViewport } from "./_ruler.js";
+import * as React from "react";
+//#region src/midi/timeline-ruler.d.ts
+/** A named position in the song: a cue point, a section start. */
+interface RulerMarker {
+  /** Stable key. Defaults to the label plus its beat. */
+  id?: string;
+  /** Position in quarter-note beats. */
+  beat: number;
+  /** What to print. */
+  label: string;
+}
+/** The transport's loop bracket. */
+interface LoopRegion {
+  /** Where the loop starts, in quarter-note beats. */
+  start: number;
+  /** How long it is, in quarter-note beats. */
+  length: number;
+  /** Whether looping is armed. Defaults to `true`; `false` draws nothing. */
+  enabled?: boolean;
+}
+interface TimelineRulerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** Length of the song, in quarter-note beats. */
+  totalBeats: number;
+  /** Zoom, in px per quarter-note beat. Defaults to `20`. */
+  pxPerBeat?: number;
+  /**
+   * What is on screen, in the same pixel coordinates.
+   *
+   * Supply it when the host already tracks its own scroll — a timeline usually
+   * does, and one source of truth scrolls in step. Omitted, the ruler watches
+   * its own scroll parent instead.
+   */
+  viewport?: RulerViewport;
+  /** The signature the bars are counted in. Defaults to 4/4. */
+  timeSignature?: TimeSignature;
+  /** Tempo in BPM. Only used for the readout and the accessible name. */
+  tempo?: number | null;
+  /** Transport position in quarter-note beats. `null` or absent draws no playhead. */
+  playhead?: number | null;
+  /** The loop bracket, if there is one. */
+  loop?: LoopRegion | null;
+  /** Cue points to pin along the ruler. */
+  markers?: readonly RulerMarker[];
+  /** Ruler height in px at the 16px root, emitted as `rem`. Defaults to `40`. */
+  height?: number;
+  /** Pixel spacing the ticks aim for. Defaults to one centimetre. */
+  targetPx?: number;
+  /** How far past the viewport to keep ruling, in px. Defaults to `120`. */
+  bufferPx?: number;
+  /** What this timeline is. Defaults to `"Timeline"`. */
+  label?: string;
+}
+/**
+ * The bar ruler over an arrangement: zoom-adaptive, culled, and deliberately
+ * faint.
+ *
+ * Ported from ableton-sync's arrangement view, with its two performance
+ * problems fixed. The first is density: the original picked from a ladder of
+ * musical intervals and then multiplied by four, so its ruler was four times
+ * sparser than the one centimetre it aimed for. The second is culling: it kept
+ * fifty *beats* of margin either side of the viewport, which at a tight zoom is
+ * a thousand pixels of hidden DOM and at a loose zoom is nothing. Both now live
+ * in `_ruler.ts`, are pure, and are tested without a DOM.
+ *
+ * **The horizontal axis is in CSS pixels, not `rem`** — the one place in this
+ * system that is true. `pxPerBeat` is not a size, it is a coordinate system the
+ * ruler shares with whatever the caller draws underneath it: clips, automation,
+ * a playhead overlay. Converting it to `rem` here would silently shear the
+ * ruler away from the tracks at any root font size other than 16. The ruler's
+ * *height* is a size, and is in `rem` like everything else.
+ *
+ * The ticks are painted at 10–15% opacity on purpose. A ruler is read by
+ * glancing, and the material under it — the clips — is what the eye is actually
+ * on; a ruler drawn at full contrast becomes a fence across the arrangement.
+ *
+ * @example
+ * <TimelineRuler totalBeats={512} pxPerBeat={zoom} viewport={viewport} playhead={position} />
+ */
+declare const TimelineRuler: React.ForwardRefExoticComponent<TimelineRulerProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { LoopRegion, RulerMarker, TimelineRuler, TimelineRulerProps };

package/dist/midi/timeline-ruler.js

@@ -0,0 +1,152 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "../lib/compose.js";
+import { toRem } from "../instruments/_rem.js";
+import { DEFAULT_TIME_SIGNATURE, barBeats, beatsToMusical, formatMusicalTime } from "./_time.js";
+import { rulerTicks } from "./_ruler.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/midi/timeline-ruler.tsx
+/** Default zoom: twenty pixels to the beat, the ported arrangement default. */
+const DEFAULT_PX_PER_BEAT = 20;
+/** Default ruler height in px at the 16px root. */
+const DEFAULT_HEIGHT_PX = 40;
+/**
+* The bar ruler over an arrangement: zoom-adaptive, culled, and deliberately
+* faint.
+*
+* Ported from ableton-sync's arrangement view, with its two performance
+* problems fixed. The first is density: the original picked from a ladder of
+* musical intervals and then multiplied by four, so its ruler was four times
+* sparser than the one centimetre it aimed for. The second is culling: it kept
+* fifty *beats* of margin either side of the viewport, which at a tight zoom is
+* a thousand pixels of hidden DOM and at a loose zoom is nothing. Both now live
+* in `_ruler.ts`, are pure, and are tested without a DOM.
+*
+* **The horizontal axis is in CSS pixels, not `rem`** — the one place in this
+* system that is true. `pxPerBeat` is not a size, it is a coordinate system the
+* ruler shares with whatever the caller draws underneath it: clips, automation,
+* a playhead overlay. Converting it to `rem` here would silently shear the
+* ruler away from the tracks at any root font size other than 16. The ruler's
+* *height* is a size, and is in `rem` like everything else.
+*
+* The ticks are painted at 10–15% opacity on purpose. A ruler is read by
+* glancing, and the material under it — the clips — is what the eye is actually
+* on; a ruler drawn at full contrast becomes a fence across the arrangement.
+*
+* @example
+* <TimelineRuler totalBeats={512} pxPerBeat={zoom} viewport={viewport} playhead={position} />
+*/
+const TimelineRuler = React.forwardRef(function TimelineRuler({ className, totalBeats, pxPerBeat = DEFAULT_PX_PER_BEAT, viewport: viewportProp, timeSignature = DEFAULT_TIME_SIGNATURE, tempo, playhead, loop, markers, height = DEFAULT_HEIGHT_PX, targetPx, bufferPx, label = "Timeline", ...elementProps }, forwardedRef) {
+	const rootRef = React.useRef(null);
+	const ref = useComposedRefs(forwardedRef, rootRef);
+	const [measured, setMeasured] = React.useState(null);
+	React.useEffect(() => {
+		if (viewportProp !== void 0) return;
+		const scroller = rootRef.current?.parentElement;
+		if (!scroller || typeof requestAnimationFrame !== "function") return;
+		let frame = null;
+		const read = () => setMeasured({
+			offset: scroller.scrollLeft,
+			width: scroller.clientWidth
+		});
+		const onScroll = () => {
+			if (frame !== null) return;
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				read();
+			});
+		};
+		read();
+		scroller.addEventListener("scroll", onScroll);
+		globalThis.addEventListener?.("resize", read);
+		return () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			scroller.removeEventListener("scroll", onScroll);
+			globalThis.removeEventListener?.("resize", read);
+		};
+	}, [viewportProp]);
+	const viewport = viewportProp ?? (measured !== null && measured.width > 0 ? measured : void 0);
+	const bar = barBeats(timeSignature);
+	const { interval, width, ticks } = rulerTicks({
+		totalBeats,
+		pxPerBeat,
+		viewport,
+		timeSignature,
+		targetPx,
+		bufferPx
+	});
+	const bars = Math.max(1, Math.ceil(totalBeats / bar));
+	const signature = `${timeSignature.numerator}/${timeSignature.denominator}`;
+	const summary = [
+		`${label}: ${bars} bars at ${signature}`,
+		typeof tempo === "number" ? `${tempo} BPM` : null,
+		typeof playhead === "number" ? `playhead at ${formatMusicalTime(beatsToMusical(playhead, timeSignature))}` : null
+	].filter((part) => part !== null).join(", ");
+	const loopVisible = loop != null && loop.enabled !== false && loop.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "img",
+		"aria-label": summary,
+		"data-slot": "timeline-ruler",
+		className: cn("relative bg-surface-1 select-none", className),
+		style: { height: toRem(height) },
+		...elementProps,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "timeline-ruler-track",
+			className: "relative h-full",
+			style: {
+				width: `${width}px`,
+				minWidth: "100%"
+			},
+			children: [
+				loopVisible ? /* @__PURE__ */ jsx("div", {
+					"data-slot": "timeline-ruler-loop",
+					className: "absolute inset-y-0 border-x border-warn/40 bg-warn/10",
+					style: {
+						left: `${loop.start * pxPerBeat}px`,
+						width: `${loop.length * pxPerBeat}px`
+					}
+				}) : null,
+				ticks.map((tick) => /* @__PURE__ */ jsxs("div", {
+					"data-slot": "timeline-ruler-tick",
+					"data-bar": String(tick.barStart),
+					className: "absolute inset-y-0 flex flex-col justify-end",
+					style: { left: `${tick.left}px` },
+					children: [tick.barStart || interval >= bar ? /* @__PURE__ */ jsx("span", {
+						"data-slot": "timeline-ruler-label",
+						className: cn("absolute top-0 left-[2px] font-mono text-(length:--cue-text-micro) whitespace-nowrap tabular-nums", tick.barStart ? "text-fg-muted" : "text-fg-subtle"),
+						children: tick.label
+					}) : null, /* @__PURE__ */ jsx("span", {
+						"data-slot": "timeline-ruler-line",
+						className: cn("w-px", tick.barStart ? "h-3/5 bg-fg/15" : "h-1/4 bg-fg-subtle/10")
+					})]
+				}, tick.beat)),
+				(markers ?? []).map((marker) => /* @__PURE__ */ jsxs("div", {
+					"data-slot": "timeline-ruler-marker",
+					className: "absolute top-1/2 flex items-center gap-[2px] font-mono text-(length:--cue-text-micro) whitespace-nowrap text-fg",
+					style: { left: `${marker.beat * pxPerBeat}px` },
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "h-0 w-0 border-y-[3px] border-l-[4px] border-y-transparent border-l-fg"
+					}), marker.label]
+				}, marker.id ?? `${marker.label}@${marker.beat}`)),
+				typeof playhead === "number" ? /* @__PURE__ */ jsx("div", {
+					"data-slot": "timeline-ruler-playhead",
+					className: "absolute inset-y-0 z-10 w-px bg-accent",
+					style: { left: `${playhead * pxPerBeat}px` },
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "absolute -top-px -left-[3px] size-[7px] rotate-45 bg-accent"
+					})
+				}) : null
+			]
+		}), typeof tempo === "number" ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "timeline-ruler-readout",
+			className: "pointer-events-none absolute top-px right-px rounded-(--radius-control) bg-surface-1/80 px-(--cue-space-1) font-mono text-(length:--cue-text-micro) text-fg-subtle tabular-nums",
+			children: `${tempo.toFixed(1)} BPM · ${signature}`
+		}) : null]
+	});
+});
+//#endregion
+export { TimelineRuler };

package/dist/overlays/_debounce.js

@@ -0,0 +1,34 @@
+"use client";
+import * as React from "react";
+//#region src/overlays/_debounce.ts
+/**
+* Trail a fast-changing value by a quiet period.
+*
+* The command palette types at one keystroke per frame but refilters a command
+* list on every change; letting the list recompute per keystroke is what makes a
+* palette feel heavy on a 400-command app. Holding the *query* back rather than
+* the input keeps the field responsive — the character appears immediately, the
+* work waits.
+*
+* `delay <= 0` returns the value unchanged with no timer at all, so a caller can
+* switch debouncing off (and a test can) without a branch at the call site.
+*
+* @param value The value to trail.
+* @param delay Quiet period in ms before the trailing value catches up.
+* @returns The value as it was `delay` ms after it last changed.
+* @internal Not part of the public API; used by `CommandPalette`.
+*/
+function useDebouncedValue(value, delay) {
+	const [settled, setSettled] = React.useState(value);
+	React.useEffect(() => {
+		if (delay <= 0) {
+			setSettled(value);
+			return;
+		}
+		const timer = setTimeout(() => setSettled(value), delay);
+		return () => clearTimeout(timer);
+	}, [value, delay]);
+	return delay <= 0 ? value : settled;
+}
+//#endregion
+export { useDebouncedValue };

package/dist/overlays/_glyphs.js

@@ -0,0 +1,59 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/overlays/_glyphs.tsx
+/**
+* Shared overlay glyphs.
+*
+* Drawn inline rather than pulled from `lucide-react` so that closing a dialog
+* or ticking a menu row costs no icon dependency at runtime, and so the strokes
+* stay hairline-thin at the 10–12px sizes console density asks for. `currentColor`
+* everywhere: the tone comes from the surrounding component.
+*
+* @internal Not part of the public API.
+*/
+/** A cross for close affordances — two strokes, so it stays square at 8px. */
+function CrossGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.75",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8" })
+	});
+}
+/** A magnifier at hairline weight — the command palette's leading mark. */
+function SearchGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.75",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "7",
+			cy: "7",
+			r: "4.5"
+		}), /* @__PURE__ */ jsx("path", { d: "m10.5 10.5 3 3" })]
+	});
+}
+/** The tick marking a checked menu row. */
+function TickGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m3 8.5 3.5 3.5L13 4.5" })
+	});
+}
+//#endregion
+export { CrossGlyph, SearchGlyph, TickGlyph };

package/dist/overlays/_surface.d.ts

@@ -0,0 +1,70 @@
+//#region src/overlays/_surface.d.ts
+/**
+ * The conventions every floating surface in this system shares.
+ *
+ * Overlays are the one place the portfolio allows a shadow: a dialog, a menu or
+ * a toast genuinely floats above the page, so it gets `surface-2` fill, the
+ * `border-overlay` rim (which some themes — venu — deliberately match to the
+ * surface so the rim vanishes) and one soft drop shadow. Everything flat stays
+ * flat and separates with hairlines instead.
+ *
+ * Encoded here once rather than repeated per component so a change to the
+ * overlay language is a one-line change, and so the tests can assert the same
+ * recipe on every overlay in the group.
+ */
+/**
+ * Fill, rim, radius and shadow for any floating content surface.
+ *
+ * @example
+ * <Popover.Popup className={cn(overlaySurfaceClasses, className)} />
+ */
+declare const overlaySurfaceClasses = "border border-border-overlay bg-surface-2 rounded-(--radius-overlay) shadow-[0_8px_24px_rgba(0,0,0,0.4)]";
+/**
+ * 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.
+ */
+declare const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) transition-opacity duration-150 ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[ending-style]: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
+ * `position: static` inside it.
+ */
+declare const overlayPositionerClasses = "z-50 outline-none";
+/**
+ * Enter/exit for an anchored popup, driven entirely by Base UI's
+ * `data-starting-style` / `data-ending-style` attributes and plain CSS
+ * 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";
+/**
+ * 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";
+/** Body copy inside an overlay: mono, one rung under the panel's own text. */
+declare const overlayTextClasses = "font-mono text-(length:--cue-text-ui) text-fg";
+/** The heading line of a dialog, an alert dialog or a popover. */
+declare const overlayTitleClasses = "font-mono text-(length:--cue-text-emphasis) font-medium text-fg";
+/** The supporting line under an overlay title. */
+declare const overlayDescriptionClasses = "font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted";
+/** The action strip at the foot of a modal surface. */
+declare const overlayFooterClasses = "flex items-center justify-end gap-(--cue-space-3) pt-(--cue-space-2)";
+/**
+ * One row of a menu: the short rung of the density control ladder, highlighted
+ * with `accent-soft` rather than a solid fill (the luma defect ruling — a solid
+ * accent bar on a hovered row is too loud at console density).
+ */
+declare const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+/** The uppercase mono caption over a group of menu rows. */
+declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase select-none";
+/** The hairline between menu groups. */
+declare const menuSeparatorClasses = "my-(--cue-space-1) h-px bg-border";
+/** Padding of a menu popup — a single space unit so rows reach the rim. */
+declare const menuPopupClasses = "min-w-[10rem] p-(--cue-space-1)";
+/** Default gap in px between an anchored popup and its trigger. */
+declare const OVERLAY_SIDE_OFFSET = 4;
+//#endregion
+export { OVERLAY_SIDE_OFFSET, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, scrimClasses };