@cueplusplus/ui 0.13.0

package/dist/dmx/_universe.js

@@ -0,0 +1,112 @@
+import "./_ramp.js";
+//#region src/dmx/_universe.ts
+/**
+* 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.
+*/
+const UNIVERSE_TICKS = [
+	1,
+	64,
+	128,
+	192,
+	256,
+	320,
+	384,
+	448,
+	512
+];
+/**
+* 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.
+*/
+function channelPercent(channel, slots = 512) {
+	return (channel - 1) / slots * 100;
+}
+/**
+* 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.
+*/
+function universeLayout(allocations, slots = 512) {
+	const placed = [];
+	for (const [index, allocation] of allocations.entries()) {
+		if (!Number.isFinite(allocation.start) || !Number.isFinite(allocation.size)) continue;
+		const first = Math.round(allocation.start);
+		const size = Math.round(allocation.size);
+		if (size <= 0) continue;
+		const start = Math.max(1, first);
+		const end = Math.min(slots, first + size - 1);
+		if (end < start) continue;
+		placed.push({
+			allocation,
+			index,
+			start,
+			end,
+			clipped: first < 1 || first + size - 1 > slots
+		});
+	}
+	const occupancy = new Uint16Array(slots + 1);
+	for (const entry of placed) for (let channel = entry.start; channel <= entry.end; channel += 1) occupancy[channel] = occupancy[channel] + 1;
+	const conflicts = [];
+	let used = 0;
+	let run = null;
+	for (let channel = 1; channel <= slots; channel += 1) {
+		const count = occupancy[channel];
+		if (count > 0) used += 1;
+		if (count > 1) {
+			if (run === null) run = {
+				start: channel,
+				end: channel
+			};
+			else run.end = channel;
+		} else if (run !== null) {
+			conflicts.push(run);
+			run = null;
+		}
+	}
+	if (run !== null) conflicts.push(run);
+	return {
+		slots,
+		blocks: placed.map((entry) => {
+			let conflict = false;
+			for (let channel = entry.start; channel <= entry.end && !conflict; channel += 1) if (occupancy[channel] > 1) conflict = true;
+			return {
+				key: entry.allocation.id ?? `${entry.allocation.label}#${entry.index}`,
+				allocation: entry.allocation,
+				label: entry.allocation.label,
+				tone: entry.allocation.tone ?? "neutral",
+				start: entry.start,
+				end: entry.end,
+				size: entry.end - entry.start + 1,
+				left: channelPercent(entry.start, slots),
+				width: (entry.end - entry.start + 1) / slots * 100,
+				conflict,
+				clipped: entry.clipped
+			};
+		}),
+		conflicts,
+		used,
+		utilisation: Math.round(used / slots * 100)
+	};
+}
+//#endregion
+export { UNIVERSE_TICKS, channelPercent, universeLayout };

package/dist/dmx/channel-matrix.d.ts

