@cueplusplus/ui 0.13.0

package/dist/date/date-range-picker.d.ts

@@ -0,0 +1,65 @@
+import { FormControlSize } from "../forms/_chassis.js";
+import { CalendarProps } from "./calendar.js";
+import * as React from "react";
+import { DateRange } from "react-day-picker";
+//#region src/date/date-range-picker.d.ts
+/** The calendar knobs a range picker leaves open; selection is its own job. */
+type DateRangePickerCalendarProps = Omit<CalendarProps, "mode" | "selected" | "onSelect" | "required">;
+interface DateRangePickerProps {
+  /** The chosen span. Use with `onValueChange` for a controlled field. */
+  value?: DateRange | null;
+  /** Initially chosen span for an uncontrolled field. */
+  defaultValue?: DateRange | null;
+  /**
+   * Called after every click inside the calendar — once with `{ from }` when
+   * the span opens, again with `{ from, to }` when it closes.
+   */
+  onValueChange?: (value: DateRange | undefined) => void;
+  /** Read out while nothing is chosen. Defaults to `"Pick a range"`. */
+  placeholder?: string;
+  /** date-fns pattern for both ends of the readout. Defaults to `"d MMM yyyy"`. */
+  dateFormat?: string;
+  /** Rung of the control ladder. Defaults to `"md"`. */
+  size?: FormControlSize;
+  /** Prevent opening and grey the trigger out. */
+  disabled?: boolean;
+  /** Paint the danger rim — pair it with a `FieldError`. */
+  invalid?: boolean;
+  /** Base name for the hidden inputs; they submit `<name>From` / `<name>To`. */
+  name?: string;
+  /** Id forwarded to the trigger. */
+  id?: string;
+  /** Accessible name for the trigger, when no `FieldLabel` names it. */
+  "aria-label"?: string;
+  /** Id of the element naming the trigger. */
+  "aria-labelledby"?: string;
+  /** Extra classes for the trigger. */
+  className?: string;
+  /** Extra classes for the popup surface. */
+  popupClassName?: string;
+  /** Everything else the calendar takes. `numberOfMonths` defaults to `2`. */
+  calendarProps?: DateRangePickerCalendarProps;
+  /** Open state, for a controlled popover. */
+  open?: boolean;
+  /** Initial open state. */
+  defaultOpen?: boolean;
+  /** Called when the popover opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A span of days, picked from a two-month calendar in a popover.
+ *
+ * The sibling of `DatePicker`, sharing its trigger skin — but *not* its
+ * dismissal: a range takes two clicks, so the popup stays open through the
+ * first one and the caller hears about both. Close it from `onValueChange` when
+ * `to` arrives if a one-shot flow suits the page better.
+ *
+ * `react-day-picker` and `date-fns` are **optional peers**: import this from
+ * `@cueplusplus/ui/date`.
+ *
+ * @example
+ * <DateRangePicker aria-label="Window" value={range} onValueChange={setRange} />
+ */
+declare function DateRangePicker({ value, defaultValue, onValueChange, placeholder, dateFormat, size, disabled, invalid, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, popupClassName, calendarProps, open, defaultOpen, onOpenChange }: DateRangePickerProps): React.JSX.Element;
+//#endregion
+export { type DateRange, DateRangePicker, DateRangePickerCalendarProps, DateRangePickerProps };

package/dist/date/date-range-picker.js

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Popover } from "../overlays/popover.js";
+import { Calendar } from "./calendar.js";
+import { CalendarGlyph } from "./_glyphs.js";
+import { datePopupClasses, dateTriggerClasses, dateTriggerGlyphClasses, dateTriggerValueClasses } from "./_trigger.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+//#region src/date/date-range-picker.tsx
+/** The wire format for a submitted date: sortable, unambiguous, locale-free. */
+const ISO_DATE = "yyyy-MM-dd";
+/** `17 Aug 2026 → 20 Aug 2026`, with `…` standing in for an unpicked end. */
+function formatRange(range, pattern) {
+	return `${range.from === void 0 ? "…" : format(range.from, pattern)} → ${range.to === void 0 ? "…" : format(range.to, pattern)}`;
+}
+/**
+* A span of days, picked from a two-month calendar in a popover.
+*
+* The sibling of `DatePicker`, sharing its trigger skin — but *not* its
+* dismissal: a range takes two clicks, so the popup stays open through the
+* first one and the caller hears about both. Close it from `onValueChange` when
+* `to` arrives if a one-shot flow suits the page better.
+*
+* `react-day-picker` and `date-fns` are **optional peers**: import this from
+* `@cueplusplus/ui/date`.
+*
+* @example
+* <DateRangePicker aria-label="Window" value={range} onValueChange={setRange} />
+*/
+function DateRangePicker({ value, defaultValue, onValueChange, placeholder = "Pick a range", dateFormat = "d MMM yyyy", size, disabled, invalid, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, popupClassName, calendarProps, open, defaultOpen, onOpenChange }) {
+	const [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? void 0);
+	const selected = value === void 0 ? uncontrolled : value ?? void 0;
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+	const isOpen = open ?? uncontrolledOpen;
+	const setOpen = (next) => {
+		if (open === void 0) setUncontrolledOpen(next);
+		onOpenChange?.(next);
+	};
+	const select = (next) => {
+		if (value === void 0) setUncontrolled(next);
+		onValueChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open: isOpen,
+		onOpenChange: setOpen,
+		children: [
+			/* @__PURE__ */ jsxs(Popover.Trigger, {
+				render: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					id,
+					disabled,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"data-slot": "date-range-picker-trigger",
+					"data-empty": selected === void 0 ? "true" : void 0,
+					"data-invalid": invalid ? "" : void 0,
+					className: cn(dateTriggerClasses(size), className)
+				}),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(dateTriggerValueClasses, selected === void 0 && "text-fg-subtle"),
+					children: selected === void 0 ? placeholder : formatRange(selected, dateFormat)
+				}), /* @__PURE__ */ jsx(CalendarGlyph, { className: dateTriggerGlyphClasses })]
+			}),
+			/* @__PURE__ */ jsx(Popover.Content, {
+				className: cn(datePopupClasses, popupClassName),
+				align: "start",
+				"data-slot": "date-range-picker-popup",
+				children: /* @__PURE__ */ jsx(Calendar, {
+					numberOfMonths: 2,
+					...calendarProps,
+					mode: "range",
+					selected,
+					onSelect: select,
+					defaultMonth: calendarProps?.defaultMonth ?? selected?.from,
+					autoFocus: true
+				})
+			}),
+			name === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: `${name}From`,
+				value: selected?.from === void 0 ? "" : format(selected.from, ISO_DATE)
+			}), /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: `${name}To`,
+				value: selected?.to === void 0 ? "" : format(selected.to, ISO_DATE)
+			})] })
+		]
+	});
+}
+//#endregion
+export { DateRangePicker };

