@xsynaptic/sonic-ui 0.5.0 → 0.6.1

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

@@ -1,17 +1,16 @@
-import { clamp } from "../lib/math.js";
-import { placeChildren, requireChild } from "../lib/render.js";
+import { clamp, toNumber } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
+import { requireChild } from "../lib/render.js";
 import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
 import { ValueEntry } from "./value-entry.js";
-import { copyNode } from "../lib/copy-node.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 { parseNumberList } from "../lib/number-list.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 import { readPxProperty } from "../lib/read-px-property.js";
-import { readRegions } from "../lib/time-regions.js";
 import { resetKeys, valueMapping } from "../lib/value-mapping.js";
 
 //#region src/elements/value-element.ts
@@ -36,18 +35,6 @@ const roleAttributes = [
 	"role",
 	"tabindex"
 ];
-function scaleValue(mark) {
-	const text = mark.dataset.sonicValue?.trim();
-	return text ? Number(text) : NaN;
-}
-function scaleMark(original) {
-	const mark = copyNode(original);
-	if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) return void 0;
-	if (!Number.isFinite(scaleValue(mark))) return void 0;
-	const isTick = mark.childElementCount === 0 && mark.textContent.trim() === "";
-	mark.classList.add(isTick ? "sonic-scale-tick" : "sonic-scale-label");
-	return mark;
-}
 let link;
 function linkValue(element) {
 	return link(element);
@@ -63,6 +50,7 @@ var SonicValueElement = class extends SonicFormElement {
 		"origin",
 		"readout",
 		"step",
+		"tabindex",
 		"taper",
 		"value",
 		"positions"
@@ -88,13 +76,6 @@ var SonicValueElement = class extends SonicFormElement {
 			}
 		});
 	}
-	get buffered() {
-		return this.#buffered.map(([start, end]) => [start, end]);
-	}
-	set buffered(regions) {
-		this.#buffered = regions ? readRegions(regions).toSorted((first, second) => first[0] - second[0]) : [];
-		this.render();
-	}
 	get default() {
 		return this.optionalNumberAttribute("default");
 	}
@@ -203,151 +184,130 @@ var SonicValueElement = class extends SonicFormElement {
 		return this.#value;
 	}
 	set value(next) {
+		if (next === void 0 || next === null) {
+			this.formResetCallback();
+			return;
+		}
+		const value = toNumber(next);
 		if (this.#isHeld()) {
-			this.heldWrite(next);
+			this.heldWrite(value);
 			return;
 		}
-		this.#write(next);
+		this.#write(value);
+		if (Number.isFinite(value)) this.#asked = value;
 	}
 	get valueText() {
 		return this.#textFor(this.#value);
 	}
-	#buffered = [];
+	#asked;
 	#claim = new ReadoutClaim(() => {
 		this.#renderHold();
 	});
-	#drag;
 	#entry;
-	#escapeWatch;
 	#formatSpokenValue;
 	#formatValue;
 	#instance = String(instanceCount += 1);
-	#isDirty = false;
 	#isModulated = false;
 	#keyScrub;
 	#land;
 	#limit;
+	#mapping;
 	#modulationValue;
 	#parseValue;
+	#pointerDrag;
 	#positions;
 	#readout;
