@xsynaptic/sonic-ui 0.17.0 → 0.18.0

package/dist/default/elements/toggle.js

@@ -1,7 +1,8 @@
 import { placeChildren, requireChild, template } from "../lib/render.js";
 import { bindDrag } from "../lib/pointer-drag.js";
 import { dragThresholdPx } from "../lib/drag-step.js";
-import { isUnder, optionValue } from "./radio-group.js";
+import { enabledEnds } from "../lib/positions.js";
+import { isUnder } from "./radio-group.js";
 import { SonicPositionGroupElement } from "./position-group.js";
 import { positionAt, travelFrom } from "../lib/toggle-travel.js";
 
@@ -52,7 +53,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 	}
 	render() {
 		if (!this.isBound()) return;
-		this.group.style.setProperty("--_sonic-toggle-count", String(this.#stopCount()));
+		this.group.style.setProperty("--_sonic-toggle-count", String(this.positions().length));
 		this.#placeCap(this.#draggedTo ?? this.#restingAt());
 		super.render();
 		for (const [index, option] of this.options().entries()) option.style.setProperty("--_sonic-toggle-index", String(index));
@@ -77,7 +78,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 				this.#slideTo(positionAt(drag.travel, pointer), event.pointerId);
 			},
 			release: (drag) => {
-				delete (drag.position ?? this.bare).dataset.sonicPressed;
+				delete drag.marked.dataset.sonicPressed;
 				this.#draggedTo = void 0;
 				this.toggleState("dragging", false);
 				this.render();
@@ -85,25 +86,21 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		}, signal);
 	}
 	#checkLegends() {}
-	#enabledEnds() {
-		if (this.isBare()) return [0, 1];
-		const options = this.options();
-		const isEnabled = (option) => !this.isOptionDisabled(option);
-		return [options.findIndex(isEnabled), options.findLastIndex(isEnabled)];
-	}
 	#fixedLegend() {
 		return [...this.children].find((child) => child !== this.group && !super.isMirrored(child));
 	}
 	#grab(event) {
-		const position = this.optionOf(event.target);
-		if (this.isDisabled() || !position && event.target !== this.bare) return void 0;
+		const position = this.pressedIndex(event.target);
+		if (this.isDisabled() || position < 0) return void 0;
 		const isOnCap = isUnder(this.#cap, event.clientX, event.clientY);
 		const travel = this.#travel(event, isOnCap);
-		if (!travel || this.#isBlocked(position, isOnCap)) return void 0;
-		(position ?? this.bare).toggleAttribute("data-sonic-pressed", true);
+		if (!travel || !isOnCap && this.isOptionDisabled(position)) return void 0;
+		const marked = this.options()[position] ?? this.bare;
+		marked.toggleAttribute("data-sonic-pressed", true);
 		return {
 			hasMoved: false,
 			isHolding: this.#holdFrom(position, event.pointerId),
+			marked,
 			position,
 			start: this.along(event),
 			thresholdPx: dragThresholdPx(event.pointerType),
@@ -111,57 +108,36 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		};
 	}
 	#holdFrom(position, pointerId) {
-		const target = position && this.pressTarget(position);
-		if (!target || !this.isMomentary(target) || this.isOptionDisabled(target)) return false;
+		const target = this.pressTarget(position);
+		if (!this.isMomentary(target) || this.isOptionDisabled(target)) return false;
 		this.hold(target, pointerId);
 		return true;
 	}
-	#isBlocked(position, isOnCap) {
-		return !isOnCap && position !== void 0 && this.isOptionDisabled(position);
-	}
-	#onAt() {
-		return this.orientation === "vertical" ? 0 : 1;
-	}
 	#placeCap(at) {
 		this.group.style.setProperty("--_sonic-toggle-at", String(at));
 	}
 	#press(position) {
-		if (!position) {
-			this.setChecked(!this.checked);
-			return;
-		}
 		const target = this.pressTarget(position);
 		if (this.isOptionDisabled(target)) return;
 		this.select(target);
-		this.#refocus(target);
-	}
-	#refocus(position) {
-		if (this.group.matches(":focus-within")) position.focus();
+		this.refocusAt(target);
 	}
 	#restingAt() {
-		if (this.isBare()) return this.checked ? this.#onAt() : 1 - this.#onAt();
-		return Math.max(0, this.checkedIndex(this.options()));
+		return Math.max(0, this.checkedIndex());
 	}
 	#slideTo(at, pointerId) {
-		const crossed = this.options()[Math.round(at)];
+		const crossed = Math.round(at);
 		this.#draggedTo = at;
 		this.#placeCap(at);
