@tremolo-ui/react 0.7.0 → 0.9.0

package/dist/index.js

@@ -1,8 +1,9 @@
 import { useComposedRefs } from "./compose-refs.js";
 import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { NOT_SUPPORTED, PERMISSION_DENIED, PITCH_BEND_CENTER, UNAVAILABLE, applyDelta, blackKeyWidth, createAnimationCanvas, createDrag, createDragValue, createDropZone, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createSelectionBox, createWheel, elementMapping, getNoteRangeArray, mapModifier, matchesAccept, notePosition, pianoWidth, relativeMapping, selectModifier, toXY } from "@tremolo-ui/dom";
+import { DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, KNOB_VIEWBOX_SIZE, createAnimationCanvas, createChangeGesture, createDrag, createDragValue, createDropZone, createLongPress, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createPointsEditor, createWheel, elementMapping, knobAngles, knobArcPath, knobArcRadius, notePosition, relativeMapping, valuePercent } from "@tremolo-ui/dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { clamp, isWhiteKey, linearScale, noteKey, radian, toFixed, toPrecision } from "@tremolo-ui/functions";
+import { POINTS_EDITOR_DEFAULT_KEYBOARD, POINTS_EDITOR_DEFAULT_WHEEL, POINT_AXIS, applyDelta, arrowKeyDirection, arrowKeyMove, blackKeyWidth, caretAtDecimalOffset, caretDecimalOffset, checkSteps, clampPoint, commitNumberInputText, createStepperDrag, cssLength, fitWhiteKeyWidth, getNoteRangeArray, nudgeNumberInput, numberInputBounds, numberInputRanges, numberSpan, parseNumberText, partitionByAccept, pianoWidth, selectModifier, sliderMarks, toXY, visuallyHiddenStyle, wheelDirection, wheelMove } from "@tremolo-ui/dom/internal";
+import { clamp, isWhiteKey, linearScale, noteKey } from "@tremolo-ui/functions";
 //#region src/components/AnimationCanvas/index.tsx
 /**
 * A simple animatable canvas with requestAnimationFrame()
@@ -168,31 +169,6 @@ const DropZone = { Root: /* @__PURE__ */ forwardRef(({ accept, multiple = false,
 	});
 }) };
 //#endregion
-//#region src/components/_util/visually-hidden.ts
-/**
-* Take an element out of sight while leaving it in the accessibility tree and
-* in the tab order.
-*
-* `display: none` and `visibility: hidden` would remove it from both, and the
-* native control underneath a headless component is what carries the ARIA and
-* the keyboard behaviour. `pointer-events: none` is safe because nothing is
-* ever clicked here directly: a `<label>` forwards its click, and a drag is
-* handled by the part that is visible.
-*/
-const visuallyHiddenStyle = {
-	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"
-};
-//#endregion
 //#region src/components/FileInput/context.tsx
 const FileInputContext = /* @__PURE__ */ createContext(null);
 const FileInputProvider = FileInputContext.Provider;
@@ -212,14 +188,10 @@ const FileInput = {
 			disabled
 		}), [inputId, disabled]);
 		function handleChange(event) {
-			const picked = Array.from(event.target.files ?? []);
+			const { accepted, rejected } = partitionByAccept(Array.from(event.target.files ?? []), accept);
 			event.target.value = "";
-			const accepted = [];
-			const rejected = [];
-			for (const file of picked) if (matchesAccept(file, accept)) accepted.push(file);
-			else rejected.push(file);
-			if (rejected.length > 0) onReject?.(rejected);
 			if (accepted.length > 0) onChange?.(accepted);
+			if (rejected.length > 0) onReject?.(rejected);
 		}
 		return /* @__PURE__ */ jsx(FileInputProvider, {
 			value: context,
@@ -254,114 +226,75 @@ const FileInput = {
 	})
 };
 //#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/useChangeGesture.ts
 /**
-* Press every entry of `options` at nine points along the travel and report
-* whether anything came of it.
+* The core's change gesture, reporting the control's value to
+* `onChangeStart` / `onChangeEnd`. The start gets the value before the change,
+* the end the last one reported.
 *
-* 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.
+* Internal
+* @private
 */
