@cueplusplus/ui 0.13.0

package/dist/midi/piano-keyboard.js

@@ -0,0 +1,197 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { toRem } from "../instruments/_rem.js";
+import { keyboardLayout, keyboardWindow, noteAtOffset, noteName } from "./_notes.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/midi/piano-keyboard.tsx
+/** Octaves drawn when the caller does not say. Three is the ported default. */
+const DEFAULT_OCTAVES = 3;
+/** Board height in px at the 16px root: the white keys' full length. */
+const DEFAULT_KEY_HEIGHT_PX = 48;
+/** How far down the board a black key reaches, as a share of the whites. */
+const BLACK_KEY_HEIGHT = "62%";
+/** Height of the marker rail under the keys, in px at the 16px root. */
+const RAIL_HEIGHT_PX = 12;
+/** What a page key moves an edge by: one octave. */
+const OCTAVE_STEP = 12;
+/**
+* A piano keyboard as a range control: drag the markers, or arrow the edges.
+*
+* Ported from ableton-sync's note-range picker, geometry intact — 16px whites,
+* 10px blacks over the seams — and rebuilt around three things the original did
+* not have:
+*
+* 1. **The edges are sliders.** The port moved its markers with `mousedown` and
+*    a window listener, which means no keyboard, no screen reader and no touch.
+*    Here each marker is a `role="slider"` announcing its note by name, so
+*    "set the low end to C2" is reachable without a pointer.
+* 2. **The board holds still while you drag.** The window is centred on the
+*    selection, so moving an edge moves the window, which moves the note under
+*    the cursor — the port's markers slid away from the pointer mid-drag. The
+*    window is frozen for the length of a gesture instead.
+* 3. **It is drawn in console materials, not in white and black.** A photo of a
+*    piano inverts in a light theme; a `surface-3` white key and a
+*    `--cue-data-ground` black key read the same in both. The information — what
+*    is in range, what is sounding — is carried by the accent, which is the only
+*    thing here that a theme is allowed to move.
+*
+* @example
+* <PianoKeyboard range={range} onRangeChange={setRange} highlight={sounding} />
+*/
+const PianoKeyboard = React.forwardRef(function PianoKeyboard({ className, range: rangeProp, defaultRange = {
+	start: 48,
+	end: 72
+}, onRangeChange, octaves = DEFAULT_OCTAVES, highlight, keyHeight = DEFAULT_KEY_HEIGHT_PX, label = "Note range", readout = true, disabled = false, ...elementProps }, forwardedRef) {
+	const [uncontrolledRange, setUncontrolledRange] = React.useState(defaultRange);
+	const range = rangeProp ?? uncontrolledRange;
+	const boardRef = React.useRef(null);
+	const [drag, setDrag] = React.useState(null);
+	const settled = React.useMemo(() => keyboardWindow(range, octaves), [range, octaves]);
+	const view = drag?.window ?? settled;
+	const { start: viewStart, end: viewEnd } = view;
+	const layout = React.useMemo(() => keyboardLayout({
+		start: viewStart,
+		end: viewEnd
+	}), [viewStart, viewEnd]);
+	const lit = React.useMemo(() => new Set(highlight ?? []), [highlight]);
+	const setEdge = (edge, note) => {
+		const next = edge === "start" ? {
+			start: clamp(note, 0, range.end),
+			end: range.end
+		} : {
+			start: range.start,
+			end: clamp(note, range.start, 127)
+		};
+		if (next.start === range.start && next.end === range.end) return;
+		setUncontrolledRange(next);
+		onRangeChange?.(next);
+	};
+	const onPointerDown = (edge) => (event) => {
+		if (disabled || event.button !== 0) return;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		setDrag({
+			edge,
+			pointerId: event.pointerId,
+			window: view
+		});
+	};
+	const onPointerMove = (event) => {
+		if (drag === null || drag.pointerId !== event.pointerId) return;
+		const box = boardRef.current?.getBoundingClientRect();
+		if (box === void 0 || box.width === 0) return;
+		const offset = (event.clientX - box.left) / box.width * layout.width;
+		setEdge(drag.edge, noteAtOffset(offset, drag.window));
+	};
+	const endDrag = (event) => {
+		if (drag === null || drag.pointerId !== event.pointerId) return;
+		event.currentTarget.releasePointerCapture?.(event.pointerId);
+		setDrag(null);
+	};
+	const onKeyDown = (edge) => (event) => {
+		if (disabled) return;
+		const note = edge === "start" ? range.start : range.end;
+		let next = null;
+		if (event.key === "ArrowRight" || event.key === "ArrowUp") next = note + 1;
+		else if (event.key === "ArrowLeft" || event.key === "ArrowDown") next = note - 1;
+		else if (event.key === "PageUp") next = note + OCTAVE_STEP;
+		else if (event.key === "PageDown") next = note - OCTAVE_STEP;
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = 127;
+		if (next === null) return;
+		event.preventDefault();
+		setEdge(edge, next);
+	};
+	const boardStyle = { width: toRem(layout.width) };
+	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardedRef,
+		"data-slot": "piano-keyboard",
+		role: "group",
+		"aria-label": label,
+		className: cn("inline-flex flex-col gap-(--cue-space-1) select-none", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: boardRef,
+			"data-slot": "piano-keyboard-board",
+			className: "relative",
+			style: boardStyle,
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "piano-keyboard-keys",
+				className: "relative overflow-hidden rounded-(--radius-control) border border-border bg-sunken",
+				style: { height: toRem(keyHeight) },
+				children: layout.keys.map((key) => {
+					const inRange = key.note >= range.start && key.note <= range.end;
+					const sounding = lit.has(key.note);
+					return /* @__PURE__ */ jsx("span", {
+						"data-slot": "piano-key",
+						"data-note": key.note,
+						"data-black": String(key.black),
+						"data-in-range": String(inRange),
+						"data-lit": String(sounding),
+						title: key.name,
+						className: keyClasses(key.black, inRange, sounding),
+						style: {
+							left: toRem(key.left),
+							width: toRem(key.width),
+							height: key.black ? BLACK_KEY_HEIGHT : "100%"
+						}
+					}, key.note);
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				"data-slot": "piano-keyboard-rail",
+				className: "relative",
+				style: { height: toRem(RAIL_HEIGHT_PX) },
+				children: ["start", "end"].map((edge) => {
+					const note = edge === "start" ? range.start : range.end;
+					const key = layout.keys.find((candidate) => candidate.note === note);
+					if (key === void 0) return null;
+					return /* @__PURE__ */ jsx("div", {
+						role: "slider",
+						"data-slot": "piano-keyboard-marker",
+						"data-edge": edge,
+						"data-dragging": String(drag?.edge === edge),
+						tabIndex: disabled ? -1 : 0,
+						"aria-label": `${label} ${edge}`,
+						"aria-valuenow": note,
+						"aria-valuemin": edge === "start" ? 0 : range.start,
+						"aria-valuemax": edge === "start" ? range.end : 127,
+						"aria-valuetext": noteName(note),
+						"aria-disabled": disabled ? true : void 0,
+						onPointerDown: onPointerDown(edge),
+						onPointerMove,
+						onPointerUp: endDrag,
+						onPointerCancel: endDrag,
+						onKeyDown: onKeyDown(edge),
+						className: cn("absolute top-0 flex h-full -translate-x-1/2 touch-none items-start justify-center rounded-(--radius-control) px-px outline-none", "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", disabled ? "cursor-default opacity-40" : "cursor-ew-resize"),
+						style: { left: toRem(key.left + key.width / 2) },
+						children: /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							"data-slot": "piano-keyboard-marker-glyph",
+							className: "h-0 w-0 border-x-[3px] border-b-[4px] border-x-transparent border-b-accent"
+						})
+					}, edge);
+				})
+			})]
+		}), readout ? /* @__PURE__ */ jsx("p", {
+			"data-slot": "piano-keyboard-readout",
+			className: "font-mono text-(length:--cue-text-micro) text-fg-subtle tabular-nums",
+			children: `${noteName(range.start)} to ${noteName(range.end)} · ${range.end - range.start + 1} notes`
+		}) : null]
+	});
+});
+/**
+* Ink for one key.
+*
+* Computed rather than left to `data-[…]` variants because three states stack
+* onto one property and CSS would decide the winner by stylesheet order, which
+* is not something this component gets to control.
+*/
+function keyClasses(black, inRange, sounding) {
+	return cn("absolute top-0 border transition-colors motion-reduce:transition-none", black ? "z-10 rounded-b-[2px] border-border-strong" : "rounded-b-[2px] border-border", sounding ? "bg-accent" : inRange ? black ? "bg-accent/45" : "bg-accent-soft" : black ? "bg-(--cue-data-ground)" : "bg-surface-3");
+}
+/** Keep a note inside a pair of bounds. */
+function clamp(note, low, high) {
+	return Math.min(high, Math.max(low, note));
+}
+//#endregion
+export { PianoKeyboard };

