@xsynaptic/sonic-ui 0.6.1 → 0.8.0

package/README.md

@@ -23,6 +23,10 @@ import '@xsynaptic/sonic-ui/define';
 <sonic-dial aria-label="Cutoff" value="40"></sonic-dial>
 ```
 
+A `-size` token takes any CSS length and scales its control as one piece; a `-length` token also takes a percentage of the parent.
+
+A display takes its signal as data: `spectrum.analyser = node`, or `spectrum.push(frame)`.
+
 Under a hydrating framework, register the definitions once hydration is done (in React, from an effect); a control owns one child of its host and uses only the children it documents.
 
 Targets current Chrome and Edge, Safari 26 and Firefox 147. MIT licensed.

package/dist/default/define/spectrum.js

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

package/dist/default/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";

package/dist/default/elements/button.js

@@ -4,16 +4,25 @@ import { copyNode } from "../lib/copy-node.js";
 import { bindHold } from "../lib/hold.js";
 import { placeChildren, requireChild, template } from "../lib/render.js";
 import { mirrorChildren } from "../lib/mirror-children.js";
+import { capturePointer } from "../lib/pointer-drag.js";
 
 //#region src/elements/button.ts
 const renderButton = template(`
 		<button class="sonic-button" type="button"><span class="sonic-button-cap"></span></button>
 	`, HTMLButtonElement);
 const holdKeys = /* @__PURE__ */ new Set([" ", "Enter"]);
+const popupAttributes = {
+	controls: "aria-controls",
+	expanded: "aria-expanded",
+	popup: "aria-haspopup"
+};
+const pressWhens = /* @__PURE__ */ new Set(["pressed", "released"]);
 var SonicButton = class extends SonicFormElement {
 	static observedAttributes = [
 		...SonicFormElement.observedAttributes,
+		...Object.keys(popupAttributes),
 		"busy",
+		"legend",
 		"momentary",
 		"pressed",
 		"soft-disabled",
@@ -44,6 +53,12 @@ var SonicButton = class extends SonicFormElement {
 	set latching(isLatching) {
 		this.reflect("latching", isLatching);
 	}
+	get legend() {
+		return this.getAttribute("legend") ?? void 0;
+	}
+	set legend(name) {
+		this.reflect("legend", name);
+	}
 	get momentary() {
 		return this.hasAttribute("momentary");
 	}
@@ -88,12 +103,13 @@ var SonicButton = class extends SonicFormElement {
 	connect(signal) {
 		const button = this.#button;
 		const cap = requireChild(button, ".sonic-button-cap", HTMLSpanElement);
-		this.upgradeProperties("armed", "busy", "defaultPressed", "momentary", "softDisabled", "latching", "pressed", "value");
+		this.upgradeProperties("armed", "busy", "defaultPressed", "legend", "momentary", "softDisabled", "latching", "pressed", "value");
 		mirrorChildren(this, {
 			control: button,
 			copy: copyNode,
 			place: (copies) => {
 				placeChildren(cap, copies);
+				this.#showLegend();
 			}
 		}, signal);
 		this.render();
@@ -122,6 +138,8 @@ var SonicButton = class extends SonicFormElement {
 		writeAttribute(button, "aria-pressed", this.latching ? String(this.pressed) : void 0);
 		this.toggleState("pressed", this.pressed);
 		this.forwardNaming(button, true);
+		this.#forwardPopup(button);
+		this.#showLegend();
 		const submitted = this.latching && this.pressed ? this.value : null;
 		this.writeFormValue(submitted, String(this.pressed));
 	}
@@ -142,7 +160,7 @@ var SonicButton = class extends SonicFormElement {
 		this.#holding = holding;
 		button.addEventListener("pointerdown", (event) => {
 			if (event.button !== 0 || !this.#isMomentary()) return;
-			button.setPointerCapture(event.pointerId);
+			capturePointer(button, event.pointerId);
 			holding.hold(event.pointerId);
 		}, { signal });
 		button.addEventListener("keydown", (event) => {
@@ -150,6 +168,9 @@ var SonicButton = class extends SonicFormElement {
 			holding.hold(event.key);
 		}, { signal });
 	}
+	#forwardPopup(button) {
+		for (const [name, aria] of Object.entries(popupAttributes)) writeAttribute(button, aria, this.getAttribute(name) ?? void 0);
+	}
 	#isMomentary() {
 		return this.momentary && !this.latching;
 	}
@@ -160,6 +181,13 @@ var SonicButton = class extends SonicFormElement {
 		this.pressed = isPressed;
 		this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
+	#showLegend() {
+		const legend = this.legend;
+		for (const part of this.#button.querySelectorAll(":scope > .sonic-button-cap > [data-sonic-when]")) {
+			const when = part.dataset.sonicWhen ?? "";
+			part.toggleAttribute("data-sonic-hidden", !pressWhens.has(when) && when !== legend);
+		}
+	}
 };
 
 //#endregion

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

@@ -0,0 +1,77 @@
+import { SonicElement } from "./sonic-element.js";
+import { bindSurface } from "../lib/canvas-surface.js";
+
+//#region src/elements/display-element.ts
+var SonicDisplayElement = class extends SonicElement {
+	static observedAttributes = [
+		...SonicElement.observedAttributes,
+		"max",
+		"min"
+	];
+	get analyser() {
+		return this.#analyser;
+	}
+	set analyser(node) {
+		this.#analyser = node ?? void 0;
+		this.#surface?.requestFrame();
+	}
+	get max() {
+		return this.numberAttribute("max", 0);
+	}
+	set max(decibels) {
+		this.reflect("max", decibels);
+	}
+	get min() {
+		return this.numberAttribute("min", -90);
+	}
+	set min(decibels) {
+		this.reflect("min", decibels);
+	}
+	#analyser;
+	#buffer = /* @__PURE__ */ new Float32Array(0);
+	#surface;
+	attributeChangedCallback() {
+		this.#surface?.invalidate();
+	}
+	connectedCallback() {
+		this.upgradeProperties("analyser", "max", "min");
+		super.connectedCallback();
+	}
+	push(frame) {
+		this.receive(frame);
+		this.#surface?.requestFrame();
+	}
+	repaint() {
+		this.#surface?.rebuild();
+	}
+	connect(signal) {
+		const control = this.control;
+		this.keepControl(control, signal);
+		this.#surface = bindSurface({
+			canvas: this.canvas,
+			colours: this.colours,
+			numbers: this.numbers,
+			paint: (context, frame) => {
+				this.#paint(context, frame);
+			},
+			signal
+		});
+		this.checkStyles(control, this.sheet);
+	}
+	surface() {
+		return this.#surface;
+	}
+	#paint(context, frame) {
+		const analyser = this.isDisabled() ? void 0 : this.#analyser;
+		if (analyser) {
+			if (this.#buffer.length !== analyser.frequencyBinCount) this.#buffer = new Float32Array(analyser.frequencyBinCount);
+			this.pull(analyser, this.#buffer);
+			this.receive(this.#buffer);
+		}
+		this.paint(context, frame);
+		if (analyser) this.#surface?.requestFrame();
+	}
+};
+
+//#endregion
+export { SonicDisplayElement };

package/dist/default/elements/envelope.js

@@ -1,10 +1,10 @@
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicElement } from "./sonic-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 { bindDrag } from "../lib/pointer-drag.js";
 import { SonicValueElement, linkValue } from "./value-element.js";
 import { adsrPath, adsrShape, adsrStages, timeStages } from "../lib/adsr-shape.js";
 import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";

package/dist/default/elements/slider.js

@@ -1,6 +1,8 @@
+import { clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { SonicValueElement } from "./value-element.js";
 import { bindScale } from "./scale.js";
+import { bindHoverPreview } from "../lib/hover-preview.js";
 import { sortedRegions } from "../lib/time-regions.js";
 
 //#region src/elements/slider.ts
@@ -34,6 +36,7 @@ var SonicSlider = class extends SonicValueElement {
 		...SonicValueElement.observedAttributes,
 		"modulation",
 		"orientation",
+		"scrub",
 		"spring"
 	];
 	get buffered() {
@@ -67,6 +70,12 @@ var SonicSlider = class extends SonicValueElement {
 	set orientation(direction) {
 		this.reflect("orientation", direction);
 	}
+	get scrub() {
+		return this.hasAttribute("scrub");
+	}
+	set scrub(isScrubbing) {
+		this.reflect("scrub", isScrubbing);
+	}
 	get spring() {
 		return this.hasAttribute("spring");
 	}
@@ -74,9 +83,10 @@ var SonicSlider = class extends SonicValueElement {
 		this.reflect("spring", isSpring);
 	}
 	#buffered = [];
+	#hover;
 	#slider = renderSlider();
 	connectedCallback() {
-		this.upgradeProperties("buffered", "groovePress", "modulationValue", "modulation", "orientation", "spring");
+		this.upgradeProperties("buffered", "groovePress", "modulationValue", "modulation", "orientation", "scrub", "spring");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -89,6 +99,23 @@ var SonicSlider = class extends SonicValueElement {
 		slider.addEventListener("transitionend", (event) => {
 			if (event.propertyName === "--_sonic-slider-value") this.toggleState("springing", false);
 		}, { signal });
+		this.#hover = bindHoverPreview(slider, {
+			canShow: () => this.scrub && this.readout && this.orientation === "horizontal",
+			dismiss: () => {
+				this.render();
+			},
+			isTaken: () => this.isEditing() || this.isRevealed(),
+			show: () => {
+				this.renderReadout();
+				this.#placeReadout(slider);
+			},
+			valueAt: (event) => {
+				const axis = this.#axis(slider, cap);
+				const at = clampProportion((axis.position(event) - axis.startPx) / axis.travelPx);
+				const mapping = this.mapping();
+				return mapping.snap(mapping.valueAt(at));
+			}
+		}, signal);
 		this.render();
 		this.checkStyles(slider, "slider.css");
 		this.bindGestures(slider, signal, (event) => {
@@ -103,12 +130,28 @@ var SonicSlider = class extends SonicValueElement {
 		return this.orientation;
 	}
 	draw() {
+		if (this.isEditing() || this.isRevealed()) this.#hover?.clear();
 		this.writeProportions(this.#slider, "slider", this.modulation);
 		this.#renderBuffered(this.#slider);
+		this.#renderScrub(this.#slider);
+		this.#placeReadout(this.#slider);
 	}
 	focusTarget() {
 		return this.#slider;
 	}
+	heldWrite(next) {
+		super.heldWrite(next);
+		if (this.scrub) this.render();
+	}
+	holdChanged() {
+		if (this.scrub) this.render();
+	}
+	previewValue() {
+		return this.#hover?.value();
+	}
+	scrubsKeyRepeat() {
+		return this.scrub;
+	}
 	springTarget() {
 		return this.spring ? this.originValue() : void 0;
 	}
@@ -125,6 +168,13 @@ var SonicSlider = class extends SonicValueElement {
 			travelPx: Math.max(1, box.width - capBox.width)
 		};
 	}
+	#placeReadout(slider) {
+		if (!this.scrub) {
+			slider.style.removeProperty("--_sonic-slider-readout-value");
+			return;
+		}
+		slider.style.setProperty("--_sonic-slider-readout-value", String(this.mapping().proportionOf(this.readoutValue())));
+	}
 	#renderBuffered(slider) {
 		const buffered = this.#buffered;
 		if (buffered.length === 0) {
@@ -143,6 +193,22 @@ var SonicSlider = class extends SonicValueElement {
 		});
 		slider.style.setProperty("--_sonic-slider-buffered-regions", `linear-gradient(var(--_sonic-slider-toward), ${stops.join(", ")})`);
 	}
+	#renderScrub(slider) {
+		const { style } = slider;
+		const { proportionOf } = this.mapping();
+		const isHeld = this.scrub && this.heldFrom() !== void 0;
+		const played = proportionOf(this.playback());
+		const scrubbed = proportionOf(this.value);
+		if (isHeld) style.setProperty("--_sonic-slider-played", String(played));
+		else style.removeProperty("--_sonic-slider-played");
+		if (played === scrubbed || !isHeld || !this.isRevealed()) {
+			style.removeProperty("--_sonic-slider-scrub-region");
+			return;
+		}
+		const from = grooveStop(Math.min(played, scrubbed));
+		const to = grooveStop(Math.max(played, scrubbed));
+		style.setProperty("--_sonic-slider-scrub-region", `linear-gradient(var(--_sonic-slider-toward), transparent ${from}, var(--_sonic-slider-scrub) ${from} ${to}, transparent ${to})`);
+	}
 };
 
 //#endregion

package/dist/default/elements/spectrum.js

@@ -0,0 +1,230 @@
+import { requireChild, template } from "../lib/render.js";
+import { SonicDisplayElement } from "./display-element.js";
+import { columnEdges, columnLevels, gridColumns, gridRows, levelRows, loudestBin, zoneRows } from "../lib/spectrum-columns.js";
+import { areSettled, createLevels, receiveLevels, stepLevels } from "../lib/spectrum-levels.js";
+
+//#region src/elements/spectrum.ts
+const colours = {
+	clip: "--_sonic-spectrum-clip",
+	grid: "--_sonic-spectrum-grid",
+	hot: "--_sonic-spectrum-hot",
+	lit: "--_sonic-spectrum-lit"
+};
+const numbers = {
+	clipFrom: "--_sonic-spectrum-clip-from",
+	hotFrom: "--_sonic-spectrum-hot-from"
+};
+const defaultFrequencies = [20, 2e4];
+const defaultSampleRate = 48e3;
+const renderSpectrum = template(`
+		<div aria-hidden="true" class="sonic-spectrum">
+			<canvas class="sonic-spectrum-canvas"></canvas>
+		</div>
+	`, HTMLDivElement);
+function paintGrid(context, { dpr, height, look, range, rowOf, width }, [frequencyMin, frequencyMax]) {
+	const line = Math.max(1, Math.round(dpr));
+	const columns = gridColumns({
+		frequencyMax,
+		frequencyMin
+	}, width);
+	const rows = gridRows(range, rowOf);
+	context.beginPath();
+	for (const column of columns) context.rect(column, 0, line, height);
+	for (const row of rows) context.rect(0, row, width, line);
+	context.fillStyle = look.colours.grid;
+	context.fill();
+}
+function zoneFill(context, { height, look, rowOf }) {
+	const gradient = context.createLinearGradient(0, 0, 0, height);
+	const { clip, hot } = zoneRows(look.numbers, rowOf);
+	gradient.addColorStop(clip / height, look.colours.clip);
+	gradient.addColorStop(clip / height, look.colours.hot);
+	gradient.addColorStop(hot / height, look.colours.hot);
+	gradient.addColorStop(hot / height, look.colours.lit);
+	return gradient;
+}
+function paintBars(context, scene, bars) {
+	const { height, rowOf } = scene;
+	let previous = height;
+	context.beginPath();
+	context.moveTo(0, height);
+	for (const [column, level] of bars.entries()) {
+		const row = rowOf(level);
+		bars[column] = row;
+		if (row === previous) continue;
+		context.lineTo(column, previous);
+		context.lineTo(column, row);
+		previous = row;
+	}
+	context.lineTo(bars.length, previous);
+	context.lineTo(bars.length, height);
+	context.closePath();
+	context.fillStyle = zoneFill(context, scene);
+	context.fill();
+}
+function paintHolds(context, { look, rowOf }, { bars, holds }) {
+	context.beginPath();
+	for (const [column, level] of holds.entries()) {
+		const row = rowOf(level);
+		if (row < (bars[column] ?? 0)) context.rect(column, row, 1, 1);
+	}
+	context.fillStyle = look.colours.lit;
+	context.fill();
+}
+var SonicSpectrum = class extends SonicDisplayElement {
+	static observedAttributes = [
+		...SonicDisplayElement.observedAttributes,
+		"frequency-max",
+		"frequency-min",
+		"grid",
+		"peak-hold",
+		"sample-rate"
+	];
+	get frequencyMax() {
+		return this.numberAttribute("frequency-max", defaultFrequencies[1]);
+	}
+	set frequencyMax(hertz) {
+		this.reflect("frequency-max", hertz);
+	}
+	get frequencyMin() {
+		return this.numberAttribute("frequency-min", defaultFrequencies[0]);
+	}
+	set frequencyMin(hertz) {
+		this.reflect("frequency-min", hertz);
+	}
+	get grid() {
+		return this.getAttribute("grid") === "none" ? "none" : "on";
+	}
+	set grid(grid) {
+		this.reflect("grid", grid);
+	}
+	get peak() {
+		return this.#peak && { ...this.#peak };
+	}
+	get peakHold() {
+		return this.hasAttribute("peak-hold");
+	}
+	set peakHold(isHeld) {
+		this.reflect("peak-hold", isHeld);
+	}
+	get sampleRate() {
+		const sampleRate = this.numberAttribute("sample-rate", defaultSampleRate);
+		return sampleRate > 0 ? sampleRate : defaultSampleRate;
+	}
+	set sampleRate(hertz) {
+		this.reflect("sample-rate", hertz);
+	}
+	control = renderSpectrum();
+	canvas = requireChild(this.control, ".sonic-spectrum-canvas", HTMLCanvasElement);
+	colours = colours;
+	numbers = numbers;
+	sheet = "spectrum.css";
+	#columns;
+	#isSettled = true;
+	#lastFrameMs;
+	#levels = createLevels(0);
+	#peak;
+	#receivedRate;
+	connectedCallback() {
+		this.upgradeProperties("frequencyMax", "frequencyMin", "grid", "peakHold", "sampleRate");
+		super.connectedCallback();
+	}
+	resetPeak() {
+		this.#peak = void 0;
+	}
+	paint(context, { frameMs, isDirty, look, size }) {
+		if (this.isDisabled()) {
+			if (isDirty) this.#draw(context, look, size);
+			return;
+		}
+		const wasSettled = this.#isSettled;
+		this.#step(frameMs, look.isReducedMotion);
+		if (isDirty || !wasSettled || !this.#isSettled) this.#draw(context, look, size);
+		if (!this.#isSettled) this.surface()?.requestFrame();
+	}
+	pull(analyser, buffer) {
+		analyser.getFloatFrequencyData(buffer);
+	}
+	receive(frame) {
+		if (frame.length !== this.#levels.bars.length) this.#levels = createLevels(frame.length);
+		this.#receivedRate = this.analyser?.context.sampleRate ?? this.sampleRate;
+		receiveLevels(this.#levels, frame, this.min);
+		const loudest = loudestBin(frame, this.#axis());
+		if (loudest && loudest.decibels > (this.#peak?.decibels ?? -Infinity)) this.#peak = loudest;
+	}
+	#axis() {
+		const [frequencyMin, frequencyMax] = this.#frequencies();
+		return {
+			binCount: this.#levels.bars.length,
+			frequencyMax,
+			frequencyMin,
+			sampleRate: this.#receivedRate ?? this.sampleRate
+		};
+	}
+	#columnsFor(width) {
+		const axis = this.#axis();
+		const key = [
+			width,
+			axis.binCount,
+			axis.sampleRate,
+			axis.frequencyMin,
+			axis.frequencyMax
+		].join(" ");
+		if (this.#columns?.key !== key) this.#columns = {
+			bars: new Float64Array(width),
+			edges: columnEdges(axis, width),
+			holds: new Float64Array(width),
+			key
+		};
+		return this.#columns;
+	}
+	#draw(context, look, size) {
+		const scene = {
+			...size,
+			look,
+			range: {
+				max: this.max,
+				min: this.min
+			},
+			rowOf: levelRows({
+				max: this.max,
+				min: this.min
+			}, size.height)
+		};
+		context.clearRect(0, 0, size.width, size.height);
+		if (this.grid === "on") paintGrid(context, scene, this.#frequencies());
+		if (this.isDisabled()) return;
+		const { bars, edges, holds } = this.#columnsFor(size.width);
+		const spread = {
+			edges,
+			floor: scene.range.min
+		};
+		columnLevels(bars, this.#levels.bars, spread);
+		paintBars(context, scene, bars);
+		if (!this.peakHold) return;
+		columnLevels(holds, this.#levels.holds, spread);
+		paintHolds(context, scene, {
+			bars,
+			holds
+		});
+	}
+	#frequencies() {
+		const { frequencyMax, frequencyMin } = this;
+		return frequencyMin > 0 && frequencyMax > frequencyMin ? [frequencyMin, frequencyMax] : defaultFrequencies;
+	}
+	#step(frameMs, isReducedMotion) {
+		const floor = this.min;
+		stepLevels(this.#levels, {
+			elapsedMs: Math.max(0, frameMs - (this.#lastFrameMs ?? frameMs)),
+			floor,
+			isHeld: this.peakHold,
+			isHoldStepped: isReducedMotion,
+			nowMs: frameMs
+		});
+		this.#isSettled = areSettled(this.#levels, floor);
+		this.#lastFrameMs = this.#isSettled ? void 0 : frameMs;
+	}
+};
+
+//#endregion
+export { SonicSpectrum };