package/dist/date/index.d.ts

@@ -0,0 +1,6 @@
+import { Calendar, CalendarProps } from "./calendar.js";
+import { DateField, DateFieldProps, DateValue } from "./date-field.js";
+import { DatePicker, DatePickerCalendarProps, DatePickerProps } from "./date-picker.js";
+import { DateRange, DateRangePicker, DateRangePickerCalendarProps, DateRangePickerProps } from "./date-range-picker.js";
+import { TimeField, TimeFieldProps, TimeValue } from "./time-field.js";
+export { Calendar, type CalendarProps, DateField, type DateFieldProps, DatePicker, type DatePickerCalendarProps, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerProps, type DateValue, TimeField, type TimeFieldProps, type TimeValue };

package/dist/date/index.js

@@ -0,0 +1,6 @@
+import { Calendar } from "./calendar.js";
+import { DateField } from "./date-field.js";
+import { DatePicker } from "./date-picker.js";
+import { DateRangePicker } from "./date-range-picker.js";
+import { TimeField } from "./time-field.js";
+export { Calendar, DateField, DatePicker, DateRangePicker, TimeField };

package/dist/date/time-field.d.ts

@@ -0,0 +1,29 @@
+import { FormControlSize } from "../forms/_chassis.js";
+import * as React from "react";
+import { DateInputProps, TimeFieldProps, TimeValue } from "react-aria-components";
+//#region src/date/time-field.d.ts
+interface TimeFieldProps$1<T extends TimeValue = TimeValue> extends Omit<TimeFieldProps<T>, "children"> {
+  /** Rung of the control ladder. Defaults to `"md"`. */
+  size?: FormControlSize;
+  /** Extra classes for the segment group itself. */
+  inputClassName?: DateInputProps["className"];
+}
+/**
+ * A typed time of day, segment by segment.
+ *
+ * The sibling of {@link DateField} on the same React Aria part, for the half of
+ * a schedule a calendar cannot express. Pass `hourCycle={24}` for a show clock —
+ * a control room runs on 24-hour time, and the AM/PM segment is one more thing
+ * to tab through.
+ *
+ * Values are `@internationalized/date` `Time` objects.
+ *
+ * `react-aria-components` is an **optional peer**: import this from
+ * `@cueplusplus/ui/date`.
+ *
+ * @example
+ * <TimeField aria-label="Go time" hourCycle={24} value={time} onChange={setTime} />
+ */
+declare function TimeField$1<T extends TimeValue = TimeValue>({ size, className, inputClassName, ...fieldProps }: TimeFieldProps$1<T>): React.JSX.Element;
+//#endregion
+export { TimeField$1 as TimeField, TimeFieldProps$1 as TimeFieldProps, type TimeValue };

