@xsynaptic/sonic-ui 0.6.1 → 0.9.0

package/dist/default/elements/wavestrip.js

@@ -4,7 +4,7 @@ import { readPxProperty } from "../lib/read-px-property.js";
 import { sortedRegions } from "../lib/time-regions.js";
 import { SonicWaveElement } from "./wave-element.js";
 import { createMarkerBand } from "../lib/marker-band.js";
-import { stripBars, stripRegions } from "../lib/strip-scene.js";
+import { stripBars, stripGroove, stripRegions } from "../lib/strip-scene.js";
 
 //#region src/elements/wavestrip.ts
 const colours = {
@@ -15,6 +15,7 @@ const colours = {
 };
 const lengths = {
 	gapRatio: "--_sonic-wavestrip-bar-gap-ratio",
+	grooveRatio: "--_sonic-wavestrip-groove-ratio",
 	pitch: "--_sonic-wavestrip-bar-pitch",
 	radiusRatio: "--_sonic-wavestrip-bar-radius-ratio"
 };
@@ -72,11 +73,9 @@ var SonicWavestrip = class extends SonicWaveElement {
 	colours = colours;
 	lengths = lengths;
 	sheet = "wavestrip.css";
+	sizeProperty = "--_sonic-wavestrip-size";
 	#bars;
 	#buffered = [];
-	#escapeWatch;
-	#hover;
-	#isHoverDismissed = false;
 	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
 	#paintedKey = "";
 	#peaks;
@@ -85,14 +84,26 @@ var SonicWavestrip = class extends SonicWaveElement {
 		super.connectedCallback();
 	}
 	connect(signal) {
+		const { control } = this;
 		super.connect(signal);
-		this.#bindHover(this.control, signal);
-		this.bindGestures(this.control, signal, (event) => this.#grab(event));
+		this.bindHover(control, signal, {
+			canShow: () => this.readout,
+			place: () => {
+				this.#placeReadout();
+			},
+			valueAt: (event) => {
+				const axis = this.#axis();
+				const at = clampProportion((event.clientX - axis.startPx) / axis.travelPx);
+				const mapping = this.mapping();
+				return this.#markerAt(event, axis) ?? mapping.snap(mapping.valueAt(at));
+			}
+		});
+		this.bindGestures(control, signal, (event) => this.#grab(event));
 	}
 	draw() {
 		const surface = this.surface();
-		if (this.isEditing() || this.isRevealed()) this.#hover = void 0;
 		this.#placeReadout();
+		this.showCurrentMarker(this.playback());
 		if (surface && this.#stripRegions(surface.size.width).key !== this.#paintedKey) surface.requestFrame();
 	}
 	isEmpty() {
@@ -113,9 +124,6 @@ var SonicWavestrip = class extends SonicWaveElement {
 			look.colours[kind]
 		]);
 	}
-	previewValue() {
-		return this.#hover;
-	}
 	renderMarkers() {
 		this.#markerBand.render(this.markerList(), this.markerProportions());
 	}
@@ -132,28 +140,18 @@ var SonicWavestrip = class extends SonicWaveElement {
 		};
 	}
 	#barsFor({ isDirty, look, size }) {
-		const peaks = this.#peaks;
-		if (!peaks || peaks.length === 0) return void 0;
 		if (!isDirty && this.#bars) return this.#bars;
+		const peaks = this.#peaks;
+		const groove = stripGroove(size, look.lengths.grooveRatio);
+		const drawn = groove ? [groove] : [];
+		const bars = peaks && peaks.length > 0 ? stripBars(peaks, size, look.lengths) : drawn;
+		this.#bars = void 0;
+		if (bars.length === 0) return void 0;
 		const path = new Path2D();
-		for (const { height, radius, width, x, y } of stripBars(peaks, size, look.lengths)) path.roundRect(x, y, width, height, radius);
+		for (const { height, radius, width, x, y } of bars) path.roundRect(x, y, width, height, radius);
 		this.#bars = path;
 		return path;
 	}
-	#bindHover(strip, signal) {
-		strip.addEventListener("pointermove", (event) => {
-			if (event.pointerType === "touch" || event.buttons !== 0) return;
-			if (!this.readout) return;
-			const axis = this.#axis();
-			const at = clampProportion((event.clientX - axis.startPx) / axis.travelPx);
-			const mapping = this.mapping();
-			this.#hoverAt(this.#markerAt(event, axis) ?? mapping.snap(mapping.valueAt(at)));
-			this.#placeReadout();
-		}, { signal });
-		for (const type of ["pointerdown", "pointerleave"]) strip.addEventListener(type, () => {
-			this.#hoverAt(void 0);
-		}, { signal });
-	}
 	#grab(event) {
 		const axis = this.#axis();
 		const at = (event.clientX - axis.startPx) / axis.travelPx;
@@ -169,12 +167,6 @@ var SonicWavestrip = class extends SonicWaveElement {
 			outside
 		} : grabbed;
 	}
-	#hoverAt(value) {
-		if (value === void 0) this.#isHoverDismissed = false;
-		if (!this.#isHoverDismissed && !this.isEditing() && !this.isRevealed()) this.#hover = value;
-		this.renderReadout();
-		this.#watchEscape(value !== void 0);
-	}
 	#markerAt(event, { startPx, topPx, travelPx }) {
 		const index = this.#markerBand.at({
 			x: event.clientX - startPx,
@@ -201,22 +193,6 @@ var SonicWavestrip = class extends SonicWaveElement {
 			...isScrubbing ? { scrub: proportionOf(this.value) } : {}
 		}, width);
 	}