@@ -0,0 +1,81 @@
+import { DmxRamp } from "./_ramp.js";
+import * as React from "react";
+//#region src/dmx/channel-matrix.d.ts
+/** Columns of the detail grid. 32 × 16 is the one factorisation of 512 that reads as a page. */
+declare const CHANNEL_MATRIX_COLUMNS = 32;
+/** Rows of the detail grid. */
+declare const CHANNEL_MATRIX_ROWS = 16;
+/** Which view the matrix is showing. */
+type ChannelMatrixMode = "detail" | "overview";
+interface ChannelMatrixProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /**
+   * The frame buffer: `universes × 512` bytes, universe 0 first.
+   *
+   * Read on every animation frame rather than on every render, so mutating it
+   * in place is the intended usage — that is what makes a 40 Hz stream cost one
+   * `requestAnimationFrame` instead of one React render per packet. The one
+   * thing that does not follow an in-place write is the accessible summary,
+   * which is computed in render and so refreshes when a new reference arrives.
+   */
+  data?: Uint8Array;
+  /** How many universes the buffer holds. Defaults to `1`. */
+  universes?: number;
+  /** Selected universe, 0-based. Use with `onUniverseChange` for a controlled widget. */
+  universe?: number;
+  /** Initially selected universe for an uncontrolled widget. Defaults to `0`. */
+  defaultUniverse?: number;
+  /** Called with the universe a drill-in selected. */
+  onUniverseChange?: (universe: number) => void;
+  /** Current view. Use with `onModeChange` for a controlled widget. */
+  mode?: ChannelMatrixMode;
+  /** Initial view for an uncontrolled widget. Defaults to `"detail"`. */
+  defaultMode?: ChannelMatrixMode;
+  /** Called when the view changes, including on a drill-in. */
+  onModeChange?: (mode: ChannelMatrixMode) => void;
+  /** Cell colouring. Use with `onRampChange` for a controlled widget. */
+  ramp?: DmxRamp;
+  /** Initial cell colouring for an uncontrolled widget. Defaults to `"mono"`. */
+  defaultRamp?: DmxRamp;
+  /** Called when the colouring changes. */
+  onRampChange?: (ramp: DmxRamp) => void;
+  /** Whether frames are still arriving. Defaults to `true`; `false` stops the repaint loop. */
+  live?: boolean;
+  /** Show the view and colouring buttons. Defaults to `true`. */
+  controls?: boolean;
+  /** What this output is. Defaults to `"DMX output"`. */
+  label?: string;
+  /** Name a universe for its button and card. Defaults to `"Universe 3"` / `U03`. */
+  formatUniverse?: (universe: number) => string;
+}
+/**
+ * The channel-by-channel view: 512 addressed cells, repainted imperatively.
+ *
+ * Ported from dmxhub's bridge debugger. The interesting part is not the grid —
+ * it is what happens between frames. Five hundred and twelve React elements
+ * re-rendered forty times a second is a locked tab, so this component renders
+ * the grid *once* and then never re-renders it: an animation loop reads the
+ * buffer, diffs each slot against a previous-value cache, and writes only the
+ * cells whose level actually moved. A typical lighting state changes a handful
+ * of channels per frame, so a typical frame touches a handful of nodes.
+ *
+ * That is also why `data` is read through a ref rather than through props: a
+ * decoder that writes into one buffer forever is the cheapest thing it can do,
+ * and this component is built to be pointed at exactly that.
+ *
+ * Two things it keeps from the port, and one it fixes:
+ *
+ * - **Two ramps.** Grey answers "how bright", the status ramp answers "which
+ *   ones are hot". Both are lookup tables, built once per theme (see `_ramp.ts`).
+ * - **Overview and drill-in.** Thirty-two universes as thumbnails, drawn through
+ *   one 32×16 offscreen canvas and scaled up unsmoothed; clicking one opens it.
+ * - **It stops.** The original left `requestAnimationFrame` running forever. Here
+ *   the loop is off under `prefers-reduced-motion` and off when `live` is
+ *   `false`; a new `data` reference still repaints, so a paused stream is never
+ *   a stale grid.
+ *
+ * @example
+ * <ChannelMatrix label="Output" data={buffer} universes={32} />
+ */
+declare const ChannelMatrix: React.ForwardRefExoticComponent<ChannelMatrixProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CHANNEL_MATRIX_COLUMNS, CHANNEL_MATRIX_ROWS, ChannelMatrix, ChannelMatrixMode, ChannelMatrixProps };

package/dist/dmx/channel-matrix.js