package/dist/date/time-field.js

@@ -0,0 +1,36 @@
+"use client";
+import { ariaClassName } from "../lib/aria-class.js";
+import { SegmentGroup } from "./_segments.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { TimeField } from "react-aria-components";
+//#region src/date/time-field.tsx
+/**
+* A typed time of day, segment by segment.
+*
+* The sibling of {@link DateField} on the same React Aria part, for the half of
+* a schedule a calendar cannot express. Pass `hourCycle={24}` for a show clock —
+* a control room runs on 24-hour time, and the AM/PM segment is one more thing
+* to tab through.
+*
+* Values are `@internationalized/date` `Time` objects.
+*
+* `react-aria-components` is an **optional peer**: import this from
+* `@cueplusplus/ui/date`.
+*
+* @example
+* <TimeField aria-label="Go time" hourCycle={24} value={time} onChange={setTime} />
+*/
+function TimeField$1({ size, className, inputClassName, ...fieldProps }) {
+	return /* @__PURE__ */ jsx(TimeField, {
+		"data-slot": "time-field",
+		className: ariaClassName("inline-flex flex-col gap-(--cue-space-1)", className),
+		...fieldProps,
+		children: /* @__PURE__ */ jsx(SegmentGroup, {
+			size,
+			className: inputClassName
+		})
+	});
+}
+//#endregion
+export { TimeField$1 as TimeField };

package/dist/dmx/_ramp.d.ts

