@xsynaptic/sonic-ui 0.4.0 → 0.6.0

package/README.md

@@ -1,11 +1,9 @@
 # @xsynaptic/sonic-ui
 
-Native custom elements for audio interfaces. Each control renders in the light DOM, drawn in CSS, skinned with `--sonic-*` custom properties. No framework, no runtime dependencies.
+Native custom elements for audio interfaces. Each control renders in the light DOM, skinned with `--sonic-*` tokens (CSS custom properties). No framework, no runtime dependencies.
 
 Early and unstable: any 0.x release may break the API.
 
-## Setup
-
 ```sh
 pnpm add @xsynaptic/sonic-ui
 ```
@@ -23,23 +21,8 @@ import '@xsynaptic/sonic-ui/define';
 
 ```html
 <sonic-dial aria-label="Cutoff" value="40"></sonic-dial>
-<sonic-slider aria-label="Send" value="30"></sonic-slider>
-<sonic-key aria-label="Mute" toggle>…</sonic-key>
 ```
 
-The styles sit in `@layer sonic`, so list it after your resets. A skin (`slate`, `lime` or `ivory`) applies under `.sonic-skin-<name>` on any ancestor. The package root exports the classes without registering them, for your own tag names.
-
-## Usage
-
-- **Attributes and properties** reflect each other: `dial.max = 200` writes `max="200"`. `value` and the key's `pressed` are the live state and never write their attribute, as on native inputs.
-- **Events:** `change` when a control settles, and `input` while a dial or slider moves; both bubble.
-- **Formatting:** `formatValue` sets the text the readout and assistive technology read, and `parseValue` reads typed entry back. `formatPercent` and `parsePercent` from the package root show 0 to 1 as a percentage.
-- **Forms:** controls that hold a value submit under their `name`, reset, take a `<label>`, and follow a disabled `<fieldset>`, as native inputs do.
-
-## Browsers
-
-Current Chrome and Edge, Safari 26 and Firefox 147.
-
-## License
+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.
 
-MIT
+Targets current Chrome and Edge, Safari 26 and Firefox 147. MIT licensed.

package/dist/default/dat.js

@@ -0,0 +1,51 @@
+import { clamp } from "./lib/math.js";
+
+//#region src/dat.ts
+function readVersion(view) {
+	const version = view.getInt32(0, true);
+	if (version === 1 || version === 2) return version;
+	throw new Error(`A .dat file of version ${String(version)} is not one this reads`);
+}
+function readDatHeader(buffer) {
+	if (buffer.byteLength < 20) throw new Error("A .dat header takes at least 20 bytes");
+	const view = new DataView(buffer);
+	const version = readVersion(view);
+	const dataOffset = version === 1 ? 20 : 24;
+	if (buffer.byteLength < dataOffset) throw new Error(`A version ${String(version)} .dat header takes ${String(dataOffset)} bytes`);
+	const channels = version === 1 ? 1 : view.getInt32(20, true);
+	if (channels < 1) throw new Error("A .dat header names no channels");
+	const sampleRate = view.getInt32(8, true);
+	const samplesPerPixel = view.getInt32(12, true);
+	if (samplesPerPixel < 1) throw new Error("A .dat header names no samples per pixel");
+	return {
+		bits: (view.getUint32(4, true) & 1) === 1 ? 8 : 16,
+		channels,
+		dataOffset,
+		pairs: view.getUint32(16, true),
+		pairsPerSecond: sampleRate / samplesPerPixel,
+		sampleRate,
+		samplesPerPixel,
+		version
+	};
+}
+function datByteRange(header, fromPair, toPair) {
+	const from = clamp(Math.floor(fromPair), 0, header.pairs);
+	const to = clamp(Math.ceil(toPair), from, header.pairs);
+	if (!(to > from)) return void 0;
+	const pairBytes = header.channels * 2 * header.bits / 8;
+	return [header.dataOffset + from * pairBytes, header.dataOffset + to * pairBytes - 1];
+}
+function readDatSamples(header, body, byteOffset = 0) {
+	return header.bits === 8 ? new Int8Array(body, byteOffset) : new Int16Array(body, byteOffset, Math.floor((body.byteLength - byteOffset) / 2));
+}
+function readDatPeaks(header, body, byteOffset = 0) {
+	return {
+		channels: header.channels,
+		fullScale: header.bits === 8 ? 128 : 32768,
+		pairsPerSecond: header.pairsPerSecond,
+		samples: readDatSamples(header, body, byteOffset)
+	};
+}
+
+//#endregion
+export { datByteRange, readDatHeader, readDatPeaks, readDatSamples };

