@xsynaptic/sonic-ui 0.17.0 → 0.19.0

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

@@ -14,7 +14,7 @@ const detentZonePx = 8;
 var ValueGestures = class {
 	#claim = new ReadoutClaim(() => {
 		this.#showRevealed();
-		this.#host.holdChanged();
+		this.#host.scrubChanged();
 	});
 	#control;
 	#entry;
@@ -53,7 +53,7 @@ var ValueGestures = class {
 					this.#pointerType = void 0;
 					return;
 				}
-				const fromValue = host.value();
+				const fromValue = host.model.value;
 				host.toggleState("dragging", true);
 				const axis = grab(event);
 				if (!axis) {
@@ -103,9 +103,6 @@ var ValueGestures = class {
 		this.#pointerDrag?.end();
 		this.#endKeyScrub();
 	}
-	heldFrom() {
-		return this.#dragging()?.fromValue ?? this.#keyScrub?.fromValue;
-	}
 	isEditing() {
 		return this.#entry?.isOpen === true;
 	}
@@ -118,6 +115,9 @@ var ValueGestures = class {
 	pointerType() {
 		return this.#pointerType;
 	}
+	scrubFrom() {
+		return this.#dragging()?.fromValue ?? this.#keyScrub?.fromValue;
+	}
 	#bindEntry(signal) {
 		const control = this.#control;
 		const host = this.#host;
@@ -156,13 +156,13 @@ var ValueGestures = class {
 			this.#claim.reveal("keys");
 			this.#showRevealed();
 			this.#keyTo(event, next);
-			host.holdChanged();
+			host.scrubChanged();
 		}, { 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();
+			if (isMeta || host.model.mapping().keyTarget(event.key, host.model.value) !== void 0) this.#springBack();
 		}, { signal });
 		control.addEventListener("blur", () => {
 			this.#endKeyScrub();
@@ -172,13 +172,13 @@ var ValueGestures = class {
 	}
 	#commit(next, direction = 0) {
 		const host = this.#host;
-		const landed = Number.isFinite(next) ? host.land(next, direction) : next;
+		const landed = Number.isFinite(next) ? host.model.land(next, direction) : next;
 		if (host.input(landed)) host.dispatch("change");
 	}
 	#concealKeyReveal() {
 		if (!this.#claim.conceal("keys")) return;
 		this.#showRevealed();
-		this.#host.holdChanged();
+		this.#host.scrubChanged();
 	}
 	#crossCancelZone(drag, value) {
 		const host = this.#host;
@@ -196,7 +196,7 @@ var ValueGestures = class {
 		const host = this.#host;
 		const isOutside = drag.outside?.(event) === true;
 		const wasEngaged = drag.state.isEngaged;
-		const mapping = host.mapping();
+		const mapping = host.model.mapping();
 		const { state, value } = stepDrag(mapping, drag.state, {
 			isFine: event.shiftKey,
 			isOutside,
@@ -213,13 +213,13 @@ var ValueGestures = class {
 		const scrub = this.#keyScrub;
 		if (!scrub) return;
 		this.#keyScrub = void 0;
-		host.holdChanged();
-		if (host.value() !== scrub.fromValue) host.dispatch("change");
+		host.scrubChanged();
+		if (host.model.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());
+		return host.model.mapping().keyTarget(key, host.model.value, host.keyStep());
 	}
 	#keyTo(event, next) {
 		const host = this.#host;
@@ -228,7 +228,7 @@ var ValueGestures = class {
 			return;
 		}
 		this.#endKeyScrub();
-		this.#commit(next, next > host.value() ? 1 : -1);
+		this.#commit(next, next > host.model.value ? 1 : -1);
 	}
 	#lift(drag, event, entry) {
 		const host = this.#host;
@@ -248,16 +248,16 @@ var ValueGestures = class {
 		clearTimeout(drag.revealTimer);
 		this.#claim.conceal("drag");
 		host.toggleState("cancelling", false);
-		host.holdChanged();
+		host.scrubChanged();
 		this.#showRevealed();
-		if (host.value() !== drag.fromValue) host.dispatch("change");
+		if (host.model.value !== drag.fromValue) host.dispatch("change");
 		this.#springBack();
 		this.#pointerType = void 0;
 	}
 	#renderDragReveal(drag) {
 		if (drag.isRevealed && !drag.isOutside) this.#claim.reveal("drag");
 		else this.#claim.conceal("drag");
-		this.#host.holdChanged();
+		this.#host.scrubChanged();
 		this.#showRevealed();
 	}
 	#reset() {
@@ -273,7 +273,7 @@ var ValueGestures = class {
 		if (this.#keyScrub?.key !== key) {
 			this.#endKeyScrub();
 			this.#keyScrub = {
-				fromValue: host.value(),
+				fromValue: host.model.value,
 				key
 			};
 		}
@@ -290,14 +290,14 @@ var ValueGestures = class {
 		const host = this.#host;
 		const target = host.springTarget();
 		if (target === void 0) return;
-		if (host.mapping().snap(target) !== host.value()) host.toggleState("springing", true);
+		if (host.model.mapping().snap(target) !== host.model.value) host.toggleState("springing", true);
 		this.#commit(target);
 	}
 	#startDrag(axis, event) {
 		const host = this.#host;
-		const mapping = host.mapping();
+		const mapping = host.model.mapping();
 		const detent = host.detent();
-		const value = host.value();
+		const value = host.model.value;
 		const start = {
 			from: value,
 			position: axis.position(event),
@@ -316,7 +316,7 @@ var ValueGestures = class {
 		});
 	}
 	#withinLimit(mapping, state) {
-		const limit = this.#host.limit();
+		const limit = this.#host.model.limit();
 		if (!limit || mapping.isWrapping) return state;
 		const [low, high] = limit;
 		return {

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

@@ -1,6 +1,7 @@
 import { SonicValueElement } from "./value-element.js";
 import { bindSurface } from "../lib/canvas-surface.js";
-import { bindFill } from "../lib/fill-watch.js";
+import { formatClock, parseClock } from "../lib/clock.js";
+import { spokenDuration } from "../lib/spoken-duration.js";
 
 //#region src/elements/wave-element.ts
 function markerKey(marker) {
@@ -31,13 +32,17 @@ var SonicWaveElement = class extends SonicValueElement {
 		this.renderMarkers();
 		this.render();
 	}
+	notation = {
+		format: formatClock,
+		parse: parseClock,
+		speak: (seconds) => spokenDuration(seconds, this.closest("[lang]")?.lang)
+	};
 	#current;
 	#markers = [];
 	#surface;
-	#syncFill;
 	attributeChangedCallback(name) {
 		super.attributeChangedCallback(name);
-		if (name === "fill") this.#syncFill?.(this.fill);
+		if (name === "fill") this.#surface?.setFill(this.fill);
 	}
 	connectedCallback() {
 		this.upgradeProperties("fill", "markers");
@@ -53,6 +58,10 @@ var SonicWaveElement = class extends SonicValueElement {
 		this.#surface = bindSurface({
 			canvas: this.canvas,
 			colours: this.colours,
+			fill: {
+				control,
+				sizeProperty: this.sizeProperty
+			},
 			lengths: this.lengths,
 			paint: (context, frame) => {
 				this.paint(context, frame);
@@ -63,27 +72,11 @@ var SonicWaveElement = class extends SonicValueElement {
 			signal
 		});
 		this.render();
-		this.checkStyles(control, this.sheet, [
-			"cap",
-			"glass",
-			"pane",
-			"well",
-			"readout",
-			"value"
-		]);
-		this.#syncFill = bindFill(control, this.sizeProperty, signal);
-		this.#syncFill(this.fill);
+		this.#surface.setFill(this.fill);
 	}
 	focusTarget() {
 		return this.control;
 	}
-	heldWrite(next) {
-		super.heldWrite(next);
-		this.render();
-	}
-	holdChanged() {
-		this.render();
-	}
 	markerList() {
 		return this.#markers;
 	}
@@ -101,6 +94,9 @@ var SonicWaveElement = class extends SonicValueElement {
 	renderEmpty() {
 		this.toggleState("empty", this.isEmpty());
 	}
+	scrubChanged() {
+		this.render();
+	}
 	showCurrentMarker(seconds) {
 		const current = this.#markers.findLast((marker) => marker.start <= seconds);
 		if (markerKey(current) === markerKey(this.#current)) return;

package/dist/default/elements/waveform.js

@@ -1,36 +1,19 @@
 import { clamp, roundTo } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
-import { capturePointer } from "../lib/pointer-drag.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";
 import { createLabelRider } from "../lib/marker-rider.js";
+import { createPeaksRequest } from "../lib/peaks-request.js";
 import { createTrackingClock } from "../lib/tracking-clock.js";
-import { waveformBuckets } from "../lib/waveform-buckets.js";
-import { pinchFactor, wheelFactor, zoomKeyFactor } from "../lib/zoom-gesture.js";
+import { paintWaveform, waveformColours } from "../lib/waveform-scene.js";
+import { bindZoom, bindZoomKeys } from "../lib/zoom-gesture.js";
 
 //#region src/elements/waveform.ts
-const colours = {
-	ends: "--_sonic-waveform-ends",
-	grid: "--_sonic-waveform-grid",
-	marker: "--_sonic-waveform-marker",
-	placeholder: "--_sonic-waveform-placeholder",
-	wave: "--_sonic-waveform-wave",
-	waveEdge: "--_sonic-waveform-wave-edge"
-};
 const defaultZoom = 70;
 const defaultZoomMin = 20;
 const defaultZoomMax = 280;
-const zoomKeys = /* @__PURE__ */ new Map([
-	["+", 1],
-	["-", -1],
-	["=", 1]
-]);
-const amplitudeMargin = .94;
-const hatchPitchPx = 8;
-const placeholderWavelengthPx = 48;
-const placeholderAmplitude = .2;
 const renderWaveform = template(`
 		<div class="sonic-waveform" role="slider" tabindex="0">
 			<canvas class="sonic-waveform-canvas" aria-hidden="true"></canvas>
@@ -59,66 +42,6 @@ function placeLine(line, at) {
 	const translate = `${String(at * 100)}cqi`;
 	if (line.style.getPropertyValue("translate") !== translate) line.style.setProperty("translate", translate);
 }
-function paintHatch(context, scene, [from, to]) {
-	if (to <= from) return;
-	const { dpr, height } = scene;
-	const pitch = Math.max(2, Math.round(hatchPitchPx * dpr));
-	const offset = scene.startSeconds * scene.pixelsPerSecond;
-	context.save();
-	context.beginPath();
-	context.rect(from, 0, to - from, height);
-	context.clip();
-	context.beginPath();
-	for (let x = Math.floor((from - height + offset) / pitch) * pitch - offset; x < to; x += pitch) {
-		context.moveTo(x, height);
-		context.lineTo(x + height, 0);
-	}
-	context.lineWidth = Math.max(1, Math.round(dpr));
-	context.strokeStyle = scene.colours.ends;
-	context.stroke();
-	context.restore();
-}
-function paintPlaceholders(context, scene) {
-	if (scene.pending.length === 0) return;
-	const { dpr, height, pixelsPerSecond, startSeconds } = scene;
-	const wavelength = placeholderWavelengthPx * dpr;
-	const center = height / 2;
-	const origin = startSeconds * pixelsPerSecond;
-	const waveY = (x) => center - Math.sin(((x + origin) / wavelength + scene.phase) * 2 * Math.PI) * center * placeholderAmplitude;
-	context.beginPath();
-	for (const [from, to] of scene.pending) {
-		const opening = (from - startSeconds) * pixelsPerSecond;
-		const closing = (to - startSeconds) * pixelsPerSecond;
-		context.moveTo(opening, waveY(opening));
-		for (let x = opening + dpr; x < closing; x += dpr) context.lineTo(x, waveY(x));
-		context.lineTo(closing, waveY(closing));
-	}
-	context.lineWidth = Math.max(1, Math.round(dpr));
-	context.strokeStyle = scene.colours.placeholder;
-	context.stroke();
-}
-function waveFill(context, scene) {
-	const { wave, waveEdge } = scene.colours;
-	const gradient = context.createLinearGradient(0, 0, 0, scene.height);
-	gradient.addColorStop(0, waveEdge);
-	gradient.addColorStop(.5, wave);
-	gradient.addColorStop(1, waveEdge);
-	return gradient;
-}
-function paintWave(context, scene, peaks) {
-	const buckets = waveformBuckets(peaks, scene);
-	const [first] = buckets;
-	if (!first) return;
-	const center = scene.height / 2;
-	const amplitudePx = center * amplitudeMargin;
-	context.fillStyle = waveFill(context, scene);
-	context.beginPath();
-	context.moveTo(first.x, center);
-	for (const bucket of buckets) context.lineTo(bucket.x, center - bucket.high * amplitudePx);
-	for (const bucket of buckets.toReversed()) context.lineTo(bucket.x, center - bucket.low * amplitudePx);
-	context.closePath();
-	context.fill();
-}
 var SonicWaveform = class extends SonicWaveElement {
 	static observedAttributes = [
 		...SonicWaveElement.observedAttributes,
@@ -137,8 +60,9 @@ var SonicWaveform = class extends SonicWaveElement {
 	set peaks(peaks) {
 		this.#peaks = peaks;
 		this.renderEmpty();
-		this.#repaint();
+		this.#peaksRequest.changed();
 	}
+	/** Spans being fetched; drawn as placeholders until cleared */
 	get pending() {
 		return this.#pending.map(([start, end]) => [start, end]);
 	}
@@ -152,8 +76,9 @@ var SonicWaveform = class extends SonicWaveElement {
 			const key = region.join(":");
 			return [key, listedMs.get(key) ?? nowMs];
 		}));
-		this.#repaint();
+		this.#peaksRequest.changed();
 	}
+	/** How long a span stays listed in `pending` before its placeholder draws */
 	get pendingDelay() {
 		return Math.max(0, this.numberAttribute("pending-delay", 0));
 	}
@@ -173,6 +98,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	set playing(isPlaying) {
 		this.reflect("playing", isPlaying);
 	}
+	/** Read every frame for the playback time, so the waveform scrolls smoother than writes to `value` arrive */
 	get readTime() {
 		return this.#readTime;
 	}
@@ -198,8 +124,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	set requestPeaks(request) {
 		this.#requestPeaks = request;
-		this.#askedKey = void 0;
-		this.surface()?.invalidate();
+		this.#peaksRequest.reset();
 	}
 	get zoom() {
 		const zoom = this.numberAttribute("zoom", defaultZoom);
@@ -230,25 +155,22 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	control = renderWaveform();
 	canvas = requireChild(this.control, ".sonic-waveform-canvas", HTMLCanvasElement);
-	colours = colours;
+	colours = waveformColours;
 	lengths = {};
 	sheet = "waveform.css";
 	sizeProperty = "--_sonic-waveform-size";
-	#asked = /* @__PURE__ */ new WeakSet();
-	#askedKey;
 	#clock = createTrackingClock();
-	#connection;
 	#drawn;
 	#ghost = requireChild(this.control, ".sonic-waveform-ghost", HTMLDivElement);
 	#grabbed;
-	#isAsking = false;
-	#isPinchSpent = false;
 	#kindColours = /* @__PURE__ */ new Map();
 	#paintedKey = "";
 	#peaks;
+	#peaksRequest = createPeaksRequest(() => {
+		this.surface()?.invalidate();
+	});
 	#pending = [];
 	#pendingListedMs = /* @__PURE__ */ new Map();
-	#pinch;
 	#playhead = requireChild(this.control, ".sonic-waveform-playhead", HTMLDivElement);
 	#readTime;
 	#renderLabel;
@@ -260,11 +182,10 @@ var SonicWaveform = class extends SonicWaveElement {
 		insetProperty: "--_sonic-waveform-label-inset",
 		parkProperty: "--_sonic-waveform-label-park"
 	});
-	#touches = /* @__PURE__ */ new Map();
-	#wheel;
+	#zoomGesture;
 	attributeChangedCallback(name) {
 		super.attributeChangedCallback(name);
-		if (name === "zoomable") this.#bindWheel();
+		if (name === "zoomable") this.#zoomGesture?.sync();
 	}
 	connectedCallback() {
 		this.upgradeProperties("peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "renderLabel", "requestPeaks", "zoom", "zoomable", "zoomMax", "zoomMin");
@@ -272,15 +193,20 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	connect(signal) {
 		super.connect(signal);
-		this.#connection = signal;
-		signal.addEventListener("abort", () => {
-			this.#connection = void 0;
-			this.#bindWheel();
-		}, { once: true });
-		this.#bindWheel();
-		this.#bindPinch(signal);
+		const zoomTarget = {
+			claim: () => {
+				this.abandonHold();
+			},
+			isDisabled: () => this.isDisabled(),
+			isZoomable: () => this.zoomable,
+			zoom: () => this.zoom,
+			zoomTo: (target) => {
+				this.#zoomTo(target);
+			}
+		};
+		this.#zoomGesture = bindZoom(this.control, zoomTarget, signal);
 		this.bindGestures(this.control, signal, () => this.#grab());
-		this.#bindZoomKeys(signal);
+		bindZoomKeys(this.control, zoomTarget, signal);
 		if (!("fonts" in document)) return;
 		document.fonts.addEventListener("loadingdone", () => {
 			this.renderMarkers();
@@ -298,6 +224,7 @@ var SonicWaveform = class extends SonicWaveElement {
 		const held = this.#held();
 		const isPaged = look.isReducedMotion && this.reducedMotion === "page";
 		const pending = this.#duePending();
+		const range = [this.min, Math.max(this.min, this.max)];
 		const timeline = frameTimeline({
 			clockSeconds: this.#clock.read(frameMs, {
 				isPlaying: this.playing,
@@ -310,7 +237,7 @@ var SonicWaveform = class extends SonicWaveElement {
 			isPlaying: this.playing,
 			isStill: look.isReducedMotion,
 			pending,
-			range: [this.min, Math.max(this.min, this.max)],
+			range,
 			size,
 			zoom: this.zoom
 		});
@@ -332,11 +259,17 @@ var SonicWaveform = class extends SonicWaveElement {
 		});
 		if (isDirty || timeline.paintKey !== this.#paintedKey) {
 			this.#paintedKey = timeline.paintKey;
-			this.#paintScene(context, {
+			if (isRebuilt) this.#kindColours = this.#readKindColours();
+			paintWaveform(context, {
 				...view,
 				colours: look.colours
-			}, isRebuilt);
-			if (timeline.wanted) this.#ask(timeline.wanted);
+			}, {
+				kindColours: this.#kindColours,
+				markers: this.markerList(),
+				peaks: this.#peaks,
+				range
+			});
+			this.#peaksRequest.ask(this.#requestPeaks, timeline.wanted);
 		}
 		if (timeline.isMoving) this.surface()?.requestFrame();
 	}
@@ -354,95 +287,13 @@ var SonicWaveform = class extends SonicWaveElement {
 		}]));
 		this.surface()?.rebuild();
 	}
-	#ask(wanted) {
-		const key = wanted.join(":");
-		if (key === this.#askedKey) return;
-		let asked;
-		this.#askedKey = key;
-		this.#isAsking = true;
-		try {
-			asked = this.#requestPeaks?.(...wanted);
-		} finally {
-			this.#isAsking = false;
-		}
-		const promises = asked instanceof Promise ? [asked] : asked ?? [];
-		for (const promise of promises) {
-			if (this.#asked.has(promise)) continue;
-			this.#asked.add(promise);
-			this.#repaintAfter(promise);
-		}
-	}
-	#bindPinch(signal) {
-		const control = this.control;
-		this.#touches.clear();
-		this.#pinch = void 0;
-		this.#isPinchSpent = false;
-		control.addEventListener("pointerdown", (event) => {
-			if (event.pointerType !== "touch" || !this.zoomable || this.isDisabled()) return;
-			this.#touches.set(event.pointerId, event.clientX);
-			if (this.#pinch || this.#isPinchSpent) return;
-			const pointerIds = this.#touchPair();
-			if (!pointerIds) return;
-			this.abandonHold();
-			capturePointer(control, event.pointerId);
-			this.#pinch = {
-				pointerIds,
-				startSpanPx: this.#spanPx(pointerIds),
-				startZoom: this.zoom
-			};
-		}, { signal });
-		control.addEventListener("pointermove", (event) => {
-			if (!this.#touches.has(event.pointerId)) return;
-			this.#touches.set(event.pointerId, event.clientX);
-			const pinch = this.#pinch;
-			if (!pinch?.pointerIds.includes(event.pointerId)) return;
-			this.#zoomTo(pinch.startZoom * pinchFactor(pinch.startSpanPx, this.#spanPx(pinch.pointerIds)));
-		}, { signal });
-		for (const type of ["pointerup", "pointercancel"]) control.addEventListener(type, (event) => {
-			if (!this.#touches.delete(event.pointerId)) return;
-			if (this.#pinch?.pointerIds.includes(event.pointerId)) {
-				this.#pinch = void 0;
-				this.#isPinchSpent = true;
-			}
-			if (this.#touches.size === 0) this.#isPinchSpent = false;
-		}, { signal });
-	}
-	#bindWheel() {
-		this.#wheel?.abort();
-		this.#wheel = void 0;
-		if (!this.zoomable || !this.#connection) return;
-		this.#wheel = new AbortController();
-		this.control.addEventListener("wheel", (event) => {
-			if (!event.ctrlKey && !event.metaKey || this.isDisabled()) return;
-			event.preventDefault();
-			this.#zoomTo(this.zoom * wheelFactor(event.deltaY, event.deltaMode));
-		}, {
-			passive: false,
-			signal: this.#wheel.signal
-		});
-		let startZoom = this.zoom;
-		for (const type of ["gesturestart", "gesturechange"]) this.control.addEventListener(type, (event) => {
-			if (this.isDisabled() || this.#touches.size > 0) return;
-			event.preventDefault();
-			if (type === "gesturestart") startZoom = this.zoom;
-			else if ("scale" in event && typeof event.scale === "number") this.#zoomTo(startZoom * event.scale);
-		}, { signal: this.#wheel.signal });
-	}
-	#bindZoomKeys(signal) {
-		this.control.addEventListener("keydown", (event) => {
-			const direction = this.#zoomKey(event);
-			if (direction === void 0) return;
-			event.preventDefault();
-			this.#zoomTo(this.zoom * zoomKeyFactor ** direction);
-		}, { signal });
-	}
 	#duePending() {
 		const due = dueRegions(this.#pending, this.#pendingListedMs, [performance.now(), this.pendingDelay]);
 		if (due.length < this.#pending.length) this.surface()?.requestFrame();
 		return due;
 	}
 	#grab() {
-		if (this.#pinch || this.#isPinchSpent) return void 0;
+		if (this.#zoomGesture?.isPinching() === true) return void 0;
 		const drawn = this.#drawn ?? {
 			seconds: this.value,
 			startSeconds: this.value
@@ -459,42 +310,13 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	#held() {
 		const grabbed = this.#grabbed;
-		const from = this.heldFrom();
+		const { from } = this.scrubState();
 		if (!grabbed || from === void 0) return void 0;
 		return {
 			grabbed,
 			seconds: this.value === from ? grabbed.seconds : this.value
 		};
 	}
-	#paintMarkers(context, scene, isRebuilt) {
-		if (isRebuilt) this.#kindColours = this.#readKindColours();
-		const line = Math.max(1, Math.round(scene.dpr));
-		for (const { dimmed, kind, start } of this.markers) {
-			const x = (start - scene.startSeconds) * scene.pixelsPerSecond;
-			context.fillStyle = (isKind(kind) ? this.#kindColours.get(kind) : void 0) ?? scene.colours.marker;
-			context.globalAlpha = dimmed === true ? .5 : 1;
-			context.fillRect(x - line / 2, 0, line, scene.height);
-		}
-		context.globalAlpha = 1;
-	}
-	#paintScene(context, scene, isRebuilt) {
-		const { dpr, height, pixelsPerSecond, startSeconds, width } = scene;
-		const x = (seconds) => (seconds - startSeconds) * pixelsPerSecond;
-		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)];
-		context.clearRect(0, 0, width, height);
-		paintHatch(context, scene, [0, from]);
-		paintHatch(context, scene, [to, width]);
-		context.fillStyle = grid;
-		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 = ends;
-		for (const edge of [opening, closing]) context.fillRect(edge - line / 2, 0, line, height);
-		this.#paintMarkers(context, scene, isRebuilt);
-	}
 	#readKindColours() {
 		const kinds = [...new Set(this.markers.map(({ kind }) => kind).filter((kind) => isKind(kind)))];
 		const probes = kinds.map((kind) => {
@@ -508,29 +330,8 @@ var SonicWaveform = class extends SonicWaveElement {
 		for (const probe of probes) probe.remove();
 		return new Map(kinds.map((kind, index) => [kind, read[index] ?? ""]));
 	}
-	#repaint() {
-		if (!this.#isAsking) this.#askedKey = void 0;
-		this.surface()?.invalidate();
-	}
-	async #repaintAfter(asked) {
-		await Promise.allSettled([asked]);
-		this.#repaint();
-	}
 	#sourceSeconds() {
-		return this.#readTime?.() ?? this.playback();
-	}
-	#spanPx([first, second]) {
-		return (this.#touches.get(second) ?? 0) - (this.#touches.get(first) ?? 0);
-	}
-	#touchPair() {
-		const [first, second, third] = this.#touches.keys();
-		if (first === void 0 || second === void 0 || third !== void 0) return void 0;
-		return [first, second];
-	}
-	#zoomKey(event) {
-		if (!this.zoomable || this.isDisabled() || event.target !== this.control) return void 0;
-		if (event.ctrlKey || event.metaKey || event.altKey) return void 0;
-		return zoomKeys.get(event.key);
+		return this.#readTime?.() ?? this.scrubState().played;
 	}
 	#zoomTo(target) {
 		const next = roundTo(clamp(target, this.zoomMin, this.zoomMax), 2);