@tremolo-ui/dom 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { clamp, linearScale, normalizeValue, noteAt, stepValue, toPrecision } from "@tremolo-ui/functions";
+import { clamp, isBlackKey, isWhiteKey, linearScale, normalizeValue, noteKey, noteKeys, 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
@@ -235,6 +235,522 @@ 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.
+*
+* ```ts
+* const zone = createDropZone(element, {
+*   accept: 'audio/*',
+*   onDrop: (files) => load(files[0]),
+* })
+* ```
+*
+* The element needs no attribute of its own: a drop target is made by
+* cancelling `dragover`, which this does.
+*/
+function createDropZone(element, options = {}) {
+	let opts = options;
+	let state = {
+		over: false,
+		invalid: false
+	};
+	/**
+	* `dragenter` and `dragleave` fire for descendants too, so moving between
+	* two children of the zone leaves before it enters. Counting the pairs is
+	* what keeps the state from flickering off in the middle of the element.
+	*/
+	let depth = 0;
+	function setState(next) {
+		if (next.over === state.over && next.invalid === state.invalid) return;
+		state = next;
+		opts.onStateChange?.(state);
+	}
+	function carriesFiles(transfer) {
+		return !!transfer?.types.includes("Files");
+	}
+	/** Whether anything being dragged could still be accepted. */
+	function anyAcceptable(transfer) {
+		const items = Array.from(transfer?.items ?? []).filter((item) => item.kind === "file");
+		if (items.length === 0) return true;
+		return items.some((item) => matchesAccept({ type: item.type }, opts.accept));
+	}
+	function onDragEnter(event) {
+		if (!carriesFiles(event.dataTransfer)) return;
+		event.preventDefault();
+		depth += 1;
+		setState({
+			over: true,
+			invalid: !anyAcceptable(event.dataTransfer)
+		});
+	}
+	function onDragOver(event) {
+		if (!carriesFiles(event.dataTransfer)) return;
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = opts.disabled || state.invalid ? "none" : "copy";
+		if (!state.over) {
+			depth = Math.max(depth, 1);
+			setState({
+				over: true,
+				invalid: !anyAcceptable(event.dataTransfer)
+			});
+		}
+	}
+	function onDragLeave(event) {
+		if (!carriesFiles(event.dataTransfer)) return;
+		depth = Math.max(0, depth - 1);
+		if (depth === 0) setState({
+			over: false,
+			invalid: false
+		});
+	}
+	function onDrop(event) {
+		if (!carriesFiles(event.dataTransfer)) return;
+		event.preventDefault();
+		depth = 0;
+		setState({
+			over: false,
+			invalid: false
+		});
+		if (opts.disabled) return;
+		const { accepted, rejected } = partitionByAccept(event.dataTransfer?.files ?? [], opts.accept);
+		const taken = opts.multiple ? accepted : accepted.slice(0, 1);
+		if (taken.length > 0) opts.onDrop?.(taken, event);
+		if (rejected.length > 0) opts.onReject?.(rejected, event);
+	}
+	/**
+	* A drag that ends anywhere else — dropped on another element, cancelled
+	* with Esc, taken out of the window — sends no `dragleave` here, and the
+	* element would stay marked as a drop target for good.
+	*/
+	function onDragEndAnywhere() {
+		depth = 0;
+		setState({
+			over: false,
+			invalid: false
+		});
+	}
+	const handlers = {
+		dragenter: onDragEnter,
+		dragover: onDragOver,
+		dragleave: onDragLeave,
+		drop: onDrop
+	};
+	for (const [type, handler] of Object.entries(handlers)) element.addEventListener(type, handler);
+	const doc = element.ownerDocument;
+	doc?.addEventListener("dragend", onDragEndAnywhere);
+	doc?.addEventListener("drop", onDragEndAnywhere);
+	return {
+		get state() {
+			return state;
+		},
+		update: (next) => {
+			opts = {
+				...opts,
+				...next
+			};
+		},
+		destroy: () => {
+			for (const [type, handler] of Object.entries(handlers)) element.removeEventListener(type, handler);
+			doc?.removeEventListener("dragend", onDragEndAnywhere);
+			doc?.removeEventListener("drop", onDragEndAnywhere);
+		}
+	};
+}
+//#endregion
+//#region src/input/modifiers.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.
+*/
+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;
+	}
+	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.`);
+	}
+	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
+	};
+}
+//#endregion
+//#region src/knob/geometry.ts
+/**
+* Width and height of the viewBox a knob is drawn in. The arcs and the thumb
+* are laid out in these units, and the SVG scales them to the knob's size.
+*/
+const KNOB_VIEWBOX_SIZE = 100;
+const center = 50;
+function knobAngles({ value, min, max, scale, startValue, angleRange }) {
+	const p = scale.normalize(value, min, max);
+	const s = scale.normalize(startValue, min, max);
+	const r1 = -angleRange / 2;
+	return {
+		p,
+		r1,
+		r2: r1 + Math.min(p, s) * angleRange,
+		r3: r1 + Math.max(p, s) * angleRange,
+		r4: angleRange / 2
+	};
+}
+/**
+* The point at `angle` on a circle of `radius` around the centre of the
+* viewBox.
+*
+* The radius depends on the stroke of the line being drawn, which each arc
+* has its own of, so the point is found per arc rather than once for the knob.
+*/
+function knobArcPoint(angle, radius) {
+	return {
+		x: center + radius * Math.cos(radian(angle - 90)),
+		y: center + radius * Math.sin(radian(angle - 90))
+	};
+}
+/**
+* The radius that keeps a stroke of `strokeWidth` inside the viewBox: half of
+* the stroke falls outside the path it is drawn along.
+*/
+function knobArcRadius(strokeWidth) {
+	const width = typeof strokeWidth === "number" ? strokeWidth : Number.parseFloat(String(strokeWidth));
+	return Number.isFinite(width) ? center - width / 2 : center;
+}
+/** Build an SVG path for an arc, splitting full turns into drawable segments. */
+function knobArcPath(startAngle, endAngle, radius) {
+	const start = knobArcPoint(startAngle, radius);
+	const sweep = endAngle - startAngle;
+	const segmentCount = Math.max(1, Math.ceil(Math.abs(sweep) / 180));
+	const segmentSweep = sweep / segmentCount;
+	let path = `M ${start.x} ${start.y}`;
+	for (let i = 1; i <= segmentCount; i += 1) {
+		const end = knobArcPoint(startAngle + segmentSweep * i, radius);
+		path += ` A ${radius} ${radius} 0 0 ${segmentSweep >= 0 ? 1 : 0} ${end.x} ${end.y}`;
+	}
+	return path;
+}
+//#endregion
 //#region src/midi/access.ts
 /** @private */
 const PERMISSION_DENIED = "PERMISSION_DENIED";
@@ -684,74 +1200,67 @@ function createDrag(element, options = {}) {
 	};
 }
 //#endregion
-//#region src/piano/index.ts
-const DEFAULT_SOURCE = "api";
+//#region src/number-input/stepper-drag.ts
 /**
-* Drive a piano keyboard with pointers, and own what is sounding.
-*
-* Every way of playing a note goes through the one instance — pointers here,
-* keyboard shortcuts and MIDI through {@link PianoInputInstance.noteOn} — so
-* there is a single answer to what is currently held, and drawing the keys is
-* left entirely to the wrapper.
+* 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.
 *
-* Tracks every pointer at once, so a chord can be played with several fingers.
+* 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 createPianoInput(element, options) {
+function createStepperDrag(element, options) {
 	let opts = options;
-	/** Which sources are holding each sounding note. */
-	const held = /* @__PURE__ */ new Map();
-	/** The note each pointer is currently on. */
-	const pointerNotes = /* @__PURE__ */ new Map();
-	function activeNotes() {
-		return [...held.keys()].sort((a, b) => a - b);
-	}
-	function noteOn(note, { source = DEFAULT_SOURCE, velocity } = {}) {
-		if (!Number.isInteger(note) || note < 0 || note > 127) throw new RangeError("note: requirements: an integer from 0 to 127");
-		if (note > (opts.midiMax ?? 127)) return;
-		const sources = held.get(note);
-		if (sources) {
-			sources.add(source);
-			return;
-		}
-		held.set(note, /* @__PURE__ */ new Set([source]));
-		opts.onPlayNote?.(note, velocity);
-		opts.onActiveNotesChange?.(activeNotes());
-	}
-	function noteOff(note, { source = DEFAULT_SOURCE } = {}) {
-		if (!Number.isInteger(note) || note < 0 || note > 127) throw new RangeError("note: requirements: an integer from 0 to 127");
-		const sources = held.get(note);
-		if (!sources) return;
-		sources.delete(source);
-		if (sources.size > 0) return;
-		held.delete(note);
-		opts.onStopNote?.(note);
-		opts.onActiveNotesChange?.(activeNotes());
-	}
-	/** The note under a pointer, or null where the pointer is off the keys. */
-	function noteUnder(clientX, clientY) {
-		const { left, top, height } = element.getBoundingClientRect();
-		return noteAt(clientX - left, clientY - top, height, opts.layout);
-	}
-	/** Move a pointer onto a note, releasing whatever it held before. */
-	function movePointer(pointerId, note) {
-		const source = `pointer:${pointerId}`;
-		const previous = pointerNotes.get(pointerId);
-		if (previous === note) return;
-		if (previous !== void 0) noteOff(previous, { source });
-		if (note === null || note > (opts.midiMax ?? 127)) pointerNotes.delete(pointerId);
-		else {
-			pointerNotes.set(pointerId, note);
-			noteOn(note, { source });
-		}
-	}
+	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, {
-		multiPointer: true,
-		onDragStart: (state) => movePointer(state.pointerId, noteUnder(state.clientX, state.clientY)),
+		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) => {
-			if (opts.glissando === false) return;
-			movePointer(state.pointerId, noteUnder(state.clientX, state.clientY));
+			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: (state) => movePointer(state.pointerId, null)
+		onDragEnd: () => {
+			moved = false;
+		}
 	});
 	return {
 		update: (next) => {
@@ -759,34 +1268,824 @@ function createPianoInput(element, options) {
 				...opts,
 				...next
 			};
-			const midiMax = opts.midiMax ?? 127;
-			const stoppedNotes = activeNotes().filter((note) => note > midiMax);
-			if (stoppedNotes.length === 0) return;
-			for (const note of stoppedNotes) {
-				held.delete(note);
-				opts.onStopNote?.(note);
-			}
-			for (const [pointerId, note] of pointerNotes) if (note > midiMax) pointerNotes.delete(pointerId);
-			opts.onActiveNotesChange?.(activeNotes());
+			if ("pointerLock" in next) drag.update({ pointerLock: opts.pointerLock });
 		},
-		noteOn,
-		noteOff,
-		activeNotes,
-		destroy: () => {
-			drag.destroy();
-			const notes = activeNotes();
-			for (const note of notes) {
-				held.delete(note);
-				opts.onStopNote?.(note);
-			}
-			pointerNotes.clear();
-			if (notes.length > 0) opts.onActiveNotesChange?.([]);
-		}
+		moved: () => moved,
+		destroy: () => drag.destroy()
 	};
 }
 //#endregion
-//#region src/xy.ts
-function isPair(value) {
+//#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.
+*/
+const SHORTCUTS = {
+	/** Every semitone from C, over the two rows of a QWERTY keyboard. */
+	HOME_ROW: { keys: [
+		"a",
+		"w",
+		"s",
+		"e",
+		"d",
+		"f",
+		"t",
+		"g",
+		"y",
+		"h",
+		"u",
+		"j",
+		"k",
+		"o",
+		"l",
+		"p",
+		";"
+	] },
+	/** The white keys only, on the home row. Black keys have no shortcut. */
+	HOME_ROW_NATURAL: { keys: [
+		"a",
+		"",
+		"s",
+		"",
+		"d",
+		"f",
+		"",
+		"g",
+		"",
+		"h",
+		"",
+		"j",
+		"k",
+		"",
+		"l",
+		"",
+		";"
+	] }
+};
+/**
+* Whether a key press was typed into something: shortcuts must not play a
+* note for a letter that is going into a text field.
+*/
+function isEditableTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.matches("input, textarea, select")) return true;
+	for (let element = target; element;) {
+		const contentEditable = element.getAttribute("contenteditable");
+		if (contentEditable !== null) return contentEditable.toLowerCase() !== "false";
+		element = element.parentElement;
+	}
+	return false;
+}
+//#endregion
+//#region src/piano/index.ts
+const DEFAULT_SOURCE = "api";
+/**
+* Drive a piano keyboard with pointers, and own what is sounding.
+*
+* Every way of playing a note goes through the one instance — pointers here,
+* keyboard shortcuts and MIDI through {@link PianoInputInstance.noteOn} — so
+* there is a single answer to what is currently held, and drawing the keys is
+* left entirely to the wrapper.
+*
+* Tracks every pointer at once, so a chord can be played with several fingers.
+*/
+function createPianoInput(element, options) {
+	let opts = options;
+	/** Which sources are holding each sounding note. */
+	const held = /* @__PURE__ */ new Map();
+	/** The note each pointer is currently on. */
+	const pointerNotes = /* @__PURE__ */ new Map();
+	/**
+	* The note each held shortcut key is playing, by `code` — the physical key,
+	* so that releasing it with a different modifier or layout still matches.
+	*/
+	const shortcutNotes = /* @__PURE__ */ new Map();
+	function activeNotes() {
+		return [...held.keys()].sort((a, b) => a - b);
+	}
+	function noteOn(note, { source = DEFAULT_SOURCE, velocity } = {}) {
+		if (!Number.isInteger(note) || note < 0 || note > 127) throw new RangeError("note: requirements: an integer from 0 to 127");
+		if (note > (opts.midiMax ?? 127)) return;
+		const sources = held.get(note);
+		if (sources) {
+			sources.add(source);
+			return;
+		}
+		held.set(note, /* @__PURE__ */ new Set([source]));
+		opts.onPlayNote?.(note, velocity);
+		opts.onActiveNotesChange?.(activeNotes());
+	}
+	function noteOff(note, { source = DEFAULT_SOURCE } = {}) {
+		if (!Number.isInteger(note) || note < 0 || note > 127) throw new RangeError("note: requirements: an integer from 0 to 127");
+		const sources = held.get(note);
+		if (!sources) return;
+		sources.delete(source);
+		if (sources.size > 0) return;
+		held.delete(note);
+		opts.onStopNote?.(note);
+		opts.onActiveNotesChange?.(activeNotes());
+	}
+	/** The note under a pointer, or null where the pointer is off the keys. */
+	function noteUnder(clientX, clientY) {
+		const { left, top, height } = element.getBoundingClientRect();
+		return noteAt(clientX - left, clientY - top, height, opts.layout);
+	}
+	/** Move a pointer onto a note, releasing whatever it held before. */
+	function movePointer(pointerId, note) {
+		const source = `pointer:${pointerId}`;
+		const previous = pointerNotes.get(pointerId);
+		if (previous === note) return;
+		if (previous !== void 0) noteOff(previous, { source });
+		if (note === null || note > (opts.midiMax ?? 127)) pointerNotes.delete(pointerId);
+		else {
+			pointerNotes.set(pointerId, note);
+			noteOn(note, { source });
+		}
+	}
+	/** The note a shortcut key plays, or null when it has none. */
+	function shortcutNote(key) {
+		const keys = opts.keyboardShortcuts?.keys;
+		if (!keys || key === "") return null;
+		const { first, last } = opts.layout.noteRange;
+		const index = keys.indexOf(key);
+		const note = first + index;
+		return index === -1 || note > last ? null : note;
+	}
+	function onKeyDown(event) {
+		const id = event.code || event.key;
+		if (event.repeat || shortcutNotes.has(id)) return;
+		if (isEditableTarget(event.target)) return;
+		const note = shortcutNote(event.key);
+		if (note === null) return;
+		shortcutNotes.set(id, note);
+		noteOn(note, { source: `keyboard:${id}` });
+	}
+	function onKeyUp(event) {
+		const id = event.code || event.key;
+		const note = shortcutNotes.get(id);
+		if (note === void 0) return;
+		shortcutNotes.delete(id);
+		noteOff(note, { source: `keyboard:${id}` });
+	}
+	function releaseShortcuts() {
+		for (const [id, note] of shortcutNotes) noteOff(note, { source: `keyboard:${id}` });
+		shortcutNotes.clear();
+	}
+	function onFocusOut(event) {
+		const next = event.relatedTarget;
+		if (next instanceof Node && element.contains(next)) return;
+		releaseShortcuts();
+	}
+	/** The scope the listeners are bound for, or null when none are. */
+	let boundScope = null;
+	function bindShortcuts() {
+		const scope = opts.keyboardShortcuts ? opts.keyboardShortcutsScope ?? "root" : null;
+		if (scope === boundScope) return;
+		unbindShortcuts();
+		const win = globalThis.window;
+		if (!scope || !win) return;
+		const target = scope === "window" ? win : element;
+		target.addEventListener("keydown", onKeyDown);
+		target.addEventListener("keyup", onKeyUp);
+		if (scope === "root") element.addEventListener("focusout", onFocusOut);
+		win.addEventListener("blur", releaseShortcuts);
+		boundScope = scope;
+	}
+	function unbindShortcuts() {
+		const win = globalThis.window;
+		if (!boundScope || !win) return;
+		const target = boundScope === "window" ? win : element;
+		target.removeEventListener("keydown", onKeyDown);
+		target.removeEventListener("keyup", onKeyUp);
+		element.removeEventListener("focusout", onFocusOut);
+		win.removeEventListener("blur", releaseShortcuts);
+		boundScope = null;
+	}
+	/**
+	* What the held keys were started against. Compared by value: a caller
+	* who writes the keys inline hands over a new array on every update, and
+	* releasing on that would stop a note as soon as anything re-renders.
+	*/
+	function shortcutMapping() {
+		const { first, last } = opts.layout.noteRange;
+		return [
+			opts.keyboardShortcuts?.keys.join("\0") ?? "",
+			opts.keyboardShortcutsScope ?? "root",
+			first,
+			last
+		].join("
");
+	}
+	bindShortcuts();
+	const drag = createDrag(element, {
+		multiPointer: true,
+		onDragStart: (state) => movePointer(state.pointerId, noteUnder(state.clientX, state.clientY)),
+		onDrag: (state) => {
+			if (opts.glissando === false) return;
+			movePointer(state.pointerId, noteUnder(state.clientX, state.clientY));
+		},
+		onDragEnd: (state) => movePointer(state.pointerId, null)
+	});
+	return {
+		update: (next) => {
+			const mapping = shortcutMapping();
+			opts = {
+				...opts,
+				...next
+			};
+			if (shortcutMapping() !== mapping) releaseShortcuts();
+			bindShortcuts();
+			const midiMax = opts.midiMax ?? 127;
+			const stoppedNotes = activeNotes().filter((note) => note > midiMax);
+			if (stoppedNotes.length === 0) return;
+			for (const note of stoppedNotes) {
+				held.delete(note);
+				opts.onStopNote?.(note);
+			}
+			for (const [pointerId, note] of pointerNotes) if (note > midiMax) pointerNotes.delete(pointerId);
+			opts.onActiveNotesChange?.(activeNotes());
+		},
+		noteOn,
+		noteOff,
+		activeNotes,
+		destroy: () => {
+			drag.destroy();
+			unbindShortcuts();
+			shortcutNotes.clear();
+			const notes = activeNotes();
+			for (const note of notes) {
+				held.delete(note);
+				opts.onStopNote?.(note);
+			}
+			pointerNotes.clear();
+			if (notes.length > 0) opts.onActiveNotesChange?.([]);
+		}
+	};
+}
+//#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);
 }
 /**
@@ -963,6 +2262,73 @@ function createDragValue(element, options) {
 	};
 }
 //#endregion
+//#region src/pointer/long-press.ts
+/**
+* Repeat an action while a pointer is held down: once on the press, then
+* again every `interval` after `delay` — the way a stepper button or a
+* key held on a keyboard behaves.
+*
+* The release is listened for on the window, not on the element: the
+* pointer may be let go anywhere. Only the pointer that started the press
+* ends it, so a second finger lifting elsewhere does not. The window losing
+* focus ends it too, since the release would never arrive.
+*/
+function createLongPress(options) {
+	let opts = options;
+	let pointerId = null;
+	let active = false;
+	let timer = null;
+	function clearTimer() {
+		if (timer !== null) clearTimeout(timer);
+		timer = null;
+	}
+	/** Wait `wait`, fire, and keep going at `interval` from then on. */
+	function schedule(wait) {
+		timer = setTimeout(() => {
+			opts.onPress();
+			if (active) schedule(opts.interval ?? 40);
+		}, wait);
+	}
+	function onPointerEnd(event) {
+		if (pointerId !== null && event.pointerId !== pointerId) return;
+		stop();
+	}
+	function listen(add) {
+		const target = globalThis.window;
+		if (!target) return;
+		const method = add ? "addEventListener" : "removeEventListener";
+		target[method]("pointerup", onPointerEnd);
+		target[method]("pointercancel", onPointerEnd);
+		target[method]("blur", stop);
+	}
+	function stop() {
+		if (!active) return;
+		active = false;
+		pointerId = null;
+		clearTimer();
+		listen(false);
+	}
+	return {
+		start: (event) => {
+			if (active || event && event.button !== 0) return;
+			active = true;
+			pointerId = event?.pointerId ?? null;
+			listen(true);
+			opts.onPress();
+			if (active) schedule(opts.delay ?? 500);
+		},
+		stop,
+		update: (next) => {
+			opts = {
+				...opts,
+				...next
+			};
+		},
+		pressed: () => active,
+		destroy: stop
+	};
+}
+//#endregion
 //#region src/pointer/wheel.ts
 /**
 * Listen to wheel events on an element.
@@ -997,73 +2363,105 @@ function createWheel(element, onWheel, 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])
-	};
+//#region src/position.ts
+/**
+* Where a value sits along a track, as a whole percentage from its start.
+*
+* Normalized along the scale, so a thumb, the fill behind it and the marks
+* all sit on the curve the drag follows. `reversed` measures from the other
+* end — for a track that grows upwards or leftwards on screen, since CSS
+* places things from the top and the left.
+*/
+function valuePercent(value, { min, max, scale = linearScale }, reversed = false) {
+	const normalized = scale.normalize(value, min, max);
+	return toFixed((reversed ? 1 - normalized : normalized) * 100);
 }
-/** 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;
+//#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
 /**
-* Selecting by dragging a box over a set of items.
+* The marks `options` asks for between `min` and `max`, in ascending order.
 *
-* 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.
+* 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 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]);
+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 {
-		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;
-		}
-	};
+	return optionsList;
 }
 //#endregion
-export { NOT_SUPPORTED, PERMISSION_DENIED, PITCH_BEND_CENTER, UNAVAILABLE, createAnimationCanvas, createDrag, createDragValue, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createSelectionBox, createWheel, drawingState, elementMapping, isDrawingState, relativeMapping, selectionBoxCovers, toXY };
+//#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 };
 
 //# sourceMappingURL=index.js.map