@tremolo-ui/react 0.2.1 → 0.4.0

package/dist/index.cjs

@@ -27,6 +27,7 @@ let react = require("react");
 react = __toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _tremolo_ui_functions = require("@tremolo-ui/functions");
+let _tremolo_ui_dom = require("@tremolo-ui/dom");
 let zustand = require("zustand");
 //#region src/components/AnimationCanvas/canvas.ts
 const drawingState = [
@@ -179,110 +180,55 @@ function useCallbackRef(callback, deps = []) {
 	return (0, react.useCallback)((...args) => callbackRef.current?.(...args), deps);
 }
 //#endregion
-//#region src/hooks/useEventListener.ts
-function useEventListener(target, event, handler, options) {
-	const listener = useCallbackRef(handler);
+//#region src/hooks/useDrag.ts
+/**
+* Track a pointer drag on an element.
+*
+* @returns a ref callback to attach to the element being dragged
+*/
+function useDrag({ threshold = 1, cursor, onDrag, onDragStart, onDragEnd }) {
+	const dragHandler = useCallbackRef(onDrag);
+	const dragStartHandler = useCallbackRef(onDragStart);
+	const dragEndHandler = useCallbackRef(onDragEnd);
+	const [node, setNode] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
-		const node = typeof target === "function" ? target() : target ?? document;
 		if (!node) return;
-		node.addEventListener(event, listener, options);
-		return () => {
-			node.removeEventListener(event, listener, options);
-		};
+		const instance = (0, _tremolo_ui_dom.createDrag)(node, {
+			threshold,
+			cursor,
+			onDragStart: () => dragStartHandler(),
+			onDrag: ({ x, y, deltaX, deltaY }) => dragHandler(x, y, deltaX, deltaY),
+			onDragEnd: () => dragEndHandler()
+		});
+		return () => instance.destroy();
 	}, [
-		event,
-		target,
-		options,
-		listener
+		node,
+		threshold,
+		cursor,
+		dragHandler,
+		dragStartHandler,
+		dragEndHandler
 	]);
-	return () => {
-		(typeof target === "function" ? target() : target ?? document)?.removeEventListener(event, listener, options);
-	};
-}
-//#endregion
-//#region src/hooks/useRefCallbackEvent.ts
-function useRefCallbackEvent(event, handler, options, deps = []) {
-	return (0, react.useMemo)(() => {
-		let cleanup;
-		return (node) => {
-			if (!node) {
-				cleanup?.();
-				return;
-			}
-			node.addEventListener(event, handler, options);
-			cleanup = () => {
-				node.removeEventListener(event, handler, options);
-			};
-		};
-	}, deps);
+	return setNode;
 }
 //#endregion
-//#region src/hooks/useDrag.ts
+//#region src/hooks/useWheel.ts
 /**
-* @returns [refCallback, pointerDownHandler]
+* Listen to wheel events on an element.
+*
+* The listener is not passive, so the handler may call `preventDefault()`.
+*
+* @returns a ref callback to attach to the element
 */
