@xsynaptic/sonic-ui 0.8.0 → 0.10.0

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

@@ -0,0 +1,301 @@
+import { clamp } from "../lib/math.js";
+import { requireChild } from "../lib/render.js";
+import { bindDrag } from "../lib/pointer-drag.js";
+import { ReadoutClaim, revealDelay } from "./readout-claim.js";
+import { ValueEntry } from "./value-entry.js";
+import { dragThresholdPx, startDrag, stepDrag } from "../lib/drag-step.js";
+import { focusByPointer } from "../lib/focus-by-pointer.js";
+import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
+import { readPxProperty } from "../lib/read-px-property.js";
+import { resetKeys } from "../lib/value-mapping.js";
+
+//#region src/elements/value-gestures.ts
+const detentZonePx = 8;
+var ValueGestures = class {
+	#claim = new ReadoutClaim(() => {
+		this.#host.holdChanged();
+	});
+	#control;
+	#entry;
+	#host;
+	#isRevealed = false;
+	#keyScrub;
+	#pointerDrag;
+	constructor(host, control) {
+		this.#host = host;
+		this.#control = control;
+	}
+	bind(signal, grab) {
+		const control = this.#control;
+		const host = this.#host;
+		const entry = this.#bindEntry(signal);
+		this.#pointerDrag = bindDrag(control, {
+			cancel: (drag) => {
+				if (drag.isKeptOnCancel !== true) host.input(drag.fromValue);
+			},
+			grab: (event) => {
+				if (isMenuPress(event) || host.isDisabled() || entry.isOpen) return;
+				host.toggleState("springing", false);
+				if (event.pointerType === "touch") event.preventDefault();
+				focusByPointer(control);
+				if (isResetPress(event)) {
+					this.#reset();
+					return;
+				}
+				const fromValue = host.value();
+				const axis = grab(event);
+				if (!axis) return;
+				const drag = {
+					...axis,
+					fromValue,
+					isOutside: false,
+					isRevealed: false,
+					pointerType: event.pointerType,
+					revealTimer: void 0,
+					state: this.#startDrag(axis, event)
+				};
+				drag.revealTimer = setTimeout(() => {
+					this.#reveal(drag);
+				}, revealDelay(control));
+				return drag;
+			},
+			lift: (drag, event) => {
+				const tap = drag.state.isEngaged ? void 0 : host.tapTarget();
+				if (tap !== void 0) {
+					entry.forgetPress();
+					this.#commit(tap);
+					return;
+				}
+				if (!entry.press(event) || host.springTarget() !== void 0) return;
+				const gesture = host.doublePress();
+				if (gesture === "reset") this.#reset();
+				else if (gesture === "entry") entry.open();
+			},
+			move: (drag, event) => {
+				this.#dragTo(drag, event);
+			},
+			release: (drag) => {
+				this.#releaseDrag(drag);
+			},
+			toggle: (isDragging) => {
+				host.toggleState("dragging", isDragging);
+			}
+		}, signal);
+		control.addEventListener("pointercancel", () => {
+			entry.forgetPress();
+		}, { signal });
+		this.#bindKeys(entry, signal);
+		signal.addEventListener("abort", () => {
+			this.#endKeyScrub();
+			this.#concealKeyReveal();
+		}, { once: true });
+	}
+	end() {
+		this.#entry?.close(false);
+		this.#pointerDrag?.end();
+		this.#endKeyScrub();
+	}
+	heldFrom() {
+		return this.#dragging()?.fromValue ?? this.#keyScrub?.fromValue;
+	}
+	isEditing() {
+		return this.#entry?.isOpen === true;
+	}
+	isHeld() {
+		return this.#dragging() !== void 0 || this.#keyScrub !== void 0;
+	}
+	isRevealed() {
+		return this.#claim.isRevealed;
+	}
+	pointerType() {
+		return this.#dragging()?.pointerType;
+	}
+	#bindEntry(signal) {
+		const control = this.#control;
+		const host = this.#host;
+		const input = requireChild(control, "input", HTMLInputElement);
+		input.id = host.entryId;
+		const entry = new ValueEntry(input, {
+			commit: (text) => {
+				this.#commit(host.parse(text));
+			},
+			text: host.entryText,
+			toggle: (isOpen) => {
+				if (isOpen) host.forwardNaming(input, true);
+				host.toggleState("editing", isOpen);
+				host.render();
+			}
+		});
+		this.#entry = entry;
+		entry.bind(control, 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;
+			host.toggleState("springing", false);
+			if (event.key === "Enter") {
+				if (host.springTarget() !== void 0) return;
+				event.preventDefault();
+				entry.open();
+				return;
+			}
+			const next = this.#keyTarget(event.key);
+			if (next === void 0) return;
+			event.preventDefault();
+			this.#keyTo(event, next);
+			this.#claim.reveal("keys");
+			host.holdChanged();
+		}, { signal });
+		control.addEventListener("keyup", (event) => {
+			const isMeta = event.key === "Meta";
+			if (isMeta || event.key === this.#keyScrub?.key) this.#endKeyScrub();
+			if (isMeta && this.#dragging()) return;
+			if (isMeta || host.mapping().keyTarget(event.key, host.value()) !== void 0) this.#springBack();
+		}, { signal });
+		control.addEventListener("blur", () => {
+			this.#endKeyScrub();
+			this.#concealKeyReveal();
+			this.#springBack();
+		}, { signal });
+	}
+	#commit(next, direction = 0) {
+		const host = this.#host;
+		const landed = Number.isFinite(next) ? host.land(next, direction) : next;
+		if (host.input(landed)) host.dispatch("change");
+	}
+	#concealKeyReveal() {
+		if (this.#claim.conceal("keys")) this.#host.holdChanged();
+	}
+	#dragging() {
+		return this.#pointerDrag?.current();
+	}
+	#dragTo(drag, event) {
+		const host = this.#host;
+		const isOutside = drag.outside?.(event) === true;
+		const wasEngaged = drag.state.isEngaged;
+		const mapping = host.mapping();
+		const { state, value } = stepDrag(mapping, drag.state, {
+			isFine: event.shiftKey,
+			isOutside,
+			position: drag.position(event)
+		});
+		drag.state = this.#withinLimit(mapping, state);
+		if (value === void 0) return;
+		if (!wasEngaged) this.#reveal(drag);
+		const isCrossing = isOutside !== drag.isOutside;
+		if (isCrossing) {
+			drag.isOutside = isOutside;
+			host.toggleState("cancelling", isOutside);
+		}
+		host.input(isOutside ? drag.fromValue : value);
+		if (isCrossing) this.#renderDragReveal(drag);
+	}
+	#endKeyScrub() {
+		const host = this.#host;
+		const scrub = this.#keyScrub;
+		if (!scrub) return;
+		this.#keyScrub = void 0;
+		host.holdChanged();
+		if (host.value() !== scrub.fromValue) host.dispatch("change");
+	}
+	#keyTarget(key) {
+		const host = this.#host;
+		if (resetKeys.has(key)) return host.default();
+		return host.mapping().keyTarget(key, host.value(), host.keyStep());
+	}
+	#keyTo(event, next) {
+		const host = this.#host;
+		if (event.repeat && host.scrubsKeyRepeat()) {
+			this.#scrubKey(event.key, next);
+			return;
+		}
+		this.#endKeyScrub();
+		this.#commit(next, next > host.value() ? 1 : -1);
+	}
+	#releaseDrag(drag) {
+		const host = this.#host;
+		clearTimeout(drag.revealTimer);
+		this.#claim.conceal("drag");
+		host.toggleState("cancelling", false);
+		host.holdChanged();
+		this.#showRevealed(false);
+		if (host.value() !== drag.fromValue) host.dispatch("change");
+		this.#springBack();
+	}
+	#renderDragReveal(drag) {
+		const isRevealed = drag.isRevealed && !drag.isOutside;
+		if (isRevealed) this.#claim.reveal("drag");
+		else this.#claim.conceal("drag");
+		this.#host.holdChanged();
+		this.#showRevealed(isRevealed);
+	}
+	#reset() {
+		this.#commit(this.#host.default() ?? NaN);
+	}
+	#reveal(drag) {
+		if (drag.isRevealed || this.#dragging() !== drag) return;
+		drag.isRevealed = true;
+		this.#renderDragReveal(drag);
+	}
+	#scrubKey(key, next) {
+		const host = this.#host;
+		if (this.#keyScrub?.key !== key) {
+			this.#endKeyScrub();
+			this.#keyScrub = {
+				fromValue: host.value(),
+				key
+			};
+		}
+		host.input(next);
+	}
+	#showRevealed(isRevealed) {
+		if (isRevealed === this.#isRevealed) return;
+		this.#isRevealed = isRevealed;
+		this.#host.toggleState("revealed", isRevealed);
+		this.#host.dispatch("sonic-reveal");
+	}
+	#springBack() {
+		const host = this.#host;
+		const target = host.springTarget();
+		if (target === void 0) return;
+		if (host.mapping().snap(target) !== host.value()) host.toggleState("springing", true);
+		this.#commit(target);
+	}
+	#startDrag(axis, event) {
+		const host = this.#host;
+		const mapping = host.mapping();
+		const detent = host.detent();
+		const value = host.value();
+		const start = {
+			from: value,
+			position: axis.position(event),
+			proportion: axis.fromProportion ?? mapping.proportionOf(value),
+			thresholdPx: dragThresholdPx(event.pointerType),
+			travelPx: axis.travelPx
+		};
+		if (detent === void 0) return startDrag(mapping, start);
+		const zonePx = readPxProperty(getComputedStyle(this.#control), "--_sonic-detent-zone", detentZonePx);
+		return startDrag(mapping, {
+			...start,
+			detent: {
+				value: detent,
+				zone: zonePx / axis.travelPx
+			}
+		});
+	}
+	#withinLimit(mapping, state) {
+		const limit = this.#host.limit();
+		if (!limit || mapping.isWrapping) return state;
+		const [low, high] = limit;
+		return {
+			...state,
+			rawProportion: clamp(state.rawProportion, mapping.proportionOf(low), mapping.proportionOf(high))
+		};
+	}
+};
+
+//#endregion
+export { ValueGestures };

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