package/dist/midi/spectrum-visualizer.d.ts

@@ -0,0 +1,65 @@
+import { FrequencyBand, RampName } from "../charts/ramps.js";
+import * as React from "react";
+//#region src/midi/spectrum-visualizer.d.ts
+/**
+ * Backing-store width before anything measures the element.
+ *
+ * The same 600 the `UsageChart` draws into: wide enough that a 31-band analyser
+ * gets 19 pixels a bar, narrow enough to be cheap. A `ResizeObserver` replaces
+ * it with the real width as soon as there is one.
+ */
+declare const SPECTRUM_WIDTH = 600;
+/** How a spectrum is drawn. */
+type SpectrumMode = "bars" | "line";
+interface SpectrumVisualizerProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /**
+   * One level per band, `0`–`1`, in the ramp's own order.
+   *
+   * Positional rather than keyed by band id: an FFT hands back an array forty
+   * times a second, and building a lookup per frame to match it up is work for
+   * no information.
+   */
+  levels: readonly number[] | Float32Array;
+  /** The bands: a ramp from `/charts` by name, or a band list. Defaults to `"bands-7"`. */
+  ramp?: RampName | readonly FrequencyBand[];
+  /** Bars or a line trace. Defaults to `"bars"`. */
+  mode?: SpectrumMode;
+  /** Trigger levels to rule, one per band or one for all of them. */
+  thresholds?: number | readonly number[];
+  /** Band ids to keep bright. Empty or absent means every band is bright. */
+  selected?: readonly string[];
+  /** Display gain applied to every level before drawing. Defaults to `1`. */
+  sensitivity?: number;
+  /** Graph height in px at the 16px root, emitted as `rem`. Defaults to `96`. */
+  height?: number;
+  /** List the band names under the graph. Defaults to `true`. */
+  labels?: boolean;
+  /** What is being analysed. Defaults to `"Spectrum"`. */
+  label?: string;
+}
+/**
+ * The FFT, drawn: one bar per frequency band, or one line across all of them.
+ *
+ * Ported from ableton-sync's analyser, with the colours taken off the caller's
+ * hands. The original asked for a `color` per band and defaulted to `#00FF00`
+ * when it did not get one, which is how an audio tool ends up with two
+ * different greens for the same band in two different panels. Here the bands
+ * *are* the ramp — the same `BANDS_7`/`BANDS_10`/`BANDS_16`/`BANDS_31` the
+ * `/charts` subpath publishes — so bass is the same red in the analyser, in the
+ * legend and in any chart of the same data.
+ *
+ * Those ramps are deliberately theme-independent (see `charts/ramps.tsx`): a
+ * listener who has learnt "bass is red" must not have to relearn it because the
+ * console switched to a different accent. Everything *around* the data — the
+ * grid, the line trace — does read tokens, and is resolved at paint time so a
+ * theme switch needs no subscription.
+ *
+ * Selection dims rather than hides. A band that vanished when deselected would
+ * change the shape of the spectrum, and the shape is the reading.
+ *
+ * @example
+ * <SpectrumVisualizer levels={fft} ramp="bands-31" thresholds={0.7} />
+ */
+declare const SpectrumVisualizer: React.ForwardRefExoticComponent<SpectrumVisualizerProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SPECTRUM_WIDTH, SpectrumMode, SpectrumVisualizer, SpectrumVisualizerProps };

