@xsynaptic/sonic-ui 0.4.0 → 0.5.0

package/dist/dev/elements/xy.js

@@ -0,0 +1,474 @@
+import { clampProportion } from "../lib/math.js";
+import { requireChild, template } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { SonicFormElement } from "./form-element.js";
+import { ReadoutClaim } from "./readout-claim.js";
+import { Readout } from "./readout.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 { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
+import { bindDrag } from "../lib/pointer-drag.js";
+
+//#region src/elements/xy.ts
+const axes = ["x", "y"];
+const keyMoves = /* @__PURE__ */ new Map([
+	["ArrowDown", ["y", "ArrowDown"]],
+	["ArrowLeft", ["x", "ArrowLeft"]],
+	["ArrowRight", ["x", "ArrowRight"]],
+	["ArrowUp", ["y", "ArrowUp"]],
+	["End", ["x", "PageUp"]],
+	["Home", ["x", "PageDown"]],
+	["PageDown", ["y", "PageDown"]],
+	["PageUp", ["y", "PageUp"]]
+]);
+const orientations = {
+	x: "horizontal",
+	y: "vertical"
+};
+const renderXy = template(`
+		<div class="sonic-xy">
+			<div class="sonic-xy-field" aria-hidden="true"></div>
+			<div class="sonic-xy-puck">
+				<div class="sonic-xy-axis" data-sonic-axis="x" role="slider" tabindex="0"></div>
+				<div
+					class="sonic-xy-axis"
+					data-sonic-axis="y"
+					role="slider"
+					tabindex="-1"
+					aria-hidden="true"
+				></div>
+			</div>
+			<div class="sonic-xy-readout" aria-hidden="true" popover="manual"><span></span></div>
+		</div>
+	`, HTMLDivElement);
+var SonicXy = class extends SonicFormElement {
+	static observedAttributes = [
+		...SonicFormElement.observedAttributes,
+		"name",
+		"readout",
+		"x",
+		"x-label",
+		"x-max",
+		"x-midpoint",
+		"x-min",
+		"x-origin",
+		"x-step",
+		"x-taper",
+		"y",
+		"y-label",
+		"y-max",
+		"y-midpoint",
+		"y-min",
+		"y-origin",
+		"y-step",
+		"y-taper"
+	];
+	get formatValue() {
+		return this.#formatValue;
+	}
+	set formatValue(format) {
+		this.#formatValue = format;
+		this.render();
+	}
+	get readout() {
+		return this.hasAttribute("readout");
+	}
+	set readout(isEnabled) {
+		this.reflect("readout", isEnabled);
+	}
+	get x() {
+		return this.#values.x.value;
+	}
+	set x(next) {
+		this.#write("x", next);
+	}
+	get xDefault() {
+		return this.optionalNumberAttribute("x-default");
+	}
+	set xDefault(value) {
+		this.reflect("x-default", value);
+	}
+	get xLabel() {
+		return this.getAttribute("x-label") ?? void 0;
+	}
+	set xLabel(label) {
+		this.reflect("x-label", label);
+	}
+	get xMax() {
+		return this.numberAttribute("x-max", 100);
+	}
+	set xMax(value) {
+		this.reflect("x-max", value);
+	}
+	get xMidpoint() {
+		return this.optionalNumberAttribute("x-midpoint");
+	}
+	set xMidpoint(value) {
+		this.reflect("x-midpoint", value);
+	}
+	get xMin() {
+		return this.numberAttribute("x-min", 0);
+	}
+	set xMin(value) {
+		this.reflect("x-min", value);
+	}
+	get xOrigin() {
+		return this.optionalNumberAttribute("x-origin");
+	}
+	set xOrigin(value) {
+		this.reflect("x-origin", value);
+	}
+	get xStep() {
+		return this.numberAttribute("x-step", 1);
+	}
+	set xStep(value) {
+		this.reflect("x-step", value);
+	}
+	get xTaper() {
+		return this.#taper("x");
+	}
+	set xTaper(curve) {
+		this.reflect("x-taper", curve);
+	}
+	get y() {
+		return this.#values.y.value;
+	}
+	set y(next) {
+		this.#write("y", next);
+	}
+	get yDefault() {
+		return this.optionalNumberAttribute("y-default");
+	}
+	set yDefault(value) {
+		this.reflect("y-default", value);
+	}
+	get yLabel() {
+		return this.getAttribute("y-label") ?? void 0;
+	}
+	set yLabel(label) {
+		this.reflect("y-label", label);
+	}
+	get yMax() {
+		return this.numberAttribute("y-max", 100);
+	}
+	set yMax(value) {
+		this.reflect("y-max", value);
+	}
+	get yMidpoint() {
+		return this.optionalNumberAttribute("y-midpoint");
+	}
+	set yMidpoint(value) {
+		this.reflect("y-midpoint", value);
+	}
+	get yMin() {
+		return this.numberAttribute("y-min", 0);
+	}
+	set yMin(value) {
+		this.reflect("y-min", value);
+	}
+	get yOrigin() {
+		return this.optionalNumberAttribute("y-origin");
+	}
+	set yOrigin(value) {
+		this.reflect("y-origin", value);
+	}
+	get yStep() {
+		return this.numberAttribute("y-step", 1);
+	}
+	set yStep(value) {
+		this.reflect("y-step", value);
+	}
+	get yTaper() {
+		return this.#taper("y");
+	}
+	set yTaper(curve) {
+		this.reflect("y-taper", curve);
+	}
+	#claim = new ReadoutClaim(() => {
+		this.#renderReadout();
+	});
+	#currentAxis = "x";
+	#xy = renderXy();
+	#field = requireChild(this.#xy, ".sonic-xy-field", HTMLDivElement);
+	#formatValue;
+	#parts = {
+		x: requireChild(this.#xy, "[data-sonic-axis=\"x\"]", HTMLDivElement),
+		y: requireChild(this.#xy, "[data-sonic-axis=\"y\"]", HTMLDivElement)
+	};
+	#pointerDrag;
+	#puck = requireChild(this.#xy, ".sonic-xy-puck", HTMLDivElement);
+	#readout = new Readout(requireChild(this.#xy, ".sonic-xy-readout", HTMLDivElement));
+	#values = {
+		x: {
+			isDirty: false,
+			value: 0
+		},
+		y: {
+			isDirty: false,
+			value: 0
+		}
+	};
+	attributeChangedCallback(name) {
+		if (name === "x" || name === "y") {
+			if (this.#pointerDrag?.current()) return;
+			this.#values[name].isDirty = false;
+		}
+		if (name === "disabled" && this.isDisabled()) this.#pointerDrag?.end();
+		this.#refresh();
+	}
+	connectedCallback() {
+		this.upgradeProperties("readout", "xDefault", "xLabel", "xMax", "xMidpoint", "xMin", "xOrigin", "xStep", "xTaper", "yDefault", "yLabel", "yMax", "yMidpoint", "yMin", "yOrigin", "yStep", "yTaper", "formatValue", "x", "y");
+		super.connectedCallback();
+	}
+	formResetCallback() {
+		for (const axis of axes) this.#values[axis].isDirty = false;
+		this.#refresh();
+	}
+	connect(signal) {
+		const xy = this.#xy;
+		this.appendOnce(xy);
+		this.render();
+		this.checkStyles(xy, "xy.css");
+		this.#bindPointer(xy, signal);
+		this.#bindKeys(xy, signal);
+	}
+	focusTarget() {
+		return this.#parts[this.#currentAxis];
+	}
+	render() {
+		const { style } = this.#xy;
+		const mappings = this.#mappings();
+		for (const axis of axes) {
+			const mapping = mappings[axis];
+			const origin = this.optionalNumberAttribute(`${axis}-origin`) ?? mapping.bounds[0];
+			style.setProperty(`--_sonic-xy-${axis}`, String(mapping.proportionOf(this.#values[axis].value)));
+			style.setProperty(`--_sonic-xy-${axis}-origin`, String(mapping.proportionOf(origin)));
+		}
+		this.#renderAria();
+		this.#renderForm();
+		this.#renderReadout();
+	}
+	restoreState(state) {
+		const [x = NaN, y = NaN] = state.split(",").map(Number);
+		this.x = x;
+		this.y = y;
+	}
+	#axisText(axis) {
+		const { value } = this.#values[axis];
+		return `${this.getAttribute(`${axis}-label`) ?? axis.toUpperCase()} ${this.#formatValue?.(value, axis) ?? String(value)}`;
+	}
+	#bindKeys(xy, signal) {
+		xy.addEventListener("keydown", (event) => {
+			if (this.isDisabled() || event.defaultPrevented) return;
+			const move = keyMoves.get(event.key);
+			if (!move && !(resetKeys.has(event.key) && this.#hasDefault())) return;
+			event.preventDefault();
+			if (move) this.#keyTo(...move);
+			else this.#reset();
+			this.#claim.reveal("keys");
+			this.#renderReadout();
+		}, { signal });
+		xy.addEventListener("focusout", (event) => {
+			if (event.relatedTarget instanceof Node && xy.contains(event.relatedTarget)) return;
+			if (this.#claim.conceal("keys")) this.#renderReadout();
+		}, { signal });
+		signal.addEventListener("abort", () => {
+			this.#claim.conceal("keys");
+		}, { once: true });
+	}
+	#bindPointer(xy, signal) {
+		xy.addEventListener("mousedown", (event) => {
+			event.preventDefault();
+		}, { signal });
+		this.#pointerDrag = bindDrag(xy, {
+			cancel: (drag) => {
+				this.#input(drag.from);
+			},
+			grab: (event) => {
+				if (this.isDisabled() || isMenuPress(event)) return;
+				focusByPointer(this.focusTarget());
+				if (!isResetPress(event)) return this.#grab(event);
+				this.#reset();
+			},
+			move: (drag, event) => {
+				const step = stepFieldDrag(this.#mappings(), drag.state, pointerMove(event));
+				drag.state = step.state;
+				if (step.state.isEngaged) this.#claim.reveal("drag");
+				if (!this.#input(step)) this.#renderReadout();
+			},
+			release: (drag) => {
+				this.#claim.press(false);
+				if (this.x === drag.from.x && this.y === drag.from.y) return;
+				this.dispatchEvent(new Event("change", { bubbles: true }));
+			},
+			toggle: (isDragging) => {
+				this.toggleState("dragging", isDragging);
+			}
+		}, signal);
+	}
+	#commit(next) {
+		if (this.#input(next)) this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#grab(event) {
+		const from = {
+			x: this.x,
+			y: this.y
+		};
+		const field = this.#field.getBoundingClientRect();
+		const puck = this.#puck.getBoundingClientRect();
+		const mappings = this.#mappings();
+		const travel = {
+			x: Math.max(1, field.width - puck.width),
+			y: Math.max(1, field.height - puck.height)
+		};
+		const position = pointerPosition(event);
+		const pressed = {
+			x: (position.x - field.left - puck.width / 2) / travel.x,
+			y: (position.y + field.bottom - puck.height / 2) / travel.y
+		};
+		const isOnPuck = event.target instanceof Node && this.#puck.contains(event.target);
+		if (!isOnPuck) this.#input({
+			x: mappings.x.valueAt(pressed.x),
+			y: mappings.y.valueAt(pressed.y)
+		});
+		this.#claim.press(true);
+		const start = (axis) => ({
+			from: this.#values[axis].value,
+			mapping: mappings[axis],
+			proportion: isOnPuck ? mappings[axis].proportionOf(this.#values[axis].value) : clampProportion(pressed[axis]),
+			travelPx: travel[axis]
+		});
+		return {
+			from,
+			state: startFieldDrag({
+				position,
+				thresholdPx: dragThresholdPx(event.pointerType),
+				x: start("x"),
+				y: start("y")
+			})
+		};
+	}
+	#hasDefault() {
+		return this.xDefault !== void 0 || this.yDefault !== void 0;
+	}
+	#input(next) {
+		let hasMoved = false;
+		for (const axis of axes) if (this.#set(axis, next[axis] ?? NaN)) hasMoved = true;
+		if (!hasMoved) return false;
+		this.render();
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		return true;
+	}
+	#keyTo(axis, key) {
+		const next = this.#mapping(axis).keyTarget(key, this.#values[axis].value);
+		const hasMoved = this.#set(axis, next ?? NaN);
+		this.#currentAxis = axis;
+		this.render();
+		this.#parts[axis].focus();
+		if (!hasMoved) return;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#mapping(axis) {
+		const midpoint = this.optionalNumberAttribute(`${axis}-midpoint`);
+		return valueMapping({
+			max: this.numberAttribute(`${axis}-max`, 100),
+			...midpoint === void 0 ? {} : { midpoint },
+			isNotched: false,
+			isWrapping: false,
+			min: this.numberAttribute(`${axis}-min`, 0),
+			step: this.numberAttribute(`${axis}-step`, 1),
+			taper: this.#taper(axis)
+		});
+	}
+	#mappings() {
+		return {
+			x: this.#mapping("x"),
+			y: this.#mapping("y")
+		};
+	}
+	#refresh() {
+		const mappings = this.#mappings();
+		for (const axis of axes) {
+			const axisValue = this.#values[axis];
+			const mapping = mappings[axis];
+			axisValue.value = mapping.snap(axisValue.isDirty ? axisValue.value : this.numberAttribute(axis, mapping.bounds[0]));
+		}
+		this.render();
+	}
+	#renderAria() {
+		const mappings = this.#mappings();
+		const isDisabled = this.isDisabled();
+		for (const axis of axes) {
+			const part = this.#parts[axis];
+			const [low, high] = mappings[axis].bounds;
+			const isCurrent = axis === this.#currentAxis;
+			const stop = isCurrent ? "0" : "-1";
+			part.setAttribute("aria-orientation", orientations[axis]);
+			part.setAttribute("aria-valuemin", String(low));
+			part.setAttribute("aria-valuemax", String(high));
+			part.setAttribute("aria-valuenow", String(this.#values[axis].value));
+			part.setAttribute("aria-valuetext", this.#valueText(axis));
+			this.forwardNaming(part, true);
+			writeAttribute(part, "aria-hidden", isCurrent ? void 0 : "true");
+			writeAttribute(part, "aria-disabled", isDisabled ? "true" : void 0);
+			writeAttribute(part, "tabindex", isDisabled ? void 0 : stop);
+		}
+	}
+	#renderForm() {
+		const { name, x, y } = this;
+		const state = `${String(x)},${String(y)}`;
+		if (name === "") {
+			this.writeFormValue(null, state);
+			return;
+		}
+		const fields = new FormData();
+		fields.set(`${name}.x`, String(x));
+		fields.set(`${name}.y`, String(y));
+		this.writeFormValue(fields, state);
+	}
+	#renderReadout() {
+		this.#readout.show({
+			anchor: this.#puck,
+			isOpen: this.#claim.isRevealed && this.readout,
+			text: this.#valueText("x")
+		});
+	}
+	#reset() {
+		this.#commit({
+			x: this.xDefault,
+			y: this.yDefault
+		});
+	}
+	#set(axis, next) {
+		if (!Number.isFinite(next)) return false;
+		const axisValue = this.#values[axis];
+		const snapped = this.#mapping(axis).snap(next);
+		axisValue.isDirty = true;
+		if (snapped === axisValue.value) return false;
+		axisValue.value = snapped;
+		return true;
+	}
+	#taper(axis) {
+		return this.getAttribute(`${axis}-taper`) === "log" ? "log" : "linear";
+	}
+	#valueText(axis) {
+		return `${this.#axisText(axis)}, ${this.#axisText(axis === "x" ? "y" : "x")}`;
+	}
+	#write(axis, next) {
+		if (this.#pointerDrag?.current()) return;
+		if (this.#set(axis, next)) this.render();
+	}
+};
+
+//#endregion
+export { SonicXy };
+//# sourceMappingURL=xy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xy.js","names":[],"sources":["../../../src/elements/xy.ts"],"sourcesContent":["import type { FieldAxis, FieldDragState, FieldPoint } from '#lib/field.ts';\nimport type { PointerDrag } from '#lib/pointer-drag.ts';\nimport type { ValueMapping, ValueSpec } from '#lib/value-mapping.ts';\n\nimport { SonicFormElement } from '#elements/form-element.ts';\nimport { ReadoutClaim } from '#elements/readout-claim.ts';\nimport { Readout } from '#elements/readout.ts';\nimport { dragThresholdPx } from '#lib/drag-step.ts';\nimport { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from '#lib/field.ts';\nimport { focusByPointer } from '#lib/focus-by-pointer.ts';\nimport { clampProportion } from '#lib/math.ts';\nimport { isMenuPress, isResetPress } from '#lib/modifier-press.ts';\nimport { bindDrag } from '#lib/pointer-drag.ts';\nimport { requireChild, template } from '#lib/render.ts';\nimport { resetKeys, valueMapping } from '#lib/value-mapping.ts';\nimport { writeAttribute } from '#lib/write-attribute.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-xy': SonicXy;\n\t}\n}\n\ninterface AxisValue {\n\tisDirty: boolean;\n\tvalue: number;\n}\n\ninterface XyDrag {\n\tfrom: FieldPoint;\n\tstate: FieldDragState;\n}\n\ninterface XyInput {\n\tx: number | undefined;\n\ty: number | undefined;\n}\n\nconst axes = ['x', 'y'] as const;\n\nconst keyMoves = new Map<string, [FieldAxis, string]>([\n\t['ArrowDown', ['y', 'ArrowDown']],\n\t['ArrowLeft', ['x', 'ArrowLeft']],\n\t['ArrowRight', ['x', 'ArrowRight']],\n\t['ArrowUp', ['y', 'ArrowUp']],\n\t['End', ['x', 'PageUp']],\n\t['Home', ['x', 'PageDown']],\n\t['PageDown', ['y', 'PageDown']],\n\t['PageUp', ['y', 'PageUp']],\n]);\n\nconst orientations = { x: 'horizontal', y: 'vertical' } as const;\n\nconst renderXy = template(\n\t/* HTML */ `\n\t\t<div class=\"sonic-xy\">\n\t\t\t<div class=\"sonic-xy-field\" aria-hidden=\"true\"></div>\n\t\t\t<div class=\"sonic-xy-puck\">\n\t\t\t\t<div class=\"sonic-xy-axis\" data-sonic-axis=\"x\" role=\"slider\" tabindex=\"0\"></div>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"sonic-xy-axis\"\n\t\t\t\t\tdata-sonic-axis=\"y\"\n\t\t\t\t\trole=\"slider\"\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\t\t\t</div>\n\t\t\t<div class=\"sonic-xy-readout\" aria-hidden=\"true\" popover=\"manual\"><span></span></div>\n\t\t</div>\n\t`,\n\tHTMLDivElement,\n);\n\nexport class SonicXy extends SonicFormElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicFormElement.observedAttributes,\n\t\t'name',\n\t\t'readout',\n\t\t'x',\n\t\t'x-label',\n\t\t'x-max',\n\t\t'x-midpoint',\n\t\t'x-min',\n\t\t'x-origin',\n\t\t'x-step',\n\t\t'x-taper',\n\t\t'y',\n\t\t'y-label',\n\t\t'y-max',\n\t\t'y-midpoint',\n\t\t'y-min',\n\t\t'y-origin',\n\t\t'y-step',\n\t\t'y-taper',\n\t];\n\n\tget formatValue(): ((value: number, axis: FieldAxis) => string) | undefined {\n\t\treturn this.#formatValue;\n\t}\n\n\tset formatValue(format: ((value: number, axis: FieldAxis) => string) | undefined) {\n\t\tthis.#formatValue = format;\n\t\tthis.render();\n\t}\n\n\tget readout(): boolean {\n\t\treturn this.hasAttribute('readout');\n\t}\n\n\tset readout(isEnabled: boolean) {\n\t\tthis.reflect('readout', isEnabled);\n\t}\n\n\tget x(): number {\n\t\treturn this.#values.x.value;\n\t}\n\n\tset x(next: number) {\n\t\tthis.#write('x', next);\n\t}\n\n\tget xDefault(): number | undefined {\n\t\treturn this.optionalNumberAttribute('x-default');\n\t}\n\n\tset xDefault(value: number | undefined) {\n\t\tthis.reflect('x-default', value);\n\t}\n\n\tget xLabel(): string | undefined {\n\t\treturn this.getAttribute('x-label') ?? undefined;\n\t}\n\n\tset xLabel(label: string | undefined) {\n\t\tthis.reflect('x-label', label);\n\t}\n\n\tget xMax(): number {\n\t\treturn this.numberAttribute('x-max', 100);\n\t}\n\n\tset xMax(value: number | undefined) {\n\t\tthis.reflect('x-max', value);\n\t}\n\n\tget xMidpoint(): number | undefined {\n\t\treturn this.optionalNumberAttribute('x-midpoint');\n\t}\n\n\tset xMidpoint(value: number | undefined) {\n\t\tthis.reflect('x-midpoint', value);\n\t}\n\n\tget xMin(): number {\n\t\treturn this.numberAttribute('x-min', 0);\n\t}\n\n\tset xMin(value: number | undefined) {\n\t\tthis.reflect('x-min', value);\n\t}\n\n\tget xOrigin(): number | undefined {\n\t\treturn this.optionalNumberAttribute('x-origin');\n\t}\n\n\tset xOrigin(value: number | undefined) {\n\t\tthis.reflect('x-origin', value);\n\t}\n\n\tget xStep(): number {\n\t\treturn this.numberAttribute('x-step', 1);\n\t}\n\n\tset xStep(value: number | undefined) {\n\t\tthis.reflect('x-step', value);\n\t}\n\n\tget xTaper(): ValueSpec['taper'] {\n\t\treturn this.#taper('x');\n\t}\n\n\tset xTaper(curve: undefined | ValueSpec['taper']) {\n\t\tthis.reflect('x-taper', curve);\n\t}\n\n\tget y(): number {\n\t\treturn this.#values.y.value;\n\t}\n\n\tset y(next: number) {\n\t\tthis.#write('y', next);\n\t}\n\n\tget yDefault(): number | undefined {\n\t\treturn this.optionalNumberAttribute('y-default');\n\t}\n\n\tset yDefault(value: number | undefined) {\n\t\tthis.reflect('y-default', value);\n\t}\n\n\tget yLabel(): string | undefined {\n\t\treturn this.getAttribute('y-label') ?? undefined;\n\t}\n\n\tset yLabel(label: string | undefined) {\n\t\tthis.reflect('y-label', label);\n\t}\n\n\tget yMax(): number {\n\t\treturn this.numberAttribute('y-max', 100);\n\t}\n\n\tset yMax(value: number | undefined) {\n\t\tthis.reflect('y-max', value);\n\t}\n\n\tget yMidpoint(): number | undefined {\n\t\treturn this.optionalNumberAttribute('y-midpoint');\n\t}\n\n\tset yMidpoint(value: number | undefined) {\n\t\tthis.reflect('y-midpoint', value);\n\t}\n\n\tget yMin(): number {\n\t\treturn this.numberAttribute('y-min', 0);\n\t}\n\n\tset yMin(value: number | undefined) {\n\t\tthis.reflect('y-min', value);\n\t}\n\n\tget yOrigin(): number | undefined {\n\t\treturn this.optionalNumberAttribute('y-origin');\n\t}\n\n\tset yOrigin(value: number | undefined) {\n\t\tthis.reflect('y-origin', value);\n\t}\n\n\tget yStep(): number {\n\t\treturn this.numberAttribute('y-step', 1);\n\t}\n\n\tset yStep(value: number | undefined) {\n\t\tthis.reflect('y-step', value);\n\t}\n\n\tget yTaper(): ValueSpec['taper'] {\n\t\treturn this.#taper('y');\n\t}\n\n\tset yTaper(curve: undefined | ValueSpec['taper']) {\n\t\tthis.reflect('y-taper', curve);\n\t}\n\n\treadonly #claim = new ReadoutClaim(() => {\n\t\tthis.#renderReadout();\n\t});\n\n\t#currentAxis: FieldAxis = 'x';\n\n\treadonly #xy = renderXy();\n\n\treadonly #field = requireChild(this.#xy, '.sonic-xy-field', HTMLDivElement);\n\n\t#formatValue: ((value: number, axis: FieldAxis) => string) | undefined;\n\n\treadonly #parts: Record<FieldAxis, HTMLDivElement> = {\n\t\tx: requireChild(this.#xy, '[data-sonic-axis=\"x\"]', HTMLDivElement),\n\t\ty: requireChild(this.#xy, '[data-sonic-axis=\"y\"]', HTMLDivElement),\n\t};\n\n\t#pointerDrag: PointerDrag<XyDrag> | undefined;\n\n\treadonly #puck = requireChild(this.#xy, '.sonic-xy-puck', HTMLDivElement);\n\n\treadonly #readout = new Readout(requireChild(this.#xy, '.sonic-xy-readout', HTMLDivElement));\n\n\treadonly #values: Record<FieldAxis, AxisValue> = {\n\t\tx: { isDirty: false, value: 0 },\n\t\ty: { isDirty: false, value: 0 },\n\t};\n\n\tattributeChangedCallback(name: string): void {\n\t\tif (name === 'x' || name === 'y') {\n\t\t\tif (this.#pointerDrag?.current()) return;\n\n\t\t\tthis.#values[name].isDirty = false;\n\t\t}\n\t\tif (name === 'disabled' && this.isDisabled()) this.#pointerDrag?.end();\n\n\t\tthis.#refresh();\n\t}\n\n\toverride connectedCallback(): void {\n\t\tthis.upgradeProperties(\n\t\t\t'readout',\n\t\t\t'xDefault',\n\t\t\t'xLabel',\n\t\t\t'xMax',\n\t\t\t'xMidpoint',\n\t\t\t'xMin',\n\t\t\t'xOrigin',\n\t\t\t'xStep',\n\t\t\t'xTaper',\n\t\t\t'yDefault',\n\t\t\t'yLabel',\n\t\t\t'yMax',\n\t\t\t'yMidpoint',\n\t\t\t'yMin',\n\t\t\t'yOrigin',\n\t\t\t'yStep',\n\t\t\t'yTaper',\n\t\t\t'formatValue',\n\t\t\t'x',\n\t\t\t'y',\n\t\t);\n\t\tsuper.connectedCallback();\n\t}\n\n\toverride formResetCallback(): void {\n\t\tfor (const axis of axes) this.#values[axis].isDirty = false;\n\n\t\tthis.#refresh();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst xy = this.#xy;\n\n\t\tthis.appendOnce(xy);\n\t\tthis.render();\n\t\tthis.checkStyles(xy, 'xy.css');\n\t\tthis.#bindPointer(xy, signal);\n\t\tthis.#bindKeys(xy, signal);\n\t}\n\n\tprotected override focusTarget(): HTMLElement {\n\t\treturn this.#parts[this.#currentAxis];\n\t}\n\n\tprotected render(): void {\n\t\tconst { style } = this.#xy;\n\t\tconst mappings = this.#mappings();\n\n\t\tfor (const axis of axes) {\n\t\t\tconst mapping = mappings[axis];\n\t\t\tconst origin = this.optionalNumberAttribute(`${axis}-origin`) ?? mapping.bounds[0];\n\n\t\t\tstyle.setProperty(\n\t\t\t\t`--_sonic-xy-${axis}`,\n\t\t\t\tString(mapping.proportionOf(this.#values[axis].value)),\n\t\t\t);\n\t\t\tstyle.setProperty(`--_sonic-xy-${axis}-origin`, String(mapping.proportionOf(origin)));\n\t\t}\n\t\tthis.#renderAria();\n\t\tthis.#renderForm();\n\t\tthis.#renderReadout();\n\t}\n\n\tprotected restoreState(state: string): void {\n\t\tconst [x = NaN, y = NaN] = state.split(',').map(Number);\n\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t}\n\n\t#axisText(axis: FieldAxis): string {\n\t\tconst { value } = this.#values[axis];\n\t\tconst label = this.getAttribute(`${axis}-label`) ?? axis.toUpperCase();\n\n\t\treturn `${label} ${this.#formatValue?.(value, axis) ?? String(value)}`;\n\t}\n\n\t#bindKeys(xy: HTMLElement, signal: AbortSignal): void {\n\t\txy.addEventListener(\n\t\t\t'keydown',\n\t\t\t(event) => {\n\t\t\t\tif (this.isDisabled() || event.defaultPrevented) return;\n\n\t\t\t\tconst move = keyMoves.get(event.key);\n\t\t\t\tif (!move && !(resetKeys.has(event.key) && this.#hasDefault())) return;\n\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (move) this.#keyTo(...move);\n\t\t\t\telse this.#reset();\n\t\t\t\tthis.#claim.reveal('keys');\n\t\t\t\tthis.#renderReadout();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\txy.addEventListener(\n\t\t\t'focusout',\n\t\t\t(event) => {\n\t\t\t\t// A key on the other axis moves focus between the two parts\n\t\t\t\tif (event.relatedTarget instanceof Node && xy.contains(event.relatedTarget)) return;\n\t\t\t\tif (this.#claim.conceal('keys')) this.#renderReadout();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tthis.#claim.conceal('keys');\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\t#bindPointer(xy: HTMLElement, signal: AbortSignal): void {\n\t\t// A press on the glass would take focus off the axis part and select the page's text\n\t\txy.addEventListener(\n\t\t\t'mousedown',\n\t\t\t(event) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tthis.#pointerDrag = bindDrag(\n\t\t\txy,\n\t\t\t{\n\t\t\t\tcancel: (drag) => {\n\t\t\t\t\tthis.#input(drag.from);\n\t\t\t\t},\n\t\t\t\tgrab: (event) => {\n\t\t\t\t\tif (this.isDisabled() || isMenuPress(event)) return;\n\n\t\t\t\t\tfocusByPointer(this.focusTarget());\n\t\t\t\t\tif (!isResetPress(event)) return this.#grab(event);\n\n\t\t\t\t\tthis.#reset();\n\n\t\t\t\t\treturn;\n\t\t\t\t},\n\t\t\t\tmove: (drag, event) => {\n\t\t\t\t\tconst step = stepFieldDrag(this.#mappings(), drag.state, pointerMove(event));\n\n\t\t\t\t\tdrag.state = step.state;\n\t\t\t\t\tif (step.state.isEngaged) this.#claim.reveal('drag');\n\t\t\t\t\tif (!this.#input(step)) this.#renderReadout();\n\t\t\t\t},\n\t\t\t\trelease: (drag) => {\n\t\t\t\t\tthis.#claim.press(false);\n\t\t\t\t\tif (this.x === drag.from.x && this.y === drag.from.y) return;\n\n\t\t\t\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t\t\t\t},\n\t\t\t\ttoggle: (isDragging) => {\n\t\t\t\t\tthis.toggleState('dragging', isDragging);\n\t\t\t\t},\n\t\t\t},\n\t\t\tsignal,\n\t\t);\n\t}\n\n\t#commit(next: XyInput): void {\n\t\tif (this.#input(next)) this.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n\n\t#grab(event: PointerEvent): XyDrag {\n\t\tconst from = { x: this.x, y: this.y };\n\t\tconst field = this.#field.getBoundingClientRect();\n\t\tconst puck = this.#puck.getBoundingClientRect();\n\t\tconst mappings = this.#mappings();\n\t\tconst travel = {\n\t\t\tx: Math.max(1, field.width - puck.width),\n\t\t\ty: Math.max(1, field.height - puck.height),\n\t\t};\n\t\tconst position = pointerPosition(event);\n\t\tconst pressed = {\n\t\t\tx: (position.x - field.left - puck.width / 2) / travel.x,\n\t\t\ty: (position.y + field.bottom - puck.height / 2) / travel.y,\n\t\t};\n\t\tconst isOnPuck = event.target instanceof Node && this.#puck.contains(event.target);\n\n\t\tif (!isOnPuck)\n\t\t\tthis.#input({ x: mappings.x.valueAt(pressed.x), y: mappings.y.valueAt(pressed.y) });\n\t\tthis.#claim.press(true);\n\n\t\tconst start = (axis: FieldAxis) => ({\n\t\t\tfrom: this.#values[axis].value,\n\t\t\tmapping: mappings[axis],\n\t\t\tproportion: isOnPuck\n\t\t\t\t? mappings[axis].proportionOf(this.#values[axis].value)\n\t\t\t\t: clampProportion(pressed[axis]),\n\t\t\ttravelPx: travel[axis],\n\t\t});\n\n\t\treturn {\n\t\t\tfrom,\n\t\t\tstate: startFieldDrag({\n\t\t\t\tposition,\n\t\t\t\tthresholdPx: dragThresholdPx(event.pointerType),\n\t\t\t\tx: start('x'),\n\t\t\t\ty: start('y'),\n\t\t\t}),\n\t\t};\n\t}\n\n\t#hasDefault(): boolean {\n\t\treturn this.xDefault !== undefined || this.yDefault !== undefined;\n\t}\n\n\t#input(next: XyInput): boolean {\n\t\tlet hasMoved = false;\n\n\t\tfor (const axis of axes) {\n\t\t\tif (this.#set(axis, next[axis] ?? NaN)) hasMoved = true;\n\t\t}\n\t\tif (!hasMoved) return false;\n\n\t\tthis.render();\n\t\tthis.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n\n\t\treturn true;\n\t}\n\n\t#keyTo(axis: FieldAxis, key: string): void {\n\t\tconst next = this.#mapping(axis).keyTarget(key, this.#values[axis].value);\n\t\tconst hasMoved = this.#set(axis, next ?? NaN);\n\n\t\tthis.#currentAxis = axis;\n\t\tthis.render();\n\t\tthis.#parts[axis].focus();\n\t\tif (!hasMoved) return;\n\n\t\tthis.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n\n\t#mapping(axis: FieldAxis): ValueMapping {\n\t\tconst midpoint = this.optionalNumberAttribute(`${axis}-midpoint`);\n\n\t\treturn valueMapping({\n\t\t\tmax: this.numberAttribute(`${axis}-max`, 100),\n\t\t\t...(midpoint === undefined ? {} : { midpoint }),\n\t\t\tisNotched: false,\n\t\t\tisWrapping: false,\n\t\t\tmin: this.numberAttribute(`${axis}-min`, 0),\n\t\t\tstep: this.numberAttribute(`${axis}-step`, 1),\n\t\t\ttaper: this.#taper(axis),\n\t\t});\n\t}\n\n\t#mappings(): Record<FieldAxis, ValueMapping> {\n\t\treturn { x: this.#mapping('x'), y: this.#mapping('y') };\n\t}\n\n\t#refresh(): void {\n\t\tconst mappings = this.#mappings();\n\n\t\tfor (const axis of axes) {\n\t\t\tconst axisValue = this.#values[axis];\n\t\t\tconst mapping = mappings[axis];\n\n\t\t\taxisValue.value = mapping.snap(\n\t\t\t\taxisValue.isDirty ? axisValue.value : this.numberAttribute(axis, mapping.bounds[0]),\n\t\t\t);\n\t\t}\n\t\tthis.render();\n\t}\n\n\t#renderAria(): void {\n\t\tconst mappings = this.#mappings();\n\t\tconst isDisabled = this.isDisabled();\n\n\t\tfor (const axis of axes) {\n\t\t\tconst part = this.#parts[axis];\n\t\t\tconst [low, high] = mappings[axis].bounds;\n\t\t\tconst isCurrent = axis === this.#currentAxis;\n\t\t\tconst stop = isCurrent ? '0' : '-1';\n\n\t\t\tpart.setAttribute('aria-orientation', orientations[axis]);\n\t\t\tpart.setAttribute('aria-valuemin', String(low));\n\t\t\tpart.setAttribute('aria-valuemax', String(high));\n\t\t\tpart.setAttribute('aria-valuenow', String(this.#values[axis].value));\n\t\t\tpart.setAttribute('aria-valuetext', this.#valueText(axis));\n\t\t\tthis.forwardNaming(part, true);\n\t\t\twriteAttribute(part, 'aria-hidden', isCurrent ? undefined : 'true');\n\t\t\twriteAttribute(part, 'aria-disabled', isDisabled ? 'true' : undefined);\n\t\t\twriteAttribute(part, 'tabindex', isDisabled ? undefined : stop);\n\t\t}\n\t}\n\n\t#renderForm(): void {\n\t\tconst { name, x, y } = this;\n\t\tconst state = `${String(x)},${String(y)}`;\n\n\t\tif (name === '') {\n\t\t\t// eslint-disable-next-line unicorn/no-null -- `null` submits nothing\n\t\t\tthis.writeFormValue(null, state);\n\t\t\treturn;\n\t\t}\n\n\t\tconst fields = new FormData();\n\n\t\tfields.set(`${name}.x`, String(x));\n\t\tfields.set(`${name}.y`, String(y));\n\t\tthis.writeFormValue(fields, state);\n\t}\n\n\t#renderReadout(): void {\n\t\tthis.#readout.show({\n\t\t\tanchor: this.#puck,\n\t\t\tisOpen: this.#claim.isRevealed && this.readout,\n\t\t\ttext: this.#valueText('x'),\n\t\t});\n\t}\n\n\t#reset(): void {\n\t\tthis.#commit({ x: this.xDefault, y: this.yDefault });\n\t}\n\n\t#set(axis: FieldAxis, next: number): boolean {\n\t\tif (!Number.isFinite(next)) return false;\n\n\t\tconst axisValue = this.#values[axis];\n\t\tconst snapped = this.#mapping(axis).snap(next);\n\n\t\taxisValue.isDirty = true;\n\t\tif (snapped === axisValue.value) return false;\n\n\t\taxisValue.value = snapped;\n\n\t\treturn true;\n\t}\n\n\t#taper(axis: FieldAxis): ValueSpec['taper'] {\n\t\treturn this.getAttribute(`${axis}-taper`) === 'log' ? 'log' : 'linear';\n\t}\n\n\t#valueText(axis: FieldAxis): string {\n\t\treturn `${this.#axisText(axis)}, ${this.#axisText(axis === 'x' ? 'y' : 'x')}`;\n\t}\n\n\t#write(axis: FieldAxis, next: number): void {\n\t\tif (this.#pointerDrag?.current()) return;\n\t\tif (this.#set(axis, next)) this.render();\n\t}\n}\n"],"mappings":"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"}