@@ -0,0 +1,77 @@
+//#region src/dmx/_ramp.d.ts
+/**
+ * The byte layer: how big a universe is, and what colour a level is.
+ *
+ * Everything in this group repaints at frame rate, which rules out doing colour
+ * work per cell per frame. So the conversion happens once, into a 768-byte
+ * lookup table, and a repaint is three array reads. That is the whole reason
+ * these are `Uint8Array`s rather than a `(level) => string` function.
+ *
+ * Two ramps, for two different questions:
+ *
+ * - **mono** answers "how bright is this channel?" — and answers it by *being*
+ *   that brightness. The byte is the grey, with no conversion at all, which is
+ *   the reading a lighting operator already has in their hands from the desk.
+ *   It is the one place in this system that does not read a colour token, and
+ *   the reason is the same reason `--cue-data-ground` is true black in every
+ *   theme: a level readout that a theme could re-tint is a level readout you
+ *   cannot trust.
+ * - **value** answers "which channels are hot?" — and for that it borrows the
+ *   status vocabulary the rest of the console already means something by:
+ *   ground, then info, ok, warn, danger. Those *are* tokens, resolved against
+ *   the theme in force where the grid is mounted, so the ramp re-hues with the
+ *   theme like every other colour here.
+ *
+ * @internal Not part of the public API surface beyond the `/dmx` barrel.
+ */
+/** Channels in one DMX512 universe. Not a preference — it is the protocol. */
+declare const DMX_SLOTS = 512;
+/** The two cell colourings, in the order a picker should offer them. */
+declare const DMX_RAMP_NAMES: readonly ["mono", "value"];
+/** How a level becomes a colour. */
+type DmxRamp = (typeof DMX_RAMP_NAMES)[number];
+/**
+ * The tokens the value ramp interpolates through, dark end first.
+ *
+ * Read as names rather than as colours so the ramp follows a theme switch, and
+ * so a console that retunes its `warn` retunes its channel grid with it.
+ */
+declare const VALUE_RAMP_TOKENS: readonly ["data-ground", "info", "ok", "warn", "danger"];
+/**
+ * The 256-entry lookup table for a ramp: `[r, g, b]` per level, flat.
+ *
+ * Rebuild it whenever the theme the grid is mounted in changes — it is a
+ * snapshot of resolved tokens, not a live binding.
+ *
+ * @param ramp - Which colouring. Defaults to `"mono"`.
+ * @param element - Where the value ramp's tokens resolve. Defaults to the
+ *   document element; pass a node inside a portal or a nested theme for that
+ *   scope. Ignored by `"mono"`, which reads no tokens.
+ */
+declare function dmxPalette(ramp?: DmxRamp, element?: Element | null): Uint8Array;
+/** The `rgb()` string for a level. Out-of-range input clamps into a real slot. */
+declare function dmxPaletteColor(palette: Uint8Array, level: number): string;
+/**
+ * Ink for the number printed *inside* a cell: whichever of black or white has
+ * the better contrast against the cell's own fill.
+ *
+ * The ports this replaces each carried a hand-tuned cutoff (`v > 150` in one
+ * mode, `v > 140` in the other), which is two magic numbers that disagree with
+ * each other and neither of which survives a re-tinted ramp. One contrast
+ * calculation answers it for any ramp, in any theme.
+ */
+declare function dmxPaletteInk(palette: Uint8Array, level: number): string;
+/**
+ * How many slots of one universe are carrying anything.
+ *
+ * The only honest summary of a bar or a grid for a reader who cannot see it —
+ * and cheap enough (512 reads) to recompute on every frame that actually
+ * arrives.
+ *
+ * @param data - The frame, or a multi-universe buffer.
+ * @param offset - Where this universe starts in `data`. Defaults to `0`.
+ * @param slots - How many slots to read. Defaults to a full universe.
+ */
+declare function activeChannels(data: Uint8Array | undefined, offset?: number, slots?: number): number;
+//#endregion
+export { DMX_RAMP_NAMES, DMX_SLOTS, DmxRamp, VALUE_RAMP_TOKENS, activeChannels, dmxPalette, dmxPaletteColor, dmxPaletteInk };

package/dist/dmx/_ramp.js

