@xsynaptic/sonic-ui 0.6.1 → 0.9.0

package/README.md

@@ -23,6 +23,8 @@ import '@xsynaptic/sonic-ui/define';
 <sonic-dial aria-label="Cutoff" value="40"></sonic-dial>
 ```
 
+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/dial.js

@@ -1,4 +1,5 @@
 import { requireChild, template } from "../lib/render.js";
+import { createModulation } from "./modulation.js";
 import { SonicValueElement } from "./value-element.js";
 import { bindScale } from "./scale.js";
 
@@ -43,12 +44,15 @@ var SonicDial = class extends SonicValueElement {
 		this.reflect("modulation", amount);
 	}
 	get modulationValue() {
-		return this.readModulationValue();
+		return this.#modulation.value();
 	}
 	set modulationValue(value) {
-		this.writeModulationValue(this.#dial, "dial", value);
+		this.#modulation.write(value, this.isBound() ? this.mapping() : void 0);
 	}
 	#dial = renderDial();
+	#modulation = createModulation(this.#dial, "dial", (isModulated) => {
+		this.toggleState("modulated", isModulated);
+	});
 	connectedCallback() {
 		this.upgradeProperties("endless", "modulationValue", "modulation");
 		super.connectedCallback();
@@ -67,7 +71,12 @@ var SonicDial = class extends SonicValueElement {
 		}));
 	}
 	draw() {
-		this.writeProportions(this.#dial, "dial", this.endless ? 0 : this.modulation);
+		this.#modulation.draw({
+			mapping: this.mapping(),
+			modulation: this.endless ? 0 : this.modulation,
+			origin: this.originValue(),
+			value: this.value
+		});
 	}
 	focusTarget() {
 		return this.#dial;

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 { 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 { 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";
@@ -269,7 +269,7 @@ var SonicEnvelope = class extends SonicElement {
 		const pressed = this.#pressed(event);
 		if (!pressed || pressed.drives.length === 0) return void 0;
 		const { drives, isFlipped, part } = pressed;
-		this.#claim.press(true);
+		this.#claim.press(true, revealDelay(this.#envelope));
 		this.#held = part;
 		this.#drawBracket();
 		const box = this.#graph.getBoundingClientRect();

package/dist/default/elements/modulation.js

@@ -0,0 +1,45 @@
+import { toNumber } from "../lib/math.js";
+
+//#region src/elements/modulation.ts
+function createModulation(control, prefix, toggle) {
+	const { style } = control;
+	let isModulated = false;
+	let modulationValue;
+	const writeProportion = (mapping) => {
+		const shown = mapping.isWrapping ? void 0 : modulationValue;
+		const isShown = shown !== void 0;
+		if (isShown !== isModulated) {
+			isModulated = isShown;
+			toggle(isShown);
+		}
+		if (shown === void 0) {
+			style.removeProperty(`--_sonic-${prefix}-modulation-value`);
+			return;
+		}
+		style.setProperty(`--_sonic-${prefix}-modulation-value`, String(mapping.proportionOf(shown)));
+	};
+	return {
+		draw: ({ mapping, modulation, origin, value }) => {
+			const at = mapping.proportionOf(value);
+			const reach = mapping.proportionOf(value + modulation);
+			const { positionCount } = mapping;
+			style.setProperty(`--_sonic-${prefix}-value`, String(at));
+			style.setProperty(`--_sonic-${prefix}-origin`, String(mapping.proportionOf(origin)));
+			style.setProperty(`--_sonic-${prefix}-modulation-from`, String(Math.min(at, reach)));
+			style.setProperty(`--_sonic-${prefix}-modulation-to`, String(Math.max(at, reach)));
+			if (positionCount === void 0) style.removeProperty(`--_sonic-${prefix}-position-count`);
+			else style.setProperty(`--_sonic-${prefix}-position-count`, String(positionCount));
+			writeProportion(mapping);
+		},
+		value: () => modulationValue,
+		write: (next, mapping) => {
+			const value = next === void 0 || next === null ? void 0 : toNumber(next);
+			if (value !== void 0 && !Number.isFinite(value)) return;
+			modulationValue = value;
+			if (mapping) writeProportion(mapping);
+		}
+	};
+}
+
+//#endregion
+export { createModulation };

package/dist/default/elements/readout-claim.js

@@ -1,6 +1,11 @@
+import { readMsProperty } from "../lib/read-ms-property.js";
+
 //#region src/elements/readout-claim.ts
 const keyRevealMs = 1e3;
 const revealMs = 250;
+function revealDelay(control) {
+	return Math.max(0, readMsProperty(getComputedStyle(control), "--_sonic-reveal-delay", revealMs));
+}
 var ReadoutClaim = class {
 	get isRevealed() {
 		return this.#isDragging || this.#keyTimer !== void 0;
@@ -24,7 +29,7 @@ var ReadoutClaim = class {
 		this.#keyTimer = void 0;
 		return wasTimed;
 	}
-	press(isDown) {
+	press(isDown, delayMs = revealMs) {
 		this.conceal("drag");
 		if (!isDown) {
 			this.#onLapse();
@@ -33,7 +38,7 @@ var ReadoutClaim = class {
 		this.#holdTimer = setTimeout(() => {
 			this.reveal("drag");
 			this.#onLapse();
-		}, 250);
+		}, delayMs);
 	}
 	reveal(by) {
 		if (by === "drag") {
@@ -49,4 +54,4 @@ var ReadoutClaim = class {
 };
 
 //#endregion
-export { ReadoutClaim };
+export { ReadoutClaim, revealDelay };

package/dist/default/elements/slider.js

@@ -1,4 +1,6 @@
+import { clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
+import { createModulation } from "./modulation.js";
 import { SonicValueElement } from "./value-element.js";
 import { bindScale } from "./scale.js";
 import { sortedRegions } from "../lib/time-regions.js";
@@ -34,6 +36,7 @@ var SonicSlider = class extends SonicValueElement {
 		...SonicValueElement.observedAttributes,
 		"modulation",
 		"orientation",
+		"scrub",
 		"spring"
 	];
 	get buffered() {
@@ -56,10 +59,10 @@ var SonicSlider = class extends SonicValueElement {
 		this.reflect("modulation", amount);
 	}
 	get modulationValue() {
-		return this.readModulationValue();
+		return this.#modulation.value();
 	}
 	set modulationValue(value) {
-		this.writeModulationValue(this.#slider, "slider", value);
+		this.#modulation.write(value, this.isBound() ? this.mapping() : void 0);
 	}
 	get orientation() {
 		return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
@@ -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");
 	}
@@ -75,8 +84,11 @@ var SonicSlider = class extends SonicValueElement {
 	}
 	#buffered = [];
 	#slider = renderSlider();
+	#modulation = createModulation(this.#slider, "slider", (isModulated) => {
+		this.toggleState("modulated", isModulated);
+	});
 	connectedCallback() {
-		this.upgradeProperties("buffered", "groovePress", "modulationValue", "modulation", "orientation", "spring");
+		this.upgradeProperties("buffered", "groovePress", "modulationValue", "modulation", "orientation", "scrub", "spring");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -89,6 +101,18 @@ var SonicSlider = class extends SonicValueElement {
 		slider.addEventListener("transitionend", (event) => {
 			if (event.propertyName === "--_sonic-slider-value") this.toggleState("springing", false);
 		}, { signal });
+		this.bindHover(slider, signal, {
+			canShow: () => this.scrub && this.readout && this.orientation === "horizontal",
+			place: () => {
+				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));
+			}
+		});
 		this.render();
 		this.checkStyles(slider, "slider.css");
 		this.bindGestures(slider, signal, (event) => {
@@ -103,12 +127,29 @@ var SonicSlider = class extends SonicValueElement {
 		return this.orientation;
 	}
 	draw() {
-		this.writeProportions(this.#slider, "slider", this.modulation);
+		this.#modulation.draw({
+			mapping: this.mapping(),
+			modulation: this.modulation,
+			origin: this.originValue(),
+			value: this.value
+		});
 		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();
+	}
+	scrubsKeyRepeat() {
+		return this.scrub;
+	}
 	springTarget() {
 		return this.spring ? this.originValue() : void 0;
 	}
@@ -125,6 +166,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 +191,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