package/dist/dev/index.d.ts

@@ -1,8 +1,17 @@
+import { WaveformPeaks } from "./lib/waveform-buckets.js";
 import { SonicDial } from "./elements/dial.js";
-import { SonicKey } from "./elements/key.js";
+import { SonicEnvelope } from "./elements/envelope.js";
+import { SonicButton } from "./elements/button.js";
+import { SonicSwitch } from "./elements/switch.js";
 import { SonicMeter } from "./elements/meter.js";
 import { SonicNumber } from "./elements/number.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
+import { SonicSplit } from "./elements/split.js";
+import { SonicWaveform } from "./elements/waveform.js";
+import { SonicWavestrip } from "./elements/wavestrip.js";
+import { SonicXy } from "./elements/xy.js";
+import { crossfadeGains } from "./lib/crossfade.js";
+import { envelopeCurve } from "./lib/envelope-curve.js";
 import { formatPercent, parsePercent } from "./lib/percent.js";
-export { SonicDial, SonicKey, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, formatPercent, parsePercent };
+export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSplit, SonicSwitch, SonicWaveform, SonicWavestrip, SonicXy, type WaveformPeaks, crossfadeGains, envelopeCurve, formatPercent, parsePercent };

package/dist/dev/index.js

@@ -1,9 +1,17 @@
 import { SonicDial } from "./elements/dial.js";
