@tremolo-ui/react 0.8.0 → 0.9.0

package/dist/index.js

@@ -1,7 +1,8 @@
 import { useComposedRefs } from "./compose-refs.js";
 import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, KNOB_VIEWBOX_SIZE, POINTS_EDITOR_DEFAULT_KEYBOARD, POINTS_EDITOR_DEFAULT_WHEEL, POINT_AXIS, applyDelta, arrowKeyDirection, arrowKeyMove, blackKeyWidth, caretAtDecimalOffset, caretDecimalOffset, checkSteps, clampPoint, commitNumberInputText, createAnimationCanvas, createDrag, createDragValue, createDropZone, createLongPress, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createPointsEditor, createStepperDrag, createWheel, cssLength, elementMapping, fitWhiteKeyWidth, getNoteRangeArray, knobAngles, knobArcPath, knobArcRadius, notePosition, nudgeNumberInput, numberInputBounds, numberInputRanges, numberSpan, parseNumberText, partitionByAccept, pianoWidth, relativeMapping, selectModifier, sliderMarks, toXY, valuePercent, visuallyHiddenStyle, wheelDirection, wheelMove } 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 { 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
 /**
@@ -225,6 +226,57 @@ const FileInput = {
 	})
 };
 //#endregion
+//#region src/hooks/_internal/useChangeGesture.ts
+/**
+* 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.
+*
+* Internal
+* @private
+*/
+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
@@ -339,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,
@@ -462,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);
@@ -473,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: `${(KNOB_VIEWBOX_SIZE - 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%"
@@ -492,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.
@@ -502,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,
@@ -526,18 +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 direction = arrowKeyDirection(event.key);
 			if (direction === null) return;
 			event.preventDefault();
-			onChange(applyDelta(value, direction, keyboard, range, event));
+			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, {
@@ -547,13 +609,17 @@ 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;
@@ -561,9 +627,10 @@ const Knob = {
 			if (direction === null) return;
 			event.preventDefault();
 			if (!onChange) return;
-			onChange(applyDelta(value, direction, wheel, range, event));
+			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,
@@ -587,7 +654,7 @@ const Knob = {
 			startValue,
 			angleRange
 		]);
-		useImperativeHandle(forwardedRef, () => {
+		useImperativeHandle(actionsRef, () => {
 			return {
 				focus() {
 					if (!disabled) elmRef.current?.focus();
@@ -608,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),
@@ -618,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) => {
@@ -644,6 +711,11 @@ 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() {
@@ -688,8 +760,9 @@ 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?.moved()) return;
 		nudge(direction, ["raw", step]);
@@ -701,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,
@@ -760,7 +836,8 @@ function IncrementStepper(props) {
 * (`selectOnFocus`, `unformatOnFocus`, `keepCaretOnStep`, `blurOnEnter`).
 */
 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 { 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(() => {
@@ -800,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,
@@ -831,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: caretDecimalOffset(input.value, input.selectionStart),
 					from: input.value
 				};
+				gesture?.key();
 				nudge(key === "ArrowUp" ? 1 : -1, keyboard, event);
 			}
 			onKeyDown?.(event);
@@ -855,9 +933,9 @@ const InputField = /* @__PURE__ */ forwardRef(function InputField({ className, s
 * 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, disabled, readonly, drag, dragSensitivity, pointerLock, rawRange, changeValue } = useNumberInputContext();
-	const enabled = drag !== null && !disabled && !readonly;
+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({
@@ -868,7 +946,8 @@ const Stepper = /* @__PURE__ */ forwardRef(function Stepper({ className, style,
 		range: rawRange,
 		pixels: drag ?? 1,
 		sensitivity: dragSensitivity,
-		pointerLock
+		pointerLock,
+		cursor: dragCursor
 	};
 	const optionsRef = useRef(options);
 	useEffect(() => {
@@ -892,6 +971,7 @@ const Stepper = /* @__PURE__ */ forwardRef(function Stepper({ className, style,
 			instance.destroy();
 		};
 	}, [node, enabled]);
+	const gesture = useNumberInputGesture();
 	const composedRef = useComposedRefs(forwardedRef, setNode);
 	const context = useMemo(() => ({ moved: () => instanceRef.current?.moved() ?? false }), []);
 	return /* @__PURE__ */ jsx(StepperProvider, {
@@ -900,6 +980,10 @@ const Stepper = /* @__PURE__ */ forwardRef(function Stepper({ className, style,
 			ref: composedRef,
 			className,
 			style,
+			onPointerDown: (event) => {
+				if (enabled) gesture?.press();
+				onPointerDown?.(event);
+			},
 			...props,
 			children
 		})
@@ -912,14 +996,19 @@ const defaultFormat = (value) => String(value);
 * 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 ?? parseNumberText;
 		const { normalized: range, raw: rawRange } = useMemo(() => numberInputRanges({
@@ -969,20 +1058,30 @@ const NumberInput = {
 			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;
@@ -991,8 +1090,13 @@ const NumberInput = {
 				max,
 				clampValue
 			});
-			if (committed === null) setDraft(null);
-			else changeValue(committed);
+			if (committed === null) {
+				setDraft(null);
+				return;
+			}
+			if (committed !== value) gesture.pulse("keyboard");
+			changeValue(committed);
+			gesture.end();
 		}, [
 			draft,
 			inactive,
@@ -1000,7 +1104,9 @@ const NumberInput = {
 			clampValue,
 			min,
 			max,
-			changeValue
+			changeValue,
+			value,
+			gesture
 		]);
 		const nudge = useCallback((direction, option, modifiers) => {
 			changeValue(nudgeNumberInput(value, direction, option, ranges, modifiers));
@@ -1013,6 +1119,7 @@ const NumberInput = {
 			const direction = wheelDirection(event);
 			if (!wheel || inactive || direction === null) return;
 			event.preventDefault();
+			gesture.pulse("wheel");
 			nudge(direction, wheel, event);
 		}, { requireFocus: true });
 		const context = useMemo(() => ({
@@ -1022,7 +1129,7 @@ const NumberInput = {
 			step,
 			scale,
 			disabled,
-			readonly,
+			readOnly,
 			clampValue,
 			range,
 			rawRange,
@@ -1032,6 +1139,7 @@ const NumberInput = {
 			outOfRange,
 			dragSensitivity,
 			pointerLock,
+			dragCursor,
 			selectOnFocus,
 			unformatOnFocus,
 			keepCaretOnStep,
@@ -1053,7 +1161,7 @@ const NumberInput = {
 			step,
 			scale,
 			disabled,
-			readonly,
+			readOnly,
 			clampValue,
 			range,
 			rawRange,
@@ -1066,6 +1174,7 @@ const NumberInput = {
 			drag,
 			dragSensitivity,
 			pointerLock,
+			dragCursor,
 			selectOnFocus,
 			unformatOnFocus,
 			keepCaretOnStep,
@@ -1077,7 +1186,8 @@ const NumberInput = {
 			changeValue,
 			nudge
 		]);
-		useImperativeHandle(forwardedRef, () => {
+		const rootRefCallback = useComposedRefs(forwardedRef, wheelRefCallback);
+		useImperativeHandle(actionsRef, () => {
 			return {
 				focus() {
 					if (!disabled) inputRef.current?.focus();
@@ -1087,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
+				})
 			})
 		});
 	}),
@@ -1108,7 +1241,7 @@ const NumberInput = {
 /**
 * 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, 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. */
@@ -1200,7 +1333,8 @@ const Piano = { Root: /* @__PURE__ */ forwardRef(function Root({ noteRange, glis
 		keyGap,
 		blackKeyWidthRatio
 	]);
-	useImperativeHandle(forwardedRef, () => ({
+	const rootRefCallback = useComposedRefs(forwardedRef, setNode);
+	useImperativeHandle(actionsRef, () => ({
 		playNote: (note, velocity) => instanceRef.current?.noteOn(note, {
 			source: "api",
 			velocity
@@ -1208,7 +1342,7 @@ 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",
@@ -1339,17 +1473,27 @@ const VisuallyHiddenRangeInput = /* @__PURE__ */ forwardRef((props, ref) => /* @
 function perAxis(value, axis) {
 	return typeof value === "string" ? value : value?.[axis];
 }
-function Point({ value, children, id: idProp, min, max, color, disabled: _disabled, readonly: _readonly, wheel: _wheel, keyboard: _keyboard, "aria-label": ariaLabel, "aria-valuetext": ariaValuetext, onChange, onDragStart, onDragEnd, className, style, onPointerDown, onKeyDown, onFocus, ...props }) {
-	const { containerRef, externalStyles, disabled: rootDisabled, readonly: rootReadonly, wheel: rootWheel, keyboard: rootKeyboard, dragSensitivity, selection, editor } = usePointsEditorContext();
+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);
@@ -1358,9 +1502,10 @@ function Point({ value, children, id: idProp, min, max, color, disabled: _disabl
 		min,
 		max,
 		readonly: inactive,
-		onChange,
+		onChange: onChange ? handleChange : void 0,
 		element,
-		wheel
+		wheel,
+		beforeWheel: () => gesture.pulse("wheel")
 	});
 	useEffect(() => {
 		registration.current = {
@@ -1368,9 +1513,10 @@ function Point({ value, children, id: idProp, min, max, color, disabled: _disabl
 			min,
 			max,
 			readonly: inactive,
-			onChange,
+			onChange: onChange ? handleChange : void 0,
 			element,
-			wheel
+			wheel,
+			beforeWheel: () => gesture.pulse("wheel")
 		};
 	});
 	useEffect(() => editor.registerPoint(id, () => registration.current), [id, editor]);
@@ -1380,7 +1526,7 @@ function Point({ value, children, id: idProp, min, max, color, disabled: _disabl
 		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;
@@ -1397,13 +1543,11 @@ function Point({ value, children, id: idProp, min, max, color, disabled: _disabl
 				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 refCallback = useComposedRefs(dragRefCallback, setElement);
@@ -1412,14 +1556,14 @@ function Point({ value, children, id: idProp, min, max, color, disabled: _disabl
 		if (!move) return;
 		event.preventDefault();
 		if (!onChange || inactive || !keyboard) return;
+		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,
@@ -1449,12 +1593,12 @@ function Point({ value, children, id: idProp, min, max, color, disabled: _disabl
 			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;
 				}
@@ -1503,9 +1647,8 @@ const EMPTY = [];
 * Multiple Point Controller
 */
 const PointsEditor = {
-	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, 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;
@@ -1524,11 +1667,11 @@ const PointsEditor = {
 		useEffect(() => () => editor.destroy(), [editor]);
 		const context = useMemo(() => ({
 			disabled,
-			readonly,
+			readOnly,
 			wheel,
 			keyboard,
 			dragSensitivity,
-			externalStyles: { cursor },
+			dragCursor,
 			containerRef,
 			selectable,
 			selection,
@@ -1536,11 +1679,11 @@ const PointsEditor = {
 			selectionBox
 		}), [
 			disabled,
-			readonly,
+			readOnly,
 			wheel,
 			keyboard,
 			dragSensitivity,
-			cursor,
+			dragCursor,
 			selectable,
 			selection,
 			editor,
@@ -1552,7 +1695,7 @@ const PointsEditor = {
 				ref: forwardedRef,
 				className,
 				"data-disabled": disabled ? "" : void 0,
-				"data-readonly": readonly ? "" : void 0,
+				"data-readonly": readOnly ? "" : void 0,
 				style: {
 					position: "relative",
 					...style
@@ -1583,7 +1726,7 @@ function MarksOption({ value, mark = true, label, thickness, length, gap, classe
 	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 percent = valuePercent(value, {
 		min,
@@ -1622,7 +1765,7 @@ 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 ? sliderMarks(options, min, max, step) : [];
 	if (vertical !== reverse) optionsList.reverse();
@@ -1649,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() {
@@ -1661,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,
@@ -1674,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,
@@ -1684,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;
 				}
@@ -1702,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}%`,
@@ -1729,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.
@@ -1739,14 +1882,11 @@ 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 inactive = disabled || readOnly;
+		const vertical = orientation === "vertical";
 		const displayReversed = vertical !== reverse;
 		const percent = valuePercent(value, {
 			min,
@@ -1772,60 +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 direction = arrowKeyDirection(event.key);
 			if (direction === null) return;
 			event.preventDefault();
 			if (!keyboard || !onChange || inactive) return;
-			onChange(applyDelta(value, reverse ? -direction : 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();
-			onChange(applyDelta(value, reverse ? -direction : 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,
@@ -1836,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();
@@ -1860,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) => {
@@ -1917,10 +2067,10 @@ const Area = /* @__PURE__ */ forwardRef(function Area({ children, className, sty
 });
 //#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);
@@ -1935,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,
@@ -1959,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;
 				}
@@ -1979,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.
@@ -1989,15 +2139,20 @@ 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]);
@@ -2054,34 +2209,34 @@ const XYPad = {
 			event.preventDefault();
 			if (!onChange || inactive || !keyboard) return;
 			const { axis: i, direction } = move;
-			onChange(nudge(i, reverse[i] ? -direction : direction, keyboard, event));
+			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;
@@ -2089,9 +2244,10 @@ const XYPad = {
 			if (!move) return;
 			event.preventDefault();
 			const { axis: i, direction } = move;
-			onChange(nudge(i, reverse[i] ? -direction : direction, wheel, event));
+			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,
@@ -2100,7 +2256,7 @@ const XYPad = {
 			scale,
 			reverse,
 			disabled,
-			readonly,
+			readOnly,
 			onChange,
 			percent,
 			areaRef,
@@ -2113,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, {
@@ -2136,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) => {
@@ -2161,17 +2316,30 @@ 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
@@ -2211,43 +2379,40 @@ function useDrag({ threshold = 1, cursor, pointerLock, onDrag, onDragStart, onDr
 //#region src/hooks/useEventListener.ts
 function useEventListener(target, event, handler, options) {
 	const listener = useCallbackRef(handler);
-	const cleanupRef = useRef(() => {});
+	const registrationRef = useRef(null);
+	const { capture = false, once, passive } = typeof options === "boolean" ? { capture: options } : options ?? {};
 	useEffect(() => {
-		const node = typeof target === "function" ? target() : target ?? document;
+		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;
-		node.addEventListener(event, listener, options);
-		const cleanup = () => {
-			node.removeEventListener(event, listener, options);
-		};
-		cleanupRef.current = cleanup;
-		return () => {
-			cleanup();
-			if (cleanupRef.current === cleanup) cleanupRef.current = () => {};
+		const listenerOptions = {
+			capture,
+			once,
+			passive
 		};
-	}, [
-		event,
-		target,
-		options,
-		listener
-	]);
-	return useCallback(() => cleanupRef.current(), []);
-}
-//#endregion
-//#region src/hooks/useInterval.ts
-function useInterval(callback, delay) {
-	const savedCallback = useRef(callback);
-	useEffect(() => {
-		savedCallback.current = callback;
-	}, [callback]);
-	useEffect(() => {
-		if (delay === null) return;
-		const id = setInterval(() => {
-			savedCallback.current();
-		}, delay);
-		return () => {
-			clearInterval(id);
+		node.addEventListener(event, listener, listenerOptions);
+		registrationRef.current = {
+			node,
+			event,
+			capture,
+			once,
+			passive,
+			remove: () => node.removeEventListener(event, listener, listenerOptions)
 		};
-	}, [delay]);
+	});
+	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
@@ -2386,6 +2551,6 @@ function useMIDIMessage(midiAccess, onMIDIMessage) {
 	});
 }
 //#endregion
-export { AnimationCanvas, DropZone, FileInput, Knob, NumberInput, Piano, PointsEditor, Slider, XYPad, 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