@tremolo-ui/react 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -92,114 +92,192 @@ const AnimationCanvas = /* @__PURE__ */ (0, react.forwardRef)(function Animation
 	});
 });
 //#endregion
-//#region src/hooks/_internal/useCheckSteps.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
-	}
-};
-/** Each entry of a modifier-aware input option, as a name and held keys. */
-function entries(options) {
-	if (Array.isArray(options)) return [{
-		name: "",
-		modifiers: NONE
-	}];
-	return Object.keys(options).map((key) => ({
-		name: key === "default" ? "" : key,
-		modifiers: MODIFIER_STATE[key] ?? NONE
-	}));
+//#region src/hooks/_internal/useCallbackRef.ts
+/**
+* Internal
+* @private
+*/
+function useCallbackRef(callback, deps = []) {
+	const callbackRef = (0, react.useRef)(() => {
+		throw new Error("Cannot call an event handler while rendering.");
+	});
+	(0, react.useInsertionEffect)(() => {
+		callbackRef.current = callback;
+	});
+	return (0, react.useCallback)((...args) => callbackRef.current?.(...args), deps);
 }
+//#endregion
+//#region src/hooks/useDropZone.ts
 /**
-* Press every entry of `options` at nine points along the travel and report
-* whether anything came of it.
+* Take files dropped onto an element.
+*
+* Any element can become a drop target this way — a waveform display, a track
+* lane, a canvas — without wrapping it in anything.
 *
-* 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.
+* @returns a ref callback for the element, and whether a drag is over it
 */
-function probe(options, range, format) {
-	const { min, max, scale = _tremolo_ui_functions.linearScale } = range;
-	const outcome = {
-		moved: false,
-		visible: false
+function useDropZone({ accept, multiple, disabled, onDrop, onReject } = {}) {
+	const dropHandler = useCallbackRef(onDrop);
+	const rejectHandler = useCallbackRef(onReject);
+	const [state, setState] = (0, react.useState)({
+		over: false,
+		invalid: false
+	});
+	const [node, setNode] = (0, react.useState)(null);
+	const instanceRef = (0, react.useRef)(null);
+	const latest = (0, react.useRef)({
+		accept,
+		multiple,
+		disabled
+	});
+	(0, react.useEffect)(() => {
+		if (!node) return;
+		const instance = (0, _tremolo_ui_dom.createDropZone)(node, {
+			...latest.current,
+			onDrop: (files, event) => dropHandler(files, event),
+			onReject: (files, event) => rejectHandler(files, event),
+			onStateChange: (next) => setState(next)
+		});
+		instanceRef.current = instance;
+		return () => {
+			instanceRef.current = null;
+			instance.destroy();
+			setState({
+				over: false,
+				invalid: false
+			});
+		};
+	}, [
+		node,
+		dropHandler,
+		rejectHandler
+	]);
+	(0, react.useEffect)(() => {
+		latest.current = {
+			accept,
+			multiple,
+			disabled
+		};
+		instanceRef.current?.update({
+			accept,
+			multiple,
+			disabled
+		});
+	});
+	return {
+		refCallback: setNode,
+		over: state.over,
+		invalid: state.invalid
 	};
-	for (const { modifiers } of entries(options)) for (const position of PROBES) {
-		const value = scale.denormalize(position, min, max);
-		const up = (0, _tremolo_ui_functions.applyDelta)(value, 1, options, range, modifiers);
-		const down = (0, _tremolo_ui_functions.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;
 }
 /**
-* Warn, in development only, when a key press or a wheel notch cannot produce
-* a change the user can see.
-*
-* 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
+* An area that takes files dropped onto it.
+*/
+const DropZone = { Root: /* @__PURE__ */ (0, react.forwardRef)(({ accept, multiple = false, disabled = false, onDrop, onReject, children, ...props }, ref) => {
+	const { refCallback, over, invalid } = useDropZone({
+		accept,
+		multiple,
+		disabled,
+		onDrop,
+		onReject
+	});
+	const composedRef = require_compose_refs.useComposedRefs(ref, refCallback);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: composedRef,
+		"data-dragover": over ? "" : void 0,
+		"data-invalid": invalid ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		...props,
+		children
+	});
+}) };
+//#endregion
+//#region src/components/FileInput/context.tsx
+const FileInputContext = /* @__PURE__ */ (0, react.createContext)(null);
+const FileInputProvider = FileInputContext.Provider;
+function useFileInputContext(selector) {
+	const context = (0, react.useContext)(FileInputContext);
+	if (!context) throw new Error("Missing FileInputContext.Provider in the tree");
+	return selector ? selector(context) : context;
+}
+//#endregion
+//#region src/components/FileInput/Trigger.tsx
+/**
+* Opens the file picker, and names the input for a screen reader.
 *
-* 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.
+* A `<label>` rather than a `<button>`: the browser forwards the click to the
+* input on its own, the input stays the one thing in the tab order, and its
+* accessible name comes from this text without an `aria-label` to keep in
+* step. A disabled input ignores the click, so nothing has to be intercepted.
+*/
+const Trigger = /* @__PURE__ */ (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const { inputId, disabled } = useFileInputContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+		ref,
+		htmlFor: inputId,
+		"data-disabled": disabled ? "" : void 0,
+		...props,
+		children
+	});
+});
+/**
+* Picks files, and hands them over as `File`s.
+*/
+const FileInput = {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ accept, multiple = false, disabled = false, onChange, onReject, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }, ref) => {
+		const inputId = (0, react.useId)();
+		const context = (0, react.useMemo)(() => ({
+			inputId,
+			disabled
+		}), [inputId, disabled]);
+		function handleChange(event) {
+			const { accepted, rejected } = (0, _tremolo_ui_dom.partitionByAccept)(Array.from(event.target.files ?? []), accept);
+			event.target.value = "";
+			if (accepted.length > 0) onChange?.(accepted);
+			if (rejected.length > 0) onReject?.(rejected);
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileInputProvider, {
+			value: context,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref,
+				"data-disabled": disabled ? "" : void 0,
+				...props,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					id: inputId,
+					type: "file",
+					accept,
+					multiple,
+					disabled,
+					style: _tremolo_ui_dom.visuallyHiddenStyle,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledby,
+					"aria-describedby": ariaDescribedby,
+					onChange: handleChange
+				}), children]
+			})
+		});
+	}),
+	Trigger
+};
+//#endregion
+//#region src/hooks/_internal/useCheckSteps.ts
+/**
+* Warn, in development only, when a key press or a wheel notch cannot produce
+* a change the user can see. The probing is `checkSteps` in the core.
 *
 * @internal
 */