-import { SonicKey } from "./elements/key.js";
+import { envelopeCurve } from "./lib/envelope-curve.js";
+import { SonicEnvelope } from "./elements/envelope.js";
+import { SonicButton } from "./elements/button.js";
+import { SonicSwitch } from "./elements/switch.js";
 import { SonicMeter } from "./elements/meter.js";
 import { SonicNumber } from "./elements/number.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
+import { SonicSplit } from "./elements/split.js";
+import { SonicWaveform } from "./elements/waveform.js";
+import { SonicWavestrip } from "./elements/wavestrip.js";
+import { SonicXy } from "./elements/xy.js";
+import { crossfadeGains } from "./lib/crossfade.js";
 import { formatPercent, parsePercent } from "./lib/percent.js";
 
-export { SonicDial, SonicKey, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, formatPercent, parsePercent };
+export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSplit, SonicSwitch, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatPercent, parsePercent };

package/dist/dev/lib/adsr-shape.js

@@ -0,0 +1,109 @@
+import { roundTo } from "./math.js";
+import { envelopeCurve } from "./envelope-curve.js";
+
+//#region src/lib/adsr-shape.ts
+const adsrStages = [
+	"delay",
+	"attack",
+	"hold",
+	"decay",
+	"sustain",
+	"release"
+];
+const timeStages = [
+	"delay",
+	"attack",
+	"hold",
+	"decay",
+	"release"
+];
+const curveSamples = 24;
+function along(from, to, at) {
+	return {
+		x: from.x + (to.x - from.x) * at.position,
+		y: from.y + (to.y - from.y) * envelopeCurve(at.position, at.curve)
+	};
+}
+function curved(from, to, curve) {
+	if (envelopeCurve(.5, curve) === .5) return [];
+	return Array.from({ length: 23 }, (_, index) => along(from, to, {
+		curve,
+		position: (index + 1) / curveSamples
+	}));
+}
+function leg(from, to, curve) {
+	if (curve === void 0) return {
+		curveHandle: void 0,
+		points: [to]
+	};
+	return {
+		curveHandle: along(from, to, {
+			curve,
+			position: .5
+		}),
+		points: [...curved(from, to, curve), to]
+	};
+}
+function isHandled(proportions, stage) {
+	return (stage === "decay" ? proportions.sustain ?? proportions.decay : proportions[stage]) !== void 0;
+}
+function adsrShape(proportions, curves = {}) {
+	const sustain = proportions.sustain ?? 1;
+	const levels = {
+		attack: 1,
+		decay: sustain,
+		delay: 0,
+		hold: 1,
+		release: 0
+	};
+	const share = 1 / (timeStages.filter((stage) => proportions[stage] !== void 0).length + 1);
+	const shape = {
+		curveHandles: [],
+		handles: [],
+		points: [{
+			x: 0,
+			y: 0
+		}],
+		share
+	};
+	let from = {
+		x: 0,
+		y: 0
+	};
+	for (const stage of timeStages) {
+		if (stage === "release") {
+			from = {
+				x: from.x + share,
+				y: sustain
+			};
+			shape.points.push(from);
+		}
+		const to = {
+			x: from.x + (proportions[stage] ?? 0) * share,
+			y: levels[stage]
+		};
+		const { curveHandle, points } = leg(from, to, curves[stage]);
+		shape.points.push(...points);
+		if (curveHandle) shape.curveHandles.push({
+			...curveHandle,
+			stage
+		});
+		if (isHandled(proportions, stage)) shape.handles.push({
+			...to,
+			stage
+		});
+		from = to;
+	}
+	return shape;
+}
+function adsrPath({ points }) {
+	const stroke = points.map(({ x, y }, index) => `${index === 0 ? "M" : "L"}${String(roundTo(x, 4))} ${String(roundTo(1 - y, 4))}`).join("");
+	return {
+		fill: `${stroke}Z`,
+		stroke
+	};
+}
+
+//#endregion
+export { adsrPath, adsrShape, adsrStages, timeStages };
+//# sourceMappingURL=adsr-shape.js.map