-	#watchEscape(isHovered) {
-		if (!isHovered) {
-			this.#escapeWatch?.abort();
-			this.#escapeWatch = void 0;
-			return;
-		}
-		if (this.#escapeWatch) return;
-		const watch = new AbortController();
-		this.#escapeWatch = watch;
-		this.ownerDocument.addEventListener("keydown", (event) => {
-			if (event.key !== "Escape" || this.#hover === void 0) return;
-			this.#hover = void 0;
-			this.#isHoverDismissed = true;
-			this.render();
-		}, { signal: watch.signal });
-	}
 };
 
 //#endregion

package/dist/default/elements/xy.js

@@ -2,13 +2,14 @@ import { clampProportion, toNumber } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { requireChild, template } from "../lib/render.js";
-import { ReadoutClaim } from "./readout-claim.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 import { Readout } from "./readout.js";
+import { ReadoutClaim, revealDelay } from "./readout-claim.js";
 import { dragThresholdPx } from "../lib/drag-step.js";
 import { focusByPointer } from "../lib/focus-by-pointer.js";
 import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
-import { bindDrag } from "../lib/pointer-drag.js";
 import { resetKeys, valueMapping } from "../lib/value-mapping.js";
+import { moveTo, resnap, setAsked } from "../lib/asked-value.js";
 import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
 
 //#region src/elements/xy.ts
@@ -337,7 +338,7 @@ var SonicXy = class extends SonicFormElement {
 			x: mappings.x.valueAt(pressed.x),
 			y: mappings.y.valueAt(pressed.y)
 		});
