@xsynaptic/sonic-ui 0.6.0 → 0.8.0

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

@@ -2,19 +2,44 @@ import { SonicValueElement } from "./value-element.js";
 import { bindSurface } from "../lib/canvas-surface.js";
 
 //#region src/elements/wave-element.ts
+function markerKey(marker) {
+	return marker ? [
+		marker.start,
+		marker.end,
+		marker.kind,
+		marker.label
+	].join("|") : "";
+}
 var SonicWaveElement = class extends SonicValueElement {
+	static observedAttributes = [...SonicValueElement.observedAttributes, "fill"];
+	get currentMarker() {
+		return this.#current ? { ...this.#current } : void 0;
+	}
+	get fill() {
+		return this.hasAttribute("fill");
+	}
+	set fill(isFilling) {
+		this.reflect("fill", isFilling);
+	}
 	get markers() {
 		return this.#markers.map((marker) => ({ ...marker }));
 	}
 	set markers(list) {
 		this.#markers = [...list ?? []].filter((marker) => Number.isFinite(marker.start)).map((marker) => ({ ...marker })).toSorted((first, second) => first.start - second.start);
-		if (this.isBound()) this.renderMarkers();
+		if (!this.isBound()) return;
+		this.renderMarkers();
+		this.render();
 	}
-	#heldAt;
+	#current;
+	#fillWatch;
 	#markers = [];
 	#surface;
+	attributeChangedCallback(name) {
+		super.attributeChangedCallback(name);
+		if (name === "fill") this.#watchFill();
+	}
 	connectedCallback() {
-		this.upgradeProperties("markers");
+		this.upgradeProperties("fill", "markers");
 		super.connectedCallback();
 	}
 	repaint() {
@@ -38,16 +63,20 @@ 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 });
 	}
 	focusTarget() {
 		return this.control;
 	}
 	heldWrite(next) {
-		this.#heldAt = next;
+		super.heldWrite(next);
 		this.render();
 	}
 	holdChanged() {
-		if (this.heldFrom() === void 0) this.#heldAt = void 0;
 		this.render();
 	}
 	markerList() {
@@ -61,19 +90,40 @@ var SonicWaveElement = class extends SonicValueElement {
 			return [Math.min(at, to), Math.max(at, to)];
 		});
 	}
-	playback() {
-		const from = this.heldFrom();
-		return from === void 0 ? this.value : this.#heldAt ?? from;
-	}
 	proportionsChanged() {
 		this.renderMarkers();
 	}
 	renderEmpty() {
 		this.toggleState("empty", this.isEmpty());
 	}
