@xsynaptic/sonic-ui 0.6.0 → 0.6.1

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) => {

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,6 +1,6 @@
-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";
@@ -44,6 +44,7 @@ function stageParts(envelope, hook, stages) {
 }
 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" />
@@ -127,15 +128,17 @@ 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;
@@ -232,8 +235,15 @@ var SonicEnvelope = class extends SonicElement {
 			at: shape.curveHandles.find((point) => point.stage === stage),
 			drives: this.#curveDrives(stage)
 		});
+		this.#drawBracket();
 		this.#renderReadout();
 	}
+	#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;
 		writeAttribute(part, "hidden", at ? void 0 : "");
@@ -260,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),

package/dist/default/elements/meter.js

@@ -1,6 +1,6 @@
 import { toNumber } from "../lib/math.js";
-import { template } from "../lib/render.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";

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

@@ -1,7 +1,8 @@
-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
@@ -48,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]"),

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/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;

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

@@ -1,5 +1,5 @@
 import { toNumber } from "../lib/math.js";
-import { attachSlots } from "../lib/render.js";
+import { appendOnce } from "../lib/owned-control.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 
 //#region src/elements/sonic-element.ts
@@ -23,7 +23,6 @@ var SonicElement = class extends HTMLElement {
 	}
 	internals = "attachInternals" in HTMLElement.prototype ? this.attachInternals() : void 0;
 	#connection;
-	#slots;
 	blur() {
 		this.#focused()?.blur();
 	}
@@ -77,8 +76,7 @@ var SonicElement = class extends HTMLElement {
 	}
 	keepControl(control, signal) {
 		const keep = () => {
-			this.#appendOnce(control);
-			this.#checkChildren([...this.childNodes].filter((child) => child !== control));
+			appendOnce(this, control);
 		};
 		const observer = new MutationObserver(keep);
 		keep();
@@ -87,50 +85,6 @@ var SonicElement = class extends HTMLElement {
 			observer.disconnect();
 		}, { once: true });
 	}
-	mirrorChildren({ control, copy, isCopied = () => true, isPassed = () => false, place }, signal) {
-		const slots = this.#slots ?? attachSlots(this);
-		let copies = /* @__PURE__ */ new Map();
-		this.#slots = slots;
-		const mirror = (touched) => {
-			this.#appendOnce(control);
-			const children = [...this.childNodes].filter((child) => child !== control);
-			const slotted = children.filter((child) => child instanceof Element || child instanceof Text);
-			const kept = copies;
-			const originals = children.filter((child) => isCopied(child));
-			this.#checkMirrored(originals);
-			this.#checkChildren(children.filter((child) => !isCopied(child) && !isPassed(child)));
-			copies = new Map(originals.map((original) => [original, touched && !touched.has(original) && kept.has(original) ? kept.get(original) : copy(original)]));
-			place([...copies.values()].filter((made) => made !== void 0));
-			slots.shown.assign(...slotted.filter((child) => !isCopied(child)), control);
-			slots.kept.assign(...slotted.filter((child) => isCopied(child)));
-		};
-		const watch = () => {
-			observer.disconnect();
-			observer.observe(this, { childList: true });
-			for (const child of this.childNodes) {
-				if (child === control) continue;
-				observer.observe(child, {
-					attributes: true,
-					characterData: true,
-					childList: true,
-					subtree: true
-				});
-			}
-		};
-		const observer = new MutationObserver((records) => {
-			const changes = records.filter((record) => this.#isCopiedChange(record, control, isCopied));
-			if (changes.length === 0) return;
-			if (changes.some((record) => record.target === this)) {
-				mirror();
-				watch();
-			} else mirror(new Set(changes.map((record) => this.#childHolding(record.target))));
-		});
-		mirror();
-		watch();
-		signal.addEventListener("abort", () => {
-			observer.disconnect();
-		}, { once: true });
-	}
 	namingLabels() {
 		return [];
 	}
@@ -161,30 +115,11 @@ var SonicElement = class extends HTMLElement {
 			this[name] = value;
 		}
 	}
-	#appendOnce(control) {
-		const [hook] = control.classList;
-		const stale = [...this.children].filter((child) => child !== control && hook !== void 0 && child.classList.contains(hook));
-		for (const child of stale) child.remove();
-		if (control.parentNode !== this) this.append(control);
-	}
-	#checkChildren(undocumented) {}
-	#checkMirrored(originals) {}
-	#childHolding(node) {
-		let current = node;
-		while (current && current.parentNode !== this) current = current.parentNode;
-		return current ?? void 0;
-	}
 	#focused() {
 		const root = this.getRootNode();
 		const active = root instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;
 		return active instanceof HTMLElement && this.contains(active) ? active : void 0;
 	}
