@xsynaptic/sonic-ui 0.5.0 → 0.6.1

package/README.md

@@ -1,6 +1,6 @@
 # @xsynaptic/sonic-ui
 
-Native custom elements for audio interfaces. Each control renders in the light DOM, drawn in CSS, skinned with `--sonic-*` tokens (CSS custom properties). No framework, no runtime dependencies.
+Native custom elements for audio interfaces. Each control renders in the light DOM, skinned with `--sonic-*` tokens (CSS custom properties). No framework, no runtime dependencies.
 
 Early and unstable: any 0.x release may break the API.
 
@@ -23,4 +23,6 @@ import '@xsynaptic/sonic-ui/define';
 <sonic-dial aria-label="Cutoff" value="40"></sonic-dial>
 ```
 
+Under a hydrating framework, register the definitions once hydration is done (in React, from an effect); a control owns one child of its host and uses only the children it documents.
+
 Targets current Chrome and Edge, Safari 26 and Firefox 147. MIT licensed.

package/dist/default/dat.js

@@ -16,6 +16,7 @@ function readDatHeader(buffer) {
 	if (channels < 1) throw new Error("A .dat header names no channels");
 	const sampleRate = view.getInt32(8, true);
 	const samplesPerPixel = view.getInt32(12, true);
+	if (samplesPerPixel < 1) throw new Error("A .dat header names no samples per pixel");
 	return {
 		bits: (view.getUint32(4, true) & 1) === 1 ? 8 : 16,
 		channels,
@@ -34,15 +35,15 @@ function datByteRange(header, fromPair, toPair) {
 	const pairBytes = header.channels * 2 * header.bits / 8;
 	return [header.dataOffset + from * pairBytes, header.dataOffset + to * pairBytes - 1];
 }
-function readDatSamples(header, body) {
-	return header.bits === 8 ? new Int8Array(body) : new Int16Array(body, 0, Math.floor(body.byteLength / 2));
+function readDatSamples(header, body, byteOffset = 0) {
+	return header.bits === 8 ? new Int8Array(body, byteOffset) : new Int16Array(body, byteOffset, Math.floor((body.byteLength - byteOffset) / 2));
 }
-function readDatPeaks(header, body) {
+function readDatPeaks(header, body, byteOffset = 0) {
 	return {
 		channels: header.channels,
 		fullScale: header.bits === 8 ? 128 : 32768,
 		pairsPerSecond: header.pairsPerSecond,
-		samples: readDatSamples(header, body)
+		samples: readDatSamples(header, body, byteOffset)
 	};
 }
 

package/dist/default/define/button.js

@@ -1,5 +1,5 @@
-import { defineOnce } from "../elements/define-once.js";
 import { SonicButton } from "../elements/button.js";
+import { defineOnce } from "../elements/define-once.js";
 
 //#region src/define/button.ts
 defineOnce("sonic-button", SonicButton);

package/dist/default/define.js

@@ -1,12 +1,12 @@
+import "./define/button.js";
 import "./define/dial.js";
 import "./define/envelope.js";
-import "./define/button.js";
-import "./define/switch.js";
 import "./define/meter.js";
 import "./define/number.js";
 import "./define/segmented.js";
 import "./define/slider.js";
 import "./define/split.js";
+import "./define/switch.js";
 import "./define/waveform.js";
 import "./define/wavestrip.js";
 import "./define/xy.js";

package/dist/default/elements/button.js

@@ -1,8 +1,9 @@
-import { placeChildren, requireChild, template } 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 { bindHold } from "../lib/hold.js";
+import { placeChildren, requireChild, template } from "../lib/render.js";
+import { mirrorChildren } from "../lib/mirror-children.js";
 
 //#region src/elements/button.ts
 const renderButton = template(`
