@xsynaptic/sonic-ui 0.8.0 → 0.9.0

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

@@ -0,0 +1,301 @@
+import { clamp } from "../lib/math.js";
+import { requireChild } from "../lib/render.js";
+import { bindDrag } from "../lib/pointer-drag.js";
+import { ReadoutClaim, revealDelay } from "./readout-claim.js";
+import { ValueEntry } from "./value-entry.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 { readPxProperty } from "../lib/read-px-property.js";
+import { resetKeys } from "../lib/value-mapping.js";
+
+//#region src/elements/value-gestures.ts
+const detentZonePx = 8;
+var ValueGestures = class {
+	#claim = new ReadoutClaim(() => {
+		this.#host.holdChanged();
+	});
+	#control;
+	#entry;
+	#host;
+	#isRevealed = false;
+	#keyScrub;
+	#pointerDrag;
+	constructor(host, control) {
+		this.#host = host;
+		this.#control = control;
+	}
+	bind(signal, grab) {
+		const control = this.#control;
+		const host = this.#host;
+		const entry = this.#bindEntry(signal);
+		this.#pointerDrag = bindDrag(control, {
+			cancel: (drag) => {
+				if (drag.isKeptOnCancel !== true) host.input(drag.fromValue);
+			},
+			grab: (event) => {
+				if (isMenuPress(event) || host.isDisabled() || entry.isOpen) return;
+				host.toggleState("springing", false);
+				if (event.pointerType === "touch") event.preventDefault();
+				focusByPointer(control);
+				if (isResetPress(event)) {
+					this.#reset();
+					return;
+				}
+				const fromValue = host.value();
+				const axis = grab(event);
+				if (!axis) return;
+				const drag = {
+					...axis,
+					fromValue,
+					isOutside: false,
+					isRevealed: false,
+					pointerType: event.pointerType,
+					revealTimer: void 0,
+					state: this.#startDrag(axis, event)
+				};
+				drag.revealTimer = setTimeout(() => {
+					this.#reveal(drag);
+				}, revealDelay(control));
+				return drag;
+			},
+			lift: (drag, event) => {
+				const tap = drag.state.isEngaged ? void 0 : host.tapTarget();
+				if (tap !== void 0) {
+					entry.forgetPress();
+					this.#commit(tap);
+					return;
+				}
+				if (!entry.press(event) || host.springTarget() !== void 0) return;
+				const gesture = host.doublePress();
+				if (gesture === "reset") this.#reset();
+				else if (gesture === "entry") entry.open();
+			},
+			move: (drag, event) => {
+				this.#dragTo(drag, event);
+			},
+			release: (drag) => {
+				this.#releaseDrag(drag);
+			},
+			toggle: (isDragging) => {
+				host.toggleState("dragging", isDragging);
+			}
+		}, signal);
+		control.addEventListener("pointercancel", () => {
+			entry.forgetPress();
+		}, { signal });
+		this.#bindKeys(entry, signal);
+		signal.addEventListener("abort", () => {
+			this.#endKeyScrub();
+			this.#concealKeyReveal();
+		}, { once: true });
+	}
+	end() {
+		this.#entry?.close(false);
+		this.#pointerDrag?.end();
+		this.#endKeyScrub();
+	}
+	heldFrom() {
+		return this.#dragging()?.fromValue ?? this.#keyScrub?.fromValue;
+	}
+	isEditing() {
+		return this.#entry?.isOpen === true;
+	}
+	isHeld() {
+		return this.#dragging() !== void 0 || this.#keyScrub !== void 0;
+	}
+	isRevealed() {
+		return this.#claim.isRevealed;
+	}
+	pointerType() {
+		return this.#dragging()?.pointerType;
+	}
+	#bindEntry(signal) {
+		const control = this.#control;
+		const host = this.#host;
+		const input = requireChild(control, "input", HTMLInputElement);
+		input.id = host.entryId;
+		const entry = new ValueEntry(input, {
+			commit: (text) => {
+				this.#commit(host.parse(text));
+			},
+			text: host.entryText,
+			toggle: (isOpen) => {
+				if (isOpen) host.forwardNaming(input, true);
+				host.toggleState("editing", isOpen);
+				host.render();
+			}
+		});
+		this.#entry = entry;
+		entry.bind(control, signal);
+		return entry;
+	}
+	#bindKeys(entry, signal) {
+		const control = this.#control;
+		const host = this.#host;
+		control.addEventListener("keydown", (event) => {
+			if (host.isDisabled() || event.defaultPrevented || event.target !== control) return;
+			host.toggleState("springing", false);
+			if (event.key === "Enter") {
+				if (host.springTarget() !== void 0) return;
+				event.preventDefault();
+				entry.open();
+				return;
+			}
+			const next = this.#keyTarget(event.key);
+			if (next === void 0) return;
+			event.preventDefault();
+			this.#keyTo(event, next);
+			this.#claim.reveal("keys");
+			host.holdChanged();
+		}, { 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();
+		}, { signal });
+		control.addEventListener("blur", () => {
+			this.#endKeyScrub();
+			this.#concealKeyReveal();
+			this.#springBack();
+		}, { signal });
+	}
+	#commit(next, direction = 0) {
+		const host = this.#host;
+		const landed = Number.isFinite(next) ? host.land(next, direction) : next;
+		if (host.input(landed)) host.dispatch("change");
+	}
+	#concealKeyReveal() {
+		if (this.#claim.conceal("keys")) this.#host.holdChanged();
+	}
+	#dragging() {
+		return this.#pointerDrag?.current();
+	}
+	#dragTo(drag, event) {
+		const host = this.#host;
+		const isOutside = drag.outside?.(event) === true;
+		const wasEngaged = drag.state.isEngaged;
+		const mapping = host.mapping();
+		const { state, value } = stepDrag(mapping, drag.state, {
+			isFine: event.shiftKey,
+			isOutside,
+			position: drag.position(event)
+		});
+		drag.state = this.#withinLimit(mapping, state);
+		if (value === void 0) return;
+		if (!wasEngaged) this.#reveal(drag);
+		const isCrossing = isOutside !== drag.isOutside;
+		if (isCrossing) {
+			drag.isOutside = isOutside;
+			host.toggleState("cancelling", isOutside);
+		}
+		host.input(isOutside ? drag.fromValue : value);
+		if (isCrossing) this.#renderDragReveal(drag);
+	}
+	#endKeyScrub() {
+		const host = this.#host;
+		const scrub = this.#keyScrub;
+		if (!scrub) return;
+		this.#keyScrub = void 0;
+		host.holdChanged();
+		if (host.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());
+	}
+	#keyTo(event, next) {
+		const host = this.#host;
+		if (event.repeat && host.scrubsKeyRepeat()) {
+			this.#scrubKey(event.key, next);
+			return;
+		}
+		this.#endKeyScrub();
+		this.#commit(next, next > host.value() ? 1 : -1);
+	}
+	#releaseDrag(drag) {
+		const host = this.#host;
+		clearTimeout(drag.revealTimer);
+		this.#claim.conceal("drag");
+		host.toggleState("cancelling", false);
+		host.holdChanged();
+		this.#showRevealed(false);
+		if (host.value() !== drag.fromValue) host.dispatch("change");
+		this.#springBack();
+	}
+	#renderDragReveal(drag) {
+		const isRevealed = drag.isRevealed && !drag.isOutside;
+		if (isRevealed) this.#claim.reveal("drag");
+		else this.#claim.conceal("drag");
+		this.#host.holdChanged();
+		this.#showRevealed(isRevealed);
+	}
+	#reset() {
+		this.#commit(this.#host.default() ?? NaN);
+	}
+	#reveal(drag) {
+		if (drag.isRevealed || this.#dragging() !== drag) return;
+		drag.isRevealed = true;
+		this.#renderDragReveal(drag);
+	}
+	#scrubKey(key, next) {
+		const host = this.#host;
+		if (this.#keyScrub?.key !== key) {
+			this.#endKeyScrub();
+			this.#keyScrub = {
+				fromValue: host.value(),
+				key
+			};
+		}
+		host.input(next);
+	}
+	#showRevealed(isRevealed) {
+		if (isRevealed === this.#isRevealed) return;
+		this.#isRevealed = isRevealed;
+		this.#host.toggleState("revealed", isRevealed);
+		this.#host.dispatch("sonic-reveal");
+	}
+	#springBack() {
+		const host = this.#host;
+		const target = host.springTarget();
+		if (target === void 0) return;
+		if (host.mapping().snap(target) !== host.value()) host.toggleState("springing", true);
+		this.#commit(target);
+	}
+	#startDrag(axis, event) {
+		const host = this.#host;
+		const mapping = host.mapping();
+		const detent = host.detent();
+		const value = host.value();
+		const start = {
+			from: value,
+			position: axis.position(event),
+			proportion: axis.fromProportion ?? mapping.proportionOf(value),
+			thresholdPx: dragThresholdPx(event.pointerType),
+			travelPx: axis.travelPx
+		};
+		if (detent === void 0) return startDrag(mapping, start);
+		const zonePx = readPxProperty(getComputedStyle(this.#control), "--_sonic-detent-zone", detentZonePx);
+		return startDrag(mapping, {
+			...start,
+			detent: {
+				value: detent,
+				zone: zonePx / axis.travelPx
+			}
+		});
+	}
+	#withinLimit(mapping, state) {
+		const limit = this.#host.limit();
+		if (!limit || mapping.isWrapping) return state;
+		const [low, high] = limit;
+		return {
+			...state,
+			rawProportion: clamp(state.rawProportion, mapping.proportionOf(low), mapping.proportionOf(high))
+		};
+	}
+};
+
+//#endregion
+export { ValueGestures };

