@xsynaptic/sonic-ui 0.5.0 → 0.6.1

package/dist/dev/elements/value-element.d.ts

@@ -1,6 +1,5 @@
-import { TimeRegions } from "../lib/time-regions.js";
-import { ValueMapping } from "../lib/value-mapping.js";
 import { SonicFormElement } from "./form-element.js";
+import { ValueMapping } from "../lib/value-mapping.js";
 //#region src/elements/value-element.d.ts
 export interface ValueAxis {
   fromProportion?: number;
@@ -12,8 +11,6 @@ export interface ValueAxis {
 export declare abstract class SonicValueElement extends SonicFormElement {
   #private;
   static readonly observedAttributes: string[];
-  get buffered(): Array<[number, number]>;
-  set buffered(regions: TimeRegions | undefined);
   get default(): number | undefined;
   set default(value: number | undefined);
   get detent(): number | undefined;
@@ -49,12 +46,11 @@ export declare abstract class SonicValueElement extends SonicFormElement {
   get taper(): 'linear' | 'log';
   set taper(curve: 'linear' | 'log' | undefined);
   get value(): number;
-  set value(next: number);
+  set value(next: null | number | undefined);
   get valueText(): string;
   attributeChangedCallback(name: string): void;
   connectedCallback(): void;
   protected bindGestures(control: HTMLElement, signal: AbortSignal, grab: (event: PointerEvent) => undefined | ValueAxis): void;
-  protected bindScale(control: HTMLElement, marks: HTMLElement, signal: AbortSignal): void;
   protected controlOrientation(): 'horizontal' | 'vertical' | undefined;
   protected controlRole(): 'slider' | 'spinbutton';
   protected abstract draw(): void;
@@ -62,22 +58,24 @@ export declare abstract class SonicValueElement extends SonicFormElement {
   protected heldFrom(): number | undefined;
   protected heldWrite(_next: number): void;
   protected holdChanged(): void;
-  protected hoverReadout(value: number | undefined): void;
   protected input(next: number): boolean;
+  protected isEditing(): boolean;
   protected isRevealed(): boolean;
   protected isWrapping(): boolean;
   protected mapping(): ValueMapping;
   protected originValue(): number;
+  protected previewValue(): number | undefined;
   protected proportionsChanged(): void;
   protected readModulationValue(): number | undefined;
   protected readoutValue(): number;
   protected render(): void;
+  protected renderReadout(): void;
   protected restoreState(state: string): void;
   protected scrubsKeyRepeat(): boolean;
   protected springTarget(): number | undefined;
   protected tapTarget(): number | undefined;
   protected travelPx(control: HTMLElement, property: `--_sonic-${string}`): number;
-  protected writeModulationValue(control: HTMLElement, prefix: 'dial' | 'slider', next: number | undefined): void;
+  protected writeModulationValue(control: HTMLElement, prefix: 'dial' | 'slider', next: null | number | undefined): void;
   protected writeProportions(control: HTMLElement, prefix: 'dial' | 'slider', modulation: number): void;
 }
 //#endregion

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

@@ -1,17 +1,16 @@
-import { clamp } from "../lib/math.js";
-import { placeChildren, requireChild } from "../lib/render.js";
+import { clamp, toNumber } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
+import { requireChild } from "../lib/render.js";
 import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
 import { ValueEntry } from "./value-entry.js";
-import { copyNode } from "../lib/copy-node.js";
 import { dragThresholdPx, startDrag, stepDrag } from "../lib/drag-step.js";
 import { focusByPointer } from "../lib/focus-by-pointer.js";
 import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
 import { parseNumberList } from "../lib/number-list.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 import { readPxProperty } from "../lib/read-px-property.js";
-import { readRegions } from "../lib/time-regions.js";
 import { resetKeys, valueMapping } from "../lib/value-mapping.js";
 
 //#region src/elements/value-element.ts
@@ -36,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);
@@ -63,6 +50,7 @@ var SonicValueElement = class extends SonicFormElement {
 		"origin",
 		"readout",
 		"step",
+		"tabindex",
 		"taper",
 		"value",
 		"positions"
@@ -88,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");
 	}
@@ -203,151 +184,130 @@ var SonicValueElement = class extends SonicFormElement {
 		return this.#value;
 	}
 	set value(next) {
+		if (next === void 0 || next === null) {
+			this.formResetCallback();
+			return;
+		}
+		const value = toNumber(next);
 		if (this.#isHeld()) {
-			this.heldWrite(next);
+			this.heldWrite(value);
 			return;
 		}
-		this.#write(next);
+		this.#write(value);
+		if (Number.isFinite(value)) this.#asked = value;
 	}
 	get valueText() {
 		return this.#textFor(this.#value);
 	}
-	#buffered = [];
+	#asked;
 	#claim = new ReadoutClaim(() => {
 		this.#renderHold();
 	});
-	#drag;
 	#entry;
-	#escapeWatch;
 	#formatSpokenValue;
 	#formatValue;
 	#instance = String(instanceCount += 1);
-	#isDirty = false;
 	#isModulated = false;
 	#keyScrub;
 	#land;
 	#limit;
+	#mapping;
 	#modulationValue;
 	#parseValue;
+	#pointerDrag;
 	#positions;
 	#readout;
-	#scaleMarks;
 	#value = 0;
 	#watchers = /* @__PURE__ */ new Set();
 	attributeChangedCallback(name) {
+		this.#mapping = void 0;
 		this.#positions = parseNumberList(this.getAttribute("positions"));
 		if (name === "value") {
 			if (this.#isHeld()) {
 				this.heldWrite(this.numberAttribute("value", this.min));
 				return;
 			}
-			this.#isDirty = false;
+			this.#asked = void 0;
 		}
-		if (name === "disabled" && this.isDisabled()) {
-			this.#entry?.close(false);
-			this.#endDrag();
-			this.#endKeyScrub();
-		}
-		this.#value = this.mapping().snap(this.#isDirty ? this.#value : this.numberAttribute("value", this.min));
-		if (proportionAttributes.has(name)) this.proportionsChanged();
+		if (name === "disabled" && this.isDisabled()) this.#endHolds();
+		this.#value = this.mapping().snap(this.#asked ?? this.numberAttribute("value", this.min));
+		if (proportionAttributes.has(name) && this.isBound()) this.proportionsChanged();
 		this.render();
 	}
 	connectedCallback() {
-		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) {
 		const entry = this.#bindEntry(control, signal);
-		control.addEventListener("pointerdown", (event) => {
-			if (!this.#canPress(event, entry)) return;
-			this.#endDrag();
-			this.toggleState("springing", false);
-			if (event.pointerType === "touch") event.preventDefault();
-			focusByPointer(control);
-			if (isResetPress(event)) {
-				this.#reset();
-				return;
+		this.#pointerDrag = bindDrag(control, {
+			cancel: (drag) => {
+				if (drag.isKeptOnCancel !== true) this.input(drag.fromValue);
+			},
+			grab: (event) => {
+				if (isMenuPress(event) || this.isDisabled() || entry.isOpen) return;
+				this.toggleState("springing", false);
+				if (event.pointerType === "touch") event.preventDefault();
+				focusByPointer(control);
+				if (isResetPress(event)) {
+					this.#reset();
+					return;
+				}
+				const fromValue = this.#value;
+				const axis = grab(event);
+				if (!axis) return;
+				const drag = {
+					...axis,
+					fromValue,
+					isOutside: false,
+					isRevealed: false,
+					revealTimer: void 0,
+					state: this.#startDrag(control, axis, event)
+				};
+				drag.revealTimer = setTimeout(() => {
+					this.#reveal(drag);
+				}, 250);
+				return drag;
+			},
+			lift: (drag, event) => {
+				const tap = drag.state.isEngaged ? void 0 : this.tapTarget();
+				if (tap !== void 0) {
+					entry.forgetPress();
+					this.#commit(tap);
+					return;
+				}
+				if (!entry.press(event) || this.springTarget() !== void 0) return;
+				if (this.doublePress === "reset") this.#reset();
+				else entry.open();
+			},
+			move: (drag, event) => {
+				this.#dragTo(drag, event);
+			},
+			release: (drag) => {
+				this.#releaseDrag(drag);
+			},
+			toggle: (isDragging) => {
+				this.toggleState("dragging", isDragging);
 			}
-			const fromValue = this.#value;
-			const axis = grab(event);
-			if (!axis) return;
-			const drag = {
-				...axis,
-				fromValue,
-				isOutside: false,
-				isRevealed: false,
-				pointerId: event.pointerId,
-				revealTimer: void 0,
-				state: this.#startDrag(control, axis, event)
-			};
-			drag.revealTimer = setTimeout(() => {
-				this.#reveal(drag);
-			}, 250);
-			this.#drag = drag;
-			control.setPointerCapture(event.pointerId);
-			this.toggleState("dragging", true);
-		}, { signal });
-		control.addEventListener("pointermove", (event) => {
-			const drag = this.#drag;
-			if (event.pointerId === drag?.pointerId) this.#dragTo(drag, event);
-		}, { signal });
-		const endDrag = (event) => {
-			if (event.pointerId === this.#drag?.pointerId) this.#endDrag();
-		};
-		control.addEventListener("pointercancel", (event) => {
-			const drag = this.#drag;
-			if (event.pointerId === drag?.pointerId && drag.isKeptOnCancel !== true) this.input(drag.fromValue);
-			endDrag(event);
+		}, signal);
+		control.addEventListener("pointercancel", () => {
 			entry.forgetPress();
 		}, { signal });
-		control.addEventListener("lostpointercapture", endDrag, { signal });
-		control.addEventListener("pointerup", (event) => {
-			const drag = this.#drag;
-			if (event.pointerId !== drag?.pointerId) return;
-			this.#endDrag();
-			const tap = drag.state.isEngaged ? void 0 : this.tapTarget();
-			if (tap !== void 0) {
-				entry.forgetPress();
-				this.#commit(tap);
-				return;
-			}
-			if (!entry.press(event) || this.springTarget() !== void 0) return;
-			if (this.doublePress === "reset") this.#reset();
-			else entry.open();
-		}, { signal });
 		this.#bindKeys(control, entry, signal);
 		signal.addEventListener("abort", () => {
-			this.#endDrag();
 			this.#endKeyScrub();
 			this.#concealKeyReveal();
 		}, { once: true });
 	}
-	bindScale(control, marks, signal) {
-		this.#scaleMarks = marks;
-		this.mirrorChildren({
-			control,
-			copy: scaleMark,
-			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]"),
-			place: (copies) => {
-				placeChildren(marks, copies);
-				this.#renderScale();
-			}
-		}, signal);
-	}
 	controlOrientation() {}
 	controlRole() {
 		return "slider";
 	}
 	heldFrom() {
-		return this.#drag?.fromValue ?? this.#keyScrub?.fromValue;
+		return this.#dragging()?.fromValue ?? this.#keyScrub?.fromValue;
 	}
 	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);
@@ -358,6 +318,9 @@ var SonicValueElement = class extends SonicFormElement {
 		}));
 		return true;
 	}
