@tremolo-ui/react 0.8.0 → 0.9.0

package/dist/index.cjs

@@ -26,6 +26,7 @@ let react = require("react");
 react = __toESM(react, 1);
 let _tremolo_ui_dom = require("@tremolo-ui/dom");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _tremolo_ui_dom_internal = require("@tremolo-ui/dom/internal");
 let _tremolo_ui_functions = require("@tremolo-ui/functions");
 //#region src/components/AnimationCanvas/index.tsx
 /**
@@ -231,7 +232,7 @@ const FileInput = {
 			disabled
 		}), [inputId, disabled]);
 		function handleChange(event) {
-			const { accepted, rejected } = (0, _tremolo_ui_dom.partitionByAccept)(Array.from(event.target.files ?? []), accept);
+			const { accepted, rejected } = (0, _tremolo_ui_dom_internal.partitionByAccept)(Array.from(event.target.files ?? []), accept);
 			event.target.value = "";
 			if (accepted.length > 0) onChange?.(accepted);
 			if (rejected.length > 0) onReject?.(rejected);
@@ -248,7 +249,7 @@ const FileInput = {
 					accept,
 					multiple,
 					disabled,
-					style: _tremolo_ui_dom.visuallyHiddenStyle,
+					style: _tremolo_ui_dom_internal.visuallyHiddenStyle,
 					"aria-label": ariaLabel,
 					"aria-labelledby": ariaLabelledby,
 					"aria-describedby": ariaDescribedby,
@@ -260,6 +261,57 @@ const FileInput = {
 	Trigger
 };
 //#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] = (0, react.useState)(() => (0, _tremolo_ui_dom.createChangeGesture)());
+	const latest = (0, react.useRef)({
+		value,
+		onChangeStart,
+		onChangeEnd
+	});
+	const lastValue = (0, react.useRef)(value);
+	(0, react.useInsertionEffect)(() => {
+		latest.current = {
+			value,
+			onChangeStart,
+			onChangeEnd
+		};
+	});
+	(0, react.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]);
+	(0, react.useEffect)(() => {
+		if (inactive) instance.end();
+	}, [instance, inactive]);
+	(0, react.useEffect)(() => () => instance.end(), [instance]);
+	const changed = (0, react.useCallback)((next) => {
+		lastValue.current = next;
+	}, []);
+	return (0, react.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
@@ -273,7 +325,7 @@ function useCheckSteps(options) {
 	(0, react.useEffect)(() => {
 		try {
 			if (process.env.NODE_ENV === "production") return;
-			for (const warning of (0, _tremolo_ui_dom.checkSteps)(options)) console.warn(warning);
+			for (const warning of (0, _tremolo_ui_dom_internal.checkSteps)(options)) console.warn(warning);
 		} catch {}
 	}, [
 		component,
@@ -374,7 +426,10 @@ function useWheel(onWheel, { requireFocus = false, target } = {}) {
 	(0, react.useEffect)(() => {
 		const element = target ? target.current : node;
 		if (!element) return;
-		const instance = (0, _tremolo_ui_dom.createWheel)(element, (event) => wheelHandler(event), { requireFocus });
+		const instance = (0, _tremolo_ui_dom.createWheel)(element, {
+			onWheel: (event) => wheelHandler(event),
+			requireFocus
+		});
 		return () => instance.destroy();
 	}, [
 		node,
@@ -497,7 +552,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);
@@ -508,16 +563,16 @@ function Thumb$2({ className, thumb = "currentColor", thumbLine = "currentColor"
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
 			cx: "50%",
 			cy: "50%",
-			r: `${thumbSize / 2}%`,
-			fill: thumb
+			r: `${size / 2}%`,
+			fill: color
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			className: classes?.thumbLine,
+			className: classes?.line,
 			x1: "50%",
-			y1: `${(_tremolo_ui_dom.KNOB_VIEWBOX_SIZE - (0, _tremolo_ui_functions.clamp)(thumbSize, 0, 100)) / 2}%`,
+			y1: `${(_tremolo_ui_dom.KNOB_VIEWBOX_SIZE - (0, _tremolo_ui_functions.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%"
@@ -527,7 +582,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.
@@ -537,13 +591,9 @@ const WHEEL_OPTIONS$2 = { requireFocus: true };
 * Interactive rotary knob component implemented in SVG.
 */
 const Knob = {
-	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, defaultValue = min, startValue = min, size, externalStyles: _externalStyles, wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, pointerLock = false, enableDoubleClickDefault = true, disabled = false, readonly = false, angleRange = 270, onChange, onKeyDown, onPointerDown, onDoubleClick, className, style, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, resetValue, startValue = min, size, dragCursor = "grabbing", wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = _tremolo_ui_dom.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 = (0, react.useRef)(null);
-		const externalStyles = {
-			...defaultExternalStyles$2,
-			..._externalStyles
-		};
-		const inactive = disabled || readonly;
+		const inactive = disabled || readOnly;
 		const range = (0, react.useMemo)(() => ({
 			min,
 			max,
@@ -561,18 +611,30 @@ const Knob = {
 			keyboard,
 			wheel
 		});
+		const gesture = useChangeGesture(value, {
+			onChangeStart,
+			onChangeEnd,
+			changeEndDelay
+		}, inactive);
+		const change = (0, react.useCallback)((next) => {
+			gesture.changed(next);
+			onChange?.(next);
+		}, [gesture, onChange]);
 		const handleKeyDown = (0, react.useCallback)((event) => {
 			if (!keyboard || !onChange || inactive) return;
-			const direction = (0, _tremolo_ui_dom.arrowKeyDirection)(event.key);
+			const direction = (0, _tremolo_ui_dom_internal.arrowKeyDirection)(event.key);
 			if (direction === null) return;
 			event.preventDefault();
-			onChange((0, _tremolo_ui_dom.applyDelta)(value, direction, keyboard, range, event));
+			gesture.pulse("keyboard");
+			change((0, _tremolo_ui_dom_internal.applyDelta)(value, direction, keyboard, range, event));
 		}, [
 			keyboard,
 			onChange,
 			inactive,
 			value,
-			range
+			range,
+			gesture,
+			change
 		]);
 		const { refCallback: dragRefCallback, dragging } = useDragValue({
 			axis: (0, react.useMemo)(() => [range, {
@@ -580,25 +642,30 @@ const Knob = {
 				reverse: true
 			}], [range]),
 			getValue: () => [value, value],
-			sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
+			sensitivity: (state) => (0, _tremolo_ui_dom_internal.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 = (0, _tremolo_ui_dom.wheelDirection)(event);
+			const direction = (0, _tremolo_ui_dom_internal.wheelDirection)(event);
 			if (direction === null) return;
 			event.preventDefault();
 			if (!onChange) return;
-			onChange((0, _tremolo_ui_dom.applyDelta)(value, direction, wheel, range, event));
+			gesture.pulse("wheel");
+			change((0, _tremolo_ui_dom_internal.applyDelta)(value, direction, wheel, range, event));
 		}, WHEEL_OPTIONS$2);
-		const rootRefCallback = require_compose_refs.useComposedRefs(elmRef, dragRefCallback, wheelRefCallback);
+		const rootRefCallback = require_compose_refs.useComposedRefs(forwardedRef, elmRef, dragRefCallback, wheelRefCallback);
 		const context = (0, react.useMemo)(() => {
 			const config = {
 				value,
@@ -622,7 +689,7 @@ const Knob = {
 			startValue,
 			angleRange
 		]);
-		(0, react.useImperativeHandle)(forwardedRef, () => {
+		(0, react.useImperativeHandle)(actionsRef, () => {
 			return {
 				focus() {
 					if (!disabled) elmRef.current?.focus();
@@ -643,17 +710,17 @@ 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": (0, _tremolo_ui_dom.cssLength)(size),
+					"--knob-size": (0, _tremolo_ui_dom_internal.cssLength)(size),
 					...style
 				},
 				onPointerDown,
 				onDoubleClick: (event) => {
-					if (!inactive && enableDoubleClickDefault && onChange) onChange(defaultValue);
+					if (!inactive && resetValue !== null && onChange) gesture.instant("doubleClick", () => change(resetValue ?? startValue));
 					onDoubleClick?.(event);
 				},
 				onKeyDown: (event) => {
@@ -679,6 +746,11 @@ function useNumberInputContext(selector) {
 	if (!context) throw new Error("Missing NumberInputContext.Provider in the tree");
 	return selector ? selector(context) : context;
 }
+const NumberInputGestureContext = /* @__PURE__ */ (0, react.createContext)(null);
+const NumberInputGestureProvider = NumberInputGestureContext.Provider;
+function useNumberInputGesture() {
+	return (0, react.useContext)(NumberInputGestureContext);
+}
 const StepperContext = /* @__PURE__ */ (0, react.createContext)(null);
 const StepperProvider = StepperContext.Provider;
 function useStepperContext() {
@@ -723,8 +795,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]);
@@ -736,10 +809,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,
@@ -795,7 +871,8 @@ function IncrementStepper(props) {
 * (`selectOnFocus`, `unformatOnFocus`, `keepCaretOnStep`, `blurOnEnter`).
 */
 const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ className, style, onChange, onFocus, onBlur, onKeyDown, ...props }, forwardedRef) {
-	const { value, min, max, step, disabled, readonly, keyboard, selectOnFocus, unformatOnFocus, keepCaretOnStep, blurOnEnter, text, editing, outOfRange, setDraft, commitDraft, nudge, inputRef } = useNumberInputContext();
+	const { 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] = (0, react.useState)(false);
 	const shown = unformatOnFocus && focused && !editing ? String(value) : text;
 	(0, react.useEffect)(() => {
@@ -804,7 +881,7 @@ const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ c
 		if (!input) return;
 		if (selectOnFocus === "all") input.setSelectionRange(0, input.value.length);
 		else {
-			const span = (0, _tremolo_ui_dom.numberSpan)(input.value);
+			const span = (0, _tremolo_ui_dom_internal.numberSpan)(input.value);
 			if (span) input.setSelectionRange(span.start, span.end);
 		}
 	}, [
@@ -823,7 +900,7 @@ const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ c
 		caretAfterStep.current = null;
 		const input = inputRef.current;
 		if (!input || input.value === pending.from) return;
-		const caret = (0, _tremolo_ui_dom.caretAtDecimalOffset)(input.value, pending.offset);
+		const caret = (0, _tremolo_ui_dom_internal.caretAtDecimalOffset)(input.value, pending.offset);
 		input.setSelectionRange(caret, caret);
 	});
 	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, inputRef);
@@ -835,11 +912,11 @@ const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ c
 		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,
@@ -866,13 +943,14 @@ const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ c
 			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: (0, _tremolo_ui_dom.caretDecimalOffset)(input.value, input.selectionStart),
+					offset: (0, _tremolo_ui_dom_internal.caretDecimalOffset)(input.value, input.selectionStart),
 					from: input.value
 				};
+				gesture?.key();
 				nudge(key === "ArrowUp" ? 1 : -1, keyboard, event);
 			}
 			onKeyDown?.(event);
@@ -890,9 +968,9 @@ const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ c
 * The drag lives here rather than on `InputField` because `createDrag` turns
 * off text selection on whatever element it is attached to.
 */
-const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ className, style, children, ...props }, forwardedRef) {
-	const { value, disabled, readonly, drag, dragSensitivity, pointerLock, rawRange, changeValue } = useNumberInputContext();
-	const enabled = drag !== null && !disabled && !readonly;
+const Stepper = /* @__PURE__ */ (0, react.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] = (0, react.useState)(null);
 	const instanceRef = (0, react.useRef)(null);
 	const latest = (0, react.useRef)({
@@ -903,7 +981,8 @@ const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ classNa
 		range: rawRange,
 		pixels: drag ?? 1,
 		sensitivity: dragSensitivity,
-		pointerLock
+		pointerLock,
+		cursor: dragCursor
 	};
 	const optionsRef = (0, react.useRef)(options);
 	(0, react.useEffect)(() => {
@@ -916,7 +995,7 @@ const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ classNa
 	});
 	(0, react.useEffect)(() => {
 		if (!node || !enabled) return;
-		const instance = (0, _tremolo_ui_dom.createStepperDrag)(node, {
+		const instance = (0, _tremolo_ui_dom_internal.createStepperDrag)(node, {
 			...optionsRef.current,
 			getValue: () => latest.current.value,
 			onChange: (next) => latest.current.changeValue(next)
@@ -927,6 +1006,7 @@ const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ classNa
 			instance.destroy();
 		};
 	}, [node, enabled]);
+	const gesture = useNumberInputGesture();
 	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, setNode);
 	const context = (0, react.useMemo)(() => ({ moved: () => instanceRef.current?.moved() ?? false }), []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperProvider, {
@@ -935,6 +1015,10 @@ const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ classNa
 			ref: composedRef,
 			className,
 			style,
+			onPointerDown: (event) => {
+				if (enabled) gesture?.press();
+				onPointerDown?.(event);
+			},
 			...props,
 			children
 		})
@@ -947,17 +1031,22 @@ const defaultFormat = (value) => String(value);
 * Input with some useful functions for entering numerical values.
 */
 const NumberInput = {
-	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, format: formatProp, parse: parseProp, clampValue = true, wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, drag = 1, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, pointerLock = false, selectOnFocus = "none", unformatOnFocus = false, keepCaretOnStep = false, blurOnEnter = true, disabled = false, readonly = false, className, style, onChange, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, format: formatProp, parse: parseProp, clampValue = true, wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, drag = 1, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, pointerLock = false, 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 = (0, react.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] = (0, react.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 ?? _tremolo_ui_dom.parseNumberText;
-		const { normalized: range, raw: rawRange } = (0, react.useMemo)(() => (0, _tremolo_ui_dom.numberInputRanges)({
+		const parse = parseProp ?? _tremolo_ui_dom_internal.parseNumberText;
+		const { normalized: range, raw: rawRange } = (0, react.useMemo)(() => (0, _tremolo_ui_dom_internal.numberInputRanges)({
 			min,
 			max,
 			step,
@@ -993,7 +1082,7 @@ const NumberInput = {
 		});
 		const text = draft ?? format(value);
 		const editing = draft !== null;
-		const bounds = (0, _tremolo_ui_dom.numberInputBounds)(value, {
+		const bounds = (0, _tremolo_ui_dom_internal.numberInputBounds)(value, {
 			min,
 			max,
 			clampValue
@@ -1004,30 +1093,45 @@ 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 = (0, react.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 = (0, react.useCallback)(() => {
 			if (draft === null || inactive) return;
-			const committed = (0, _tremolo_ui_dom.commitNumberInputText)(draft, parse, {
+			const committed = (0, _tremolo_ui_dom_internal.commitNumberInputText)(draft, parse, {
 				min,
 				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,
@@ -1035,19 +1139,22 @@ const NumberInput = {
 			clampValue,
 			min,
 			max,
-			changeValue
+			changeValue,
+			value,
+			gesture
 		]);
 		const nudge = (0, react.useCallback)((direction, option, modifiers) => {
-			changeValue((0, _tremolo_ui_dom.nudgeNumberInput)(value, direction, option, ranges, modifiers));
+			changeValue((0, _tremolo_ui_dom_internal.nudgeNumberInput)(value, direction, option, ranges, modifiers));
 		}, [
 			changeValue,
 			value,
 			ranges
 		]);
 		const wheelRefCallback = useWheel((event) => {
-			const direction = (0, _tremolo_ui_dom.wheelDirection)(event);
+			const direction = (0, _tremolo_ui_dom_internal.wheelDirection)(event);
 			if (!wheel || inactive || direction === null) return;
 			event.preventDefault();
+			gesture.pulse("wheel");
 			nudge(direction, wheel, event);
 		}, { requireFocus: true });
 		const context = (0, react.useMemo)(() => ({
@@ -1057,7 +1164,7 @@ const NumberInput = {
 			step,
 			scale,
 			disabled,
-			readonly,
+			readOnly,
 			clampValue,
 			range,
 			rawRange,
@@ -1067,6 +1174,7 @@ const NumberInput = {
 			outOfRange,
 			dragSensitivity,
 			pointerLock,
+			dragCursor,
 			selectOnFocus,
 			unformatOnFocus,
 			keepCaretOnStep,
@@ -1088,7 +1196,7 @@ const NumberInput = {
 			step,
 			scale,
 			disabled,
-			readonly,
+			readOnly,
 			clampValue,
 			range,
 			rawRange,
@@ -1101,6 +1209,7 @@ const NumberInput = {
 			drag,
 			dragSensitivity,
 			pointerLock,
+			dragCursor,
 			selectOnFocus,
 			unformatOnFocus,
 			keepCaretOnStep,
@@ -1112,7 +1221,8 @@ const NumberInput = {
 			changeValue,
 			nudge
 		]);
-		(0, react.useImperativeHandle)(forwardedRef, () => {
+		const rootRefCallback = require_compose_refs.useComposedRefs(forwardedRef, wheelRefCallback);
+		(0, react.useImperativeHandle)(actionsRef, () => {
 			return {
 				focus() {
 					if (!disabled) inputRef.current?.focus();
@@ -1122,16 +1232,39 @@ const NumberInput = {
 				}
 			};
 		}, [disabled]);
+		const pressed = (0, react.useRef)(false);
+		const gestureContext = (0, react.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__ */ (0, react_jsx_runtime.jsx)(NumberInputProvider, {
 			value: context,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref: wheelRefCallback,
-				className,
-				"data-disabled": disabled ? "" : void 0,
-				"data-readonly": readonly ? "" : void 0,
-				style,
-				...props,
-				children
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputGestureProvider, {
+				value: gestureContext,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: rootRefCallback,
+					className,
+					"data-disabled": disabled ? "" : void 0,
+					"data-readonly": readOnly ? "" : void 0,
+					style,
+					...props,
+					children
+				})
 			})
 		});
 	}),
@@ -1143,12 +1276,12 @@ const NumberInput = {
 /**
 * Customizable piano component.
 */
-const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, keyboardShortcutsScope = "root", resizable = false, whiteKeyWidth = 40, keyGap = 1, blackKeyWidthRatio = .65, blackKeyHeightRatio = .6, style, className, label, keyProps, classes, onPlayNote, onStopNote, ...props }, forwardedRef) {
+const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, keyboardShortcutsScope = "root", resizable = false, whiteKeyWidth = 40, keyGap = 1, blackKeyWidthRatio = .65, blackKeyHeightRatio = .6, style, className, label, keyProps, classes, onPlayNote, onStopNote, actionsRef, ...props }, forwardedRef) {
 	const [node, setNode] = (0, react.useState)(null);
 	const [activeNotes, setActiveNotes] = (0, react.useState)([]);
 	/** Set while `resizable` is on, measured from the parent. */
 	const [resizedKeyWidth, setResizedKeyWidth] = (0, react.useState)(whiteKeyWidth);
-	const notes = (0, react.useMemo)(() => (0, _tremolo_ui_dom.getNoteRangeArray)(noteRange), [noteRange]);
+	const notes = (0, react.useMemo)(() => (0, _tremolo_ui_dom_internal.getNoteRangeArray)(noteRange), [noteRange]);
 	const layout = (0, react.useMemo)(() => ({
 		noteRange,
 		whiteKeyWidth: resizable ? resizedKeyWidth : whiteKeyWidth,
@@ -1216,7 +1349,7 @@ const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ note
 		const parent = node.parentElement;
 		if (!parent) throw new Error("doesn't have a parent element.");
 		const resizeObserver = new ResizeObserver(() => {
-			setResizedKeyWidth((0, _tremolo_ui_dom.fitWhiteKeyWidth)(node.clientWidth, {
+			setResizedKeyWidth((0, _tremolo_ui_dom_internal.fitWhiteKeyWidth)(node.clientWidth, {
 				noteRange: {
 					first,
 					last
@@ -1235,7 +1368,8 @@ const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ note
 		keyGap,
 		blackKeyWidthRatio
 	]);
-	(0, react.useImperativeHandle)(forwardedRef, () => ({
+	const rootRefCallback = require_compose_refs.useComposedRefs(forwardedRef, setNode);
+	(0, react.useImperativeHandle)(actionsRef, () => ({
 		playNote: (note, velocity) => instanceRef.current?.noteOn(note, {
 			source: "api",
 			velocity
@@ -1243,13 +1377,13 @@ const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ note
 		stopNote: (note) => instanceRef.current?.noteOff(note, { source: "api" })
 	}), []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: setNode,
+		ref: rootRefCallback,
 		className,
 		"data-resizable": resizable ? "" : void 0,
 		role: "group",
 		tabIndex: 0,
 		style: {
-			width: resizable ? "100%" : (0, _tremolo_ui_dom.pianoWidth)(layout),
+			width: resizable ? "100%" : (0, _tremolo_ui_dom_internal.pianoWidth)(layout),
 			position: "relative",
 			...style
 		},
@@ -1276,7 +1410,7 @@ const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ note
 					zIndex: keyType === "white" ? 1 : 2,
 					...keyStyle,
 					left: (0, _tremolo_ui_dom.notePosition)(note, layout),
-					width: keyType === "white" ? layout.whiteKeyWidth : (0, _tremolo_ui_dom.blackKeyWidth)(layout),
+					width: keyType === "white" ? layout.whiteKeyWidth : (0, _tremolo_ui_dom_internal.blackKeyWidth)(layout),
 					height: keyType === "white" ? "100%" : `${blackKeyHeightRatio * 100}%`
 				},
 				children: content !== "" && content !== null && content !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1319,7 +1453,7 @@ function usePointsEditorContext(selector) {
 const Container = /* @__PURE__ */ (0, react.forwardRef)(function Container({ children, className, style, ...props }, forwardedRef) {
 	const { containerRef, disabled, selectable, editor } = usePointsEditorContext();
 	const { refCallback: dragRefCallback } = useDragValue({
-		axis: _tremolo_ui_dom.POINT_AXIS,
+		axis: _tremolo_ui_dom_internal.POINT_AXIS,
 		baseElementRef: containerRef,
 		shouldStart: (event) => !disabled && !editor.isPointElement(event.target),
 		onDragStart: ([x, y], state) => {
@@ -1335,7 +1469,7 @@ const Container = /* @__PURE__ */ (0, react.forwardRef)(function Container({ chi
 		onDragEnd: () => editor.endSelectionBox()
 	});
 	useWheel((event) => {
-		const move = (0, _tremolo_ui_dom.wheelMove)(event);
+		const move = (0, _tremolo_ui_dom_internal.wheelMove)(event);
 		if (!move) return;
 		const axis = move.axis === 0 ? "x" : "y";
 		if (editor.nudgeFocusedPoint(axis, move.direction, event)) event.preventDefault();
@@ -1363,7 +1497,7 @@ const VisuallyHiddenRangeInput = /* @__PURE__ */ (0, react.forwardRef)((props, r
 	...props,
 	ref,
 	type: "range",
-	style: _tremolo_ui_dom.visuallyHiddenStyle
+	style: _tremolo_ui_dom_internal.visuallyHiddenStyle
 }));
 //#endregion
 //#region src/components/PointsEditor/Point.tsx
@@ -1374,17 +1508,27 @@ const VisuallyHiddenRangeInput = /* @__PURE__ */ (0, react.forwardRef)((props, r
 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 = (0, react.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 = (0, _tremolo_ui_dom_internal.clampPoint)(value, min, max);
+	const gesture = useChangeGesture(current, {
+		onChangeStart,
+		onChangeEnd,
+		changeEndDelay
+	}, inactive);
+	const handleChange = (next) => {
+		gesture.changed(next);
+		onChange?.(next);
+	};
 	const [element, setElement] = (0, react.useState)(null);
 	const xInputRef = (0, react.useRef)(null);
 	const yInputRef = (0, react.useRef)(null);
@@ -1393,9 +1537,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")
 	});
 	(0, react.useEffect)(() => {
 		registration.current = {
@@ -1403,19 +1548,20 @@ 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")
 		};
 	});
 	(0, react.useEffect)(() => editor.registerPoint(id, () => registration.current), [id, editor]);
 	/** Where the pointer was when the drag started, to measure the move from. */
 	const pointerOrigin = (0, react.useRef)(null);
 	const { refCallback: dragRefCallback, dragging } = useDragValue({
-		axis: _tremolo_ui_dom.POINT_AXIS,
+		axis: _tremolo_ui_dom_internal.POINT_AXIS,
 		baseElementRef: containerRef,
-		sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
-		cursor: inactive ? void 0 : externalStyles.cursor,
+		sensitivity: (state) => (0, _tremolo_ui_dom_internal.selectModifier)(dragSensitivity, state.event).value,
+		cursor: inactive ? void 0 : dragCursor,
 		shouldStart: () => !disabled,
 		onChange: ([x, y]) => {
 			const origin = pointerOrigin.current;
@@ -1432,29 +1578,27 @@ function Point({ value, children, id: idProp, min, max, color, disabled: _disabl
 				y
 			};
 			xInputRef.current?.focus();
-			if (inactive) return;
-			onDragStart?.((0, _tremolo_ui_dom.clampPoint)(value, min, max));
+			if (!inactive) gesture.hold("pointer");
 		},
 		onDragEnd: () => {
 			pointerOrigin.current = null;
-			if (inactive) return;
-			onDragEnd?.((0, _tremolo_ui_dom.clampPoint)(value, min, max));
+			gesture.end();
 		}
 	});
 	const refCallback = require_compose_refs.useComposedRefs(dragRefCallback, setElement);
 	const handleKeyDown = (event) => {
-		const move = (0, _tremolo_ui_dom.arrowKeyMove)(event.key);
+		const move = (0, _tremolo_ui_dom_internal.arrowKeyMove)(event.key);
 		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 = (0, _tremolo_ui_dom.clampPoint)(value, min, max);
 	return /* @__PURE__ */ (0, react_jsx_runtime.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,
@@ -1484,12 +1628,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;
 				}
@@ -1538,9 +1682,8 @@ const EMPTY = [];
 * Multiple Point Controller
 */
 const PointsEditor = {
-	Root: /* @__PURE__ */ (0, react.forwardRef)(({ disabled = false, readonly = false, wheel = _tremolo_ui_dom.POINTS_EDITOR_DEFAULT_WHEEL, keyboard = _tremolo_ui_dom.POINTS_EDITOR_DEFAULT_KEYBOARD, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, selectable = false, selection: selectionProp, defaultSelection, onSelectionChange, externalStyles, style, className, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ disabled = false, readOnly = false, wheel = _tremolo_ui_dom_internal.POINTS_EDITOR_DEFAULT_WHEEL, keyboard = _tremolo_ui_dom_internal.POINTS_EDITOR_DEFAULT_KEYBOARD, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, selectable = false, selection: selectionProp, defaultSelection, onSelectionChange, dragCursor = "grabbing", style, className, children, ...props }, forwardedRef) => {
 		const containerRef = (0, react.useRef)(null);
-		const { cursor = "grabbing" } = externalStyles ?? {};
 		const controlled = selectionProp !== void 0;
 		const [ownSelection, setOwnSelection] = (0, react.useState)(defaultSelection ?? []);
 		const selection = selectable ? selectionProp ?? ownSelection : EMPTY;
@@ -1559,11 +1702,11 @@ const PointsEditor = {
 		(0, react.useEffect)(() => () => editor.destroy(), [editor]);
 		const context = (0, react.useMemo)(() => ({
 			disabled,
-			readonly,
+			readOnly,
 			wheel,
 			keyboard,
 			dragSensitivity,
-			externalStyles: { cursor },
+			dragCursor,
 			containerRef,
 			selectable,
 			selection,
@@ -1571,11 +1714,11 @@ const PointsEditor = {
 			selectionBox
 		}), [
 			disabled,
-			readonly,
+			readOnly,
 			wheel,
 			keyboard,
 			dragSensitivity,
-			cursor,
+			dragCursor,
 			selectable,
 			selection,
 			editor,
@@ -1587,7 +1730,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
@@ -1618,7 +1761,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 = (0, _tremolo_ui_dom.valuePercent)(value, {
 		min,
@@ -1628,9 +1771,9 @@ function MarksOption({ value, mark = true, label, thickness, length, gap, classe
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className,
 		style: {
-			"--thickness": (0, _tremolo_ui_dom.cssLength)(thickness),
-			"--length": (0, _tremolo_ui_dom.cssLength)(length),
-			"--gap": (0, _tremolo_ui_dom.cssLength)(gap),
+			"--thickness": (0, _tremolo_ui_dom_internal.cssLength)(thickness),
+			"--length": (0, _tremolo_ui_dom_internal.cssLength)(length),
+			"--gap": (0, _tremolo_ui_dom_internal.cssLength)(gap),
 			position: "absolute",
 			translate: vertical ? "var(--translate, 0 -50%)" : "var(--translate, -50% 0)",
 			zIndex: 10,
@@ -1657,15 +1800,15 @@ 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 ? (0, _tremolo_ui_dom.sliderMarks)(options, min, max, step) : [];
+	const optionsList = options ? (0, _tremolo_ui_dom_internal.sliderMarks)(options, min, max, step) : [];
 	if (vertical !== reverse) optionsList.reverse();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className,
 		"data-orientation": vertical ? "vertical" : "horizontal",
 		style: {
-			"--gap": (0, _tremolo_ui_dom.cssLength)(gap),
+			"--gap": (0, _tremolo_ui_dom_internal.cssLength)(gap),
 			position: "relative",
 			...style
 		},
@@ -1684,9 +1827,9 @@ function Marks({ gap, options, children, className, style, ...props }) {
 }
 //#endregion
 //#region src/components/Slider/Thumb.tsx
-const Thumb$1 = /* @__PURE__ */ (0, react.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__ */ (0, react.forwardRef)(function Thumb({ color, children, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, actionsRef, ...props }, forwardedRef) {
 	const inputRef = (0, react.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() {
@@ -1696,12 +1839,13 @@ const Thumb$1 = /* @__PURE__ */ (0, react.forwardRef)(function Thumb({ color, ch
 			inputRef.current?.blur();
 		}
 	});
-	(0, react.useImperativeHandle)(forwardedRef, methods, [disabled]);
+	(0, react.useImperativeHandle)(actionsRef, methods, [disabled]);
 	(0, react.useImperativeHandle)(thumbRef, methods, [disabled]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: forwardedRef,
 		className,
 		"data-disabled": disabled ? "" : void 0,
-		"data-readonly": readonly ? "" : void 0,
+		"data-readonly": readOnly ? "" : void 0,
 		...props,
 		style: {
 			"--color": color,
@@ -1709,8 +1853,8 @@ const Thumb$1 = /* @__PURE__ */ (0, react.forwardRef)(function Thumb({ color, ch
 			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__ */ (0, react_jsx_runtime.jsx)(VisuallyHiddenRangeInput, {
 			ref: inputRef,
@@ -1719,14 +1863,14 @@ const Thumb$1 = /* @__PURE__ */ (0, react.forwardRef)(function Thumb({ color, ch
 			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;
 				}
@@ -1737,20 +1881,20 @@ const Thumb$1 = /* @__PURE__ */ (0, react.forwardRef)(function Thumb({ color, ch
 });
 //#endregion
 //#region src/components/Slider/Track.tsx
-const Track = /* @__PURE__ */ (0, react.forwardRef)(function Track({ length, thickness, active, inactive, children, className, style, ...props }, forwardedRef) {
-	const { vertical, reverse, disabled, percent, trackRef } = useSliderContext();
+const Track = /* @__PURE__ */ (0, react.forwardRef)(function Track({ length, thickness, activeColor, inactiveColor, children, className, style, ...props }, forwardedRef) {
+	const { orientation, reverse, disabled, percent, trackRef } = useSliderContext();
 	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, trackRef);
 	return /* @__PURE__ */ (0, react_jsx_runtime.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,
-			"--length": (0, _tremolo_ui_dom.cssLength)(length),
-			"--thickness": (0, _tremolo_ui_dom.cssLength)(thickness),
+			"--active-color": activeColor,
+			"--inactive-color": inactiveColor,
+			"--length": (0, _tremolo_ui_dom_internal.cssLength)(length),
+			"--thickness": (0, _tremolo_ui_dom_internal.cssLength)(thickness),
 			"--percent": `${percent}%`,
 			position: "relative",
 			...style
@@ -1764,7 +1908,6 @@ const Track = /* @__PURE__ */ (0, react.forwardRef)(function Track({ length, thi
 });
 //#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.
@@ -1774,14 +1917,11 @@ const WHEEL_OPTIONS$1 = { requireFocus: true };
 * Customizable slider
 */
 const Slider = {
-	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, vertical = false, reverse = false, externalStyles: _externalStyles, wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, orientation = "horizontal", reverse = false, dragCursor = "pointer", wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, disabled = false, readOnly = false, onChange, onChangeStart, onChangeEnd, changeEndDelay, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown, actionsRef, ...props }, forwardedRef) => {
 		const trackRef = (0, react.useRef)(null);
 		const thumbRef = (0, react.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 = (0, _tremolo_ui_dom.valuePercent)(value, {
 			min,
@@ -1807,60 +1947,70 @@ const Slider = {
 			keyboard,
 			wheel
 		});
+		const gesture = useChangeGesture(value, {
+			onChangeStart,
+			onChangeEnd,
+			changeEndDelay
+		}, inactive);
+		const change = (0, react.useCallback)((next) => {
+			gesture.changed(next);
+			onChange?.(next);
+		}, [gesture, onChange]);
 		const handleKeyDown = (0, react.useCallback)((event) => {
-			const direction = (0, _tremolo_ui_dom.arrowKeyDirection)(event.key);
+			const direction = (0, _tremolo_ui_dom_internal.arrowKeyDirection)(event.key);
 			if (direction === null) return;
 			event.preventDefault();
 			if (!keyboard || !onChange || inactive) return;
-			onChange((0, _tremolo_ui_dom.applyDelta)(value, reverse ? -direction : direction, keyboard, axis, event));
+			gesture.pulse("keyboard");
+			change((0, _tremolo_ui_dom_internal.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) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
+			sensitivity: (state) => (0, _tremolo_ui_dom_internal.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 = (0, _tremolo_ui_dom.wheelDirection)(event, { horizontal: !vertical });
+			const direction = (0, _tremolo_ui_dom_internal.wheelDirection)(event, { horizontal: !vertical });
 			if (direction === null) return;
 			event.preventDefault();
-			onChange((0, _tremolo_ui_dom.applyDelta)(value, reverse ? -direction : direction, wheel, axis, event));
+			gesture.pulse("wheel");
+			change((0, _tremolo_ui_dom_internal.applyDelta)(value, reverse ? -direction : direction, wheel, axis, event));
 		}, WHEEL_OPTIONS$1);
-		const rootRefCallback = require_compose_refs.useComposedRefs(dragRefCallback, wheelRefCallback);
+		const rootRefCallback = require_compose_refs.useComposedRefs(forwardedRef, dragRefCallback, wheelRefCallback);
 		const context = (0, react.useMemo)(() => ({
 			value,
 			min,
 			max,
 			step,
 			scale,
-			vertical,
+			orientation,
 			reverse,
 			disabled,
-			readonly,
+			readOnly,
 			onChange,
 			percent,
 			trackRef,
@@ -1871,14 +2021,14 @@ const Slider = {
 			max,
 			step,
 			scale,
-			vertical,
+			orientation,
 			reverse,
 			disabled,
-			readonly,
+			readOnly,
 			onChange,
 			percent
 		]);
-		(0, react.useImperativeHandle)(forwardedRef, () => {
+		(0, react.useImperativeHandle)(actionsRef, () => {
 			return {
 				focus() {
 					if (!disabled) thumbRef.current?.focus();
@@ -1895,9 +2045,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) => {
@@ -1952,15 +2102,15 @@ const Area = /* @__PURE__ */ (0, react.forwardRef)(function Area({ children, cla
 });
 //#endregion
 //#region src/components/XYPad/Thumb.tsx
-const Thumb = /* @__PURE__ */ (0, react.forwardRef)(function Thumb({ color, children, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, ...props }, forwardedRef) {
+const Thumb = /* @__PURE__ */ (0, react.forwardRef)(function Thumb({ color, children, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, actionsRef, ...props }, forwardedRef) {
 	const xInputRef = (0, react.useRef)(null);
 	const yInputRef = (0, react.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 = (0, _tremolo_ui_dom.toXY)(ariaLabel);
-	const labelledby = (0, _tremolo_ui_dom.toXY)(ariaLabelledby);
-	const describedby = (0, _tremolo_ui_dom.toXY)(ariaDescribedby);
-	const valueText = (0, _tremolo_ui_dom.toXY)(ariaValuetext);
+	const labels = (0, _tremolo_ui_dom_internal.toXY)(ariaLabel);
+	const labelledby = (0, _tremolo_ui_dom_internal.toXY)(ariaLabelledby);
+	const describedby = (0, _tremolo_ui_dom_internal.toXY)(ariaDescribedby);
+	const valueText = (0, _tremolo_ui_dom_internal.toXY)(ariaValuetext);
 	const methods = () => ({
 		focus() {
 			if (!disabled) xInputRef.current?.focus();
@@ -1970,12 +2120,13 @@ const Thumb = /* @__PURE__ */ (0, react.forwardRef)(function Thumb({ color, chil
 			yInputRef.current?.blur();
 		}
 	});
-	(0, react.useImperativeHandle)(forwardedRef, methods, [disabled]);
+	(0, react.useImperativeHandle)(actionsRef, methods, [disabled]);
 	(0, react.useImperativeHandle)(thumbRef, methods, [disabled]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: forwardedRef,
 		className,
 		"data-disabled": disabled ? "" : void 0,
-		"data-readonly": readonly ? "" : void 0,
+		"data-readonly": readOnly ? "" : void 0,
 		...props,
 		style: {
 			"--color": color,
@@ -1994,14 +2145,14 @@ const Thumb = /* @__PURE__ */ (0, react.forwardRef)(function Thumb({ color, chil
 			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;
 				}
@@ -2014,7 +2165,6 @@ const Thumb = /* @__PURE__ */ (0, react.forwardRef)(function Thumb({ color, chil
 });
 //#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.
@@ -2024,20 +2174,25 @@ const WHEEL_OPTIONS = { requireFocus: true };
 * Simple XYPad
 */
 const XYPad = {
-	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min: _min, max: _max, step: _step = 1, scale: _scale = _tremolo_ui_functions.linearScale, reverse: _reverse = false, wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, className, style, externalStyles: _externalStyles, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min: _min, max: _max, step: _step = 1, scale: _scale = _tremolo_ui_functions.linearScale, reverse: _reverse = false, wheel = _tremolo_ui_dom.DEFAULT_WHEEL_OPTIONS, keyboard = _tremolo_ui_dom.DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = _tremolo_ui_dom.DEFAULT_DRAG_SENSITIVITY, className, style, dragCursor = "pointer", disabled = false, readOnly = false, onChange, onChangeStart, onChangeEnd, changeEndDelay, onPointerDown, onKeyDown, onFocus, onBlur, children, actionsRef, ...props }, forwardedRef) => {
 		const rootRef = (0, react.useRef)(null);
 		const areaRef = (0, react.useRef)(null);
 		const thumbRef = (0, react.useRef)(null);
-		const externalStyles = {
-			...defaultExternalStyles,
-			..._externalStyles
-		};
-		const inactive = disabled || readonly;
-		const min = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_min), [_min]);
-		const max = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_max), [_max]);
-		const step = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_step), [_step]);
-		const scale = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_scale), [_scale]);
-		const reverse = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_reverse), [_reverse]);
+		const inactive = disabled || readOnly;
+		const gesture = useChangeGesture(value, {
+			onChangeStart,
+			onChangeEnd,
+			changeEndDelay
+		}, inactive);
+		const change = (0, react.useCallback)((next) => {
+			gesture.changed(next);
+			onChange?.(next);
+		}, [gesture, onChange]);
+		const min = (0, react.useMemo)(() => (0, _tremolo_ui_dom_internal.toXY)(_min), [_min]);
+		const max = (0, react.useMemo)(() => (0, _tremolo_ui_dom_internal.toXY)(_max), [_max]);
+		const step = (0, react.useMemo)(() => (0, _tremolo_ui_dom_internal.toXY)(_step), [_step]);
+		const scale = (0, react.useMemo)(() => (0, _tremolo_ui_dom_internal.toXY)(_scale), [_scale]);
+		const reverse = (0, react.useMemo)(() => (0, _tremolo_ui_dom_internal.toXY)(_reverse), [_reverse]);
 		const percent = (0, react.useMemo)(() => [0, 1].map((i) => (0, _tremolo_ui_dom.valuePercent)(value[i], {
 			min: min[i],
 			max: max[i],
@@ -2078,55 +2233,56 @@ const XYPad = {
 		});
 		const withAxis = (0, react.useCallback)((axis, next) => axis === 0 ? [next, value[1]] : [value[0], next], [value]);
 		/** @param i 0 = x, 1 = y */
-		const nudge = (0, react.useCallback)((i, direction, option, modifiers) => withAxis(i, (0, _tremolo_ui_dom.applyDelta)(value[i], direction, option, axis[i], modifiers)), [
+		const nudge = (0, react.useCallback)((i, direction, option, modifiers) => withAxis(i, (0, _tremolo_ui_dom_internal.applyDelta)(value[i], direction, option, axis[i], modifiers)), [
 			value,
 			axis,
 			withAxis
 		]);
 		const handleKeyDown = (0, react.useCallback)((event) => {
-			const move = (0, _tremolo_ui_dom.arrowKeyMove)(event.key);
+			const move = (0, _tremolo_ui_dom_internal.arrowKeyMove)(event.key);
 			if (!move) return;
 			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) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
+			sensitivity: (state) => (0, _tremolo_ui_dom_internal.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 move = (0, _tremolo_ui_dom.wheelMove)(event);
+			const move = (0, _tremolo_ui_dom_internal.wheelMove)(event);
 			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 = require_compose_refs.useComposedRefs(rootRef, dragRefCallback, wheelRefCallback);
+		const rootRefCallback = require_compose_refs.useComposedRefs(forwardedRef, rootRef, dragRefCallback, wheelRefCallback);
 		const context = (0, react.useMemo)(() => ({
 			value,
 			min,
@@ -2135,7 +2291,7 @@ const XYPad = {
 			scale,
 			reverse,
 			disabled,
-			readonly,
+			readOnly,
 			onChange,
 			percent,
 			areaRef,
@@ -2148,19 +2304,18 @@ const XYPad = {
 			scale,
 			reverse,
 			disabled,
-			readonly,
+			readOnly,
 			onChange,
 			percent
 		]);
-		(0, react.useImperativeHandle)(forwardedRef, () => {
+		(0, react.useImperativeHandle)(actionsRef, () => {
 			return {
 				focus() {
 					if (!disabled) thumbRef.current?.focus();
 				},
 				blur() {
 					thumbRef.current?.blur();
-				},
-				original: rootRef
+				}
 			};
 		}, [disabled]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYPadProvider, {
@@ -2171,7 +2326,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) => {
@@ -2196,17 +2351,30 @@ const XYPad = {
 };
 //#endregion
 //#region src/hooks/useAnimationFrame.ts
-function useAnimationFrame(callback = () => {}, deps = []) {
-	const reqIdRef = (0, react.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);
 	(0, react.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
@@ -2246,43 +2414,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 = (0, react.useRef)(() => {});
+	const registrationRef = (0, react.useRef)(null);
+	const { capture = false, once, passive } = typeof options === "boolean" ? { capture: options } : options ?? {};
 	(0, react.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);
+		const listenerOptions = {
+			capture,
+			once,
+			passive
 		};
-		cleanupRef.current = cleanup;
-		return () => {
-			cleanup();
-			if (cleanupRef.current === cleanup) cleanupRef.current = () => {};
+		node.addEventListener(event, listener, listenerOptions);
+		registrationRef.current = {
+			node,
+			event,
+			capture,
+			once,
+			passive,
+			remove: () => node.removeEventListener(event, listener, listenerOptions)
 		};
-	}, [
-		event,
-		target,
-		options,
-		listener
-	]);
-	return (0, react.useCallback)(() => cleanupRef.current(), []);
-}
-//#endregion
-//#region src/hooks/useInterval.ts
-function useInterval(callback, delay) {
-	const savedCallback = (0, react.useRef)(callback);
-	(0, react.useEffect)(() => {
-		savedCallback.current = callback;
-	}, [callback]);
-	(0, react.useEffect)(() => {
-		if (delay === null) return;
-		const id = setInterval(() => {
-			savedCallback.current();
-		}, delay);
-		return () => {
-			clearInterval(id);
-		};
-	}, [delay]);
+	});
+	(0, react.useEffect)(() => () => {
+		registrationRef.current?.remove();
+		registrationRef.current = null;
+	}, []);
+	return (0, react.useCallback)(() => {
+		const current = registrationRef.current;
+		if (!current) return;
+		current.remove();
+		current.remove = () => {};
+	}, []);
 }
 //#endregion
 //#region src/hooks/useMIDIAccess.ts
@@ -2436,7 +2601,6 @@ exports.useDragValue = useDragValue;
 exports.useDropZone = useDropZone;
 exports.useEventListener = useEventListener;
 exports.useFileInputContext = useFileInputContext;
-exports.useInterval = useInterval;
 exports.useKnobContext = useKnobContext;
 exports.useLongPress = useLongPress;
 exports.useMIDIAccess = useMIDIAccess;