@xsynaptic/sonic-ui 0.24.0 → 0.25.1

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

@@ -8,13 +8,16 @@ 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;
 	if (current?.length === labels.length && labels.every((label, index) => label === current[index])) return;
 	target.ariaLabelledByElements = labels;
 }
-var SonicElement = class extends HTMLElement {
+var SonicElement = class SonicElement extends HTMLElement {
 	static observedAttributes = [...namingAttributes, "disabled"];
+	static #labelCount = 0;
 	get disabled() {
 		return this.hasAttribute("disabled");
 	}
@@ -23,7 +26,15 @@ var SonicElement = class 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 === "") {
+			SonicElement.#labelCount += 1;
+			label.id = `sonic-label-${String(SonicElement.#labelCount)}`;
+		}
+		return label.id;
+	}
 	blur() {
 		this.#focused()?.blur();
 	}
@@ -67,7 +78,7 @@ var SonicElement = class extends HTMLElement {
 			const value = this.getAttribute(name);
 			writeAttribute(target, name, isNamed && value !== null ? value : void 0);
 		}
-		if (labels.length > 0) writeLabelledBy(target, labels);
+		if (labels.length > 0) this.#writeLabels(target, labels);
 	}
 	hasState(state) {
 		return this.#states.has(state);
@@ -110,11 +121,11 @@ var SonicElement = class extends HTMLElement {
 	toggleState(state, isOn) {
 		if (isOn) {
 			this.#states.add(state);
-			this.internals?.states.add(state);
+			this.#customStates?.add(state);
 			return;
 		}
 		this.#states.delete(state);
-		this.internals?.states.delete(state);
+		this.#customStates?.delete(state);
 	}
 	upgradeProperties(...names) {
 		for (const name of names) {
@@ -124,6 +135,9 @@ var SonicElement = class extends HTMLElement {
 			this[name] = value;
 		}
 	}
+	usesChild(_child) {
+		return false;
+	}
 	#checkBox(control, checked, box) {}
 	#checkHost(checked) {}
 	#focused() {
@@ -131,6 +145,14 @@ var SonicElement = class extends HTMLElement {
 		const active = root instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;
 		return active instanceof HTMLElement && this.contains(active) ? active : void 0;
 	}
+	#writeLabels(target, labels) {
+		if (canReferElements) {
+			writeLabelledBy(target, labels);
+			return;
+		}
+		const ids = labels.map((label) => SonicElement.#labelId(label));
+		writeAttribute(target, "aria-labelledby", ids.join(" "));
+	}
 };
 
 //#endregion

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,7 +72,7 @@ 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) => {

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

@@ -1,7 +1,7 @@
 import { toNumber, trimFloat } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
-import { Readout } from "./readout.js";
+import { Readout, isUnanchored } from "./readout.js";
 import { readPxProperty } from "../lib/read-px-property.js";
 import { parseNumberList } from "../lib/number-list.js";
 import { ValueGestures } from "./value-gestures.js";
@@ -268,7 +268,7 @@ var SonicValueElement = class extends SonicFormElement {
 			forwardNaming: (target, isNamed) => {
 				this.forwardNaming(target, isNamed);
 			},
-			hasEntry: () => this.entry !== "none",
+			hasEntry: () => !isUnanchored && this.entry !== "none",
 			input: (next) => this.input(next),
 			isDisabled: () => this.isDisabled(),
 			keyStep: () => this.keyStep,
@@ -286,16 +286,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 +368,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 +405,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.spokenText(this.#spokenNow()));
 		this.forwardNaming(control, true);
 		this.#renderDisabled(control);
 		this.renderReadout();

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

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();

package/dist/default/elements/wavestrip.js

@@ -1,10 +1,11 @@
-import { clampProportion } from "../lib/math.js";
+import { clamp, clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { readPxProperty } from "../lib/read-px-property.js";
 import { scrubRegions } from "../lib/scrub.js";
 import { sortedRegions } from "../lib/time-regions.js";
 import { SonicWaveElement } from "./wave-element.js";
 import { createMarkerBand } from "../lib/marker-band.js";
+import { RegionLayer } from "./region-layer.js";
 import { stripBars, stripGroove, stripRegions } from "../lib/strip-scene.js";
 
 //#region src/elements/wavestrip.ts
@@ -23,9 +24,10 @@ const lengths = {
 };
 const cancelZonePx = 48;
 const renderWavestrip = template(`
-		<div class="sonic-wavestrip" role="slider" tabindex="0">
-			<canvas class="sonic-wavestrip-canvas" aria-hidden="true"></canvas>
+		<div class="sonic-wavestrip">
+			<canvas class="sonic-wavestrip-canvas" role="slider" tabindex="0"></canvas>
 			<div class="sonic-wavestrip-markers" aria-hidden="true"></div>
+			<div class="sonic-wavestrip-regions"></div>
 			<div class="sonic-wavestrip-readout" popover="manual">
 				<span></span>
 				<input
@@ -63,6 +65,14 @@ var SonicWavestrip = class extends SonicWaveElement {
 	set cancellable(isCancellable) {
 		this.reflect("cancellable", isCancellable);
 	}
+	/** Words a region's `aria-valuetext`; unset, a region speaks its start as the strip speaks a time */
+	get formatSpokenRegion() {
+		return this.#formatSpokenRegion;
+	}
+	set formatSpokenRegion(format) {
+		this.#formatSpokenRegion = format;
+		this.#regions?.render();
+	}
 	/** One amplitude from 0 to 1 per slice of the whole track, any length; resampled to the bars and never normalised */
 	get peaks() {
 		return this.#peaks;
@@ -72,6 +82,25 @@ var SonicWavestrip = class extends SonicWaveElement {
 		this.renderEmpty();
 		this.surface()?.invalidate();
 	}
+	/** A time a release will seek to, drawn as a scrub's edge; a hold or a hover of the strip's own is drawn instead */
+	get preview() {
+		return this.#preview;
+	}
+	set preview(seconds) {
+		this.#preview = Number.isFinite(seconds) ? seconds ?? void 0 : void 0;
+		this.render();
+	}
+	/** Runs once per point marker on each `markers` or `renderMarker` write; the element lasts until the next */
+	get renderMarker() {
+		return this.#renderMarker;
+	}
+	set renderMarker(render) {
+		this.#renderMarker = render;
+		this.#drawMarker = render && ((marker, element) => {
+			render({ ...marker }, element);
+		});
+		if (this.isBound()) this.renderMarkers();
+	}
 	control = renderWavestrip();
 	canvas = requireChild(this.control, ".sonic-wavestrip-canvas", HTMLCanvasElement);
 	colours = colours;
@@ -81,43 +110,75 @@ var SonicWavestrip = class extends SonicWaveElement {
 	sizeProperty = "--_sonic-wavestrip-size";
 	#bars;
 	#buffered = [];
+	#drawMarker;
+	#formatSpokenRegion;
 	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
 	#paintedKey = "";
 	#peaks;
+	#preview;
+	#regions;
+	#renderMarker;
 	/** Viewport x of a time, clamped to the strip */
 	clientXOf(value) {
 		const { startPx, travelPx } = this.#axis();
 		return startPx + this.mapping().proportionOf(value) * travelPx;
 	}
 	connectedCallback() {
-		this.upgradeProperties("buffered", "cancellable", "peaks");
+		this.upgradeProperties("buffered", "cancellable", "formatSpokenRegion", "peaks", "preview", "renderMarker");
 		super.connectedCallback();
 	}
+	valueFromPoint(clientX, _clientY) {
+		const { startPx, travelPx } = this.#axis();
+		const mapping = this.mapping();
+		return clamp(mapping.valueAt(clampProportion((clientX - startPx) / travelPx)), ...mapping.bounds);
+	}
 	connect(signal) {
 		const { control } = this;
+		this.#regions = new RegionLayer({
+			axis: () => this.#axis(),
+			control,
+			element: this,
+			isDisabled: () => this.isDisabled(),
+			layer: requireChild(control, ".sonic-wavestrip-regions", HTMLDivElement),
+			mapping: () => this.mapping(),
+			outside: () => this.#outside(),
+			seek: (event) => {
+				if (this.input(this.valueFromPoint(event.clientX, event.clientY))) this.dispatchEvent(new Event("change", { bubbles: true }));
+			},
+			speak: ({ end, start }) => this.#formatSpokenRegion?.(start, end) ?? this.spokenText(start) ?? this.notation.format(start)
+		}, signal);
 		super.connect(signal);
 		this.bindHover(control, signal, {
+			changed: () => {
+				if (this.#preview !== void 0) this.render();
+			},
 			place: () => {
 				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));
-			}
+			valueAt: (event) => this.#markerStartAt(event, this.#axis()) ?? this.mapping().snap(this.valueFromPoint(event.clientX, event.clientY))
 		});
 		this.bindGestures(control, signal, (event) => this.#grab(event));
 	}
 	draw() {
 		const surface = this.surface();
 		this.#placeReadout();
+		this.#regions?.follow();
 		this.showCurrentMarker(this.scrubState().played);
 		if (surface && this.#stripRegions(surface.size.width).key !== this.#paintedKey) surface.requestFrame();
 	}
+	focusTarget() {
+		return this.canvas;
+	}
 	isEmpty() {
 		return !this.#peaks || this.#peaks.length === 0;
 	}
+	/** The first point marker is the one a press there snaps to */
+	markersInReach(point, widthPx) {
+		const regions = this.markerProportions().flatMap(([from, to], index) => {
+			return this.markerList()[index]?.end !== void 0 && point.x >= from * widthPx && point.x <= to * widthPx ? [index] : [];
+		});
+		return [...this.#markerBand.inReach(point, widthPx), ...regions];
+	}
 	paint(context, frame) {
 		const { look, size } = frame;
 		const strip = this.#stripRegions(size.width);
@@ -134,11 +195,14 @@ var SonicWavestrip = class extends SonicWaveElement {
 		]);
 	}
 	renderMarkers() {
-		this.#markerBand.render(this.markerList(), this.markerProportions());
+		this.#markerBand.render(this.markerList(), this.markerProportions(), this.#drawMarker);
 	}
 	scrubsKeyRepeat() {
 		return true;
 	}
+	usesChild(child) {
+		return child instanceof Element && child.localName === "sonic-region";
+	}
 	#axis() {
 		const box = this.canvas.getBoundingClientRect();
 		return {
@@ -163,6 +227,13 @@ var SonicWavestrip = class extends SonicWaveElement {
 	}
 	#grab(event) {
 		const axis = this.#axis();
+		const marker = this.#markerStartAt(event, axis);
+		const regions = this.#regions;
+		if (regions?.isHeld() === true) {
+			regions.abandon();
+			return;
+		}
+		if (marker === void 0 && regions?.take(event) === true) return void 0;
 		const at = (event.clientX - axis.startPx) / axis.travelPx;
 		const outside = this.#outside();
 		const grabbed = {
@@ -170,16 +241,16 @@ var SonicWavestrip = class extends SonicWaveElement {
 			position: axis.position,
 			travelPx: axis.travelPx
 		};
-		this.input(this.#markerAt(event, axis) ?? this.mapping().valueAt(at));
+		this.input(marker ?? this.valueFromPoint(event.clientX, event.clientY));
 		return outside ? {
 			...grabbed,
 			outside
 		} : grabbed;
 	}
-	#markerAt(event, { startPx, topPx, travelPx }) {
-		const index = this.#markerBand.at({
-			x: event.clientX - startPx,
-			y: event.clientY - topPx
+	#markerStartAt({ clientX, clientY }, { startPx, topPx, travelPx }) {
+		const [index] = this.#markerBand.inReach({
+			x: clientX - startPx,
+			y: clientY - topPx
 		}, travelPx);
 		return index === void 0 ? void 0 : this.markerList()[index]?.start;
 	}
@@ -196,7 +267,9 @@ var SonicWavestrip = class extends SonicWaveElement {
 	#stripRegions(width) {
 		const mapping = this.mapping();
 		const { proportionOf } = mapping;
-		const { played, scrub } = scrubRegions(this.scrubState(), this.value, mapping);
+		const state = this.scrubState();
+		const preview = state.from !== void 0 || this.hoverValue !== void 0 || this.#preview === void 0 ? void 0 : proportionOf(this.#preview);
+		const { played, scrub = preview } = scrubRegions(state, this.value, mapping);
 		return stripRegions({
 			buffered: this.#buffered.map(([start, end]) => [proportionOf(start), proportionOf(end)]),
 			played,

package/dist/default/elements/xy.js

@@ -30,7 +30,7 @@ const orientations = {
 };
 const renderXy = template(`
 		<div class="sonic-xy">
-			<div class="sonic-xy-bracket" aria-hidden="true"></div>
+			<div class="sonic-xy-reticle" aria-hidden="true"></div>
 			<div class="sonic-xy-field" aria-hidden="true"></div>
 			<div class="sonic-xy-puck">
 				<div class="sonic-xy-axis" data-sonic-axis="x" role="slider" tabindex="0"></div>
@@ -404,16 +404,8 @@ var SonicXy = class extends SonicFormElement {
 		}
 	}
 	#renderForm() {
-		const { name, x, y } = this;
-		const state = `${String(x)},${String(y)}`;
-		if (name === "") {
-			this.writeFormValue(null, state);
-			return;
-		}
-		const fields = new FormData();
-		fields.set(`${name}.x`, String(x));
-		fields.set(`${name}.y`, String(y));
-		this.writeFormValue(fields, state);
+		const { x, y } = this;
+		this.writeFormFields([["x", x], ["y", y]], `${String(x)},${String(y)}`);
 	}
 	#renderReadout() {
 		const { isRevealed } = this.#claim;

package/dist/default/index.js

@@ -4,6 +4,7 @@ import { envelopeCurve } from "./lib/envelope-curve.js";
 import { SonicEnvelope } from "./elements/envelope.js";
 import { SonicMeter } from "./elements/meter.js";
 import { SonicNumber } from "./elements/number.js";
+import { SonicRegion } from "./elements/region.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
 import { SonicSpectrum } from "./elements/spectrum.js";
@@ -17,4 +18,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, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatClock, formatPercent, parseClock, parsePercent };
+export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicRegion, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatClock, formatPercent, parseClock, parsePercent };

package/dist/default/lib/clock.js

@@ -1,6 +1,7 @@
 //#region src/lib/clock.ts
 const sign = /^[-−]/;
 function formatClock(seconds) {
+	if (!Number.isFinite(seconds)) return "";
 	const total = Math.floor(Math.abs(seconds));
 	const hours = Math.floor(total / 3600);
 	const minutes = Math.floor(total / 60) % 60;

package/dist/default/lib/drag-step.js

@@ -96,4 +96,4 @@ function stepDrag(mapping, state, move) {
 }
 
 //#endregion
-export { dragThresholdPx, startDrag, stepDrag };
+export { dragThresholdPx, fineFactor, startDrag, stepDrag };