package/dist/midi/spectrum-visualizer.js

@@ -0,0 +1,213 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { useComposedRefs } from "../lib/compose.js";
+import { toRem } from "../instruments/_rem.js";
+import { resolveToken } from "../charts/_token.js";
+import { RAMPS } from "../charts/ramps.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/midi/spectrum-visualizer.tsx
+/**
+* Backing-store width before anything measures the element.
+*
+* The same 600 the `UsageChart` draws into: wide enough that a 31-band analyser
+* gets 19 pixels a bar, narrow enough to be cheap. A `ResizeObserver` replaces
+* it with the real width as soon as there is one.
+*/
+const SPECTRUM_WIDTH = 600;
+/** Default graph height in px at the 16px root. */
+const DEFAULT_HEIGHT_PX = 96;
+/** How far a band outside the selection is faded. */
+const DIM_ALPHA = .2;
+/** Opacity of a threshold rule, selected and not. */
+const RULE_ALPHA = .5;
+const RULE_ALPHA_DIM = .1;
+/** Horizontal grid divisions. Five lines: 0, 25, 50, 75 and 100 per cent. */
+const GRID_LINES = 4;
+/** Share of a bar's slot left as breathing room, split between its two sides. */
+const BAR_PADDING = .1;
+/** Ink for the grid when the token cannot be read (server render, bare test DOM). */
+const GRID_FALLBACK = "#2a2a2a";
+/** Ink for the line trace when the accent cannot be read. */
+const TRACE_FALLBACK = "#8a8a8a";
+/**
+* The FFT, drawn: one bar per frequency band, or one line across all of them.
+*
+* Ported from ableton-sync's analyser, with the colours taken off the caller's
+* hands. The original asked for a `color` per band and defaulted to `#00FF00`
+* when it did not get one, which is how an audio tool ends up with two
+* different greens for the same band in two different panels. Here the bands
+* *are* the ramp — the same `BANDS_7`/`BANDS_10`/`BANDS_16`/`BANDS_31` the
+* `/charts` subpath publishes — so bass is the same red in the analyser, in the
+* legend and in any chart of the same data.
+*
+* Those ramps are deliberately theme-independent (see `charts/ramps.tsx`): a
+* listener who has learnt "bass is red" must not have to relearn it because the
+* console switched to a different accent. Everything *around* the data — the
+* grid, the line trace — does read tokens, and is resolved at paint time so a
+* theme switch needs no subscription.
+*
+* Selection dims rather than hides. A band that vanished when deselected would
+* change the shape of the spectrum, and the shape is the reading.
+*
+* @example
+* <SpectrumVisualizer levels={fft} ramp="bands-31" thresholds={0.7} />
+*/
+const SpectrumVisualizer = React.forwardRef(function SpectrumVisualizer({ className, levels, ramp = "bands-7", mode = "bars", thresholds, selected, sensitivity = 1, height = DEFAULT_HEIGHT_PX, labels = true, label = "Spectrum", ...elementProps }, forwardedRef) {
+	const rootRef = React.useRef(null);
+	const ref = useComposedRefs(forwardedRef, rootRef);
+	const canvasRef = React.useRef(null);
+	const [width, setWidth] = React.useState(600);
+	const bands = React.useMemo(() => typeof ramp === "string" ? RAMPS[ramp] : ramp, [ramp]);
+	const isSelected = React.useCallback((band) => selected === void 0 || selected.length === 0 || selected.includes(band.id), [selected]);
+	useIsomorphicLayoutEffect(() => {
+		const element = rootRef.current;
+		if (element === null || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver((entries) => {
+			const measured = Math.round(entries[0]?.contentRect.width ?? 0);
+			if (measured > 0) setWidth(measured);
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		const canvas = canvasRef.current;
+		const context = canvas?.getContext("2d");
+		if (!canvas || !context) return;
+		context.clearRect(0, 0, width, height);
+		drawGrid(context, width, height, resolveToken("border", canvas) ?? GRID_FALLBACK);
+		const slot = width / Math.max(1, bands.length);
+		const points = bands.map((band, index) => ({
+			band,
+			x: mode === "bars" ? index * slot : index / Math.max(1, bands.length - 1) * width,
+			y: height - amplitude(levels[index], sensitivity) * height,
+			bright: isSelected(band)
+		}));
+		if (mode === "bars") {
+			const padding = slot * BAR_PADDING;
+			for (const point of points) {
+				const barHeight = height - point.y;
+				if (barHeight <= 0) continue;
+				context.globalAlpha = point.bright ? 1 : DIM_ALPHA;
+				context.fillStyle = point.band.color;
+				context.fillRect(point.x + padding, point.y, slot - padding * 2, barHeight);
+			}
+			context.globalAlpha = 1;
+		} else drawTrace(context, points.map((point) => [point.x, point.y]), width, height, resolveToken("accent", canvas) ?? TRACE_FALLBACK);
+		context.lineWidth = 1;
+		context.setLineDash([2, 2]);
+		points.forEach((point, index) => {
+			const threshold = thresholdAt(thresholds, index);
+			if (threshold === void 0) return;
+			const y = height - clamp01(threshold) * height;
+			context.globalAlpha = point.bright ? RULE_ALPHA : RULE_ALPHA_DIM;
+			context.strokeStyle = point.band.color;
+			context.beginPath();
+			context.moveTo(mode === "bars" ? point.x : point.x - slot / 2, y);
+			context.lineTo(mode === "bars" ? point.x + slot : point.x + slot / 2, y);
+			context.stroke();
+		});
+		context.setLineDash([]);
+		context.globalAlpha = 1;
+	}, [
+		bands,
+		height,
+		isSelected,
+		levels,
+		mode,
+		sensitivity,
+		thresholds,
+		width
+	]);
+	const loudest = bands.reduce((best, band, index) => {
+		const level = clamp01(Number(levels[index] ?? 0));
+		return best === null || level > best.level ? {
+			band,
+			level
+		} : best;
+	}, null);
+	const summary = loudest === null || loudest.level <= 0 ? `${label}: ${bands.length} bands, silent` : `${label}: ${bands.length} bands, loudest ${loudest.band.label} at ${Math.round(loudest.level * 100)}%`;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "spectrum-visualizer",
+		className: cn("min-w-0", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("canvas", {
+			ref: canvasRef,
+			width,
+			height,
+			role: "img",
+			"aria-label": summary,
+			"data-slot": "spectrum-visualizer-canvas",
+			"data-mode": mode,
+			className: "block w-full rounded-(--radius-control) border border-border bg-(--cue-data-ground)",
+			style: { height: toRem(height) }
+		}), labels ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "spectrum-visualizer-legend",
+			className: "mt-(--cue-space-1) flex font-mono text-(length:--cue-text-micro)",
+			children: bands.map((band) => /* @__PURE__ */ jsx("span", {
+				"data-slot": "spectrum-visualizer-band",
+				"data-selected": String(isSelected(band)),
+				className: "flex-1 truncate px-px text-center data-[selected=false]:opacity-40",
+				style: { color: band.color },
+				children: band.label
+			}, band.id))
+		}) : null]
+	});
+});
+/** The horizontal reference lines, dashed and faint. */
+function drawGrid(context, width, height, ink) {
+	context.globalAlpha = .45;
+	context.strokeStyle = ink;
+	context.lineWidth = 1;
+	context.setLineDash([1, 3]);
+	for (let line = 0; line <= GRID_LINES; line += 1) {
+		const y = height / GRID_LINES * line;
+		context.beginPath();
+		context.moveTo(0, y);
+		context.lineTo(width, y);
+		context.stroke();
+	}
+	context.setLineDash([]);
+	context.globalAlpha = 1;
+}
+/** The line mode: a filled skirt under a two-pixel trace. */
+function drawTrace(context, points, width, height, ink) {
+	const gradient = context.createLinearGradient(0, height, 0, 0);
+	gradient.addColorStop(0, "transparent");
+	gradient.addColorStop(1, ink);
+	context.globalAlpha = .18;
+	context.beginPath();
+	context.moveTo(0, height);
+	for (const [x, y] of points) context.lineTo(x, y);
+	context.lineTo(width, height);
+	context.closePath();
+	context.fillStyle = gradient;
+	context.fill();
+	context.globalAlpha = 1;
+	context.beginPath();
+	points.forEach(([x, y], index) => {
+		if (index === 0) context.moveTo(x, y);
+		else context.lineTo(x, y);
+	});
+	context.strokeStyle = ink;
+	context.lineWidth = 2;
+	context.stroke();
+}
+/** A level, gained and clamped to full scale. */
+function amplitude(level, sensitivity) {
+	return clamp01(Number(level ?? 0) * sensitivity);
+}
+/** The threshold that applies to a band: one for all, one each, or none. */
+function thresholdAt(thresholds, index) {
+	if (thresholds === void 0) return void 0;
+	return typeof thresholds === "number" ? thresholds : thresholds[index];
+}
+/** Keep a level inside `[0, 1]`, treating nonsense as silence. */
+function clamp01(value) {
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(1, Math.max(0, value));
+}
+//#endregion
+export { SPECTRUM_WIDTH, SpectrumVisualizer };