@@ -0,0 +1,169 @@
+import { resolveToken } from "../charts/_token.js";
+import { converter, parse } from "culori";
+//#region src/dmx/_ramp.ts
+/**
+* The byte layer: how big a universe is, and what colour a level is.
+*
+* Everything in this group repaints at frame rate, which rules out doing colour
+* work per cell per frame. So the conversion happens once, into a 768-byte
+* lookup table, and a repaint is three array reads. That is the whole reason
+* these are `Uint8Array`s rather than a `(level) => string` function.
+*
+* Two ramps, for two different questions:
+*
+* - **mono** answers "how bright is this channel?" — and answers it by *being*
+*   that brightness. The byte is the grey, with no conversion at all, which is
+*   the reading a lighting operator already has in their hands from the desk.
+*   It is the one place in this system that does not read a colour token, and
+*   the reason is the same reason `--cue-data-ground` is true black in every
+*   theme: a level readout that a theme could re-tint is a level readout you
+*   cannot trust.
+* - **value** answers "which channels are hot?" — and for that it borrows the
+*   status vocabulary the rest of the console already means something by:
+*   ground, then info, ok, warn, danger. Those *are* tokens, resolved against
+*   the theme in force where the grid is mounted, so the ramp re-hues with the
+*   theme like every other colour here.
+*
+* @internal Not part of the public API surface beyond the `/dmx` barrel.
+*/
+/** Channels in one DMX512 universe. Not a preference — it is the protocol. */
+const DMX_SLOTS = 512;
+/** Levels a DMX slot can carry: a single byte. */
+const LEVELS = 256;
+/** The highest level, and the divisor every ramp position is taken against. */
+const MAX_LEVEL = 255;
+/** The two cell colourings, in the order a picker should offer them. */
+const DMX_RAMP_NAMES = ["mono", "value"];
+/**
+* The tokens the value ramp interpolates through, dark end first.
+*
+* Read as names rather than as colours so the ramp follows a theme switch, and
+* so a console that retunes its `warn` retunes its channel grid with it.
+*/
+const VALUE_RAMP_TOKENS = [
+	"data-ground",
+	"info",
+	"ok",
+	"warn",
+	"danger"
+];
+/**
+* dmxhub's own stops, kept as the fallback for the two moments the tokens
+* cannot be read: a server render, and a test DOM with no stylesheet. Without
+* them the ramp would collapse to black and a grid would go blank in SSR.
+*/
+const VALUE_RAMP_FALLBACK = [
+	"#000000",
+	"#0066ff",
+	"#00cc66",
+	"#ff9500",
+	"#ff3333"
+];
+const toRgb = converter("rgb");
+/** A CSS colour as three 0-255 channels, or `null` when it will not parse. */
+function toBytes(color) {
+	const parsed = parse(color);
+	if (parsed === void 0) return null;
+	const rgb = toRgb(parsed);
+	if (rgb === void 0) return null;
+	return [
+		byte(rgb.r * MAX_LEVEL),
+		byte(rgb.g * MAX_LEVEL),
+		byte(rgb.b * MAX_LEVEL)
+	];
+}
+/** Round and clamp into the range a channel of anything here can hold. */
+function byte(value) {
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(MAX_LEVEL, Math.max(0, Math.round(value)));
+}
+/** Grey, straight off the wire: level 137 is `rgb(137,137,137)`. */
+function monoPalette() {
+	const palette = new Uint8Array(LEVELS * 3);
+	for (let level = 0; level < LEVELS; level += 1) {
+		palette[level * 3] = level;
+		palette[level * 3 + 1] = level;
+		palette[level * 3 + 2] = level;
+	}
+	return palette;
+}
+/** Linear interpolation across the resolved stops, one entry per level. */
+function valuePalette(element) {
+	const stops = VALUE_RAMP_TOKENS.map((token, index) => {
+		const fallback = VALUE_RAMP_FALLBACK[index];
+		const resolved = resolveToken(token, element);
+		return (resolved === null ? null : toBytes(resolved)) ?? toBytes(fallback);
+	});
+	const palette = new Uint8Array(LEVELS * 3);
+	const last = stops.length - 1;
+	for (let level = 0; level < LEVELS; level += 1) {
+		const position = level / MAX_LEVEL * last;
+		const index = Math.min(Math.floor(position), last - 1);
+		const fraction = position - index;
+		const from = stops[index];
+		const to = stops[index + 1];
+		for (let channel = 0; channel < 3; channel += 1) palette[level * 3 + channel] = byte(from[channel] + (to[channel] - from[channel]) * fraction);
+	}
+	return palette;
+}
+/**
+* The 256-entry lookup table for a ramp: `[r, g, b]` per level, flat.
+*
+* Rebuild it whenever the theme the grid is mounted in changes — it is a
+* snapshot of resolved tokens, not a live binding.
+*
+* @param ramp - Which colouring. Defaults to `"mono"`.
+* @param element - Where the value ramp's tokens resolve. Defaults to the
+*   document element; pass a node inside a portal or a nested theme for that
+*   scope. Ignored by `"mono"`, which reads no tokens.
+*/
+function dmxPalette(ramp = "mono", element) {
+	return ramp === "value" ? valuePalette(element) : monoPalette();
+}
+/** The `rgb()` string for a level. Out-of-range input clamps into a real slot. */
+function dmxPaletteColor(palette, level) {
+	const index = byte(level) * 3;
+	return `rgb(${palette[index]}, ${palette[index + 1]}, ${palette[index + 2]})`;
+}
+/** WCAG relative luminance of an 8-bit sRGB triple. */
+function luminance(red, green, blue) {
+	const channel = (value) => {
+		const srgb = value / MAX_LEVEL;
+		return srgb <= .03928 ? srgb / 12.92 : ((srgb + .055) / 1.055) ** 2.4;
+	};
+	return .2126 * channel(red) + .7152 * channel(green) + .0722 * channel(blue);
+}
+/**
+* Ink for the number printed *inside* a cell: whichever of black or white has
+* the better contrast against the cell's own fill.
+*
+* The ports this replaces each carried a hand-tuned cutoff (`v > 150` in one
+* mode, `v > 140` in the other), which is two magic numbers that disagree with
+* each other and neither of which survives a re-tinted ramp. One contrast
+* calculation answers it for any ramp, in any theme.
+*/
+function dmxPaletteInk(palette, level) {
+	const index = byte(level) * 3;
+	const relative = luminance(palette[index], palette[index + 1], palette[index + 2]);
+	return (relative + .05) / .05 >= 1.05 / (relative + .05) ? "#000000" : "#ffffff";
+}
+/**
+* How many slots of one universe are carrying anything.
+*
+* The only honest summary of a bar or a grid for a reader who cannot see it —
+* and cheap enough (512 reads) to recompute on every frame that actually
+* arrives.
+*
+* @param data - The frame, or a multi-universe buffer.
+* @param offset - Where this universe starts in `data`. Defaults to `0`.
+* @param slots - How many slots to read. Defaults to a full universe.
+*/
+function activeChannels(data, offset = 0, slots = 512) {
+	if (data === void 0) return 0;
+	let active = 0;
+	const end = Math.min(data.length, offset + slots);
+	for (let index = offset; index < end; index += 1) if (data[index] > 0) active += 1;
+	return active;
+}
+//#endregion
+export { DMX_RAMP_NAMES, DMX_SLOTS, VALUE_RAMP_TOKENS, activeChannels, dmxPalette, dmxPaletteColor, dmxPaletteInk };