@@ -0,0 +1,285 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { useComposedRefs } from "../lib/compose.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { DMX_RAMP_NAMES, activeChannels, dmxPalette, dmxPaletteColor, dmxPaletteInk } from "./_ramp.js";
+import { DmxReadout } from "./_readout.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/dmx/channel-matrix.tsx
+/** Columns of the detail grid. 32 × 16 is the one factorisation of 512 that reads as a page. */
+const CHANNEL_MATRIX_COLUMNS = 32;
+/** Rows of the detail grid. */
+const CHANNEL_MATRIX_ROWS = 16;
+/** Opaque alpha for every pixel of a thumbnail. */
+const OPAQUE = 255;
+/** Human labels for the ramp buttons. */
+const RAMP_LABELS = {
+	mono: "Mono",
+	value: "Value"
+};
+/**
+* The channel-by-channel view: 512 addressed cells, repainted imperatively.
+*
+* Ported from dmxhub's bridge debugger. The interesting part is not the grid —
+* it is what happens between frames. Five hundred and twelve React elements
+* re-rendered forty times a second is a locked tab, so this component renders
+* the grid *once* and then never re-renders it: an animation loop reads the
+* buffer, diffs each slot against a previous-value cache, and writes only the
+* cells whose level actually moved. A typical lighting state changes a handful
+* of channels per frame, so a typical frame touches a handful of nodes.
+*
+* That is also why `data` is read through a ref rather than through props: a
+* decoder that writes into one buffer forever is the cheapest thing it can do,
+* and this component is built to be pointed at exactly that.
+*
+* Two things it keeps from the port, and one it fixes:
+*
+* - **Two ramps.** Grey answers "how bright", the status ramp answers "which
+*   ones are hot". Both are lookup tables, built once per theme (see `_ramp.ts`).
+* - **Overview and drill-in.** Thirty-two universes as thumbnails, drawn through
+*   one 32×16 offscreen canvas and scaled up unsmoothed; clicking one opens it.
+* - **It stops.** The original left `requestAnimationFrame` running forever. Here
+*   the loop is off under `prefers-reduced-motion` and off when `live` is
+*   `false`; a new `data` reference still repaints, so a paused stream is never
+*   a stale grid.
+*
+* @example
+* <ChannelMatrix label="Output" data={buffer} universes={32} />
+*/
+const ChannelMatrix = React.forwardRef(function ChannelMatrix({ className, data, universes = 1, universe: universeProp, defaultUniverse = 0, onUniverseChange, mode: modeProp, defaultMode = "detail", onModeChange, ramp: rampProp, defaultRamp = "mono", onRampChange, live = true, controls = true, label, formatUniverse = (value) => `Universe ${value}`, ...elementProps }, forwardedRef) {
+	const [uncontrolledUniverse, setUncontrolledUniverse] = React.useState(defaultUniverse);
+	const [uncontrolledMode, setUncontrolledMode] = React.useState(defaultMode);
+	const [uncontrolledRamp, setUncontrolledRamp] = React.useState(defaultRamp);
+	const universe = universeProp ?? uncontrolledUniverse;
+	const mode = modeProp ?? uncontrolledMode;
+	const ramp = rampProp ?? uncontrolledRamp;
+	const rootRef = React.useRef(null);
+	const ref = useComposedRefs(forwardedRef, rootRef);
+	const cellsRef = React.useRef([]);
+	const thumbnailsRef = React.useRef([]);
+	const offscreenRef = React.useRef(null);
+	const imageRef = React.useRef(null);
+	const previousRef = React.useRef((/* @__PURE__ */ new Int16Array(512)).fill(-1));
+	const paletteRef = React.useRef(dmxPalette("mono"));
+	const hoverIndexRef = React.useRef(null);
+	const valueElementRef = React.useRef(null);
+	const dataRef = React.useRef(data);
+	dataRef.current = data;
+	const modeRef = React.useRef(mode);
+	modeRef.current = mode;
+	const universeRef = React.useRef(universe);
+	universeRef.current = universe;
+	const universesRef = React.useRef(universes);
+	universesRef.current = universes;
+	const [hover, setHover] = React.useState(null);
+	const portal = useCuePortalProps();
+	const reduced = usePrefersReducedMotion();
+	const streaming = live && !reduced;
+	const paint = React.useCallback(() => {
+		const bytes = dataRef.current;
+		const palette = paletteRef.current;
+		if (modeRef.current === "detail") {
+			const base = universeRef.current * 512;
+			const previous = previousRef.current;
+			for (let slot = 0; slot < 512; slot += 1) {
+				const level = bytes?.[base + slot] ?? 0;
+				if (previous[slot] === level) continue;
+				previous[slot] = level;
+				const cell = cellsRef.current[slot];
+				if (!cell) continue;
+				if (level === 0) {
+					cell.style.backgroundColor = "";
+					cell.style.color = "";
+					cell.textContent = String(slot + 1);
+				} else {
+					cell.style.backgroundColor = dmxPaletteColor(palette, level);
+					cell.style.color = dmxPaletteInk(palette, level);
+					cell.textContent = String(level);
+				}
+			}
+			const hovered = hoverIndexRef.current;
+			if (hovered !== null && valueElementRef.current !== null) valueElementRef.current.textContent = String(bytes?.[base + hovered] ?? 0);
+			return;
+		}
+		const offscreen = offscreenRef.current ??= createOffscreen();
+		const offscreenContext = offscreen?.getContext("2d");
+		if (!offscreen || !offscreenContext) return;
+		const image = imageRef.current ??= offscreenContext.createImageData(32, 16);
+		for (let index = 0; index < universesRef.current; index += 1) {
+			const thumbnail = thumbnailsRef.current[index];
+			const context = thumbnail?.getContext("2d");
+			if (!thumbnail || !context) continue;
+			const base = index * 512;
+			for (let slot = 0; slot < 512; slot += 1) {
+				const level = bytes?.[base + slot] ?? 0;
+				const offset = slot * 4;
+				image.data[offset] = palette[level * 3];
+				image.data[offset + 1] = palette[level * 3 + 1];
+				image.data[offset + 2] = palette[level * 3 + 2];
+				image.data[offset + 3] = OPAQUE;
+			}
+			offscreenContext.putImageData(image, 0, 0);
+			context.imageSmoothingEnabled = false;
+			context.drawImage(offscreen, 0, 0, 32, 16, 0, 0, thumbnail.width, thumbnail.height);
+		}
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		paletteRef.current = dmxPalette(ramp, rootRef.current);
+		previousRef.current.fill(-1);
+		paint();
+	}, [
+		paint,
+		data,
+		mode,
+		ramp,
+		universe,
+		universes
+	]);
+	React.useEffect(() => {
+		if (!streaming) return;
+		let frame = 0;
+		const loop = () => {
+			frame = requestAnimationFrame(loop);
+			paint();
+		};
+		frame = requestAnimationFrame(loop);
+		return () => cancelAnimationFrame(frame);
+	}, [streaming, paint]);
+	const selectUniverse = (next) => {
+		if (universeProp === void 0) setUncontrolledUniverse(next);
+		onUniverseChange?.(next);
+	};
+	const selectMode = (next) => {
+		if (modeProp === void 0) setUncontrolledMode(next);
+		onModeChange?.(next);
+	};
+	const selectRamp = (next) => {
+		if (rampProp === void 0) setUncontrolledRamp(next);
+		onRampChange?.(next);
+	};
+	const onCellOver = (event) => {
+		const cell = event.target.closest("[data-channel]");
+		if (cell === null) return;
+		const index = Number(cell.dataset["channel"]) - 1;
+		if (!Number.isInteger(index)) return;
+		const box = cell.getBoundingClientRect();
+		hoverIndexRef.current = index;
+		setHover({
+			index,
+			x: box.left + box.width / 2,
+			y: box.top
+		});
+	};
+	const onGridLeave = () => {
+		hoverIndexRef.current = null;
+		setHover(null);
+	};
+	const base = universe * 512;
+	const summary = `${label ?? "DMX output"}: ${activeChannels(data, base)} of 512 channels active`;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "channel-matrix",
+		"data-mode": mode,
+		"data-streaming": String(streaming),
+		className: cn("flex min-w-0 flex-col gap-(--cue-space-3)", className),
+		...elementProps,
+		children: [
+			controls ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "channel-matrix-controls",
+				className: "flex items-center gap-(--cue-space-4)",
+				children: [universes > 1 ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-(--cue-space-1)",
+					children: ["detail", "overview"].map((value) => /* @__PURE__ */ jsx(ControlButton, {
+						pressed: mode === value,
+						onClick: () => selectMode(value),
+						children: value === "detail" ? "Detail" : "Overview"
+					}, value))
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-(--cue-space-1)",
+					children: DMX_RAMP_NAMES.map((value) => /* @__PURE__ */ jsx(ControlButton, {
+						pressed: ramp === value,
+						onClick: () => selectRamp(value),
+						children: RAMP_LABELS[value]
+					}, value))
+				})]
+			}) : null,
+			mode === "detail" ? /* @__PURE__ */ jsx("div", {
+				role: "img",
+				"aria-label": summary,
+				"data-slot": "channel-matrix-grid",
+				className: "grid gap-px",
+				style: { gridTemplateColumns: `repeat(32, minmax(0, 1fr))` },
+				onMouseOver: onCellOver,
+				onMouseLeave: onGridLeave,
+				children: Array.from({ length: 512 }, (_unused, slot) => /* @__PURE__ */ jsx("div", {
+					ref: (node) => {
+						cellsRef.current[slot] = node;
+					},
+					"data-slot": "channel-matrix-cell",
+					"data-channel": slot + 1,
+					className: "flex aspect-square items-center justify-center rounded-[2px] border border-border bg-(--cue-data-ground) font-mono text-(length:--cue-text-micro) tabular-nums text-fg-subtle select-none",
+					children: slot + 1
+				}, slot))
+			}) : /* @__PURE__ */ jsx("div", {
+				"data-slot": "channel-matrix-overview",
+				className: "grid gap-(--cue-space-3)",
+				style: { gridTemplateColumns: "repeat(auto-fill, minmax(9rem, 1fr))" },
+				children: Array.from({ length: universes }, (_unused, index) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"data-slot": "channel-matrix-universe",
+					"data-universe": index,
+					"data-selected": index === universe ? "true" : void 0,
+					"aria-label": formatUniverse(index),
+					onClick: () => {
+						selectUniverse(index);
+						selectMode("detail");
+					},
+					className: "flex cursor-pointer flex-col gap-(--cue-space-2) rounded-(--radius-control) border border-border bg-surface-1 p-(--cue-space-2) text-left outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent data-[selected=true]:border-accent",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "font-mono text-(length:--cue-text-micro) tabular-nums text-fg-muted",
+						children: ["U", String(index).padStart(2, "0")]
+					}), /* @__PURE__ */ jsx("canvas", {
+						ref: (node) => {
+							thumbnailsRef.current[index] = node;
+						},
+						width: 160,
+						height: 80,
+						"aria-hidden": "true",
+						className: "block w-full rounded-[2px] bg-(--cue-data-ground) [image-rendering:pixelated]"
+					})]
+				}, index))
+			}),
+			hover === null || mode !== "detail" ? null : /* @__PURE__ */ jsx(DmxReadout, {
+				container: portal.container,
+				channel: hover.index + 1,
+				value: data?.[base + hover.index] ?? 0,
+				x: hover.x,
+				y: hover.y,
+				valueRef: valueElementRef
+			})
+		]
+	});
+});
+/** The 32×16 scratch canvas every thumbnail is drawn through. */
+function createOffscreen() {
+	if (typeof document === "undefined") return null;
+	const canvas = document.createElement("canvas");
+	canvas.width = 32;
+	canvas.height = 16;
+	return canvas;
+}
+/** One toggle of the matrix's own control strip — a chromeless mono rung. */
+function ControlButton({ pressed, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-pressed": pressed,
+		onClick,
+		className: "flex h-control-sm cursor-pointer items-center rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-label) text-fg-muted 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 aria-pressed:bg-accent-soft aria-pressed:text-accent motion-reduce:transition-none",
+		children
+	});
+}
+//#endregion
+export { CHANNEL_MATRIX_COLUMNS, CHANNEL_MATRIX_ROWS, ChannelMatrix };

