@xsynaptic/sonic-ui 0.5.0 → 0.6.0

package/dist/default/elements/switch.js

@@ -2,6 +2,7 @@ import { clamp } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { bindHold } from "../lib/hold.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 import { SonicRadioGroupElement, isUnder, optionValue } from "./radio-group.js";
 
 //#region src/elements/switch.ts
@@ -60,7 +61,6 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 	group = renderSwitch();
 	#bare = renderBare();
 	#bat = requireChild(this.group, ".sonic-switch-bat", HTMLSpanElement);
-	#batPress;
 	#checked = false;
 	#holding;
 	#isClickSwallowed = false;
@@ -92,7 +92,7 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 		option.focus();
 	}
 	claimPress(option, event) {
-		if (this.#grabBat(event)) return true;
+		if (this.#isOnBat(event)) return true;
 		if (!this.#isMomentary(option)) return false;
 		this.group.setPointerCapture(event.pointerId);
 		this.#hold(option, event.pointerId);
@@ -108,9 +108,8 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 			this.#isClickSwallowed = false;
 			if (!isSwallowed) this.#setChecked(!this.checked);
 		}, { signal });
-		this.#bare.addEventListener("pointerdown", (event) => {
+		this.#bare.addEventListener("pointerdown", () => {
 			this.#isClickSwallowed = false;
-			if (event.button === 0 && !this.isDisabled()) this.#grabBat(event);
 		}, { signal });
 		this.#bindBat(group, signal);
 		this.#holding = bindHold(group, {