+	showCurrentMarker(seconds) {
+		const current = this.#markers.findLast((marker) => marker.start <= seconds);
+		if (markerKey(current) === markerKey(this.#current)) return;
+		this.#current = current;
+		this.dispatchEvent(new Event("sonic-marker", { bubbles: true }));
+	}
 	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

@@ -1,6 +1,6 @@
 import { clamp } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
-import { readRegions } from "../lib/time-regions.js";
+import { dueRegions, readRegions } from "../lib/time-regions.js";
 import { SonicWaveElement } from "./wave-element.js";
 import { frameTimeline } from "../lib/frame-timeline.js";
 import { isKind, writeKind } from "../lib/marker-band.js";
@@ -10,9 +10,10 @@ import { waveformBuckets } from "../lib/waveform-buckets.js";
 
 //#region src/elements/waveform.ts
 const colours = {
+	ends: "--_sonic-waveform-ends",
 	grid: "--_sonic-waveform-grid",
-	hatch: "--_sonic-waveform-hatch",
 	marker: "--_sonic-waveform-marker",
+	placeholder: "--_sonic-waveform-placeholder",
 	wave: "--_sonic-waveform-wave",
 	waveEdge: "--_sonic-waveform-wave-edge"
 };
@@ -63,7 +64,7 @@ function paintHatch(context, scene, [from, to]) {
 		context.lineTo(x + height, 0);
 	}
 	context.lineWidth = Math.max(1, Math.round(dpr));
-	context.strokeStyle = scene.colours.hatch;
+	context.strokeStyle = scene.colours.ends;
 	context.stroke();
 	context.restore();
 }
@@ -83,7 +84,7 @@ function paintPlaceholders(context, scene) {
 		context.lineTo(closing, waveY(closing));
 	}
 	context.lineWidth = Math.max(1, Math.round(dpr));
-	context.strokeStyle = scene.colours.hatch;
+	context.strokeStyle = scene.colours.placeholder;
 	context.stroke();
 }
 function waveFill(context, scene) {
@@ -111,8 +112,10 @@ function paintWave(context, scene, peaks) {
 var SonicWaveform = class extends SonicWaveElement {
 	static observedAttributes = [
 		...SonicWaveElement.observedAttributes,
+		"pending-delay",
 		"playing",
 		"playback-rate",
+		"reduced-motion",
 		"zoom"
 	];
 	get peaks() {
@@ -127,9 +130,21 @@ var SonicWaveform = class extends SonicWaveElement {
 		return this.#pending.map(([start, end]) => [start, end]);
 	}
 	set pending(regions) {
+		const listedMs = this.#pendingListedMs;
+		const nowMs = performance.now();
 		this.#pending = regions ? readRegions(regions) : [];
+		this.#pendingListedMs = new Map(this.#pending.map((region) => {
+			const key = region.join(":");
+			return [key, listedMs.get(key) ?? nowMs];
+		}));
 		this.surface()?.invalidate();
 	}
+	get pendingDelay() {
+		return Math.max(0, this.numberAttribute("pending-delay", 0));
+	}
+	set pendingDelay(value) {
+		this.reflect("pending-delay", value);
+	}
 	get playbackRate() {
 		const playbackRate = this.numberAttribute("playback-rate", 1);
 		return playbackRate > 0 ? playbackRate : 1;
@@ -150,11 +165,18 @@ var SonicWaveform = class extends SonicWaveElement {
 		this.#readTime = read;
 		this.render();
 	}
+	get reducedMotion() {
+		return this.getAttribute("reduced-motion") === "scroll" ? "scroll" : "page";
+	}
+	set reducedMotion(motion) {
+		this.reflect("reduced-motion", motion);
+	}
 	get requestPeaks() {
 		return this.#requestPeaks;
 	}
 	set requestPeaks(request) {
 		this.#requestPeaks = request;
+		this.#asked = void 0;
 		this.surface()?.invalidate();
 	}
 	get zoom() {
@@ -169,6 +191,8 @@ var SonicWaveform = class extends SonicWaveElement {
 	colours = colours;
 	lengths = {};
 	sheet = "waveform.css";
+	sizeProperty = "--_sonic-waveform-size";
+	#asked;
 	#clock = createTrackingClock();
 	#drawn;
 	#ghost = requireChild(this.control, ".sonic-waveform-ghost", HTMLDivElement);
@@ -177,16 +201,18 @@ var SonicWaveform = class extends SonicWaveElement {
 	#paintedKey = "";
 	#peaks;
 	#pending = [];
+	#pendingListedMs = /* @__PURE__ */ new Map();
 	#playhead = requireChild(this.control, ".sonic-waveform-playhead", HTMLDivElement);
 	#readTime;
 	#requestPeaks;
 	#rider = createLabelRider(this.control, {
 		className: "sonic-waveform-label",
 		colourProperty: "--_sonic-waveform-marker",
+		fadeProperty: "--_sonic-waveform-label-fade",
 		insetProperty: "--_sonic-waveform-label-inset"
 	});
 	connectedCallback() {
-		this.upgradeProperties("peaks", "pending", "playing", "playbackRate", "readTime", "requestPeaks", "zoom");
+		this.upgradeProperties("peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "requestPeaks", "zoom");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -204,6 +230,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	paint(context, { frameMs, isDirty, isRebuilt, look, size }) {
 		const held = this.#held();
+		const pending = this.#duePending();
 		const timeline = frameTimeline({
 			clockSeconds: this.#clock.read(frameMs, {
 				isPlaying: this.playing,
@@ -212,9 +239,10 @@ var SonicWaveform = class extends SonicWaveElement {
 			}),
 			frameMs,
 			...held ? { held } : {},
-			isPaged: look.isReducedMotion,
+			isPaged: look.isReducedMotion && this.reducedMotion === "page",
 			isPlaying: this.playing,
-			pending: this.#pending,
+			isStill: look.isReducedMotion,
+			pending,
 			range: [this.min, Math.max(this.min, this.max)],
 			size,
 			zoom: this.zoom
@@ -226,6 +254,7 @@ var SonicWaveform = class extends SonicWaveElement {
 		};
 		placeLine(this.#playhead, timeline.playheadAt);
 		placeLine(this.#ghost, timeline.ghostAt);
+		this.showCurrentMarker(seconds);
 		this.toggleState("pending", view.pending.length > 0);
 		this.#rider.place({
 			playheadSeconds: seconds,
@@ -239,7 +268,7 @@ var SonicWaveform = class extends SonicWaveElement {
 				...view,
 				colours: look.colours
 			}, isRebuilt);
-			if (timeline.wanted) this.#requestPeaks?.(...timeline.wanted);
+			if (timeline.wanted) this.#ask(timeline.wanted);
 		}
 		if (timeline.isMoving) this.surface()?.requestFrame();
 	}
@@ -253,6 +282,17 @@ var SonicWaveform = class extends SonicWaveElement {
 		}]));
 		this.surface()?.rebuild();
 	}
+	#ask(wanted) {
+		const asked = this.#requestPeaks?.(...wanted);
+		if (!(asked instanceof Promise)) return;
+		this.#asked = asked;
+		this.#repaintAfter(asked);
+	}
+	#duePending() {
+		const due = dueRegions(this.#pending, this.#pendingListedMs, [performance.now(), this.pendingDelay]);
+		if (due.length < this.#pending.length) this.surface()?.requestFrame();
+		return due;
+	}
 	#grab() {
 		const drawn = this.#drawn ?? {
 			seconds: this.value,
@@ -291,7 +331,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	#paintScene(context, scene, isRebuilt) {
 		const { dpr, height, pixelsPerSecond, startSeconds, width } = scene;
 		const x = (seconds) => (seconds - startSeconds) * pixelsPerSecond;
-		const { grid } = scene.colours;
+		const { ends, grid } = scene.colours;
 		const line = Math.max(1, Math.round(dpr));
 		const [opening, closing] = [x(this.min), x(Math.max(this.min, this.max))];
 		const [from, to] = [clamp(opening, 0, width), clamp(closing, 0, width)];
@@ -302,7 +342,7 @@ var SonicWaveform = class extends SonicWaveElement {
 		if (to > from) context.fillRect(from, Math.round((height - line) / 2), to - from, line);
 		paintPlaceholders(context, scene);
 		if (this.#peaks) paintWave(context, scene, this.#peaks);
-		context.fillStyle = grid;
+		context.fillStyle = ends;
 		for (const edge of [opening, closing]) context.fillRect(edge - line / 2, 0, line, height);
 		this.#paintMarkers(context, scene, isRebuilt);
 	}
@@ -319,6 +359,12 @@ var SonicWaveform = class extends SonicWaveElement {
 		for (const probe of probes) probe.remove();
 		return new Map(kinds.map((kind, index) => [kind, read[index] ?? ""]));
 	}
+	async #repaintAfter(asked) {
+		await Promise.allSettled([asked]);
+		if (this.#asked !== asked) return;
+		this.#asked = void 0;
+		this.surface()?.invalidate();
+	}
 	#sourceSeconds() {
 		return this.#readTime?.() ?? this.playback();
 	}

package/dist/default/elements/wavestrip.js

@@ -1,9 +1,11 @@
 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";
-import { stripBars, stripRegions } from "../lib/strip-scene.js";
+import { stripBars, stripGroove, stripRegions } from "../lib/strip-scene.js";
 
 //#region src/elements/wavestrip.ts
 const colours = {
@@ -14,6 +16,7 @@ const colours = {
 };
 const lengths = {
 	gapRatio: "--_sonic-wavestrip-bar-gap-ratio",
+	grooveRatio: "--_sonic-wavestrip-groove-ratio",
 	pitch: "--_sonic-wavestrip-bar-pitch",
 	radiusRatio: "--_sonic-wavestrip-bar-radius-ratio"
 };
@@ -45,6 +48,13 @@ function fillRegion(context, path, [from, to, style]) {
 	context.restore();
 }
 var SonicWavestrip = class extends SonicWaveElement {
+	get buffered() {
+		return this.#buffered.map(([start, end]) => [start, end]);
+	}
+	set buffered(regions) {
+		this.#buffered = sortedRegions(regions);
+		this.render();
+	}
 	get cancellable() {
 		return this.hasAttribute("cancellable");
 	}
@@ -64,22 +74,43 @@ var SonicWavestrip = class extends SonicWaveElement {
 	colours = colours;
 	lengths = lengths;
 	sheet = "wavestrip.css";
+	sizeProperty = "--_sonic-wavestrip-size";
 	#bars;
+	#buffered = [];
+	#hover;
 	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
 	#paintedKey = "";
 	#peaks;
 	connectedCallback() {
-		this.upgradeProperties("cancellable", "peaks");
+		this.upgradeProperties("buffered", "cancellable", "peaks");
 		super.connectedCallback();
 	}
 	connect(signal) {
 		super.connect(signal);
-		this.#bindHover(this.control, signal);
+		this.#hover = bindHoverPreview(this.control, {
+			canShow: () => this.readout,
+			dismiss: () => {
+				this.render();
+			},
+			isTaken: () => this.isEditing() || this.isRevealed(),
+			show: () => {
+				this.renderReadout();
+				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));
+			}
+		}, signal);
 		this.bindGestures(this.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();
 	}
 	isEmpty() {
@@ -100,6 +131,9 @@ var SonicWavestrip = class extends SonicWaveElement {
 			look.colours[kind]
 		]);
 	}