package/dist/dmx/dmx-bar.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+//#region src/dmx/dmx-bar.d.ts
+interface DmxBarProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /**
+   * The current frame: one byte per channel, 512 long.
+   *
+   * Repainting is keyed on the array's *identity*, which is what a frame decoder
+   * naturally produces (a fresh buffer per packet). A buffer mutated in place
+   * will not repaint — hand a new view, or use `ChannelMatrix`, which owns an
+   * animation loop for exactly that case.
+   */
+  data?: Uint8Array;
+  /** Bar height in px at the 16px root, emitted as `rem`. Defaults to `12`. */
+  height?: number;
+  /**
+   * Whether frames are still arriving. Defaults to `true`. When `false` the bar
+   * dims and says so in its accessible name — a stalled stream and a blacked-out
+   * universe look identical otherwise.
+   */
+  live?: boolean;
+  /** What this universe is. Defaults to `"DMX output"`. */
+  label?: string;
+}
+/**
+ * The whole universe as one strip: 512 columns, black at 0, white at 255.
+ *
+ * Ported from dmxhub's bridge, where it sits under every node in the routing
+ * graph and updates at the wire rate. Three decisions are what make it cheap
+ * enough to leave running:
+ *
+ * 1. **It is a 512×1 texture, stretched.** One `putImageData` per frame paints
+ *    every channel; the browser scales it. Drawing 512 rectangles would be 512
+ *    state changes for the same picture.
+ * 2. **The pixels are never smoothed.** `image-rendering: pixelated` keeps one
+ *    channel one hard column. Interpolation here would invent levels between
+ *    channels, which is the one thing a monitoring bar must not do.
+ * 3. **The crosshair is anchored in percent, not pixels.** The bar routinely
+ *    sits inside a zoom transform (a node graph, a canvas). A pixel offset gets
+ *    scaled with the parent and drifts off the cursor; a percentage resolves in
+ *    the bar's own width and lands correctly at any zoom.
+ *
+ * The ground is `--cue-data-ground`, true black in every theme: a level of 0 is
+ * *nothing*, and it should not read as the panel it happens to sit on.
+ *
+ * @example
+ * <DmxBar label="Universe 0" data={frame} live={connected} />
+ */
+declare const DmxBar: React.ForwardRefExoticComponent<DmxBarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DmxBar, DmxBarProps };

