@tremolo-ui/dom 0.8.0 → 0.9.0

package/dist/index.js

@@ -1,4 +1,5 @@
-import { clamp, isBlackKey, isWhiteKey, linearScale, normalizeValue, noteKey, noteKeys, radian, stepValue, toFixed, toPrecision } from "@tremolo-ui/functions";
+import { _ as DEFAULT_DRAG_SENSITIVITY, b as matchesAccept, h as notePosition, m as noteAt, o as createPointsEditor, t as toXY, u as createDrag, v as DEFAULT_KEYBOARD_OPTIONS, x as partitionByAccept, y as DEFAULT_WHEEL_OPTIONS } from "./xy-lNFl1CTO.js";
+import { clamp, linearScale, normalizeValue, radian, stepValue, toFixed, toPrecision } from "@tremolo-ui/functions";
 //#region src/canvas/context.ts
 /**
 * The assignable parts of a 2D context's drawing state. They have to be
@@ -36,9 +37,6 @@ const drawingState = [
 	"imageSmoothingEnabled",
 	"imageSmoothingQuality"
 ];
-function isDrawingState(value) {
-	return typeof value === "string" && drawingState.includes(value);
-}
 /** Copy the drawing state off a context, to put back after a resize. */
 function readDrawingState(context) {
 	const state = {};
@@ -235,53 +233,6 @@ function createAnimationCanvas(canvas, options) {
 	};
 }
 //#endregion
-//#region src/file/accept.ts
-/**
-* Does a file satisfy an `accept` attribute?
-*
-* `accept` is written the way the HTML attribute is: a comma separated list of
-* extensions (`.wav`), MIME types (`audio/wav`) and type groups (`audio/*`).
-* Anything that matches one entry is accepted, and an empty or missing
-* `accept` takes everything.
-*
-* **The browser's own `accept` is only a hint to the file picker.** A person
-* can switch it to "All Files", drag a file in, or pick one the picker was
-* never asked about, so what arrives still has to be checked.
-*
-* A rule that cannot be decided is not treated as a rejection: with no `name`,
-* an extension rule says nothing either way, and `accept=".wav"` reports a
-* match rather than refusing a file it has not seen the name of. The name is
-* there by the time the file is dropped, which is when the answer counts.
-*/
-function matchesAccept(candidate, accept) {
-	const rules = (accept ?? "").split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
-	if (rules.length === 0) return true;
-	const name = candidate.name?.toLowerCase();
-	const type = candidate.type.toLowerCase();
-	let undecided = false;
-	for (const rule of rules) if (rule.startsWith(".")) {
-		if (name === void 0) undecided = true;
-		else if (name.endsWith(rule)) return true;
-	} else if (rule.endsWith("/*")) {
-		if (type.startsWith(rule.slice(0, -1))) return true;
-	} else if (type === rule) return true;
-	return undecided;
-}
-/**
-* Split files into those that satisfy `accept` and those that do not, keeping
-* their order. See {@link matchesAccept}.
-*/
-function partitionByAccept(files, accept) {
-	const accepted = [];
-	const rejected = [];
-	for (const file of files) if (matchesAccept(file, accept)) accepted.push(file);
-	else rejected.push(file);
-	return {
-		accepted,
-		rejected
-	};
-}
-//#endregion
 //#region src/file/drop-zone.ts
 /**
 * Take files dropped onto an element.
@@ -405,295 +356,64 @@ function createDropZone(element, options = {}) {
 	};
 }
 //#endregion
-//#region src/input/modifiers.ts
+//#region src/input/change-gesture.ts
 /**
-* Checked in this order, and the first one that is both held and configured
-* wins. Fixing an order is what keeps two modifiers held at once from
-* behaving differently between browsers.
-*/
-const MODIFIER_ORDER = [
-	"meta",
-	"ctrl",
-	"alt",
-	"shift"
-];
-const MODIFIER_FLAG = {
-	meta: "metaKey",
-	ctrl: "ctrlKey",
-	alt: "altKey",
-	shift: "shiftKey"
-};
-/**
-* A map is the only form with a `default` key, which is what tells it apart
-* from a bare setting. Tuples are arrays, so they never match.
-*/
-function isModifierMap(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value) && "default" in value;
-}
-/**
-* Pick the setting that applies, given the modifier keys being held.
-*
-* @example
-* selectModifier({ default: 1, shift: 0.1 }, event)
-*/
-function selectModifier(options, modifiers) {
-	if (!isModifierMap(options)) return {
-		value: options,
-		modifier: null
-	};
-	if (modifiers) for (const modifier of MODIFIER_ORDER) {
-		const value = options[modifier];
-		if (value !== void 0 && modifiers[MODIFIER_FLAG[modifier]]) return {
-			value,
-			modifier
-		};
-	}
-	return {
-		value: options.default,
-		modifier: null
-	};
-}
-/**
-* Turn every entry of a setting into another kind of setting, keeping which
-* modifier each belongs to.
-*
-* A drag sensitivity is a number and a keyboard amount is a tuple, but the two
-* describe the same thing from the caller's side. This carries one over to the
-* other so that a component can hand a sensitivity to {@link applyDelta}
-* without unpicking the modifier map itself — which matters, since naming a
-* modifier is also what takes `step` out of the pipeline.
-*
-* @example
-* mapModifier({ default: 1, shift: 0.1 }, (f) => ['raw', step * f])
-* // { default: ['raw', 1], shift: ['raw', 0.1] }
-*/
-function mapModifier(options, fn) {
-	if (!isModifierMap(options)) return fn(options);
-	const mapped = { default: fn(options.default) };
-	for (const modifier of MODIFIER_ORDER) {
-		const value = options[modifier];
-		if (value !== void 0) mapped[modifier] = fn(value);
-	}
-	return mapped;
-}
-//#endregion
-//#region src/input/apply-delta.ts
-/**
-* Move a value by an amount of input, as reported by a wheel or an arrow key.
-*
-* The pipeline matches {@link createDragValue}: scale, then step, then clamp.
-* Which key or which sign of `deltaY` counts as which direction is left to the
-* caller, since it differs per component.
-*
-* @param direction which way, and how many times, to apply the option. The
-* size of one step is `option[1]`, so this is normally `1` or `-1`.
-*
-* @param modifiers the event, for `options` that name a modifier key. See
-* {@link selectModifier}.
-*
-* @example
-* // ArrowDown on a slider whose keyboard option is ['raw', 1]
-* applyDelta(value, -1, keyboard, { min, max, step, scale })
-*
-* @example
-* // Shift+ArrowDown, where `keyboard` is { default: …, shift: ['raw', 0.1] }
-* applyDelta(value, -1, keyboard, range, event)
-*/
-function applyDelta(value, direction, options, { min, max, step, scale = linearScale }, modifiers) {
-	if (min >= max) throw new RangeError("requirements: min < max");
-	if (step !== void 0 && (!Number.isFinite(step) || step <= 0)) throw new RangeError("applyDelta step: requirements: finite and greater than 0");
-	const { value: [mode, amount], modifier } = selectModifier(options, modifiers);
-	const x = direction * amount;
-	const next = mode === "normalized" ? scale.denormalize(scale.normalize(value, min, max) + x, min, max) : value + x;
-	const quantum = modifier === null ? step : void 0;
-	const stepped = quantum !== void 0 ? stepValue(next, quantum) : next;
-	return clamp(toPrecision(stepped), min, max);
-}
-//#endregion
-//#region src/input/check-steps.ts
-/** Positions probed across the travel. The ends are left out so that the
-* clamp at `min` and `max` cannot be mistaken for a press that does nothing. */
-const PROBES = [
-	.1,
-	.2,
-	.3,
-	.4,
-	.5,
-	.6,
-	.7,
-	.8,
-	.9
-];
-const NONE = {
-	shiftKey: false,
-	altKey: false,
-	ctrlKey: false,
-	metaKey: false
-};
-const MODIFIER_STATE = {
-	shift: {
-		...NONE,
-		shiftKey: true
-	},
-	alt: {
-		...NONE,
-		altKey: true
-	},
-	ctrl: {
-		...NONE,
-		ctrlKey: true
-	},
-	meta: {
-		...NONE,
-		metaKey: true
-	}
-};
-/** The held keys that select each entry of a modifier-aware input option. */
-function entries(options) {
-	if (Array.isArray(options)) return [NONE];
-	return Object.keys(options).map((key) => MODIFIER_STATE[key] ?? NONE);
-}
-/**
-* Press every entry of `options` at nine points along the travel and report
-* whether anything came of it.
-*
-* Run against `applyDelta` itself rather than against a reading of `step`:
-* the whole point is that the amount, the step and the scale interact, and
-* the pipeline is the only thing that knows how.
+* Track when a change of value starts and ends, whatever made it: a drag, the
+* wheel, the keys or a reset. A host that records automation needs both ends
+* to know when the control is touched.
 */
