@xsynaptic/sonic-ui 0.17.0 → 0.19.0

package/dist/default/elements/wavestrip.js

@@ -1,6 +1,7 @@
 import { 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";
@@ -48,6 +49,7 @@ function fillRegion(context, path, [from, to, style]) {
 	context.restore();
 }
 var SonicWavestrip = class extends SonicWaveElement {
+	/** Loaded spans, in seconds */
 	get buffered() {
 		return this.#buffered.map(([start, end]) => [start, end]);
 	}
@@ -61,6 +63,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 	set cancellable(isCancellable) {
 		this.reflect("cancellable", isCancellable);
 	}
+	/** 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;
 	}
@@ -80,6 +83,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
 	#paintedKey = "";
 	#peaks;
+	/** Viewport x of a time, clamped to the strip */
 	clientXOf(value) {
 		const { startPx, travelPx } = this.#axis();
 		return startPx + this.mapping().proportionOf(value) * travelPx;
@@ -107,7 +111,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 	draw() {
 		const surface = this.surface();
 		this.#placeReadout();
-		this.showCurrentMarker(this.playback());
+		this.showCurrentMarker(this.scrubState().played);
 		if (surface && this.#stripRegions(surface.size.width).key !== this.#paintedKey) surface.requestFrame();
 	}
 	isEmpty() {
@@ -189,12 +193,13 @@ var SonicWavestrip = class extends SonicWaveElement {
 		this.control.style.setProperty("--_sonic-wavestrip-readout-at", String(at));
 	}
 	#stripRegions(width) {
-		const { proportionOf } = this.mapping();
-		const isScrubbing = this.heldFrom() !== void 0 && this.isRevealed();
+		const mapping = this.mapping();
+		const { proportionOf } = mapping;
+		const { played, scrub } = scrubRegions(this.scrubState(), this.value, mapping);
 		return stripRegions({
 			buffered: this.#buffered.map(([start, end]) => [proportionOf(start), proportionOf(end)]),
-			played: proportionOf(this.playback()),
-			...isScrubbing ? { scrub: proportionOf(this.value) } : {}
+			played,
+			...scrub === void 0 ? {} : { scrub }
 		}, width);
 	}
 };

package/dist/default/elements/xy.js

@@ -2,15 +2,14 @@ import { clampProportion, toNumber } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { requireChild, template } from "../lib/render.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 { ReadoutClaim } from "./readout-claim.js";
 import { focusByPointer } from "../lib/focus-by-pointer.js";
 import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
-import { resetKeys, valueMapping } from "../lib/value-mapping.js";
-import { moveTo, resnap, setAsked } from "../lib/asked-value.js";
-import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
+import { resetKeys } from "../lib/value-mapping.js";
+import { createValueModel } from "../lib/value-model.js";
+import { pointerPosition } from "../lib/field.js";
+import { bindFieldGesture } from "./field-gesture.js";
 
 //#region src/elements/xy.ts
 const axes = ["x", "y"];
@@ -75,7 +74,7 @@ var SonicXy = class extends SonicFormElement {
 		this.render();
 	}
 	get pointerType() {
-		return this.#pointerType;
+		return this.#gesture?.pointerType();
 	}
 	get readout() {
 		return this.hasAttribute("readout");
@@ -84,7 +83,7 @@ var SonicXy = class extends SonicFormElement {
 		this.reflect("readout", isEnabled);
 	}
 	get x() {
-		return this.#values.x.value;
+		return this.#models.x.value;
 	}
 	set x(next) {
 		this.#write("x", next);
@@ -138,7 +137,7 @@ var SonicXy = class extends SonicFormElement {
 		this.reflect("x-taper", curve);
 	}
 	get y() {
-		return this.#values.y.value;
+		return this.#models.y.value;
 	}
 	set y(next) {
 		this.#write("y", next);
@@ -198,53 +197,33 @@ var SonicXy = class extends SonicFormElement {
 	#xy = renderXy();
 	#field = requireChild(this.#xy, ".sonic-xy-field", HTMLDivElement);
 	#formatValue;
-	#mapped;
+	#gesture;
+	#models = {
+		x: createValueModel(() => this.#spec("x")),
+		y: createValueModel(() => this.#spec("y"))
+	};
 	#parts = {
 		x: requireChild(this.#xy, "[data-sonic-axis=\"x\"]", HTMLDivElement),
 		y: requireChild(this.#xy, "[data-sonic-axis=\"y\"]", HTMLDivElement)
 	};
-	#pointerDrag;
-	#pointerType;
 	#puck = requireChild(this.#xy, ".sonic-xy-puck", HTMLDivElement);
 	#readout = new Readout(requireChild(this.#xy, ".sonic-xy-readout", HTMLDivElement));
-	#values = {
-		x: {
-			asked: void 0,
-			value: 0
-		},
-		y: {
-			asked: void 0,
-			value: 0
-		}
-	};
 	attributeChangedCallback(name) {
-		this.#mapped = void 0;
-		if (name === "x" || name === "y") {
-			if (this.#pointerDrag?.current()) return;
-			this.#values[name].asked = void 0;
-		}
-		if (name === "disabled" && this.isDisabled()) this.#pointerDrag?.end();
-		this.#refresh();
+		if ((name === "x" || name === "y") && this.#gesture?.current()) return;
+		if (name === "disabled" && this.isDisabled()) this.#gesture?.end();
+		this.#respec(name);
 	}
 	connectedCallback() {
 		this.upgradeProperties("readout", "xDefault", "xLabel", "xMax", "xMidpoint", "xMin", "xOrigin", "xStep", "xTaper", "yDefault", "yLabel", "yMax", "yMidpoint", "yMin", "yOrigin", "yStep", "yTaper", "formatValue", "x", "y");
 		super.connectedCallback();
 	}
 	formResetCallback() {
-		for (const axis of axes) this.#values[axis].asked = void 0;
-		this.#refresh();
+		this.#respec(...axes);
 	}
 	connect(signal) {
 		const xy = this.#xy;
 		this.keepControl(xy, signal);
 		this.render();
-		this.checkStyles(xy, "xy.css", [
-			"cap",
-			"glass",
-			"pane",
-			"well",
-			"readout"
-		]);
 		this.#bindPointer(xy, signal);
 		this.#bindKeys(xy, signal);
 	}
@@ -254,11 +233,11 @@ var SonicXy = class extends SonicFormElement {
 	render() {
 		if (!this.isBound()) return;
 		const { style } = this.#xy;
-		const mappings = this.#mappings();
 		for (const axis of axes) {
-			const mapping = mappings[axis];
+			const model = this.#models[axis];
+			const mapping = model.mapping();
 			const origin = this.optionalNumberAttribute(`${axis}-origin`) ?? mapping.bounds[0];
-			style.setProperty(`--_sonic-xy-${axis}`, String(mapping.proportionOf(this.#values[axis].value)));
+			style.setProperty(`--_sonic-xy-${axis}`, String(mapping.proportionOf(model.value)));
 			style.setProperty(`--_sonic-xy-${axis}-origin`, String(mapping.proportionOf(origin)));
 		}
 		this.#renderAria();
@@ -271,7 +250,7 @@ var SonicXy = class extends SonicFormElement {
 		this.y = y;
 	}
 	#axisText(axis) {
-		const { value } = this.#values[axis];
+		const { value } = this.#models[axis];
 		return `${this.getAttribute(`${axis}-label`) ?? axis.toUpperCase()} ${this.#formatValue?.(value, axis) ?? String(value)}`;
 	}
 	#bindKeys(xy, signal) {
@@ -297,32 +276,22 @@ var SonicXy = class extends SonicFormElement {
 		xy.addEventListener("mousedown", (event) => {
 			event.preventDefault();
 		}, { signal });
-		this.#pointerDrag = bindDrag(xy, {
-			cancel: (drag) => {
-				this.#input(drag.from);
-			},
+		this.#gesture = bindFieldGesture(xy, {
+			claim: this.#claim,
 			grab: (event) => {
 				if (this.isDisabled() || isMenuPress(event)) return;
 				focusByPointer(this.focusTarget());
-				this.#pointerType = event.pointerType;
 				if (!isResetPress(event)) {
 					this.toggleState("dragging", true);
 					return this.#grab(event);
 				}
 				this.#reset();
-				this.#pointerType = void 0;
 			},
-			move: (drag, event) => {
-				const step = stepFieldDrag(this.#mappings(), drag.state, pointerMove(event));
-				drag.state = step.state;
-				if (step.state.isEngaged) this.#claim.reveal("drag");
-				if (!this.#input(step)) this.#renderReadout();
+			input: (_hold, next) => {
+				if (!this.#input(next)) this.#renderReadout();
 			},
-			release: (drag) => {
-				const hasMoved = this.x !== drag.from.x || this.y !== drag.from.y;
-				this.#claim.press(false);
-				if (hasMoved) this.dispatchEvent(new Event("change", { bubbles: true }));
-				this.#pointerType = void 0;
+			release: (_hold, moved) => {
+				if (moved.length > 0) this.dispatchEvent(new Event("change", { bubbles: true }));
 			},
 			toggle: (isDragging) => {
 				this.toggleState("dragging", isDragging);
@@ -333,13 +302,13 @@ var SonicXy = class extends SonicFormElement {
 		if (this.#input(next)) this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
 	#grab(event) {
-		const from = {
-			x: this.x,
-			y: this.y
-		};
 		const field = this.#field.getBoundingClientRect();
 		const puck = this.#puck.getBoundingClientRect();
-		const mappings = this.#mappings();
+		const { x, y } = this.#models;
+		const from = {
+			x: x.value,
+			y: y.value
+		};
 		const travel = {
 			x: Math.max(1, field.width - puck.width),
 			y: Math.max(1, field.height - puck.height)
@@ -351,32 +320,26 @@ var SonicXy = class extends SonicFormElement {
 		};
 		const isOnPuck = event.target instanceof Node && this.#puck.contains(event.target);
 		if (!isOnPuck) this.#input({
-			x: mappings.x.valueAt(pressed.x),
-			y: mappings.y.valueAt(pressed.y)
+			x: x.mapping().valueAt(pressed.x),
+			y: y.mapping().valueAt(pressed.y)
 		});
-		this.#claim.press(true, revealDelay(this.#xy));
-		const start = (axis) => ({
-			from: this.#values[axis].value,
-			mapping: mappings[axis],
-			proportion: isOnPuck ? mappings[axis].proportionOf(this.#values[axis].value) : clampProportion(pressed[axis]),
+		const hold = (axis) => ({
+			from: from[axis],
+			model: this.#models[axis],
+			...isOnPuck ? {} : { proportion: clampProportion(pressed[axis]) },
 			travelPx: travel[axis]
 		});
-		return {
-			from,
-			state: startFieldDrag({
-				position,
-				thresholdPx: dragThresholdPx(event.pointerType),
-				x: start("x"),
-				y: start("y")
-			})
-		};
+		return { axes: {
+			x: hold("x"),
+			y: hold("y")
+		} };
 	}
 	#hasDefault() {
 		return this.xDefault !== void 0 || this.yDefault !== void 0;
 	}
 	#input(next) {
 		let hasMoved = false;
-		for (const axis of axes) if (moveTo(this.#values[axis], this.#mappings()[axis], next[axis] ?? NaN)) hasMoved = true;
+		for (const axis of axes) if (this.#models[axis].input(next[axis] ?? NaN)) hasMoved = true;
 		if (!hasMoved) return false;
 		this.render();
 		this.dispatchEvent(new Event("input", {
@@ -386,9 +349,8 @@ var SonicXy = class extends SonicFormElement {
 		return true;
 	}
 	#keyTo(axis, key) {
-		const mapping = this.#mappings()[axis];
-		const next = mapping.keyTarget(key, this.#values[axis].value);
-		const hasMoved = moveTo(this.#values[axis], mapping, next ?? NaN);
+		const model = this.#models[axis];
+		const hasMoved = model.input(model.mapping().keyTarget(key, model.value) ?? NaN);
 		this.#currentAxis = axis;
 		this.render();
 		this.#parts[axis].focus();
@@ -399,46 +361,18 @@ var SonicXy = class extends SonicFormElement {
 		}));
 		this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
-	#mapping(axis) {
-		const midpoint = this.optionalNumberAttribute(`${axis}-midpoint`);
-		return valueMapping({
-			max: this.numberAttribute(`${axis}-max`, 100),
-			...midpoint === void 0 ? {} : { midpoint },
-			isNotched: false,
-			isWrapping: false,
-			min: this.numberAttribute(`${axis}-min`, 0),
-			step: this.numberAttribute(`${axis}-step`, 1),
-			taper: this.#taper(axis)
-		});
-	}
-	#mappings() {
-		if (this.#mapped) return this.#mapped;
-		this.#mapped = {
-			x: this.#mapping("x"),
-			y: this.#mapping("y")
-		};
-		return this.#mapped;
-	}
-	#refresh() {
-		const mappings = this.#mappings();
-		for (const axis of axes) {
-			const mapping = mappings[axis];
-			resnap(this.#values[axis], mapping, this.numberAttribute(axis, mapping.bounds[0]));
-		}
-		this.render();
-	}
 	#renderAria() {
-		const mappings = this.#mappings();
 		const isDisabled = this.isDisabled();
 		for (const axis of axes) {
 			const part = this.#parts[axis];
-			const [low, high] = mappings[axis].bounds;
+			const model = this.#models[axis];
+			const [low, high] = model.mapping().bounds;
 			const isCurrent = axis === this.#currentAxis;
 			const stop = isCurrent ? "0" : "-1";
 			writeAttribute(part, "aria-orientation", orientations[axis]);
 			writeAttribute(part, "aria-valuemin", String(low));
 			writeAttribute(part, "aria-valuemax", String(high));
-			writeAttribute(part, "aria-valuenow", String(this.#values[axis].value));
+			writeAttribute(part, "aria-valuenow", String(model.value));
 			writeAttribute(part, "aria-valuetext", this.#valueText(axis));
 			this.forwardNaming(part, true);
 			writeAttribute(part, "aria-hidden", isCurrent ? void 0 : "true");
@@ -471,6 +405,22 @@ var SonicXy = class extends SonicFormElement {
 			y: this.yDefault
 		});
 	}
+	#respec(...forgotten) {
+		for (const axis of axes) this.#models[axis].respec(this.numberAttribute(axis, this.numberAttribute(`${axis}-min`, 0)), { forgetAsk: forgotten.includes(axis) });
+		this.render();
+	}
+	#spec(axis) {
+		const midpoint = this.optionalNumberAttribute(`${axis}-midpoint`);
+		return {
+			max: this.numberAttribute(`${axis}-max`, 100),
+			...midpoint === void 0 ? {} : { midpoint },
+			isNotched: false,
+			isWrapping: false,
+			min: this.numberAttribute(`${axis}-min`, 0),
+			step: this.numberAttribute(`${axis}-step`, 1),
+			taper: this.#taper(axis)
+		};
+	}
 	#taper(axis) {
 		return this.getAttribute(`${axis}-taper`) === "log" ? "log" : "linear";
 	}
@@ -478,14 +428,12 @@ var SonicXy = class extends SonicFormElement {
 		return `${this.#axisText(axis)}, ${this.#axisText(axis === "x" ? "y" : "x")}`;
 	}
 	#write(axis, next) {
-		if (this.#pointerDrag?.current()) return;
-		const axisValue = this.#values[axis];
+		if (this.#gesture?.current()) return;
 		if (next === void 0 || next === null) {
-			axisValue.asked = void 0;
-			this.#refresh();
+			this.#respec(axis);
 			return;
 		}
-		if (setAsked(axisValue, this.#mappings()[axis], toNumber(next))) this.render();
+		if (this.#models[axis].write(toNumber(next))) this.render();
 	}
 };
 

package/dist/default/index.js

@@ -10,10 +10,11 @@ import { SonicSpectrum } from "./elements/spectrum.js";
 import { SonicSplit } from "./elements/split.js";
 import { SonicSwitch } from "./elements/switch.js";
 import { SonicToggle } from "./elements/toggle.js";
+import { formatClock, parseClock } from "./lib/clock.js";
 import { SonicWaveform } from "./elements/waveform.js";
 import { SonicWavestrip } from "./elements/wavestrip.js";
 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, formatPercent, parsePercent };
+export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicToggle, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatClock, formatPercent, parseClock, parsePercent };

package/dist/default/lib/canvas-surface.js

@@ -22,6 +22,7 @@ var CanvasSurface = class {
 	}
 	#context;
 	#cssBox;
+	#fillWatch;
 	#frame;
 	#isDirty = true;
 	#isRebuildWanted = true;
@@ -51,6 +52,7 @@ var CanvasSurface = class {
 		signal.addEventListener("abort", () => {
 			if (this.#frame !== void 0) cancelAnimationFrame(this.#frame);
 			this.#frame = void 0;
+			this.#stopFill();
 		}, { once: true });
 		this.#schedule();
 	}
@@ -65,6 +67,25 @@ var CanvasSurface = class {
 	requestFrame() {
 		this.#schedule();
 	}
+	setFill(isFilling) {
+		const { fill, signal } = this.#options;
+		if (!fill || signal.aborted || isFilling === (this.#fillWatch !== void 0)) return;
+		const { style } = fill.control;
+		this.#stopFill();
+		if (!isFilling) {
+			style.removeProperty(fill.sizeProperty);
+			return;
+		}
+		const started = new ResizeObserver((entries) => {
+			const box = entries.at(-1)?.borderBoxSize[0];
+			if (!box) return;
+			requestAnimationFrame(() => {
+				if (this.#fillWatch === started) style.setProperty(fill.sizeProperty, `${String(box.blockSize)}px`);
+			});
+		});
+		this.#fillWatch = started;
+		started.observe(fill.control);
+	}
 	#armTransitions() {
 		const { canvas, colours, numbers = {} } = this.#options;
 		const { style } = canvas;
@@ -190,6 +211,10 @@ var CanvasSurface = class {
 			this.#draw(frameMs);
 		});
 	}
+	#stopFill() {
+		this.#fillWatch?.disconnect();
+		this.#fillWatch = void 0;
+	}
 	#watchResolution() {
 		const { signal } = this.#options;
 		matchMedia(`(resolution: ${String(deviceRatio())}dppx)`).addEventListener("change", () => {

package/dist/default/lib/clock.js

@@ -0,0 +1,23 @@
+//#region src/lib/clock.ts
+const sign = /^[-−]/;
+function formatClock(seconds) {
+	const total = Math.floor(Math.abs(seconds));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total / 60) % 60;
+	const rest = String(total % 60).padStart(2, "0");
+	const prefix = seconds < 0 ? "−" : "";
+	if (hours === 0) return `${prefix}${String(minutes)}:${rest}`;
+	return `${prefix}${String(hours)}:${String(minutes).padStart(2, "0")}:${rest}`;
+}
+function parseClock(text) {
+	const clock = text.trim();
+	let seconds = 0;
+	for (const part of clock.replace(sign, "").split(":")) {
+		if (part.trim() === "") return NaN;
+		seconds = seconds * 60 + Number(part);
+	}
+	return sign.test(clock) ? -seconds : seconds;
+}
+
+//#endregion
+export { formatClock, parseClock };

package/dist/default/lib/crossfade.js

@@ -5,6 +5,7 @@ function progress(side, span) {
 	if (span === 0) return side > 0 ? 1 : 0;
 	return Math.min(1, side / span);
 }
+/** `position` runs from 0, all a, to 1, all b; `sharpness` from 0 to 1 shortens the overlap */
 function crossfadeGains(position, options = {}) {
 	const at = clampProportion(position);
 	const span = 1 - clampProportion(options.sharpness ?? 0);

package/dist/default/lib/envelope-curve.js

@@ -1,5 +1,6 @@
 //#region src/lib/envelope-curve.ts
 const flatCurve = .001;
+/** `position` is 0 to 1 along a stage; a `curve` of 0 is a straight line */
 function envelopeCurve(position, curve) {
 	if (Math.abs(curve) < flatCurve) return position;
 	return Math.expm1(curve * position) / Math.expm1(curve);

package/dist/default/lib/peaks-request.js

@@ -0,0 +1,44 @@
+//#region src/lib/peaks-request.ts
+function createPeaksRequest(repaint) {
+	const awaited = /* @__PURE__ */ new WeakSet();
+	let askedKey;
+	let isAsking = false;
+	const changed = () => {
+		if (!isAsking) askedKey = void 0;
+		repaint();
+	};
+	const changedAfter = async (asked) => {
+		await Promise.allSettled([asked]);
+		changed();
+	};
+	const call = (request, wanted) => {
+		isAsking = true;
+		try {
+			return request?.(...wanted);
+		} finally {
+			isAsking = false;
+		}
+	};
+	return {
+		ask: (request, wanted) => {
+			const key = wanted?.join(":");
+			if (!wanted || key === askedKey) return;
+			askedKey = key;
+			const asked = call(request, wanted);
+			const promises = asked instanceof Promise ? [asked] : asked ?? [];
+			for (const promise of promises) {
+				if (awaited.has(promise)) continue;
+				awaited.add(promise);
+				changedAfter(promise);
+			}
+		},
+		changed,
+		reset: () => {
+			askedKey = void 0;
+			repaint();
+		}
+	};
+}
+
+//#endregion
+export { createPeaksRequest };

package/dist/default/lib/positions.js

@@ -0,0 +1,58 @@
+import { clamp } from "./math.js";
+
+//#region src/lib/positions.ts
+const keySteps = /* @__PURE__ */ new Map([
+	["ArrowDown", 1],
+	["ArrowLeft", -1],
+	["ArrowRight", 1],
+	["ArrowUp", -1]
+]);
+function indexOrUndefined(index) {
+	return index < 0 ? void 0 : index;
+}
+function isEnabled(position) {
+	return !position.isDisabled;
+}
+function enabledEnds(positions) {
+	return [positions.findIndex(isEnabled), positions.findLastIndex(isEnabled)];
+}
+function stepFrom(positions, from, { isWrapping, step }) {
+	const count = positions.length;
+	let index = from;
+	for (const _ of positions) {
+		const next = index + step;
+		index = isWrapping ? (next + count) % count : clamp(next, 0, count - 1);
+		if (positions[index]?.isDisabled === false) return index;
+	}
+}
+function keyTarget(positions, from, { isWrapping, key }) {
+	const [first, last] = enabledEnds(positions);
+	if (key === "Home") return indexOrUndefined(first);
+	if (key === "End") return indexOrUndefined(last);
+	const step = keySteps.get(key);
+	if (step === void 0) return void 0;
+	return stepFrom(positions, from, {
+		isWrapping,
+		step
+	}) ?? from;
+}
+function isMomentaryAt(positions, index) {
+	return (index === 0 || index === positions.length - 1) && positions.length > 1 && positions[index]?.isMomentary === true;
+}
+function pressTarget(positions, checked, pressed) {
+	return positions.length === 2 && checked >= 0 ? 1 - checked : pressed;
+}
+function soleStep(positions, from) {
+	const ways = [-1, 1].map((step) => stepFrom(positions, from, {
+		isWrapping: false,
+		step
+	})).filter((to) => to !== void 0 && to !== from);
+	return ways.length === 1 ? ways[0] : void 0;
+}
+function restOf(positions, held) {
+	if (!isMomentaryAt(positions, held)) return void 0;
+	return held === 0 ? 1 : held - 1;
+}
+
+//#endregion
+export { enabledEnds, isMomentaryAt, keyTarget, pressTarget, restOf, soleStep, stepFrom };

package/dist/default/lib/scrub.js

@@ -0,0 +1,12 @@
+//#region src/lib/scrub.ts
+function scrubRegions(state, value, mapping) {
+	const played = mapping.proportionOf(state.played);
+	const reached = mapping.proportionOf(value);
+	return {
+		played,
+		scrub: state.from !== void 0 && state.isRevealed && reached !== played ? reached : void 0
+	};
+}
+
+//#endregion
+export { scrubRegions };

package/dist/default/lib/spoken-duration.js

@@ -0,0 +1,30 @@
+//#region src/lib/spoken-duration.ts
+const formatters = /* @__PURE__ */ new Map();
+function formatterFor(language, isZero) {
+	const key = `${language}|${String(isZero)}`;
+	const cached = formatters.get(key);
+	if (cached) return cached;
+	const options = {
+		secondsDisplay: isZero ? "always" : "auto",
+		style: "long"
+	};
+	let formatter;
+	try {
+		formatter = new Intl.DurationFormat(language || void 0, options);
+	} catch {
+		formatter = new Intl.DurationFormat(void 0, options);
+	}
+	formatters.set(key, formatter);
+	return formatter;
+}
+function spokenDuration(seconds, language = "") {
+	const total = Math.trunc(seconds);
+	return formatterFor(language, total === 0).format({
+		hours: Math.trunc(total / 3600),
+		minutes: Math.trunc(total / 60) % 60,
+		seconds: total % 60
+	});
+}
+
+//#endregion
+export { spokenDuration };