package/dist/dmx/_readout.js

@@ -0,0 +1,53 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { overlaySurfaceClasses } from "../overlays/_surface.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/dmx/_readout.tsx
+/**
+* The `CH n · v` chip every renderer in this group shows under the cursor.
+*
+* It is portaled rather than positioned inside the instrument for the reason
+* every floating surface in this system is: a DMX bar lives inside a node
+* graph, a resizable panel or a scroll container, any of which will clip or
+* transform an absolutely positioned child. The stamped container from
+* `useCuePortalProps` is what keeps the chip in the caller's theme once it is
+* re-parented to `document.body`.
+*
+* `valueRef` exists because the number changes at frame rate. A component that
+* re-rendered to update it would put React on the hot path of a 40 Hz stream;
+* the renderers write to this span directly instead, and React only hears about
+* the channel changing.
+*
+* @internal Not part of the public API.
+*/
+/** Gap in px between the cursor's row and the chip's lower edge. */
+const READOUT_GAP = 7;
+/** The floating channel readout. Renders `null` until the portal root exists. */
+function DmxReadout({ container, channel, value, x, y, valueRef }) {
+	if (container === void 0) return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		"data-slot": "dmx-readout",
+		className: cn(overlaySurfaceClasses, "pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full px-(--cue-space-2) py-px font-mono text-(length:--cue-text-micro) whitespace-nowrap tabular-nums text-fg-muted"),
+		style: {
+			left: x,
+			top: y - READOUT_GAP
+		},
+		children: [
+			"CH ",
+			/* @__PURE__ */ jsx("span", {
+				className: "text-fg",
+				children: channel
+			}),
+			" · ",
+			/* @__PURE__ */ jsx("span", {
+				ref: valueRef,
+				className: "text-accent",
+				children: value
+			})
+		]
+	}), container);
+}
+//#endregion
+export { DmxReadout };

package/dist/dmx/_universe.d.ts