-		this.#claim.press(true);
+		this.#claim.press(true, revealDelay(this.#xy));
 		const start = (axis) => ({
 			from: this.#values[axis].value,
 			mapping: mappings[axis],
@@ -359,7 +360,7 @@ var SonicXy = class extends SonicFormElement {
 	}
 	#input(next) {
 		let hasMoved = false;
-		for (const axis of axes) if (this.#set(axis, next[axis] ?? NaN)) hasMoved = true;
+		for (const axis of axes) if (moveTo(this.#values[axis], this.#mappings()[axis], next[axis] ?? NaN)) hasMoved = true;
 		if (!hasMoved) return false;
 		this.render();
 		this.dispatchEvent(new Event("input", {
@@ -369,8 +370,9 @@ var SonicXy = class extends SonicFormElement {
 		return true;
 	}
 	#keyTo(axis, key) {
-		const next = this.#mappings()[axis].keyTarget(key, this.#values[axis].value);
-		const hasMoved = this.#set(axis, next ?? NaN);
+		const mapping = this.#mappings()[axis];
+		const next = mapping.keyTarget(key, this.#values[axis].value);
+		const hasMoved = moveTo(this.#values[axis], mapping, next ?? NaN);
 		this.#currentAxis = axis;
 		this.render();
 		this.#parts[axis].focus();
@@ -404,9 +406,8 @@ var SonicXy = class extends SonicFormElement {
 	#refresh() {
 		const mappings = this.#mappings();
 		for (const axis of axes) {
-			const axisValue = this.#values[axis];
 			const mapping = mappings[axis];
-			axisValue.value = mapping.snap(axisValue.asked ?? this.numberAttribute(axis, mapping.bounds[0]));
+			resnap(this.#values[axis], mapping, this.numberAttribute(axis, mapping.bounds[0]));
 		}
 		this.render();
 	}
@@ -454,15 +455,6 @@ var SonicXy = class extends SonicFormElement {
 			y: this.yDefault
 		});
 	}
-	#set(axis, next) {
-		if (!Number.isFinite(next)) return false;
-		const axisValue = this.#values[axis];
-		const snapped = this.#mappings()[axis].snap(next);
-		axisValue.asked = snapped;
-		if (snapped === axisValue.value) return false;
-		axisValue.value = snapped;
-		return true;
-	}
 	#taper(axis) {
 		return this.getAttribute(`${axis}-taper`) === "log" ? "log" : "linear";
 	}
@@ -477,10 +469,7 @@ var SonicXy = class extends SonicFormElement {
 			this.#refresh();
 			return;
 		}
-		const asked = toNumber(next);
-		const hasMoved = this.#set(axis, asked);
-		if (Number.isFinite(asked)) axisValue.asked = asked;
-		if (hasMoved) this.render();
+		if (setAsked(axisValue, this.#mappings()[axis], toNumber(next))) this.render();
 	}
 };
 

package/dist/default/index.js

@@ -6,6 +6,7 @@ import { SonicMeter } from "./elements/meter.js";
 import { SonicNumber } from "./elements/number.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
+import { SonicSpectrum } from "./elements/spectrum.js";
 import { SonicSplit } from "./elements/split.js";
 import { SonicSwitch } from "./elements/switch.js";
 import { SonicWaveform } from "./elements/waveform.js";
@@ -14,4 +15,4 @@ import { SonicXy } from "./elements/xy.js";
 import { crossfadeGains } from "./lib/crossfade.js";
 import { formatPercent, parsePercent } from "./lib/percent.js";
 
-export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSplit, SonicSwitch, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatPercent, parsePercent };
+export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatPercent, parsePercent };

package/dist/default/lib/asked-value.js

@@ -0,0 +1,21 @@
+//#region src/lib/asked-value.ts
+function moveTo(cell, mapping, next) {
+	if (!Number.isFinite(next)) return false;
+	const snapped = mapping.snap(next);
+	cell.asked = snapped;
+	if (snapped === cell.value) return false;
+	cell.value = snapped;
+	return true;
+}
+function setAsked(cell, mapping, next) {
+	if (!Number.isFinite(next)) return false;
+	const hasMoved = moveTo(cell, mapping, next);
+	cell.asked = next;
+	return hasMoved;
+}
+function resnap(cell, mapping, fallback) {
+	cell.value = mapping.snap(cell.asked ?? fallback);
+}
+
+//#endregion
+export { moveTo, resnap, setAsked };

package/dist/default/lib/canvas-surface.js

@@ -14,6 +14,9 @@ function readEach(properties, read) {
 	return Object.fromEntries(Object.entries(properties).flatMap(([name, property]) => property === void 0 ? [] : [[name, read(property)]]));
 }
 var CanvasSurface = class {
+	get isVisible() {
+		return this.#isVisible;
+	}
 	get size() {
 		return this.#size;
 	}
@@ -63,8 +66,10 @@ var CanvasSurface = class {
 		this.#schedule();
 	}
 	#armTransitions() {
-		const { style } = this.#options.canvas;
-		style.setProperty("transition-property", Object.values(this.#options.colours).join(", "));
+		const { canvas, colours, numbers = {} } = this.#options;
+		const { style } = canvas;
+		const watched = [...Object.values(colours), ...Object.values(numbers)];
+		style.setProperty("transition-property", watched.join(", "));
 		style.setProperty("transition-duration", "0.001ms");
 		style.setProperty("transition-timing-function", "step-start");
 		style.setProperty("transition-behavior", "allow-discrete");
@@ -148,12 +153,13 @@ var CanvasSurface = class {
 		}, { once: true });
 	}
 	#read() {
-		const { canvas, colours, lengths = {} } = this.#options;
+		const { canvas, colours, lengths = {}, numbers = {} } = this.#options;
 		const styles = getComputedStyle(canvas);
 		return {
 			colours: readEach(colours, (property) => styles.getPropertyValue(property).trim().replaceAll("currentcolor", () => styles.color)),
 			isReducedMotion: this.#reducedMotion.matches,
-			lengths: readEach(lengths, (property) => readPxProperty(styles, property, 0))
+			lengths: readEach(lengths, (property) => readPxProperty(styles, property, 0)),
+			numbers: readEach(numbers, (property) => readPxProperty(styles, property, 0))
 		};
 	}
 	#rescale() {

package/dist/default/lib/frame-timeline.js

@@ -20,8 +20,8 @@ function pendingIn({ pending, range }, window) {
 		return shown ? [shown] : [];
 	});
 }
-function placeholderPhase({ frameMs, isPaged }, pending) {
-	return !isPaged && pending.length > 0 ? frameMs / placeholderPeriodMs : void 0;
+function placeholderPhase({ frameMs, isStill }, pending) {
+	return !isStill && pending.length > 0 ? frameMs / placeholderPeriodMs : void 0;
 }
 function frameTimeline(input) {
 	const { clockSeconds, held, range, size } = input;

package/dist/default/lib/hover-preview.js

@@ -0,0 +1,46 @@
+//#region src/lib/hover-preview.ts
+function bindHoverPreview(target, options, signal) {
+	let hover;
+	let isDismissed = false;
+	let escapeWatch;
+	const watchEscape = (isHovered) => {
+		if (!isHovered) {
+			escapeWatch?.abort();
+			escapeWatch = void 0;
+			return;
+		}
+		if (escapeWatch) return;
+		escapeWatch = new AbortController();
+		target.ownerDocument.addEventListener("keydown", (event) => {
+			if (hover === void 0 || event.key !== "Escape") return;
+			hover = void 0;
+			isDismissed = true;
+			options.dismiss();
+		}, { signal: escapeWatch.signal });
+	};
+	const hoverAt = (value) => {
+		if (value === void 0) isDismissed = false;
+		if (!isDismissed && !options.isTaken()) hover = value;
+		options.show();
+		watchEscape(value !== void 0);
+	};
+	target.addEventListener("pointermove", (event) => {
+		if (event.pointerType === "touch" || event.buttons !== 0 || !options.canShow()) return;
+		hoverAt(options.valueAt(event));
+	}, { signal });
+	for (const type of ["pointerdown", "pointerleave"]) target.addEventListener(type, () => {
+		hoverAt(void 0);
+	}, { signal });
+	signal.addEventListener("abort", () => {
+		watchEscape(false);
+	}, { once: true });
+	return {
+		clear: () => {
+			hover = void 0;
+		},
+		value: () => hover
+	};
+}
+
+//#endregion
+export { bindHoverPreview };

package/dist/default/lib/marker-rider.js

@@ -4,7 +4,6 @@ import { readPxProperty } from "./read-px-property.js";
 import { writeKind } from "./marker-band.js";
 
 //#region src/lib/marker-rider.ts
-const fadeShare = .25;
 function lineX(seconds, view) {
 	return (seconds - view.startSeconds) / view.windowSeconds * view.widthPx;
 }
@@ -12,11 +11,11 @@ function parkedPlacement(labels, index, [view, arrivingX]) {
 	const parked = labels[index];
 	if (!parked) return void 0;
 	const next = labels[index + 1];
-	const x = Math.max(view.insetPx, lineX(parked.start, view) + view.insetPx);
+	const x = Math.max(view.parkPx, lineX(parked.start, view) + view.insetPx);
 	const approachPx = next ? lineX(next.start, view) - lineX(view.playheadSeconds, view) : Infinity;
 	return {
 		index,
-		opacity: clamp(approachPx / (view.widthPx * fadeShare), 0, 1),
+		opacity: view.fadeShare > 0 ? clamp(approachPx / (view.widthPx * view.fadeShare), 0, 1) : 1,
 		shownPx: Math.min(parked.widthPx, arrivingX - x, view.widthPx - x),
 		x
 	};
@@ -91,15 +90,20 @@ function measureWidths(control, className, texts) {
 	return widths;
 }
 function createLabelRider(control, options) {
-	const { className, colourProperty, insetProperty } = options;
+	const { className, colourProperty, fadeProperty, insetProperty, parkProperty } = options;
 	const parked = labelSlot(requireChild(control, `.${className}`, HTMLElement));
 	const arriving = labelSlot(requireChild(control, `.${className} + .${className}`, HTMLElement));
+	let fadeShare = .25;
 	let insetPx = 0;
+	let parkPx = 0;
 	let measured = [];
 	return {
 		measure: (labels) => {
 			const widths = measureWidths(control, className, labels.map(({ text }) => text));
-			insetPx = readPxProperty(getComputedStyle(control), insetProperty, 0);
+			const styles = getComputedStyle(control);
+			fadeShare = readPxProperty(styles, fadeProperty, .25);
+			insetPx = readPxProperty(styles, insetProperty, 0);
+			parkPx = readPxProperty(styles, parkProperty, 0);
 			measured = labels.map((label, index) => ({
 				...label,
 				widthPx: widths[index] ?? 0
@@ -108,7 +112,9 @@ function createLabelRider(control, options) {
 		place: (window) => {
 			const layout = layoutRider(measured, {
 				...window,
-				insetPx
+				fadeShare,
+				insetPx,
+				parkPx
 			});
 			writeLabel(parked, [measured, colourProperty], layout.parked);
 			writeLabel(arriving, [measured, colourProperty], layout.arriving);

package/dist/default/lib/pointer-drag.js

@@ -1,4 +1,9 @@
 //#region src/lib/pointer-drag.ts
+function capturePointer(target, pointerId) {
+	try {
+		target.setPointerCapture(pointerId);
+	} catch {}
+}
 function bindDrag(target, handlers, signal) {
 	let held;
 	const end = () => {
@@ -22,8 +27,8 @@ function bindDrag(target, handlers, signal) {
 			drag,
 			pointerId: event.pointerId
 		};
-		target.setPointerCapture(event.pointerId);
 		handlers.toggle?.(true);
+		capturePointer(target, event.pointerId);
 	}, { signal });
 	whileHeld("pointermove", handlers.move);
 	whileHeld("pointercancel", (drag) => {
@@ -43,4 +48,4 @@ function bindDrag(target, handlers, signal) {
 }
 
 //#endregion
-export { bindDrag };
+export { bindDrag, capturePointer };

package/dist/default/lib/read-ms-property.js

@@ -0,0 +1,10 @@
+//#region src/lib/read-ms-property.ts
+function readMsProperty(styles, property, fallback) {
+	const text = styles.getPropertyValue(property).trim();
+	const parsed = Number.parseFloat(text);
+	if (!Number.isFinite(parsed)) return fallback;
+	return text.endsWith("ms") ? parsed : parsed * 1e3;
+}
+
+//#endregion
+export { readMsProperty };

package/dist/default/lib/spectrum-columns.js

@@ -0,0 +1,74 @@
+import { linearTaper, logTaper } from "./taper.js";
+
+//#region src/lib/spectrum-columns.ts
+const gridDecibels = 12;
+function binHertz({ binCount, sampleRate }) {
+	return sampleRate / 2 / binCount;
+}
+function columnEdges(axis, width) {
+	const edges = new Float64Array(width + 1);
+	const taper = logTaper(axis.frequencyMin, axis.frequencyMax);
+	if (!taper) return edges;
+	const hertz = binHertz(axis);
+	for (let edge = 0; edge <= width; edge += 1) edges[edge] = taper.valueAt(edge / width) / hertz;
+	return edges;
+}
+function columnLevels(columns, levels, { edges, floor }) {
+	const levelAt = (bin) => bin < levels.length ? levels[bin] ?? floor : floor;
+	for (let column = 0; column < columns.length; column += 1) {
+		const from = edges[column] ?? 0;
+		const to = edges[column + 1] ?? from;
+		const first = Math.ceil(from);
+		const last = Math.ceil(to) - 1;
+		if (first > last) {
+			const below = levelAt(first - 1);
+			columns[column] = below + (levelAt(first) - below) * ((from + to) / 2 - (first - 1));
+			continue;
+		}
+		let loudest = floor;
+		for (let bin = first; bin <= last && bin < levels.length; bin += 1) loudest = Math.max(loudest, levelAt(bin));
+		columns[column] = loudest;
+	}
+}
+function levelRows({ max, min }, height) {
+	const taper = linearTaper(min, max);
+	return (level) => Math.round((1 - taper.proportionOf(level)) * height);
+}
+function gridColumns({ frequencyMax, frequencyMin }, width) {
+	const taper = logTaper(frequencyMin, frequencyMax);
+	const columns = [];
+	if (!taper) return columns;
+	for (let exponent = Math.floor(Math.log10(frequencyMin)) + 1; 10 ** exponent < frequencyMax; exponent += 1) columns.push(Math.round(taper.proportionOf(10 ** exponent) * width));
+	return columns;
+}
+function gridRows({ max, min }, rowOf) {
+	const rows = [];
+	for (let level = (Math.floor(min / gridDecibels) + 1) * gridDecibels; level < max; level += gridDecibels) rows.push(rowOf(level));
+	return rows;
+}
+function zoneRows({ clipFrom, hotFrom }, rowOf) {
+	const clip = rowOf(clipFrom);
+	return {
+		clip,
+		hot: Math.max(clip, rowOf(hotFrom))
+	};
+}
+function loudestBin(frame, axis) {
+	const hertz = binHertz(axis);
+	const last = Math.min(Math.floor(axis.frequencyMax / hertz), frame.length - 1);
+	let loudest = -1;
+	let decibels = -Infinity;
+	for (let bin = Math.ceil(axis.frequencyMin / hertz); bin <= last; bin += 1) {
+		const level = frame[bin] ?? NaN;
+		if (!(Number.isFinite(level) && level > decibels)) continue;
+		loudest = bin;
+		decibels = level;
+	}
+	return loudest === -1 ? void 0 : {
+		decibels,
+		frequency: loudest * hertz
+	};
+}
+
+//#endregion
+export { columnEdges, columnLevels, gridColumns, gridRows, levelRows, loudestBin, zoneRows };

package/dist/default/lib/spectrum-levels.js

@@ -0,0 +1,55 @@
+import { ballisticsRates, fall } from "./ballistics.js";
+
+//#region src/lib/spectrum-levels.ts
+const holdMs = 1500;
+function createLevels(binCount) {
+	return {
+		bars: new Float64Array(binCount).fill(-Infinity),
+		heldAt: new Float64Array(binCount).fill(-Infinity),
+		holds: new Float64Array(binCount).fill(-Infinity),
+		incoming: new Float64Array(binCount).fill(-Infinity)
+	};
+}
+function receiveLevels({ incoming }, frame, floor) {
+	for (let bin = 0; bin < incoming.length; bin += 1) {
+		const level = frame[bin] ?? NaN;
+		incoming[bin] = Math.max(incoming[bin] ?? floor, Number.isFinite(level) ? level : floor);
+	}
+}
+function fallenHold(hold, bar, { elapsedMs, isHoldStepped, pastHoldMs }) {
+	if (pastHoldMs < 0) return hold;
+	if (isHoldStepped) return bar;
+	return fall(hold, {
+		fallDecibelsPerSecond: ballisticsRates.peak.fallDecibelsPerSecond,
+		floor: bar
+	}, Math.min(elapsedMs, pastHoldMs));
+}
+function stepLevels(levels, step) {
+	const { bars, heldAt, holds, incoming } = levels;
+	const rate = {
+		fallDecibelsPerSecond: ballisticsRates.peak.fallDecibelsPerSecond,
+		floor: step.floor
+	};
+	for (let bin = 0; bin < bars.length; bin += 1) {
+		const bar = Math.max(fall(bars[bin] ?? step.floor, rate, step.elapsedMs), incoming[bin] ?? step.floor);
+		const hold = holds[bin] ?? bar;
+		bars[bin] = bar;
+		incoming[bin] = -Infinity;
+		if (!step.isHeld || bar >= hold) {
+			holds[bin] = bar;
+			heldAt[bin] = step.nowMs;
+			continue;
+		}
+		const pastHoldMs = step.nowMs - (heldAt[bin] ?? step.nowMs) - holdMs;
+		holds[bin] = fallenHold(hold, bar, {
+			...step,
+			pastHoldMs
+		});
+	}
+}
+function areSettled({ holds }, floor) {
+	return holds.every((hold) => hold <= floor);
+}
+
+//#endregion
+export { areSettled, createLevels, receiveLevels, stepLevels };

package/dist/default/lib/strip-scene.js

@@ -18,6 +18,17 @@ function stripBars(peaks, size, grid) {
 		};
 	});
 }
+function stripGroove(size, ratio) {
+	if (ratio <= 0) return void 0;
+	const height = Math.max(1, Math.round(size.height * ratio));
+	return {
+		height,
+		radius: height / 2,
+		width: size.width,
+		x: 0,
+		y: Math.round((size.height - height) / 2)
+	};
+}
 function stripRegions(state, widthPx) {
 	const px = (proportion) => Math.round((Number.isFinite(proportion) ? proportion : 0) * widthPx);
 	const buffered = state.buffered.map(([start, end]) => [px(start), px(end)]).filter(([start, end]) => end > start);
@@ -45,4 +56,4 @@ function stripRegions(state, widthPx) {
 }
 
 //#endregion
-export { stripBars, stripRegions };
+export { stripBars, stripGroove, stripRegions };

package/dist/default/lib/time-regions.js

@@ -3,9 +3,13 @@ function readRegions(regions) {
 	if ("start" in regions) return Array.from({ length: regions.length }, (_entry, index) => [regions.start(index), regions.end(index)]);
 	return [...regions].map(([start, end]) => [start, end]);
 }
+function dueRegions(regions, listedMs, [nowMs, delayMs]) {
+	if (delayMs <= 0) return [...regions];
+	return regions.filter((region) => nowMs - (listedMs.get(region.join(":")) ?? nowMs) >= delayMs);
+}
 function sortedRegions(regions) {
 	return regions ? readRegions(regions).toSorted((first, second) => first[0] - second[0]) : [];
 }
 
 //#endregion
-export { readRegions, sortedRegions };
+export { dueRegions, readRegions, sortedRegions };

package/dist/dev/define/spectrum.d.ts

@@ -0,0 +1,2 @@
+import { SonicSpectrum } from "../elements/spectrum.js";
+export type { SonicSpectrum };

package/dist/dev/define/spectrum.js

@@ -0,0 +1,8 @@
+import { defineOnce } from "../elements/define-once.js";
+import { SonicSpectrum } from "../elements/spectrum.js";
+
+//#region src/define/spectrum.ts
+defineOnce("sonic-spectrum", SonicSpectrum);
+
+//#endregion
+//# sourceMappingURL=spectrum.js.map

package/dist/dev/define/spectrum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spectrum.js","names":[],"sources":["../../../src/define/spectrum.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicSpectrum } from '#elements/spectrum.ts';\n\ndefineOnce('sonic-spectrum', SonicSpectrum);\n\nexport type { SonicSpectrum } from '#elements/spectrum.ts';\n"],"mappings":";;;;AAGA,WAAW,kBAAkB,aAAa"}

package/dist/dev/define.d.ts

@@ -12,6 +12,8 @@ import { SonicSegmented } from "./elements/segmented.js";
 import "./define/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
 import "./define/slider.js";
+import { SonicSpectrum } from "./elements/spectrum.js";
+import "./define/spectrum.js";
 import { SonicSplit } from "./elements/split.js";
 import "./define/split.js";
 import { SonicSwitch } from "./elements/switch.js";
@@ -22,4 +24,4 @@ import { SonicWavestrip } from "./elements/wavestrip.js";
 import "./define/wavestrip.js";
 import { SonicXy } from "./elements/xy.js";
 import "./define/xy.js";
-export type { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSplit, SonicSwitch, SonicWaveform, SonicWavestrip, SonicXy };
+export type { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicWaveform, SonicWavestrip, SonicXy };

package/dist/dev/define.js

@@ -5,6 +5,7 @@ import "./define/meter.js";
 import "./define/number.js";
 import "./define/segmented.js";
 import "./define/slider.js";
+import "./define/spectrum.js";
 import "./define/split.js";
 import "./define/switch.js";
 import "./define/waveform.js";