+	previewValue() {
+		return this.#hover?.value();
+	}
 	renderMarkers() {
 		this.#markerBand.render(this.markerList(), this.markerProportions());
 	}
@@ -116,28 +150,18 @@ var SonicWavestrip = class extends SonicWaveElement {
 		};
 	}
 	#barsFor({ isDirty, look, size }) {
-		const peaks = this.#peaks;
-		if (!peaks || peaks.length === 0) return void 0;
 		if (!isDirty && this.#bars) return this.#bars;
+		const peaks = this.#peaks;
+		const groove = stripGroove(size, look.lengths.grooveRatio);
+		const drawn = groove ? [groove] : [];
+		const bars = peaks && peaks.length > 0 ? stripBars(peaks, size, look.lengths) : drawn;
+		this.#bars = void 0;
+		if (bars.length === 0) return void 0;
 		const path = new Path2D();
-		for (const { height, radius, width, x, y } of stripBars(peaks, size, look.lengths)) path.roundRect(x, y, width, height, radius);
+		for (const { height, radius, width, x, y } of bars) path.roundRect(x, y, width, height, radius);
 		this.#bars = path;
 		return path;
 	}
-	#bindHover(strip, signal) {
-		strip.addEventListener("pointermove", (event) => {
-			if (event.pointerType === "touch" || event.buttons !== 0) return;
-			if (!this.readout) return;
-			const axis = this.#axis();
-			const at = clampProportion((event.clientX - axis.startPx) / axis.travelPx);
-			const mapping = this.mapping();
-			this.hoverReadout(this.#markerAt(event, axis) ?? mapping.snap(mapping.valueAt(at)));
-			this.#placeReadout();
-		}, { signal });
-		for (const type of ["pointerdown", "pointerleave"]) strip.addEventListener(type, () => {
-			this.hoverReadout(void 0);
-		}, { signal });
-	}
 	#grab(event) {
 		const axis = this.#axis();
 		const at = (event.clientX - axis.startPx) / axis.travelPx;
