@xsynaptic/sonic-ui 0.24.1 → 0.26.0

package/dist/default/elements/region.js

@@ -0,0 +1,161 @@
+import { SonicFormElement } from "./form-element.js";
+
+//#region src/elements/region.ts
+const owners = /* @__PURE__ */ new WeakMap();
+let link;
+function linkRegion(element) {
+	return link(element);
+}
+function ownRegions(host, changed, signal) {
+	owners.set(host, changed);
+	signal.addEventListener("abort", () => {
+		if (owners.get(host) === changed) owners.delete(host);
+	}, { once: true });
+}
+var SonicRegion = class extends SonicFormElement {
+	static observedAttributes = [
+		...SonicFormElement.observedAttributes,
+		"end",
+		"kind",
+		"name",
+		"start",
+		"tabindex"
+	];
+	static {
+		link = (element) => ({
+			change: () => {
+				element.#report("change");
+			},
+			draw: (part) => {
+				element.#draw(part);
+			},
+			hold: (by) => {
+				element.#held = by;
+				element.toggleState("dragging", by === "pointer");
+			},
+			input: (span) => element.#input(span),
+			isDisabled: () => element.isDisabled(),
+			span: () => {
+				const { end, start } = element.#span;
+				return {
+					end: Math.max(start, end),
+					start: Math.min(start, end)
+				};
+			}
+		});
+	}
+	get dragging() {
+		return this.hasState("dragging");
+	}
+	get end() {
+		return this.#span.end;
+	}
+	set end(next) {
+		if (!this.#held) this.reflect("end", next);
+	}
+	/** Lowercase letters, digits and hyphens; colours the region through `--sonic-marker-<kind>` */
+	get kind() {
+		return this.getAttribute("kind") ?? void 0;
+	}
+	set kind(kind) {
+		this.reflect("kind", kind);
+	}
+	get start() {
+		return this.#span.start;
+	}
+	set start(next) {
+		if (!this.#held) this.reflect("start", next);
+	}
+	#formState = "";
+	#held;
+	#part;
+	#span = {
+		end: 0,
+		start: 0
+	};
+	attributeChangedCallback(name) {
+		const isSpan = name === "end" || name === "start";
+		if (isSpan && this.#held) return;
+		if (isSpan) this.#readSpan(name);
+		this.render();
+	}
+	connectedCallback() {
+		this.upgradeProperties("end", "kind", "start");
+		super.connectedCallback();
+	}
+	formResetCallback() {
+		if (this.#held) return;
+		this.#readSpan("start");
+		this.#readSpan("end");
+		this.render();
+	}
+	connect() {
+		this.render();
+		if (this.parentElement?.localName !== "sonic-wavestrip");
+	}
+	focusTarget() {
+		return this.#part;
+	}
+	render() {
+		if (!this.isBound() || !this.parentElement) return;
+		owners.get(this.parentElement)?.(this);
+	}
+	restoreState(state) {
+		const [start = NaN, end = NaN] = state.split(",").map(Number);
+		if (!Number.isFinite(start) || !Number.isFinite(end)) return;
+		this.#span = {
+			end,
+			start
+		};
+		this.render();
+	}
+	stateTarget() {
+		return this.#part;
+	}
+	#draw(part) {
+		this.#part = part;
+		this.forwardNaming(part, true);
+		this.#writeForm();
+	}
+	#input(span) {
+		const hasMoved = span.start !== this.#span.start || span.end !== this.#span.end;
+		if (hasMoved) {
+			this.#span = span;
+			this.render();
+			this.#report("input");
+		}
+		return hasMoved;
+	}
+	#readSpan(name) {
+		const { end, start } = this.#span;
+		if (name === "end") {
+			this.#span = {
+				end: this.numberAttribute("end", start),
+				start
+			};
+			return;
+		}
+		const next = this.numberAttribute("start", 0);
+		this.#span = {
+			end: this.hasAttribute("end") ? end : next,
+			start: next
+		};
+	}
+	#report(type) {
+		this.dispatchEvent(new Event(type, {
+			bubbles: true,
+			composed: type === "input"
+		}));
+	}
+	#writeForm() {
+		const { end, start } = this.#span;
+		const state = `${String(start)},${String(end)}`;
+		const formState = `${this.name}=${state}`;
+		if (formState === this.#formState) return;
+		this.#formState = formState;
+		this.writeFormFields([["start", start], ["end", end]], state);
+	}
+};
+
+//#endregion
+export { SonicRegion, linkRegion, ownRegions };