package/dist/default/elements/waveform.js

@@ -209,7 +209,8 @@ var SonicWaveform = class extends SonicWaveElement {
 		className: "sonic-waveform-label",
 		colourProperty: "--_sonic-waveform-marker",
 		fadeProperty: "--_sonic-waveform-label-fade",
-		insetProperty: "--_sonic-waveform-label-inset"
+		insetProperty: "--_sonic-waveform-label-inset",
+		parkProperty: "--_sonic-waveform-label-park"
 	});
 	connectedCallback() {
 		this.upgradeProperties("peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "requestPeaks", "zoom");
@@ -223,7 +224,9 @@ var SonicWaveform = class extends SonicWaveElement {
 		}, { signal });
 	}
 	draw() {
-		this.surface()?.requestFrame();
+		const surface = this.surface();
+		surface?.requestFrame();
+		if (surface?.isVisible === false || !this.#drawn) this.showCurrentMarker(this.#sourceSeconds());
 	}
 	isEmpty() {
 		return !this.#peaks || this.#peaks.samples.length === 0;

package/dist/default/elements/wavestrip.js

@@ -1,7 +1,6 @@
 import { clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { readPxProperty } from "../lib/read-px-property.js";
-import { bindHoverPreview } from "../lib/hover-preview.js";
 import { sortedRegions } from "../lib/time-regions.js";
 import { SonicWaveElement } from "./wave-element.js";
 import { createMarkerBand } from "../lib/marker-band.js";
@@ -77,7 +76,6 @@ var SonicWavestrip = class extends SonicWaveElement {
 	sizeProperty = "--_sonic-wavestrip-size";
 	#bars;
 	#buffered = [];
-	#hover;
 	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
 	#paintedKey = "";
 	#peaks;
@@ -86,15 +84,11 @@ var SonicWavestrip = class extends SonicWaveElement {
 		super.connectedCallback();
 	}
 	connect(signal) {
+		const { control } = this;
 		super.connect(signal);
-		this.#hover = bindHoverPreview(this.control, {
+		this.bindHover(control, signal, {
 			canShow: () => this.readout,
-			dismiss: () => {
-				this.render();
-			},
-			isTaken: () => this.isEditing() || this.isRevealed(),
-			show: () => {
-				this.renderReadout();
+			place: () => {
 				this.#placeReadout();
 			},
 			valueAt: (event) => {
@@ -103,12 +97,11 @@ var SonicWavestrip = class extends SonicWaveElement {
 				const mapping = this.mapping();
 				return this.#markerAt(event, axis) ?? mapping.snap(mapping.valueAt(at));
 			}
-		}, signal);
-		this.bindGestures(this.control, signal, (event) => this.#grab(event));
+		});
+		this.bindGestures(control, signal, (event) => this.#grab(event));
 	}
 	draw() {
 		const surface = this.surface();
-		if (this.isEditing() || this.isRevealed()) this.#hover?.clear();
 		this.#placeReadout();
 		this.showCurrentMarker(this.playback());
 		if (surface && this.#stripRegions(surface.size.width).key !== this.#paintedKey) surface.requestFrame();
@@ -131,9 +124,6 @@ var SonicWavestrip = class extends SonicWaveElement {
 			look.colours[kind]
 		]);
 	}
-	previewValue() {
-		return this.#hover?.value();
-	}
 	renderMarkers() {
 		this.#markerBand.render(this.markerList(), this.markerProportions());
 	}

package/dist/default/elements/xy.js

@@ -3,12 +3,13 @@ import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { requireChild, template } from "../lib/render.js";
 import { bindDrag } from "../lib/pointer-drag.js";
-import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
+import { ReadoutClaim, revealDelay } from "./readout-claim.js";
 import { dragThresholdPx } from "../lib/drag-step.js";
 import { focusByPointer } from "../lib/focus-by-pointer.js";
 import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
 import { resetKeys, valueMapping } from "../lib/value-mapping.js";
+import { moveTo, resnap, setAsked } from "../lib/asked-value.js";
 import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
 
 //#region src/elements/xy.ts
@@ -337,7 +338,7 @@ var SonicXy = class extends SonicFormElement {
 			x: mappings.x.valueAt(pressed.x),
 			y: mappings.y.valueAt(pressed.y)
 		});
-		this.#claim.press(true);
+		this.#claim.press(true, revealDelay(this.#xy));
 		const start = (axis) => ({
 			from: this.#values[axis].value,
 			mapping: mappings[axis],
@@ -359,7 +360,7 @@ var SonicXy = class extends SonicFormElement {
 	}
 	#input(next) {
 		let hasMoved = false;
-		for (const axis of axes) if (this.#set(axis, next[axis] ?? NaN)) hasMoved = true;
+		for (const axis of axes) if (moveTo(this.#values[axis], this.#mappings()[axis], next[axis] ?? NaN)) hasMoved = true;
 		if (!hasMoved) return false;
 		this.render();
 		this.dispatchEvent(new Event("input", {
@@ -369,8 +370,9 @@ var SonicXy = class extends SonicFormElement {
 		return true;
 	}
 	#keyTo(axis, key) {
-		const next = this.#mappings()[axis].keyTarget(key, this.#values[axis].value);
-		const hasMoved = this.#set(axis, next ?? NaN);
+		const mapping = this.#mappings()[axis];
+		const next = mapping.keyTarget(key, this.#values[axis].value);
+		const hasMoved = moveTo(this.#values[axis], mapping, next ?? NaN);
 		this.#currentAxis = axis;
 		this.render();
 		this.#parts[axis].focus();
@@ -404,9 +406,8 @@ var SonicXy = class extends SonicFormElement {
 	#refresh() {
 		const mappings = this.#mappings();
 		for (const axis of axes) {
-			const axisValue = this.#values[axis];
 			const mapping = mappings[axis];
-			axisValue.value = mapping.snap(axisValue.asked ?? this.numberAttribute(axis, mapping.bounds[0]));
+			resnap(this.#values[axis], mapping, this.numberAttribute(axis, mapping.bounds[0]));
 		}
 		this.render();
 	}
@@ -454,15 +455,6 @@ var SonicXy = class extends SonicFormElement {
 			y: this.yDefault
 		});
 	}
-	#set(axis, next) {
-		if (!Number.isFinite(next)) return false;
-		const axisValue = this.#values[axis];
-		const snapped = this.#mappings()[axis].snap(next);
-		axisValue.asked = snapped;
-		if (snapped === axisValue.value) return false;
-		axisValue.value = snapped;
-		return true;
-	}
 	#taper(axis) {
 		return this.getAttribute(`${axis}-taper`) === "log" ? "log" : "linear";
 	}
@@ -477,10 +469,7 @@ var SonicXy = class extends SonicFormElement {
 			this.#refresh();
 			return;
 		}
-		const asked = toNumber(next);
-		const hasMoved = this.#set(axis, asked);
-		if (Number.isFinite(asked)) axisValue.asked = asked;
-		if (hasMoved) this.render();
+		if (setAsked(axisValue, this.#mappings()[axis], toNumber(next))) this.render();
 	}
 };
 

package/dist/default/lib/asked-value.js

@@ -0,0 +1,21 @@
+//#region src/lib/asked-value.ts
+function moveTo(cell, mapping, next) {
+	if (!Number.isFinite(next)) return false;
+	const snapped = mapping.snap(next);
+	cell.asked = snapped;
+	if (snapped === cell.value) return false;
+	cell.value = snapped;
+	return true;
+}
+function setAsked(cell, mapping, next) {
+	if (!Number.isFinite(next)) return false;
+	const hasMoved = moveTo(cell, mapping, next);
+	cell.asked = next;
+	return hasMoved;
+}
+function resnap(cell, mapping, fallback) {
+	cell.value = mapping.snap(cell.asked ?? fallback);
+}
+
+//#endregion
+export { moveTo, resnap, setAsked };

package/dist/default/lib/canvas-surface.js

@@ -14,6 +14,9 @@ function readEach(properties, read) {
 	return Object.fromEntries(Object.entries(properties).flatMap(([name, property]) => property === void 0 ? [] : [[name, read(property)]]));
 }
 var CanvasSurface = class {
+	get isVisible() {
+		return this.#isVisible;
+	}
 	get size() {
 		return this.#size;
 	}

package/dist/default/lib/marker-rider.js

@@ -11,7 +11,7 @@ function parkedPlacement(labels, index, [view, arrivingX]) {
 	const parked = labels[index];
 	if (!parked) return void 0;
 	const next = labels[index + 1];
-	const x = Math.max(view.insetPx, lineX(parked.start, view) + view.insetPx);
+	const x = Math.max(view.parkPx, lineX(parked.start, view) + view.insetPx);
 	const approachPx = next ? lineX(next.start, view) - lineX(view.playheadSeconds, view) : Infinity;
 	return {
 		index,
@@ -90,11 +90,12 @@ function measureWidths(control, className, texts) {
 	return widths;
 }
 function createLabelRider(control, options) {
-	const { className, colourProperty, fadeProperty, insetProperty } = options;
+	const { className, colourProperty, fadeProperty, insetProperty, parkProperty } = options;
 	const parked = labelSlot(requireChild(control, `.${className}`, HTMLElement));
 	const arriving = labelSlot(requireChild(control, `.${className} + .${className}`, HTMLElement));
 	let fadeShare = .25;
 	let insetPx = 0;
+	let parkPx = 0;
 	let measured = [];
 	return {
 		measure: (labels) => {
@@ -102,6 +103,7 @@ function createLabelRider(control, options) {
 			const styles = getComputedStyle(control);
 			fadeShare = readPxProperty(styles, fadeProperty, .25);
 			insetPx = readPxProperty(styles, insetProperty, 0);
+			parkPx = readPxProperty(styles, parkProperty, 0);
 			measured = labels.map((label, index) => ({
 				...label,
 				widthPx: widths[index] ?? 0
@@ -111,7 +113,8 @@ function createLabelRider(control, options) {
 			const layout = layoutRider(measured, {
 				...window,
 				fadeShare,
-				insetPx
+				insetPx,
+				parkPx
 			});
 			writeLabel(parked, [measured, colourProperty], layout.parked);
 			writeLabel(arriving, [measured, colourProperty], layout.arriving);

package/dist/default/lib/read-ms-property.js

@@ -0,0 +1,10 @@
+//#region src/lib/read-ms-property.ts
+function readMsProperty(styles, property, fallback) {
+	const text = styles.getPropertyValue(property).trim();
+	const parsed = Number.parseFloat(text);
+	if (!Number.isFinite(parsed)) return fallback;
+	return text.endsWith("ms") ? parsed : parsed * 1e3;
+}
+
+//#endregion
+export { readMsProperty };

package/dist/dev/elements/dial.js

@@ -1,4 +1,5 @@
 import { requireChild, template } from "../lib/render.js";
+import { createModulation } from "./modulation.js";
 import { SonicValueElement } from "./value-element.js";
 import { bindScale } from "./scale.js";
 
@@ -43,12 +44,15 @@ var SonicDial = class extends SonicValueElement {
 		this.reflect("modulation", amount);
 	}
 	get modulationValue() {
-		return this.readModulationValue();
+		return this.#modulation.value();
 	}
 	set modulationValue(value) {
-		this.writeModulationValue(this.#dial, "dial", value);
+		this.#modulation.write(value, this.isBound() ? this.mapping() : void 0);
 	}
 	#dial = renderDial();
+	#modulation = createModulation(this.#dial, "dial", (isModulated) => {
+		this.toggleState("modulated", isModulated);
+	});
 	connectedCallback() {
 		this.upgradeProperties("endless", "modulationValue", "modulation");
 		super.connectedCallback();
@@ -67,7 +71,12 @@ var SonicDial = class extends SonicValueElement {
 		}));
 	}
 	draw() {
-		this.writeProportions(this.#dial, "dial", this.endless ? 0 : this.modulation);
+		this.#modulation.draw({
+			mapping: this.mapping(),
+			modulation: this.endless ? 0 : this.modulation,
+			origin: this.originValue(),
+			value: this.value
+		});
 	}
 	focusTarget() {
 		return this.#dial;

package/dist/dev/elements/dial.js.map

@@ -1 +1 @@
-{"version":3,"file":"dial.js","names":[],"sources":["../../../src/elements/dial.ts"],"sourcesContent":["import { bindScale } from '#elements/scale.ts';\nimport { SonicValueElement } from '#elements/value-element.ts';\nimport { requireChild, template } from '#lib/render.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-dial': SonicDial;\n\t}\n}\n\nconst renderDial = template(\n\t/* HTML */ `\n\t\t<div class=\"sonic-dial\" role=\"slider\" tabindex=\"0\">\n\t\t\t<div class=\"sonic-dial-scale\" aria-hidden=\"true\"></div>\n\t\t\t<div class=\"sonic-dial-notches\"></div>\n\t\t\t<div class=\"sonic-dial-ring\"></div>\n\t\t\t<div class=\"sonic-dial-modulation\"></div>\n\t\t\t<div class=\"sonic-dial-cap\"></div>\n\t\t\t<div class=\"sonic-dial-indicator\"></div>\n\t\t\t<div class=\"sonic-dial-readout\" popover=\"manual\">\n\t\t\t\t<span></span>\n\t\t\t\t<input\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\tclass=\"sonic-dial-entry\"\n\t\t\t\t\tenterkeyhint=\"done\"\n\t\t\t\t\thidden\n\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tHTMLDivElement,\n);\n\nexport class SonicDial extends SonicValueElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicValueElement.observedAttributes,\n\t\t'endless',\n\t\t'modulation',\n\t];\n\n\tget endless(): boolean {\n\t\treturn this.hasAttribute('endless');\n\t}\n\n\tset endless(isEndless: boolean) {\n\t\tthis.reflect('endless', isEndless);\n\t}\n\n\t// fallow-ignore-next-line code-duplication -- one accessor pair per reflected attribute\n\tget modulation(): number {\n\t\treturn this.numberAttribute('modulation', 0);\n\t}\n\n\tset modulation(amount: number | undefined) {\n\t\tthis.reflect('modulation', amount);\n\t}\n\n\t// fallow-ignore-next-line code-duplication -- one accessor pair per property\n\tget modulationValue(): number | undefined {\n\t\treturn this.readModulationValue();\n\t}\n\n\tset modulationValue(value: null | number | undefined) {\n\t\tthis.writeModulationValue(this.#dial, 'dial', value);\n\t}\n\n\treadonly #dial = renderDial();\n\n\toverride connectedCallback(): void {\n\t\tthis.upgradeProperties('endless', 'modulationValue', 'modulation');\n\t\tsuper.connectedCallback();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst dial = this.#dial;\n\n\t\tbindScale(\n\t\t\tthis,\n\t\t\t{ control: dial, marks: requireChild(dial, '.sonic-dial-scale', HTMLDivElement) },\n\t\t\tsignal,\n\t\t);\n\t\tthis.render();\n\t\tthis.checkStyles(dial, 'dial.css');\n\t\tthis.bindGestures(dial, signal, () => ({\n\t\t\tposition: (event) => -event.clientY,\n\t\t\ttravelPx: this.travelPx(dial, '--_sonic-dial-travel'),\n\t\t}));\n\t}\n\n\tprotected draw(): void {\n\t\tthis.writeProportions(this.#dial, 'dial', this.endless ? 0 : this.modulation);\n\t}\n\n\tprotected override focusTarget(): HTMLElement {\n\t\treturn this.#dial;\n\t}\n\n\tprotected override isWrapping(): boolean {\n\t\treturn this.endless;\n\t}\n}\n"],"mappings":";;;;;AAUA,MAAM,aAAa,SACP;;;;;;;;;;;;;;;;;;;;IAqBX,cACD;AAEA,IAAa,YAAb,cAA+B,kBAAkB;CAChD,OAAyB,qBAAqB;EAC7C,GAAG,kBAAkB;EACrB;EACA;CACD;CAEA,IAAI,UAAmB;EACtB,OAAO,KAAK,aAAa,SAAS;CACnC;CAEA,IAAI,QAAQ,WAAoB;EAC/B,KAAK,QAAQ,WAAW,SAAS;CAClC;CAGA,IAAI,aAAqB;EACxB,OAAO,KAAK,gBAAgB,cAAc,CAAC;CAC5C;CAEA,IAAI,WAAW,QAA4B;EAC1C,KAAK,QAAQ,cAAc,MAAM;CAClC;CAGA,IAAI,kBAAsC;EACzC,OAAO,KAAK,oBAAoB;CACjC;CAEA,IAAI,gBAAgB,OAAkC;EACrD,KAAK,qBAAqB,KAAK,OAAO,QAAQ,KAAK;CACpD;CAEA,AAAS,QAAQ,WAAW;CAE5B,AAAS,oBAA0B;EAClC,KAAK,kBAAkB,WAAW,mBAAmB,YAAY;EACjE,MAAM,kBAAkB;CACzB;CAEA,AAAU,QAAQ,QAA2B;EAC5C,MAAM,OAAO,KAAK;EAElB,UACC,MACA;GAAE,SAAS;GAAM,OAAO,aAAa,MAAM,qBAAqB,cAAc;EAAE,GAChF,MACD;EACA,KAAK,OAAO;EACZ,KAAK,YAAY,MAAM,UAAU;EACjC,KAAK,aAAa,MAAM,eAAe;GACtC,WAAW,UAAU,CAAC,MAAM;GAC5B,UAAU,KAAK,SAAS,MAAM,sBAAsB;EACrD,EAAE;CACH;CAEA,AAAU,OAAa;EACtB,KAAK,iBAAiB,KAAK,OAAO,QAAQ,KAAK,UAAU,IAAI,KAAK,UAAU;CAC7E;CAEA,AAAmB,cAA2B;EAC7C,OAAO,KAAK;CACb;CAEA,AAAmB,aAAsB;EACxC,OAAO,KAAK;CACb;AACD"}
+{"version":3,"file":"dial.js","names":[],"sources":["../../../src/elements/dial.ts"],"sourcesContent":["import { createModulation } from '#elements/modulation.ts';\nimport { bindScale } from '#elements/scale.ts';\nimport { SonicValueElement } from '#elements/value-element.ts';\nimport { requireChild, template } from '#lib/render.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-dial': SonicDial;\n\t}\n}\n\nconst renderDial = template(\n\t/* HTML */ `\n\t\t<div class=\"sonic-dial\" role=\"slider\" tabindex=\"0\">\n\t\t\t<div class=\"sonic-dial-scale\" aria-hidden=\"true\"></div>\n\t\t\t<div class=\"sonic-dial-notches\"></div>\n\t\t\t<div class=\"sonic-dial-ring\"></div>\n\t\t\t<div class=\"sonic-dial-modulation\"></div>\n\t\t\t<div class=\"sonic-dial-cap\"></div>\n\t\t\t<div class=\"sonic-dial-indicator\"></div>\n\t\t\t<div class=\"sonic-dial-readout\" popover=\"manual\">\n\t\t\t\t<span></span>\n\t\t\t\t<input\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\tclass=\"sonic-dial-entry\"\n\t\t\t\t\tenterkeyhint=\"done\"\n\t\t\t\t\thidden\n\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tHTMLDivElement,\n);\n\nexport class SonicDial extends SonicValueElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicValueElement.observedAttributes,\n\t\t'endless',\n\t\t'modulation',\n\t];\n\n\tget endless(): boolean {\n\t\treturn this.hasAttribute('endless');\n\t}\n\n\tset endless(isEndless: boolean) {\n\t\tthis.reflect('endless', isEndless);\n\t}\n\n\t// fallow-ignore-next-line code-duplication -- one accessor pair per reflected attribute\n\tget modulation(): number {\n\t\treturn this.numberAttribute('modulation', 0);\n\t}\n\n\tset modulation(amount: number | undefined) {\n\t\tthis.reflect('modulation', amount);\n\t}\n\n\t// fallow-ignore-next-line code-duplication -- one accessor pair per property\n\tget modulationValue(): number | undefined {\n\t\treturn this.#modulation.value();\n\t}\n\n\tset modulationValue(value: null | number | undefined) {\n\t\tthis.#modulation.write(value, this.isBound() ? this.mapping() : undefined);\n\t}\n\n\treadonly #dial = renderDial();\n\n\treadonly #modulation = createModulation(this.#dial, 'dial', (isModulated) => {\n\t\tthis.toggleState('modulated', isModulated);\n\t});\n\n\toverride connectedCallback(): void {\n\t\tthis.upgradeProperties('endless', 'modulationValue', 'modulation');\n\t\tsuper.connectedCallback();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst dial = this.#dial;\n\n\t\tbindScale(\n\t\t\tthis,\n\t\t\t{ control: dial, marks: requireChild(dial, '.sonic-dial-scale', HTMLDivElement) },\n\t\t\tsignal,\n\t\t);\n\t\tthis.render();\n\t\tthis.checkStyles(dial, 'dial.css');\n\t\tthis.bindGestures(dial, signal, () => ({\n\t\t\tposition: (event) => -event.clientY,\n\t\t\ttravelPx: this.travelPx(dial, '--_sonic-dial-travel'),\n\t\t}));\n\t}\n\n\tprotected draw(): void {\n\t\tthis.#modulation.draw({\n\t\t\tmapping: this.mapping(),\n\t\t\tmodulation: this.endless ? 0 : this.modulation,\n\t\t\torigin: this.originValue(),\n\t\t\tvalue: this.value,\n\t\t});\n\t}\n\n\tprotected override focusTarget(): HTMLElement {\n\t\treturn this.#dial;\n\t}\n\n\tprotected override isWrapping(): boolean {\n\t\treturn this.endless;\n\t}\n}\n"],"mappings":";;;;;;AAWA,MAAM,aAAa,SACP;;;;;;;;;;;;;;;;;;;;IAqBX,cACD;AAEA,IAAa,YAAb,cAA+B,kBAAkB;CAChD,OAAyB,qBAAqB;EAC7C,GAAG,kBAAkB;EACrB;EACA;CACD;CAEA,IAAI,UAAmB;EACtB,OAAO,KAAK,aAAa,SAAS;CACnC;CAEA,IAAI,QAAQ,WAAoB;EAC/B,KAAK,QAAQ,WAAW,SAAS;CAClC;CAGA,IAAI,aAAqB;EACxB,OAAO,KAAK,gBAAgB,cAAc,CAAC;CAC5C;CAEA,IAAI,WAAW,QAA4B;EAC1C,KAAK,QAAQ,cAAc,MAAM;CAClC;CAGA,IAAI,kBAAsC;EACzC,OAAO,KAAK,YAAY,MAAM;CAC/B;CAEA,IAAI,gBAAgB,OAAkC;EACrD,KAAK,YAAY,MAAM,OAAO,KAAK,QAAQ,IAAI,KAAK,QAAQ,IAAI,MAAS;CAC1E;CAEA,AAAS,QAAQ,WAAW;CAE5B,AAAS,cAAc,iBAAiB,KAAK,OAAO,SAAS,gBAAgB;EAC5E,KAAK,YAAY,aAAa,WAAW;CAC1C,CAAC;CAED,AAAS,oBAA0B;EAClC,KAAK,kBAAkB,WAAW,mBAAmB,YAAY;EACjE,MAAM,kBAAkB;CACzB;CAEA,AAAU,QAAQ,QAA2B;EAC5C,MAAM,OAAO,KAAK;EAElB,UACC,MACA;GAAE,SAAS;GAAM,OAAO,aAAa,MAAM,qBAAqB,cAAc;EAAE,GAChF,MACD;EACA,KAAK,OAAO;EACZ,KAAK,YAAY,MAAM,UAAU;EACjC,KAAK,aAAa,MAAM,eAAe;GACtC,WAAW,UAAU,CAAC,MAAM;GAC5B,UAAU,KAAK,SAAS,MAAM,sBAAsB;EACrD,EAAE;CACH;CAEA,AAAU,OAAa;EACtB,KAAK,YAAY,KAAK;GACrB,SAAS,KAAK,QAAQ;GACtB,YAAY,KAAK,UAAU,IAAI,KAAK;GACpC,QAAQ,KAAK,YAAY;GACzB,OAAO,KAAK;EACb,CAAC;CACF;CAEA,AAAmB,cAA2B;EAC7C,OAAO,KAAK;CACb;CAEA,AAAmB,aAAsB;EACxC,OAAO,KAAK;CACb;AACD"}

package/dist/dev/elements/envelope.js

@@ -2,8 +2,8 @@ import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicElement } from "./sonic-element.js";
 import { requireChild, template } from "../lib/render.js";
 import { bindDrag } from "../lib/pointer-drag.js";
-import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
+import { ReadoutClaim, revealDelay } from "./readout-claim.js";
 import { dragThresholdPx } from "../lib/drag-step.js";
 import { SonicValueElement, linkValue } from "./value-element.js";
 import { adsrPath, adsrShape, adsrStages, timeStages } from "../lib/adsr-shape.js";
@@ -269,7 +269,7 @@ var SonicEnvelope = class extends SonicElement {
 		const pressed = this.#pressed(event);
 		if (!pressed || pressed.drives.length === 0) return void 0;
 		const { drives, isFlipped, part } = pressed;
-		this.#claim.press(true);
+		this.#claim.press(true, revealDelay(this.#envelope));
 		this.#held = part;
 		this.#drawBracket();
 		const box = this.#graph.getBoundingClientRect();