@tremolo-ui/dom 0.7.0 → 0.9.0

package/dist/xy-5Oc6JeJr.cjs

@@ -0,0 +1,952 @@
+let _tremolo_ui_functions = require("@tremolo-ui/functions");
+//#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/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/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 = (0, _tremolo_ui_functions.noteKey)(note);
+	const first = (0, _tremolo_ui_functions.noteKey)(layout.noteRange.first);
+	const octave = Math.floor((note - layout.noteRange.first) / 12);
+	const octaveOffset = _tremolo_ui_functions.noteKeys.indexOf(first) > _tremolo_ui_functions.noteKeys.indexOf(target) ? 1 : 0;
+	const whiteKeysIn = whiteKeysBefore[target] - whiteKeysBefore[first] + (octave + octaveOffset) * 7;
+	return (0, _tremolo_ui_functions.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 = (0, _tremolo_ui_functions.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 ((0, _tremolo_ui_functions.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 ((0, _tremolo_ui_functions.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/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/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 = _tremolo_ui_functions.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 ? (0, _tremolo_ui_functions.stepValue)(next, quantum) : next;
+	return (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.toPrecision)(stepped), min, max);
+}
+//#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: (0, _tremolo_ui_functions.clamp)(point.x, min?.x ?? 0, max?.x ?? 1),
+		y: (0, _tremolo_ui_functions.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 : (0, _tremolo_ui_functions.clamp)(delta.x, loX, hiX),
+		y: hiY < loY ? 0 : (0, _tremolo_ui_functions.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: (0, _tremolo_ui_functions.toPrecision)(start.x + allowed.x),
+				y: (0, _tremolo_ui_functions.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, beforeWheel } = read();
+				const active = element?.ownerDocument.activeElement;
+				if (!active || !element?.contains(active)) continue;
+				if (!wheel || readonly || !onChange) return false;
+				beforeWheel?.();
+				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
+Object.defineProperty(exports, "DEFAULT_DRAG_SENSITIVITY", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_DRAG_SENSITIVITY;
+	}
+});
+Object.defineProperty(exports, "DEFAULT_KEYBOARD_OPTIONS", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_KEYBOARD_OPTIONS;
+	}
+});
+Object.defineProperty(exports, "DEFAULT_WHEEL_OPTIONS", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_WHEEL_OPTIONS;
+	}
+});
+Object.defineProperty(exports, "POINTS_EDITOR_DEFAULT_KEYBOARD", {
+	enumerable: true,
+	get: function() {
+		return POINTS_EDITOR_DEFAULT_KEYBOARD;
+	}
+});
+Object.defineProperty(exports, "POINTS_EDITOR_DEFAULT_WHEEL", {
+	enumerable: true,
+	get: function() {
+		return POINTS_EDITOR_DEFAULT_WHEEL;
+	}
+});
+Object.defineProperty(exports, "POINT_AXIS", {
+	enumerable: true,
+	get: function() {
+		return POINT_AXIS;
+	}
+});
+Object.defineProperty(exports, "applyDelta", {
+	enumerable: true,
+	get: function() {
+		return applyDelta;
+	}
+});
+Object.defineProperty(exports, "blackKeyWidth", {
+	enumerable: true,
+	get: function() {
+		return blackKeyWidth;
+	}
+});
+Object.defineProperty(exports, "clampPoint", {
+	enumerable: true,
+	get: function() {
+		return clampPoint;
+	}
+});
+Object.defineProperty(exports, "createDrag", {
+	enumerable: true,
+	get: function() {
+		return createDrag;
+	}
+});
+Object.defineProperty(exports, "createPointsEditor", {
+	enumerable: true,
+	get: function() {
+		return createPointsEditor;
+	}
+});
+Object.defineProperty(exports, "fitWhiteKeyWidth", {
+	enumerable: true,
+	get: function() {
+		return fitWhiteKeyWidth;
+	}
+});
+Object.defineProperty(exports, "getNoteRangeArray", {
+	enumerable: true,
+	get: function() {
+		return getNoteRangeArray;
+	}
+});
+Object.defineProperty(exports, "mapModifier", {
+	enumerable: true,
+	get: function() {
+		return mapModifier;
+	}
+});
+Object.defineProperty(exports, "matchesAccept", {
+	enumerable: true,
+	get: function() {
+		return matchesAccept;
+	}
+});
+Object.defineProperty(exports, "noteAt", {
+	enumerable: true,
+	get: function() {
+		return noteAt;
+	}
+});
+Object.defineProperty(exports, "notePosition", {
+	enumerable: true,
+	get: function() {
+		return notePosition;
+	}
+});
+Object.defineProperty(exports, "partitionByAccept", {
+	enumerable: true,
+	get: function() {
+		return partitionByAccept;
+	}
+});
+Object.defineProperty(exports, "pianoWidth", {
+	enumerable: true,
+	get: function() {
+		return pianoWidth;
+	}
+});
+Object.defineProperty(exports, "selectModifier", {
+	enumerable: true,
+	get: function() {
+		return selectModifier;
+	}
+});
+Object.defineProperty(exports, "toXY", {
+	enumerable: true,
+	get: function() {
+		return toXY;
+	}
+});
+
+//# sourceMappingURL=xy-5Oc6JeJr.cjs.map