-function useCheckSteps({ component, axis, range, keyboard, wheel, format }) {
+function useCheckSteps(options) {
+	const { component, axis, range, keyboard, wheel } = options;
 	const { min, max, step, scale } = range ?? {};
-	const where = axis ? `${component} (${axis})` : component;
 	(0, react.useEffect)(() => {
 		try {
 			if (process.env.NODE_ENV === "production") return;
-			if (!range || min === void 0 || max === void 0 || !(min < max)) return;
-			for (const [name, options] of [["keyboard", keyboard], ["wheel", wheel]]) {
-				if (!options) continue;
-				const { moved, visible } = probe(options, range, format);
-				if (!moved) console.warn(`[tremolo-ui] ${where}: \`${name}\` cannot move the value.` + (step !== void 0 ? ` Each press is smaller than \`step\` (${step}), so it rounds` : " Each press rounds") + " straight back to where it started.");
-				else if (format && !visible) console.warn(`[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.`);
-			}
+			for (const warning of (0, _tremolo_ui_dom.checkSteps)(options)) console.warn(warning);
 		} catch {}
 	}, [
-		where,
+		component,
+		axis,
 		min,
 		max,
 		step,
@@ -209,21 +287,6 @@ function useCheckSteps({ component, axis, range, keyboard, wheel, format }) {
 	]);
 }
 //#endregion
-//#region src/hooks/_internal/useCallbackRef.ts
-/**
-* Internal
-* @private
-*/
-function useCallbackRef(callback, deps = []) {
-	const callbackRef = (0, react.useRef)(() => {
-		throw new Error("Cannot call an event handler while rendering.");
-	});
-	(0, react.useInsertionEffect)(() => {
-		callbackRef.current = callback;
-	});
-	return (0, react.useCallback)((...args) => callbackRef.current?.(...args), deps);
-}
-//#endregion
 //#region src/hooks/useDragValue.ts
 /**
 * Drive a value with a pointer drag.
@@ -322,49 +385,6 @@ function useWheel(onWheel, { requireFocus = false, target } = {}) {
 	return setNode;
 }
 //#endregion
-//#region src/input-event.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
-* `useCheckSteps` warns about.
-*
-* A modifier entry is not snapped to `step`, which is what lets the finer
-* amount move at all — see `applyDelta` in `@tremolo-ui/functions`.
-*/
-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/components/_util/css-length.ts
-/**
-* A number as a CSS length, for a custom property.
-*
-* React appends `px` to a bare number for the properties it knows take a
-* length, and a custom property is never one of them: `--size: 50` would come
-* out as the invalid `50`. Anything already a string is passed through, so
-* `'3rem'` and `'100%'` still work.
-*/
-function cssLength(value) {
-	return typeof value === "number" ? `${value}px` : value;
-}
-//#endregion
 //#region src/components/_util/Placement.tsx
 /**
 * The subcomponent that established the current placement, if any.
@@ -406,49 +426,8 @@ function useCheckPlacement(child, parent) {
 		parent
 	]);
 }
-/**
-* 角度から円弧上の点を求める。
-*
-* 半径は線の太さの分だけ内側に取る必要があるが、太さは ActiveLine / InactiveLine が
-* それぞれ持つため、座標はストアで先に計算せず各コンポーネント側で求める。
-*/
-function pointOnArc(angle, radius) {
-	return {
-		x: 50 + radius * Math.cos((0, _tremolo_ui_functions.radian)(angle - 90)),
-		y: 50 + radius * Math.sin((0, _tremolo_ui_functions.radian)(angle - 90))
-	};
-}
-/** 線の太さが viewBox からはみ出さないようにした半径 */
-function arcRadius(strokeWidth) {
-	const width = typeof strokeWidth === "number" ? strokeWidth : Number.parseFloat(String(strokeWidth));
-	return Number.isFinite(width) ? 50 - width / 2 : 50;
-}
-/** Build an SVG path for an arc, splitting full turns into drawable segments. */
-function arcPath(startAngle, endAngle, radius) {
-	const start = pointOnArc(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 = pointOnArc(startAngle + segmentSweep * i, radius);
-		path += ` A ${radius} ${radius} 0 0 ${segmentSweep >= 0 ? 1 : 0} ${end.x} ${end.y}`;
-	}
-	return path;
-}
-/** 設定から描画に必要な角度を導出する。レンダー中に呼ぶ。 */
-function calcAngles({ 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
-	};
-}
+//#endregion
+//#region src/components/Knob/context.tsx
 const KnobContext = /* @__PURE__ */ (0, react.createContext)(null);
 const KnobProvider = KnobContext.Provider;
 function useKnobContext(selector) {
@@ -462,10 +441,10 @@ function ActiveLine({ stroke = "currentColor", strokeWidth = 6, className, ...pr
 	useCheckPlacement("Knob.ActiveLine", "Knob.SVGRoot");
 	const r2 = useKnobContext((s) => s.r2);
 	const r3 = useKnobContext((s) => s.r3);
-	const radius = arcRadius(strokeWidth);
+	const radius = (0, _tremolo_ui_dom.knobArcRadius)(strokeWidth);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 		className,
-		d: arcPath(r2, r3, radius),
+		d: (0, _tremolo_ui_dom.knobArcPath)(r2, r3, radius),
 		fill: "none",
 		stroke,
 		strokeWidth,
@@ -483,17 +462,17 @@ function InactiveLine({ stroke = "currentColor", strokeWidth = 6, className, ...
 	const r2 = useKnobContext((s) => s.r2);
 	const r3 = useKnobContext((s) => s.r3);
 	const r4 = useKnobContext((s) => s.r4);
-	const radius = arcRadius(strokeWidth);
+	const radius = (0, _tremolo_ui_dom.knobArcRadius)(strokeWidth);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [startValue > min && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 		className,
-		d: arcPath(r1, r2, radius),
+		d: (0, _tremolo_ui_dom.knobArcPath)(r1, r2, radius),
 		fill: "none",
 		stroke,
 		strokeWidth,
 		...props
 	}), startValue < max && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 		className,
-		d: arcPath(r3, r4, radius),
+		d: (0, _tremolo_ui_dom.knobArcPath)(r3, r4, radius),
 		fill: "none",
 		stroke,
 		strokeWidth,
@@ -504,7 +483,7 @@ function InactiveLine({ stroke = "currentColor", strokeWidth = 6, className, ...
 //#region src/components/Knob/SVGRoot.tsx
 function SVGRoot({ children, style, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		viewBox: `0 0 100 100`,
+		viewBox: `0 0 ${_tremolo_ui_dom.KNOB_VIEWBOX_SIZE} ${_tremolo_ui_dom.KNOB_VIEWBOX_SIZE}`,
 		style: {
 			display: "block",
 			...style
@@ -534,7 +513,7 @@ function Thumb$2({ className, thumb = "currentColor", thumbLine = "currentColor"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
 			className: classes?.thumbLine,
 			x1: "50%",
-			y1: `${(100 - (0, _tremolo_ui_functions.clamp)(thumbSize, 0, 100)) / 2}%`,
+			y1: `${(_tremolo_ui_dom.KNOB_VIEWBOX_SIZE - (0, _tremolo_ui_functions.clamp)(thumbSize, 0, 100)) / 2}%`,
 			x2: "50%",
 			y2: `${thumbLineLength}%`,
 			stroke: thumbLine,
@@ -558,7 +537,7 @@ const WHEEL_OPTIONS$2 = { requireFocus: true };
 * Interactive rotary knob component implemented in SVG.
 */
 const Knob = {
-	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, defaultValue = min, startValue = min, size, externalStyles: _externalStyles, wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, pointerLock = false, enableDoubleClickDefault = true, disabled = false, readonly = false, angleRange = 270, onChange, onKeyDown, onPointerDown, onDoubleClick, className, style, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, defaultValue = min, startValue = min, size, externalStyles: _externalStyles, wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, pointerLock = false, enableDoubleClickDefault = true, disabled = false, readonly = false, angleRange = 270, onChange, onKeyDown, onPointerDown, onDoubleClick, className, style, children, ...props }, forwardedRef) => {
 		const elmRef = (0, react.useRef)(null);
 		const externalStyles = {
 			...defaultExternalStyles$2,
@@ -584,16 +563,10 @@ const Knob = {
 		});
 		const handleKeyDown = (0, react.useCallback)((event) => {
 			if (!keyboard || !onChange || inactive) return;
-			const key = event.key;
-			if ([
-				"ArrowRight",
-				"ArrowLeft",
-				"ArrowUp",
-				"ArrowDown"
-			].includes(key)) {
-				event.preventDefault();
-				onChange((0, _tremolo_ui_functions.applyDelta)(value, key === "ArrowRight" || key === "ArrowUp" ? 1 : -1, keyboard, range, event));
-			}
+			const direction = (0, _tremolo_ui_dom.arrowKeyDirection)(event.key);
+			if (direction === null) return;
+			event.preventDefault();
+			onChange((0, _tremolo_ui_dom.applyDelta)(value, direction, keyboard, range, event));
 		}, [
 			keyboard,
 			onChange,
@@ -607,7 +580,7 @@ const Knob = {
 				reverse: true
 			}], [range]),
 			getValue: () => [value, value],
-			sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
+			sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
 			threshold: 1,
 			cursor: inactive ? void 0 : externalStyles.cursor,
 			pointerLock: inactive ? false : pointerLock,
@@ -619,9 +592,11 @@ const Knob = {
 		});
 		const wheelRefCallback = useWheel((event) => {
 			if (!wheel || inactive) return;
+			const direction = (0, _tremolo_ui_dom.wheelDirection)(event);
+			if (direction === null) return;
 			event.preventDefault();
-			if (!onChange || event.deltaY === 0) return;
-			onChange((0, _tremolo_ui_functions.applyDelta)(value, -Math.sign(event.deltaY), wheel, range, event));
+			if (!onChange) return;
+			onChange((0, _tremolo_ui_dom.applyDelta)(value, direction, wheel, range, event));
 		}, WHEEL_OPTIONS$2);
 		const rootRefCallback = require_compose_refs.useComposedRefs(elmRef, dragRefCallback, wheelRefCallback);
 		const context = (0, react.useMemo)(() => {
@@ -636,7 +611,7 @@ const Knob = {
 			};
 			return {
 				...config,
-				...calcAngles(config)
+				...(0, _tremolo_ui_dom.knobAngles)(config)
 			};
 		}, [
 			value,
@@ -673,7 +648,7 @@ const Knob = {
 				"data-readonly": readonly ? "" : void 0,
 				"data-dragging": dragging ? "" : void 0,
 				style: {
-					"--knob-size": cssLength(size),
+					"--knob-size": (0, _tremolo_ui_dom.cssLength)(size),
 					...style
 				},
 				onPointerDown,
@@ -710,82 +685,36 @@ function useStepperContext() {
 	return (0, react.useContext)(StepperContext);
 }
 //#endregion
-//#region src/hooks/useEventListener.ts
-function useEventListener(target, event, handler, options) {
-	const listener = useCallbackRef(handler);
-	const cleanupRef = (0, react.useRef)(() => {});
-	(0, react.useEffect)(() => {
-		const node = typeof target === "function" ? target() : target ?? document;
-		if (!node) return;
-		node.addEventListener(event, listener, options);
-		const cleanup = () => {
-			node.removeEventListener(event, listener, options);
-		};
-		cleanupRef.current = cleanup;
-		return () => {
-			cleanup();
-			if (cleanupRef.current === cleanup) cleanupRef.current = () => {};
-		};
-	}, [
-		event,
-		target,
-		options,
-		listener
-	]);
-	return (0, react.useCallback)(() => cleanupRef.current(), []);
-}
-//#endregion
-//#region src/hooks/useInterval.ts
-function useInterval(callback, delay) {
-	const savedCallback = (0, react.useRef)(callback);
+//#region src/hooks/useLongPress.ts
+/**
+* Repeat `callback` while a pointer is held down: once on the press, then
+* every `interval` after `initialDelay`. The repeat itself is
+* `createLongPress` in `@tremolo-ui/dom`.
+*
+* Returns the function that starts a press, for an `onPointerDown`.
+*/
+function useLongPress(callback, initialDelay = 500, interval = 40) {
+	const onPress = useCallbackRef(callback);
+	const instanceRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
-		savedCallback.current = callback;
-	}, [callback]);
+		instanceRef.current?.update({
+			delay: initialDelay,
+			interval
+		});
+	});
 	(0, react.useEffect)(() => {
-		if (delay === null) return;
-		const id = setInterval(() => {
-			savedCallback.current();
-		}, delay);
+		const instance = (0, _tremolo_ui_dom.createLongPress)({
+			onPress: () => onPress(),
+			delay: initialDelay,
+			interval
+		});
+		instanceRef.current = instance;
 		return () => {
-			clearInterval(id);
+			instanceRef.current = null;
+			instance.destroy();
 		};
-	}, [delay]);
-}
-//#endregion
-//#region src/hooks/useLongPress.ts
-function useLongPress(callback, initialDelay = 500, interval = 40) {
-	const [pressed, setPressed] = (0, react.useState)(false);
-	const [delay, setDelay] = (0, react.useState)(initialDelay);
-	const activePointerId = (0, react.useRef)(null);
-	const isPressed = (0, react.useRef)(false);
-	useInterval(() => {
-		callback();
-		setDelay(interval);
-	}, pressed ? delay : null);
-	const stop = (0, react.useCallback)((pointerId) => {
-		if (!isPressed.current) return;
-		if (pointerId !== void 0 && activePointerId.current !== null && activePointerId.current !== pointerId) return;
-		isPressed.current = false;
-		activePointerId.current = null;
-		setPressed(false);
-		setDelay(initialDelay);
-	}, [initialDelay]);
-	useEventListener(globalThis.window, "pointerup", (event) => {
-		stop(event.pointerId);
-	});
-	useEventListener(globalThis.window, "pointercancel", (event) => {
-		stop(event.pointerId);
-	});
-	useEventListener(globalThis.window, "blur", () => {
-		stop();
-	});
-	return (0, react.useCallback)((event) => {
-		if (isPressed.current || event && event.button !== 0) return;
-		isPressed.current = true;
-		activePointerId.current = event?.pointerId ?? null;
-		callback();
-		setPressed(true);
-	}, [callback]);
+	}, []);
+	return (0, react.useCallback)((event) => instanceRef.current?.start(event), []);
 }
 //#endregion
 //#region src/components/NumberInput/StepperButton.tsx
@@ -797,7 +726,7 @@ function StepperButton({ direction, variant, icon, className, style, children, o
 	const { step, disabled, readonly, atMin, atMax, nudge } = useNumberInputContext();
 	const stepper = useStepperContext();
 	const press = useLongPress(() => {
-		if (stepper?.draggingRef.current) return;
+		if (stepper?.moved()) return;
 		nudge(direction, ["raw", step]);
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -856,21 +785,6 @@ function IncrementStepper(props) {
 }
 //#endregion
 //#region src/components/NumberInput/InputField.tsx
-/** The leading number of the displayed text, whatever the format put around it. */
-const NUMBER_PREFIX = /^\s*-?[\d.,]*/;
-const numberEnd = (text) => text.match(NUMBER_PREFIX)?.[0].length ?? text.length;
-/**
-* The index the caret is measured against: the decimal point, or where one
-* would go if the number has none.
-*
-* 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 — which is exactly what stepping does.
-*/
-const decimalAnchor = (text) => {
-	const dot = text.indexOf(".");
-	return dot === -1 ? numberEnd(text) : dot;
-};
 /**
 * The text field of a `NumberInput`, and the only place the value can be typed.
 *
@@ -880,7 +794,7 @@ const decimalAnchor = (text) => {
 * How it behaves on focus, Enter and the arrow keys is set on `Root`
 * (`selectOnFocus`, `unformatOnFocus`, `keepCaretOnStep`, `blurOnEnter`).
 */
-const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ className, style, onFocus, onBlur, onKeyDown, ...props }, forwardedRef) {
+const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ className, style, onChange, onFocus, onBlur, onKeyDown, ...props }, forwardedRef) {
 	const { value, min, max, step, disabled, readonly, keyboard, selectOnFocus, unformatOnFocus, keepCaretOnStep, blurOnEnter, text, editing, outOfRange, setDraft, commitDraft, nudge, inputRef } = useNumberInputContext();
 	const [focused, setFocused] = (0, react.useState)(false);
 	const shown = unformatOnFocus && focused && !editing ? String(value) : text;
@@ -889,7 +803,10 @@ const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ c
 		const input = inputRef.current;
 		if (!input) return;
 		if (selectOnFocus === "all") input.setSelectionRange(0, input.value.length);
-		else input.setSelectionRange(0, input.value.match(NUMBER_PREFIX)?.[0].length ?? 0);
+		else {
+			const span = (0, _tremolo_ui_dom.numberSpan)(input.value);
+			if (span) input.setSelectionRange(span.start, span.end);
+		}
 	}, [
 		focused,
 		selectOnFocus,
@@ -906,8 +823,7 @@ const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ c
 		caretAfterStep.current = null;
 		const input = inputRef.current;
 		if (!input || input.value === pending.from) return;
-		const place = decimalAnchor(input.value) + pending.offset;
-		const caret = Math.max(0, Math.min(place, numberEnd(input.value)));
+		const caret = (0, _tremolo_ui_dom.caretAtDecimalOffset)(input.value, pending.offset);
 		input.setSelectionRange(caret, caret);
 	});
 	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, inputRef);
@@ -934,6 +850,7 @@ const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ c
 		onChange: (event) => {
 			caretAfterStep.current = null;
 			setDraft(event.currentTarget.value);
+			onChange?.(event);
 		},
 		onFocus: (event) => {
 			setFocused(true);
@@ -953,7 +870,7 @@ const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ c
 				event.preventDefault();
 				const input = event.currentTarget;
 				if (keepCaretOnStep && input.selectionStart !== null) caretAfterStep.current = {
-					offset: input.selectionStart - decimalAnchor(input.value),
+					offset: (0, _tremolo_ui_dom.caretDecimalOffset)(input.value, input.selectionStart),
 					from: input.value
 				};
 				nudge(key === "ArrowUp" ? 1 : -1, keyboard, event);
@@ -964,117 +881,54 @@ const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ c
 	});
 });
 //#endregion
-//#region src/hooks/useDrag.ts
-/**
-* Track a pointer drag on an element.
-*
-* @returns a ref callback to attach to the element being dragged
-*/
-function useDrag({ threshold = 1, cursor, pointerLock, onDrag, onDragStart, onDragEnd }) {
-	const dragHandler = useCallbackRef(onDrag);
-	const dragStartHandler = useCallbackRef(onDragStart);
-	const dragEndHandler = useCallbackRef(onDragEnd);
-	const [node, setNode] = (0, react.useState)(null);
-	(0, react.useEffect)(() => {
-		if (!node) return;
-		const instance = (0, _tremolo_ui_dom.createDrag)(node, {
-			threshold,
-			cursor,
-			pointerLock,
-			onDragStart: (state) => dragStartHandler(state),
-			onDrag: (state) => dragHandler(state.x, state.y, state.deltaX, state.deltaY, state),
-			onDragEnd: (state) => dragEndHandler(state)
-		});
-		return () => instance.destroy();
-	}, [
-		node,
-		threshold,
-		cursor,
-		pointerLock,
-		dragHandler,
-		dragStartHandler,
-		dragEndHandler
-	]);
-	return setNode;
-}
-//#endregion
 //#region src/components/NumberInput/Stepper.tsx
 /**
 * The area the steppers sit in, and a drag handle in its own right: dragging it
-* up and down moves the value one `step` every `drag` pixels.
+* up and down moves the value one `step` every `drag` pixels. The counting is
+* `createStepperDrag` in the core.
 *
 * The drag lives here rather than on `InputField` because `createDrag` turns
 * off text selection on whatever element it is attached to.
 */
 const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ className, style, children, ...props }, forwardedRef) {
-	const { value, step, disabled, readonly, drag, dragSensitivity, pointerLock, rawRange, changeValue } = useNumberInputContext();
-	const inactive = disabled || readonly;
-	/**
-	* The sensitivity as an amount per `drag` pixels, so that the drag goes
-	* through the same `applyDelta` the wheel and the arrow keys do. Carrying
-	* the modifier map over rather than resolving it here is what keeps `step`
-	* out of the pipeline for a modifier entry — naming one is a request to move
-	* off the grid.
-	*/
-	const dragOptions = (0, react.useMemo)(() => (0, _tremolo_ui_functions.mapModifier)(dragSensitivity, (factor) => ["raw", step * factor]), [dragSensitivity, step]);
-	/**
-	* Set once the drag has actually moved the value, so that the press-and-hold
-	* repeat of a stepper stands down and leaves the value to the drag. A ref,
-	* because it is read from inside the repeat rather than rendered.
-	*/
-	const draggingRef = (0, react.useRef)(false);
-	/**
-	* Where the drag started, taken on the first move rather than on pointer
-	* down: the steppers act on pointer down, so by then the value may already
-	* have been nudged once, and the drag should carry on from there.
-	*/
-	const originRef = (0, react.useRef)(null);
-	/**
-	* Which modifier the drag is currently 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.
-	*/
-	const factorRef = (0, react.useRef)(1);
-	const previousYRef = (0, react.useRef)(0);
-	const dragRefCallback = useDrag({
-		threshold: 1,
-		cursor: inactive ? void 0 : "ns-resize",
-		pointerLock: inactive ? false : pointerLock,
-		onDragStart: (state) => {
-			originRef.current = null;
-			draggingRef.current = false;
-			factorRef.current = (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value;
-		},
-		onDrag: (_x, y, _dx, _dy, state) => {
-			if (inactive || drag === null) return;
-			if (!originRef.current) {
-				originRef.current = {
-					y,
-					value
-				};
-				previousYRef.current = y;
-				return;
-			}
-			const factor = (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value;
-			if (factor !== factorRef.current) {
-				originRef.current = {
-					y: previousYRef.current,
-					value
-				};
-				factorRef.current = factor;
-			}
-			previousYRef.current = y;
-			const steps = Math.round(-(y - originRef.current.y) / drag);
-			if (steps === 0) return;
-			draggingRef.current = true;
-			changeValue((0, _tremolo_ui_functions.applyDelta)(originRef.current.value, steps, dragOptions, rawRange, state.event));
-		},
-		onDragEnd: () => {
-			draggingRef.current = false;
-		}
+	const { value, disabled, readonly, drag, dragSensitivity, pointerLock, rawRange, changeValue } = useNumberInputContext();
+	const enabled = drag !== null && !disabled && !readonly;
+	const [node, setNode] = (0, react.useState)(null);
+	const instanceRef = (0, react.useRef)(null);
+	const latest = (0, react.useRef)({
+		value,
+		changeValue
 	});
-	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, drag !== null && !inactive ? dragRefCallback : void 0);
-	const context = (0, react.useMemo)(() => ({ draggingRef }), []);
+	const options = {
+		range: rawRange,
+		pixels: drag ?? 1,
+		sensitivity: dragSensitivity,
+		pointerLock
+	};
+	const optionsRef = (0, react.useRef)(options);
+	(0, react.useEffect)(() => {
+		latest.current = {
+			value,
+			changeValue
+		};
+		optionsRef.current = options;
+		instanceRef.current?.update(options);
+	});
+	(0, react.useEffect)(() => {
+		if (!node || !enabled) return;
+		const instance = (0, _tremolo_ui_dom.createStepperDrag)(node, {
+			...optionsRef.current,
+			getValue: () => latest.current.value,
+			onChange: (next) => latest.current.changeValue(next)
+		});
+		instanceRef.current = instance;
+		return () => {
+			instanceRef.current = null;
+			instance.destroy();
+		};
+	}, [node, enabled]);
+	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, setNode);
+	const context = (0, react.useMemo)(() => ({ moved: () => instanceRef.current?.moved() ?? false }), []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperProvider, {
 		value: context,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1088,22 +942,12 @@ const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ classNa
 });
 //#endregion
 //#region src/components/NumberInput/index.tsx
-/**
-* A number at the start of the text, and nothing read after it. A half-typed
-* entry still yields the number in front of it, but text with no number is
-* `NaN` rather than 0, so that "unreadable" and "the user typed 0" stay apart.
-*/
-const LEADING_NUMBER = /^\s*([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?)/;
 const defaultFormat = (value) => String(value);
-const defaultParse = (text) => {
-	const match = text.match(LEADING_NUMBER);
-	return match ? Number(match[1]) : NaN;
-};
 /**
 * Input with some useful functions for entering numerical values.
 */
 const NumberInput = {
-	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, format: formatProp, parse: parseProp, clampValue = true, wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, drag = 1, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, pointerLock = false, selectOnFocus = "none", unformatOnFocus = false, keepCaretOnStep = false, blurOnEnter = true, disabled = false, readonly = false, className, style, onChange, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, format: formatProp, parse: parseProp, clampValue = true, wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, drag = 1, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, pointerLock = false, selectOnFocus = "none", unformatOnFocus = false, keepCaretOnStep = false, blurOnEnter = true, disabled = false, readonly = false, className, style, onChange, children, ...props }, forwardedRef) => {
 		const inputRef = (0, react.useRef)(null);
 		/**
 		* The text being typed. The only state here: it is not a copy of `value`,
@@ -1112,24 +956,13 @@ const NumberInput = {
 		const [draft, setDraft] = (0, react.useState)(null);
 		const inactive = disabled || readonly;
 		const format = formatProp ?? defaultFormat;
-		const parse = parseProp ?? defaultParse;
-		const range = (0, react.useMemo)(() => ({
-			min: (clampValue ? min : void 0) ?? Number.MIN_SAFE_INTEGER,
-			max: (clampValue ? max : void 0) ?? Number.MAX_SAFE_INTEGER,
-			step,
-			scale
-		}), [
-			clampValue,
+		const parse = parseProp ?? _tremolo_ui_dom.parseNumberText;
+		const { normalized: range, raw: rawRange } = (0, react.useMemo)(() => (0, _tremolo_ui_dom.numberInputRanges)({
 			min,
 			max,
 			step,
-			scale
-		]);
-		const rawRange = (0, react.useMemo)(() => ({
-			min: (clampValue ? min : void 0) ?? -Number.MAX_VALUE,
-			max: (clampValue ? max : void 0) ?? Number.MAX_VALUE,
-			step,
-			scale
+			scale,
+			clampValue
 		}), [
 			clampValue,
 			min,
@@ -1137,6 +970,10 @@ const NumberInput = {
 			step,
 			scale
 		]);
+		const ranges = (0, react.useMemo)(() => ({
+			normalized: range,
+			raw: rawRange
+		}), [range, rawRange]);
 		useCheckSteps({
 			component: "NumberInput",
 			range: (0, react.useMemo)(() => min !== void 0 && max !== void 0 && min < max ? {
@@ -1156,7 +993,13 @@ const NumberInput = {
 		});
 		const text = draft ?? format(value);
 		const editing = draft !== null;
-		const outOfRange = !editing && (min !== void 0 && value < min || max !== void 0 && value > max);
+		const bounds = (0, _tremolo_ui_dom.numberInputBounds)(value, {
+			min,
+			max,
+			clampValue
+		});
+		const { atMin, atMax } = bounds;
+		const outOfRange = !editing && bounds.outOfRange;
 		const handleDraft = (0, react.useCallback)((next) => {
 			if (inactive) return;
 			setDraft(next);
@@ -1178,15 +1021,13 @@ const NumberInput = {
 		]);
 		const commitDraft = (0, react.useCallback)(() => {
 			if (draft === null || inactive) return;
-			const parsed = parse(draft);
-			if (!Number.isFinite(parsed)) {
-				setDraft(null);
-				return;
-			}
-			let committed = parsed;
-			if (clampValue && min !== void 0) committed = Math.max(committed, min);
-			if (clampValue && max !== void 0) committed = Math.min(committed, max);
-			changeValue(committed);
+			const committed = (0, _tremolo_ui_dom.commitNumberInputText)(draft, parse, {
+				min,
+				max,
+				clampValue
+			});
+			if (committed === null) setDraft(null);
+			else changeValue(committed);
 		}, [
 			draft,
 			inactive,
@@ -1197,18 +1038,17 @@ const NumberInput = {
 			changeValue
 		]);
 		const nudge = (0, react.useCallback)((direction, option, modifiers) => {
-			const [mode] = (0, _tremolo_ui_functions.selectInputEvent)(option, modifiers).option;
-			changeValue((0, _tremolo_ui_functions.applyDelta)(value, direction, option, mode === "raw" ? rawRange : range, modifiers));
+			changeValue((0, _tremolo_ui_dom.nudgeNumberInput)(value, direction, option, ranges, modifiers));
 		}, [
 			changeValue,
 			value,
-			rawRange,
-			range
+			ranges
 		]);
 		const wheelRefCallback = useWheel((event) => {
-			if (!wheel || inactive || event.deltaY === 0) return;
+			const direction = (0, _tremolo_ui_dom.wheelDirection)(event);
+			if (!wheel || inactive || direction === null) return;
 			event.preventDefault();
-			nudge(-Math.sign(event.deltaY), wheel, event);
+			nudge(direction, wheel, event);
 		}, { requireFocus: true });
 		const context = (0, react.useMemo)(() => ({
 			value,
@@ -1231,8 +1071,8 @@ const NumberInput = {
 			unformatOnFocus,
 			keepCaretOnStep,
 			blurOnEnter,
-			atMin: clampValue && min !== void 0 && value <= min,
-			atMax: clampValue && max !== void 0 && value >= max,
+			atMin,
+			atMax,
 			drag,
 			format,
 			parse,
@@ -1256,6 +1096,8 @@ const NumberInput = {
 			text,
 			editing,
 			outOfRange,
+			atMin,
+			atMax,
 			drag,
 			dragSensitivity,
 			pointerLock,
@@ -1298,78 +1140,15 @@ const NumberInput = {
 	IncrementStepper,
 	DecrementStepper
 };
-//#endregion
-//#region src/components/Piano/keyboard-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",
-		"",
-		";"
-	] }
-};
-//#endregion
-//#region src/components/Piano/index.tsx
-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;
-}
-function shortcutKey(event) {
-	return event.code || event.key;
-}
 /**
 * Customizable piano component.
 */
-const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, keyboardShortcutsScope = "root", resizable = false, whiteKeyWidth = 40, keyGap = 1, blackKeyWidthRatio = .65, blackKeyHeightRatio = .6, height, style, className, label, keyProps, classes, onPlayNote, onStopNote, ...props }, forwardedRef) {
+const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, keyboardShortcutsScope = "root", resizable = false, whiteKeyWidth = 40, keyGap = 1, blackKeyWidthRatio = .65, blackKeyHeightRatio = .6, style, className, label, keyProps, classes, onPlayNote, onStopNote, ...props }, forwardedRef) {
 	const [node, setNode] = (0, react.useState)(null);
 	const [activeNotes, setActiveNotes] = (0, react.useState)([]);
 	/** Set while `resizable` is on, measured from the parent. */
 	const [resizedKeyWidth, setResizedKeyWidth] = (0, react.useState)(whiteKeyWidth);
-	const notes = (0, react.useMemo)(() => (0, _tremolo_ui_functions.getNoteRangeArray)(noteRange), [noteRange]);
-	const whiteKeyCount = (0, react.useMemo)(() => notes.filter(_tremolo_ui_functions.isWhiteKey).length, [notes]);
+	const notes = (0, react.useMemo)(() => (0, _tremolo_ui_dom.getNoteRangeArray)(noteRange), [noteRange]);
 	const layout = (0, react.useMemo)(() => ({
 		noteRange,
 		whiteKeyWidth: resizable ? resizedKeyWidth : whiteKeyWidth,
@@ -1389,21 +1168,20 @@ const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ note
 		layout,
 		glissando,
 		midiMax,
+		keyboardShortcuts,
+		keyboardShortcutsScope,
 		onPlayNote,
 		onStopNote
 	});
 	const instanceRef = (0, react.useRef)(null);
-	const shortcutNotes = (0, react.useRef)(/* @__PURE__ */ new Map());
-	const releaseShortcutNotes = (0, react.useCallback)(() => {
-		for (const { note, source } of shortcutNotes.current.values()) instanceRef.current?.noteOff(note, { source });
-		shortcutNotes.current.clear();
-	}, []);
 	(0, react.useEffect)(() => {
 		if (!node) return;
 		const instance = (0, _tremolo_ui_dom.createPianoInput)(node, {
 			layout: latest.current.layout,
 			glissando: latest.current.glissando,
 			midiMax: latest.current.midiMax,
+			keyboardShortcuts: latest.current.keyboardShortcuts,
+			keyboardShortcutsScope: latest.current.keyboardShortcutsScope,
 			onPlayNote: (note, velocity) => latest.current.onPlayNote?.(note, velocity),
 			onStopNote: (note) => latest.current.onStopNote?.(note),
 			onActiveNotesChange: setActiveNotes
@@ -1419,86 +1197,44 @@ const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ note
 			layout,
 			glissando,
 			midiMax,
+			keyboardShortcuts,
+			keyboardShortcutsScope,
 			onPlayNote,
 			onStopNote
 		};
 		instanceRef.current?.update({
 			layout,
 			glissando,
-			midiMax
+			midiMax,
+			keyboardShortcuts,
+			keyboardShortcutsScope
 		});
 	});
+	const { first, last } = noteRange;
 	(0, react.useEffect)(() => {
 		if (!resizable || !node) return;
 		const parent = node.parentElement;
 		if (!parent) throw new Error("doesn't have a parent element.");
 		const resizeObserver = new ResizeObserver(() => {
-			setResizedKeyWidth(node.clientWidth / Math.max(whiteKeyCount, 1) - keyGap);
+			setResizedKeyWidth((0, _tremolo_ui_dom.fitWhiteKeyWidth)(node.clientWidth, {
+				noteRange: {
+					first,
+					last
+				},
+				keyGap,
+				blackKeyWidthRatio
+			}));
 		});
 		resizeObserver.observe(parent);
 		return () => resizeObserver.disconnect();
 	}, [
 		resizable,
 		node,
-		whiteKeyCount,
-		keyGap
-	]);
-	const shortcutKeys = keyboardShortcuts?.keys;
-	const hasShortcuts = shortcutKeys !== void 0;
-	const shortcutMapping = shortcutKeys?.join("\0");
-	(0, react.useEffect)(() => releaseShortcutNotes, [
-		releaseShortcutNotes,
-		shortcutMapping,
-		keyboardShortcutsScope,
-		noteRange.first,
-		noteRange.last
-	]);
-	/** The note a shortcut key plays, or null when it has none. */
-	function shortcutNote(key) {
-		if (!shortcutKeys || key === "") return null;
-		const index = shortcutKeys.indexOf(key);
-		const note = noteRange.first + index;
-		return index === -1 || note > noteRange.last ? null : note;
-	}
-	const shortcutTarget = (0, react.useMemo)(() => () => {
-		if (!hasShortcuts) return null;
-		return keyboardShortcutsScope === "window" ? globalThis.window : node;
-	}, [
-		hasShortcuts,
-		keyboardShortcutsScope,
-		node
-	]);
-	const focusOutTarget = (0, react.useMemo)(() => () => hasShortcuts && keyboardShortcutsScope === "root" ? node : null, [
-		hasShortcuts,
-		keyboardShortcutsScope,
-		node
+		first,
+		last,
+		keyGap,
+		blackKeyWidthRatio
 	]);
-	const windowBlurTarget = (0, react.useMemo)(() => () => hasShortcuts ? globalThis.window : null, [hasShortcuts]);
-	useEventListener(shortcutTarget, "keydown", (e) => {
-		const key = shortcutKey(e);
-		if (e.repeat || shortcutNotes.current.has(key)) return;
-		if (isEditableTarget(e.target)) return;
-		const note = shortcutNote(e.key);
-		if (note === null) return;
-		const source = `keyboard:${key}`;
-		shortcutNotes.current.set(key, {
-			note,
-			source
-		});
-		instanceRef.current?.noteOn(note, { source });
-	});
-	useEventListener(shortcutTarget, "keyup", (e) => {
-		const key = shortcutKey(e);
-		const shortcut = shortcutNotes.current.get(key);
-		if (!shortcut) return;
-		shortcutNotes.current.delete(key);
-		instanceRef.current?.noteOff(shortcut.note, { source: shortcut.source });
-	});
-	useEventListener(focusOutTarget, "focusout", (e) => {
-		if (e.relatedTarget instanceof Node && node?.contains(e.relatedTarget)) return;
-		releaseShortcutNotes();
-	});
-	useEventListener(windowBlurTarget, "blur", releaseShortcutNotes);
 	(0, react.useImperativeHandle)(forwardedRef, () => ({
 		playNote: (note, velocity) => instanceRef.current?.noteOn(note, {
 			source: "api",
@@ -1513,8 +1249,7 @@ const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ note
 		role: "group",
 		tabIndex: 0,
 		style: {
-			width: resizable ? "100%" : (0, _tremolo_ui_functions.pianoWidth)(layout),
-			"--height": cssLength(height),
+			width: resizable ? "100%" : (0, _tremolo_ui_dom.pianoWidth)(layout),
 			position: "relative",
 			...style
 		},
@@ -1540,8 +1275,8 @@ const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ note
 					position: "absolute",
 					zIndex: keyType === "white" ? 1 : 2,
 					...keyStyle,
-					left: (0, _tremolo_ui_functions.notePosition)(note, layout),
-					width: keyType === "white" ? layout.whiteKeyWidth : (0, _tremolo_ui_functions.blackKeyWidth)(layout),
+					left: (0, _tremolo_ui_dom.notePosition)(note, layout),
+					width: keyType === "white" ? layout.whiteKeyWidth : (0, _tremolo_ui_dom.blackKeyWidth)(layout),
 					height: keyType === "white" ? "100%" : `${blackKeyHeightRatio * 100}%`
 				},
 				children: content !== "" && content !== null && content !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1580,43 +1315,58 @@ function usePointsEditorContext(selector) {
 	return selector ? selector(context) : context;
 }
 //#endregion
+//#region src/components/PointsEditor/Container.tsx
+const Container = /* @__PURE__ */ (0, react.forwardRef)(function Container({ children, className, style, ...props }, forwardedRef) {
+	const { containerRef, disabled, selectable, editor } = usePointsEditorContext();
+	const { refCallback: dragRefCallback } = useDragValue({
+		axis: _tremolo_ui_dom.POINT_AXIS,
+		baseElementRef: containerRef,
+		shouldStart: (event) => !disabled && !editor.isPointElement(event.target),
+		onDragStart: ([x, y], state) => {
+			editor.beginSelectionBox({
+				x,
+				y
+			}, state.event);
+		},
+		onChange: ([x, y]) => editor.moveSelectionBox({
+			x,
+			y
+		}),
+		onDragEnd: () => editor.endSelectionBox()
+	});
+	useWheel((event) => {
+		const move = (0, _tremolo_ui_dom.wheelMove)(event);
+		if (!move) return;
+		const axis = move.axis === 0 ? "x" : "y";
+		if (editor.nudgeFocusedPoint(axis, move.direction, event)) event.preventDefault();
+	}, { target: containerRef });
+	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, containerRef, selectable && !disabled ? dragRefCallback : void 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: composedRef,
+		className,
+		style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: 10,
+			...style
+		},
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Placement, {
+			name: "PointsEditor.Container",
+			children
+		})
+	});
+});
+//#endregion
 //#region src/components/_util/VisuallyHiddenRangeInput.tsx
-const hiddenStyle = {
-	position: "absolute",
-	width: 1,
-	height: 1,
-	padding: 0,
-	margin: -1,
-	overflow: "hidden",
-	clip: "rect(0, 0, 0, 0)",
-	clipPath: "inset(50%)",
-	whiteSpace: "nowrap",
-	border: 0,
-	pointerEvents: "none"
-};
 const VisuallyHiddenRangeInput = /* @__PURE__ */ (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 	...props,
 	ref,
 	type: "range",
-	style: hiddenStyle
+	style: _tremolo_ui_dom.visuallyHiddenStyle
 }));
 //#endregion
 //#region src/components/PointsEditor/Point.tsx
-function clampPoint(point, min, max) {
-	const { x, y } = point;
-	return {
-		x: (0, _tremolo_ui_functions.clamp)(x, min?.x ?? 0, max?.x ?? 1),
-		y: (0, _tremolo_ui_functions.clamp)(y, min?.y ?? 0, max?.y ?? 1)
-	};
-}
-/**
-* A point is placed by its position within the container, so its value is a
-* position: 0..1 on each axis, with y growing downwards.
-*/
-const AXIS = {
-	min: 0,
-	max: 1
-};
 /**
 * One setting for both axes, or one per axis. The point holds a range input
 * for each, so anything that names or describes it comes in a pair.
@@ -1624,8 +1374,8 @@ const AXIS = {
 function perAxis(value, axis) {
 	return typeof value === "string" ? value : value?.[axis];
 }
-function Point({ value, children, id: idProp, min, max, size, width, height, color, disabled: _disabled, readonly: _readonly, wheel: _wheel, keyboard: _keyboard, "aria-label": ariaLabel, "aria-valuetext": ariaValuetext, onChange, onDragStart, onDragEnd, className, style, onPointerDown, onKeyDown, onFocus, ...props }) {
-	const { containerRef, externalStyles, disabled: rootDisabled, readonly: rootReadonly, wheel: rootWheel, keyboard: rootKeyboard, dragSensitivity, selection, registerPoint, beginPointDrag, movePointDrag, nudgeSelection } = usePointsEditorContext();
+function Point({ value, children, id: idProp, min, max, color, disabled: _disabled, readonly: _readonly, wheel: _wheel, keyboard: _keyboard, "aria-label": ariaLabel, "aria-valuetext": ariaValuetext, onChange, onDragStart, onDragEnd, className, style, onPointerDown, onKeyDown, onFocus, ...props }) {
+	const { containerRef, externalStyles, disabled: rootDisabled, readonly: rootReadonly, wheel: rootWheel, keyboard: rootKeyboard, dragSensitivity, selection, editor } = usePointsEditorContext();
 	const generatedId = (0, react.useId)();
 	const id = idProp ?? generatedId;
 	const selected = selection.includes(id);
@@ -1658,65 +1408,48 @@ function Point({ value, children, id: idProp, min, max, size, width, height, col
 			wheel
 		};
 	});
-	(0, react.useEffect)(() => registerPoint(id, registration), [id, registerPoint]);
+	(0, react.useEffect)(() => editor.registerPoint(id, () => registration.current), [id, editor]);
 	/** Where the pointer was when the drag started, to measure the move from. */
 	const pointerOrigin = (0, react.useRef)(null);
 	const { refCallback: dragRefCallback, dragging } = useDragValue({
-		axis: AXIS,
+		axis: _tremolo_ui_dom.POINT_AXIS,
 		baseElementRef: containerRef,
-		sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
+		sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
 		cursor: inactive ? void 0 : externalStyles.cursor,
 		shouldStart: () => !disabled,
 		onChange: ([x, y]) => {
 			const origin = pointerOrigin.current;
 			if (!origin) return;
-			movePointDrag({
+			editor.movePointDrag({
 				x: x - origin.x,
 				y: y - origin.y
 			});
 		},
 		onDragStart: ([x, y], state) => {
-			beginPointDrag(id, state.event);
+			editor.beginPointDrag(id, state.event);
 			pointerOrigin.current = {
 				x,
 				y
 			};
 			xInputRef.current?.focus();
 			if (inactive) return;
-			onDragStart?.(clampPoint(value, min, max));
+			onDragStart?.((0, _tremolo_ui_dom.clampPoint)(value, min, max));
 		},
 		onDragEnd: () => {
 			pointerOrigin.current = null;
 			if (inactive) return;
-			onDragEnd?.(clampPoint(value, min, max));
+			onDragEnd?.((0, _tremolo_ui_dom.clampPoint)(value, min, max));
 		}
 	});
-	const nudge = (0, react.useCallback)((axis, direction, option, modifiers) => {
-		const next = (0, _tremolo_ui_functions.applyDelta)(value[axis], direction, option, AXIS, modifiers);
-		nudgeSelection(id, {
-			x: axis === "x" ? next - value.x : 0,
-			y: axis === "y" ? next - value.y : 0
-		});
-	}, [
-		value,
-		id,
-		nudgeSelection
-	]);
 	const refCallback = require_compose_refs.useComposedRefs(dragRefCallback, setElement);
 	const handleKeyDown = (event) => {
-		const key = event.key;
-		if (![
-			"ArrowRight",
-			"ArrowLeft",
-			"ArrowUp",
-			"ArrowDown"
-		].includes(key)) return;
-		const axis = key === "ArrowRight" || key === "ArrowLeft" ? "x" : "y";
+		const move = (0, _tremolo_ui_dom.arrowKeyMove)(event.key);
+		if (!move) return;
 		event.preventDefault();
 		if (!onChange || inactive || !keyboard) return;
-		nudge(axis, key === "ArrowLeft" || key === "ArrowUp" ? -1 : 1, keyboard, event);
+		editor.nudgePoint(id, move.axis === 0 ? "x" : "y", move.direction, keyboard, event);
 	};
-	const current = clampPoint(value, min, max);
+	const current = (0, _tremolo_ui_dom.clampPoint)(value, min, max);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: refCallback,
 		className,
@@ -1727,8 +1460,6 @@ function Point({ value, children, id: idProp, min, max, size, width, height, col
 		"data-selected": selected ? "" : void 0,
 		style: {
 			"--color": color,
-			"--width": cssLength(size ?? width),
-			"--height": cssLength(size ?? height),
 			position: "absolute",
 			translate: "var(--translate, -50% -50%)",
 			...style,
@@ -1763,7 +1494,7 @@ function Point({ value, children, id: idProp, min, max, size, width, height, col
 					return;
 				}
 				const delta = event.currentTarget.valueAsNumber - value[axis];
-				nudgeSelection(id, {
+				editor.nudgeSelection(id, {
 					x: axis === "x" ? delta : 0,
 					y: axis === "y" ? delta : 0
 				});
@@ -1772,50 +1503,6 @@ function Point({ value, children, id: idProp, min, max, size, width, height, col
 	});
 }
 //#endregion
-//#region src/components/PointsEditor/Container.tsx
-const Container = /* @__PURE__ */ (0, react.forwardRef)(function Container({ children, className, style, ...props }, forwardedRef) {
-	const { containerRef, disabled, selectable, isPointElement, nudgeFocusedPoint, beginSelectionBox, moveSelectionBox, endSelectionBox } = usePointsEditorContext();
-	const { refCallback: dragRefCallback } = useDragValue({
-		axis: AXIS,
-		baseElementRef: containerRef,
-		shouldStart: (event) => !disabled && !isPointElement(event.target),
-		onDragStart: ([x, y], state) => {
-			beginSelectionBox({
-				x,
-				y
-			}, state.event);
-		},
-		onChange: ([x, y]) => moveSelectionBox({
-			x,
-			y
-		}),
-		onDragEnd: endSelectionBox
-	});
-	useWheel((event) => {
-		const horizontal = event.deltaX !== 0;
-		const delta = horizontal ? event.deltaX : event.deltaY;
-		if (delta === 0) return;
-		const axis = horizontal || event.shiftKey ? "x" : "y";
-		if (nudgeFocusedPoint(axis, delta < 0 ? -1 : 1, event)) event.preventDefault();
-	}, { target: containerRef });
-	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, containerRef, selectable && !disabled ? dragRefCallback : void 0);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: composedRef,
-		className,
-		style: {
-			position: "absolute",
-			inset: 0,
-			zIndex: 10,
-			...style
-		},
-		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Placement, {
-			name: "PointsEditor.Container",
-			children
-		})
-	});
-});
-//#endregion
 //#region src/components/PointsEditor/SelectionBox.tsx
 /**
 * The box a drag on empty space draws, and what it covers is selected.
@@ -1848,181 +1535,28 @@ function SelectionBox({ children, className, style, ...props }) {
 /** One array for every editor with selection turned off, so memos hold still. */
 const EMPTY = [];
 /**
-* How far a point may move before something in the selection 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, registration } of entries) {
-		loX = Math.max(loX, (registration.min?.x ?? 0) - start.x);
-		hiX = Math.min(hiX, (registration.max?.x ?? 1) - start.x);
-		loY = Math.max(loY, (registration.min?.y ?? 0) - start.y);
-		hiY = Math.min(hiY, (registration.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)
-	};
-}
-/**
-* A point moves over 0..1 in both axes, so a nudge of 0.01 crosses the editor
-* in a hundred steps whatever its pixel size.
-*/
-const DEFAULT_WHEEL = ["normalized", .01];
-/**
-* 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 DEFAULT_KEYBOARD = {
-	default: ["normalized", .01],
-	shift: ["normalized", .001]
-};
-/**
 * Multiple Point Controller
 */
 const PointsEditor = {
-	Root: /* @__PURE__ */ (0, react.forwardRef)(({ width, height, disabled = false, readonly = false, wheel = DEFAULT_WHEEL, keyboard = DEFAULT_KEYBOARD, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, selectable = false, selection: selectionProp, defaultSelection, onSelectionChange, externalStyles, style, className, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ disabled = false, readonly = false, wheel = _tremolo_ui_dom.POINTS_EDITOR_DEFAULT_WHEEL, keyboard = _tremolo_ui_dom.POINTS_EDITOR_DEFAULT_KEYBOARD, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, selectable = false, selection: selectionProp, defaultSelection, onSelectionChange, externalStyles, style, className, children, ...props }, forwardedRef) => {
 		const containerRef = (0, react.useRef)(null);
 		const { cursor = "grabbing" } = externalStyles ?? {};
 		const controlled = selectionProp !== void 0;
 		const [ownSelection, setOwnSelection] = (0, react.useState)(defaultSelection ?? []);
 		const selection = selectable ? selectionProp ?? ownSelection : EMPTY;
-		const selectionRef = (0, react.useRef)(selection);
-		const changeHandlerRef = (0, react.useRef)(onSelectionChange);
-		(0, react.useEffect)(() => {
-			selectionRef.current = selection;
-			changeHandlerRef.current = onSelectionChange;
-		});
-		const changeSelection = (0, react.useCallback)((next) => {
-			selectionRef.current = next;
-			if (!controlled) setOwnSelection(next);
-			changeHandlerRef.current?.(next);
-		}, [controlled]);
-		/**
-		* Every mounted point, by id. A registration is a ref rather than a value:
-		* the value inside changes on every frame of a drag, and a registry keyed
-		* on it would be rebuilt just as often.
-		*/
-		const points = (0, react.useRef)(/* @__PURE__ */ new Map());
-		const registerPoint = (0, react.useCallback)((id, entry) => {
-			points.current.set(id, entry);
-			return () => {
-				points.current.delete(id);
-			};
-		}, []);
-		/** What the current drag picked up, and where those points started. */
-		const dragRef = (0, react.useRef)([]);
-		const snapshot = (0, react.useCallback)((ids) => {
-			return ids.flatMap((id) => {
-				const registration = points.current.get(id)?.current;
-				return registration ? [{
-					id,
-					start: { ...registration.value }
-				}] : [];
-			});
-		}, []);
-		const applyDeltaTo = (0, react.useCallback)((entries, delta) => {
-			const withRegistration = entries.flatMap((entry) => {
-				const registration = points.current.get(entry.id)?.current;
-				return registration ? [{
-					...entry,
-					registration
-				}] : [];
-			});
-			const allowed = allowedDelta(delta, withRegistration);
-			for (const { start, registration } of withRegistration) {
-				if (registration.readonly) continue;
-				registration.onChange?.({
-					x: (0, _tremolo_ui_functions.toPrecision)(start.x + allowed.x),
-					y: (0, _tremolo_ui_functions.toPrecision)(start.y + allowed.y)
-				});
-			}
-		}, []);
-		const beginPointDrag = (0, react.useCallback)((id, modifiers) => {
-			if (!selectable) {
-				dragRef.current = snapshot([id]);
-				return;
-			}
-			const current = selectionRef.current;
-			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]);
-			dragRef.current = next.includes(id) ? snapshot(next) : [];
-		}, [
-			selectable,
-			changeSelection,
-			snapshot
-		]);
-		const movePointDrag = (0, react.useCallback)((delta) => applyDeltaTo(dragRef.current, delta), [applyDeltaTo]);
-		const nudgeSelection = (0, react.useCallback)((id, delta) => {
-			const ids = selectionRef.current.includes(id) ? selectionRef.current : [id];
-			applyDeltaTo(snapshot(ids), delta);
-		}, [applyDeltaTo, snapshot]);
-		const isPointElement = (0, react.useCallback)((element) => {
-			if (!element) return false;
-			for (const [, entry] of points.current) if (entry.current.element?.contains(element)) return true;
-			return false;
-		}, []);
-		const nudgeFocusedPoint = (0, react.useCallback)((axis, direction, modifiers) => {
-			const container = containerRef.current;
-			const active = container?.ownerDocument.activeElement;
-			if (!container || !active || !container.contains(active)) return false;
-			for (const [id, entry] of points.current) {
-				const { element, wheel, readonly, onChange, value } = entry.current;
-				if (!element?.contains(active)) continue;
-				if (!wheel || readonly || !onChange) return false;
-				const next = (0, _tremolo_ui_functions.applyDelta)(value[axis], direction, wheel, AXIS, modifiers);
-				nudgeSelection(id, {
-					x: axis === "x" ? next - value.x : 0,
-					y: axis === "y" ? next - value.y : 0
-				});
-				return true;
-			}
-			return false;
-		}, [nudgeSelection]);
 		const [selectionBox, setSelectionBox] = (0, react.useState)(null);
-		const selectionBoxRef = (0, react.useRef)(null);
-		selectionBoxRef.current ??= (0, _tremolo_ui_dom.createSelectionBox)({
-			*items() {
-				for (const [id, entry] of points.current) {
-					const { x, y } = entry.current.value;
-					yield [id, [x, y]];
-				}
-			},
-			onBoxChange: setSelectionBox
-		});
+		const [editor] = (0, react.useState)(() => (0, _tremolo_ui_dom.createPointsEditor)({ onSelectionBoxChange: setSelectionBox }));
 		(0, react.useEffect)(() => {
-			selectionBoxRef.current?.update({ onSelectionChange: changeSelection });
-		}, [changeSelection]);
-		(0, react.useEffect)(() => {
-			const box = selectionBoxRef.current;
-			return () => box?.destroy();
-		}, []);
-		const beginSelectionBox = (0, react.useCallback)((at, modifiers) => {
-			if (!selectable) return;
-			selectionBoxRef.current?.begin([at.x, at.y], {
-				additive: modifiers.ctrlKey || modifiers.metaKey,
-				selection: selectionRef.current
+			editor.update({
+				selectable,
+				selection,
+				onSelectionChange: (next) => {
+					if (!controlled) setOwnSelection(next);
+					onSelectionChange?.(next);
+				}
 			});
-		}, [selectable]);
-		const moveSelectionBox = (0, react.useCallback)((to) => {
-			selectionBoxRef.current?.move([to.x, to.y]);
-		}, []);
-		const endSelectionBox = (0, react.useCallback)(() => {
-			if (!selectionBoxRef.current?.end()) return;
-			const [first] = selectionRef.current;
-			if (first) points.current.get(first)?.current.element?.focus();
-		}, []);
+		});
+		(0, react.useEffect)(() => () => editor.destroy(), [editor]);
 		const context = (0, react.useMemo)(() => ({
 			disabled,
 			readonly,
@@ -2033,16 +1567,8 @@ const PointsEditor = {
 			containerRef,
 			selectable,
 			selection,
-			registerPoint,
-			isPointElement,
-			beginPointDrag,
-			movePointDrag,
-			nudgeSelection,
-			nudgeFocusedPoint,
-			selectionBox,
-			beginSelectionBox,
-			moveSelectionBox,
-			endSelectionBox
+			editor,
+			selectionBox
 		}), [
 			disabled,
 			readonly,
@@ -2052,16 +1578,8 @@ const PointsEditor = {
 			cursor,
 			selectable,
 			selection,
-			registerPoint,
-			isPointElement,
-			beginPointDrag,
-			movePointDrag,
-			nudgeSelection,
-			nudgeFocusedPoint,
-			selectionBox,
-			beginSelectionBox,
-			moveSelectionBox,
-			endSelectionBox
+			editor,
+			selectionBox
 		]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsEditorProvider, {
 			value: context,
@@ -2071,8 +1589,6 @@ const PointsEditor = {
 				"data-disabled": disabled ? "" : void 0,
 				"data-readonly": readonly ? "" : void 0,
 				style: {
-					"--width": cssLength(width),
-					"--height": cssLength(height),
 					position: "relative",
 					...style
 				},
@@ -2097,36 +1613,30 @@ function useSliderContext(selector) {
 }
 //#endregion
 //#region src/components/Slider/MarksOption.tsx
-function MarksOption({ value, mark = true, label, thickness, length, gap, labelWidth, classes, styles, className, style, ...props }) {
+function MarksOption({ value, mark = true, label, thickness, length, gap, classes, styles, className, style, ...props }) {
 	useCheckPlacement("Slider.MarksOption", "Slider.Marks");
 	const min = useSliderContext((s) => s.min);
 	const max = useSliderContext((s) => s.max);
 	const scale = useSliderContext((s) => s.scale);
 	const vertical = useSliderContext((s) => s.vertical);
 	const reverse = useSliderContext((s) => s.reverse);
-	const calcPercent = (0, react.useCallback)((value) => {
-		const percent = scale.normalize(value, min, max) * 100;
-		return (0, _tremolo_ui_functions.toFixed)((0, _tremolo_ui_functions.xor)(vertical, reverse) ? 100 - percent : percent);
-	}, [
-		vertical,
-		reverse,
-		max,
+	const percent = (0, _tremolo_ui_dom.valuePercent)(value, {
 		min,
+		max,
 		scale
-	]);
+	}, vertical !== reverse);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className,
 		style: {
-			"--thickness": cssLength(thickness),
-			"--length": cssLength(length),
-			"--gap": cssLength(gap),
-			"--label-width": cssLength(labelWidth),
+			"--thickness": (0, _tremolo_ui_dom.cssLength)(thickness),
+			"--length": (0, _tremolo_ui_dom.cssLength)(length),
+			"--gap": (0, _tremolo_ui_dom.cssLength)(gap),
 			position: "absolute",
 			translate: vertical ? "var(--translate, 0 -50%)" : "var(--translate, -50% 0)",
 			zIndex: 10,
 			...style,
-			left: !vertical ? `${calcPercent(value)}%` : void 0,
-			top: vertical ? `${calcPercent(value)}%` : void 0
+			left: !vertical ? `${percent}%` : void 0,
+			top: vertical ? `${percent}%` : void 0
 		},
 		"data-orientation": vertical ? "vertical" : "horizontal",
 		...props,
@@ -2142,23 +1652,6 @@ function MarksOption({ value, mark = true, label, thickness, length, gap, labelW
 	});
 }
 //#endregion
-//#region src/components/Slider/type.ts
-function generateOptionsList(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 = (0, _tremolo_ui_functions.toFixed)(interval * (Math.ceil(min / interval) + i), (0, _tremolo_ui_functions.decimalPart)(interval)?.length);
-		optionsList.push({
-			value,
-			mark,
-			label
-		});
-	}
-	return optionsList;
-}
-//#endregion
 //#region src/components/Slider/Marks.tsx
 function Marks({ gap, options, children, className, style, ...props }) {
 	const min = useSliderContext((s) => s.min);
@@ -2166,13 +1659,13 @@ function Marks({ gap, options, children, className, style, ...props }) {
 	const step = useSliderContext((s) => s.step);
 	const vertical = useSliderContext((s) => s.vertical);
 	const reverse = useSliderContext((s) => s.reverse);
-	const optionsList = options ? generateOptionsList(options, min, max, step) : [];
-	if ((0, _tremolo_ui_functions.xor)(vertical, reverse)) optionsList.reverse();
+	const optionsList = options ? (0, _tremolo_ui_dom.sliderMarks)(options, min, max, step) : [];
+	if (vertical !== reverse) optionsList.reverse();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className,
 		"data-orientation": vertical ? "vertical" : "horizontal",
 		style: {
-			"--gap": cssLength(gap),
+			"--gap": (0, _tremolo_ui_dom.cssLength)(gap),
 			position: "relative",
 			...style
 		},
@@ -2252,12 +1745,12 @@ const Track = /* @__PURE__ */ (0, react.forwardRef)(function Track({ length, thi
 		className,
 		"data-disabled": disabled ? "" : void 0,
 		"data-orientation": vertical ? "vertical" : "horizontal",
-		"data-flipped": (0, _tremolo_ui_functions.xor)(vertical, reverse) ? "" : void 0,
+		"data-flipped": vertical !== reverse ? "" : void 0,
 		style: {
 			"--active": active,
 			"--inactive": inactive,
-			"--length": cssLength(length),
-			"--thickness": cssLength(thickness),
+			"--length": (0, _tremolo_ui_dom.cssLength)(length),
+			"--thickness": (0, _tremolo_ui_dom.cssLength)(thickness),
 			"--percent": `${percent}%`,
 			position: "relative",
 			...style
@@ -2281,7 +1774,7 @@ const WHEEL_OPTIONS$1 = { requireFocus: true };
 * Customizable slider
 */
 const Slider = {
-	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, vertical = false, reverse = false, externalStyles: _externalStyles, wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, vertical = false, reverse = false, externalStyles: _externalStyles, wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown, ...props }, forwardedRef) => {
 		const trackRef = (0, react.useRef)(null);
 		const thumbRef = (0, react.useRef)(null);
 		const externalStyles = {
@@ -2289,10 +1782,12 @@ const Slider = {
 			..._externalStyles
 		};
 		const inactive = disabled || readonly;
-		const p = (0, _tremolo_ui_functions.toFixed)(scale.normalize(value, min, max) * 100);
-		const rev = (0, _tremolo_ui_functions.toFixed)(100 - p);
-		const displayReversed = (0, react.useMemo)(() => (0, _tremolo_ui_functions.xor)(vertical, reverse), [vertical, reverse]);
-		const percent = displayReversed ? rev : p;
+		const displayReversed = vertical !== reverse;
+		const percent = (0, _tremolo_ui_dom.valuePercent)(value, {
+			min,
+			max,
+			scale
+		}, displayReversed);
 		const axis = (0, react.useMemo)(() => ({
 			min,
 			max,
@@ -2313,18 +1808,11 @@ const Slider = {
 			wheel
 		});
 		const handleKeyDown = (0, react.useCallback)((event) => {
-			const key = event.key;
-			if (![
-				"ArrowRight",
-				"ArrowLeft",
-				"ArrowUp",
-				"ArrowDown"
-			].includes(key)) return;
+			const direction = (0, _tremolo_ui_dom.arrowKeyDirection)(event.key);
+			if (direction === null) return;
 			event.preventDefault();
 			if (!keyboard || !onChange || inactive) return;
-			let direction = key === "ArrowRight" || key === "ArrowUp" ? 1 : -1;
-			if (reverse) direction *= -1;
-			onChange((0, _tremolo_ui_functions.applyDelta)(value, direction, keyboard, axis, event));
+			onChange((0, _tremolo_ui_dom.applyDelta)(value, reverse ? -direction : direction, keyboard, axis, event));
 		}, [
 			keyboard,
 			onChange,
@@ -2339,7 +1827,7 @@ const Slider = {
 			baseElementRef: trackRef,
 			cursor: inactive ? void 0 : externalStyles.cursor,
 			shouldStart: () => !inactive,
-			sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
+			sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
 			updateOnPointerDown: true,
 			onChange: (v) => {
 				if (inactive) return;
@@ -2357,15 +1845,10 @@ const Slider = {
 		});
 		const wheelRefCallback = useWheel((event) => {
 			if (!wheel || !onChange || inactive) return;
+			const direction = (0, _tremolo_ui_dom.wheelDirection)(event, { horizontal: !vertical });
+			if (direction === null) return;
 			event.preventDefault();
-			let direction;
-			if (!vertical && event.deltaX !== 0) direction = event.deltaX > 0 ? 1 : -1;
-			else {
-				if (event.deltaY === 0) return;
-				direction = event.deltaY > 0 ? -1 : 1;
-			}
-			if (reverse) direction *= -1;
-			onChange((0, _tremolo_ui_functions.applyDelta)(value, direction, wheel, axis, event));
+			onChange((0, _tremolo_ui_dom.applyDelta)(value, reverse ? -direction : direction, wheel, axis, event));
 		}, WHEEL_OPTIONS$1);
 		const rootRefCallback = require_compose_refs.useComposedRefs(dragRefCallback, wheelRefCallback);
 		const context = (0, react.useMemo)(() => ({
@@ -2450,16 +1933,13 @@ function useXYPadContext(selector) {
 }
 //#endregion
 //#region src/components/XYPad/Area.tsx
-const Area = /* @__PURE__ */ (0, react.forwardRef)(function Area({ width, height, color, children, className, style, ...props }, forwardedRef) {
+const Area = /* @__PURE__ */ (0, react.forwardRef)(function Area({ children, className, style, ...props }, forwardedRef) {
 	const { areaRef } = useXYPadContext();
 	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, areaRef);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: composedRef,
 		className,
 		style: {
-			"--color": color,
-			"--width": cssLength(width),
-			"--height": cssLength(height),
 			position: "relative",
 			...style
 		},
@@ -2544,7 +2024,7 @@ const WHEEL_OPTIONS = { requireFocus: true };
 * Simple XYPad
 */
 const XYPad = {
-	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min: _min, max: _max, step: _step = 1, scale: _scale = _tremolo_ui_functions.linearScale, reverse: _reverse = false, wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, className, style, externalStyles: _externalStyles, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min: _min, max: _max, step: _step = 1, scale: _scale = _tremolo_ui_functions.linearScale, reverse: _reverse = false, wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, className, style, externalStyles: _externalStyles, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children, ...props }, forwardedRef) => {
 		const rootRef = (0, react.useRef)(null);
 		const areaRef = (0, react.useRef)(null);
 		const thumbRef = (0, react.useRef)(null);
@@ -2558,10 +2038,11 @@ const XYPad = {
 		const step = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_step), [_step]);
 		const scale = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_scale), [_scale]);
 		const reverse = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_reverse), [_reverse]);
-		const percent = (0, react.useMemo)(() => {
-			const normalized = [0, 1].map((i) => scale[i].normalize(value[i], min[i], max[i]));
-			return [0, 1].map((i) => (0, _tremolo_ui_functions.toFixed)((reverse[i] ? 1 - normalized[i] : normalized[i]) * 100));
-		}, [
+		const percent = (0, react.useMemo)(() => [0, 1].map((i) => (0, _tremolo_ui_dom.valuePercent)(value[i], {
+			min: min[i],
+			max: max[i],
+			scale: scale[i]
+		}, reverse[i])), [
 			value,
 			min,
 			max,
@@ -2597,26 +2078,18 @@ const XYPad = {
 		});
 		const withAxis = (0, react.useCallback)((axis, next) => axis === 0 ? [next, value[1]] : [value[0], next], [value]);
 		/** @param i 0 = x, 1 = y */
-		const nudge = (0, react.useCallback)((i, direction, option, modifiers) => withAxis(i, (0, _tremolo_ui_functions.applyDelta)(value[i], direction, option, axis[i], modifiers)), [
+		const nudge = (0, react.useCallback)((i, direction, option, modifiers) => withAxis(i, (0, _tremolo_ui_dom.applyDelta)(value[i], direction, option, axis[i], modifiers)), [
 			value,
 			axis,
 			withAxis
 		]);
 		const handleKeyDown = (0, react.useCallback)((event) => {
-			const key = event.key;
-			if (![
-				"ArrowRight",
-				"ArrowLeft",
-				"ArrowUp",
-				"ArrowDown"
-			].includes(key)) return;
-			const i = key === "ArrowRight" || key === "ArrowLeft" ? 0 : 1;
+			const move = (0, _tremolo_ui_dom.arrowKeyMove)(event.key);
+			if (!move) return;
 			event.preventDefault();
 			if (!onChange || inactive || !keyboard) return;
-			let direction = 1;
-			if (key === "ArrowLeft" || key === "ArrowUp") direction *= -1;
-			if (reverse[i]) direction *= -1;
-			onChange(nudge(i, direction, keyboard, event));
+			const { axis: i, direction } = move;
+			onChange(nudge(i, reverse[i] ? -direction : direction, keyboard, event));
 		}, [
 			onChange,
 			inactive,
@@ -2627,7 +2100,7 @@ const XYPad = {
 		const { refCallback: dragRefCallback } = useDragValue({
 			axis,
 			baseElementRef: areaRef,
-			sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
+			sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
 			updateOnPointerDown: true,
 			cursor: inactive ? void 0 : externalStyles.cursor,
 			shouldStart: () => !inactive,
@@ -2647,15 +2120,11 @@ const XYPad = {
 		});
 		const wheelRefCallback = useWheel((event) => {
 			if (!onChange || inactive || !wheel) return;
-			const horizontal = event.deltaX !== 0;
-			const delta = horizontal ? event.deltaX : event.deltaY;
-			if (delta === 0) return;
-			const i = horizontal || event.shiftKey ? 0 : 1;
+			const move = (0, _tremolo_ui_dom.wheelMove)(event);
+			if (!move) return;
 			event.preventDefault();
-			let direction = 1;
-			if (delta < 0) direction *= -1;
-			if (reverse[i]) direction *= -1;
-			onChange(nudge(i, direction, wheel, event));
+			const { axis: i, direction } = move;
+			onChange(nudge(i, reverse[i] ? -direction : direction, wheel, event));
 		}, WHEEL_OPTIONS);
 		const rootRefCallback = require_compose_refs.useComposedRefs(rootRef, dragRefCallback, wheelRefCallback);
 		const context = (0, react.useMemo)(() => ({
@@ -2740,6 +2209,82 @@ function useAnimationFrame(callback = () => {}, deps = []) {
 	}, [runCallback, ...deps]);
 }
 //#endregion
+//#region src/hooks/useDrag.ts
+/**
+* Track a pointer drag on an element.
+*
+* @returns a ref callback to attach to the element being dragged
+*/
+function useDrag({ threshold = 1, cursor, pointerLock, onDrag, onDragStart, onDragEnd }) {
+	const dragHandler = useCallbackRef(onDrag);
+	const dragStartHandler = useCallbackRef(onDragStart);
+	const dragEndHandler = useCallbackRef(onDragEnd);
+	const [node, setNode] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!node) return;
+		const instance = (0, _tremolo_ui_dom.createDrag)(node, {
+			threshold,
+			cursor,
+			pointerLock,
+			onDragStart: (state) => dragStartHandler(state),
+			onDrag: (state) => dragHandler(state.x, state.y, state.deltaX, state.deltaY, state),
+			onDragEnd: (state) => dragEndHandler(state)
+		});
+		return () => instance.destroy();
+	}, [
+		node,
+		threshold,
+		cursor,
+		pointerLock,
+		dragHandler,
+		dragStartHandler,
+		dragEndHandler
+	]);
+	return setNode;
+}
+//#endregion
+//#region src/hooks/useEventListener.ts
+function useEventListener(target, event, handler, options) {
+	const listener = useCallbackRef(handler);
+	const cleanupRef = (0, react.useRef)(() => {});
+	(0, react.useEffect)(() => {
+		const node = typeof target === "function" ? target() : target ?? document;
+		if (!node) return;
+		node.addEventListener(event, listener, options);
+		const cleanup = () => {
+			node.removeEventListener(event, listener, options);
+		};
+		cleanupRef.current = cleanup;
+		return () => {
+			cleanup();
+			if (cleanupRef.current === cleanup) cleanupRef.current = () => {};
+		};
+	}, [
+		event,
+		target,
+		options,
+		listener
+	]);
+	return (0, react.useCallback)(() => cleanupRef.current(), []);
+}
+//#endregion
+//#region src/hooks/useInterval.ts
+function useInterval(callback, delay) {
+	const savedCallback = (0, react.useRef)(callback);
+	(0, react.useEffect)(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+	(0, react.useEffect)(() => {
+		if (delay === null) return;
+		const id = setInterval(() => {
+			savedCallback.current();
+		}, delay);
+		return () => {
+			clearInterval(id);
+		};
+	}, [delay]);
+}
+//#endregion
 //#region src/hooks/useMIDIAccess.ts
 const INITIAL_STATE = {
 	midiAccess: null,
@@ -2877,40 +2422,20 @@ function useMIDIMessage(midiAccess, onMIDIMessage) {
 }
 //#endregion
 exports.AnimationCanvas = AnimationCanvas;
-exports.DEFAULT_DRAG_SENSITIVITY = DEFAULT_DRAG_SENSITIVITY;
-exports.DEFAULT_KEYBOARD_OPTIONS = DEFAULT_KEYBOARD_OPTIONS;
-exports.DEFAULT_WHEEL_OPTIONS = DEFAULT_WHEEL_OPTIONS;
+exports.DropZone = DropZone;
+exports.FileInput = FileInput;
 exports.Knob = Knob;
-Object.defineProperty(exports, "NOT_SUPPORTED", {
-	enumerable: true,
-	get: function() {
-		return _tremolo_ui_dom.NOT_SUPPORTED;
-	}
-});
 exports.NumberInput = NumberInput;
-Object.defineProperty(exports, "PERMISSION_DENIED", {
-	enumerable: true,
-	get: function() {
-		return _tremolo_ui_dom.PERMISSION_DENIED;
-	}
-});
-exports.PITCH_BEND_CENTER = _tremolo_ui_dom.PITCH_BEND_CENTER;
 exports.Piano = Piano;
 exports.PointsEditor = PointsEditor;
-exports.SHORTCUTS = SHORTCUTS;
 exports.Slider = Slider;
-Object.defineProperty(exports, "UNAVAILABLE", {
-	enumerable: true,
-	get: function() {
-		return _tremolo_ui_dom.UNAVAILABLE;
-	}
-});
 exports.XYPad = XYPad;
-exports.clampPoint = clampPoint;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useDrag = useDrag;
 exports.useDragValue = useDragValue;
+exports.useDropZone = useDropZone;
 exports.useEventListener = useEventListener;
+exports.useFileInputContext = useFileInputContext;
 exports.useInterval = useInterval;
 exports.useKnobContext = useKnobContext;
 exports.useLongPress = useLongPress;