-		if (this.isBare()) {
-			this.setChecked(Math.round(at) === this.#onAt());
-			return;
-		}
-		if (!crossed || optionValue(crossed) === this.value) return;
+		if (this.isChecked(crossed)) return;
 		this.releaseHold();
-		if (this.isOptionDisabled(crossed) || optionValue(crossed) === this.value) return;
+		if (this.isOptionDisabled(crossed) || this.isChecked(crossed)) return;
 		if (this.isMomentary(crossed)) this.hold(crossed, pointerId);
 		else this.select(crossed);
-		this.#refocus(crossed);
-	}
-	#stopCount() {
-		return this.options().length || 2;
+		this.refocusAt(crossed);
 	}
 	#travel(event, isOnCap) {
-		const [first, last] = this.#enabledEnds();
+		const [first, last] = enabledEnds(this.positions());
 		if (first < 0) return void 0;
 		const box = this.#well.getBoundingClientRect();
 		const [start, length, thickness] = this.orientation === "vertical" ? [
@@ -175,7 +151,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		];
 		return travelFrom({
 			at: this.#restingAt(),
-			count: this.#stopCount(),
+			count: this.positions().length,
 			first,
 			isOnCap,
 			last,

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

@@ -1,13 +1,12 @@
-import { clamp, toNumber, trimFloat } from "../lib/math.js";
+import { toNumber, trimFloat } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { Readout } from "./readout.js";
 import { readPxProperty } from "../lib/read-px-property.js";
 import { parseNumberList } from "../lib/number-list.js";
-import { valueMapping } from "../lib/value-mapping.js";
 import { ValueGestures } from "./value-gestures.js";
-import { moveTo, resnap, setAsked } from "../lib/asked-value.js";
 import { bindHoverPreview } from "../lib/hover-preview.js";
+import { createValueModel } from "../lib/value-model.js";
 
 //#region src/elements/value-element.ts
 const fallbackTravelPx = 160;
@@ -56,20 +55,7 @@ var SonicValueElement = class extends SonicFormElement {
 			input: (next, isMover = false) => (isMover || !element.#isHeld()) && element.input(next),
 			isDisabled: () => element.isDisabled(),
 			isHeld: () => element.#isHeld(),
-			land: (resolve) => {
-				element.#land = resolve;
-			},
-			limit: (bounds) => {
-				element.#limit = bounds;
-			},
-			mapping: () => element.mapping(),
-			value: () => element.#cell.value,
-			watch: (listener) => {
-				element.#watchers.add(listener);
-				return () => {
-					element.#watchers.delete(listener);
-				};
-			}
+			model: element.#model
 		});
 	}
 	get cancelling() {
@@ -177,6 +163,7 @@ var SonicValueElement = class extends SonicFormElement {
 	get pointerType() {
 		return this.#gestures?.pointerType();
 	}
+	/** The values a stepped control stops at, spaced evenly along the travel whatever their spacing */
 	get positions() {
 		return parseNumberList(this.getAttribute("positions"));
 	}
@@ -192,6 +179,7 @@ var SonicValueElement = class extends SonicFormElement {
 	get revealed() {
 		return this.hasState("revealed");
 	}
+	/** Rounds the value assistive technology hears, in value units; the value itself is untouched */
 	get spokenStep() {
 		return this.optionalNumberAttribute("spoken-step");
 	}
@@ -211,7 +199,7 @@ var SonicValueElement = class extends SonicFormElement {
 		this.reflect("taper", curve);
 	}
 	get value() {
-		return this.#cell.value;
+		return this.#model.value;
 	}
 	set value(next) {
 		if (next === void 0 || next === null) {
@@ -220,18 +208,14 @@ var SonicValueElement = class extends SonicFormElement {
 		}
 		const value = toNumber(next);
 		if (this.#isHeld()) {
-			this.heldWrite(value);
+			this.#writeHeld(value);
 			return;
 		}
-		if (setAsked(this.#cell, this.mapping(), value)) this.render();
+		if (this.#model.write(value)) this.render();
 	}
 	get valueText() {
-		return this.#textFor(this.#cell.value);
+		return this.#textFor(this.#model.value);
 	}
-	#cell = {
-		asked: void 0,
-		value: 0
-	};
 	#formatEntry;
 	#formatSpokenValue;
 	#formatValue;
@@ -239,25 +223,16 @@ var SonicValueElement = class extends SonicFormElement {
 	#heldAt;
 	#hover;
 	#instance = String(instanceCount += 1);
-	#land;
-	#limit;
-	#mapping;
+	#model = createValueModel(() => this.#spec());
 	#parseValue;
-	#positions;
 	#readout;
-	#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.#cell.asked = void 0;
+		if (name === "value" && this.#isHeld()) {
+			this.#writeHeld(this.numberAttribute("value", this.min));
+			return;
 		}
 		if (name === "disabled" && this.isDisabled()) this.#gestures?.end();
-		resnap(this.#cell, this.mapping(), this.numberAttribute("value", this.min));
+		this.#model.respec(this.numberAttribute("value", this.min), { forgetAsk: name === "value" });
 		if (proportionAttributes.has(name) && this.isBound()) this.proportionsChanged();
 		this.render();
 	}
@@ -287,26 +262,23 @@ var SonicValueElement = class extends SonicFormElement {
 				this.forwardNaming(target, isNamed);
 			},
 			hasEntry: () => this.entry !== "none",
-			holdChanged: () => {
-				this.#renderHold();
-			},
 			input: (next) => this.input(next),
 			isDisabled: () => this.isDisabled(),
 			keyStep: () => this.keyStep,
-			land: (target, direction) => this.#land?.(target, direction) ?? target,
-			limit: () => this.#limit,
-			mapping: () => this.mapping(),
+			model: this.#model,
 			parse: (text) => (this.#parseValue ?? Number.parseFloat)(text),
 			render: () => {
 				this.render();
 			},
+			scrubChanged: () => {
+				this.#renderHold();
+			},
 			scrubsKeyRepeat: () => this.scrubsKeyRepeat(),
 			springTarget: () => this.springTarget(),
 			tapTarget: () => this.tapTarget(),
 			toggleState: (state, isOn) => {
 				this.toggleState(state, isOn);
-			},
-			value: () => this.#cell.value
+			}
 		}, control);
 		this.#gestures.bind(signal, grab);
 		control.addEventListener("pointerup", (event) => {
@@ -322,7 +294,7 @@ var SonicValueElement = class extends SonicFormElement {
 			dismiss: () => {
 				this.render();
 			},
-			isTaken: () => this.#isEditing() || this.isRevealed(),
+			isTaken: () => this.#isEditing() || this.#isRevealed(),
 			show: () => {
 				if (!this.readout) return;
 				this.renderReadout();
@@ -335,60 +307,32 @@ var SonicValueElement = class extends SonicFormElement {
 	controlRole() {
 		return "slider";
 	}
-	heldFrom() {
-		return this.#gestures?.heldFrom();
-	}
-	heldWrite(next) {
-		this.#heldAt = next;
-	}
-	holdChanged() {}
 	input(next) {
-		const previous = this.#cell.value;
-		const target = this.#limit ? clamp(next, ...this.#limit) : next;
-		if (moveTo(this.#cell, this.mapping(), target)) this.render();
-		if (this.#cell.value === previous) return false;
+		const previous = this.#model.value;
+		if (this.#model.input(next)) this.render();
+		if (this.#model.value === previous) return false;
 		this.dispatchEvent(new Event("input", {
 			bubbles: true,
 			composed: true
 		}));
 		return true;
 	}
-	isRevealed() {
-		return this.#gestures?.isRevealed() === true;
-	}
 	isWrapping() {
 		return false;
 	}
 	mapping() {
-		if (this.#mapping) return this.#mapping;
-		const { detent, midpoint } = this;
-		this.#mapping = valueMapping({
-			...detent === void 0 ? {} : { detent },
-			...this.#positions ? { positions: this.#positions } : {},
-			max: this.max,
-			...midpoint === void 0 ? {} : { midpoint },
-			isNotched: this.notched,
-			isWrapping: this.isWrapping(),
-			min: this.min,
-			step: this.step,
-			taper: this.taper
-		});
-		return this.#mapping;
+		return this.#model.mapping();
 	}
 	originValue() {
 		return this.origin ?? this.mapping().bounds[0];
 	}
-	playback() {
-		const from = this.heldFrom();
-		return from === void 0 ? this.#cell.value : this.#heldAt ?? from;
-	}
 	proportionsChanged() {}
 	readoutValue() {
-		return this.#shown().value ?? this.#cell.value;
+		return this.#shown().value ?? this.#model.value;
 	}
 	render() {
 		if (this.isBound()) this.#renderControl();
-		for (const listener of this.#watchers) listener();
+		this.#model.notify();
 	}
 	renderReadout() {
 		const readout = this.#readout;
@@ -404,16 +348,25 @@ var SonicValueElement = class extends SonicFormElement {
 	restoreState(state) {
 		this.value = Number(state);
 	}
+	scrubChanged() {}
 	scrubsKeyRepeat() {
 		return false;
 	}
+	scrubState() {
+		const from = this.#gestures?.scrubFrom();
+		return {
+			from,
+			isRevealed: this.#isRevealed(),
+			played: from === void 0 ? this.#model.value : this.#heldAt ?? from
+		};
+	}
 	springTarget() {}
 	tapTarget() {}
 	travelPx(control, property) {
 		return Math.max(1, readPxProperty(getComputedStyle(control), property, fallbackTravelPx));
 	}
 	#entryText() {
-		const value = this.#cell.value;
+		const value = this.#model.value;
 		if (this.#formatEntry) return this.#formatEntry(value);
 		if (!this.#parseValue) return String(value);
 		return this.valueText;
@@ -424,8 +377,11 @@ var SonicValueElement = class extends SonicFormElement {
 	#isHeld() {
 		return this.#gestures?.isHeld() === true;
 	}
+	#isRevealed() {
+		return this.#gestures?.isRevealed() === true;
+	}
 	#renderAria(control, orientation) {
-		this.writeFormValue(String(this.#cell.value), String(this.#cell.value));
+		this.writeFormValue(String(this.#model.value), String(this.#model.value));
 		if (this.#isEditing()) {
 			for (const name of roleAttributes) control.removeAttribute(name);
 			this.forwardNaming(control, false);
@@ -444,9 +400,9 @@ var SonicValueElement = class extends SonicFormElement {
 		this.renderReadout();
 	}
 	#renderControl() {
-		if (this.#isEditing() || this.isRevealed()) this.#hover?.clear();
+		if (this.#isEditing() || this.#isRevealed()) this.#hover?.clear();
 		this.draw();
-		this.toggleState("at-origin", !this.isWrapping() && this.#cell.value === this.mapping().snap(this.originValue()));
+		this.toggleState("at-origin", !this.isWrapping() && this.#model.value === this.mapping().snap(this.originValue()));
 		this.#renderAria(this.focusTarget(), this.controlOrientation());
 	}
 	#renderDisabled(control) {
@@ -456,30 +412,48 @@ var SonicValueElement = class extends SonicFormElement {
 		writeAttribute(control, "tabindex", isDisabled ? void 0 : stop);
 	}
 	#renderHold() {
-		if (this.heldFrom() === void 0) this.#heldAt = void 0;
+		if (this.#gestures?.scrubFrom() === void 0) this.#heldAt = void 0;
 		this.#hover?.restore();
 		this.renderReadout();
-		this.holdChanged();
+		this.scrubChanged();
 	}
 	#shown() {
 		if (this.#isEditing()) return {
 			isOpen: true,
 			value: void 0
 		};
-		const isRevealed = this.isRevealed();
+		const isRevealed = this.#isRevealed();
 		const preview = isRevealed ? void 0 : this.#hover?.value();
 		return {
 			isOpen: (isRevealed || preview !== void 0) && this.readout,
-			value: preview ?? this.#cell.value
+			value: preview ?? this.#model.value
+		};
+	}
+	#spec() {
+		const { detent, midpoint, positions } = this;
+		return {
+			...detent === void 0 ? {} : { detent },
+			...positions ? { positions } : {},
+			max: this.max,
+			...midpoint === void 0 ? {} : { midpoint },
+			isNotched: this.notched,
+			isWrapping: this.isWrapping(),
+			min: this.min,
+			step: this.step,
+			taper: this.taper
 		};
 	}
 	#spokenNow() {
 		const step = this.spokenStep;
-		return step !== void 0 && step > 0 ? trimFloat(Math.round(this.#cell.value / step) * step) : this.#cell.value;
+		return step !== void 0 && step > 0 ? trimFloat(Math.round(this.#model.value / step) * step) : this.#model.value;
 	}
 	#textFor(value) {
 		return this.#formatValue?.(value) ?? String(value);
 	}
+	#writeHeld(next) {
+		this.#heldAt = next;
+		this.scrubChanged();
+	}
 };
 
 //#endregion

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,5 @@
 import { SonicValueElement } from "./value-element.js";
 import { bindSurface } from "../lib/canvas-surface.js";
-import { bindFill } from "../lib/fill-watch.js";
 
 //#region src/elements/wave-element.ts
 function markerKey(marker) {
@@ -34,10 +33,9 @@ var SonicWaveElement = class extends SonicValueElement {
 	#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 +51,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);
@@ -71,19 +73,11 @@ var SonicWaveElement = class extends SonicValueElement {
 			"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 +95,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;