-function probe(options, range, format) {
-	const { min, max, scale = linearScale } = range;
-	const outcome = {
-		moved: false,
-		visible: false
-	};
-	for (const modifiers of entries(options)) for (const position of PROBES) {
-		const value = scale.denormalize(position, min, max);
-		const up = applyDelta(value, 1, options, range, modifiers);
-		const down = applyDelta(value, -1, options, range, modifiers);
-		if (up !== value || down !== value) outcome.moved = true;
-		if (!format) continue;
-		const shown = format(value);
-		if (format(up) !== shown || format(down) !== shown) outcome.visible = true;
+function createChangeGesture(options = {}) {
+	let opts = options;
+	let current = null;
+	let timer = null;
+	function clearTimer() {
+		if (timer !== null) clearTimeout(timer);
+		timer = null;
 	}
-	return outcome;
-}
-/**
-* The warnings to show when a key press or a wheel notch cannot produce a
-* change the user can see. Empty when there is nothing to say.
-*
-* Two settings that are each fine on their own can cancel out, and nothing
-* fails when they do — the control simply sits there:
-*
-* - **`step` coarser than the amount.** `keyboard={['raw', 0.1]}` with
-*   `step={1}` rounds every press straight back to where it started
-* - **the display coarser than the amount.** A `format` showing two decimals
-*   of a kHz value cannot show a press worth 1 Hz
-*
-* The second is only reported when the press is invisible at *every* point
-* along the travel. A display that rounds is a deliberate choice and is
-* normally right — it is being too coarse everywhere that makes it a mistake.
-*
-* **Meant for development builds only.** It probes the whole travel, so call
-* it behind an inline `process.env.NODE_ENV` check: the bundler then drops
-* the call, and this function and its messages with it.
-*/
-function checkSteps({ component, axis, range, keyboard, wheel, format }) {
-	if (!range || !(range.min < range.max)) return [];
-	const where = axis ? `${component} (${axis})` : component;
-	const warnings = [];
-	for (const [name, options] of [["keyboard", keyboard], ["wheel", wheel]]) {
-		if (!options) continue;
-		const { moved, visible } = probe(options, range, format);
-		if (!moved) warnings.push(`[tremolo-ui] ${where}: \`${name}\` cannot move the value.` + (range.step !== void 0 ? ` Each press is smaller than \`step\` (${range.step}), so it rounds` : " Each press rounds") + " straight back to where it started.");
-		else if (format && !visible) warnings.push(`[tremolo-ui] ${where}: \`${name}\` moves the value, but \`format\` shows the same text before and after, everywhere in the range. The display is too coarse for it to be seen.`);
+	function end() {
+		clearTimer();
+		if (!current) return;
+		const { source } = current;
+		current = null;
+		opts.onEnd?.(source);
+	}
+	function start(source, held) {
+		current = {
+			source,
+			held
+		};
+		opts.onStart?.(source);
 	}
-	return warnings;
-}
-//#endregion
-//#region src/input/defaults.ts
-/**
-* The keyboard amount used by Knob, NumberInput, Slider, and XYPad by default:
-* 1 per press in the units of the value, and 0.1 with shift held. That is one
-* `step` only while `step` is 1; a coarser `step` rounds 1 straight back, which
-* `checkSteps` warns about.
-*
-* A modifier entry is not snapped to `step`, which is what lets the finer
-* amount move at all — see `applyDelta`.
-*/
-const DEFAULT_KEYBOARD_OPTIONS = {
-	default: ["raw", 1],
-	shift: ["raw", .1]
-};
-/**
-* The wheel amount used by Knob, NumberInput, Slider, and XYPad by default.
-*
-* Browsers turn shift+wheel into horizontal scrolling, which empties `deltaY`
-* and fills `deltaX`, so no modifier is bound here.
-*/
-const DEFAULT_WHEEL_OPTIONS = ["raw", 1];
-/**
-* The drag sensitivity used by value controls by default. Shift makes the
-* same movement cover a tenth of the range, matching the arrow keys.
-*/
-const DEFAULT_DRAG_SENSITIVITY = {
-	default: 1,
-	shift: .1
-};
-//#endregion
-//#region src/input/direction.ts
-/** Is `key` one of the four arrow keys? */
-function isArrowKey(key) {
-	return key === "ArrowRight" || key === "ArrowLeft" || key === "ArrowUp" || key === "ArrowDown";
-}
-/**
-* The direction an arrow key moves a single value: right and up raise it.
-* `null` for any other key.
-*/
-function arrowKeyDirection(key) {
-	if (!isArrowKey(key)) return null;
-	return key === "ArrowRight" || key === "ArrowUp" ? 1 : -1;
-}
-/**
-* The axis and direction an arrow key moves a position on screen. `null` for
-* any other key.
-*
-* The key picks the axis, whichever element inside the control holds the
-* focus: a two-dimensional control is one control to the person moving it.
-*/
-function arrowKeyMove(key) {
-	if (!isArrowKey(key)) return null;
 	return {
-		axis: key === "ArrowRight" || key === "ArrowLeft" ? 0 : 1,
-		direction: key === "ArrowLeft" || key === "ArrowUp" ? -1 : 1
-	};
-}
-/**
-* The direction one wheel event moves a single value: scrolling up raises it.
-* `null` when the event carries no movement the control reads.
-*/
-function wheelDirection(event, { horizontal = false } = {}) {
-	if (horizontal && event.deltaX !== 0) return event.deltaX > 0 ? 1 : -1;
-	if (event.deltaY === 0) return null;
-	return event.deltaY > 0 ? -1 : 1;
-}
-/**
-* The axis and direction one wheel event moves a position on screen. `null`
-* when the event carries no movement.
-*
-* Scrolling moves y, and shift switches to x. Browsers turn shift+wheel into
-* horizontal scrolling: `deltaY` comes out empty and `deltaX` carries the
-* movement. Reading whichever axis moved keeps shift working as the x-axis
-* modifier — and picks up a trackpad's own horizontal gesture, which never
-* had a modifier.
-*/
-function wheelMove(event) {
-	const horizontal = event.deltaX !== 0;
-	const delta = horizontal ? event.deltaX : event.deltaY;
-	if (delta === 0) return null;
-	return {
-		axis: horizontal || event.shiftKey ? 0 : 1,
-		direction: delta < 0 ? -1 : 1
+		hold: (source) => {
+			if (current?.held && current.source === source) return;
+			end();
+			start(source, true);
+		},
+		pulse: (source) => {
+			if (current?.held) return;
+			if (!current || current.source !== source) {
+				end();
+				start(source, false);
+			}
+			clearTimer();
+			timer = setTimeout(end, opts.endDelay ?? 500);
+		},
+		instant: (source, change) => {
+			end();
+			start(source, false);
+			change();
+			end();
+		},
+		end,
+		active: () => current !== null,
+		update: (next) => {
+			opts = {
+				...opts,
+				...next
+			};
+		},
+		destroy: end
 	};
 }
 //#endregion
@@ -752,12 +472,6 @@ function knobArcPath(startAngle, endAngle, radius) {
 }
 //#endregion
 //#region src/midi/access.ts
-/** @private */
-const PERMISSION_DENIED = "PERMISSION_DENIED";
-/** @private */
-const NOT_SUPPORTED = "NOT_SUPPORTED";
-/** @private */
-const UNAVAILABLE = "UNAVAILABLE";
 const INITIAL_STATE = {
 	midiAccess: null,
 	error: null,
@@ -771,9 +485,9 @@ const INITIAL_STATE = {
 */
 function toError(reason) {
 	const name = typeof reason === "object" && reason !== null && "name" in reason ? String(reason.name) : "";
-	if (name === "SecurityError" || name === "NotAllowedError") return PERMISSION_DENIED;
-	if (name === "NotSupportedError" || name === "TypeError") return NOT_SUPPORTED;
-	return UNAVAILABLE;
+	if (name === "SecurityError" || name === "NotAllowedError") return "PERMISSION_DENIED";
+	if (name === "NotSupportedError" || name === "TypeError") return "NOT_SUPPORTED";
+	return "UNAVAILABLE";
 }
 /**
 * Request MIDI access in the browser.
@@ -812,7 +526,7 @@ function createMIDIAccess() {
 		if (typeof navigator === "undefined" || !navigator.requestMIDIAccess) {
 			setState({
 				...state,
-				error: NOT_SUPPORTED
+				error: "NOT_SUPPORTED"
 			});
 			return;
 		}
@@ -910,13 +624,6 @@ const STATUS = {
 	PITCH_BEND: 224
 };
 /**
-* Centre of the 14-bit pitch bend range: no bend.
-*
-* The range is not symmetric — 0 is 8192 below centre and 16383 is 8191 above
-* — so a wheel at rest reports exactly this rather than half of the maximum.
-*/
-const PITCH_BEND_CENTER = 8192;
-/**
 * Handle the channel voice messages of every connected input. To be used with
 * {@link createMIDIAccess}. Internally uses {@link createMIDIMessage}, so
 * devices plugged in later are picked up.
@@ -964,619 +671,6 @@ function createMIDIInput(midiAccess, handlers) {
 	};
 }
 //#endregion
-//#region src/pointer/drag.ts
-/**
-* Applied to the element for the lifetime of the instance.
-*
-* `touch-action` stops touch dragging from scrolling the page. That alone makes
-* the browser treat a long press as the start of a text selection, so selection
-* and the iOS callout are suppressed here too.
-*/
-const MANAGED_STYLES = [
-	["touch-action", "none"],
-	["user-select", "none"],
-	["-webkit-user-select", "none"],
-	["-webkit-touch-callout", "none"]
-];
-const managedStyleStates = /* @__PURE__ */ new WeakMap();
-/**
-* Track a pointer drag on an element.
-*
-* Uses Pointer Events only, and pointer capture so that the drag keeps working
-* once the pointer leaves the element. For the lifetime of the instance the
-* element gets `touch-action: none` so that touch dragging does not scroll the
-* page, plus `user-select: none` so that a long press does not start a text
-* selection instead.
-*
-* One pointer at a time by default; see {@link DragOptions.multiPointer}.
-*/
-function createDrag(element, options = {}) {
-	let opts = options;
-	const multiPointer = options.multiPointer ?? false;
-	const capture = element;
-	const style = element.style;
-	let managedStyles = managedStyleStates.get(element);
-	if (style) {
-		if (managedStyles) managedStyles.count += 1;
-		else {
-			const previous = /* @__PURE__ */ new Map();
-			for (const [property, value] of MANAGED_STYLES) {
-				previous.set(property, {
-					value: style.getPropertyValue(property),
-					priority: style.getPropertyPriority(property)
-				});
-				style.setProperty(property, value);
-			}
-			managedStyles = {
-				count: 1,
-				previous
-			};
-			managedStyleStates.set(element, managedStyles);
-		}
-	}
-	const pointers = /* @__PURE__ */ new Map();
-	/**
-	* How many pointers each target carries. Adding the same listener twice is a
-	* no-op and removing it once removes it for good, so a target is subscribed
-	* to while at least one pointer is on it and no longer.
-	*/
-	const targets = /* @__PURE__ */ new Map();
-	let previousCursor;
-	/** The pointer that asked for the lock, while it is still down. */
-	let lockedPointerId = null;
-	let lockRequest = 0;
-	let destroyed = false;
-	function state(event, pointer, deltaX, deltaY) {
-		return {
-			x: pointer.lockBaseX !== void 0 ? pointer.lockBaseX + pointer.lockMoveX : event.screenX - pointer.startX,
-			y: pointer.lockBaseY !== void 0 ? pointer.lockBaseY + pointer.lockMoveY : event.screenY - pointer.startY,
-			deltaX,
-			deltaY,
-			clientX: event.clientX,
-			clientY: event.clientY,
-			pointerId: event.pointerId,
-			event
-		};
-	}
-	/**
-	* `user-select: none` only makes the element's own text unselectable; the
-	* browser still starts a selection on long press and grabs whatever text it
-	* finds nearby. Cancelling the selection outright is what actually stops it.
-	*/
-	function preventSelectStart(event) {
-		event.preventDefault();
-	}
-	function retainTarget(target) {
-		const count = targets.get(target) ?? 0;
-		if (count === 0) {
-			target.addEventListener("pointermove", handlePointerMove);
-			target.addEventListener("pointerup", handlePointerUp);
-			target.addEventListener("pointercancel", handlePointerUp);
-			if (target === element) target.addEventListener("lostpointercapture", handleLostPointerCapture);
-		}
-		targets.set(target, count + 1);
-	}
-	function releaseTarget(target) {
-		const count = targets.get(target) ?? 0;
-		if (count > 1) {
-			targets.set(target, count - 1);
-			return;
-		}
-		target.removeEventListener("pointermove", handlePointerMove);
-		target.removeEventListener("pointerup", handlePointerUp);
-		target.removeEventListener("pointercancel", handlePointerUp);
-		if (target === element) target.removeEventListener("lostpointercapture", handleLostPointerCapture);
-		targets.delete(target);
-	}
-	function handlePointerDown(event) {
-		const pointerEvent = event;
-		if (pointerEvent.button !== 0) return;
-		const pointerId = pointerEvent.pointerId;
-		if (pointers.has(pointerId)) return;
-		if (!multiPointer && pointers.size > 0) return;
-		if (opts.shouldStart && !opts.shouldStart(pointerEvent)) return;
-		const isFirst = pointers.size === 0;
-		if (isFirst && opts.cursor && style) {
-			previousCursor = style.cursor;
-			style.cursor = opts.cursor;
-		}
-		capture.setPointerCapture?.(pointerId);
-		const moveTarget = capture.hasPointerCapture?.(pointerId) === true ? element : globalThis.window ?? element;
-		const pointer = {
-			moveTarget,
-			startX: pointerEvent.screenX,
-			startY: pointerEvent.screenY,
-			lastX: pointerEvent.screenX,
-			lastY: pointerEvent.screenY,
-			lockMoveX: 0,
-			lockMoveY: 0,
-			lastEvent: pointerEvent
-		};
-		pointers.set(pointerId, pointer);
-		retainTarget(moveTarget);
-		if (isFirst) globalThis.document?.addEventListener("selectstart", preventSelectStart);
-		if (isFirst && opts.pointerLock) {
-			const requestId = ++lockRequest;
-			lockedPointerId = pointerId;
-			globalThis.document?.addEventListener("pointerlockchange", handleLockChange);
-			try {
-				(capture.requestPointerLock?.())?.then?.(() => {
-					if (requestId === lockRequest && (!pointers.has(pointerId) || destroyed) && globalThis.document?.pointerLockElement === element) globalThis.document.exitPointerLock?.();
-				}, () => {});
-			} catch {}
-		}
-		opts.onDragStart?.(state(pointerEvent, pointer, 0, 0));
-	}
-	function handlePointerMove(event) {
-		const pointerEvent = event;
-		const pointer = pointers.get(pointerEvent.pointerId);
-		if (!pointer) return;
-		const locked = pointer.lockBaseX !== void 0;
-		const deltaX = locked ? pointerEvent.movementX ?? 0 : pointerEvent.screenX - pointer.lastX;
-		const deltaY = locked ? pointerEvent.movementY ?? 0 : pointerEvent.screenY - pointer.lastY;
-		const threshold = opts.threshold ?? 0;
-		if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return;
-		pointer.lastX = pointerEvent.screenX;
-		pointer.lastY = pointerEvent.screenY;
-		pointer.lastEvent = pointerEvent;
-		if (locked) {
-			pointer.lockMoveX += deltaX;
-			pointer.lockMoveY += deltaY;
-		}
-		opts.onDrag?.(state(pointerEvent, pointer, deltaX, deltaY));
-	}
-	function handleLockChange() {
-		if (lockedPointerId === null) return;
-		const pointer = pointers.get(lockedPointerId);
-		if (!pointer) return;
-		if (globalThis.document?.pointerLockElement === element) {
-			pointer.lockBaseX = pointer.lastX - pointer.startX;
-			pointer.lockBaseY = pointer.lastY - pointer.startY;
-			pointer.lockMoveX = 0;
-			pointer.lockMoveY = 0;
-			return;
-		}
-		if (pointer.lockBaseX === void 0) return;
-		finishDrag(lockedPointerId);
-	}
-	function handlePointerUp(event) {
-		const pointerEvent = event;
-		finishDrag(pointerEvent.pointerId, pointerEvent);
-	}
-	function handleLostPointerCapture(event) {
-		finishDrag(event.pointerId);
-	}
-	function finishDrag(pointerId, event) {
-		const pointer = pointers.get(pointerId);
-		if (!pointer) return;
-		const finalState = event ? state(event, pointer, event.screenX - pointer.lastX, event.screenY - pointer.lastY) : state(pointer.lastEvent, pointer, 0, 0);
-		stopTracking(pointerId);
-		opts.onDragEnd?.(finalState);
-	}
-	function stopTracking(pointerId) {
-		const pointer = pointers.get(pointerId);
-		if (!pointer) return;
-		pointers.delete(pointerId);
-		releaseTarget(pointer.moveTarget);
-		try {
-			if (capture.hasPointerCapture?.(pointerId) === true) capture.releasePointerCapture?.(pointerId);
-		} catch {}
-		if (lockedPointerId === pointerId) {
-			lockedPointerId = null;
-			const document = globalThis.document;
-			document?.removeEventListener("pointerlockchange", handleLockChange);
-			if (document?.pointerLockElement === element) document.exitPointerLock?.();
-		}
-		if (pointers.size > 0) return;
-		globalThis.document?.removeEventListener("selectstart", preventSelectStart);
-		if (previousCursor !== void 0 && style) {
-			style.cursor = previousCursor;
-			previousCursor = void 0;
-		}
-	}
-	element.addEventListener("pointerdown", handlePointerDown);
-	return {
-		update: (next) => {
-			opts = {
-				...opts,
-				...next,
-				multiPointer
-			};
-		},
-		destroy: () => {
-			if (destroyed) return;
-			destroyed = true;
-			element.removeEventListener("pointerdown", handlePointerDown);
-			for (const pointerId of [...pointers.keys()]) finishDrag(pointerId);
-			if (style && managedStyles && --managedStyles.count === 0) {
-				for (const [property] of MANAGED_STYLES) {
-					const previous = managedStyles.previous.get(property);
-					if (previous?.value) style.setProperty(property, previous.value, previous.priority);
-					else style.removeProperty(property);
-				}
-				managedStyleStates.delete(element);
-			}
-		}
-	};
-}
-//#endregion
-//#region src/number-input/stepper-drag.ts
-/**
-* Drag up and down on the steppers of a number input to move its value, one
-* `step` every `pixels` — up raises it, as on a knob.
-*
-* Counted from where the drag started moving rather than added up per
-* event, so rounding cannot accumulate. The start is taken on the first
-* move, not on pointerdown: a stepper button acts on pointerdown, so by then
-* the value may already have been nudged once, and the drag carries on from
-* there.
-*/
-function createStepperDrag(element, options) {
-	let opts = options;
-	let origin = null;
-	let moved = false;
-	/**
-	* Which sensitivity the drag is counting at, and where the previous event
-	* was — a key produces no pointer event of its own, so a change is only
-	* seen on the next move and has to be dated back to the one before it.
-	*/
-	let factor = 1;
-	let previousY = 0;
-	const drag = createDrag(element, {
-		threshold: 1,
-		cursor: "ns-resize",
-		pointerLock: opts.pointerLock,
-		onDragStart: (state) => {
-			origin = null;
-			moved = false;
-			factor = selectModifier(opts.sensitivity ?? DEFAULT_DRAG_SENSITIVITY, state.event).value;
-		},
-		onDrag: (state) => {
-			const { y } = state;
-			if (!origin) {
-				origin = {
-					y,
-					value: opts.getValue()
-				};
-				previousY = y;
-				return;
-			}
-			const sensitivity = opts.sensitivity ?? DEFAULT_DRAG_SENSITIVITY;
-			const next = selectModifier(sensitivity, state.event).value;
-			if (next !== factor) {
-				origin = {
-					y: previousY,
-					value: opts.getValue()
-				};
-				factor = next;
-			}
-			previousY = y;
-			const steps = Math.round(-(y - origin.y) / (opts.pixels ?? 1));
-			if (steps === 0) return;
-			moved = true;
-			const step = opts.range.step ?? 1;
-			const amounts = mapModifier(sensitivity, (f) => ["raw", step * f]);
-			opts.onChange(applyDelta(origin.value, steps, amounts, opts.range, state.event));
-		},
-		onDragEnd: () => {
-			moved = false;
-		}
-	});
-	return {
-		update: (next) => {
-			opts = {
-				...opts,
-				...next
-			};
-			if ("pointerLock" in next) drag.update({ pointerLock: opts.pointerLock });
-		},
-		moved: () => moved,
-		destroy: () => drag.destroy()
-	};
-}
-//#endregion
-//#region src/number-input/value.ts
-/**
-* The ranges a number input moves its value across, with the open ends
-* filled in.
-*
-* A normalized amount needs a finite span even when an end is unbounded or
-* clamping is off. Safe integers provide one without overflowing the span a
-* scale calculates. A raw amount needs no span, so its open ends can cover
-* every finite number instead of stopping at the safe-integer range.
-*/
-function numberInputRanges({ min, max, step, scale, clampValue = true }) {
-	const lo = clampValue ? min : void 0;
-	const hi = clampValue ? max : void 0;
-	return {
-		normalized: {
-			min: lo ?? Number.MIN_SAFE_INTEGER,
-			max: hi ?? Number.MAX_SAFE_INTEGER,
-			step,
-			scale
-		},
-		raw: {
-			min: lo ?? -Number.MAX_VALUE,
-			max: hi ?? Number.MAX_VALUE,
-			step,
-			scale
-		}
-	};
-}
-/**
-* Move a number input's value by one press of a key, a wheel notch or a
-* stepper, picking the range that suits the kind of amount. See `applyDelta`.
-*/
-function nudgeNumberInput(value, direction, options, ranges, modifiers) {
-	const [mode] = selectModifier(options, modifiers).value;
-	return applyDelta(value, direction, options, mode === "raw" ? ranges.raw : ranges.normalized, modifiers);
-}
-/**
-* Where the value stands against the ends: whether it can go no further
-* down or up, and whether it lies outside them — which only an unclamped
-* input, or a value set from outside, can do.
-*/
-function numberInputBounds(value, { min, max, clampValue = true }) {
-	return {
-		atMin: clampValue && min !== void 0 && value <= min,
-		atMax: clampValue && max !== void 0 && value >= max,
-		outOfRange: min !== void 0 && value < min || max !== void 0 && value > max
-	};
-}
-/**
-* The value typed text commits to, or `null` when there is no number in it.
-*
-* Text with no number is not a value: the input should go back to what it
-* was showing rather than commit a zero the user never typed. What is read
-* is clamped here and not while typing, since clamping as the user types
-* would make "1500" impossible to enter into an input whose max is 100.
-*/
-function commitNumberInputText(text, parse, { min, max, clampValue = true }) {
-	const parsed = parse(text);
-	if (!Number.isFinite(parsed)) return null;
-	let committed = parsed;
-	if (clampValue && min !== void 0) committed = Math.max(committed, min);
-	if (clampValue && max !== void 0) committed = Math.min(committed, max);
-	return committed;
-}
-//#endregion
-//#region src/number-input/text.ts
-/**
-* Reading a number out of the text of a number input, and keeping the caret
-* in place while the number under it changes.
-*
-* The text is whatever `format` made of the value — `"440 Hz"`, `"-6.0 dB"` —
-* or a half-typed entry, so none of this assumes the text is a number alone.
-*/
-/** The signs a number can carry. U+2212 is what some `Intl.NumberFormat` locales write. */
-const SIGNS = "+-−";
-/**
-* Where the number is in the text: from its first digit to its last, with the
-* sign and the decimal point in front of it. Whatever is left on either side
-* is taken for the unit, so it does not matter whether a space separates them,
-* or what the number looks like — `+6.0`, `1e+21`, `1,000` and `1:30` are each
-* one number. `null` when the text has no digit at all.
-*/
-function numberSpan(text) {
-	const first = text.search(/\d/);
-	if (first === -1) return null;
-	let start = first;
-	if (text[start - 1] === ".") start -= 1;
-	if (start > 0 && SIGNS.includes(text[start - 1])) start -= 1;
-	return {
-		start,
-		end: text.search(/\d\D*$/) + 1
-	};
-}
-/** A plain number, and nothing else: no grouping, no other separators. */
-const PLAIN_NUMBER = /^[+\-\u2212]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+\-\u2212]?\d+)?$/;
-/**
-* The number in the text, with the unit after it ignored: the default `parse`
-* of a number input.
-*
-* `NaN`, which leaves the value alone, whenever the number cannot be read
-* safely, rather than a part of it: text with no number, a number that is not
-* a plain one (`1,000` would otherwise read as 1, and `1:30` as 1), and text
-* with something in front of the number, which can change what it means (the
-* `L` of a pan reading `L 30`). A `format` that writes any of those needs its
-* own `parse`.
-*/
-function parseNumberText(text) {
-	const span = numberSpan(text);
-	if (!span || text.slice(0, span.start).trim() !== "") return NaN;
-	const number = text.slice(span.start, span.end);
-	return PLAIN_NUMBER.test(number) ? Number(number.replace(/\u2212/g, "-")) : NaN;
-}
-/**
-* The index the caret is measured against: the decimal point, or where one
-* would go if the number has none — in front of an exponent, if there is one.
-*
-* Measuring from an end instead would slide the caret across a digit whenever
-* the number changed length — `9.9` to `10.0` gains a character in front, `10`
-* to `9` loses one, and so does `9e+9` to `1e+10` behind — which is exactly
-* what stepping does.
-*/
-function decimalAnchor(text, span) {
-	const number = text.slice(span.start, span.end);
-	const exponent = number.search(/[eE][+\-\u2212]?\d/);
-	const mantissa = exponent === -1 ? number : number.slice(0, exponent);
-	const dot = mantissa.indexOf(".");
-	return span.start + (dot === -1 ? mantissa.length : dot);
-}
-const NO_NUMBER = {
-	start: 0,
-	end: 0
-};
-/**
-* Where the caret is, relative to the decimal point, so that it can be put
-* back at the same digit once the value has changed. See
-* {@link caretAtDecimalOffset}.
-*/
-function caretDecimalOffset(text, caret) {
-	return caret - decimalAnchor(text, numberSpan(text) ?? NO_NUMBER);
-}
-/**
-* The caret position `offset` characters from the decimal point of the new
-* text, kept within the number.
-*
-* @example
-* // The caret sits in front of the point of "9.9" when ArrowUp turns it
-* // into "10.0"
-* const offset = caretDecimalOffset('9.9', 1) // 0
-* caretAtDecimalOffset('10.0', offset) // 2: still in front of the point
-*/
-function caretAtDecimalOffset(text, offset) {
-	const span = numberSpan(text) ?? NO_NUMBER;
-	const place = decimalAnchor(text, span) + offset;
-	return Math.max(span.start, Math.min(place, span.end));
-}
-//#endregion
-//#region src/options/replace.ts
-/**
-* The `update()` argument that leaves an instance with exactly `next` as its
-* options.
-*
-* `update()` merges into what the instance has, which suits a wrapper that
-* pushes one setting at a time. A wrapper handed the whole new set instead —
-* a Svelte action, a Vue composable — has to clear what the new set no longer
-* carries, or a handler taken away, or an option left to its default, keeps
-* working.
-*
-* @example
-* instance.update(replaceOptions(previous, next))
-*/
-function replaceOptions(previous, next) {
-	return {
-		...Object.fromEntries(Object.keys(previous ?? {}).map((key) => [key, void 0])),
-		...next
-	};
-}
-//#endregion
-//#region src/piano/layout.ts
-/**
-* `[noteRange.first, noteRange.first + 1, ..., noteRange.last]`
-*/
-function getNoteRangeArray(noteRange) {
-	return Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
-}
-const DEFAULT_KEY_GAP = 1;
-const DEFAULT_BLACK_KEY_WIDTH_RATIO = .65;
-const DEFAULT_BLACK_KEY_HEIGHT_RATIO = .6;
-/**
-* How many white keys sit at or before each pitch class, counting from C.
-*
-* A black key shares the number of the white key to its left plus one, which
-* puts it on the boundary between the two; {@link notePosition} then shifts it
-* back by half its width to centre it there.
-*/
-const whiteKeysBefore = {
-	C: 0,
-	"C#": 1,
-	D: 1,
-	"D#": 2,
-	E: 2,
-	F: 3,
-	"F#": 4,
-	G: 4,
-	"G#": 5,
-	A: 5,
-	"A#": 6,
-	B: 6
-};
-/** Width of a black key in pixels. */
-function blackKeyWidth(layout) {
-	return layout.whiteKeyWidth * (layout.blackKeyWidthRatio ?? DEFAULT_BLACK_KEY_WIDTH_RATIO);
-}
-function rawNotePosition(note, layout) {
-	const slot = layout.whiteKeyWidth + (layout.keyGap ?? DEFAULT_KEY_GAP);
-	const target = noteKey(note);
-	const first = noteKey(layout.noteRange.first);
-	const octave = Math.floor((note - layout.noteRange.first) / 12);
-	const octaveOffset = noteKeys.indexOf(first) > noteKeys.indexOf(target) ? 1 : 0;
-	const whiteKeysIn = whiteKeysBefore[target] - whiteKeysBefore[first] + (octave + octaveOffset) * 7;
-	return isBlackKey(note) ? whiteKeysIn * slot - blackKeyWidth(layout) / 2 : whiteKeysIn * slot;
-}
-function pianoBounds(layout) {
-	const notes = getNoteRangeArray(layout.noteRange);
-	if (notes.length === 0) return {
-		left: 0,
-		right: 0
-	};
-	let left = Infinity;
-	let right = -Infinity;
-	const whiteWidth = layout.whiteKeyWidth + (layout.keyGap ?? DEFAULT_KEY_GAP);
-	for (const note of notes) {
-		const noteLeft = rawNotePosition(note, layout);
-		const width = isBlackKey(note) ? blackKeyWidth(layout) : whiteWidth;
-		left = Math.min(left, noteLeft);
-		right = Math.max(right, noteLeft + width);
-	}
-	return {
-		left,
-		right
-	};
-}
-/** Width of the whole keyboard in pixels. */
-function pianoWidth(layout) {
-	const { left, right } = pianoBounds(layout);
-	return right - left;
-}
-/**
-* Offset of the left edge of a key from the left edge of the keyboard, in
-* pixels.
-*
-* Notes outside `noteRange` are placed too, so the value is negative below
-* `noteRange.first`.
-*/
-function notePosition(note, layout) {
-	return rawNotePosition(note, layout) - pianoBounds(layout).left;
-}
-/**
-* The note drawn at a point, or null where there is none.
-*
-* Black keys are tested first, so they win where they overlap a white one. A
-* white key covers its gap as well as its width, so the whole width of the
-* keyboard belongs to some key and a click cannot fall between two.
-*
-* @param x offset from the left edge of the keyboard, in pixels
-* @param y offset from its top edge, in pixels
-* @param height height of the keyboard, in pixels
-*/
-function noteAt(x, y, height, layout) {
-	if (x < 0 || x >= pianoWidth(layout) || y < 0 || y >= height) return null;
-	const notes = getNoteRangeArray(layout.noteRange);
-	if (y < height * (layout.blackKeyHeightRatio ?? DEFAULT_BLACK_KEY_HEIGHT_RATIO)) for (const note of notes) {
-		if (isWhiteKey(note)) continue;
-		const left = notePosition(note, layout);
-		if (left <= x && x < left + blackKeyWidth(layout)) return note;
-	}
-	const slot = layout.whiteKeyWidth + (layout.keyGap ?? DEFAULT_KEY_GAP);
-	for (const note of notes) {
-		if (isBlackKey(note)) continue;
-		const left = notePosition(note, layout);
-		if (left <= x && x < left + slot) return note;
-	}
-	return null;
-}
-/**
-* The white key width that makes the keyboard exactly `width` wide, for a
-* keyboard that follows the size of its container.
-*
-* Solved from {@link pianoWidth} rather than by dividing among the white
-* keys, so that a range that starts or ends on a black key — which sticks out
-* by a fraction of a white key — still fills the container. The width grows
-* linearly with the white key width, so two samples pin it down.
-*/
-function fitWhiteKeyWidth(width, layout) {
-	const at = (whiteKeyWidth) => pianoWidth({
-		...layout,
-		whiteKeyWidth
-	});
-	const slope = at(2) - at(1);
-	if (slope <= 0) return 0;
-	return (width - (at(1) - slope)) / slope;
-}
-//#endregion
 //#region src/piano/shortcuts.ts
 /**
 * Ready-made keyboard layouts. Both assume `noteRange.first` is a C.
@@ -1823,285 +917,6 @@ function createPianoInput(element, options) {
 	};
 }
 //#endregion
-//#region src/selection/box.ts
-function rectOf(from, to) {
-	return {
-		x: Math.min(from[0], to[0]),
-		y: Math.min(from[1], to[1]),
-		width: Math.abs(to[0] - from[0]),
-		height: Math.abs(to[1] - from[1])
-	};
-}
-/** Whether the box covers the point, edges included. */
-function selectionBoxCovers(box, [x, y]) {
-	return x >= box.x && x <= box.x + box.width && y >= box.y && y <= box.y + box.height;
-}
-/**
-* Selecting by dragging a box over a set of items.
-*
-* The drag itself is not here: the caller owns the pointer, and reports where
-* it went in the same 0..1 space the items are given in.
-*/
-function createSelectionBox(options) {
-	let opts = options;
-	let drag = null;
-	let box = null;
-	function setBox(next) {
-		box = next;
-		opts.onBoxChange?.(next);
-	}
-	function apply(rect, base) {
-		const inside = [];
-		for (const [id, at] of opts.items()) if (selectionBoxCovers(rect, at) && !base.includes(id)) inside.push(id);
-		opts.onSelectionChange?.([...base, ...inside]);
-	}
-	return {
-		update: (next) => {
-			opts = {
-				...opts,
-				...next
-			};
-		},
-		begin: (at, { additive = false, selection = [] } = {}) => {
-			drag = {
-				from: at,
-				base: additive ? [...selection] : []
-			};
-			setBox(rectOf(at, at));
-			if (!additive) opts.onSelectionChange?.([]);
-		},
-		move: (to) => {
-			if (!drag) return;
-			const rect = rectOf(drag.from, to);
-			setBox(rect);
-			apply(rect, drag.base);
-		},
-		end: () => {
-			const running = drag !== null;
-			drag = null;
-			if (box !== null) setBox(null);
-			return running;
-		},
-		box: () => box,
-		destroy: () => {
-			drag = null;
-			box = null;
-		}
-	};
-}
-//#endregion
-//#region src/points-editor/index.ts
-/**
-* A point's value is its position in the editor, so its range is the editor:
-* no scaling, and no rounding to a step.
-*/
-const POINT_AXIS = {
-	min: 0,
-	max: 1
-};
-/**
-* How much one wheel notch moves a point by default: a hundredth of the
-* editor, whatever its pixel size.
-*/
-const POINTS_EDITOR_DEFAULT_WHEEL = ["normalized", .01];
-/**
-* How much one arrow key press moves a point by default. Shift is the
-* fine-adjustment key everywhere else, so it is bound here too — but only on
-* the keyboard. On the wheel it already means the x axis, and browsers hand
-* shift+wheel over as horizontal scrolling anyway.
-*/
-const POINTS_EDITOR_DEFAULT_KEYBOARD = {
-	default: ["normalized", .01],
-	shift: ["normalized", .001]
-};
-/** Keep a point within its range. An axis left out runs from 0 to 1. */
-function clampPoint(point, min, max) {
-	return {
-		x: clamp(point.x, min?.x ?? 0, max?.x ?? 1),
-		y: clamp(point.y, min?.y ?? 0, max?.y ?? 1)
-	};
-}
-const EMPTY = [];
-/**
-* How far a group may move before something in it leaves its range.
-*
-* Clamping each point on its own would break the shape of the selection: the
-* one that reached the edge would stop while the rest carried on. One amount
-* for all of them means the whole selection stops together.
-*/
-function allowedDelta(delta, entries) {
-	let loX = -Infinity;
-	let hiX = Infinity;
-	let loY = -Infinity;
-	let hiY = Infinity;
-	for (const { start, point } of entries) {
-		if (point.readonly) continue;
-		loX = Math.max(loX, (point.min?.x ?? 0) - start.x);
-		hiX = Math.min(hiX, (point.max?.x ?? 1) - start.x);
-		loY = Math.max(loY, (point.min?.y ?? 0) - start.y);
-		hiY = Math.min(hiY, (point.max?.y ?? 1) - start.y);
-	}
-	return {
-		x: hiX < loX ? 0 : clamp(delta.x, loX, hiX),
-		y: hiY < loY ? 0 : clamp(delta.y, loY, hiY)
-	};
-}
-/**
-* The selection and the moves of a points editor: which points a press or a
-* box selects, and how a selection moves as one.
-*
-* The points stay with the wrapper, which registers each one; the editor only
-* reads them when it needs to, so a point's value can change on every frame
-* of a drag without anything being re-registered.
-*/
-function createPointsEditor(options = {}) {
-	let opts = options;
-	const points = /* @__PURE__ */ new Map();
-	/** What the current drag picked up, and where those points started. */
-	let dragged = [];
-	const selection = () => opts.selectable ? opts.selection ?? EMPTY : EMPTY;
-	function changeSelection(next) {
-		opts = {
-			...opts,
-			selection: next
-		};
-		opts.onSelectionChange?.(next);
-	}
-	function snapshot(ids) {
-		return ids.flatMap((id) => {
-			const point = points.get(id)?.();
-			return point ? [{
-				id,
-				start: { ...point.value }
-			}] : [];
-		});
-	}
-	function moveFrom(entries, delta) {
-		const withPoint = entries.flatMap((entry) => {
-			const point = points.get(entry.id)?.();
-			return point ? [{
-				...entry,
-				point
-			}] : [];
-		});
-		const allowed = allowedDelta(delta, withPoint);
-		for (const { start, point } of withPoint) {
-			if (point.readonly) continue;
-			point.onChange?.({
-				x: toPrecision(start.x + allowed.x),
-				y: toPrecision(start.y + allowed.y)
-			});
-		}
-	}
-	function nudgeSelection(id, delta) {
-		const current = selection();
-		moveFrom(snapshot(current.includes(id) ? current : [id]), delta);
-	}
-	function nudgePoint(id, axis, direction, option, modifiers) {
-		const point = points.get(id)?.();
-		if (!point) return;
-		const { value } = point;
-		const next = applyDelta(value[axis], direction, option, POINT_AXIS, modifiers);
-		nudgeSelection(id, {
-			x: axis === "x" ? next - value.x : 0,
-			y: axis === "y" ? next - value.y : 0
-		});
-	}
-	const box = createSelectionBox({
-		*items() {
-			for (const [id, read] of points) {
-				const { x, y } = read().value;
-				yield [id, [x, y]];
-			}
-		},
-		onBoxChange: (rect) => opts.onSelectionBoxChange?.(rect),
-		onSelectionChange: changeSelection
-	});
-	return {
-		update: (next) => {
-			opts = {
-				...opts,
-				...next
-			};
-		},
-		registerPoint: (id, read) => {
-			points.set(id, read);
-			return () => {
-				if (points.get(id) === read) points.delete(id);
-			};
-		},
-		isPointElement: (element) => {
-			if (!element) return false;
-			for (const read of points.values()) if (read().element?.contains(element)) return true;
-			return false;
-		},
-		beginPointDrag: (id, modifiers) => {
-			if (!opts.selectable) {
-				dragged = snapshot([id]);
-				return;
-			}
-			const current = selection();
-			const additive = modifiers.ctrlKey || modifiers.metaKey;
-			let next;
-			if (additive) next = current.includes(id) ? current.filter((x) => x !== id) : [...current, id];
-			else if (current.includes(id)) next = current;
-			else next = [id];
-			changeSelection([...next]);
-			dragged = next.includes(id) ? snapshot(next) : [];
-		},
-		movePointDrag: (delta) => moveFrom(dragged, delta),
-		nudgeSelection,
-		nudgePoint,
-		nudgeFocusedPoint: (axis, direction, modifiers) => {
-			for (const [id, read] of points) {
-				const { element, wheel, readonly, onChange } = read();
-				const active = element?.ownerDocument.activeElement;
-				if (!active || !element?.contains(active)) continue;
-				if (!wheel || readonly || !onChange) return false;
-				nudgePoint(id, axis, direction, wheel, modifiers);
-				return true;
-			}
-			return false;
-		},
-		beginSelectionBox: (at, modifiers) => {
-			if (!opts.selectable) return;
-			box.begin([at.x, at.y], {
-				additive: modifiers.ctrlKey || modifiers.metaKey,
-				selection: selection()
-			});
-		},
-		moveSelectionBox: (to) => box.move([to.x, to.y]),
-		endSelectionBox: () => {
-			if (!box.end()) return;
-			const [first] = selection();
-			const element = first ? points.get(first)?.().element : null;
-			if (element && "focus" in element) element.focus();
-		},
-		destroy: () => {
-			box.destroy();
-			dragged = [];
-		}
-	};
-}
-//#endregion
-//#region src/xy.ts
-function isPair(value) {
-	return Array.isArray(value);
-}
-/**
-* Spread a setting that may have been given as a single value.
-*
-* The parameter is written out rather than taken as `XYInput<T>`: a
-* conditional type cannot be narrowed, so the constraint stays where it is
-* declared and this takes both forms.
-*
-* The pair is copied rather than passed along, so that the result is a tuple
-* the caller owns even when a readonly one was given.
-*/
-function toXY(value) {
-	return isPair(value) ? [value[0], value[1]] : [value, value];
-}
-//#endregion
 //#region src/pointer/drag-value.ts
 /**
 * Map the pointer onto the bounding rect of an element: the value *is* the
@@ -2222,8 +1037,8 @@ function createDragValue(element, options) {
 			if (!position) return;
 			active = true;
 			lastValue = valueOf(position);
-			if (opts.updateOnPointerDown) opts.onChange?.(lastValue, state);
 			opts.onDragStart?.(lastValue, state);
+			if (opts.updateOnPointerDown) opts.onChange?.(lastValue, state);
 		},
 		onDrag: (state) => {
 			if (!active) return;
@@ -2336,18 +1151,15 @@ function createLongPress(options) {
 * The listener is registered with `passive: false` so that the handler can call
 * `preventDefault()` to stop the page from scrolling.
 */
-function createWheel(element, onWheel, options = {}) {
-	let opts = {
-		...options,
-		onWheel
-	};
+function createWheel(element, options) {
+	let opts = options;
 	function hasFocus() {
 		const active = element.ownerDocument?.activeElement;
 		return !!active && element.contains(active);
 	}
 	const handler = (event) => {
 		if (opts.requireFocus && !hasFocus()) return;
-		opts.onWheel?.(event);
+		opts.onWheel(event);
 	};
 	element.addEventListener("wheel", handler, { passive: false });
 	return {
@@ -2377,91 +1189,6 @@ function valuePercent(value, { min, max, scale = linearScale }, reversed = false
 	return toFixed((reversed ? 1 - normalized : normalized) * 100);
 }
 //#endregion
-//#region src/slider/decimal-digits.ts
-/**
-* How many digits a number carries after the decimal point.
-*
-* `Slider.Marks` builds its labels by multiplying an interval, which leaves
-* binary debris in the last digits (`0.1 * 3` is `0.30000000000000004`). The
-* count is what tells `toFixed` how far to round that back.
-*
-* The exponent form has to be handled separately: `String(1e-7)` is `'1e-7'`,
-* which has no decimal point at all, so reading the text after the point
-* reports no digits and the interval rounds away to whole numbers.
-*/
-function decimalDigits(x) {
-	if (!Number.isFinite(x)) return 0;
-	const text = String(x);
-	const e = text.indexOf("e");
-	if (e === -1) return text.split(".")[1]?.length ?? 0;
-	const fraction = text.slice(0, e).split(".")[1]?.length ?? 0;
-	return Math.max(0, fraction - Number(text.slice(e + 1)));
-}
-//#endregion
-//#region src/slider/marks.ts
-/**
-* The marks `options` asks for between `min` and `max`, in ascending order.
-*
-* Each value is a whole multiple of the interval, rounded to the digits the
-* interval has: stepping by 0.1 would otherwise put binary debris in the
-* labels (`0.1 * 3` is `0.30000000000000004`).
-*/
-function sliderMarks(options, min, max, step) {
-	const { per, mark = true, label = true } = typeof options === "object" ? options : { per: options };
-	const optionsList = [];
-	const interval = per === "step" ? step : per;
-	const count = Math.floor(max / interval) - Math.ceil(min / interval) + 1;
-	for (let i = 0; i < count; i++) {
-		const value = toFixed(interval * (Math.ceil(min / interval) + i), decimalDigits(interval));
-		optionsList.push({
-			value,
-			mark,
-			label
-		});
-	}
-	return optionsList;
-}
-//#endregion
-//#region src/style.ts
-/**
-* A number as a CSS length, for a custom property.
-*
-* A custom property takes whatever text it is given, so `--size: 50` comes out
-* as the invalid `50` rather than `50px`. React appends `px` to a bare number
-* only for the properties it knows take a length, and a custom property is
-* never one of them; Vue and Svelte append nothing at all. Anything already a
-* string is passed through, so `'3rem'` and `'100%'` still work.
-*/
-function cssLength(value) {
-	return typeof value === "number" ? `${value}px` : value;
-}
-/**
-* Take an element out of sight while leaving it in the accessibility tree and
-* in the tab order.
-*
-* `display: none` and `visibility: hidden` would remove it from both, and the
-* native control underneath a headless component is what carries the ARIA and
-* the keyboard behaviour. `pointer-events: none` is safe because nothing is
-* ever clicked here directly: a `<label>` forwards its click, and a drag is
-* handled by the part that is visible.
-*
-* Every value is a string with its unit, so the object can be handed to any
-* framework's `style` binding as it is.
-*/
-const visuallyHiddenStyle = {
-	position: "absolute",
-	width: "1px",
-	height: "1px",
-	padding: "0",
-	margin: "-1px",
-	overflow: "hidden",
-	clip: "rect(0, 0, 0, 0)",
-	clipPath: "inset(50%)",
-	whiteSpace: "nowrap",
-	border: "0",
-	pointerEvents: "none"
-};
-//#endregion
-export { DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, KNOB_VIEWBOX_SIZE, NOT_SUPPORTED, PERMISSION_DENIED, PITCH_BEND_CENTER, POINTS_EDITOR_DEFAULT_KEYBOARD, POINTS_EDITOR_DEFAULT_WHEEL, POINT_AXIS, SHORTCUTS, UNAVAILABLE, applyDelta, arrowKeyDirection, arrowKeyMove, blackKeyWidth, caretAtDecimalOffset, caretDecimalOffset, checkSteps, clampPoint, commitNumberInputText, createAnimationCanvas, createDrag, createDragValue, createDropZone, createLongPress, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createPointsEditor, createSelectionBox, createStepperDrag, createWheel, cssLength, drawingState, elementMapping, fitWhiteKeyWidth, getNoteRangeArray, isArrowKey, isDrawingState, knobAngles, knobArcPath, knobArcPoint, knobArcRadius, mapModifier, matchesAccept, noteAt, notePosition, nudgeNumberInput, numberInputBounds, numberInputRanges, numberSpan, parseNumberText, partitionByAccept, pianoWidth, relativeMapping, replaceOptions, selectModifier, selectionBoxCovers, sliderMarks, toXY, valuePercent, visuallyHiddenStyle, wheelDirection, wheelMove };
+export { DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, KNOB_VIEWBOX_SIZE, SHORTCUTS, createAnimationCanvas, createChangeGesture, createDrag, createDragValue, createDropZone, createLongPress, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createPointsEditor, createWheel, elementMapping, knobAngles, knobArcPath, knobArcRadius, notePosition, relativeMapping, valuePercent };
 
 //# sourceMappingURL=index.js.map