package/dist/dmx/dmx-bar.js

@@ -0,0 +1,107 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { toRem } from "../instruments/_rem.js";
+import { activeChannels } from "./_ramp.js";
+import { DmxReadout } from "./_readout.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/dmx/dmx-bar.tsx
+/** Default bar height in px at the 16px root: readable, still an inline strip. */
+const DEFAULT_HEIGHT_PX = 12;
+/** Opaque alpha for every pixel of the texture. */
+const OPAQUE = 255;
+/**
+* The whole universe as one strip: 512 columns, black at 0, white at 255.
+*
+* Ported from dmxhub's bridge, where it sits under every node in the routing
+* graph and updates at the wire rate. Three decisions are what make it cheap
+* enough to leave running:
+*
+* 1. **It is a 512×1 texture, stretched.** One `putImageData` per frame paints
+*    every channel; the browser scales it. Drawing 512 rectangles would be 512
+*    state changes for the same picture.
+* 2. **The pixels are never smoothed.** `image-rendering: pixelated` keeps one
+*    channel one hard column. Interpolation here would invent levels between
+*    channels, which is the one thing a monitoring bar must not do.
+* 3. **The crosshair is anchored in percent, not pixels.** The bar routinely
+*    sits inside a zoom transform (a node graph, a canvas). A pixel offset gets
+*    scaled with the parent and drifts off the cursor; a percentage resolves in
+*    the bar's own width and lands correctly at any zoom.
+*
+* The ground is `--cue-data-ground`, true black in every theme: a level of 0 is
+* *nothing*, and it should not read as the panel it happens to sit on.
+*
+* @example
+* <DmxBar label="Universe 0" data={frame} live={connected} />
+*/
+const DmxBar = React.forwardRef(function DmxBar({ className, data, height = DEFAULT_HEIGHT_PX, live = true, label, ...elementProps }, ref) {
+	const canvasRef = React.useRef(null);
+	const [hover, setHover] = React.useState(null);
+	const portal = useCuePortalProps();
+	useIsomorphicLayoutEffect(() => {
+		const context = canvasRef.current?.getContext("2d");
+		if (!context) return;
+		const image = context.createImageData(512, 1);
+		for (let slot = 0; slot < 512; slot += 1) {
+			const level = data?.[slot] ?? 0;
+			const offset = slot * 4;
+			image.data[offset] = level;
+			image.data[offset + 1] = level;
+			image.data[offset + 2] = level;
+			image.data[offset + 3] = OPAQUE;
+		}
+		context.putImageData(image, 0, 0);
+	}, [data]);
+	const onMouseMove = (event) => {
+		const box = event.currentTarget.getBoundingClientRect();
+		if (box.width === 0) return;
+		const fraction = Math.min(.999, Math.max(0, (event.clientX - box.left) / box.width));
+		setHover({
+			index: Math.floor(fraction * 512),
+			percent: fraction * 100,
+			x: event.clientX,
+			y: box.top
+		});
+	};
+	const active = activeChannels(data);
+	const summary = `${label ?? "DMX output"}: ${active} of 512 channels active${live ? "" : ", stream idle"}`;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "dmx-bar",
+		"data-live": String(live),
+		className: cn("relative min-w-0", className),
+		onMouseMove,
+		onMouseLeave: () => setHover(null),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsx("canvas", {
+				ref: canvasRef,
+				width: 512,
+				height: 1,
+				role: "img",
+				"aria-label": summary,
+				"data-slot": "dmx-bar-canvas",
+				"data-live": String(live),
+				className: "block w-full cursor-crosshair rounded-(--radius-control) border border-border bg-(--cue-data-ground) [image-rendering:pixelated] data-[live=false]:opacity-45",
+				style: { height: toRem(height) }
+			}),
+			hover === null ? null : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "dmx-bar-crosshair",
+				className: "pointer-events-none absolute -inset-y-px w-px bg-accent",
+				style: { left: `${hover.percent}%` }
+			}),
+			hover === null ? null : /* @__PURE__ */ jsx(DmxReadout, {
+				container: portal.container,
+				channel: hover.index + 1,
+				value: data?.[hover.index] ?? 0,
+				x: hover.x,
+				y: hover.y
+			})
+		]
+	});
+});
+//#endregion
+export { DmxBar };