+	isEditing() {
+		return this.#entry?.isOpen === true;
+	}
 	isRevealed() {
 		return this.#claim.isRevealed;
 	}
@@ -365,8 +328,9 @@ var SonicValueElement = class extends SonicFormElement {
 		return false;
 	}
 	mapping() {
+		if (this.#mapping) return this.#mapping;
 		const { detent, midpoint } = this;
-		return valueMapping({
+		this.#mapping = valueMapping({
 			...detent === void 0 ? {} : { detent },
 			...this.#positions ? { positions: this.#positions } : {},
 			max: this.max,
@@ -377,24 +341,33 @@ var SonicValueElement = class extends SonicFormElement {
 			step: this.step,
 			taper: this.taper
 		});
+		return this.#mapping;
 	}
 	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() {
-		this.draw();
-		this.#renderScale();
-		this.toggleState("at-origin", !this.isWrapping() && this.#value === this.mapping().snap(this.originValue()));
-		this.#renderAria(this.focusTarget(), this.controlOrientation());
+		if (this.isBound()) this.#renderControl();
 		for (const listener of this.#watchers) listener();
 	}
+	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);
 	}
@@ -407,9 +380,10 @@ var SonicValueElement = class extends SonicFormElement {
 		return Math.max(1, readPxProperty(getComputedStyle(control), property, fallbackTravelPx));
 	}
 	writeModulationValue(control, prefix, next) {
-		if (next !== void 0 && !Number.isFinite(next)) return;
-		this.#modulationValue = next;
-		this.#writeModulationProportion(control, prefix);
+		const value = next === void 0 || next === null ? void 0 : toNumber(next);
+		if (value !== void 0 && !Number.isFinite(value)) return;
+		this.#modulationValue = value;
+		if (this.isBound()) this.#writeModulationProportion(control, prefix);
 	}
 	writeProportions(control, prefix, modulation) {
 		const { style } = control;
@@ -439,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();
@@ -469,7 +442,7 @@ var SonicValueElement = class extends SonicFormElement {
 		control.addEventListener("keyup", (event) => {
 			const isMeta = event.key === "Meta";
 			if (isMeta || event.key === this.#keyScrub?.key) this.#endKeyScrub();
-			if (isMeta && this.#drag) return;
+			if (isMeta && this.#dragging()) return;
 			if (isMeta || this.mapping().keyTarget(event.key, this.#value) !== void 0) this.#springBack();
 		}, { signal });
 		control.addEventListener("blur", () => {
@@ -478,10 +451,6 @@ var SonicValueElement = class extends SonicFormElement {
 			this.#springBack();
 		}, { signal });
 	}
-	#canPress(event, entry) {
-		if (event.button !== 0 || isMenuPress(event) || this.isDisabled() || entry.isOpen) return false;
-		return !this.#drag || this.#drag.pointerId === event.pointerId;
-	}
 	#commit(next, direction = 0) {
 		const landed = Number.isFinite(next) ? this.#land?.(next, direction) ?? next : next;
 		if (this.input(landed)) this.dispatchEvent(new Event("change", { bubbles: true }));
@@ -489,6 +458,9 @@ var SonicValueElement = class extends SonicFormElement {
 	#concealKeyReveal() {
 		if (this.#claim.conceal("keys")) this.#renderHold();
 	}
+	#dragging() {
+		return this.#pointerDrag?.current();
+	}
 	#dragTo(drag, event) {
 		const isOutside = drag.outside?.(event) === true;
 		const wasEngaged = drag.state.isEngaged;
@@ -506,16 +478,10 @@ var SonicValueElement = class extends SonicFormElement {
 		drag.isOutside = isOutside;
 		this.#renderDragReveal(drag);
 	}
-	#endDrag() {
-		const drag = this.#drag;
-		if (!drag) return;
-		clearTimeout(drag.revealTimer);
-		this.#drag = void 0;
-		this.toggleState("dragging", false);
-		this.#claim.conceal("drag");
-		this.#renderHold();
-		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
-		this.#springBack();
+	#endHolds() {
+		this.#entry?.close(false);
+		this.#pointerDrag?.end();
+		this.#endKeyScrub();
 	}
 	#endKeyScrub() {
 		const scrub = this.#keyScrub;
@@ -525,7 +491,7 @@ var SonicValueElement = class extends SonicFormElement {
 		if (this.#value !== scrub.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
 	#isHeld() {
-		return this.#drag !== void 0 || this.#keyScrub !== void 0;
+		return this.#dragging() !== void 0 || this.#keyScrub !== void 0;
 	}
 	#keyTarget(key) {
 		if (resetKeys.has(key)) return this.default;
@@ -539,33 +505,42 @@ var SonicValueElement = class extends SonicFormElement {
 		this.#endKeyScrub();
 		this.#commit(next, next > this.#value ? 1 : -1);
 	}
+	#releaseDrag(drag) {
+		clearTimeout(drag.revealTimer);
+		this.#claim.conceal("drag");
+		this.#renderHold();
+		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
+		this.#springBack();
+	}
 	#renderAria(control, orientation) {
 		this.writeFormValue(String(this.#value), String(this.#value));
 		if (this.#entry?.isOpen) {
 			for (const name of roleAttributes) control.removeAttribute(name);
 			this.forwardNaming(control, false);
-			this.#renderReadout();
+			this.renderReadout();
 			return;
 		}
 		const [low, high] = this.mapping().bounds;
-		control.setAttribute("role", this.controlRole());
-		control.setAttribute("aria-valuemin", String(low));
-		control.setAttribute("aria-valuemax", String(high));
-		control.setAttribute("aria-valuenow", String(this.#value));
-		if (orientation) control.setAttribute("aria-orientation", orientation);
+		writeAttribute(control, "role", this.controlRole());
+		writeAttribute(control, "aria-valuemin", String(low));
+		writeAttribute(control, "aria-valuemax", String(high));
+		writeAttribute(control, "aria-valuenow", String(this.#value));
+		if (orientation) writeAttribute(control, "aria-orientation", orientation);
 		writeAttribute(control, "aria-valuetext", (this.#formatSpokenValue ?? this.#formatValue)?.(this.#value));
 		this.forwardNaming(control, true);
 		this.#renderDisabled(control);
-		this.#renderReadout();
+		this.renderReadout();
+	}
+	#renderControl() {
+		this.draw();
+		this.toggleState("at-origin", !this.isWrapping() && this.#value === this.mapping().snap(this.originValue()));
+		this.#renderAria(this.focusTarget(), this.controlOrientation());
 	}
 	#renderDisabled(control) {
-		if (this.isDisabled()) {
-			control.setAttribute("aria-disabled", "true");
-			control.removeAttribute("tabindex");
-			return;
-		}
-		control.removeAttribute("aria-disabled");
-		control.setAttribute("tabindex", "0");
+		const isDisabled = this.isDisabled();
+		writeAttribute(control, "aria-disabled", isDisabled ? "true" : void 0);
+		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");
@@ -573,33 +548,14 @@ 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);
 	}
 	#reveal(drag) {
-		if (drag.isRevealed || this.#drag !== drag) return;
+		if (drag.isRevealed || this.#dragging() !== drag) return;
 		drag.isRevealed = true;
 		this.#renderDragReveal(drag);
 	}
@@ -613,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;
@@ -642,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;
@@ -666,8 +621,8 @@ var SonicValueElement = class extends SonicFormElement {
 	}
 	#write(next) {
 		if (!Number.isFinite(next)) return;
-		this.#isDirty = true;
 		const clamped = this.mapping().snap(next);
+		this.#asked = clamped;
 		if (clamped === this.#value) return;
 		this.#value = clamped;
 		this.render();