-function useDrag({ threshold: _threshold = 1, onDrag, onDragStart, onDragEnd }) {
-	const dragOffsetX = (0, react.useRef)(void 0);
-	const dragOffsetY = (0, react.useRef)(void 0);
-	const dragStartX = (0, react.useRef)(0);
-	const dragStartY = (0, react.useRef)(0);
-	const threshold = Math.max(_threshold, 1);
-	const handleDrag = (0, react.useCallback)((event, first = false) => {
-		const isTouch = event instanceof TouchEvent;
-		if (isTouch && event.cancelable) event.preventDefault();
-		const screenX = isTouch ? event.touches[0].screenX : event.screenX;
-		const screenY = isTouch ? event.touches[0].screenY : event.screenY;
-		let deltaX = 0;
-		let deltaY = 0;
-		if (first) {
-			dragStartX.current = screenX;
-			dragStartY.current = screenY;
-		}
-		if (dragOffsetX.current) {
-			deltaX = screenX - dragOffsetX.current;
-			dragOffsetX.current = screenX;
-		}
-		if (dragOffsetY.current) {
-			deltaY = screenY - dragOffsetY.current;
-			dragOffsetY.current = screenY;
-		}
-		if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return;
-		onDrag?.(screenX - dragStartX.current, screenY - dragStartY.current, deltaX, deltaY);
-	}, [threshold, onDrag]);
-	const pointerDownHandler = (0, react.useCallback)((event) => {
-		dragOffsetX.current = event.screenX;
-		dragOffsetY.current = event.screenY;
-		handleDrag(event, true);
-		onDragStart?.();
-	}, [handleDrag, onDragStart]);
-	const refHandler = useRefCallbackEvent("touchmove", handleDrag, { passive: false }, [onDrag]);
-	useEventListener(globalThis.window, "mousemove", handleDrag);
-	useEventListener(globalThis.window, "pointerup", () => {
-		dragOffsetX.current = void 0;
-		dragOffsetY.current = void 0;
-		onDragEnd?.();
-	});
-	return [refHandler, pointerDownHandler];
-}
-//#endregion
-//#region src/components/DragObserver/index.tsx
-function DragObserver(props) {
-	const { as: Component = "div", threshold = 1, onDrag, onDragStart, onDragEnd, children, onPointerDown, ...attributes } = props;
-	const [refCallback, pointerDownHandler] = useDrag({
-		threshold,
-		onDrag,
-		onDragStart,
-		onDragEnd
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-		ref: refCallback,
-		onPointerDown: (e) => {
-			pointerDownHandler(e);
-			onPointerDown?.(e);
-		},
-		...attributes,
-		children
-	});
+function useWheel(onWheel) {
+	const wheelHandler = useCallbackRef(onWheel);
+	const [node, setNode] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!node) return;
+		const instance = (0, _tremolo_ui_dom.createWheel)(node, (event) => wheelHandler(event));
+		return () => instance.destroy();
+	}, [node, wheelHandler]);
+	return setNode;
 }
 //#endregion
 //#region src/components/_util/index.ts