package/dist/midi/threshold-rail.d.ts

@@ -0,0 +1,72 @@
+import * as React from "react";
+//#region src/midi/threshold-rail.d.ts
+/** Ink for a zone of the rail, in the shared status vocabulary. */
+type ThresholdTone = "accent" | "ok" | "busy" | "warn" | "danger" | "info";
+interface ThresholdRailProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
+  /** The (upper) threshold, `0`–`1`. Always controlled. */
+  value: number;
+  /** Called with the next upper threshold. */
+  onChange: (value: number) => void;
+  /** The lower threshold. Supplying it turns the rail into a window. */
+  lower?: number;
+  /** Called with the next lower threshold. */
+  onLowerChange?: (value: number) => void;
+  /**
+   * Called once per finished gesture with both thresholds: pointer-up after a
+   * drag, or each key step. Hang undo entries and network writes here —
+   * `onChange` fires on every frame of a drag.
+   */
+  onCommit?: (thresholds: {
+    upper: number;
+    lower?: number;
+  }) => void;
+  /** Live signal level, `0`–`1`, drawn as a fill. Absent draws no fill. */
+  level?: number;
+  /** Peak-hold position, `0`–`1`. `null` or absent draws no needle. */
+  peak?: number | null;
+  /** Grid the handles snap to. Defaults to `0.01`. */
+  step?: number;
+  /** Closest the two handles may get. Defaults to `0.01`. */
+  minGap?: number;
+  /** Ink for the zones outside the window. Defaults to `"danger"`. */
+  belowTone?: ThresholdTone;
+  /** Ink for the armed zone. Defaults to `"ok"`. */
+  aboveTone?: ThresholdTone;
+  /** Refuse every gesture. */
+  disabled?: boolean;
+  /** What is being thresholded. Names the handles. Defaults to `"Threshold"`. */
+  label?: string;
+  /** Format a value for the handle's spoken text. Defaults to `"62%"`. */
+  formatValue?: (value: number) => string;
+}
+/**
+ * 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} />
+ */
+declare const ThresholdRail: React.ForwardRefExoticComponent<ThresholdRailProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ThresholdRail, ThresholdRailProps, ThresholdTone };