@xsynaptic/sonic-ui 0.6.1 → 0.8.0

package/dist/default/elements/value-element.js

@@ -1,7 +1,8 @@
-import { clamp, toNumber } from "../lib/math.js";
+import { clamp, toNumber, trimFloat } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { requireChild } from "../lib/render.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
 import { ValueEntry } from "./value-entry.js";
@@ -9,7 +10,6 @@ import { dragThresholdPx, startDrag, stepDrag } from "../lib/drag-step.js";
 import { focusByPointer } from "../lib/focus-by-pointer.js";
 import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
 import { parseNumberList } from "../lib/number-list.js";
-import { bindDrag } from "../lib/pointer-drag.js";
 import { readPxProperty } from "../lib/read-px-property.js";
 import { resetKeys, valueMapping } from "../lib/value-mapping.js";
 
@@ -49,6 +49,7 @@ var SonicValueElement = class extends SonicFormElement {
 		"notched",
 		"origin",
 		"readout",
+		"spoken-step",
 		"step",
 		"tabindex",
 		"taper",
@@ -156,6 +157,9 @@ var SonicValueElement = class extends SonicFormElement {
 	set parseValue(parse) {
 		this.#parseValue = parse;
 	}
+	get pointerType() {
+		return this.#dragging()?.pointerType;
+	}
 	get positions() {
 		return parseNumberList(this.getAttribute("positions"));
 	}
@@ -168,6 +172,12 @@ var SonicValueElement = class extends SonicFormElement {
 	set readout(isShown) {
 		this.reflect("readout", isShown);
 	}
+	get spokenStep() {
+		return this.optionalNumberAttribute("spoken-step");
+	}
+	set spokenStep(value) {
+		this.reflect("spoken-step", value);
+	}
 	get step() {
 		return this.numberAttribute("step", 1);
 	}
@@ -206,8 +216,10 @@ var SonicValueElement = class extends SonicFormElement {
 	#entry;
 	#formatSpokenValue;
 	#formatValue;
+	#heldAt;
 	#instance = String(instanceCount += 1);
 	#isModulated = false;
+	#isRevealed = false;
 	#keyScrub;
 	#land;
 	#limit;
@@ -235,7 +247,7 @@ var SonicValueElement = class extends SonicFormElement {
 		this.render();
 	}
 	connectedCallback() {
-		this.upgradeProperties("default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "step", "taper", "positions", "detent", "formatValue", "formatSpokenValue", "keyStep", "parseValue", "value");
+		this.upgradeProperties("default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "spokenStep", "step", "taper", "positions", "detent", "formatValue", "formatSpokenValue", "keyStep", "parseValue", "value");
 		super.connectedCallback();
 	}
 	bindGestures(control, signal, grab) {
@@ -261,6 +273,7 @@ var SonicValueElement = class extends SonicFormElement {
 					fromValue,
 					isOutside: false,
 					isRevealed: false,
+					pointerType: event.pointerType,
 					revealTimer: void 0,
 					state: this.#startDrag(control, axis, event)
 				};
@@ -306,7 +319,9 @@ var SonicValueElement = class extends SonicFormElement {
 	heldFrom() {
 		return this.#dragging()?.fromValue ?? this.#keyScrub?.fromValue;
 	}
-	heldWrite(_next) {}
+	heldWrite(next) {
+		this.#heldAt = next;
+	}
 	holdChanged() {}
 	input(next) {
 		const previous = this.#value;
@@ -346,6 +361,10 @@ var SonicValueElement = class extends SonicFormElement {
 	originValue() {
 		return this.origin ?? this.mapping().bounds[0];
 	}
+	playback() {
+		const from = this.heldFrom();
+		return from === void 0 ? this.#value : this.#heldAt ?? from;
+	}
 	previewValue() {}
 	proportionsChanged() {}
 	readModulationValue() {
@@ -362,10 +381,11 @@ var SonicValueElement = class extends SonicFormElement {
 		const readout = this.#readout;
 		if (!readout) return;
 		const { isOpen, value } = this.#shown();
+		const text = value === void 0 ? void 0 : this.#textFor(value);
 		readout.bubble.show({
 			anchor: readout.anchor,
-			isOpen,
-			text: value === void 0 ? void 0 : this.#textFor(value)
+			isOpen: isOpen && text !== "",
+			text
 		});
 	}
 	restoreState(state) {
@@ -473,10 +493,13 @@ var SonicValueElement = class extends SonicFormElement {
 		drag.state = this.#withinLimit(mapping, state);
 		if (value === void 0) return;
 		if (!wasEngaged) this.#reveal(drag);
+		const isCrossing = isOutside !== drag.isOutside;
+		if (isCrossing) {
+			drag.isOutside = isOutside;
+			this.toggleState("cancelling", isOutside);
+		}
 		this.input(isOutside ? drag.fromValue : value);
-		if (isOutside === drag.isOutside) return;
-		drag.isOutside = isOutside;
-		this.#renderDragReveal(drag);
+		if (isCrossing) this.#renderDragReveal(drag);
 	}
 	#endHolds() {
 		this.#entry?.close(false);
@@ -508,7 +531,9 @@ var SonicValueElement = class extends SonicFormElement {
 	#releaseDrag(drag) {
 		clearTimeout(drag.revealTimer);
 		this.#claim.conceal("drag");
+		this.toggleState("cancelling", false);
 		this.#renderHold();
+		this.#showRevealed(false);
 		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
 		this.#springBack();
 	}
@@ -524,7 +549,7 @@ var SonicValueElement = class extends SonicFormElement {
 		writeAttribute(control, "role", this.controlRole());
 		writeAttribute(control, "aria-valuemin", String(low));
 		writeAttribute(control, "aria-valuemax", String(high));
-		writeAttribute(control, "aria-valuenow", String(this.#value));
+		writeAttribute(control, "aria-valuenow", String(this.#spokenNow()));
 		if (orientation) writeAttribute(control, "aria-orientation", orientation);
 		writeAttribute(control, "aria-valuetext", (this.#formatSpokenValue ?? this.#formatValue)?.(this.#value));
 		this.forwardNaming(control, true);
@@ -543,11 +568,14 @@ var SonicValueElement = class extends SonicFormElement {
 		writeAttribute(control, "tabindex", isDisabled ? void 0 : stop);
 	}
 	#renderDragReveal(drag) {
-		if (drag.isRevealed && !drag.isOutside) this.#claim.reveal("drag");
+		const isRevealed = drag.isRevealed && !drag.isOutside;
+		if (isRevealed) this.#claim.reveal("drag");
 		else this.#claim.conceal("drag");
 		this.#renderHold();
+		this.#showRevealed(isRevealed);
 	}
 	#renderHold() {
+		if (this.heldFrom() === void 0) this.#heldAt = void 0;
 		this.renderReadout();
 		this.holdChanged();
 	}
@@ -581,6 +609,16 @@ var SonicValueElement = class extends SonicFormElement {
 			value: preview ?? this.#value
 		};
 	}
+	#showRevealed(isRevealed) {
+		if (isRevealed === this.#isRevealed) return;
+		this.#isRevealed = isRevealed;
+		this.toggleState("revealed", isRevealed);
+		this.dispatchEvent(new Event("sonic-reveal", { bubbles: true }));
+	}
+	#spokenNow() {
+		const step = this.spokenStep;
+		return step !== void 0 && step > 0 ? trimFloat(Math.round(this.#value / step) * step) : this.#value;
+	}
 	#springBack() {
 		const target = this.springTarget();
 		if (target === void 0) return;

package/dist/default/elements/wave-element.js

@@ -2,19 +2,44 @@ import { SonicValueElement } from "./value-element.js";
 import { bindSurface } from "../lib/canvas-surface.js";
 
 //#region src/elements/wave-element.ts
+function markerKey(marker) {
+	return marker ? [
+		marker.start,
+		marker.end,
+		marker.kind,
+		marker.label
+	].join("|") : "";
+}
 var SonicWaveElement = class extends SonicValueElement {
+	static observedAttributes = [...SonicValueElement.observedAttributes, "fill"];
+	get currentMarker() {
+		return this.#current ? { ...this.#current } : void 0;
+	}
+	get fill() {
+		return this.hasAttribute("fill");
+	}
+	set fill(isFilling) {
+		this.reflect("fill", isFilling);
+	}
 	get markers() {
 		return this.#markers.map((marker) => ({ ...marker }));
 	}
 	set markers(list) {
 		this.#markers = [...list ?? []].filter((marker) => Number.isFinite(marker.start)).map((marker) => ({ ...marker })).toSorted((first, second) => first.start - second.start);
-		if (this.isBound()) this.renderMarkers();
+		if (!this.isBound()) return;
+		this.renderMarkers();
+		this.render();
 	}
-	#heldAt;
+	#current;
+	#fillWatch;
 	#markers = [];
 	#surface;
+	attributeChangedCallback(name) {
+		super.attributeChangedCallback(name);
+		if (name === "fill") this.#watchFill();
+	}
 	connectedCallback() {
-		this.upgradeProperties("markers");
+		this.upgradeProperties("fill", "markers");
 		super.connectedCallback();
 	}
 	repaint() {
@@ -38,16 +63,20 @@ var SonicWaveElement = class extends SonicValueElement {
 		});
 		this.render();
 		this.checkStyles(control, this.sheet);
+		this.#watchFill();
+		signal.addEventListener("abort", () => {
+			this.#fillWatch?.disconnect();
+			this.#fillWatch = void 0;
+		}, { once: true });
 	}
 	focusTarget() {
 		return this.control;
 	}
 	heldWrite(next) {
-		this.#heldAt = next;
+		super.heldWrite(next);
 		this.render();
 	}
 	holdChanged() {
-		if (this.heldFrom() === void 0) this.#heldAt = void 0;
 		this.render();
 	}
 	markerList() {
@@ -61,19 +90,40 @@ var SonicWaveElement = class extends SonicValueElement {
 			return [Math.min(at, to), Math.max(at, to)];
 		});
 	}
-	playback() {
-		const from = this.heldFrom();
-		return from === void 0 ? this.value : this.#heldAt ?? from;
-	}
 	proportionsChanged() {
 		this.renderMarkers();
 	}
 	renderEmpty() {
 		this.toggleState("empty", this.isEmpty());
 	}
+	showCurrentMarker(seconds) {
+		const current = this.#markers.findLast((marker) => marker.start <= seconds);
+		if (markerKey(current) === markerKey(this.#current)) return;
+		this.#current = current;
+		this.dispatchEvent(new Event("sonic-marker", { bubbles: true }));
+	}
 	surface() {
 		return this.#surface;
 	}
+	#watchFill() {
+		const control = this.control;
+		const isFilling = this.fill && this.isBound();
+		if (isFilling === (this.#fillWatch !== void 0)) return;
+		this.#fillWatch?.disconnect();
+		this.#fillWatch = void 0;
+		if (!isFilling) {
+			control.style.removeProperty(this.sizeProperty);
+			return;
+		}
+		this.#fillWatch = new ResizeObserver((entries) => {
+			const box = entries.at(-1)?.borderBoxSize[0];
+			if (!box) return;
+			requestAnimationFrame(() => {
+				if (this.#fillWatch) control.style.setProperty(this.sizeProperty, `${String(box.blockSize)}px`);
+			});
+		});
+		this.#fillWatch.observe(control);
+	}
 };
 
 //#endregion

package/dist/default/elements/waveform.js

@@ -1,6 +1,6 @@
 import { clamp } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
-import { readRegions } from "../lib/time-regions.js";
+import { dueRegions, readRegions } from "../lib/time-regions.js";
 import { SonicWaveElement } from "./wave-element.js";
 import { frameTimeline } from "../lib/frame-timeline.js";
 import { isKind, writeKind } from "../lib/marker-band.js";
@@ -10,9 +10,10 @@ import { waveformBuckets } from "../lib/waveform-buckets.js";
 
 //#region src/elements/waveform.ts
 const colours = {
+	ends: "--_sonic-waveform-ends",
 	grid: "--_sonic-waveform-grid",
-	hatch: "--_sonic-waveform-hatch",
 	marker: "--_sonic-waveform-marker",
+	placeholder: "--_sonic-waveform-placeholder",
 	wave: "--_sonic-waveform-wave",
 	waveEdge: "--_sonic-waveform-wave-edge"
 };
@@ -63,7 +64,7 @@ function paintHatch(context, scene, [from, to]) {
 		context.lineTo(x + height, 0);
 	}
 	context.lineWidth = Math.max(1, Math.round(dpr));
-	context.strokeStyle = scene.colours.hatch;
+	context.strokeStyle = scene.colours.ends;
 	context.stroke();
 	context.restore();
 }
@@ -83,7 +84,7 @@ function paintPlaceholders(context, scene) {
 		context.lineTo(closing, waveY(closing));
 	}
 	context.lineWidth = Math.max(1, Math.round(dpr));
-	context.strokeStyle = scene.colours.hatch;
+	context.strokeStyle = scene.colours.placeholder;
 	context.stroke();
 }
 function waveFill(context, scene) {
@@ -111,8 +112,10 @@ function paintWave(context, scene, peaks) {
 var SonicWaveform = class extends SonicWaveElement {
 	static observedAttributes = [
 		...SonicWaveElement.observedAttributes,
+		"pending-delay",
 		"playing",
 		"playback-rate",
+		"reduced-motion",
 		"zoom"
 	];
 	get peaks() {
@@ -127,9 +130,21 @@ var SonicWaveform = class extends SonicWaveElement {
 		return this.#pending.map(([start, end]) => [start, end]);
 	}
 	set pending(regions) {
+		const listedMs = this.#pendingListedMs;
+		const nowMs = performance.now();
 		this.#pending = regions ? readRegions(regions) : [];
+		this.#pendingListedMs = new Map(this.#pending.map((region) => {
+			const key = region.join(":");
+			return [key, listedMs.get(key) ?? nowMs];
+		}));
 		this.surface()?.invalidate();
 	}
+	get pendingDelay() {
+		return Math.max(0, this.numberAttribute("pending-delay", 0));
+	}
+	set pendingDelay(value) {
+		this.reflect("pending-delay", value);
+	}
 	get playbackRate() {
 		const playbackRate = this.numberAttribute("playback-rate", 1);
 		return playbackRate > 0 ? playbackRate : 1;
@@ -150,11 +165,18 @@ var SonicWaveform = class extends SonicWaveElement {
 		this.#readTime = read;
 		this.render();
 	}
+	get reducedMotion() {
+		return this.getAttribute("reduced-motion") === "scroll" ? "scroll" : "page";
+	}
+	set reducedMotion(motion) {
+		this.reflect("reduced-motion", motion);
+	}
 	get requestPeaks() {
 		return this.#requestPeaks;
 	}
 	set requestPeaks(request) {
 		this.#requestPeaks = request;
+		this.#asked = void 0;
 		this.surface()?.invalidate();
 	}
 	get zoom() {
@@ -169,6 +191,8 @@ var SonicWaveform = class extends SonicWaveElement {
 	colours = colours;
 	lengths = {};
 	sheet = "waveform.css";
+	sizeProperty = "--_sonic-waveform-size";
+	#asked;
 	#clock = createTrackingClock();
 	#drawn;
 	#ghost = requireChild(this.control, ".sonic-waveform-ghost", HTMLDivElement);
@@ -177,16 +201,18 @@ var SonicWaveform = class extends SonicWaveElement {
 	#paintedKey = "";
 	#peaks;
 	#pending = [];
+	#pendingListedMs = /* @__PURE__ */ new Map();
 	#playhead = requireChild(this.control, ".sonic-waveform-playhead", HTMLDivElement);
 	#readTime;
 	#requestPeaks;
 	#rider = createLabelRider(this.control, {
 		className: "sonic-waveform-label",
 		colourProperty: "--_sonic-waveform-marker",
+		fadeProperty: "--_sonic-waveform-label-fade",
 		insetProperty: "--_sonic-waveform-label-inset"
 	});
 	connectedCallback() {
-		this.upgradeProperties("peaks", "pending", "playing", "playbackRate", "readTime", "requestPeaks", "zoom");
+		this.upgradeProperties("peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "requestPeaks", "zoom");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -204,6 +230,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	paint(context, { frameMs, isDirty, isRebuilt, look, size }) {
 		const held = this.#held();
+		const pending = this.#duePending();
 		const timeline = frameTimeline({
 			clockSeconds: this.#clock.read(frameMs, {
 				isPlaying: this.playing,
@@ -212,9 +239,10 @@ var SonicWaveform = class extends SonicWaveElement {
 			}),
 			frameMs,
 			...held ? { held } : {},
-			isPaged: look.isReducedMotion,
+			isPaged: look.isReducedMotion && this.reducedMotion === "page",
 			isPlaying: this.playing,
-			pending: this.#pending,
+			isStill: look.isReducedMotion,
+			pending,
 			range: [this.min, Math.max(this.min, this.max)],
 			size,
 			zoom: this.zoom
@@ -226,6 +254,7 @@ var SonicWaveform = class extends SonicWaveElement {
 		};
 		placeLine(this.#playhead, timeline.playheadAt);
 		placeLine(this.#ghost, timeline.ghostAt);
+		this.showCurrentMarker(seconds);
 		this.toggleState("pending", view.pending.length > 0);
 		this.#rider.place({
 			playheadSeconds: seconds,
@@ -239,7 +268,7 @@ var SonicWaveform = class extends SonicWaveElement {
 				...view,
 				colours: look.colours
 			}, isRebuilt);
-			if (timeline.wanted) this.#requestPeaks?.(...timeline.wanted);
+			if (timeline.wanted) this.#ask(timeline.wanted);
 		}
 		if (timeline.isMoving) this.surface()?.requestFrame();
 	}
@@ -253,6 +282,17 @@ var SonicWaveform = class extends SonicWaveElement {
 		}]));
 		this.surface()?.rebuild();
 	}
+	#ask(wanted) {
+		const asked = this.#requestPeaks?.(...wanted);
+		if (!(asked instanceof Promise)) return;
+		this.#asked = asked;
+		this.#repaintAfter(asked);
+	}
+	#duePending() {
+		const due = dueRegions(this.#pending, this.#pendingListedMs, [performance.now(), this.pendingDelay]);
+		if (due.length < this.#pending.length) this.surface()?.requestFrame();
+		return due;
+	}
 	#grab() {
 		const drawn = this.#drawn ?? {
 			seconds: this.value,
@@ -291,7 +331,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	#paintScene(context, scene, isRebuilt) {
 		const { dpr, height, pixelsPerSecond, startSeconds, width } = scene;
 		const x = (seconds) => (seconds - startSeconds) * pixelsPerSecond;
-		const { grid } = scene.colours;
+		const { ends, grid } = scene.colours;
 		const line = Math.max(1, Math.round(dpr));
 		const [opening, closing] = [x(this.min), x(Math.max(this.min, this.max))];
 		const [from, to] = [clamp(opening, 0, width), clamp(closing, 0, width)];
@@ -302,7 +342,7 @@ var SonicWaveform = class extends SonicWaveElement {
 		if (to > from) context.fillRect(from, Math.round((height - line) / 2), to - from, line);
 		paintPlaceholders(context, scene);
 		if (this.#peaks) paintWave(context, scene, this.#peaks);
-		context.fillStyle = grid;
+		context.fillStyle = ends;
 		for (const edge of [opening, closing]) context.fillRect(edge - line / 2, 0, line, height);
 		this.#paintMarkers(context, scene, isRebuilt);
 	}
@@ -319,6 +359,12 @@ var SonicWaveform = class extends SonicWaveElement {
 		for (const probe of probes) probe.remove();
 		return new Map(kinds.map((kind, index) => [kind, read[index] ?? ""]));
 	}
+	async #repaintAfter(asked) {
+		await Promise.allSettled([asked]);
+		if (this.#asked !== asked) return;
+		this.#asked = void 0;
+		this.surface()?.invalidate();
+	}
 	#sourceSeconds() {
 		return this.#readTime?.() ?? this.playback();
 	}

package/dist/default/elements/wavestrip.js

@@ -1,10 +1,11 @@
 import { clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { readPxProperty } from "../lib/read-px-property.js";
+import { bindHoverPreview } from "../lib/hover-preview.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 +16,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 +74,10 @@ 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;
@@ -86,13 +87,30 @@ var SonicWavestrip = class extends SonicWaveElement {
 	}
 	connect(signal) {
 		super.connect(signal);
-		this.#bindHover(this.control, signal);
+		this.#hover = bindHoverPreview(this.control, {
+			canShow: () => this.readout,
+			dismiss: () => {
+				this.render();
+			},
+			isTaken: () => this.isEditing() || this.isRevealed(),
+			show: () => {
+				this.renderReadout();
+				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));
+			}
+		}, signal);
 		this.bindGestures(this.control, signal, (event) => this.#grab(event));
 	}
 	draw() {
 		const surface = this.surface();
-		if (this.isEditing() || this.isRevealed()) this.#hover = void 0;
+		if (this.isEditing() || this.isRevealed()) this.#hover?.clear();
 		this.#placeReadout();
+		this.showCurrentMarker(this.playback());
 		if (surface && this.#stripRegions(surface.size.width).key !== this.#paintedKey) surface.requestFrame();
 	}
 	isEmpty() {
@@ -114,7 +132,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 		]);
 	}
 	previewValue() {
-		return this.#hover;
+		return this.#hover?.value();
 	}
 	renderMarkers() {
 		this.#markerBand.render(this.markerList(), this.markerProportions());
@@ -132,28 +150,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 +177,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 +203,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,12 +2,12 @@ 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 { bindDrag } from "../lib/pointer-drag.js";
 import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.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 { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
 

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 };