@@ -1,5 +1,6 @@
 import { SonicValueElement } from "./value-element.js";
 import { bindSurface } from "../lib/canvas-surface.js";
+import { bindFill } from "../lib/fill-watch.js";
 
 //#region src/elements/wave-element.ts
 function markerKey(marker) {
@@ -31,12 +32,12 @@ var SonicWaveElement = class extends SonicValueElement {
 		this.render();
 	}
 	#current;
-	#fillWatch;
 	#markers = [];
 	#surface;
+	#syncFill;
 	attributeChangedCallback(name) {
 		super.attributeChangedCallback(name);
-		if (name === "fill") this.#watchFill();
+		if (name === "fill") this.#syncFill?.(this.fill);
 	}
 	connectedCallback() {
 		this.upgradeProperties("fill", "markers");
@@ -63,11 +64,8 @@ var SonicWaveElement = class extends SonicValueElement {
 		});
 		this.render();
 		this.checkStyles(control, this.sheet);
-		this.#watchFill();
-		signal.addEventListener("abort", () => {
-			this.#fillWatch?.disconnect();
-			this.#fillWatch = void 0;
-		}, { once: true });
+		this.#syncFill = bindFill(control, this.sizeProperty, signal);
+		this.#syncFill(this.fill);
 	}
 	focusTarget() {
 		return this.control;
@@ -105,25 +103,6 @@ var SonicWaveElement = class extends SonicValueElement {
 	surface() {
 		return this.#surface;
 	}
-	#watchFill() {
-		const control = this.control;
-		const isFilling = this.fill && this.isBound();
-		if (isFilling === (this.#fillWatch !== void 0)) return;
-		this.#fillWatch?.disconnect();
-		this.#fillWatch = void 0;
-		if (!isFilling) {
-			control.style.removeProperty(this.sizeProperty);
-			return;
-		}
-		this.#fillWatch = new ResizeObserver((entries) => {
-			const box = entries.at(-1)?.borderBoxSize[0];
-			if (!box) return;
-			requestAnimationFrame(() => {
-				if (this.#fillWatch) control.style.setProperty(this.sizeProperty, `${String(box.blockSize)}px`);
-			});
-		});
-		this.#fillWatch.observe(control);
-	}
 };
 
 //#endregion

package/dist/default/elements/waveform.js

@@ -25,6 +25,7 @@ const placeholderAmplitude = .2;
 const renderWaveform = template(`
 		<div class="sonic-waveform" role="slider" tabindex="0">
 			<canvas class="sonic-waveform-canvas" aria-hidden="true"></canvas>
+			<div class="sonic-waveform-scrim" aria-hidden="true"></div>
 			<div class="sonic-waveform-ghost" aria-hidden="true" hidden></div>
 			<div class="sonic-waveform-playhead" aria-hidden="true"></div>
 			<div class="sonic-waveform-label" aria-hidden="true" hidden></div>
@@ -209,7 +210,8 @@ var SonicWaveform = class extends SonicWaveElement {
 		className: "sonic-waveform-label",
 		colourProperty: "--_sonic-waveform-marker",
 		fadeProperty: "--_sonic-waveform-label-fade",
-		insetProperty: "--_sonic-waveform-label-inset"
+		insetProperty: "--_sonic-waveform-label-inset",
+		parkProperty: "--_sonic-waveform-label-park"
 	});
 	connectedCallback() {
 		this.upgradeProperties("peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "requestPeaks", "zoom");
@@ -223,7 +225,9 @@ var SonicWaveform = class extends SonicWaveElement {
 		}, { signal });
 	}
 	draw() {
-		this.surface()?.requestFrame();
+		const surface = this.surface();
+		surface?.requestFrame();
+		if (surface?.isVisible === false || !this.#drawn) this.showCurrentMarker(this.#sourceSeconds());
 	}
 	isEmpty() {
 		return !this.#peaks || this.#peaks.samples.length === 0;

package/dist/default/elements/wavestrip.js

@@ -1,7 +1,6 @@
 import { clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { readPxProperty } from "../lib/read-px-property.js";
-import { bindHoverPreview } from "../lib/hover-preview.js";
 import { sortedRegions } from "../lib/time-regions.js";
 import { SonicWaveElement } from "./wave-element.js";
 import { createMarkerBand } from "../lib/marker-band.js";
@@ -77,7 +76,6 @@ var SonicWavestrip = class extends SonicWaveElement {
 	sizeProperty = "--_sonic-wavestrip-size";
 	#bars;
 	#buffered = [];
-	#hover;
 	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
 	#paintedKey = "";
 	#peaks;
@@ -86,15 +84,10 @@ var SonicWavestrip = class extends SonicWaveElement {
 		super.connectedCallback();
 	}
 	connect(signal) {
+		const { control } = this;
 		super.connect(signal);
-		this.#hover = bindHoverPreview(this.control, {
-			canShow: () => this.readout,
-			dismiss: () => {
-				this.render();
-			},
-			isTaken: () => this.isEditing() || this.isRevealed(),
-			show: () => {
-				this.renderReadout();
+		this.bindHover(control, signal, {
+			place: () => {
 				this.#placeReadout();
 			},
 			valueAt: (event) => {
@@ -103,12 +96,11 @@ var SonicWavestrip = class extends SonicWaveElement {
 				const mapping = this.mapping();
 				return this.#markerAt(event, axis) ?? mapping.snap(mapping.valueAt(at));
 			}
-		}, signal);
-		this.bindGestures(this.control, signal, (event) => this.#grab(event));
+		});
+		this.bindGestures(control, signal, (event) => this.#grab(event));
 	}
 	draw() {
 		const surface = this.surface();
-		if (this.isEditing() || this.isRevealed()) this.#hover?.clear();
 		this.#placeReadout();
 		this.showCurrentMarker(this.playback());
 		if (surface && this.#stripRegions(surface.size.width).key !== this.#paintedKey) surface.requestFrame();
@@ -131,9 +123,6 @@ var SonicWavestrip = class extends SonicWaveElement {
 			look.colours[kind]
 		]);
 	}
-	previewValue() {
-		return this.#hover?.value();
-	}
 	renderMarkers() {
 		this.#markerBand.render(this.markerList(), this.markerProportions());
 	}

package/dist/default/elements/xy.js

@@ -3,12 +3,13 @@ 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 { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
+import { ReadoutClaim, revealDelay } from "./readout-claim.js";
 import { dragThresholdPx } from "../lib/drag-step.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";
 
 //#region src/elements/xy.ts
@@ -337,7 +338,7 @@ var SonicXy = class extends SonicFormElement {
 			x: mappings.x.valueAt(pressed.x),
 			y: mappings.y.valueAt(pressed.y)
 		});
-		this.#claim.press(true);
+		this.#claim.press(true, revealDelay(this.#xy));
 		const start = (axis) => ({
 			from: this.#values[axis].value,
 			mapping: mappings[axis],
@@ -359,7 +360,7 @@ var SonicXy = class extends SonicFormElement {
 	}
 	#input(next) {
 		let hasMoved = false;
-		for (const axis of axes) if (this.#set(axis, next[axis] ?? NaN)) hasMoved = true;
+		for (const axis of axes) if (moveTo(this.#values[axis], this.#mappings()[axis], next[axis] ?? NaN)) hasMoved = true;
 		if (!hasMoved) return false;
 		this.render();
 		this.dispatchEvent(new Event("input", {
@@ -369,8 +370,9 @@ var SonicXy = class extends SonicFormElement {
 		return true;
 	}
 	#keyTo(axis, key) {
-		const next = this.#mappings()[axis].keyTarget(key, this.#values[axis].value);
-		const hasMoved = this.#set(axis, next ?? NaN);
+		const mapping = this.#mappings()[axis];
+		const next = mapping.keyTarget(key, this.#values[axis].value);
+		const hasMoved = moveTo(this.#values[axis], mapping, next ?? NaN);
 		this.#currentAxis = axis;
 		this.render();
 		this.#parts[axis].focus();
@@ -404,9 +406,8 @@ var SonicXy = class extends SonicFormElement {
 	#refresh() {
 		const mappings = this.#mappings();
 		for (const axis of axes) {
-			const axisValue = this.#values[axis];
 			const mapping = mappings[axis];
-			axisValue.value = mapping.snap(axisValue.asked ?? this.numberAttribute(axis, mapping.bounds[0]));
+			resnap(this.#values[axis], mapping, this.numberAttribute(axis, mapping.bounds[0]));
 		}
 		this.render();
 	}
@@ -454,15 +455,6 @@ var SonicXy = class extends SonicFormElement {
 			y: this.yDefault
 		});
 	}
-	#set(axis, next) {
-		if (!Number.isFinite(next)) return false;
-		const axisValue = this.#values[axis];
-		const snapped = this.#mappings()[axis].snap(next);
-		axisValue.asked = snapped;
-		if (snapped === axisValue.value) return false;
-		axisValue.value = snapped;
-		return true;
-	}
 	#taper(axis) {
 		return this.getAttribute(`${axis}-taper`) === "log" ? "log" : "linear";
 	}
@@ -477,10 +469,7 @@ var SonicXy = class extends SonicFormElement {
 			this.#refresh();
 			return;
 		}
-		const asked = toNumber(next);
-		const hasMoved = this.#set(axis, asked);
-		if (Number.isFinite(asked)) axisValue.asked = asked;
-		if (hasMoved) this.render();
+		if (setAsked(axisValue, this.#mappings()[axis], toNumber(next))) this.render();
 	}
 };
 

package/dist/default/lib/asked-value.js

@@ -0,0 +1,21 @@
+//#region src/lib/asked-value.ts
+function moveTo(cell, mapping, next) {
+	if (!Number.isFinite(next)) return false;
+	const snapped = mapping.snap(next);
+	cell.asked = snapped;
+	if (snapped === cell.value) return false;
+	cell.value = snapped;
+	return true;
+}
+function setAsked(cell, mapping, next) {
+	if (!Number.isFinite(next)) return false;
+	const hasMoved = moveTo(cell, mapping, next);
+	cell.asked = next;
+	return hasMoved;
+}
+function resnap(cell, mapping, fallback) {
+	cell.value = mapping.snap(cell.asked ?? fallback);
+}
+
+//#endregion
+export { moveTo, resnap, setAsked };

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

@@ -14,6 +14,9 @@ function readEach(properties, read) {
 	return Object.fromEntries(Object.entries(properties).flatMap(([name, property]) => property === void 0 ? [] : [[name, read(property)]]));
 }
 var CanvasSurface = class {
+	get isVisible() {
+		return this.#isVisible;
+	}
 	get size() {
 		return this.#size;
 	}

package/dist/default/lib/fill-watch.js

@@ -0,0 +1,29 @@
+//#region src/lib/fill-watch.ts
+function bindFill(control, sizeProperty, signal) {
+	let watch;
+	const stop = () => {
+		watch?.disconnect();
+		watch = void 0;
+	};
+	signal.addEventListener("abort", stop, { once: true });
+	return (isFilling) => {
+		if (signal.aborted || isFilling === (watch !== void 0)) return;
+		stop();
+		if (!isFilling) {
+			control.style.removeProperty(sizeProperty);
+			return;
+		}
+		const started = new ResizeObserver((entries) => {
+			const box = entries.at(-1)?.borderBoxSize[0];
+			if (!box) return;
+			requestAnimationFrame(() => {
+				if (watch === started) control.style.setProperty(sizeProperty, `${String(box.blockSize)}px`);
+			});
+		});
+		watch = started;
+		started.observe(control);
+	};
+}
+
+//#endregion
+export { bindFill };

package/dist/default/lib/hover-preview.js

@@ -3,6 +3,11 @@ function bindHoverPreview(target, options, signal) {
 	let hover;
 	let isDismissed = false;
 	let escapeWatch;
+	const hold = (value) => {
+		if (value === hover) return;
+		hover = value;
+		options.changed();
+	};
 	const watchEscape = (isHovered) => {
 		if (!isHovered) {
 			escapeWatch?.abort();
@@ -13,14 +18,14 @@ function bindHoverPreview(target, options, signal) {
 		escapeWatch = new AbortController();
 		target.ownerDocument.addEventListener("keydown", (event) => {
 			if (hover === void 0 || event.key !== "Escape") return;
-			hover = void 0;
 			isDismissed = true;
+			hold(void 0);
 			options.dismiss();
 		}, { signal: escapeWatch.signal });
 	};
 	const hoverAt = (value) => {
 		if (value === void 0) isDismissed = false;
-		if (!isDismissed && !options.isTaken()) hover = value;
+		if (!isDismissed && !options.isTaken()) hold(value);
 		options.show();
 		watchEscape(value !== void 0);
 	};
@@ -36,7 +41,7 @@ function bindHoverPreview(target, options, signal) {
 	}, { once: true });
 	return {
 		clear: () => {
-			hover = void 0;
+			hold(void 0);
 		},
 		value: () => hover
 	};

package/dist/default/lib/marker-rider.js

@@ -11,7 +11,7 @@ function parkedPlacement(labels, index, [view, arrivingX]) {
 	const parked = labels[index];
 	if (!parked) return void 0;
 	const next = labels[index + 1];
-	const x = Math.max(view.insetPx, lineX(parked.start, view) + view.insetPx);
+	const x = Math.max(view.parkPx, lineX(parked.start, view) + view.insetPx);
 	const approachPx = next ? lineX(next.start, view) - lineX(view.playheadSeconds, view) : Infinity;
 	return {
 		index,
@@ -90,11 +90,12 @@ function measureWidths(control, className, texts) {
 	return widths;
 }
 function createLabelRider(control, options) {
-	const { className, colourProperty, fadeProperty, insetProperty } = options;
+	const { className, colourProperty, fadeProperty, insetProperty, parkProperty } = options;
 	const parked = labelSlot(requireChild(control, `.${className}`, HTMLElement));
 	const arriving = labelSlot(requireChild(control, `.${className} + .${className}`, HTMLElement));
 	let fadeShare = .25;
 	let insetPx = 0;
+	let parkPx = 0;
 	let measured = [];
 	return {
 		measure: (labels) => {
@@ -102,6 +103,7 @@ function createLabelRider(control, options) {
 			const styles = getComputedStyle(control);
 			fadeShare = readPxProperty(styles, fadeProperty, .25);
 			insetPx = readPxProperty(styles, insetProperty, 0);
+			parkPx = readPxProperty(styles, parkProperty, 0);
 			measured = labels.map((label, index) => ({
 				...label,
 				widthPx: widths[index] ?? 0
@@ -111,7 +113,8 @@ function createLabelRider(control, options) {
 			const layout = layoutRider(measured, {
 				...window,
 				fadeShare,
-				insetPx
+				insetPx,
+				parkPx
 			});
 			writeLabel(parked, [measured, colourProperty], layout.parked);
 			writeLabel(arriving, [measured, colourProperty], layout.arriving);

package/dist/default/lib/read-ms-property.js

@@ -0,0 +1,10 @@
+//#region src/lib/read-ms-property.ts
+function readMsProperty(styles, property, fallback) {
+	const text = styles.getPropertyValue(property).trim();
+	const parsed = Number.parseFloat(text);
+	if (!Number.isFinite(parsed)) return fallback;
+	return text.endsWith("ms") ? parsed : parsed * 1e3;
+}
+
+//#endregion
+export { readMsProperty };