@@ -0,0 +1,105 @@
+//#region src/dmx/_universe.d.ts
+/**
+ * Patch arithmetic: turning "this fixture starts at 129 and eats 32 channels"
+ * into a position on a bar, and finding the places two fixtures were given the
+ * same slot.
+ *
+ * Kept out of the component because a conflict is a fact about a patch, not
+ * about a rendering of one — a console wants to know before it draws anything,
+ * and a test wants to check it without a DOM.
+ *
+ * @internal Not part of the public API surface beyond the `/dmx` barrel.
+ */
+/** Block ink, in the shared status vocabulary plus a neutral. */
+type DmxTone = "neutral" | "accent" | "ok" | "busy" | "warn" | "danger" | "info";
+/** One fixture's claim on a run of channels. */
+interface DmxAllocation {
+  /** Stable identity. Defaults to the label plus its position. */
+  id?: string;
+  /** What holds these channels: a fixture name, a group, "spare". */
+  label: string;
+  /** First channel, 1-based — the address written on the fixture. */
+  start: number;
+  /** How many channels the mode occupies. */
+  size: number;
+  /** Ink for the block. Defaults to `"neutral"`. */
+  tone?: DmxTone;
+}
+/** An inclusive run of channel addresses. */
+interface ChannelRange {
+  /** First channel, 1-based. */
+  start: number;
+  /** Last channel, 1-based and inclusive. */
+  end: number;
+}
+/** One allocation, placed. */
+interface AllocationBlock extends ChannelRange {
+  /** React key: the allocation's `id`, or its label plus position. */
+  key: string;
+  /** The allocation this came from, so a click can hand it straight back. */
+  allocation: DmxAllocation;
+  /** Convenience copy of `allocation.label`. */
+  label: string;
+  /** Resolved ink. */
+  tone: DmxTone;
+  /** Channels actually occupied after clamping. */
+  size: number;
+  /** Distance from the left edge of the universe, as a percentage. */
+  left: number;
+  /** Share of the universe, as a percentage. */
+  width: number;
+  /** Some slot of this run is claimed by another allocation too. */
+  conflict: boolean;
+  /** The run ran past the last slot and was cut short. */
+  clipped: boolean;
+}
+/** A patch, placed. */
+interface UniverseLayout {
+  /** How many slots the frame holds. */
+  slots: number;
+  /** The placed allocations, input order preserved. */
+  blocks: AllocationBlock[];
+  /** Contested runs, merged and in address order. */
+  conflicts: ChannelRange[];
+  /** Distinct slots claimed by at least one allocation. */
+  used: number;
+  /** `used` as a whole-number percentage of `slots`. */
+  utilisation: number;
+}
+/**
+ * The ruler's addresses: the start, the end, and every 64 in between.
+ *
+ * 64 is the interval a patch sheet is written in, so these are the numbers an
+ * operator already counts by — not a tick density chosen to fill the width.
+ */
+declare const UNIVERSE_TICKS: readonly number[];
+/**
+ * Where a channel sits along the bar, as a percentage.
+ *
+ * 1-based in, 0-based out: channel 1 is the left edge, and the last channel
+ * starts one slot short of the right one — a channel is a *slot* with width,
+ * not a point.
+ *
+ * @param channel - The address, 1-based.
+ * @param slots - Frame length. Defaults to a full universe.
+ */
+declare function channelPercent(channel: number, slots?: number): number;
+/**
+ * Place a patch on a universe bar and find its collisions.
+ *
+ * Three rules, each one a thing a patch tool has to get right:
+ *
+ * 1. **An allocation that occupies nothing is not drawn.** A zero-width block
+ *    with a two-pixel floor would draw a fixture that is not patched.
+ * 2. **A run that walks off the end is cut, not hidden** — and marked `clipped`,
+ *    because "your 32-channel fixture at 500 does not fit" is exactly the thing
+ *    the operator needs to see.
+ * 3. **Occupancy is counted in distinct slots.** Summing sizes would let a
+ *    double patch report more capacity in use than the universe has.
+ *
+ * @param allocations - The patch, in display order.
+ * @param slots - Frame length. Defaults to a full universe.
+ */
+declare function universeLayout(allocations: readonly DmxAllocation[], slots?: number): UniverseLayout;
+//#endregion
+export { AllocationBlock, ChannelRange, DmxAllocation, DmxTone, UNIVERSE_TICKS, UniverseLayout, channelPercent, universeLayout };