-	#scaleMarks;
 	#value = 0;
 	#watchers = /* @__PURE__ */ new Set();
 	attributeChangedCallback(name) {
+		this.#mapping = void 0;
 		this.#positions = parseNumberList(this.getAttribute("positions"));
 		if (name === "value") {
 			if (this.#isHeld()) {
 				this.heldWrite(this.numberAttribute("value", this.min));
 				return;
 			}
-			this.#isDirty = false;
+			this.#asked = void 0;
 		}
-		if (name === "disabled" && this.isDisabled()) {
-			this.#entry?.close(false);
-			this.#endDrag();
-			this.#endKeyScrub();
-		}
-		this.#value = this.mapping().snap(this.#isDirty ? this.#value : this.numberAttribute("value", this.min));
-		if (proportionAttributes.has(name)) this.proportionsChanged();
+		if (name === "disabled" && this.isDisabled()) this.#endHolds();
+		this.#value = this.mapping().snap(this.#asked ?? this.numberAttribute("value", this.min));
+		if (proportionAttributes.has(name) && this.isBound()) this.proportionsChanged();
 		this.render();
 	}
 	connectedCallback() {
-		this.upgradeProperties("buffered", "default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "step", "taper", "positions", "detent", "formatValue", "formatSpokenValue", "keyStep", "parseValue", "value");
+		this.upgradeProperties("default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "step", "taper", "positions", "detent", "formatValue", "formatSpokenValue", "keyStep", "parseValue", "value");
 		super.connectedCallback();
 	}
 	bindGestures(control, signal, grab) {
 		const entry = this.#bindEntry(control, signal);
-		control.addEventListener("pointerdown", (event) => {
-			if (!this.#canPress(event, entry)) return;
-			this.#endDrag();
-			this.toggleState("springing", false);
-			if (event.pointerType === "touch") event.preventDefault();
-			focusByPointer(control);
-			if (isResetPress(event)) {
-				this.#reset();
-				return;
+		this.#pointerDrag = bindDrag(control, {
+			cancel: (drag) => {
+				if (drag.isKeptOnCancel !== true) this.input(drag.fromValue);
+			},
+			grab: (event) => {
+				if (isMenuPress(event) || this.isDisabled() || entry.isOpen) return;
+				this.toggleState("springing", false);
+				if (event.pointerType === "touch") event.preventDefault();
+				focusByPointer(control);
+				if (isResetPress(event)) {
+					this.#reset();
+					return;
+				}
+				const fromValue = this.#value;
+				const axis = grab(event);
+				if (!axis) return;
+				const drag = {
+					...axis,
+					fromValue,
+					isOutside: false,
+					isRevealed: false,
+					revealTimer: void 0,
+					state: this.#startDrag(control, axis, event)
+				};
+				drag.revealTimer = setTimeout(() => {
+					this.#reveal(drag);
+				}, 250);
+				return drag;
+			},
+			lift: (drag, event) => {
+				const tap = drag.state.isEngaged ? void 0 : this.tapTarget();
+				if (tap !== void 0) {
+					entry.forgetPress();
+					this.#commit(tap);
+					return;
+				}
+				if (!entry.press(event) || this.springTarget() !== void 0) return;
+				if (this.doublePress === "reset") this.#reset();
+				else entry.open();
+			},
+			move: (drag, event) => {
+				this.#dragTo(drag, event);
+			},
+			release: (drag) => {
+				this.#releaseDrag(drag);
+			},
+			toggle: (isDragging) => {
+				this.toggleState("dragging", isDragging);
 			}
-			const fromValue = this.#value;
-			const axis = grab(event);
-			if (!axis) return;
-			const drag = {
-				...axis,
-				fromValue,
-				isOutside: false,
-				isRevealed: false,
-				pointerId: event.pointerId,
-				revealTimer: void 0,
-				state: this.#startDrag(control, axis, event)
-			};
-			drag.revealTimer = setTimeout(() => {
-				this.#reveal(drag);
-			}, 250);
-			this.#drag = drag;
-			control.setPointerCapture(event.pointerId);
-			this.toggleState("dragging", true);
-		}, { signal });
-		control.addEventListener("pointermove", (event) => {
-			const drag = this.#drag;
-			if (event.pointerId === drag?.pointerId) this.#dragTo(drag, event);
-		}, { signal });
-		const endDrag = (event) => {
-			if (event.pointerId === this.#drag?.pointerId) this.#endDrag();
-		};
-		control.addEventListener("pointercancel", (event) => {
-			const drag = this.#drag;
-			if (event.pointerId === drag?.pointerId && drag.isKeptOnCancel !== true) this.input(drag.fromValue);
-			endDrag(event);
+		}, signal);
+		control.addEventListener("pointercancel", () => {
 			entry.forgetPress();
 		}, { signal });
-		control.addEventListener("lostpointercapture", endDrag, { signal });
-		control.addEventListener("pointerup", (event) => {
-			const drag = this.#drag;
-			if (event.pointerId !== drag?.pointerId) return;
-			this.#endDrag();
-			const tap = drag.state.isEngaged ? void 0 : this.tapTarget();
-			if (tap !== void 0) {
-				entry.forgetPress();
-				this.#commit(tap);
-				return;
-			}
-			if (!entry.press(event) || this.springTarget() !== void 0) return;
-			if (this.doublePress === "reset") this.#reset();
-			else entry.open();
-		}, { signal });
 		this.#bindKeys(control, entry, signal);
 		signal.addEventListener("abort", () => {
-			this.#endDrag();
 			this.#endKeyScrub();
 			this.#concealKeyReveal();
 		}, { once: true });
 	}
-	bindScale(control, marks, signal) {
-		this.#scaleMarks = marks;
-		this.mirrorChildren({
-			control,
-			copy: scaleMark,
-			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]"),
-			place: (copies) => {
-				placeChildren(marks, copies);
-				this.#renderScale();
-			}
-		}, signal);
-	}
 	controlOrientation() {}
 	controlRole() {
 		return "slider";
 	}
 	heldFrom() {
-		return this.#drag?.fromValue ?? this.#keyScrub?.fromValue;
+		return this.#dragging()?.fromValue ?? this.#keyScrub?.fromValue;
 	}
 	heldWrite(_next) {}
 	holdChanged() {}
-	hoverReadout(value) {
-		this.#claim.hover(value);
-		this.#renderReadout();
-		this.#watchEscape(value !== void 0);
-	}
 	input(next) {
 		const previous = this.#value;
 		this.#write(this.#limit ? clamp(next, ...this.#limit) : next);
@@ -358,6 +318,9 @@ var SonicValueElement = class extends SonicFormElement {
 		}));
 		return true;
 	}
+	isEditing() {
+		return this.#entry?.isOpen === true;
+	}
 	isRevealed() {
 		return this.#claim.isRevealed;
 	}
@@ -365,8 +328,9 @@ var SonicValueElement = class extends SonicFormElement {
 		return false;
 	}
 	mapping() {
+		if (this.#mapping) return this.#mapping;
 		const { detent, midpoint } = this;
-		return valueMapping({
+		this.#mapping = valueMapping({
 			...detent === void 0 ? {} : { detent },
 			...this.#positions ? { positions: this.#positions } : {},
 			max: this.max,
@@ -377,24 +341,33 @@ var SonicValueElement = class extends SonicFormElement {
 			step: this.step,
 			taper: this.taper
 		});
+		return this.#mapping;
 	}
 	originValue() {
 		return this.origin ?? this.mapping().bounds[0];
 	}
+	previewValue() {}
 	proportionsChanged() {}
 	readModulationValue() {
 		return this.#modulationValue;
 	}
 	readoutValue() {
-		return this.#claim.shown(this.#value, this.readout).value ?? this.#value;
+		return this.#shown().value ?? this.#value;
 	}
 	render() {
-		this.draw();
-		this.#renderScale();
-		this.toggleState("at-origin", !this.isWrapping() && this.#value === this.mapping().snap(this.originValue()));
-		this.#renderAria(this.focusTarget(), this.controlOrientation());
+		if (this.isBound()) this.#renderControl();
 		for (const listener of this.#watchers) listener();
 	}
+	renderReadout() {
+		const readout = this.#readout;
+		if (!readout) return;
+		const { isOpen, value } = this.#shown();
+		readout.bubble.show({
+			anchor: readout.anchor,
+			isOpen,
+			text: value === void 0 ? void 0 : this.#textFor(value)
+		});
+	}
 	restoreState(state) {
 		this.value = Number(state);
 	}
@@ -407,9 +380,10 @@ var SonicValueElement = class extends SonicFormElement {
 		return Math.max(1, readPxProperty(getComputedStyle(control), property, fallbackTravelPx));
 	}
 	writeModulationValue(control, prefix, next) {
-		if (next !== void 0 && !Number.isFinite(next)) return;
-		this.#modulationValue = next;
-		this.#writeModulationProportion(control, prefix);
+		const value = next === void 0 || next === null ? void 0 : toNumber(next);
+		if (value !== void 0 && !Number.isFinite(value)) return;
+		this.#modulationValue = value;
+		if (this.isBound()) this.#writeModulationProportion(control, prefix);
 	}
 	writeProportions(control, prefix, modulation) {
 		const { style } = control;
@@ -439,7 +413,6 @@ var SonicValueElement = class extends SonicFormElement {
 			},
 			text: () => this.#parseValue ? this.valueText : String(this.#value),
 			toggle: (isOpen) => {
-				this.#claim.edit(isOpen);
 				if (isOpen) this.forwardNaming(input, true);
 				this.toggleState("editing", isOpen);
 				this.render();
@@ -469,7 +442,7 @@ var SonicValueElement = class extends SonicFormElement {
 		control.addEventListener("keyup", (event) => {
 			const isMeta = event.key === "Meta";
 			if (isMeta || event.key === this.#keyScrub?.key) this.#endKeyScrub();
-			if (isMeta && this.#drag) return;
+			if (isMeta && this.#dragging()) return;
 			if (isMeta || this.mapping().keyTarget(event.key, this.#value) !== void 0) this.#springBack();
 		}, { signal });
 		control.addEventListener("blur", () => {
@@ -478,10 +451,6 @@ var SonicValueElement = class extends SonicFormElement {
 			this.#springBack();
 		}, { signal });
 	}
-	#canPress(event, entry) {
-		if (event.button !== 0 || isMenuPress(event) || this.isDisabled() || entry.isOpen) return false;
-		return !this.#drag || this.#drag.pointerId === event.pointerId;
-	}
 	#commit(next, direction = 0) {
 		const landed = Number.isFinite(next) ? this.#land?.(next, direction) ?? next : next;
 		if (this.input(landed)) this.dispatchEvent(new Event("change", { bubbles: true }));
@@ -489,6 +458,9 @@ var SonicValueElement = class extends SonicFormElement {
 	#concealKeyReveal() {
 		if (this.#claim.conceal("keys")) this.#renderHold();
 	}
+	#dragging() {
+		return this.#pointerDrag?.current();
+	}
 	#dragTo(drag, event) {
 		const isOutside = drag.outside?.(event) === true;
 		const wasEngaged = drag.state.isEngaged;
@@ -506,16 +478,10 @@ var SonicValueElement = class extends SonicFormElement {
 		drag.isOutside = isOutside;
 		this.#renderDragReveal(drag);
 	}
-	#endDrag() {
-		const drag = this.#drag;
-		if (!drag) return;
-		clearTimeout(drag.revealTimer);
-		this.#drag = void 0;
-		this.toggleState("dragging", false);
-		this.#claim.conceal("drag");
-		this.#renderHold();
-		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
-		this.#springBack();
+	#endHolds() {
+		this.#entry?.close(false);
+		this.#pointerDrag?.end();
+		this.#endKeyScrub();
 	}
 	#endKeyScrub() {
 		const scrub = this.#keyScrub;
@@ -525,7 +491,7 @@ var SonicValueElement = class extends SonicFormElement {
 		if (this.#value !== scrub.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
 	#isHeld() {
-		return this.#drag !== void 0 || this.#keyScrub !== void 0;
+		return this.#dragging() !== void 0 || this.#keyScrub !== void 0;
 	}
 	#keyTarget(key) {
 		if (resetKeys.has(key)) return this.default;
@@ -539,33 +505,42 @@ var SonicValueElement = class extends SonicFormElement {
 		this.#endKeyScrub();
 		this.#commit(next, next > this.#value ? 1 : -1);
 	}
+	#releaseDrag(drag) {
+		clearTimeout(drag.revealTimer);
+		this.#claim.conceal("drag");
+		this.#renderHold();
+		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
+		this.#springBack();
+	}
 	#renderAria(control, orientation) {
 		this.writeFormValue(String(this.#value), String(this.#value));
 		if (this.#entry?.isOpen) {
 			for (const name of roleAttributes) control.removeAttribute(name);
 			this.forwardNaming(control, false);
-			this.#renderReadout();
+			this.renderReadout();
 			return;
 		}
 		const [low, high] = this.mapping().bounds;
-		control.setAttribute("role", this.controlRole());
-		control.setAttribute("aria-valuemin", String(low));
-		control.setAttribute("aria-valuemax", String(high));
-		control.setAttribute("aria-valuenow", String(this.#value));
-		if (orientation) control.setAttribute("aria-orientation", orientation);
+		writeAttribute(control, "role", this.controlRole());
+		writeAttribute(control, "aria-valuemin", String(low));
+		writeAttribute(control, "aria-valuemax", String(high));
+		writeAttribute(control, "aria-valuenow", String(this.#value));
+		if (orientation) writeAttribute(control, "aria-orientation", orientation);
 		writeAttribute(control, "aria-valuetext", (this.#formatSpokenValue ?? this.#formatValue)?.(this.#value));
 		this.forwardNaming(control, true);
 		this.#renderDisabled(control);
-		this.#renderReadout();
+		this.renderReadout();
+	}
+	#renderControl() {
+		this.draw();
+		this.toggleState("at-origin", !this.isWrapping() && this.#value === this.mapping().snap(this.originValue()));
+		this.#renderAria(this.focusTarget(), this.controlOrientation());
 	}
 	#renderDisabled(control) {
-		if (this.isDisabled()) {
-			control.setAttribute("aria-disabled", "true");
-			control.removeAttribute("tabindex");
-			return;
-		}
-		control.removeAttribute("aria-disabled");
-		control.setAttribute("tabindex", "0");
+		const isDisabled = this.isDisabled();
+		writeAttribute(control, "aria-disabled", isDisabled ? "true" : void 0);
+		const stop = this.getAttribute("tabindex") === "-1" ? "-1" : "0";
+		writeAttribute(control, "tabindex", isDisabled ? void 0 : stop);
 	}
 	#renderDragReveal(drag) {
 		if (drag.isRevealed && !drag.isOutside) this.#claim.reveal("drag");
@@ -573,33 +548,14 @@ var SonicValueElement = class extends SonicFormElement {
 		this.#renderHold();
 	}
 	#renderHold() {
-		this.#renderReadout();
+		this.renderReadout();
 		this.holdChanged();
 	}
-	#renderReadout() {
-		const readout = this.#readout;
-		if (!readout) return;
-		const { isOpen, value } = this.#claim.shown(this.#value, this.readout);
-		readout.bubble.show({
-			anchor: readout.anchor,
-			isOpen,
-			text: value === void 0 ? void 0 : this.#textFor(value)
-		});
-	}
-	#renderScale() {
-		const marks = this.#scaleMarks?.children ?? [];
-		const mapping = this.mapping();
-		for (const mark of marks) {
-			if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) continue;
-			const at = String(mapping.proportionOf(scaleValue(mark)));
-			if (mark.style.getPropertyValue("--_sonic-scale-at") !== at) mark.style.setProperty("--_sonic-scale-at", at);
-		}
-	}
 	#reset() {
 		this.#commit(this.default ?? NaN);
 	}
 	#reveal(drag) {
-		if (drag.isRevealed || this.#drag !== drag) return;
+		if (drag.isRevealed || this.#dragging() !== drag) return;
 		drag.isRevealed = true;
 		this.#renderDragReveal(drag);
 	}
@@ -613,6 +569,18 @@ var SonicValueElement = class extends SonicFormElement {
 		}
 		this.input(next);
 	}
+	#shown() {
+		if (this.isEditing()) return {
+			isOpen: true,
+			value: void 0
+		};
+		const isRevealed = this.#claim.isRevealed;
+		const preview = isRevealed ? void 0 : this.previewValue();
+		return {
+			isOpen: (isRevealed || preview !== void 0) && this.readout,
+			value: preview ?? this.#value
+		};
+	}
 	#springBack() {
 		const target = this.springTarget();
 		if (target === void 0) return;
@@ -642,19 +610,6 @@ var SonicValueElement = class extends SonicFormElement {
 	#textFor(value) {
 		return this.#formatValue?.(value) ?? String(value);
 	}
-	#watchEscape(isHovered) {
-		if (!isHovered) {
-			this.#escapeWatch?.abort();
-			this.#escapeWatch = void 0;
-			return;
-		}
-		if (this.#escapeWatch) return;
-		const watch = new AbortController();
-		this.#escapeWatch = watch;
-		this.ownerDocument.addEventListener("keydown", (event) => {
-			if (event.key === "Escape" && this.#claim.dismiss()) this.#renderHold();
-		}, { signal: watch.signal });
-	}
 	#withinLimit(mapping, state) {
 		const limit = this.#limit;
 		if (!limit || mapping.isWrapping) return state;
@@ -666,8 +621,8 @@ var SonicValueElement = class extends SonicFormElement {
 	}
 	#write(next) {
 		if (!Number.isFinite(next)) return;
-		this.#isDirty = true;
 		const clamped = this.mapping().snap(next);
+		this.#asked = clamped;
 		if (clamped === this.#value) return;
 		this.#value = clamped;
 		this.render();

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

@@ -8,7 +8,7 @@ var SonicWaveElement = class extends SonicValueElement {
 	}
 	set markers(list) {
 		this.#markers = [...list ?? []].filter((marker) => Number.isFinite(marker.start)).map((marker) => ({ ...marker })).toSorted((first, second) => first.start - second.start);
-		this.renderMarkers();
+		if (this.isBound()) this.renderMarkers();
 	}
 	#heldAt;
 	#markers = [];
@@ -22,7 +22,7 @@ var SonicWaveElement = class extends SonicValueElement {
 	}
 	connect(signal) {
 		const control = this.control;
-		this.appendOnce(control);
+		this.keepControl(control, signal);
 		this.renderEmpty();
 		this.#surface = bindSurface({
 			canvas: this.canvas,
@@ -50,6 +50,9 @@ var SonicWaveElement = class extends SonicValueElement {
 		if (this.heldFrom() === void 0) this.#heldAt = void 0;
 		this.render();
 	}
+	markerList() {
+		return this.#markers;
+	}
 	markerProportions() {
 		const mapping = this.mapping();
 		return this.#markers.map(({ end, start }) => {

package/dist/default/elements/waveform.js

@@ -3,6 +3,7 @@ import { requireChild, template } from "../lib/render.js";
 import { 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 { createTrackingClock } from "../lib/tracking-clock.js";
 import { waveformBuckets } from "../lib/waveform-buckets.js";
@@ -172,6 +173,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	#drawn;
 	#ghost = requireChild(this.control, ".sonic-waveform-ghost", HTMLDivElement);
 	#grabbed;
+	#kindColours = /* @__PURE__ */ new Map();
 	#paintedKey = "";
 	#peaks;
 	#pending = [];
@@ -180,6 +182,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	#requestPeaks;
 	#rider = createLabelRider(this.control, {
 		className: "sonic-waveform-label",
+		colourProperty: "--_sonic-waveform-marker",
 		insetProperty: "--_sonic-waveform-label-inset"
 	});
 	connectedCallback() {
@@ -199,7 +202,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	isEmpty() {
 		return !this.#peaks || this.#peaks.samples.length === 0;
 	}
-	paint(context, { frameMs, isDirty, look, size }) {
+	paint(context, { frameMs, isDirty, isRebuilt, look, size }) {
 		const held = this.#held();
 		const timeline = frameTimeline({
 			clockSeconds: this.#clock.read(frameMs, {
@@ -235,19 +238,20 @@ var SonicWaveform = class extends SonicWaveElement {
 			this.#paintScene(context, {
 				...view,
 				colours: look.colours
-			});
+			}, isRebuilt);
 			if (timeline.wanted) this.#requestPeaks?.(...timeline.wanted);
 		}
 		if (timeline.isMoving) this.surface()?.requestFrame();
 	}
 	renderMarkers() {
 		const bounds = this.mapping().bounds;
-		this.#rider.measure(this.markers.flatMap(({ dimmed, label, start }) => label === void 0 || label === "" ? [] : [{
+		this.#rider.measure(this.markers.flatMap(({ dimmed, kind, label, start }) => label === void 0 || label === "" ? [] : [{
 			isDimmed: dimmed === true,
+			...kind === void 0 ? {} : { kind },
 			start: clamp(start, ...bounds),
 			text: label
 		}]));
-		this.surface()?.invalidate();
+		this.surface()?.rebuild();
 	}
 	#grab() {
 		const drawn = this.#drawn ?? {
@@ -273,10 +277,21 @@ var SonicWaveform = class extends SonicWaveElement {
 			seconds: this.value === from ? grabbed.seconds : this.value
 		};
 	}
-	#paintScene(context, scene) {
+	#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 { grid, marker } = scene.colours;
+		const { 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)];
@@ -289,12 +304,20 @@ var SonicWaveform = class extends SonicWaveElement {
 		if (this.#peaks) paintWave(context, scene, this.#peaks);
 		context.fillStyle = grid;
 		for (const edge of [opening, closing]) context.fillRect(edge - line / 2, 0, line, height);
-		context.fillStyle = marker;
-		for (const marker of this.markers) {
-			context.globalAlpha = marker.dimmed === true ? .5 : 1;
-			context.fillRect(x(marker.start) - line / 2, 0, line, height);
-		}
-		context.globalAlpha = 1;
+		this.#paintMarkers(context, scene, isRebuilt);
+	}
+	#readKindColours() {
+		const kinds = [...new Set(this.markers.map(({ kind }) => kind).filter((kind) => isKind(kind)))];
+		const probes = kinds.map((kind) => {
+			const probe = document.createElement("div");
+			probe.className = "sonic-waveform-label";
+			writeKind(probe, kind, "--_sonic-waveform-marker");
+			return probe;
+		});
+		this.control.append(...probes);
+		const read = probes.map((probe) => getComputedStyle(probe).color);
+		for (const probe of probes) probe.remove();
+		return new Map(kinds.map((kind, index) => [kind, read[index] ?? ""]));
 	}
 	#sourceSeconds() {
 		return this.#readTime?.() ?? this.playback();