@@ -138,12 +137,13 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 		return option;
 	}
 	render() {
+		if (!this.isBound()) return;
 		const group = this.group;
 		const options = this.options();
 		if (options.length > 0) {
 			this.#bare.remove();
 			writeAttribute(group, "role", "radiogroup");
-			group.dataset.sonicPositionCount = String(options.length);
+			writeAttribute(group, "data-sonic-position-count", String(options.length));
 			super.render();
 			this.#renderThrow(this.#checkedIndex(options));
 			return;
@@ -153,8 +153,8 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 		writeAttribute(group, "role", void 0);
 		delete group.dataset.sonicPositionCount;
 		if (bare.parentElement !== group) group.append(bare);
-		bare.disabled = this.isDisabled();
-		bare.setAttribute("aria-checked", String(isChecked));
+		writeAttribute(bare, "disabled", this.isDisabled() ? "" : void 0);
+		writeAttribute(bare, "aria-checked", String(isChecked));
 		this.forwardNaming(group, false);
 		this.forwardNaming(bare, true);
 		const onSide = this.orientation === "horizontal" ? 1 : -1;
@@ -172,41 +172,32 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 		return this.orientation === "horizontal" ? event.clientX : event.clientY;
 	}
 	#bindBat(group, signal) {
-		const drop = (event) => {
-			if (event.pointerId === this.#batPress?.pointerId) this.#batPress = void 0;
-		};
-		group.addEventListener("pointermove", (event) => {
-			const press = this.#batPress;
-			if (press?.pointerId !== event.pointerId || this.isDisabled()) return;
-			const delta = this.#along(event) - press.last;
-			if (Math.abs(delta) < this.#bat.getBoundingClientRect().width / 4) return;
-			press.hasMoved = true;
-			press.last = this.#along(event);
-			this.#throwBy(Math.sign(delta), event.pointerId);
-		}, { signal });
-		group.addEventListener("pointerup", (event) => {
-			const press = this.#batPress;
-			if (press?.pointerId !== event.pointerId) return;
-			this.#batPress = void 0;
-			if (!press.hasMoved && !this.isDisabled()) this.#pressBat(event);
-			this.#isClickSwallowed = true;
-		}, { signal });
-		group.addEventListener("pointercancel", drop, { signal });
-		group.addEventListener("lostpointercapture", drop, { signal });
+		bindDrag(group, {
+			grab: (event) => {
+				if (!(event.target === this.#bare || this.optionOf(event.target) !== void 0) || this.isDisabled() || !this.#isOnBat(event)) return;
+				return {
+					hasMoved: false,
+					last: this.#along(event),
+					width: this.#bat.getBoundingClientRect().width
+				};
+			},
+			lift: (press, event) => {
+				if (!press.hasMoved && !this.isDisabled()) this.#pressBat(event);
+				this.#isClickSwallowed = true;
+			},
+			move: (press, event) => {
+				if (this.isDisabled()) return;
+				const delta = this.#along(event) - press.last;
+				if (Math.abs(delta) < press.width / 4) return;
+				press.hasMoved = true;
+				press.last = this.#along(event);
+				this.#throwBy(Math.sign(delta), event.pointerId);
+			}
+		}, signal);
 	}
 	#checkedIndex(options) {
 		return options.findIndex((option) => optionValue(option) === this.value);
 	}
-	#grabBat(event) {
-		if (!isUnder(this.#bat, event.clientX, event.clientY)) return false;
-		this.group.setPointerCapture(event.pointerId);
-		this.#batPress = {
-			hasMoved: false,
-			last: this.#along(event),
-			pointerId: event.pointerId
-		};
-		return true;
-	}
 	#hasSprungFrom(option) {
 		if (!option || !this.#isMomentary(option)) return false;
 		this.#holding?.release();
@@ -222,6 +213,9 @@ var SonicSwitch = class extends SonicRadioGroupElement {
 		const options = this.options();
 		return (option === options[0] || option === options.at(-1)) && options.length > 1 && option.querySelector("[data-sonic-value]")?.hasAttribute("data-sonic-momentary") === true;
 	}
+	#isOnBat(event) {
+		return isUnder(this.#bat, event.clientX, event.clientY);
+	}
 	#pressBat(event) {
 		const options = this.options();
 		if (options.length === 0) {

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

@@ -1,15 +1,16 @@
-import { clamp } from "../lib/math.js";
+import { clamp, toNumber } from "../lib/math.js";
 import { placeChildren, requireChild } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
+import { copyNode } from "../lib/copy-node.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";
@@ -203,53 +204,57 @@ 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);
 	}
+	#asked;
 	#buffered = [];
 	#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;
-		}
-		if (name === "disabled" && this.isDisabled()) {
-			this.#entry?.close(false);
-			this.#endDrag();
-			this.#endKeyScrub();
+			this.#asked = void 0;
 		}
-		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() {
@@ -258,66 +263,61 @@ var SonicValueElement = class extends SonicFormElement {
 	}
 	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 });
@@ -328,6 +328,7 @@ var SonicValueElement = class extends SonicFormElement {
 			control,
 			copy: scaleMark,
 			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]"),
+			isPassed: (child) => child instanceof Element && child.matches(".sonic-led"),
 			place: (copies) => {
 				placeChildren(marks, copies);
 				this.#renderScale();
@@ -339,7 +340,7 @@ var SonicValueElement = class extends SonicFormElement {
 		return "slider";
 	}
 	heldFrom() {
-		return this.#drag?.fromValue ?? this.#keyScrub?.fromValue;
+		return this.#dragging()?.fromValue ?? this.#keyScrub?.fromValue;
 	}
 	heldWrite(_next) {}
 	holdChanged() {}
@@ -365,8 +366,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,6 +379,7 @@ var SonicValueElement = class extends SonicFormElement {
 			step: this.step,
 			taper: this.taper
 		});
+		return this.#mapping;
 	}
 	originValue() {
 		return this.origin ?? this.mapping().bounds[0];
@@ -389,10 +392,7 @@ var SonicValueElement = class extends SonicFormElement {
 		return this.#claim.shown(this.#value, this.readout).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();
 	}
 	restoreState(state) {
@@ -407,9 +407,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;
@@ -469,7 +470,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 +479,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 +486,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 +506,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 +519,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,6 +533,13 @@ 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) {
@@ -548,24 +549,26 @@ var SonicValueElement = class extends SonicFormElement {
 			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();
 	}
+	#renderControl() {
+		this.draw();
+		this.#renderScale();
+		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);
+		writeAttribute(control, "tabindex", isDisabled ? void 0 : "0");
 	}
 	#renderDragReveal(drag) {
 		if (drag.isRevealed && !drag.isOutside) this.#claim.reveal("drag");
@@ -599,7 +602,7 @@ var SonicValueElement = class extends SonicFormElement {
 		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);
 	}
@@ -666,8 +669,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();