@xsynaptic/sonic-ui 0.17.0 → 0.18.0

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,41 +197,28 @@ 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;
@@ -254,11 +240,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 +257,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 +283,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 +309,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 +327,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 +356,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 +368,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 +412,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 +435,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/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/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/value-model.js

@@ -0,0 +1,62 @@
+import { clamp } from "./math.js";
+import { valueMapping } from "./value-mapping.js";
+
+//#region src/lib/value-model.ts
+function createValueModel(readSpec) {
+	const listeners = /* @__PURE__ */ new Set();
+	let asked;
+	let bounds;
+	let landing;
+	let mapped;
+	let value = 0;
+	function mapping() {
+		if (mapped) return mapped;
+		mapped = valueMapping(readSpec());
+		return mapped;
+	}
+	function moveTo(next) {
+		if (!Number.isFinite(next)) return false;
+		const snapped = mapping().snap(next);
+		asked = snapped;
+		if (snapped === value) return false;
+		value = snapped;
+		return true;
+	}
+	return {
+		input: (next) => moveTo(bounds ? clamp(next, ...bounds) : next),
+		land: (target, direction) => landing?.(target, direction) ?? target,
+		limit: () => bounds,
+		mapping,
+		notify: () => {
+			for (const listener of listeners) listener();
+		},
+		respec: (fallback, options) => {
+			mapped = void 0;
+			if (options?.forgetAsk === true) asked = void 0;
+			value = mapping().snap(asked ?? fallback);
+		},
+		setLanding: (resolve) => {
+			landing = resolve;
+		},
+		setLimit: (next) => {
+			bounds = next;
+		},
+		get value() {
+			return value;
+		},
+		watch: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		write: (next) => {
+			const hasMoved = moveTo(next);
+			if (Number.isFinite(next)) asked = next;
+			return hasMoved;
+		}
+	};
+}
+
+//#endregion
+export { createValueModel };

package/dist/default/lib/waveform-scene.js

@@ -0,0 +1,108 @@
+import { clamp } from "./math.js";
+import { isKind } from "./marker-band.js";
+import { waveformBuckets } from "./waveform-buckets.js";
+
+//#region src/lib/waveform-scene.ts
+const waveformColours = {
+	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 amplitudeMargin = .94;
+const hatchPitchPx = 8;
+const placeholderWavelengthPx = 48;
+const placeholderAmplitude = .2;
+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();
+}
+function paintMarkers(context, scene, drawn) {
+	const line = Math.max(1, Math.round(scene.dpr));
+	for (const { dimmed, kind, start } of drawn.markers) {
+		const x = (start - scene.startSeconds) * scene.pixelsPerSecond;
+		context.fillStyle = (isKind(kind) ? drawn.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;
+}
+function paintWaveform(context, scene, drawn) {
+	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(drawn.range[0]), x(drawn.range[1])];
+	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 (drawn.peaks) paintWave(context, scene, drawn.peaks);
+	context.fillStyle = ends;
+	for (const edge of [opening, closing]) context.fillRect(edge - line / 2, 0, line, height);
+	paintMarkers(context, scene, drawn);
+}
+
+//#endregion
+export { paintWaveform, waveformColours };