@@ -292,22 +238,6 @@ function addUserSelectNone() {
 function removeUserSelectNone() {
 	window.document.body.classList.remove("tremolo-user-select-none");
 }
-const cursorStyles = {
-	grabbing: "tremolo-cursor-grabbing",
-	grab: "tremolo-cursor-grab",
-	pointer: "tremolo-cursor-pointer",
-	move: "tremolo-cursor-move",
-	none: "tremolo-cursor-none"
-};
-function setCursorStyle(type) {
-	resetCursorStyle();
-	window.document.body.classList.add(cursorStyles[type]);
-}
-function resetCursorStyle() {
-	Object.values(cursorStyles).forEach((s) => {
-		window.document.body.classList.remove(s);
-	});
-}
 function calcDrawingState({ value, min, max, skew, startValue, angleRange }) {
 	const p = (0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew);
 	const s = (0, _tremolo_ui_functions.normalizeValue)(startValue, min, max, skew);
@@ -517,32 +447,26 @@ const Knob = {
 			readonly,
 			updateValueByEvent
 		]);
-		const [touchMoveRefCallback, pointerDownHandler] = useDrag({
+		const dragRefCallback = useDrag({
+			cursor: readonly ? void 0 : externalStyles.cursor,
 			onDrag,
 			onDragStart: () => {
 				setDragging(true);
 				valueRef.current = (0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew);
 				if (externalStyles.userSelectNone) addUserSelectNone();
-				if (externalStyles.cursor) setCursorStyle(externalStyles.cursor);
 			},
 			onDragEnd: () => {
 				setDragging(false);
 				if (externalStyles.userSelectNone) removeUserSelectNone();
-				if (externalStyles.cursor) resetCursorStyle();
 			}
 		});
-		const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+		const wheelRefCallback = useWheel((event) => {
 			if (!wheel || readonly) return;
 			event.preventDefault();
 			if (!onChange || event.deltaY == 0) return;
 			const x = Math.sign(event.deltaY) * -wheel[1];
 			onChange(updateValueByEvent(wheel[0], x));
-		}, { passive: false }, [
-			wheel,
-			onChange,
-			readonly,
-			updateValueByEvent
-		]);
+		});
 		(0, react.useImperativeHandle)(forwardedRef, () => {
 			return {
 				focus() {
@@ -565,7 +489,7 @@ const Knob = {
 				ref: (elm) => {
 					elmRef.current = elm;
 					wheelRefCallback(elm);
-					touchMoveRefCallback(elm);
+					dragRefCallback(elm);
 				},
 				className: (0, clsx.default)("tremolo-knob", className),
 				tabIndex: 0,
@@ -581,10 +505,7 @@ const Knob = {
 					height: size,
 					...style
 				},
-				onPointerDown: (event) => {
-					pointerDownHandler(event);
-					onPointerDown?.(event);
-				},
+				onPointerDown,
 				onDoubleClick: (event) => {
 					if (enableDoubleClickDefault && onChange) onChange(defaultValue);
 					onDoubleClick?.(event);
@@ -721,6 +642,27 @@ function useNumberInputContext(selector) {
 	return (0, zustand.useStore)(store, selector);
 }
 //#endregion
+//#region src/hooks/useEventListener.ts
+function useEventListener(target, event, handler, options) {
+	const listener = useCallbackRef(handler);
+	(0, react.useEffect)(() => {
+		const node = typeof target === "function" ? target() : target ?? document;
+		if (!node) return;
+		node.addEventListener(event, listener, options);
+		return () => {
+			node.removeEventListener(event, listener, options);
+		};
+	}, [
+		event,
+		target,
+		options,
+		listener
+	]);
+	return () => {
+		(typeof target === "function" ? target() : target ?? document)?.removeEventListener(event, listener, options);
+	};
+}
+//#endregion
 //#region src/hooks/useInterval.ts
 function useInterval(callback, delay) {
 	const savedCallback = (0, react.useRef)(callback);
@@ -866,19 +808,14 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 		onChange,
 		updateValueByEvent
 	]);
-	const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+	const wheelRefCallback = useWheel((event) => {
 		if (!wheel || readonly) return;
 		event.preventDefault();
 		if (!onChange || event.deltaY == 0) return;
 		const x = Math.sign(event.deltaY) * -wheel[1];
 		const parsed = parseValue(String(updateValueByEvent(wheel[0], x)));
 		onChange?.(parsed.rawValue, parsed.formatValue);
-	}, { passive: false }, [
-		wheel,
-		readonly,
-		onChange,
-		updateValueByEvent
-	]);
+	});
 	(0, react.useImperativeHandle)(ref, () => {
 		return {
 			focus() {
@@ -996,6 +933,23 @@ const NumberInput = {
 	DecrementStepper
 };
 //#endregion
+//#region src/hooks/useRefCallbackEvent.ts
+function useRefCallbackEvent(event, handler, options, deps = []) {
+	return (0, react.useMemo)(() => {
+		let cleanup;
+		return (node) => {
+			if (!node) {
+				cleanup?.();
+				return;
+			}
+			node.addEventListener(event, handler, options);
+			cleanup = () => {
+				node.removeEventListener(event, handler, options);
+			};
+		};
+	}, deps);
+}
+//#endregion
 //#region src/hooks/usePianoDrag.ts
 /**
 * Internal
@@ -1452,42 +1406,57 @@ function Container({ className, children, ...props }) {
 }
 //#endregion
 //#region src/hooks/useDragWithElement.ts
-function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd }) {
+/**
+* Track a pointer drag, reporting the position normalized against
+* the bounding rect of `baseElementRef`.
+*
+* @returns a ref callback for the element that starts the drag, and whether a drag is in progress
+*/
+function useDragWithElement({ baseElementRef, updateOnPointerDown = false, cursor, onDrag, onDragStart, onDragEnd }) {
 	const [dragging, setDragging] = (0, react.useState)(false);
 	const normalizedX = (0, react.useRef)(0);
 	const normalizedY = (0, react.useRef)(0);
-	const handleDrag = (0, react.useCallback)((event) => {
-		if (!baseElementRef.current || !dragging) return;
-		const isTouch = event instanceof TouchEvent;
-		if (isTouch && event.cancelable) event.preventDefault();
-		const { left, top, right, bottom } = baseElementRef.current.getBoundingClientRect();
-		const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
-		const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
-		const nx = (0, _tremolo_ui_functions.normalizeValue)(mouseX, left, right);
-		const ny = (0, _tremolo_ui_functions.normalizeValue)(mouseY, top, bottom);
-		normalizedX.current = nx;
-		normalizedY.current = ny;
-		onDrag(nx, ny);
+	const dragHandler = useCallbackRef(onDrag);
+	const dragStartHandler = useCallbackRef(onDragStart);
+	const dragEndHandler = useCallbackRef(onDragEnd);
+	const update = (0, react.useCallback)((clientX, clientY) => {
+		const base = baseElementRef.current;
+		if (!base) return false;
+		const { left, top, right, bottom } = base.getBoundingClientRect();
+		normalizedX.current = (0, _tremolo_ui_functions.normalizeValue)(clientX, left, right);
+		normalizedY.current = (0, _tremolo_ui_functions.normalizeValue)(clientY, top, bottom);
+		return true;
+	}, [baseElementRef]);
+	const [node, setNode] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!node) return;
+		const instance = (0, _tremolo_ui_dom.createDrag)(node, {
+			cursor,
+			onDragStart: ({ clientX, clientY }) => {
+				setDragging(true);
+				if (update(clientX, clientY) && updateOnPointerDown) dragHandler(normalizedX.current, normalizedY.current);
+				dragStartHandler(normalizedX.current, normalizedY.current);
+			},
+			onDrag: ({ clientX, clientY }) => {
+				if (update(clientX, clientY)) dragHandler(normalizedX.current, normalizedY.current);
+			},
+			onDragEnd: () => {
+				setDragging(false);
+				dragEndHandler(normalizedX.current, normalizedY.current);
+			}
+		});
+		return () => instance.destroy();
 	}, [
-		onDrag,
-		baseElementRef,
-		dragging
+		node,
+		update,
+		updateOnPointerDown,
+		cursor,
+		dragHandler,
+		dragStartHandler,
+		dragEndHandler
 	]);
-	const refHandler = useRefCallbackEvent("touchmove", handleDrag, { passive: false }, [onDrag]);
-	const pointerDownHandler = (0, react.useCallback)((event) => {
-		setDragging(true);
-		handleDrag(event);
-		onDragStart?.(normalizedX.current, normalizedY.current);
-	}, [handleDrag, onDragStart]);
-	useEventListener(globalThis.window, "pointermove", handleDrag);
-	useEventListener(globalThis.window, "pointerup", () => {
-		if (!dragging) return;
-		setDragging(false);
-		onDragEnd?.(normalizedX.current, normalizedY.current);
-	});
 	return {
-		refHandler,
-		pointerDownHandler,
+		refCallback: setNode,
 		dragging
 	};
 }
@@ -1505,8 +1474,9 @@ function Point({ value, min, max, size, width = 16, height = 16, color, disabled
 	const externalStyles = usePointsEditorContext((s) => s.externalStyles);
 	const __disabled = usePointsEditorContext((s) => s.disabled);
 	const __readonly = usePointsEditorContext((s) => s.readonly);
-	const { refHandler: touchMoveRefCallback, pointerDownHandler, dragging } = useDragWithElement({
+	const { refCallback: dragRefCallback, dragging } = useDragWithElement({
 		baseElementRef: containerElementRef,
+		cursor: readonly ? void 0 : externalStyles.cursor,
 		onDrag: (x, y) => {
 			if (readonly) return;
 			onChange?.(clampPoint({
@@ -1517,7 +1487,6 @@ function Point({ value, min, max, size, width = 16, height = 16, color, disabled
 		onDragStart: (x, y) => {
 			if (readonly) return;
 			if (externalStyles.userSelectNone) addUserSelectNone();
-			if (externalStyles.cursor) setCursorStyle(externalStyles.cursor);
 			onDragStart?.(clampPoint({
 				x,
 				y
@@ -1526,7 +1495,6 @@ function Point({ value, min, max, size, width = 16, height = 16, color, disabled
 		onDragEnd: (x, y) => {
 			if (readonly) return;
 			if (externalStyles.userSelectNone) removeUserSelectNone();
-			if (externalStyles.cursor) resetCursorStyle();
 			onDragEnd?.(clampPoint({
 				x,
 				y
@@ -1535,9 +1503,7 @@ function Point({ value, min, max, size, width = 16, height = 16, color, disabled
 	});
 	const colors = { "--color": color };
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: (div) => {
-			touchMoveRefCallback(div);
-		},
+		ref: dragRefCallback,
 		className: (0, clsx.default)("tremolo-points-editor-point", className),
 		tabIndex: 0,
 		"aria-disabled": disabled != void 0 ? disabled : __disabled,
@@ -1551,10 +1517,7 @@ function Point({ value, min, max, size, width = 16, height = 16, color, disabled
 			top: `${value.y * 100}%`,
 			...style
 		},
-		onPointerDown: (event) => {
-			pointerDownHandler(event);
-			onPointerDown?.(event);
-		},
+		onPointerDown,
 		...props
 	});
 }
@@ -1855,24 +1818,24 @@ const Slider = {
 			reverse,
 			updateValueByEvent
 		]);
-		const { refHandler: touchMoveRefCallback, pointerDownHandler } = useDragWithElement({
+		const { refCallback: dragRefCallback } = useDragWithElement({
 			baseElementRef: trackElementRef,
+			cursor: readonly ? void 0 : externalStyles.cursor,
+			updateOnPointerDown: true,
 			onDrag,
 			onDragStart: (nx, ny) => {
 				if (readonly) return;
 				if (externalStyles.userSelectNone) addUserSelectNone();
-				if (externalStyles.cursor) setCursorStyle(externalStyles.cursor);
 				thumbRef.current?.focus();
 				onDragStart?.((0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(vertical ? ny : nx, min, max, skew), step), min, max));
 			},
 			onDragEnd: (nx, ny) => {
 				if (readonly) return;
 				if (externalStyles.userSelectNone) removeUserSelectNone();
-				if (externalStyles.cursor) resetCursorStyle();
 				onDragEnd?.((0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(vertical ? ny : nx, min, max, skew), step), min, max));
 			}
 		});
-		const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+		const wheelRefCallback = useWheel((event) => {
 			if (!wheel || !onChange || readonly) return;
 			event.preventDefault();
 			let x;
@@ -1883,13 +1846,7 @@ const Slider = {
 			}
 			if (vertical && reverse) x *= -1;
 			onChange(updateValueByEvent(wheel[0], x));
-		}, { passive: false }, [
-			wheel,
-			vertical,
-			readonly,
-			onChange,
-			updateValueByEvent
-		]);
+		});
 		(0, react.useImperativeHandle)(forwardedRef, () => {
 			return {
 				focus() {
@@ -1913,7 +1870,7 @@ const Slider = {
 				className: (0, clsx.default)("tremolo-slider", className),
 				ref: (div) => {
 					wheelRefCallback(div);
-					touchMoveRefCallback(div);
+					dragRefCallback(div);
 				},
 				tabIndex: -1,
 				role: "slider",
@@ -1927,10 +1884,7 @@ const Slider = {
 					margin: `calc(${(0, _tremolo_ui_functions.styleHelper)(thumbProps?.size ?? 22)} / 2)`,
 					...style
 				},
-				onPointerDown: (event) => {
-					pointerDownHandler(event);
-					onPointerDown?.(event);
-				},
+				onPointerDown,
 				onKeyDown: (event) => {
 					handleKeyDown(event);
 					onKeyDown?.(event);
@@ -2005,29 +1959,6 @@ function composeRefs(...refs) {
 	};
 }
 //#endregion
-//#region src/components/WheelObserver/index.tsx
-/**
-* @example
-* <WheelObserver
-*   onWheel={(event) => {
-*     event.preventDefault()
-*     console.log(event.deltaY)
-*   }
-* >
-*   <div>Wheel here</div>
-* </WheelObserver>
-*/
-function WheelObserver(props) {
-	const { as: Component = "div", children, onWheel, ref, ...attributes } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-		ref: composeRefs(ref, useRefCallbackEvent("wheel", (event) => {
-			if (onWheel) onWheel(event);
-		}, { passive: false }, [onWheel])),
-		...attributes,
-		children
-	});
-}
-//#endregion
 //#region src/components/XYPad/Area.tsx
 function Area({ width = 120, height = 120, color, children, className, style, __thumb, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2179,13 +2110,14 @@ const XYPad = {
 			y,
 			updateValueByEvent
 		]);
-		const { refHandler: touchMoveRefCallback, pointerDownHandler } = useDragWithElement({
+		const { refCallback: dragRefCallback } = useDragWithElement({
 			baseElementRef: areaElementRef,
+			cursor: readonly ? void 0 : externalStyles.cursor,
+			updateOnPointerDown: true,
 			onDrag,
 			onDragStart: (nx, ny) => {
 				if (readonly) return;
 				if (externalStyles.userSelectNone) addUserSelectNone();
-				if (externalStyles.cursor) setCursorStyle(externalStyles.cursor);
 				thumbRef.current?.focus();
 				const valueX = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
 				const valueY = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
@@ -2194,13 +2126,12 @@ const XYPad = {
 			onDragEnd: (nx, ny) => {
 				if (readonly) return;
 				if (externalStyles.userSelectNone) removeUserSelectNone();
-				if (externalStyles.cursor) resetCursorStyle();
 				const valueX = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
 				const valueY = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
 				onDragEnd?.(valueX, valueY);
 			}
 		});
-		const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+		const wheelRefCallback = useWheel((event) => {
 			if (!onChange || readonly) return;
 			const target = event.shiftKey ? x : y;
 			if (!target.wheel) return;
@@ -2211,13 +2142,7 @@ const XYPad = {
 			const newValue = updateValueByEvent(target.wheel[0], target, delta);
 			if (event.shiftKey) onChange(newValue, y.value);
 			else onChange(x.value, newValue);
-		}, { passive: false }, [
-			x,
-			y,
-			onChange,
-			readonly,
-			updateValueByEvent
-		]);
+		});
 		(0, react.useImperativeHandle)(forwardedRef, () => {
 			return {
 				focus() {
@@ -2231,7 +2156,7 @@ const XYPad = {
 		}, []);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: (0, clsx.default)("tremolo-xy-pad", className),
-			ref: composeRefs(rootRef, wheelRefCallback, touchMoveRefCallback),
+			ref: composeRefs(rootRef, wheelRefCallback, dragRefCallback),
 			tabIndex: -1,
 			"aria-disabled": disabled,
 			"aria-readonly": readonly,
@@ -2241,10 +2166,7 @@ const XYPad = {
 				WebkitTapHighlightColor: "transparent",
 				...style
 			},
-			onPointerDown: (event) => {
-				pointerDownHandler(event);
-				onPointerDown?.(event);
-			},
+			onPointerDown,
 			onKeyDown: (event) => {
 				handleKeyDown(event);
 				onKeyDown?.(event);
@@ -2295,83 +2217,75 @@ function useAnimationFrame(callback = () => {}, deps = []) {
 }
 //#endregion
 //#region src/hooks/useMIDIAccess.ts
-/** @private */
-const PERMISSION_DENIED = "PERMISSION_DENIED";
-/** @private */
-const NOT_SUPPORTED = "NOT_SUPPORTED";
 /**
 * Hooks for requesting MIDI access in the browser. The first argument allows you to choose whether to request access on mount.
 */
 function useMIDIAccess(requestOnMount = true) {
-	const [midiAccess, setMidiAccess] = (0, react.useState)(null);
-	const [error, setError] = (0, react.useState)(null);
-	const request = (0, react.useCallback)(() => {
-		if (navigator.requestMIDIAccess) navigator.requestMIDIAccess().then((access) => {
-			setMidiAccess(access);
-			setError(null);
-		}).catch(() => {
-			setError(PERMISSION_DENIED);
-		});
-		else setError(NOT_SUPPORTED);
-	}, []);
+	const instance = (0, react.useMemo)(() => (0, _tremolo_ui_dom.createMIDIAccess)(), []);
+	const { midiAccess, error } = (0, react.useSyncExternalStore)(instance.subscribe, instance.getState, instance.getServerState);
 	(0, react.useEffect)(() => {
-		if (requestOnMount) request();
-	}, [requestOnMount, request]);
+		if (requestOnMount) instance.request();
+	}, [instance, requestOnMount]);
+	(0, react.useEffect)(() => {
+		return () => instance.destroy();
+	}, [instance]);
 	return {
-		request,
+		request: instance.request,
 		midiAccess,
 		error
 	};
 }
 //#endregion
-//#region src/hooks/useMIDIMessage.ts
-/**
-* Hooks for when you want to process MIDI events in more detail than useMIDIInput.
-*/
-function useMIDIMessage(midiAccess, onMIDIMessage) {
-	(0, react.useEffect)(() => {
-		if (!midiAccess) return;
-		for (const input of midiAccess.inputs.values()) input.addEventListener("midimessage", onMIDIMessage);
-		return () => {
-			for (const input of midiAccess.inputs.values()) input.removeEventListener("midimessage", onMIDIMessage);
-		};
-	}, [midiAccess, onMIDIMessage]);
-}
-//#endregion
 //#region src/hooks/useMIDIInput.ts
-const MIDI_EVENT_TO_NUMBER = {
-	NOTE_ON: 144,
-	NOTE_OFF: 128,
-	PITCH_BEND: 224
-};
 /**
 * Hooks for handling note on/off events. To be used with useMIDIAccess. Internally uses useMIDIMessage.
 */
 function useMIDIInput(midiAccess, onNoteOnEvent, onNoteOffEvent, onPitchBendEvent) {
-	useMIDIMessage(midiAccess, (0, react.useCallback)((event) => {
-		if (!event.data) return;
-		const kind = event.data[0] & 240;
-		if (kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF || kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0) onNoteOffEvent?.(event.data[1]);
-		else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) onNoteOnEvent?.(event.data[1], event.data[2]);
-		else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) onPitchBendEvent?.(event.data[1], event.data[2]);
+	(0, react.useEffect)(() => {
+		const instance = (0, _tremolo_ui_dom.createMIDIInput)(midiAccess, {
+			onNoteOnEvent,
+			onNoteOffEvent,
+			onPitchBendEvent
+		});
+		return () => instance.destroy();
 	}, [
-		onNoteOffEvent,
+		midiAccess,
 		onNoteOnEvent,
+		onNoteOffEvent,
 		onPitchBendEvent
-	]));
+	]);
+}
+//#endregion
+//#region src/hooks/useMIDIMessage.ts
+/**
+* Hooks for when you want to process MIDI events in more detail than useMIDIInput.
+*/
+function useMIDIMessage(midiAccess, onMIDIMessage) {
+	(0, react.useEffect)(() => {
+		const instance = (0, _tremolo_ui_dom.createMIDIMessage)(midiAccess, onMIDIMessage);
+		return () => instance.destroy();
+	}, [midiAccess, onMIDIMessage]);
 }
 //#endregion
 exports.AnimationCanvas = AnimationCanvas;
-exports.DragObserver = DragObserver;
 exports.Knob = Knob;
-exports.NOT_SUPPORTED = NOT_SUPPORTED;
+Object.defineProperty(exports, "NOT_SUPPORTED", {
+	enumerable: true,
+	get: function() {
+		return _tremolo_ui_dom.NOT_SUPPORTED;
+	}
+});
 exports.NumberInput = NumberInput;
-exports.PERMISSION_DENIED = PERMISSION_DENIED;
+Object.defineProperty(exports, "PERMISSION_DENIED", {
+	enumerable: true,
+	get: function() {
+		return _tremolo_ui_dom.PERMISSION_DENIED;
+	}
+});
 exports.Piano = Piano;
 exports.PointsEditor = PointsEditor;
 exports.SHORTCUTS = SHORTCUTS;
 exports.Slider = Slider;
-exports.WheelObserver = WheelObserver;
 exports.XYPad = XYPad;
 exports.clampPoint = clampPoint;
 exports.getNoteRangeArray = getNoteRangeArray;
@@ -2385,5 +2299,6 @@ exports.useMIDIAccess = useMIDIAccess;
 exports.useMIDIInput = useMIDIInput;
 exports.useMIDIMessage = useMIDIMessage;
 exports.useSliderContext = useSliderContext;
+exports.useWheel = useWheel;
 
 //# sourceMappingURL=index.cjs.map