@@ -174,7 +198,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 		const { proportionOf } = this.mapping();
 		const isScrubbing = this.heldFrom() !== void 0 && this.isRevealed();
 		return stripRegions({
-			buffered: this.buffered.map(([start, end]) => [proportionOf(start), proportionOf(end)]),
+			buffered: this.#buffered.map(([start, end]) => [proportionOf(start), proportionOf(end)]),
 			played: proportionOf(this.playback()),
 			...isScrubbing ? { scrub: proportionOf(this.value) } : {}
 		}, width);

package/dist/default/elements/xy.js

@@ -1,13 +1,13 @@
 import { clampProportion, toNumber } from "../lib/math.js";
-import { requireChild, template } from "../lib/render.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 { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.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 { bindDrag } from "../lib/pointer-drag.js";
 import { resetKeys, valueMapping } from "../lib/value-mapping.js";
 import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
 
@@ -29,6 +29,7 @@ const orientations = {
 };
 const renderXy = template(`
 		<div class="sonic-xy">
+			<div class="sonic-xy-bracket" 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>

package/dist/default/index.js

@@ -6,6 +6,7 @@ import { SonicMeter } from "./elements/meter.js";
 import { SonicNumber } from "./elements/number.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
+import { SonicSpectrum } from "./elements/spectrum.js";
 import { SonicSplit } from "./elements/split.js";
 import { SonicSwitch } from "./elements/switch.js";
 import { SonicWaveform } from "./elements/waveform.js";
@@ -14,4 +15,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, SonicSplit, SonicSwitch, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatPercent, parsePercent };
+export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSpectrum, SonicSplit, SonicSwitch, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatPercent, parsePercent };

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

@@ -63,8 +63,10 @@ var CanvasSurface = class {
 		this.#schedule();
 	}
 	#armTransitions() {
-		const { style } = this.#options.canvas;
-		style.setProperty("transition-property", Object.values(this.#options.colours).join(", "));
+		const { canvas, colours, numbers = {} } = this.#options;
+		const { style } = canvas;
+		const watched = [...Object.values(colours), ...Object.values(numbers)];
+		style.setProperty("transition-property", watched.join(", "));
 		style.setProperty("transition-duration", "0.001ms");
 		style.setProperty("transition-timing-function", "step-start");
 		style.setProperty("transition-behavior", "allow-discrete");
@@ -148,12 +150,13 @@ var CanvasSurface = class {
 		}, { once: true });
 	}
 	#read() {
-		const { canvas, colours, lengths = {} } = this.#options;
+		const { canvas, colours, lengths = {}, numbers = {} } = this.#options;
 		const styles = getComputedStyle(canvas);
 		return {
 			colours: readEach(colours, (property) => styles.getPropertyValue(property).trim().replaceAll("currentcolor", () => styles.color)),
 			isReducedMotion: this.#reducedMotion.matches,
-			lengths: readEach(lengths, (property) => readPxProperty(styles, property, 0))
+			lengths: readEach(lengths, (property) => readPxProperty(styles, property, 0)),
+			numbers: readEach(numbers, (property) => readPxProperty(styles, property, 0))
 		};
 	}
 	#rescale() {

package/dist/default/lib/frame-timeline.js

@@ -20,8 +20,8 @@ function pendingIn({ pending, range }, window) {
 		return shown ? [shown] : [];
 	});
 }
-function placeholderPhase({ frameMs, isPaged }, pending) {
-	return !isPaged && pending.length > 0 ? frameMs / placeholderPeriodMs : void 0;
+function placeholderPhase({ frameMs, isStill }, pending) {
+	return !isStill && pending.length > 0 ? frameMs / placeholderPeriodMs : void 0;
 }
 function frameTimeline(input) {
 	const { clockSeconds, held, range, size } = input;

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

@@ -0,0 +1,46 @@
+//#region src/lib/hover-preview.ts
+function bindHoverPreview(target, options, signal) {
+	let hover;
+	let isDismissed = false;
+	let escapeWatch;
+	const watchEscape = (isHovered) => {
+		if (!isHovered) {
+			escapeWatch?.abort();
+			escapeWatch = void 0;
+			return;
+		}
+		if (escapeWatch) return;
+		escapeWatch = new AbortController();
+		target.ownerDocument.addEventListener("keydown", (event) => {
+			if (hover === void 0 || event.key !== "Escape") return;
+			hover = void 0;
+			isDismissed = true;
+			options.dismiss();
+		}, { signal: escapeWatch.signal });
+	};
+	const hoverAt = (value) => {
+		if (value === void 0) isDismissed = false;
+		if (!isDismissed && !options.isTaken()) hover = value;
+		options.show();
+		watchEscape(value !== void 0);
+	};
+	target.addEventListener("pointermove", (event) => {
+		if (event.pointerType === "touch" || event.buttons !== 0 || !options.canShow()) return;
+		hoverAt(options.valueAt(event));
+	}, { signal });
+	for (const type of ["pointerdown", "pointerleave"]) target.addEventListener(type, () => {
+		hoverAt(void 0);
+	}, { signal });
+	signal.addEventListener("abort", () => {
+		watchEscape(false);
+	}, { once: true });
+	return {
+		clear: () => {
+			hover = void 0;
+		},
+		value: () => hover
+	};
+}
+
+//#endregion
+export { bindHoverPreview };

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

@@ -4,7 +4,6 @@ import { readPxProperty } from "./read-px-property.js";
 import { writeKind } from "./marker-band.js";
 
 //#region src/lib/marker-rider.ts
-const fadeShare = .25;
 function lineX(seconds, view) {
 	return (seconds - view.startSeconds) / view.windowSeconds * view.widthPx;
 }
@@ -16,7 +15,7 @@ function parkedPlacement(labels, index, [view, arrivingX]) {
 	const approachPx = next ? lineX(next.start, view) - lineX(view.playheadSeconds, view) : Infinity;
 	return {
 		index,
-		opacity: clamp(approachPx / (view.widthPx * fadeShare), 0, 1),
+		opacity: view.fadeShare > 0 ? clamp(approachPx / (view.widthPx * view.fadeShare), 0, 1) : 1,
 		shownPx: Math.min(parked.widthPx, arrivingX - x, view.widthPx - x),
 		x
 	};
@@ -91,15 +90,18 @@ function measureWidths(control, className, texts) {
 	return widths;
 }
 function createLabelRider(control, options) {
-	const { className, colourProperty, insetProperty } = options;
+	const { className, colourProperty, fadeProperty, insetProperty } = options;
 	const parked = labelSlot(requireChild(control, `.${className}`, HTMLElement));
 	const arriving = labelSlot(requireChild(control, `.${className} + .${className}`, HTMLElement));
+	let fadeShare = .25;
 	let insetPx = 0;
 	let measured = [];
 	return {
 		measure: (labels) => {
 			const widths = measureWidths(control, className, labels.map(({ text }) => text));
-			insetPx = readPxProperty(getComputedStyle(control), insetProperty, 0);
+			const styles = getComputedStyle(control);
+			fadeShare = readPxProperty(styles, fadeProperty, .25);
+			insetPx = readPxProperty(styles, insetProperty, 0);
 			measured = labels.map((label, index) => ({
 				...label,
 				widthPx: widths[index] ?? 0
@@ -108,6 +110,7 @@ function createLabelRider(control, options) {
 		place: (window) => {
 			const layout = layoutRider(measured, {
 				...window,
+				fadeShare,
 				insetPx
 			});
 			writeLabel(parked, [measured, colourProperty], layout.parked);

package/dist/default/lib/mirror-children.js

@@ -0,0 +1,64 @@
+import { appendOnce } from "./owned-control.js";
+import { attachSlots } from "./render.js";
+
+//#region src/lib/mirror-children.ts
+const hostSlots = /* @__PURE__ */ new WeakMap();
+function childHolding(host, node) {
+	let current = node;
+	while (current && current.parentNode !== host) current = current.parentNode;
+	return current ?? void 0;
+}
+function isCopiedChange(host, record, { control, isCopied }) {
+	if (record.target === host) return record.removedNodes.length > 0 || [...record.addedNodes].some((node) => node !== control);
+	const child = childHolding(host, record.target);
+	if (child === void 0) return false;
+	return isCopied(child) || record.type === "attributes" && record.target === child;
+}
+function mirrorChildren(host, { control, copy, isCopied = () => true, isPassed = () => false, place }, signal) {
+	const slots = hostSlots.get(host) ?? attachSlots(host);
+	let copies = /* @__PURE__ */ new Map();
+	hostSlots.set(host, slots);
+	const mirror = (touched) => {
+		appendOnce(host, control);
+		const children = [...host.childNodes].filter((child) => child !== control);
+		const slotted = children.filter((child) => child instanceof Element || child instanceof Text);
+		const kept = copies;
+		const originals = children.filter((child) => isCopied(child));
+		copies = new Map(originals.map((original) => [original, touched && !touched.has(original) && kept.has(original) ? kept.get(original) : copy(original)]));
+		place([...copies.values()].filter((made) => made !== void 0));
+		slots.shown.assign(...slotted.filter((child) => !isCopied(child)), control);
+		slots.kept.assign(...slotted.filter((child) => isCopied(child)));
+	};
+	const watch = () => {
+		observer.disconnect();
+		observer.observe(host, { childList: true });
+		for (const child of host.childNodes) {
+			if (child === control) continue;
+			observer.observe(child, {
+				attributes: true,
+				characterData: true,
+				childList: true,
+				subtree: true
+			});
+		}
+	};
+	const observer = new MutationObserver((records) => {
+		const changes = records.filter((record) => isCopiedChange(host, record, {
+			control,
+			isCopied
+		}));
+		if (changes.length === 0) return;
+		if (changes.some((record) => record.target === host)) {
+			mirror();
+			watch();
+		} else mirror(new Set(changes.map((record) => childHolding(host, record.target))));
+	});
+	mirror();
+	watch();
+	signal.addEventListener("abort", () => {
+		observer.disconnect();
+	}, { once: true });
+}
+
+//#endregion
+export { mirrorChildren };