@@ -88,7 +89,7 @@ var SonicButton = class extends SonicFormElement {
 		const button = this.#button;
 		const cap = requireChild(button, ".sonic-button-cap", HTMLSpanElement);
 		this.upgradeProperties("armed", "busy", "defaultPressed", "momentary", "softDisabled", "latching", "pressed", "value");
-		this.mirrorChildren({
+		mirrorChildren(this, {
 			control: button,
 			copy: copyNode,
 			place: (copies) => {
@@ -113,12 +114,12 @@ var SonicButton = class extends SonicFormElement {
 		return this.#button;
 	}
 	render() {
+		if (!this.isBound()) return;
 		const button = this.#button;
-		button.disabled = this.isDisabled();
+		writeAttribute(button, "disabled", this.isDisabled() ? "" : void 0);
 		writeAttribute(button, "aria-disabled", this.#isSoftDisabled() ? "true" : void 0);
 		writeAttribute(button, "aria-busy", this.busy ? "true" : void 0);
-		button.removeAttribute("aria-pressed");
-		if (this.latching) button.setAttribute("aria-pressed", String(this.pressed));
+		writeAttribute(button, "aria-pressed", this.latching ? String(this.pressed) : void 0);
 		this.toggleState("pressed", this.pressed);
 		this.forwardNaming(button, true);
 		const submitted = this.latching && this.pressed ? this.value : null;

package/dist/default/elements/dial.js

@@ -1,5 +1,6 @@
 import { requireChild, template } from "../lib/render.js";
 import { SonicValueElement } from "./value-element.js";
+import { bindScale } from "./scale.js";
 
 //#region src/elements/dial.ts
 const renderDial = template(`
@@ -54,7 +55,10 @@ var SonicDial = class extends SonicValueElement {
 	}
 	connect(signal) {
 		const dial = this.#dial;
-		this.bindScale(dial, requireChild(dial, ".sonic-dial-scale", HTMLDivElement), signal);
+		bindScale(this, {
+			control: dial,
+			marks: requireChild(dial, ".sonic-dial-scale", HTMLDivElement)
+		}, signal);
 		this.render();
 		this.checkStyles(dial, "dial.css");
 		this.bindGestures(dial, signal, () => ({

package/dist/default/elements/envelope.js

@@ -1,13 +1,13 @@
-import { requireChild, template } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicElement } from "./sonic-element.js";
+import { requireChild, template } from "../lib/render.js";
 import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
 import { dragThresholdPx } from "../lib/drag-step.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 import { SonicValueElement, linkValue } from "./value-element.js";
 import { adsrPath, adsrShape, adsrStages, timeStages } from "../lib/adsr-shape.js";
 import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
-import { bindDrag } from "../lib/pointer-drag.js";
 
 //#region src/elements/envelope.ts
 const curveStages = [
@@ -31,10 +31,23 @@ function flip(point, isFlipped) {
 function isParent(node) {
 	return "querySelector" in node;
 }
+const emptyPath = {
+	fill: "",
+	floor: {
+		from: 0,
+		to: 0
+	},
+	stroke: ""
+};
+function stageParts(envelope, hook, stages) {
+	return new Map(stages.map((stage) => [stage, requireChild(envelope, `.${hook}[data-sonic-stage="${stage}"]`, HTMLDivElement)]));
+}
 const renderEnvelope = template(`
 		<div class="sonic-envelope" aria-hidden="true">
+			<div class="sonic-envelope-bracket"></div>
 			<svg class="sonic-envelope-graph" preserveAspectRatio="none" viewBox="0 0 1 1">
 				<path class="sonic-envelope-fill" />
+				<rect class="sonic-envelope-fill sonic-envelope-floor" y="1" />
 				<path class="sonic-envelope-line" />
 			</svg>
 			<div class="sonic-envelope-handle" data-sonic-stage="delay" hidden></div>
@@ -115,12 +128,18 @@ var SonicEnvelope = class extends SonicElement {
 		this.reflect("sustain", id);
 	}
 	#bindings = /* @__PURE__ */ new Map();
+	#envelope = renderEnvelope();
+	#bracket = requireChild(this.#envelope, ".sonic-envelope-bracket", HTMLDivElement);
 	#claim = new ReadoutClaim(() => {
 		this.#renderReadout();
 	});
-	#envelope = renderEnvelope();
+	#curveHandles = stageParts(this.#envelope, "sonic-envelope-curve", curveStages);
 	#fill = requireChild(this.#envelope, ".sonic-envelope-fill", SVGElement);
+	#floor = requireChild(this.#envelope, ".sonic-envelope-floor", SVGElement);
 	#graph = requireChild(this.#envelope, ".sonic-envelope-graph", SVGElement);
+	#handles = stageParts(this.#envelope, "sonic-envelope-handle", timeStages);
+	#held;
+	#isDriving = false;
 	#line = requireChild(this.#envelope, ".sonic-envelope-line", SVGElement);
 	#pointerDrag;
 	#readout = new Readout(requireChild(this.#envelope, ".sonic-envelope-readout", HTMLDivElement));
@@ -145,7 +164,7 @@ var SonicEnvelope = class extends SonicElement {
 	connect(signal) {
 		const envelope = this.#envelope;
 		this.#signal = signal;
-		this.appendOnce(envelope);
+		this.keepControl(envelope, signal);
 		this.#bind();
 		this.checkStyles(envelope, "envelope.css");
 		this.#bindPointer(envelope, signal);
@@ -162,7 +181,7 @@ var SonicEnvelope = class extends SonicElement {
 			if (!element) continue;
 			const link = linkValue(element);
 			const unwatch = link.watch(() => {
-				this.#draw();
+				if (!this.#isDriving) this.#draw();
 			});
 			this.#bindings.set(name, {
 				element,
@@ -202,32 +221,37 @@ var SonicEnvelope = class extends SonicElement {
 	}
 	#draw() {
 		const shape = this.#readShape();
-		const path = this.#bindings.size === 0 ? {
-			fill: "",
-			stroke: ""
-		} : adsrPath(shape);
+		const path = this.#bindings.size === 0 ? emptyPath : adsrPath(shape);
 		this.#shape = shape;
-		this.#line.setAttribute("d", path.stroke);
-		this.#fill.setAttribute("d", path.fill);
-		for (const stage of timeStages) this.#drawPoint(`.sonic-envelope-handle[data-sonic-stage="${stage}"]`, {
+		writeAttribute(this.#line, "d", path.stroke);
+		writeAttribute(this.#fill, "d", path.fill);
+		writeAttribute(this.#floor, "x", String(path.floor.from));
+		writeAttribute(this.#floor, "width", String(path.floor.to - path.floor.from));
+		for (const [stage, part] of this.#handles) this.#drawPoint(part, {
 			at: shape.handles.find((point) => point.stage === stage),
 			drives: this.#drives(stage)
 		});
-		for (const stage of curveStages) this.#drawPoint(`.sonic-envelope-curve[data-sonic-stage="${stage}"]`, {
+		for (const [stage, part] of this.#curveHandles) this.#drawPoint(part, {
 			at: shape.curveHandles.find((point) => point.stage === stage),
 			drives: this.#curveDrives(stage)
 		});
+		this.#drawBracket();
 		this.#renderReadout();
 	}
-	#drawPoint(selector, point) {
-		const part = requireChild(this.#envelope, selector, HTMLDivElement);
+	#drawBracket() {
+		const part = this.#held;
+		if (!part) return;
+		for (const name of ["--_sonic-envelope-x", "--_sonic-envelope-y"]) this.#bracket.style.setProperty(name, part.style.getPropertyValue(name));
+		writeAttribute(this.#bracket, "data-sonic-part", part.classList.contains("sonic-envelope-curve") ? "curve" : void 0);
+	}
+	#drawPoint(part, point) {
 		const { at, drives } = point;
-		part.hidden = !at;
+		writeAttribute(part, "hidden", at ? void 0 : "");
 		if (!at) return;
 		const isStill = this.isDisabled() || drives.every(({ binding }) => binding.link.isDisabled());
 		part.style.setProperty("--_sonic-envelope-x", String(at.x));
 		part.style.setProperty("--_sonic-envelope-y", String(at.y));
-		part.dataset.sonicAxes = drives.map(({ axis }) => axis).join("");
+		writeAttribute(part, "data-sonic-axes", drives.map(({ axis }) => axis).join(""));
 		writeAttribute(part, "data-sonic-disabled", isStill ? "" : void 0);
 	}
 	#drives(stage) {
@@ -246,6 +270,8 @@ var SonicEnvelope = class extends SonicElement {
 		if (!pressed || pressed.drives.length === 0) return void 0;
 		const { drives, isFlipped, part } = pressed;
 		this.#claim.press(true);
+		this.#held = part;
+		this.#drawBracket();
 		const box = this.#graph.getBoundingClientRect();
 		const travel = {
 			x: Math.max(1, box.width * this.#shape.share),
@@ -284,11 +310,13 @@ var SonicEnvelope = class extends SonicElement {
 		const step = stepFieldDrag(mappings, drag.state, flip(pointerMove(event), drag.isFlipped));
 		drag.state = step.state;
 		if (step.state.isEngaged) this.#claim.reveal("drag");
+		this.#isDriving = true;
 		for (const { axis, binding } of drag.drives) {
 			const next = step[axis];
 			if (next !== void 0) binding.link.input(next);
 		}
-		this.#renderReadout();
+		this.#isDriving = false;
+		this.#draw();
 	}
 	#pressed(event) {
 		const part = event.target instanceof Element ? event.target.closest(".sonic-envelope-handle, .sonic-envelope-curve") : void 0;

package/dist/default/elements/meter.js

@@ -1,5 +1,6 @@
-import { template } from "../lib/render.js";
+import { toNumber } from "../lib/math.js";
 import { SonicElement } from "./sonic-element.js";
+import { template } from "../lib/render.js";
 import { parseNumberList } from "../lib/number-list.js";
 import { linearTaper } from "../lib/taper.js";
 import { ballisticsRates, fall, rise, stepNeedle } from "../lib/ballistics.js";
@@ -51,7 +52,8 @@ var SonicMeter = class extends SonicElement {
 	get level() {
 		return this.#level;
 	}
-	set level(amplitude) {
+	set level(level) {
+		const amplitude = toNumber(level);
 		if (!Number.isFinite(amplitude)) return;
 		const decibels = toDecibels(amplitude);
 		this.#level = amplitude;
@@ -121,7 +123,8 @@ var SonicMeter = class extends SonicElement {
 		const now = performance.now();
 		if (name === "ballistics") this.#velocity = 0;
 		else if (name === "value") this.#readValue(now);
-		this.#renderSegments();
+		this.#segments = this.segments;
+		if (name === "segments") this.#renderSegments();
 		this.#render(now);
 		this.#schedule(now);
 	}
@@ -131,7 +134,7 @@ var SonicMeter = class extends SonicElement {
 	connect(signal) {
 		const now = performance.now();
 		this.upgradeProperties("ballistics", "max", "min", "orientation", "origin", "segments", "value", "level");
-		this.appendOnce(this.#meter);
+		this.keepControl(this.#meter, signal);
 		this.#renderSegments();
 		this.#render(now);
 		this.#schedule(now);
@@ -165,6 +168,7 @@ var SonicMeter = class extends SonicElement {
 		if (value !== void 0) this.#peak = Math.max(this.#peak, value);
 	}
 	#render(now) {
+		if (!this.isBound()) return;
 		const meter = this.#meter;
 		const origin = this.origin === void 0 ? 0 : this.#proportionOf(this.origin);
 		meter.style.setProperty("--_sonic-meter-min", String(this.min));
@@ -185,9 +189,9 @@ var SonicMeter = class extends SonicElement {
 		meter.style.setProperty("--_sonic-meter-clipped", now - this.#clipAt < holdMs ? "1" : "0");
 	}
 	#renderSegments() {
+		if (!this.isBound()) return;
 		const meter = this.#meter;
-		const segments = this.segments;
-		this.#segments = segments;
+		const segments = this.#segments;
 		this.toggleState("ladder", segments !== void 0);
 		if (!segments) {
 			for (const name of [
@@ -226,9 +230,9 @@ var SonicMeter = class extends SonicElement {
 			this.#stepNeedle(elapsedMs);
 			return;
 		}
-		const { fallDecibelsPerSecond, riseMs } = ballisticsRates[mode];
+		const { fallDecibelsPerSecond, riseTimeConstantMs } = ballisticsRates[mode];
 		const floor = Math.max(this.#target, this.min);
-		this.#bar = this.#target > this.#bar ? this.#risen(riseMs, elapsedMs) : fall(this.#bar, {
+		this.#bar = this.#target > this.#bar ? this.#risen(riseTimeConstantMs, elapsedMs) : fall(this.#bar, {
 			fallDecibelsPerSecond,
 			floor
 		}, elapsedMs);

package/dist/default/elements/number.js

@@ -30,7 +30,7 @@ var SonicNumber = class extends SonicValueElement {
 	}
 	connect(signal) {
 		const number = this.#number;
-		this.appendOnce(number);
+		this.keepControl(number, signal);
 		this.render();
 		this.checkStyles(number, "number.css");
 		this.bindGestures(number, signal, () => ({

package/dist/default/elements/radio-group.js

@@ -1,6 +1,9 @@
-import { placeChildren } 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 { placeChildren } from "../lib/render.js";
+import { mirrorChildren } from "../lib/mirror-children.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 
 //#region src/elements/radio-group.ts
 const keySteps = /* @__PURE__ */ new Map([
@@ -9,10 +12,12 @@ const keySteps = /* @__PURE__ */ new Map([
 	["ArrowRight", 1],
 	["ArrowUp", -1]
 ]);
-function isUnder(option, x, y) {
-	const box = option.getBoundingClientRect();
+function isInside(box, x, y) {
 	return x >= box.left && x < box.right && y >= box.top && y < box.bottom;
 }
+function isUnder(option, x, y) {
+	return isInside(option.getBoundingClientRect(), x, y);
+}
 function optionValue(option) {
 	return option.querySelector("[data-sonic-value]")?.dataset.sonicValue;
 }
@@ -26,7 +31,6 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		this.#value = next;
 		this.render();
 	}
-	#press;
 	#value = "";
 	attributeChangedCallback(name) {
 		if (name === "value") this.#value = this.getAttribute("value") ?? "";
@@ -45,7 +49,7 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 	connect(signal) {
 		const group = this.group;
 		this.upgradeProperties("value");
-		this.mirrorChildren({
+		mirrorChildren(this, {
 			control: group,
 			copy: copyNode,
 			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]"),
@@ -86,13 +90,15 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		return option;
 	}
 	render() {
+		if (!this.isBound()) return;
 		const options = this.options();
 		const checked = options.find((option) => optionValue(option) === this.#value);
 		const focusable = checked ?? options[0];
+		const isDisabled = this.isDisabled();
 		for (const option of options) {
-			option.disabled = this.isDisabled();
-			option.setAttribute("aria-checked", String(option === checked));
-			option.tabIndex = option === focusable ? 0 : -1;
+			writeAttribute(option, "disabled", isDisabled ? "" : void 0);
+			writeAttribute(option, "aria-checked", String(option === checked));
+			writeAttribute(option, "tabindex", option === focusable ? "0" : "-1");
 		}
 		this.forwardNaming(this.group, true);
 		this.writeFormValue(checked ? this.#value : null, this.#value);
@@ -107,41 +113,32 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
 	#bindPress(group, signal) {
-		const isOwn = (event) => event.pointerId === this.#press?.pointerId;
-		const release = (event) => {
-			if (isOwn(event)) this.#hold(void 0);
-		};
-		group.addEventListener("pointerdown", (event) => {
-			const option = this.optionOf(event.target);
-			if (!option || event.button !== 0 || this.isDisabled()) return;
-			if (this.claimPress(option, event)) return;
-			group.setPointerCapture(event.pointerId);
-			this.#hold({
-				option,
-				pointerId: event.pointerId
-			});
-		}, { signal });
-		group.addEventListener("pointermove", (event) => {
-			if (!isOwn(event)) return;
-			this.#hold({
-				option: this.options().find((option) => isUnder(option, event.clientX, event.clientY)),
-				pointerId: event.pointerId
-			});
-		}, { signal });
-		group.addEventListener("pointerup", (event) => {
-			const pressed = isOwn(event) ? this.#press?.option : void 0;
-			release(event);
-			if (!pressed || this.isDisabled()) return;
-			const option = this.releaseTarget(pressed);
-			if (!option) return;
-			this.select(option);
-			if (group.matches(":focus-within")) option.focus();
-		}, { signal });
-		group.addEventListener("pointercancel", release, { signal });
-		group.addEventListener("lostpointercapture", release, { signal });
-		signal.addEventListener("abort", () => {
-			this.#hold(void 0);
-		}, { once: true });
+		bindDrag(group, {
+			grab: (event) => {
+				const option = this.optionOf(event.target);
+				if (!option || this.isDisabled() || this.claimPress(option, event)) return;
+				const boxes = this.#optionBoxes();
+				this.#markPressed(option);
+				return {
+					boxes,
+					option
+				};
+			},
+			lift: (press) => {
+				if (!press.option || this.isDisabled()) return;
+				const option = this.releaseTarget(press.option);
+				if (!option) return;
+				this.select(option);
+				if (group.matches(":focus-within")) option.focus();
+			},
+			move: (press, event) => {
+				press.option = press.boxes.find(([, box]) => isInside(box, event.clientX, event.clientY))?.[0];
+				this.#markPressed(press.option);
+			},
+			release: () => {
+				this.#markPressed(void 0);
+			}
+		}, signal);
 	}
 	#copyOptions(copies) {
 		const group = this.group;
@@ -160,10 +157,6 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		this.render();
 		if (focused) this.#refocus(focused, focusedValue);
 	}
-	#hold(press) {
-		this.#press = press;
-		for (const option of this.options()) option.toggleAttribute("data-sonic-pressed", option === press?.option);
-	}
 	#keyTarget(option, key) {
 		const options = this.options();
 		if (key === "Home") return options[0];
@@ -174,6 +167,12 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		if (this.isWrapping()) return options[(index + options.length) % options.length];
 		return options[Math.min(Math.max(index, 0), options.length - 1)];
 	}
+	#markPressed(pressed) {
+		for (const option of this.options()) option.toggleAttribute("data-sonic-pressed", option === pressed);
+	}
+	#optionBoxes() {
+		return this.options().map((option) => [option, option.getBoundingClientRect()]);
+	}
 	#refocus(focused, value) {
 		const options = this.options();
 		const next = options.find((option) => optionValue(option) === value) ?? options.find((option) => option.tabIndex === 0);

package/dist/default/elements/readout-claim.js

@@ -6,10 +6,7 @@ var ReadoutClaim = class {
 		return this.#isDragging || this.#keyTimer !== void 0;
 	}
 	#holdTimer;
-	#hover;
-	#isDismissed = false;
 	#isDragging = false;
-	#isEditing = false;
 	#keyTimer;
 	#onLapse;
 	constructor(onLapse) {
@@ -27,21 +24,6 @@ var ReadoutClaim = class {
 		this.#keyTimer = void 0;
 		return wasTimed;
 	}
-	dismiss() {
-		const wasHovered = this.#hover !== void 0;
-		this.#hover = void 0;
-		this.#isDismissed = wasHovered || this.#isDismissed;
-		return wasHovered;
-	}
-	edit(isOpen) {
-		this.#isEditing = isOpen;
-		if (isOpen) this.#hover = void 0;
-	}
-	hover(value) {
-		if (value === void 0) this.#isDismissed = false;
-		if (this.#isDismissed || this.#isEditing || this.isRevealed) return;
-		this.#hover = value;
-	}
 	press(isDown) {
 		this.conceal("drag");
 		if (!isDown) {
@@ -54,7 +36,6 @@ var ReadoutClaim = class {
 		}, 250);
 	}
 	reveal(by) {
-		this.#hover = void 0;
 		if (by === "drag") {
 			this.#isDragging = true;
 			return;
@@ -65,16 +46,6 @@ var ReadoutClaim = class {
 			this.#onLapse();
 		}, keyRevealMs);
 	}
-	shown(current, isReadout) {
-		if (this.#isEditing) return {
-			isOpen: true,
-			value: void 0
-		};
-		return {
-			isOpen: (this.isRevealed || this.#hover !== void 0) && isReadout,
-			value: this.#hover ?? current
-		};
-	}
 };
 
 //#endregion

package/dist/default/elements/readout.js

@@ -23,7 +23,7 @@ var Readout = class {
 			this.#anchor = anchor;
 		}
 		this.#text.hidden = text === void 0;
-		if (text !== void 0) this.#text.textContent = text;
+		if (isOpen && text !== void 0 && this.#text.textContent !== text) this.#text.textContent = text;
 		this.#toggle(isOpen);
 	}
 	#toggle(isOpen) {

package/dist/default/elements/scale.js

@@ -0,0 +1,43 @@
+import { copyNode } from "../lib/copy-node.js";
+import { placeChildren } from "../lib/render.js";
+import { mirrorChildren } from "../lib/mirror-children.js";
+import { linkValue } from "./value-element.js";
+
+//#region src/elements/scale.ts
+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;
+}
+function bindScale(element, { control, marks }, signal) {
+	const { mapping, watch } = linkValue(element);
+	const render = () => {
+		const { proportionOf } = mapping();
+		for (const mark of marks.children) {
+			if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) continue;
+			const at = String(proportionOf(scaleValue(mark)));
+			if (mark.style.getPropertyValue("--_sonic-scale-at") !== at) mark.style.setProperty("--_sonic-scale-at", at);
+		}
+	};
+	mirrorChildren(element, {
+		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);
+			render();
+		}
+	}, signal);
+	signal.addEventListener("abort", watch(render), { once: true });
+}
+
+//#endregion
+export { bindScale };

package/dist/default/elements/slider.js

@@ -1,5 +1,7 @@
 import { requireChild, template } from "../lib/render.js";
 import { SonicValueElement } from "./value-element.js";
+import { bindScale } from "./scale.js";
+import { sortedRegions } from "../lib/time-regions.js";
 
 //#region src/elements/slider.ts
 function grooveStop(proportion) {
@@ -34,6 +36,13 @@ var SonicSlider = class extends SonicValueElement {
 		"orientation",
 		"spring"
 	];
+	get buffered() {
+		return this.#buffered.map(([start, end]) => [start, end]);
+	}
+	set buffered(regions) {
+		this.#buffered = sortedRegions(regions);
+		this.render();
+	}
 	get groovePress() {
 		return this.getAttribute("groove-press") === "none" ? "none" : "jump";
 	}
@@ -64,15 +73,19 @@ var SonicSlider = class extends SonicValueElement {
 	set spring(isSpring) {
 		this.reflect("spring", isSpring);
 	}
+	#buffered = [];
 	#slider = renderSlider();
 	connectedCallback() {
-		this.upgradeProperties("groovePress", "modulationValue", "modulation", "orientation", "spring");
+		this.upgradeProperties("buffered", "groovePress", "modulationValue", "modulation", "orientation", "spring");
 		super.connectedCallback();
 	}
 	connect(signal) {
 		const slider = this.#slider;
 		const cap = requireChild(slider, ".sonic-slider-cap", HTMLDivElement);
-		this.bindScale(slider, requireChild(slider, ".sonic-slider-scale", HTMLDivElement), signal);
+		bindScale(this, {
+			control: slider,
+			marks: requireChild(slider, ".sonic-slider-scale", HTMLDivElement)
+		}, signal);
 		slider.addEventListener("transitionend", (event) => {
 			if (event.propertyName === "--_sonic-slider-value") this.toggleState("springing", false);
 		}, { signal });
@@ -113,7 +126,7 @@ var SonicSlider = class extends SonicValueElement {
 		};
 	}
 	#renderBuffered(slider) {
-		const buffered = this.buffered;
+		const buffered = this.#buffered;
 		if (buffered.length === 0) {
 			slider.style.removeProperty("--_sonic-slider-buffered-regions");
 			return;