-function probe(options, range, format) {
-	const { min, max, scale = linearScale } = range;
-	const outcome = {
-		moved: false,
-		visible: false
-	};
-	for (const { modifiers } of entries(options)) for (const position of PROBES) {
-		const value = scale.denormalize(position, min, max);
-		const up = applyDelta(value, 1, options, range, modifiers);
-		const down = applyDelta(value, -1, options, range, modifiers);
-		if (up !== value || down !== value) outcome.moved = true;
-		if (!format) continue;
-		const shown = format(value);
-		if (format(up) !== shown || format(down) !== shown) outcome.visible = true;
-	}
-	return outcome;
+function useChangeGesture(value, { onChangeStart, onChangeEnd, changeEndDelay }, inactive) {
+	const [instance] = useState(() => createChangeGesture());
+	const latest = useRef({
+		value,
+		onChangeStart,
+		onChangeEnd
+	});
+	const lastValue = useRef(value);
+	useInsertionEffect(() => {
+		latest.current = {
+			value,
+			onChangeStart,
+			onChangeEnd
+		};
+	});
+	useEffect(() => {
+		instance.update({
+			endDelay: changeEndDelay,
+			onStart: (source) => {
+				lastValue.current = latest.current.value;
+				latest.current.onChangeStart?.(latest.current.value, source);
+			},
+			onEnd: (source) => latest.current.onChangeEnd?.(lastValue.current, source)
+		});
+	}, [instance, changeEndDelay]);
+	useEffect(() => {
+		if (inactive) instance.end();
+	}, [instance, inactive]);
+	useEffect(() => () => instance.end(), [instance]);
+	const changed = useCallback((next) => {
+		lastValue.current = next;
+	}, []);
+	return useMemo(() => ({
+		hold: instance.hold,
+		pulse: instance.pulse,
+		instant: instance.instant,
+		end: instance.end,
+		active: instance.active,
+		changed
+	}), [instance, changed]);
 }
+//#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.
-*
-* Two settings that are each fine on their own can cancel out, and nothing
-* fails when they do — the control simply sits there:
-*
-* - **`step` coarser than the amount.** `keyboard={['raw', 0.1]}` with
-*   `step={1}` rounds every press straight back to where it started
-* - **the display coarser than the amount.** A `format` showing two decimals
-*   of a kHz value cannot show a press worth 1 Hz
-*
-* The second is only reported when the press is invisible at *every* point
-* along the travel. A display that rounds is a deliberate choice and is
-* normally right — it is being too coarse everywhere that makes it a mistake.
+* 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;
 	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 checkSteps(options)) console.warn(warning);
 		} catch {}
 	}, [
-		where,
+		component,
+		axis,
 		min,
 		max,
 		step,
@@ -458,7 +391,10 @@ function useWheel(onWheel, { requireFocus = false, target } = {}) {
 	useEffect(() => {
 		const element = target ? target.current : node;
 		if (!element) return;
-		const instance = createWheel(element, (event) => wheelHandler(event), { requireFocus });
+		const instance = createWheel(element, {
+			onWheel: (event) => wheelHandler(event),
+			requireFocus
+		});
 		return () => instance.destroy();
 	}, [
 		node,
@@ -469,49 +405,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/dom`.
-*/
-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.
@@ -553,49 +446,8 @@ function useCheckPlacement(child, parent) {
 		parent
 	]);
 }
-/**
-* 角度から円弧上の点を求める。
-*
-* 半径は線の太さの分だけ内側に取る必要があるが、太さは ActiveLine / InactiveLine が
-* それぞれ持つため、座標はストアで先に計算せず各コンポーネント側で求める。
-*/
-function pointOnArc(angle, radius) {
-	return {
-		x: 50 + radius * Math.cos(radian(angle - 90)),
-		y: 50 + radius * Math.sin(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__ */ createContext(null);
 const KnobProvider = KnobContext.Provider;
 function useKnobContext(selector) {
@@ -609,10 +461,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 = knobArcRadius(strokeWidth);
 	return /* @__PURE__ */ jsx("path", {
 		className,
-		d: arcPath(r2, r3, radius),
+		d: knobArcPath(r2, r3, radius),
 		fill: "none",
 		stroke,
 		strokeWidth,
@@ -630,17 +482,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 = knobArcRadius(strokeWidth);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [startValue > min && /* @__PURE__ */ jsx("path", {
 		className,
-		d: arcPath(r1, r2, radius),
+		d: knobArcPath(r1, r2, radius),
 		fill: "none",
 		stroke,
 		strokeWidth,
 		...props
 	}), startValue < max && /* @__PURE__ */ jsx("path", {
 		className,
-		d: arcPath(r3, r4, radius),
+		d: knobArcPath(r3, r4, radius),
 		fill: "none",
 		stroke,
 		strokeWidth,
@@ -651,7 +503,7 @@ function InactiveLine({ stroke = "currentColor", strokeWidth = 6, className, ...
 //#region src/components/Knob/SVGRoot.tsx
 function SVGRoot({ children, style, ...props }) {
 	return /* @__PURE__ */ jsx("svg", {
-		viewBox: `0 0 100 100`,
+		viewBox: `0 0 ${KNOB_VIEWBOX_SIZE} ${KNOB_VIEWBOX_SIZE}`,
 		style: {
 			display: "block",
 			...style
@@ -665,7 +517,7 @@ function SVGRoot({ children, style, ...props }) {
 }
 //#endregion
 //#region src/components/Knob/Thumb.tsx
-function Thumb$2({ className, thumb = "currentColor", thumbLine = "currentColor", thumbSize = 84, thumbLineWeight = 6, thumbLineLength = 35, classes, ...props }) {
+function Thumb$2({ className, color = "currentColor", lineColor = "currentColor", size = 84, lineWeight = 6, lineLength = 35, classes, ...props }) {
 	useCheckPlacement("Knob.Thumb", "Knob.SVGRoot");
 	const angleRange = useKnobContext((s) => s.angleRange);
 	const p = useKnobContext((s) => s.p);
@@ -676,16 +528,16 @@ function Thumb$2({ className, thumb = "currentColor", thumbLine = "currentColor"
 		children: [/* @__PURE__ */ jsx("circle", {
 			cx: "50%",
 			cy: "50%",
-			r: `${thumbSize / 2}%`,
-			fill: thumb
+			r: `${size / 2}%`,
+			fill: color
 		}), /* @__PURE__ */ jsx("line", {
-			className: classes?.thumbLine,
+			className: classes?.line,
 			x1: "50%",
-			y1: `${(100 - clamp(thumbSize, 0, 100)) / 2}%`,
+			y1: `${(KNOB_VIEWBOX_SIZE - clamp(size, 0, 100)) / 2}%`,
 			x2: "50%",
-			y2: `${thumbLineLength}%`,
-			stroke: thumbLine,
-			strokeWidth: `${thumbLineWeight}%`,
+			y2: `${lineLength}%`,
+			stroke: lineColor,
+			strokeWidth: `${lineWeight}%`,
 			style: {
 				transform: `rotate(${r1 + p * angleRange}deg)`,
 				transformOrigin: "50% 50%"
@@ -695,7 +547,6 @@ function Thumb$2({ className, thumb = "currentColor", thumbLine = "currentColor"
 }
 //#endregion
 //#region src/components/Knob/index.tsx
-const defaultExternalStyles$2 = { cursor: "grabbing" };
 /**
 * The wheel only acts while the focus is inside, so that scrolling a page past
 * the control does not change its value.
@@ -705,13 +556,9 @@ const WHEEL_OPTIONS$2 = { requireFocus: true };
 * Interactive rotary knob component implemented in SVG.
 */
 const Knob = {
-	Root: /* @__PURE__ */ forwardRef(({ value, min, max, step = 1, scale = 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__ */ forwardRef(({ value, min, max, step = 1, scale = linearScale, resetValue, startValue = min, size, dragCursor = "grabbing", wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, pointerLock = false, disabled = false, readOnly = false, angleRange = 270, onChange, onChangeStart, onChangeEnd, changeEndDelay, onKeyDown, onPointerDown, onDoubleClick, className, style, children, actionsRef, ...props }, forwardedRef) => {
 		const elmRef = useRef(null);
-		const externalStyles = {
-			...defaultExternalStyles$2,
-			..._externalStyles
-		};
-		const inactive = disabled || readonly;
+		const inactive = disabled || readOnly;
 		const range = useMemo(() => ({
 			min,
 			max,
@@ -729,24 +576,30 @@ const Knob = {
 			keyboard,
 			wheel
 		});
+		const gesture = useChangeGesture(value, {
+			onChangeStart,
+			onChangeEnd,
+			changeEndDelay
+		}, inactive);
+		const change = useCallback((next) => {
+			gesture.changed(next);
+			onChange?.(next);
+		}, [gesture, onChange]);
 		const handleKeyDown = useCallback((event) => {
 			if (!keyboard || !onChange || inactive) return;
-			const key = event.key;
-			if ([
-				"ArrowRight",
-				"ArrowLeft",
-				"ArrowUp",
-				"ArrowDown"
-			].includes(key)) {
-				event.preventDefault();
-				onChange(applyDelta(value, key === "ArrowRight" || key === "ArrowUp" ? 1 : -1, keyboard, range, event));
-			}
+			const direction = arrowKeyDirection(event.key);
+			if (direction === null) return;
+			event.preventDefault();
+			gesture.pulse("keyboard");
+			change(applyDelta(value, direction, keyboard, range, event));
 		}, [
 			keyboard,
 			onChange,
 			inactive,
 			value,
-			range
+			range,
+			gesture,
+			change
 		]);
 		const { refCallback: dragRefCallback, dragging } = useDragValue({
 			axis: useMemo(() => [range, {
@@ -756,21 +609,28 @@ const Knob = {
 			getValue: () => [value, value],
 			sensitivity: (state) => selectModifier(dragSensitivity, state.event).value,
 			threshold: 1,
-			cursor: inactive ? void 0 : externalStyles.cursor,
+			cursor: inactive ? void 0 : dragCursor,
 			pointerLock: inactive ? false : pointerLock,
 			shouldStart: () => !inactive,
 			onChange: (v) => {
 				if (inactive) return;
-				onChange?.(v[1]);
-			}
+				change(v[1]);
+			},
+			onDragStart: () => {
+				if (!inactive) gesture.hold("pointer");
+			},
+			onDragEnd: () => gesture.end()
 		});
 		const wheelRefCallback = useWheel((event) => {
 			if (!wheel || inactive) return;
+			const direction = wheelDirection(event);
+			if (direction === null) return;
 			event.preventDefault();
-			if (!onChange || event.deltaY === 0) return;
-			onChange(applyDelta(value, -Math.sign(event.deltaY), wheel, range, event));
+			if (!onChange) return;
+			gesture.pulse("wheel");
+			change(applyDelta(value, direction, wheel, range, event));
 		}, WHEEL_OPTIONS$2);
-		const rootRefCallback = useComposedRefs(elmRef, dragRefCallback, wheelRefCallback);
+		const rootRefCallback = useComposedRefs(forwardedRef, elmRef, dragRefCallback, wheelRefCallback);
 		const context = useMemo(() => {
 			const config = {
 				value,
@@ -783,7 +643,7 @@ const Knob = {
 			};
 			return {
 				...config,
-				...calcAngles(config)
+				...knobAngles(config)
 			};
 		}, [
 			value,
@@ -794,7 +654,7 @@ const Knob = {
 			startValue,
 			angleRange
 		]);
-		useImperativeHandle(forwardedRef, () => {
+		useImperativeHandle(actionsRef, () => {
 			return {
 				focus() {
 					if (!disabled) elmRef.current?.focus();
@@ -815,9 +675,9 @@ const Knob = {
 				"aria-valuemin": min,
 				"aria-valuemax": max,
 				"aria-disabled": disabled,
-				"aria-readonly": readonly,
+				"aria-readonly": readOnly,
 				"data-disabled": disabled ? "" : void 0,
-				"data-readonly": readonly ? "" : void 0,
+				"data-readonly": readOnly ? "" : void 0,
 				"data-dragging": dragging ? "" : void 0,
 				style: {
 					"--knob-size": cssLength(size),
@@ -825,7 +685,7 @@ const Knob = {
 				},
 				onPointerDown,
 				onDoubleClick: (event) => {
-					if (!inactive && enableDoubleClickDefault && onChange) onChange(defaultValue);
+					if (!inactive && resetValue !== null && onChange) gesture.instant("doubleClick", () => change(resetValue ?? startValue));
 					onDoubleClick?.(event);
 				},
 				onKeyDown: (event) => {
@@ -851,88 +711,47 @@ function useNumberInputContext(selector) {
 	if (!context) throw new Error("Missing NumberInputContext.Provider in the tree");
 	return selector ? selector(context) : context;
 }
+const NumberInputGestureContext = /* @__PURE__ */ createContext(null);
+const NumberInputGestureProvider = NumberInputGestureContext.Provider;
+function useNumberInputGesture() {
+	return useContext(NumberInputGestureContext);
+}
 const StepperContext = /* @__PURE__ */ createContext(null);
 const StepperProvider = StepperContext.Provider;
 function useStepperContext() {
 	return useContext(StepperContext);
 }
 //#endregion
-//#region src/hooks/useEventListener.ts
-function useEventListener(target, event, handler, options) {
-	const listener = useCallbackRef(handler);
-	const cleanupRef = useRef(() => {});
-	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 useCallback(() => cleanupRef.current(), []);
-}
-//#endregion
-//#region src/hooks/useInterval.ts
-function useInterval(callback, delay) {
-	const savedCallback = 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 = useRef(null);
 	useEffect(() => {
-		savedCallback.current = callback;
-	}, [callback]);
+		instanceRef.current?.update({
+			delay: initialDelay,
+			interval
+		});
+	});
 	useEffect(() => {
-		if (delay === null) return;
-		const id = setInterval(() => {
-			savedCallback.current();
-		}, delay);
+		const instance = 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] = useState(false);
-	const [delay, setDelay] = useState(initialDelay);
-	const activePointerId = useRef(null);
-	const isPressed = useRef(false);
-	useInterval(() => {
-		callback();
-		setDelay(interval);
-	}, pressed ? delay : null);
-	const stop = 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 useCallback((event) => {
-		if (isPressed.current || event && event.button !== 0) return;
-		isPressed.current = true;
-		activePointerId.current = event?.pointerId ?? null;
-		callback();
-		setPressed(true);
-	}, [callback]);
+	}, []);
+	return useCallback((event) => instanceRef.current?.start(event), []);
 }
 //#endregion
 //#region src/components/NumberInput/StepperButton.tsx
@@ -941,10 +760,11 @@ function useLongPress(callback, initialDelay = 500, interval = 40) {
 * in which way they move the value and which arrow they draw.
 */
 function StepperButton({ direction, variant, icon, className, style, children, onPointerDown, ...props }) {
-	const { step, disabled, readonly, atMin, atMax, nudge } = useNumberInputContext();
+	const { step, disabled, readOnly, atMin, atMax, nudge } = useNumberInputContext();
 	const stepper = useStepperContext();
+	const gesture = useNumberInputGesture();
 	const press = useLongPress(() => {
-		if (stepper?.draggingRef.current) return;
+		if (stepper?.moved()) return;
 		nudge(direction, ["raw", step]);
 	});
 	return /* @__PURE__ */ jsx("div", {
@@ -954,10 +774,13 @@ function StepperButton({ direction, variant, icon, className, style, children, o
 		"aria-label": direction > 0 ? "Increment" : "Decrement",
 		"aria-disabled": disabled || (direction > 0 ? atMax : atMin),
 		"data-disabled": disabled || (direction > 0 ? atMax : atMin) ? "" : void 0,
-		"data-readonly": readonly ? "" : void 0,
+		"data-readonly": readOnly ? "" : void 0,
 		style,
 		onPointerDown: (event) => {
-			if (!disabled && !readonly) press(event);
+			if (!disabled && !readOnly) {
+				gesture?.press();
+				press(event);
+			}
 			onPointerDown?.(event);
 		},
 		...props,
@@ -1003,21 +826,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.
 *
@@ -1027,8 +835,9 @@ const decimalAnchor = (text) => {
 * How it behaves on focus, Enter and the arrow keys is set on `Root`
 * (`selectOnFocus`, `unformatOnFocus`, `keepCaretOnStep`, `blurOnEnter`).
 */
-const InputField = /* @__PURE__ */ forwardRef(function InputField({ className, style, 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 InputField = /* @__PURE__ */ 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 gesture = useNumberInputGesture();
 	const [focused, setFocused] = useState(false);
 	const shown = unformatOnFocus && focused && !editing ? String(value) : text;
 	useEffect(() => {
@@ -1036,7 +845,10 @@ const InputField = /* @__PURE__ */ forwardRef(function InputField({ className, s
 		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 = numberSpan(input.value);
+			if (span) input.setSelectionRange(span.start, span.end);
+		}
 	}, [
 		focused,
 		selectOnFocus,
@@ -1053,8 +865,7 @@ const InputField = /* @__PURE__ */ forwardRef(function InputField({ className, s
 		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 = caretAtDecimalOffset(input.value, pending.offset);
 		input.setSelectionRange(caret, caret);
 	});
 	const composedRef = useComposedRefs(forwardedRef, inputRef);
@@ -1066,11 +877,11 @@ const InputField = /* @__PURE__ */ forwardRef(function InputField({ className, s
 		role: "spinbutton",
 		value: shown,
 		disabled,
-		readOnly: readonly,
+		readOnly,
 		"aria-disabled": disabled,
-		"aria-readonly": readonly,
+		"aria-readonly": readOnly,
 		"data-disabled": disabled ? "" : void 0,
-		"data-readonly": readonly ? "" : void 0,
+		"data-readonly": readOnly ? "" : void 0,
 		"aria-valuenow": value,
 		"aria-valuemin": min,
 		"aria-valuemax": max,
@@ -1081,6 +892,7 @@ const InputField = /* @__PURE__ */ forwardRef(function InputField({ className, s
 		onChange: (event) => {
 			caretAfterStep.current = null;
 			setDraft(event.currentTarget.value);
+			onChange?.(event);
 		},
 		onFocus: (event) => {
 			setFocused(true);
@@ -1096,13 +908,14 @@ const InputField = /* @__PURE__ */ forwardRef(function InputField({ className, s
 			if (key === "Enter") {
 				commitDraft();
 				if (blurOnEnter) event.currentTarget.blur();
-			} else if (keyboard && !disabled && !readonly && (key === "ArrowUp" || key === "ArrowDown") && !event.nativeEvent.isComposing) {
+			} else if (keyboard && !disabled && !readOnly && (key === "ArrowUp" || key === "ArrowDown") && !event.nativeEvent.isComposing) {
 				event.preventDefault();
 				const input = event.currentTarget;
 				if (keepCaretOnStep && input.selectionStart !== null) caretAfterStep.current = {
-					offset: input.selectionStart - decimalAnchor(input.value),
+					offset: caretDecimalOffset(input.value, input.selectionStart),
 					from: input.value
 				};
+				gesture?.key();
 				nudge(key === "ArrowUp" ? 1 : -1, keyboard, event);
 			}
 			onKeyDown?.(event);
@@ -1111,123 +924,66 @@ const InputField = /* @__PURE__ */ forwardRef(function InputField({ className, s
 	});
 });
 //#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] = useState(null);
-	useEffect(() => {
-		if (!node) return;
-		const instance = 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__ */ 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 = useMemo(() => 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 = 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 = 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 = useRef(1);
-	const previousYRef = 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 = 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 = 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(applyDelta(originRef.current.value, steps, dragOptions, rawRange, state.event));
-		},
-		onDragEnd: () => {
-			draggingRef.current = false;
-		}
+const Stepper = /* @__PURE__ */ forwardRef(function Stepper({ className, style, children, onPointerDown, ...props }, forwardedRef) {
+	const { value, disabled, readOnly, drag, dragSensitivity, pointerLock, dragCursor, rawRange, changeValue } = useNumberInputContext();
+	const enabled = drag !== null && !disabled && !readOnly;
+	const [node, setNode] = useState(null);
+	const instanceRef = useRef(null);
+	const latest = useRef({
+		value,
+		changeValue
+	});
+	const options = {
+		range: rawRange,
+		pixels: drag ?? 1,
+		sensitivity: dragSensitivity,
+		pointerLock,
+		cursor: dragCursor
+	};
+	const optionsRef = useRef(options);
+	useEffect(() => {
+		latest.current = {
+			value,
+			changeValue
+		};
+		optionsRef.current = options;
+		instanceRef.current?.update(options);
 	});
-	const composedRef = useComposedRefs(forwardedRef, drag !== null && !inactive ? dragRefCallback : void 0);
-	const context = useMemo(() => ({ draggingRef }), []);
+	useEffect(() => {
+		if (!node || !enabled) return;
+		const instance = 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 gesture = useNumberInputGesture();
+	const composedRef = useComposedRefs(forwardedRef, setNode);
+	const context = useMemo(() => ({ moved: () => instanceRef.current?.moved() ?? false }), []);
 	return /* @__PURE__ */ jsx(StepperProvider, {
 		value: context,
 		children: /* @__PURE__ */ jsx("div", {
 			ref: composedRef,
 			className,
 			style,
+			onPointerDown: (event) => {
+				if (enabled) gesture?.press();
+				onPointerDown?.(event);
+			},
 			...props,
 			children
 		})
@@ -1235,48 +991,32 @@ const Stepper = /* @__PURE__ */ forwardRef(function Stepper({ className, style,
 });
 //#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__ */ forwardRef(({ value, min, max, step = 1, scale = 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__ */ forwardRef(({ value, min, max, step = 1, scale = linearScale, format: formatProp, parse: parseProp, clampValue = true, wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, drag = 1, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, pointerLock = false, dragCursor = "ns-resize", selectOnFocus = "none", unformatOnFocus = false, keepCaretOnStep = false, blurOnEnter = true, disabled = false, readOnly = false, className, style, onChange, onChangeStart, onChangeEnd, changeEndDelay, children, actionsRef, ...props }, forwardedRef) => {
 		const inputRef = useRef(null);
 		/**
 		* The text being typed. The only state here: it is not a copy of `value`,
 		* but the half-finished entry that has no value to be derived from yet.
 		*/
 		const [draft, setDraft] = useState(null);
-		const inactive = disabled || readonly;
+		const inactive = disabled || readOnly;
+		const gesture = useChangeGesture(value, {
+			onChangeStart,
+			onChangeEnd,
+			changeEndDelay
+		}, inactive);
 		const format = formatProp ?? defaultFormat;
-		const parse = parseProp ?? defaultParse;
-		const range = 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 ?? parseNumberText;
+		const { normalized: range, raw: rawRange } = useMemo(() => numberInputRanges({
 			min,
 			max,
 			step,
-			scale
-		]);
-		const rawRange = useMemo(() => ({
-			min: (clampValue ? min : void 0) ?? -Number.MAX_VALUE,
-			max: (clampValue ? max : void 0) ?? Number.MAX_VALUE,
-			step,
-			scale
+			scale,
+			clampValue
 		}), [
 			clampValue,
 			min,
@@ -1284,6 +1024,10 @@ const NumberInput = {
 			step,
 			scale
 		]);
+		const ranges = useMemo(() => ({
+			normalized: range,
+			raw: rawRange
+		}), [range, rawRange]);
 		useCheckSteps({
 			component: "NumberInput",
 			range: useMemo(() => min !== void 0 && max !== void 0 && min < max ? {
@@ -1303,37 +1047,56 @@ 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 = numberInputBounds(value, {
+			min,
+			max,
+			clampValue
+		});
+		const { atMin, atMax } = bounds;
+		const outOfRange = !editing && bounds.outOfRange;
 		const handleDraft = useCallback((next) => {
 			if (inactive) return;
 			setDraft(next);
 			const parsed = parse(next);
-			if (Number.isFinite(parsed)) onChange?.(parsed);
+			if (!Number.isFinite(parsed)) return;
+			if (parsed !== value) {
+				gesture.pulse("keyboard");
+				gesture.changed(parsed);
+			}
+			onChange?.(parsed);
 		}, [
 			inactive,
 			parse,
-			onChange
+			onChange,
+			value,
+			gesture
 		]);
 		const changeValue = useCallback((next) => {
 			if (inactive) return;
 			setDraft(null);
-			if (next !== value) onChange?.(next);
+			if (next === value) return;
+			gesture.changed(next);
+			onChange?.(next);
 		}, [
 			inactive,
 			value,
-			onChange
+			onChange,
+			gesture
 		]);
 		const commitDraft = useCallback(() => {
 			if (draft === null || inactive) return;
-			const parsed = parse(draft);
-			if (!Number.isFinite(parsed)) {
+			const committed = commitNumberInputText(draft, parse, {
+				min,
+				max,
+				clampValue
+			});
+			if (committed === null) {
 				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);
+			if (committed !== value) gesture.pulse("keyboard");
 			changeValue(committed);
+			gesture.end();
 		}, [
 			draft,
 			inactive,
@@ -1341,21 +1104,23 @@ const NumberInput = {
 			clampValue,
 			min,
 			max,
-			changeValue
+			changeValue,
+			value,
+			gesture
 		]);
 		const nudge = useCallback((direction, option, modifiers) => {
-			const [mode] = selectModifier(option, modifiers).value;
-			changeValue(applyDelta(value, direction, option, mode === "raw" ? rawRange : range, modifiers));
+			changeValue(nudgeNumberInput(value, direction, option, ranges, modifiers));
 		}, [
 			changeValue,
 			value,
-			rawRange,
-			range
+			ranges
 		]);
 		const wheelRefCallback = useWheel((event) => {
-			if (!wheel || inactive || event.deltaY === 0) return;
+			const direction = wheelDirection(event);
+			if (!wheel || inactive || direction === null) return;
 			event.preventDefault();
-			nudge(-Math.sign(event.deltaY), wheel, event);
+			gesture.pulse("wheel");
+			nudge(direction, wheel, event);
 		}, { requireFocus: true });
 		const context = useMemo(() => ({
 			value,
@@ -1364,7 +1129,7 @@ const NumberInput = {
 			step,
 			scale,
 			disabled,
-			readonly,
+			readOnly,
 			clampValue,
 			range,
 			rawRange,
@@ -1374,12 +1139,13 @@ const NumberInput = {
 			outOfRange,
 			dragSensitivity,
 			pointerLock,
+			dragCursor,
 			selectOnFocus,
 			unformatOnFocus,
 			keepCaretOnStep,
 			blurOnEnter,
-			atMin: clampValue && min !== void 0 && value <= min,
-			atMax: clampValue && max !== void 0 && value >= max,
+			atMin,
+			atMax,
 			drag,
 			format,
 			parse,
@@ -1395,7 +1161,7 @@ const NumberInput = {
 			step,
 			scale,
 			disabled,
-			readonly,
+			readOnly,
 			clampValue,
 			range,
 			rawRange,
@@ -1403,9 +1169,12 @@ const NumberInput = {
 			text,
 			editing,
 			outOfRange,
+			atMin,
+			atMax,
 			drag,
 			dragSensitivity,
 			pointerLock,
+			dragCursor,
 			selectOnFocus,
 			unformatOnFocus,
 			keepCaretOnStep,
@@ -1417,7 +1186,8 @@ const NumberInput = {
 			changeValue,
 			nudge
 		]);
-		useImperativeHandle(forwardedRef, () => {
+		const rootRefCallback = useComposedRefs(forwardedRef, wheelRefCallback);
+		useImperativeHandle(actionsRef, () => {
 			return {
 				focus() {
 					if (!disabled) inputRef.current?.focus();
@@ -1427,16 +1197,39 @@ const NumberInput = {
 				}
 			};
 		}, [disabled]);
+		const pressed = useRef(false);
+		const gestureContext = useMemo(() => ({
+			press: () => {
+				if (inactive) return;
+				gesture.hold("pointer");
+				if (pressed.current) return;
+				pressed.current = true;
+				const release = () => {
+					pressed.current = false;
+					gesture.end();
+					window.removeEventListener("pointerup", release);
+					window.removeEventListener("pointercancel", release);
+				};
+				window.addEventListener("pointerup", release);
+				window.addEventListener("pointercancel", release);
+			},
+			key: () => {
+				if (!inactive) gesture.pulse("keyboard");
+			}
+		}), [gesture, inactive]);
 		return /* @__PURE__ */ jsx(NumberInputProvider, {
 			value: context,
-			children: /* @__PURE__ */ jsx("div", {
-				ref: wheelRefCallback,
-				className,
-				"data-disabled": disabled ? "" : void 0,
-				"data-readonly": readonly ? "" : void 0,
-				style,
-				...props,
-				children
+			children: /* @__PURE__ */ jsx(NumberInputGestureProvider, {
+				value: gestureContext,
+				children: /* @__PURE__ */ jsx("div", {
+					ref: rootRefCallback,
+					className,
+					"data-disabled": disabled ? "" : void 0,
+					"data-readonly": readOnly ? "" : void 0,
+					style,
+					...props,
+					children
+				})
 			})
 		});
 	}),
@@ -1445,78 +1238,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__ */ 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__ */ 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, actionsRef, ...props }, forwardedRef) {
 	const [node, setNode] = useState(null);
 	const [activeNotes, setActiveNotes] = useState([]);
 	/** Set while `resizable` is on, measured from the parent. */
 	const [resizedKeyWidth, setResizedKeyWidth] = useState(whiteKeyWidth);
 	const notes = useMemo(() => getNoteRangeArray(noteRange), [noteRange]);
-	const whiteKeyCount = useMemo(() => notes.filter(isWhiteKey).length, [notes]);
 	const layout = useMemo(() => ({
 		noteRange,
 		whiteKeyWidth: resizable ? resizedKeyWidth : whiteKeyWidth,
@@ -1536,21 +1266,20 @@ const Piano = { Root: /* @__PURE__ */ forwardRef(function Root({ noteRange, glis
 		layout,
 		glissando,
 		midiMax,
+		keyboardShortcuts,
+		keyboardShortcutsScope,
 		onPlayNote,
 		onStopNote
 	});
 	const instanceRef = useRef(null);
-	const shortcutNotes = useRef(/* @__PURE__ */ new Map());
-	const releaseShortcutNotes = useCallback(() => {
-		for (const { note, source } of shortcutNotes.current.values()) instanceRef.current?.noteOff(note, { source });
-		shortcutNotes.current.clear();
-	}, []);
 	useEffect(() => {
 		if (!node) return;
 		const instance = 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
@@ -1566,87 +1295,46 @@ const Piano = { Root: /* @__PURE__ */ forwardRef(function Root({ noteRange, glis
 			layout,
 			glissando,
 			midiMax,
+			keyboardShortcuts,
+			keyboardShortcutsScope,
 			onPlayNote,
 			onStopNote
 		};
 		instanceRef.current?.update({
 			layout,
 			glissando,
-			midiMax
+			midiMax,
+			keyboardShortcuts,
+			keyboardShortcutsScope
 		});
 	});
+	const { first, last } = noteRange;
 	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(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");
-	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 = useMemo(() => () => {
-		if (!hasShortcuts) return null;
-		return keyboardShortcutsScope === "window" ? globalThis.window : node;
-	}, [
-		hasShortcuts,
-		keyboardShortcutsScope,
-		node
-	]);
-	const focusOutTarget = useMemo(() => () => hasShortcuts && keyboardShortcutsScope === "root" ? node : null, [
-		hasShortcuts,
-		keyboardShortcutsScope,
-		node
+		first,
+		last,
+		keyGap,
+		blackKeyWidthRatio
 	]);
-	const windowBlurTarget = 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);
-	useImperativeHandle(forwardedRef, () => ({
+	const rootRefCallback = useComposedRefs(forwardedRef, setNode);
+	useImperativeHandle(actionsRef, () => ({
 		playNote: (note, velocity) => instanceRef.current?.noteOn(note, {
 			source: "api",
 			velocity
@@ -1654,14 +1342,13 @@ const Piano = { Root: /* @__PURE__ */ forwardRef(function Root({ noteRange, glis
 		stopNote: (note) => instanceRef.current?.noteOff(note, { source: "api" })
 	}), []);
 	return /* @__PURE__ */ jsx("div", {
-		ref: setNode,
+		ref: rootRefCallback,
 		className,
 		"data-resizable": resizable ? "" : void 0,
 		role: "group",
 		tabIndex: 0,
 		style: {
 			width: resizable ? "100%" : pianoWidth(layout),
-			"--height": cssLength(height),
 			position: "relative",
 			...style
 		},
@@ -1727,6 +1414,49 @@ function usePointsEditorContext(selector) {
 	return selector ? selector(context) : context;
 }
 //#endregion
+//#region src/components/PointsEditor/Container.tsx
+const Container = /* @__PURE__ */ forwardRef(function Container({ children, className, style, ...props }, forwardedRef) {
+	const { containerRef, disabled, selectable, editor } = usePointsEditorContext();
+	const { refCallback: dragRefCallback } = useDragValue({
+		axis: 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 = 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 = useComposedRefs(forwardedRef, containerRef, selectable && !disabled ? dragRefCallback : void 0);
+	return /* @__PURE__ */ jsx("div", {
+		ref: composedRef,
+		className,
+		style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: 10,
+			...style
+		},
+		...props,
+		children: /* @__PURE__ */ jsx(Placement, {
+			name: "PointsEditor.Container",
+			children
+		})
+	});
+});
+//#endregion
 //#region src/components/_util/VisuallyHiddenRangeInput.tsx
 const VisuallyHiddenRangeInput = /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ jsx("input", {
 	...props,
@@ -1736,21 +1466,6 @@ const VisuallyHiddenRangeInput = /* @__PURE__ */ forwardRef((props, ref) => /* @
 }));
 //#endregion
 //#region src/components/PointsEditor/Point.tsx
-function clampPoint(point, min, max) {
-	const { x, y } = point;
-	return {
-		x: clamp(x, min?.x ?? 0, max?.x ?? 1),
-		y: 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.
@@ -1758,17 +1473,27 @@ 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, onChangeStart, onChangeEnd, changeEndDelay, className, style, onPointerDown, onKeyDown, onFocus, ...props }) {
+	const { containerRef, dragCursor, disabled: rootDisabled, readOnly: rootReadOnly, wheel: rootWheel, keyboard: rootKeyboard, dragSensitivity, selection, editor } = usePointsEditorContext();
 	const generatedId = useId();
 	const id = idProp ?? generatedId;
 	const selected = selection.includes(id);
 	const disabled = _disabled ?? rootDisabled;
-	const readonly = _readonly ?? rootReadonly;
-	const inactive = disabled || readonly;
+	const readOnly = _readOnly ?? rootReadOnly;
+	const inactive = disabled || readOnly;
 	const wheel = _wheel === void 0 ? rootWheel : _wheel;
 	const keyboard = _keyboard === void 0 ? rootKeyboard : _keyboard;
 	useCheckPlacement("PointsEditor.Point", "PointsEditor.Container");
+	const current = clampPoint(value, min, max);
+	const gesture = useChangeGesture(current, {
+		onChangeStart,
+		onChangeEnd,
+		changeEndDelay
+	}, inactive);
+	const handleChange = (next) => {
+		gesture.changed(next);
+		onChange?.(next);
+	};
 	const [element, setElement] = useState(null);
 	const xInputRef = useRef(null);
 	const yInputRef = useRef(null);
@@ -1777,9 +1502,10 @@ function Point({ value, children, id: idProp, min, max, size, width, height, col
 		min,
 		max,
 		readonly: inactive,
-		onChange,
+		onChange: onChange ? handleChange : void 0,
 		element,
-		wheel
+		wheel,
+		beforeWheel: () => gesture.pulse("wheel")
 	});
 	useEffect(() => {
 		registration.current = {
@@ -1787,82 +1513,62 @@ function Point({ value, children, id: idProp, min, max, size, width, height, col
 			min,
 			max,
 			readonly: inactive,
-			onChange,
+			onChange: onChange ? handleChange : void 0,
 			element,
-			wheel
+			wheel,
+			beforeWheel: () => gesture.pulse("wheel")
 		};
 	});
-	useEffect(() => registerPoint(id, registration), [id, registerPoint]);
+	useEffect(() => editor.registerPoint(id, () => registration.current), [id, editor]);
 	/** Where the pointer was when the drag started, to measure the move from. */
 	const pointerOrigin = useRef(null);
 	const { refCallback: dragRefCallback, dragging } = useDragValue({
-		axis: AXIS,
+		axis: POINT_AXIS,
 		baseElementRef: containerRef,
 		sensitivity: (state) => selectModifier(dragSensitivity, state.event).value,
-		cursor: inactive ? void 0 : externalStyles.cursor,
+		cursor: inactive ? void 0 : dragCursor,
 		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));
+			if (!inactive) gesture.hold("pointer");
 		},
 		onDragEnd: () => {
 			pointerOrigin.current = null;
-			if (inactive) return;
-			onDragEnd?.(clampPoint(value, min, max));
+			gesture.end();
 		}
 	});
-	const nudge = useCallback((axis, direction, option, modifiers) => {
-		const next = 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 = 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 = arrowKeyMove(event.key);
+		if (!move) return;
 		event.preventDefault();
 		if (!onChange || inactive || !keyboard) return;
-		nudge(axis, key === "ArrowLeft" || key === "ArrowUp" ? -1 : 1, keyboard, event);
+		gesture.pulse("keyboard");
+		editor.nudgePoint(id, move.axis === 0 ? "x" : "y", move.direction, keyboard, event);
 	};
-	const current = clampPoint(value, min, max);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: refCallback,
 		className,
 		"data-disabled": disabled ? "" : void 0,
-		"data-readonly": readonly ? "" : void 0,
+		"data-readonly": readOnly ? "" : void 0,
 		tabIndex: -1,
 		"data-dragging": dragging ? "" : void 0,
 		"data-selected": selected ? "" : void 0,
 		style: {
 			"--color": color,
-			"--width": cssLength(size ?? width),
-			"--height": cssLength(size ?? height),
 			position: "absolute",
 			translate: "var(--translate, -50% -50%)",
 			...style,
@@ -1887,17 +1593,17 @@ function Point({ value, children, id: idProp, min, max, size, width, height, col
 			max: max?.[axis] ?? 1,
 			step: "any",
 			disabled,
-			"aria-readonly": readonly,
+			"aria-readonly": readOnly,
 			"aria-orientation": axis === "x" ? "horizontal" : "vertical",
 			"aria-label": perAxis(ariaLabel, axis) ?? axis,
 			"aria-valuetext": perAxis(ariaValuetext, axis),
 			onChange: (event) => {
-				if (readonly) {
+				if (readOnly) {
 					event.currentTarget.value = String(current[axis]);
 					return;
 				}
 				const delta = event.currentTarget.valueAsNumber - value[axis];
-				nudgeSelection(id, {
+				editor.nudgeSelection(id, {
 					x: axis === "x" ? delta : 0,
 					y: axis === "y" ? delta : 0
 				});
@@ -1906,50 +1612,6 @@ function Point({ value, children, id: idProp, min, max, size, width, height, col
 	});
 }
 //#endregion
-//#region src/components/PointsEditor/Container.tsx
-const Container = /* @__PURE__ */ 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 = useComposedRefs(forwardedRef, containerRef, selectable && !disabled ? dragRefCallback : void 0);
-	return /* @__PURE__ */ jsx("div", {
-		ref: composedRef,
-		className,
-		style: {
-			position: "absolute",
-			inset: 0,
-			zIndex: 10,
-			...style
-		},
-		...props,
-		children: /* @__PURE__ */ 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.
@@ -1982,220 +1644,50 @@ 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 : clamp(delta.x, loX, hiX),
-		y: hiY < loY ? 0 : 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__ */ 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__ */ forwardRef(({ disabled = false, readOnly = false, wheel = POINTS_EDITOR_DEFAULT_WHEEL, keyboard = POINTS_EDITOR_DEFAULT_KEYBOARD, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, selectable = false, selection: selectionProp, defaultSelection, onSelectionChange, dragCursor = "grabbing", style, className, children, ...props }, forwardedRef) => {
 		const containerRef = useRef(null);
-		const { cursor = "grabbing" } = externalStyles ?? {};
 		const controlled = selectionProp !== void 0;
 		const [ownSelection, setOwnSelection] = useState(defaultSelection ?? []);
 		const selection = selectable ? selectionProp ?? ownSelection : EMPTY;
-		const selectionRef = useRef(selection);
-		const changeHandlerRef = useRef(onSelectionChange);
-		useEffect(() => {
-			selectionRef.current = selection;
-			changeHandlerRef.current = onSelectionChange;
-		});
-		const changeSelection = 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 = useRef(/* @__PURE__ */ new Map());
-		const registerPoint = 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 = useRef([]);
-		const snapshot = useCallback((ids) => {
-			return ids.flatMap((id) => {
-				const registration = points.current.get(id)?.current;
-				return registration ? [{
-					id,
-					start: { ...registration.value }
-				}] : [];
-			});
-		}, []);
-		const applyDeltaTo = 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: toPrecision(start.x + allowed.x),
-					y: toPrecision(start.y + allowed.y)
-				});
-			}
-		}, []);
-		const beginPointDrag = 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 = useCallback((delta) => applyDeltaTo(dragRef.current, delta), [applyDeltaTo]);
-		const nudgeSelection = useCallback((id, delta) => {
-			const ids = selectionRef.current.includes(id) ? selectionRef.current : [id];
-			applyDeltaTo(snapshot(ids), delta);
-		}, [applyDeltaTo, snapshot]);
-		const isPointElement = useCallback((element) => {
-			if (!element) return false;
-			for (const [, entry] of points.current) if (entry.current.element?.contains(element)) return true;
-			return false;
-		}, []);
-		const nudgeFocusedPoint = 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 = 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] = useState(null);
-		const selectionBoxRef = useRef(null);
-		selectionBoxRef.current ??= createSelectionBox({
-			*items() {
-				for (const [id, entry] of points.current) {
-					const { x, y } = entry.current.value;
-					yield [id, [x, y]];
-				}
-			},
-			onBoxChange: setSelectionBox
-		});
-		useEffect(() => {
-			selectionBoxRef.current?.update({ onSelectionChange: changeSelection });
-		}, [changeSelection]);
+		const [editor] = useState(() => createPointsEditor({ onSelectionBoxChange: setSelectionBox }));
 		useEffect(() => {
-			const box = selectionBoxRef.current;
-			return () => box?.destroy();
-		}, []);
-		const beginSelectionBox = 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 = useCallback((to) => {
-			selectionBoxRef.current?.move([to.x, to.y]);
-		}, []);
-		const endSelectionBox = useCallback(() => {
-			if (!selectionBoxRef.current?.end()) return;
-			const [first] = selectionRef.current;
-			if (first) points.current.get(first)?.current.element?.focus();
-		}, []);
+		});
+		useEffect(() => () => editor.destroy(), [editor]);
 		const context = useMemo(() => ({
 			disabled,
-			readonly,
+			readOnly,
 			wheel,
 			keyboard,
 			dragSensitivity,
-			externalStyles: { cursor },
+			dragCursor,
 			containerRef,
 			selectable,
 			selection,
-			registerPoint,
-			isPointElement,
-			beginPointDrag,
-			movePointDrag,
-			nudgeSelection,
-			nudgeFocusedPoint,
-			selectionBox,
-			beginSelectionBox,
-			moveSelectionBox,
-			endSelectionBox
+			editor,
+			selectionBox
 		}), [
 			disabled,
-			readonly,
+			readOnly,
 			wheel,
 			keyboard,
 			dragSensitivity,
-			cursor,
+			dragCursor,
 			selectable,
 			selection,
-			registerPoint,
-			isPointElement,
-			beginPointDrag,
-			movePointDrag,
-			nudgeSelection,
-			nudgeFocusedPoint,
-			selectionBox,
-			beginSelectionBox,
-			moveSelectionBox,
-			endSelectionBox
+			editor,
+			selectionBox
 		]);
 		return /* @__PURE__ */ jsx(PointsEditorProvider, {
 			value: context,
@@ -2203,10 +1695,8 @@ const PointsEditor = {
 				ref: forwardedRef,
 				className,
 				"data-disabled": disabled ? "" : void 0,
-				"data-readonly": readonly ? "" : void 0,
+				"data-readonly": readOnly ? "" : void 0,
 				style: {
-					"--width": cssLength(width),
-					"--height": cssLength(height),
 					position: "relative",
 					...style
 				},
@@ -2231,36 +1721,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 vertical = useSliderContext((s) => s.orientation === "vertical");
 	const reverse = useSliderContext((s) => s.reverse);
-	const calcPercent = useCallback((value) => {
-		const percent = scale.normalize(value, min, max) * 100;
-		return toFixed(vertical !== reverse ? 100 - percent : percent);
-	}, [
-		vertical,
-		reverse,
-		max,
+	const percent = valuePercent(value, {
 		min,
+		max,
 		scale
-	]);
+	}, vertical !== reverse);
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		style: {
 			"--thickness": cssLength(thickness),
 			"--length": cssLength(length),
 			"--gap": cssLength(gap),
-			"--label-width": cssLength(labelWidth),
 			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,
@@ -2276,52 +1760,14 @@ function MarksOption({ value, mark = true, label, thickness, length, gap, labelW
 	});
 }
 //#endregion
-//#region src/components/_util/decimal-digits.ts
-/**
-* How many digits a number carries after the decimal point.
-*
-* `Slider.Marks` builds its labels by multiplying an interval, which leaves
-* binary debris in the last digits (`0.1 * 3` is `0.30000000000000004`). The
-* count is what tells `toFixed` how far to round that back.
-*
-* The exponent form has to be handled separately: `String(1e-7)` is `'1e-7'`,
-* which has no decimal point at all, so reading the text after the point
-* reports no digits and the interval rounds away to whole numbers.
-*/
-function decimalDigits(x) {
-	if (!Number.isFinite(x)) return 0;
-	const text = String(x);
-	const e = text.indexOf("e");
-	if (e === -1) return text.split(".")[1]?.length ?? 0;
-	const fraction = text.slice(0, e).split(".")[1]?.length ?? 0;
-	return Math.max(0, fraction - Number(text.slice(e + 1)));
-}
-//#endregion
-//#region src/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 = toFixed(interval * (Math.ceil(min / interval) + i), decimalDigits(interval));
-		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);
 	const max = useSliderContext((s) => s.max);
 	const step = useSliderContext((s) => s.step);
-	const vertical = useSliderContext((s) => s.vertical);
+	const vertical = useSliderContext((s) => s.orientation === "vertical");
 	const reverse = useSliderContext((s) => s.reverse);
-	const optionsList = options ? generateOptionsList(options, min, max, step) : [];
+	const optionsList = options ? sliderMarks(options, min, max, step) : [];
 	if (vertical !== reverse) optionsList.reverse();
 	return /* @__PURE__ */ jsx("div", {
 		className,
@@ -2346,9 +1792,9 @@ function Marks({ gap, options, children, className, style, ...props }) {
 }
 //#endregion
 //#region src/components/Slider/Thumb.tsx
-const Thumb$1 = /* @__PURE__ */ forwardRef(function Thumb({ color, children, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, ...props }, forwardedRef) {
+const Thumb$1 = /* @__PURE__ */ forwardRef(function Thumb({ color, children, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, actionsRef, ...props }, forwardedRef) {
 	const inputRef = useRef(null);
-	const { value, min, max, step, vertical, disabled, readonly, onChange, percent, thumbRef } = useSliderContext();
+	const { value, min, max, step, orientation, disabled, readOnly, onChange, percent, thumbRef } = useSliderContext();
 	useCheckPlacement("Slider.Thumb", "Slider.Track");
 	const methods = () => ({
 		focus() {
@@ -2358,12 +1804,13 @@ const Thumb$1 = /* @__PURE__ */ forwardRef(function Thumb({ color, children, cla
 			inputRef.current?.blur();
 		}
 	});
-	useImperativeHandle(forwardedRef, methods, [disabled]);
+	useImperativeHandle(actionsRef, methods, [disabled]);
 	useImperativeHandle(thumbRef, methods, [disabled]);
 	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardedRef,
 		className,
 		"data-disabled": disabled ? "" : void 0,
-		"data-readonly": readonly ? "" : void 0,
+		"data-readonly": readOnly ? "" : void 0,
 		...props,
 		style: {
 			"--color": color,
@@ -2371,8 +1818,8 @@ const Thumb$1 = /* @__PURE__ */ forwardRef(function Thumb({ color, children, cla
 			translate: "var(--translate, -50% -50%)",
 			zIndex: 100,
 			...style,
-			top: vertical ? `${percent}%` : "50%",
-			left: !vertical ? `${percent}%` : "50%"
+			top: orientation === "vertical" ? `${percent}%` : "50%",
+			left: orientation === "vertical" ? "50%" : `${percent}%`
 		},
 		children: [/* @__PURE__ */ jsx(VisuallyHiddenRangeInput, {
 			ref: inputRef,
@@ -2381,14 +1828,14 @@ const Thumb$1 = /* @__PURE__ */ forwardRef(function Thumb({ color, children, cla
 			max,
 			step,
 			disabled,
-			"aria-readonly": readonly,
-			"aria-orientation": vertical ? "vertical" : "horizontal",
+			"aria-readonly": readOnly,
+			"aria-orientation": orientation,
 			"aria-label": ariaLabel,
 			"aria-labelledby": ariaLabelledby,
 			"aria-describedby": ariaDescribedby,
 			"aria-valuetext": ariaValuetext,
 			onChange: (event) => {
-				if (readonly) {
+				if (readOnly) {
 					event.currentTarget.value = String(value);
 					return;
 				}
@@ -2399,18 +1846,18 @@ const Thumb$1 = /* @__PURE__ */ forwardRef(function Thumb({ color, children, cla
 });
 //#endregion
 //#region src/components/Slider/Track.tsx
-const Track = /* @__PURE__ */ forwardRef(function Track({ length, thickness, active, inactive, children, className, style, ...props }, forwardedRef) {
-	const { vertical, reverse, disabled, percent, trackRef } = useSliderContext();
+const Track = /* @__PURE__ */ forwardRef(function Track({ length, thickness, activeColor, inactiveColor, children, className, style, ...props }, forwardedRef) {
+	const { orientation, reverse, disabled, percent, trackRef } = useSliderContext();
 	const composedRef = useComposedRefs(forwardedRef, trackRef);
 	return /* @__PURE__ */ jsx("div", {
 		ref: composedRef,
 		className,
 		"data-disabled": disabled ? "" : void 0,
-		"data-orientation": vertical ? "vertical" : "horizontal",
-		"data-flipped": vertical !== reverse ? "" : void 0,
+		"data-orientation": orientation,
+		"data-flipped": orientation === "vertical" !== reverse ? "" : void 0,
 		style: {
-			"--active": active,
-			"--inactive": inactive,
+			"--active-color": activeColor,
+			"--inactive-color": inactiveColor,
 			"--length": cssLength(length),
 			"--thickness": cssLength(thickness),
 			"--percent": `${percent}%`,
@@ -2426,7 +1873,6 @@ const Track = /* @__PURE__ */ forwardRef(function Track({ length, thickness, act
 });
 //#endregion
 //#region src/components/Slider/index.tsx
-const defaultExternalStyles$1 = { cursor: "pointer" };
 /**
 * The wheel only acts while the focus is inside, so that scrolling a page past
 * the control does not change its value.
@@ -2436,18 +1882,17 @@ const WHEEL_OPTIONS$1 = { requireFocus: true };
 * Customizable slider
 */
 const Slider = {
-	Root: /* @__PURE__ */ forwardRef(({ value, min, max, step = 1, scale = 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__ */ forwardRef(({ value, min, max, step = 1, scale = linearScale, orientation = "horizontal", reverse = false, dragCursor = "pointer", wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, disabled = false, readOnly = false, onChange, onChangeStart, onChangeEnd, changeEndDelay, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown, actionsRef, ...props }, forwardedRef) => {
 		const trackRef = useRef(null);
 		const thumbRef = useRef(null);
-		const externalStyles = {
-			...defaultExternalStyles$1,
-			..._externalStyles
-		};
-		const inactive = disabled || readonly;
-		const p = toFixed(scale.normalize(value, min, max) * 100);
-		const rev = toFixed(100 - p);
+		const inactive = disabled || readOnly;
+		const vertical = orientation === "vertical";
 		const displayReversed = vertical !== reverse;
-		const percent = displayReversed ? rev : p;
+		const percent = valuePercent(value, {
+			min,
+			max,
+			scale
+		}, displayReversed);
 		const axis = useMemo(() => ({
 			min,
 			max,
@@ -2467,72 +1912,70 @@ const Slider = {
 			keyboard,
 			wheel
 		});
+		const gesture = useChangeGesture(value, {
+			onChangeStart,
+			onChangeEnd,
+			changeEndDelay
+		}, inactive);
+		const change = useCallback((next) => {
+			gesture.changed(next);
+			onChange?.(next);
+		}, [gesture, onChange]);
 		const handleKeyDown = useCallback((event) => {
-			const key = event.key;
-			if (![
-				"ArrowRight",
-				"ArrowLeft",
-				"ArrowUp",
-				"ArrowDown"
-			].includes(key)) return;
+			const direction = 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(applyDelta(value, direction, keyboard, axis, event));
+			gesture.pulse("keyboard");
+			change(applyDelta(value, reverse ? -direction : direction, keyboard, axis, event));
 		}, [
 			keyboard,
 			onChange,
 			inactive,
 			reverse,
 			value,
-			axis
+			axis,
+			gesture,
+			change
 		]);
 		const valueOf = (v) => v[vertical ? 1 : 0];
 		const { refCallback: dragRefCallback } = useDragValue({
 			axis,
 			baseElementRef: trackRef,
-			cursor: inactive ? void 0 : externalStyles.cursor,
+			cursor: inactive ? void 0 : dragCursor,
 			shouldStart: () => !inactive,
 			sensitivity: (state) => selectModifier(dragSensitivity, state.event).value,
 			updateOnPointerDown: true,
 			onChange: (v) => {
 				if (inactive) return;
-				onChange?.(valueOf(v));
+				change(valueOf(v));
 			},
-			onDragStart: (v) => {
+			onDragStart: () => {
 				if (inactive) return;
+				gesture.hold("pointer");
 				thumbRef.current?.focus();
-				onDragStart?.(valueOf(v));
 			},
-			onDragEnd: (v) => {
-				if (inactive) return;
-				onDragEnd?.(valueOf(v));
-			}
+			onDragEnd: () => gesture.end()
 		});
 		const wheelRefCallback = useWheel((event) => {
 			if (!wheel || !onChange || inactive) return;
+			const direction = 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(applyDelta(value, direction, wheel, axis, event));
+			gesture.pulse("wheel");
+			change(applyDelta(value, reverse ? -direction : direction, wheel, axis, event));
 		}, WHEEL_OPTIONS$1);
-		const rootRefCallback = useComposedRefs(dragRefCallback, wheelRefCallback);
+		const rootRefCallback = useComposedRefs(forwardedRef, dragRefCallback, wheelRefCallback);
 		const context = useMemo(() => ({
 			value,
 			min,
 			max,
 			step,
 			scale,
-			vertical,
+			orientation,
 			reverse,
 			disabled,
-			readonly,
+			readOnly,
 			onChange,
 			percent,
 			trackRef,
@@ -2543,14 +1986,14 @@ const Slider = {
 			max,
 			step,
 			scale,
-			vertical,
+			orientation,
 			reverse,
 			disabled,
-			readonly,
+			readOnly,
 			onChange,
 			percent
 		]);
-		useImperativeHandle(forwardedRef, () => {
+		useImperativeHandle(actionsRef, () => {
 			return {
 				focus() {
 					if (!disabled) thumbRef.current?.focus();
@@ -2567,9 +2010,9 @@ const Slider = {
 				ref: rootRefCallback,
 				role: "group",
 				tabIndex: -1,
-				"data-orientation": vertical ? "vertical" : "horizontal",
+				"data-orientation": orientation,
 				"data-disabled": disabled ? "" : void 0,
-				"data-readonly": readonly ? "" : void 0,
+				"data-readonly": readOnly ? "" : void 0,
 				style,
 				onPointerDown,
 				onKeyDown: (event) => {
@@ -2605,16 +2048,13 @@ function useXYPadContext(selector) {
 }
 //#endregion
 //#region src/components/XYPad/Area.tsx
-const Area = /* @__PURE__ */ forwardRef(function Area({ width, height, color, children, className, style, ...props }, forwardedRef) {
+const Area = /* @__PURE__ */ forwardRef(function Area({ children, className, style, ...props }, forwardedRef) {
 	const { areaRef } = useXYPadContext();
 	const composedRef = useComposedRefs(forwardedRef, areaRef);
 	return /* @__PURE__ */ jsx("div", {
 		ref: composedRef,
 		className,
 		style: {
-			"--color": color,
-			"--width": cssLength(width),
-			"--height": cssLength(height),
 			position: "relative",
 			...style
 		},
@@ -2627,10 +2067,10 @@ const Area = /* @__PURE__ */ forwardRef(function Area({ width, height, color, ch
 });
 //#endregion
 //#region src/components/XYPad/Thumb.tsx
-const Thumb = /* @__PURE__ */ forwardRef(function Thumb({ color, children, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, ...props }, forwardedRef) {
+const Thumb = /* @__PURE__ */ forwardRef(function Thumb({ color, children, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, actionsRef, ...props }, forwardedRef) {
 	const xInputRef = useRef(null);
 	const yInputRef = useRef(null);
-	const { value, min, max, step, disabled, readonly, onChange, percent, thumbRef } = useXYPadContext();
+	const { value, min, max, step, disabled, readOnly, onChange, percent, thumbRef } = useXYPadContext();
 	useCheckPlacement("XYPad.Thumb", "XYPad.Area");
 	const labels = toXY(ariaLabel);
 	const labelledby = toXY(ariaLabelledby);
@@ -2645,12 +2085,13 @@ const Thumb = /* @__PURE__ */ forwardRef(function Thumb({ color, children, class
 			yInputRef.current?.blur();
 		}
 	});
-	useImperativeHandle(forwardedRef, methods, [disabled]);
+	useImperativeHandle(actionsRef, methods, [disabled]);
 	useImperativeHandle(thumbRef, methods, [disabled]);
 	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardedRef,
 		className,
 		"data-disabled": disabled ? "" : void 0,
-		"data-readonly": readonly ? "" : void 0,
+		"data-readonly": readOnly ? "" : void 0,
 		...props,
 		style: {
 			"--color": color,
@@ -2669,14 +2110,14 @@ const Thumb = /* @__PURE__ */ forwardRef(function Thumb({ color, children, class
 			max: max[axis],
 			step: step[axis],
 			disabled,
-			"aria-readonly": readonly,
+			"aria-readonly": readOnly,
 			"aria-orientation": axis === 0 ? "horizontal" : "vertical",
 			"aria-label": labels[axis] ?? (axis === 0 ? "x" : "y"),
 			"aria-labelledby": labelledby[axis],
 			"aria-describedby": describedby[axis],
 			"aria-valuetext": valueText[axis],
 			onChange: (event) => {
-				if (readonly) {
+				if (readOnly) {
 					event.currentTarget.value = String(value[axis]);
 					return;
 				}
@@ -2689,7 +2130,6 @@ const Thumb = /* @__PURE__ */ forwardRef(function Thumb({ color, children, class
 });
 //#endregion
 //#region src/components/XYPad/index.tsx
-const defaultExternalStyles = { cursor: "pointer" };
 /**
 * The wheel only acts while the focus is inside, so that scrolling a page past
 * the control does not change its value.
@@ -2699,24 +2139,30 @@ const WHEEL_OPTIONS = { requireFocus: true };
 * Simple XYPad
 */
 const XYPad = {
-	Root: /* @__PURE__ */ forwardRef(({ value, min: _min, max: _max, step: _step = 1, scale: _scale = 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__ */ forwardRef(({ value, min: _min, max: _max, step: _step = 1, scale: _scale = linearScale, reverse: _reverse = false, wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, className, style, dragCursor = "pointer", disabled = false, readOnly = false, onChange, onChangeStart, onChangeEnd, changeEndDelay, onPointerDown, onKeyDown, onFocus, onBlur, children, actionsRef, ...props }, forwardedRef) => {
 		const rootRef = useRef(null);
 		const areaRef = useRef(null);
 		const thumbRef = useRef(null);
-		const externalStyles = {
-			...defaultExternalStyles,
-			..._externalStyles
-		};
-		const inactive = disabled || readonly;
+		const inactive = disabled || readOnly;
+		const gesture = useChangeGesture(value, {
+			onChangeStart,
+			onChangeEnd,
+			changeEndDelay
+		}, inactive);
+		const change = useCallback((next) => {
+			gesture.changed(next);
+			onChange?.(next);
+		}, [gesture, onChange]);
 		const min = useMemo(() => toXY(_min), [_min]);
 		const max = useMemo(() => toXY(_max), [_max]);
 		const step = useMemo(() => toXY(_step), [_step]);
 		const scale = useMemo(() => toXY(_scale), [_scale]);
 		const reverse = useMemo(() => toXY(_reverse), [_reverse]);
-		const percent = useMemo(() => {
-			const normalized = [0, 1].map((i) => scale[i].normalize(value[i], min[i], max[i]));
-			return [0, 1].map((i) => toFixed((reverse[i] ? 1 - normalized[i] : normalized[i]) * 100));
-		}, [
+		const percent = useMemo(() => [0, 1].map((i) => valuePercent(value[i], {
+			min: min[i],
+			max: max[i],
+			scale: scale[i]
+		}, reverse[i])), [
 			value,
 			min,
 			max,
@@ -2758,61 +2204,50 @@ const XYPad = {
 			withAxis
 		]);
 		const handleKeyDown = useCallback((event) => {
-			const key = event.key;
-			if (![
-				"ArrowRight",
-				"ArrowLeft",
-				"ArrowUp",
-				"ArrowDown"
-			].includes(key)) return;
-			const i = key === "ArrowRight" || key === "ArrowLeft" ? 0 : 1;
+			const move = 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;
+			gesture.pulse("keyboard");
+			change(nudge(i, reverse[i] ? -direction : direction, keyboard, event));
 		}, [
 			onChange,
 			inactive,
 			keyboard,
 			reverse,
-			nudge
+			nudge,
+			gesture,
+			change
 		]);
 		const { refCallback: dragRefCallback } = useDragValue({
 			axis,
 			baseElementRef: areaRef,
 			sensitivity: (state) => selectModifier(dragSensitivity, state.event).value,
 			updateOnPointerDown: true,
-			cursor: inactive ? void 0 : externalStyles.cursor,
+			cursor: inactive ? void 0 : dragCursor,
 			shouldStart: () => !inactive,
 			onChange: (v) => {
 				if (inactive) return;
-				onChange?.(v);
+				change(v);
 			},
-			onDragStart: (v) => {
+			onDragStart: () => {
 				if (inactive) return;
+				gesture.hold("pointer");
 				thumbRef.current?.focus();
-				onDragStart?.(v);
 			},
-			onDragEnd: (v) => {
-				if (inactive) return;
-				onDragEnd?.(v);
-			}
+			onDragEnd: () => gesture.end()
 		});
 		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 = 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;
+			gesture.pulse("wheel");
+			change(nudge(i, reverse[i] ? -direction : direction, wheel, event));
 		}, WHEEL_OPTIONS);
-		const rootRefCallback = useComposedRefs(rootRef, dragRefCallback, wheelRefCallback);
+		const rootRefCallback = useComposedRefs(forwardedRef, rootRef, dragRefCallback, wheelRefCallback);
 		const context = useMemo(() => ({
 			value,
 			min,
@@ -2821,7 +2256,7 @@ const XYPad = {
 			scale,
 			reverse,
 			disabled,
-			readonly,
+			readOnly,
 			onChange,
 			percent,
 			areaRef,
@@ -2834,19 +2269,18 @@ const XYPad = {
 			scale,
 			reverse,
 			disabled,
-			readonly,
+			readOnly,
 			onChange,
 			percent
 		]);
-		useImperativeHandle(forwardedRef, () => {
+		useImperativeHandle(actionsRef, () => {
 			return {
 				focus() {
 					if (!disabled) thumbRef.current?.focus();
 				},
 				blur() {
 					thumbRef.current?.blur();
-				},
-				original: rootRef
+				}
 			};
 		}, [disabled]);
 		return /* @__PURE__ */ jsx(XYPadProvider, {
@@ -2857,7 +2291,7 @@ const XYPad = {
 				role: "group",
 				tabIndex: -1,
 				"data-disabled": disabled ? "" : void 0,
-				"data-readonly": readonly ? "" : void 0,
+				"data-readonly": readOnly ? "" : void 0,
 				style,
 				onPointerDown,
 				onKeyDown: (event) => {
@@ -2882,17 +2316,103 @@ const XYPad = {
 };
 //#endregion
 //#region src/hooks/useAnimationFrame.ts
-function useAnimationFrame(callback = () => {}, deps = []) {
-	const reqIdRef = useRef(-1);
+/**
+* Call `callback` on every animation frame for as long as the component is
+* mounted.
+*
+* The callback is read on every frame, so it can be written inline and see
+* the latest render without restarting the loop.
+*
+* @param callback receives the frame's timestamp and the milliseconds since
+* the previous frame, which is `0` on the first one
+*/
+function useAnimationFrame(callback, { disabled = false } = {}) {
 	const runCallback = useCallbackRef(callback);
 	useEffect(() => {
-		const loop = () => {
-			reqIdRef.current = requestAnimationFrame(loop);
-			runCallback();
+		if (disabled) return;
+		let frameId = 0;
+		let previous;
+		const loop = (timestamp) => {
+			frameId = requestAnimationFrame(loop);
+			runCallback(timestamp, previous === void 0 ? 0 : timestamp - previous);
+			previous = timestamp;
 		};
-		reqIdRef.current = requestAnimationFrame(loop);
-		return () => cancelAnimationFrame(reqIdRef.current);
-	}, [runCallback, ...deps]);
+		frameId = requestAnimationFrame(loop);
+		return () => cancelAnimationFrame(frameId);
+	}, [runCallback, disabled]);
+}
+//#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] = useState(null);
+	useEffect(() => {
+		if (!node) return;
+		const instance = 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 registrationRef = useRef(null);
+	const { capture = false, once, passive } = typeof options === "boolean" ? { capture: options } : options ?? {};
+	useEffect(() => {
+		const node = typeof target === "function" ? target() : target;
+		const current = registrationRef.current;
+		if (current && current.node === node && current.event === event && current.capture === capture && current.once === once && current.passive === passive) return;
+		current?.remove();
+		registrationRef.current = null;
+		if (!node) return;
+		const listenerOptions = {
+			capture,
+			once,
+			passive
+		};
+		node.addEventListener(event, listener, listenerOptions);
+		registrationRef.current = {
+			node,
+			event,
+			capture,
+			once,
+			passive,
+			remove: () => node.removeEventListener(event, listener, listenerOptions)
+		};
+	});
+	useEffect(() => () => {
+		registrationRef.current?.remove();
+		registrationRef.current = null;
+	}, []);
+	return useCallback(() => {
+		const current = registrationRef.current;
+		if (!current) return;
+		current.remove();
+		current.remove = () => {};
+	}, []);
 }
 //#endregion
 //#region src/hooks/useMIDIAccess.ts
@@ -3031,6 +2551,6 @@ function useMIDIMessage(midiAccess, onMIDIMessage) {
 	});
 }
 //#endregion
-export { AnimationCanvas, DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, DropZone, FileInput, Knob, NOT_SUPPORTED, NumberInput, PERMISSION_DENIED, PITCH_BEND_CENTER, Piano, PointsEditor, SHORTCUTS, Slider, UNAVAILABLE, XYPad, clampPoint, useAnimationFrame, useDrag, useDragValue, useDropZone, useEventListener, useFileInputContext, useInterval, useKnobContext, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useNumberInputContext, usePointsEditorContext, useSliderContext, useWheel, useXYPadContext };
+export { AnimationCanvas, DropZone, FileInput, Knob, NumberInput, Piano, PointsEditor, Slider, XYPad, useAnimationFrame, useDrag, useDragValue, useDropZone, useEventListener, useFileInputContext, useKnobContext, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useNumberInputContext, usePointsEditorContext, useSliderContext, useWheel, useXYPadContext };
 
 //# sourceMappingURL=index.js.map