package/dist/default/define/button.js

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

package/dist/default/define/envelope.js

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

package/dist/default/define/split.js

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

package/dist/default/define/switch.js

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

package/dist/default/define/waveform.js

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

package/dist/default/define/wavestrip.js

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

package/dist/default/define/xy.js

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

package/dist/default/define.js

@@ -1,6 +1,12 @@
+import "./define/button.js";
 import "./define/dial.js";
-import "./define/key.js";
+import "./define/envelope.js";
 import "./define/meter.js";
 import "./define/number.js";
 import "./define/segmented.js";
 import "./define/slider.js";
+import "./define/split.js";
+import "./define/switch.js";
+import "./define/waveform.js";
+import "./define/wavestrip.js";
+import "./define/xy.js";

package/dist/default/elements/button.js

@@ -0,0 +1,165 @@
+import { placeChildren, requireChild, template } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { SonicFormElement } from "./form-element.js";
+import { copyNode } from "../lib/copy-node.js";
+import { bindHold } from "../lib/hold.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"]);
+var SonicButton = class extends SonicFormElement {
+	static observedAttributes = [
+		...SonicFormElement.observedAttributes,
+		"busy",
+		"momentary",
+		"pressed",
+		"soft-disabled",
+		"latching",
+		"value"
+	];
+	get armed() {
+		return this.hasAttribute("armed");
+	}
+	set armed(isArmed) {
+		this.reflect("armed", isArmed);
+	}
+	get busy() {
+		return this.hasAttribute("busy");
+	}
+	set busy(isBusy) {
+		this.reflect("busy", isBusy);
+	}
+	get defaultPressed() {
+		return this.hasAttribute("pressed");
+	}
+	set defaultPressed(isPressed) {
+		this.reflect("pressed", isPressed);
+	}
+	get latching() {
+		return this.hasAttribute("latching");
+	}
+	set latching(isLatching) {
+		this.reflect("latching", isLatching);
+	}
+	get momentary() {
+		return this.hasAttribute("momentary");
+	}
+	set momentary(isMomentary) {
+		this.reflect("momentary", isMomentary);
+	}
+	get pressed() {
+		return this.#isDirty ? this.#pressed : this.defaultPressed;
+	}
+	set pressed(isPressed) {
+		this.#isDirty = true;
+		this.#pressed = isPressed === true;
+		this.render();
+	}
+	get softDisabled() {
+		return this.hasAttribute("soft-disabled");
+	}
+	set softDisabled(isSoftDisabled) {
+		this.reflect("soft-disabled", isSoftDisabled);
+	}
+	get value() {
+		return this.getAttribute("value") ?? "on";
+	}
+	set value(value) {
+		this.reflect("value", value);
+	}
+	#button = renderButton();
+	#holding;
+	#isDirty = false;
+	#pressed = false;
+	attributeChangedCallback(name) {
+		if (name === "pressed") this.#isDirty = false;
+		if (this.isDisabled() || this.#isSoftDisabled()) this.#holding?.release();
+		this.render();
+	}
+	formResetCallback() {
+		this.attributeChangedCallback("pressed");
+	}
+	activate() {
+		this.#button.click();
+	}
+	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.mirrorChildren({
+			control: button,
+			copy: copyNode,
+			place: (copies) => {
+				placeChildren(cap, copies);
+			}
+		}, signal);
+		this.render();
+		this.checkStyles(button, "button.css");
+		button.addEventListener("click", (event) => {
+			if (this.#isSoftDisabled()) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
+			if (!this.latching) return;
+			this.pressed = !this.pressed;
+			this.dispatchEvent(new Event("change", { bubbles: true }));
+		}, { signal });
+		this.#bindMomentary(button, signal);
+	}
+	focusTarget() {
+		return this.#button;
+	}
+	render() {
+		if (!this.isBound()) return;
+		const button = this.#button;
+		writeAttribute(button, "disabled", this.isDisabled() ? "" : void 0);
+		writeAttribute(button, "aria-disabled", this.#isSoftDisabled() ? "true" : void 0);
+		writeAttribute(button, "aria-busy", this.busy ? "true" : void 0);
+		writeAttribute(button, "aria-pressed", this.latching ? String(this.pressed) : void 0);
+		this.toggleState("pressed", this.pressed);
+		this.forwardNaming(button, true);
+		const submitted = this.latching && this.pressed ? this.value : null;
+		this.writeFormValue(submitted, String(this.pressed));
+	}
+	restoreState(state) {
+		if (this.latching) this.pressed = state === "true";
+	}
+	#bindMomentary(button, signal) {
+		const holding = bindHold(button, {
+			canHold: () => !this.isDisabled() && !this.#isSoftDisabled(),
+			leave: "blur",
+			onHold: () => {
+				this.#press(true);
+			},
+			onRelease: () => {
+				this.#press(false);
+			}
+		}, signal);
+		this.#holding = holding;
+		button.addEventListener("pointerdown", (event) => {
+			if (event.button !== 0 || !this.#isMomentary()) return;
+			button.setPointerCapture(event.pointerId);
+			holding.hold(event.pointerId);
+		}, { signal });
+		button.addEventListener("keydown", (event) => {
+			if (event.repeat || !holdKeys.has(event.key) || !this.#isMomentary()) return;
+			holding.hold(event.key);
+		}, { signal });
+	}
+	#isMomentary() {
+		return this.momentary && !this.latching;
+	}
+	#isSoftDisabled() {
+		return this.softDisabled && !this.isDisabled();
+	}
+	#press(isPressed) {
+		this.pressed = isPressed;
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+};
+
+//#endregion
+export { SonicButton };

package/dist/default/elements/dial.js

@@ -1,6 +1,5 @@
 import { requireChild, template } from "../lib/render.js";
-import { readPxProperty } from "../lib/read-px-property.js";
-import { SonicRangeElement } from "./range-element.js";
+import { SonicValueElement } from "./value-element.js";
 
 //#region src/elements/dial.ts
 const renderDial = template(`
@@ -10,7 +9,7 @@ const renderDial = template(`
 			<div class="sonic-dial-ring"></div>
 			<div class="sonic-dial-modulation"></div>
 			<div class="sonic-dial-cap"></div>
-			<div class="sonic-dial-pointer"></div>
+			<div class="sonic-dial-indicator"></div>
 			<div class="sonic-dial-readout" popover="manual">
 				<span></span>
 				<input
@@ -24,10 +23,9 @@ const renderDial = template(`
 			</div>
 		</div>
 	`, HTMLDivElement);
-const fallbackTravelPx = 160;
-var SonicDial = class extends SonicRangeElement {
+var SonicDial = class extends SonicValueElement {
 	static observedAttributes = [
-		...SonicRangeElement.observedAttributes,
+		...SonicValueElement.observedAttributes,
 		"endless",
 		"modulation"
 	];
@@ -43,9 +41,15 @@ var SonicDial = class extends SonicRangeElement {
 	set modulation(amount) {
 		this.reflect("modulation", amount);
 	}
+	get modulationValue() {
+		return this.readModulationValue();
+	}
+	set modulationValue(value) {
+		this.writeModulationValue(this.#dial, "dial", value);
+	}
 	#dial = renderDial();
 	connectedCallback() {
-		this.upgradeProperties("endless", "modulation");
+		this.upgradeProperties("endless", "modulationValue", "modulation");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -55,26 +59,16 @@ var SonicDial = class extends SonicRangeElement {
 		this.checkStyles(dial, "dial.css");
 		this.bindGestures(dial, signal, () => ({
 			position: (event) => -event.clientY,
-			travelPx: readPxProperty(getComputedStyle(dial), "--_sonic-dial-travel", fallbackTravelPx)
+			travelPx: this.travelPx(dial, "--_sonic-dial-travel")
 		}));
 	}
+	draw() {
+		this.writeProportions(this.#dial, "dial", this.endless ? 0 : this.modulation);
+	}
 	focusTarget() {
 		return this.#dial;
 	}
-	render() {
-		const dial = this.#dial;
-		const positions = this.positions();
-		const [modulationFrom, modulationTo] = this.modulationFractions(this.endless ? 0 : this.modulation);
-		dial.style.setProperty("--_sonic-dial-value", String(this.fraction(this.value)));
-		dial.style.setProperty("--_sonic-dial-origin", String(this.originFraction()));
-		dial.style.setProperty("--_sonic-dial-modulation-from", String(modulationFrom));
-		dial.style.setProperty("--_sonic-dial-modulation-to", String(modulationTo));
-		if (positions === void 0) dial.style.removeProperty("--_sonic-dial-positions");
-		else dial.style.setProperty("--_sonic-dial-positions", String(positions));
-		this.renderScale();
-		this.renderAria(dial);
-	}
-	wraps() {
+	isWrapping() {
 		return this.endless;
 	}
 };