package/dist/dmx/dmx-strip.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+//#region src/dmx/dmx-strip.d.ts
+interface DmxStripProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** Columns, one per simulated channel. Defaults to `128`. */
+  cells?: number;
+  /** Strip height in px at the 16px root, emitted as `rem`. Defaults to `14`. */
+  height?: number;
+  /** Seed for the whole simulation. The same seed always plays the same way. Defaults to `1`. */
+  seed?: number;
+  /** Run the simulation. Defaults to `true`; `false` holds the seeded first frame. */
+  simulate?: boolean;
+  /** What the strip depicts. Defaults to `"Simulated DMX activity"`. */
+  label?: string;
+}
+/**
+ * `DmxBar`'s picture with no console behind it — a lighting rig, simulated.
+ *
+ * This is the marketing device from dmxhub's site: the same 1px-tall pixelated
+ * canvas the bridge uses for real output, driven by a model of a plausible rig
+ * instead of a wire. Channels are grouped into six-channel fixtures; most sit
+ * where they were left, some are dark, and every so often one re-cues and
+ * crossfades to its new level. That grouping is what makes it read as *lighting*
+ * rather than as noise — a random 512 bytes looks like static, and a rig does
+ * not.
+ *
+ * Everything about it is seeded, including the re-cues the original left to
+ * `Math.random()`. A screenshot, a visual-regression run and a test all see the
+ * same rig from the same `seed`.
+ *
+ * Under `prefers-reduced-motion` the strip paints its first frame and stops.
+ * There is no information in the animation — the point of the component is the
+ * texture — so stilling it costs the reader nothing.
+ *
+ * @example
+ * <DmxStrip seed={7} />
+ * @example
+ * <DmxStrip cells={256} simulate={false} label="Rig activity" />
+ */
+declare const DmxStrip: React.ForwardRefExoticComponent<DmxStripProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DmxStrip, DmxStripProps };