-	#isCopiedChange(record, control, isCopied) {
-		if (record.target === this) return record.removedNodes.length > 0 || [...record.addedNodes].some((node) => node !== control);
-		const child = this.#childHolding(record.target);
-		if (child === void 0) return false;
-		return isCopied(child) || record.type === "attributes" && record.target === child;
-	}
 };
 
 //#endregion

package/dist/default/elements/switch.js

@@ -1,7 +1,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 { requireChild, template } from "../lib/render.js";
 import { bindDrag } from "../lib/pointer-drag.js";
 import { SonicRadioGroupElement, isUnder, optionValue } from "./radio-group.js";
 

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

@@ -1,8 +1,7 @@
 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 { requireChild } from "../lib/render.js";
 import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
 import { ValueEntry } from "./value-entry.js";
@@ -12,7 +11,6 @@ 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
@@ -37,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);
@@ -64,6 +50,7 @@ var SonicValueElement = class extends SonicFormElement {
 		"origin",
 		"readout",
 		"step",
+		"tabindex",
 		"taper",
 		"value",
 		"positions"
@@ -89,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");
 	}
@@ -220,12 +200,10 @@ var SonicValueElement = class extends SonicFormElement {
 		return this.#textFor(this.#value);
 	}
 	#asked;
-	#buffered = [];
 	#claim = new ReadoutClaim(() => {
 		this.#renderHold();
 	});
 	#entry;
-	#escapeWatch;
 	#formatSpokenValue;
 	#formatValue;
 	#instance = String(instanceCount += 1);
@@ -239,7 +217,6 @@ var SonicValueElement = class extends SonicFormElement {
 	#pointerDrag;
 	#positions;
 	#readout;
-	#scaleMarks;
 	#value = 0;
 	#watchers = /* @__PURE__ */ new Set();
 	attributeChangedCallback(name) {
@@ -258,7 +235,7 @@ var SonicValueElement = class extends SonicFormElement {
 		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) {
@@ -322,19 +299,6 @@ var SonicValueElement = class extends SonicFormElement {
 			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]"),
-			isPassed: (child) => child instanceof Element && child.matches(".sonic-led"),
-			place: (copies) => {
-				placeChildren(marks, copies);
-				this.#renderScale();
-			}
-		}, signal);
-	}
 	controlOrientation() {}
 	controlRole() {
 		return "slider";
@@ -344,11 +308,6 @@ var SonicValueElement = class extends SonicFormElement {
 	}
 	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);
@@ -359,6 +318,9 @@ var SonicValueElement = class extends SonicFormElement {
 		}));
 		return true;
 	}
+	isEditing() {
+		return this.#entry?.isOpen === true;
+	}
 	isRevealed() {
 		return this.#claim.isRevealed;
 	}
@@ -384,17 +346,28 @@ var SonicValueElement = class extends SonicFormElement {
 	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() {
 		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);
 	}
@@ -440,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();
@@ -545,7 +517,7 @@ var SonicValueElement = class extends SonicFormElement {
 		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;
@@ -557,18 +529,18 @@ var SonicValueElement = class extends SonicFormElement {
 		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.#renderScale();
 		this.toggleState("at-origin", !this.isWrapping() && this.#value === this.mapping().snap(this.originValue()));
 		this.#renderAria(this.focusTarget(), this.controlOrientation());
 	}
 	#renderDisabled(control) {
 		const isDisabled = this.isDisabled();
 		writeAttribute(control, "aria-disabled", isDisabled ? "true" : void 0);
-		writeAttribute(control, "tabindex", isDisabled ? void 0 : "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");
@@ -576,28 +548,9 @@ 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);
 	}
@@ -616,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;
@@ -645,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;