package/dist/default/elements/slider.js

@@ -152,6 +152,9 @@ var SonicSlider = class extends SonicValueElement {
 	springTarget() {
 		return this.spring ? this.originValue() : void 0;
 	}
+	stateTarget() {
+		return this.#slider;
+	}
 	#axis(slider, cap) {
 		const box = slider.getBoundingClientRect();
 		const capBox = cap.getBoundingClientRect();

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

@@ -8,7 +8,6 @@ const namingAttributes = [
 	"aria-label",
 	"aria-labelledby"
 ];
-const canMatchStates = CSS.supports("selector(:state(a))");
 const canReferElements = "ariaLabelledByElements" in Element.prototype;
 function writeLabelledBy(target, labels) {
 	const current = target.ariaLabelledByElements;
@@ -26,7 +25,6 @@ var SonicElement = class SonicElement extends HTMLElement {
 	}
 	internals = "attachInternals" in HTMLElement.prototype ? this.attachInternals() : void 0;
 	#connection;
-	#customStates = canMatchStates ? this.internals?.states : void 0;
 	#states = /* @__PURE__ */ new Set();
 	static #labelId(label) {
 		if (label.id === "") {
@@ -118,14 +116,11 @@ var SonicElement = class SonicElement extends HTMLElement {
 		}
 		this.setAttribute(name, value === true ? "" : value.toString());
 	}
+	stateTarget() {}
 	toggleState(state, isOn) {
-		if (isOn) {
-			this.#states.add(state);
-			this.#customStates?.add(state);
-			return;
-		}
-		this.#states.delete(state);
-		this.#customStates?.delete(state);
+		if (isOn) this.#states.add(state);
+		else this.#states.delete(state);
+		this.stateTarget()?.toggleAttribute(`data-sonic-${state}`, isOn);
 	}
 	upgradeProperties(...names) {
 		for (const name of names) {
@@ -135,6 +130,9 @@ var SonicElement = class SonicElement extends HTMLElement {
 			this[name] = value;
 		}
 	}
+	usesChild(_child) {
+		return false;
+	}
 	#checkBox(control, checked, box) {}
 	#checkHost(checked) {}
 	#focused() {

package/dist/default/elements/split.js

@@ -8,7 +8,7 @@ const modeNames = /* @__PURE__ */ new Set([
 	"equal",
 	"proportional"
 ]);
-const gridSlop = 1e-9;
+const gridTolerance = 1e-9;
 const lockAttributes = ["data-sonic-locked", "disabled"];
 function isMode(name) {
 	return name !== null && modeNames.has(name);
@@ -19,7 +19,7 @@ function isLocked(member) {
 function gridLimits(mapping, [low, high]) {
 	const bottom = mapping.snap(low);
 	const top = mapping.snap(high);
-	return [bottom < low - gridSlop ? mapping.keyTarget("ArrowRight", bottom) ?? bottom : bottom, top > high + gridSlop ? mapping.keyTarget("ArrowLeft", top) ?? top : top];
+	return [bottom < low - gridTolerance ? mapping.keyTarget("ArrowRight", bottom) ?? bottom : bottom, top > high + gridTolerance ? mapping.keyTarget("ArrowLeft", top) ?? top : top];
 }
 function modelOf(member, value, isFree) {
 	const mapping = member.link.model.mapping();

package/dist/default/elements/toggle.js

@@ -19,7 +19,7 @@ const renderPosition = template(`
 		</button>
 	`, HTMLButtonElement);
 const renderBare = template(`<button class="sonic-toggle-position" role="switch" type="button"></button>`, HTMLButtonElement);
-const pressSlop = 2;
+const pressTolerance = 2;
 var SonicToggle = class extends SonicPositionGroupElement {
 	bare = renderBare();
 	defaultOrientation = "horizontal";
@@ -72,11 +72,11 @@ var SonicToggle = class extends SonicPositionGroupElement {
 				if (!drag.hasMoved && moved < drag.thresholdPx) return;
 				drag.hasMoved = true;
 				this.toggleState("dragging", true);
-				if (moved >= pressSlop * drag.thresholdPx) drag.isPress = false;
+				if (moved >= pressTolerance * drag.thresholdPx) drag.isPress = false;
 				if (this.#slideTo(positionAt(drag.travel, pointer), event.pointerId)) drag.isPress = false;
 			},
 			release: (drag) => {
-				delete drag.marked.dataset.sonicPressed;
+				delete drag.marked.dataset.sonicActive;
 				this.#draggedTo = void 0;
 				this.toggleState("dragging", false);
 				this.render();
@@ -94,7 +94,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		const travel = this.#travel(event, isOnCap);
 		if (!travel || !isOnCap && this.isOptionDisabled(position)) return void 0;
 		const marked = this.options()[position] ?? this.bare;
-		marked.toggleAttribute("data-sonic-pressed", true);
+		marked.toggleAttribute("data-sonic-active", true);
 		return {
 			hasMoved: false,
 			isHolding: this.#holdFrom(position, event.pointerId),

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

@@ -233,6 +233,7 @@ var SonicValueElement = class extends SonicFormElement {
 	#model = createValueModel(() => this.#spec());
 	#parseValue;
 	#readout;
+	#said;
 	attributeChangedCallback(name) {
 		if (name === "value" && this.#isHeld()) {
 			this.#writeHeld(this.numberAttribute("value", this.min));
@@ -286,16 +287,17 @@ var SonicValueElement = class extends SonicFormElement {
 			toggleState: (state, isOn) => {
 				this.toggleState(state, isOn);
 			}
-		}, control);
+		}, control, this.focusTarget());
 		this.#gestures.bind(signal, grab);
 		control.addEventListener("pointerup", (event) => {
 			this.#hover?.lift(event);
 		}, { signal });
 	}
-	bindHover(control, signal, { canShow = () => true, place, valueAt }) {
+	bindHover(control, signal, { canShow = () => true, changed, place, valueAt }) {
 		this.#hover = bindHoverPreview(control, {
 			canShow,
 			changed: () => {
+				changed?.();
 				this.dispatchEvent(new Event("sonic-hover", { bubbles: true }));
 			},
 			dismiss: () => {
@@ -367,6 +369,9 @@ var SonicValueElement = class extends SonicFormElement {
 			played: from === void 0 ? this.#model.value : this.#heldAt ?? from
 		};
 	}
+	spokenText(value) {
+		return (this.#formatSpokenValue ?? this.#formatValue ?? this.notation.speak)?.(value);
+	}
 	springTarget() {}
 	tapTarget() {}
 	travelPx(control, property) {
@@ -401,7 +406,7 @@ var SonicValueElement = class extends SonicFormElement {
 		writeAttribute(control, "aria-valuemax", String(high));
 		writeAttribute(control, "aria-valuenow", String(this.#spokenNow()));
 		if (orientation) writeAttribute(control, "aria-orientation", orientation);
-		writeAttribute(control, "aria-valuetext", (this.#formatSpokenValue ?? this.#formatValue ?? this.notation.speak)?.(this.#spokenNow()));
+		writeAttribute(control, "aria-valuetext", this.#spokenValueText());
 		this.forwardNaming(control, true);
 		this.#renderDisabled(control);
 		this.renderReadout();
@@ -454,6 +459,19 @@ var SonicValueElement = class extends SonicFormElement {
 		const step = this.spokenStep;
 		return step !== void 0 && step > 0 ? trimFloat(Math.round(this.#model.value / step) * step) : this.#model.value;
 	}
+	#spokenValueText() {
+		const format = this.#formatSpokenValue ?? this.#formatValue ?? this.notation.speak;
+		const value = this.#spokenNow();
+		const said = this.#said;
+		if (said && said.format === format && said.value === value) return said.text;
+		const text = format?.(value);
+		this.#said = {
+			format,
+			text,
+			value
+		};
+		return text;
+	}
 	#textFor(value) {
 		return (this.#formatValue ?? this.notation.format)(value);
 	}

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

@@ -18,14 +18,16 @@ var ValueGestures = class {
 	});
 	#control;
 	#entry;
+	#focus;
 	#host;
 	#isRevealed = false;
 	#keyScrub;
 	#pointerDrag;
 	#pointerType;
-	constructor(host, control) {
+	constructor(host, control, focus) {
 		this.#host = host;
 		this.#control = control;
+		this.#focus = focus;
 	}
 	abandon() {
 		const drag = this.#dragging();
@@ -46,7 +48,7 @@ var ValueGestures = class {
 				if (isMenuPress(event) || host.isDisabled() || entry.isOpen) return;
 				host.toggleState("springing", false);
 				if (event.pointerType === "touch") event.preventDefault();
-				focusByPointer(control);
+				focusByPointer(this.#focus);
 				this.#pointerType = event.pointerType;
 				if (isResetPress(event)) {
 					this.#reset();
@@ -135,14 +137,14 @@ var ValueGestures = class {
 			}
 		});
 		this.#entry = entry;
-		entry.bind(control, signal);
+		entry.bind(this.#focus, signal);
 		return entry;
 	}
 	#bindKeys(entry, signal) {
 		const control = this.#control;
 		const host = this.#host;
 		control.addEventListener("keydown", (event) => {
-			if (host.isDisabled() || event.defaultPrevented || event.target !== control) return;
+			if (host.isDisabled() || event.defaultPrevented || event.target !== this.#focus) return;
 			host.toggleState("springing", false);
 			if (event.key === "Enter") {
 				if (host.springTarget() !== void 0 || !host.hasEntry()) return;
@@ -164,7 +166,7 @@ var ValueGestures = class {
 			if (isMeta && this.#dragging()) return;
 			if (isMeta || host.model.mapping().keyTarget(event.key, host.model.value) !== void 0) this.#springBack();
 		}, { signal });
-		control.addEventListener("blur", () => {
+		this.#focus.addEventListener("blur", () => {
 			this.#endKeyScrub();
 			this.#concealKeyReveal();
 			this.#springBack();

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

@@ -48,6 +48,18 @@ var SonicWaveElement = class extends SonicValueElement {
 		this.upgradeProperties("fill", "markers");
 		super.connectedCallback();
 	}
+	/** Copies; none outside the canvas */
+	markersFromPoint(clientX, clientY) {
+		const box = this.canvas.getBoundingClientRect();
+		if (!(clientX >= box.left && clientX <= box.right && clientY >= box.top && clientY <= box.bottom)) return [];
+		return this.markersInReach({
+			x: clientX - box.left,
+			y: clientY - box.top
+		}, box.width).flatMap((index) => {
+			const marker = this.#markers[index];
+			return marker ? [{ ...marker }] : [];
+		});
+	}
 	repaint() {
 		this.#surface?.rebuild();
 	}
@@ -75,9 +87,6 @@ var SonicWaveElement = class extends SonicValueElement {
 		this.render();
 		this.#surface.setFill(this.fill);
 	}
-	focusTarget() {
-		return this.control;
-	}
 	markerList() {
 		return this.#markers;
 	}
@@ -104,6 +113,9 @@ var SonicWaveElement = class extends SonicValueElement {
 		this.#current = current;
 		this.dispatchEvent(new Event("sonic-marker", { bubbles: true }));
 	}
+	stateTarget() {
+		return this.control;
+	}
 	surface() {
 		return this.#surface;
 	}

package/dist/default/elements/waveform.js

@@ -15,6 +15,7 @@ import { bindZoom, bindZoomKeys } from "../lib/zoom-gesture.js";
 const defaultZoom = 70;
 const defaultZoomMin = 20;
 const defaultZoomMax = 280;
+const lineReachPx = 4;
 const renderWaveform = template(`
 		<div class="sonic-waveform" role="slider" tabindex="0">
 			<canvas class="sonic-waveform-canvas" aria-hidden="true"></canvas>
@@ -201,10 +202,21 @@ var SonicWaveform = class extends SonicWaveElement {
 		super.attributeChangedCallback(name);
 		if (name === "zoomable") this.#zoomGesture?.sync();
 	}
+	/** Viewport x of a time as last drawn; not clamped to the window */
+	clientXOf(value) {
+		const { left, width } = this.canvas.getBoundingClientRect();
+		return left + this.#drawnX(value, width);
+	}
 	connectedCallback() {
 		this.upgradeProperties("bands", "peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "renderLabel", "requestPeaks", "zoom", "zoomable", "zoomMax", "zoomMin");
 		super.connectedCallback();
 	}
+	/** The time at a viewport x as last drawn */
+	valueFromPoint(clientX, _clientY) {
+		const { left, width } = this.canvas.getBoundingClientRect();
+		const { startSeconds, zoom } = this.#drawnWindow(width);
+		return clamp(startSeconds + (clientX - left) / zoom, ...this.mapping().bounds);
+	}
 	connect(signal) {
 		super.connect(signal);
 		const zoomTarget = {
@@ -231,9 +243,18 @@ var SonicWaveform = class extends SonicWaveElement {
 		surface?.requestFrame();
 		if (surface?.isVisible === false || !this.#drawn) this.showCurrentMarker(this.#sourceSeconds());
 	}
+	focusTarget() {
+		return this.control;
+	}
 	isEmpty() {
 		return !this.#peaks || this.#peaks.samples.length === 0;
 	}
+	markersInReach({ x }, widthPx) {
+		return this.markerList().map(({ start }, index) => ({
+			distance: Math.abs(this.#drawnX(start, widthPx) - x),
+			index
+		})).filter(({ distance }) => distance <= lineReachPx).toSorted((first, second) => first.distance - second.distance).map(({ index }) => index);
+	}
 	paint(context, { frameMs, isDirty, isRebuilt, look, size }) {
 		const held = this.#held();
 		const isPaged = look.isReducedMotion && this.reducedMotion === "page";
@@ -258,7 +279,8 @@ var SonicWaveform = class extends SonicWaveElement {
 		const { seconds, view } = timeline;
 		this.#drawn = {
 			seconds,
-			startSeconds: view.startSeconds
+			startSeconds: view.startSeconds,
+			zoom: this.zoom
 		};
 		placeLine(this.#playhead, timeline.playheadAt);
 		placeLine(this.#ghost, timeline.ghostAt);
@@ -281,7 +303,10 @@ var SonicWaveform = class extends SonicWaveElement {
 			}, {
 				bands: this.#tint(isRebuilt),
 				kindColours: this.#kindColours,
-				markers: this.markerList(),
+				markers: this.markerList().map((marker) => ({
+					...marker,
+					start: clamp(marker.start, ...range)
+				})),
 				peaks: this.#peaks,
 				range
 			});
@@ -311,6 +336,17 @@ var SonicWaveform = class extends SonicWaveElement {
 	scrubsKeyRepeat() {
 		return true;
 	}
+	#drawnWindow(widthPx) {
+		const zoom = this.#drawn?.zoom ?? this.zoom;
+		return {
+			startSeconds: this.#drawn?.startSeconds ?? this.value - widthPx / zoom / 2,
+			zoom
+		};
+	}
+	#drawnX(value, widthPx) {
+		const { startSeconds, zoom } = this.#drawnWindow(widthPx);
+		return (clamp(value, ...this.mapping().bounds) - startSeconds) * zoom;
+	}
 	#duePending() {
 		const due = dueRegions(this.#pending, this.#pendingListedMs, [performance.now(), this.pendingDelay]);
 		if (due.length < this.#pending.length) this.surface()?.requestFrame();