@tremolo-ui/react 0.2.1 → 0.4.0

package/dist/index.js

@@ -1,7 +1,8 @@
 import clsx from "clsx";
-import React, { createContext, createRef, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useInsertionEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, createRef, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useInsertionEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clamp, decimalPart, isBlackKey, isWhiteKey, normalizeValue, noteKey, noteKeys, radian, rawValue, stepValue, styleHelper, toFixed, xor } from "@tremolo-ui/functions";
+import { NOT_SUPPORTED, PERMISSION_DENIED, createDrag, createMIDIAccess, createMIDIInput, createMIDIMessage, createWheel } from "@tremolo-ui/dom";
 import { createStore, useStore } from "zustand";
 //#region src/components/AnimationCanvas/canvas.ts
 const drawingState = [
@@ -154,110 +155,55 @@ function useCallbackRef(callback, deps = []) {
 	return 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] = useState(null);
 	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 = 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);
-	};
+	return setNode;
 }
 //#endregion
-//#region src/hooks/useRefCallbackEvent.ts
-function useRefCallbackEvent(event, handler, options, deps = []) {
-	return 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/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 = useRef(void 0);
-	const dragOffsetY = useRef(void 0);
-	const dragStartX = useRef(0);
-	const dragStartY = useRef(0);
-	const threshold = Math.max(_threshold, 1);
-	const handleDrag = 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 = 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__ */ jsx(Component, {
-		ref: refCallback,
-		onPointerDown: (e) => {
-			pointerDownHandler(e);
-			onPointerDown?.(e);
-		},
-		...attributes,
-		children
-	});
+function useWheel(onWheel) {
+	const wheelHandler = useCallbackRef(onWheel);
+	const [node, setNode] = useState(null);
+	useEffect(() => {
+		if (!node) return;
+		const instance = createWheel(node, (event) => wheelHandler(event));
+		return () => instance.destroy();
+	}, [node, wheelHandler]);
+	return setNode;
 }
 //#endregion
 //#region src/components/_util/index.ts
@@ -267,22 +213,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 = normalizeValue(value, min, max, skew);
 	const s = normalizeValue(startValue, min, max, skew);
@@ -492,32 +422,26 @@ const Knob = {
 			readonly,
 			updateValueByEvent
 		]);
-		const [touchMoveRefCallback, pointerDownHandler] = useDrag({
+		const dragRefCallback = useDrag({
+			cursor: readonly ? void 0 : externalStyles.cursor,
 			onDrag,
 			onDragStart: () => {
 				setDragging(true);
 				valueRef.current = 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
-		]);
+		});
 		useImperativeHandle(forwardedRef, () => {
 			return {
 				focus() {
@@ -540,7 +464,7 @@ const Knob = {
 				ref: (elm) => {
 					elmRef.current = elm;
 					wheelRefCallback(elm);
-					touchMoveRefCallback(elm);
+					dragRefCallback(elm);
 				},
 				className: clsx("tremolo-knob", className),
 				tabIndex: 0,
@@ -556,10 +480,7 @@ const Knob = {
 					height: size,
 					...style
 				},
-				onPointerDown: (event) => {
-					pointerDownHandler(event);
-					onPointerDown?.(event);
-				},
+				onPointerDown,
 				onDoubleClick: (event) => {
 					if (enableDoubleClickDefault && onChange) onChange(defaultValue);
 					onDoubleClick?.(event);
@@ -696,6 +617,27 @@ function useNumberInputContext(selector) {
 	return useStore(store, selector);
 }
 //#endregion
+//#region src/hooks/useEventListener.ts
+function useEventListener(target, event, handler, options) {
+	const listener = useCallbackRef(handler);
+	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 = useRef(callback);
@@ -841,19 +783,14 @@ const InternalInput = forwardRef(({ disabled, readonly, selectWithFocus, blurOnE
 		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
-	]);
+	});
 	useImperativeHandle(ref, () => {
 		return {
 			focus() {
@@ -971,6 +908,23 @@ const NumberInput = {
 	DecrementStepper
 };
 //#endregion
+//#region src/hooks/useRefCallbackEvent.ts
+function useRefCallbackEvent(event, handler, options, deps = []) {
+	return 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
@@ -1427,42 +1381,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] = useState(false);
 	const normalizedX = useRef(0);
 	const normalizedY = useRef(0);
-	const handleDrag = 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 = normalizeValue(mouseX, left, right);
-		const ny = 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 = useCallback((clientX, clientY) => {
+		const base = baseElementRef.current;
+		if (!base) return false;
+		const { left, top, right, bottom } = base.getBoundingClientRect();
+		normalizedX.current = normalizeValue(clientX, left, right);
+		normalizedY.current = normalizeValue(clientY, top, bottom);
+		return true;
+	}, [baseElementRef]);
+	const [node, setNode] = useState(null);
+	useEffect(() => {
+		if (!node) return;
+		const instance = 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 = 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
 	};
 }
@@ -1480,8 +1449,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({
@@ -1492,7 +1462,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
@@ -1501,7 +1470,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
@@ -1510,9 +1478,7 @@ function Point({ value, min, max, size, width = 16, height = 16, color, disabled
 	});
 	const colors = { "--color": color };
 	return /* @__PURE__ */ jsx("div", {
-		ref: (div) => {
-			touchMoveRefCallback(div);
-		},
+		ref: dragRefCallback,
 		className: clsx("tremolo-points-editor-point", className),
 		tabIndex: 0,
 		"aria-disabled": disabled != void 0 ? disabled : __disabled,
@@ -1526,10 +1492,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
 	});
 }
@@ -1830,24 +1793,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?.(clamp(stepValue(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?.(clamp(stepValue(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;
@@ -1858,13 +1821,7 @@ const Slider = {
 			}
 			if (vertical && reverse) x *= -1;
 			onChange(updateValueByEvent(wheel[0], x));
-		}, { passive: false }, [
-			wheel,
-			vertical,
-			readonly,
-			onChange,
-			updateValueByEvent
-		]);
+		});
 		useImperativeHandle(forwardedRef, () => {
 			return {
 				focus() {
@@ -1888,7 +1845,7 @@ const Slider = {
 				className: clsx("tremolo-slider", className),
 				ref: (div) => {
 					wheelRefCallback(div);
-					touchMoveRefCallback(div);
+					dragRefCallback(div);
 				},
 				tabIndex: -1,
 				role: "slider",
@@ -1902,10 +1859,7 @@ const Slider = {
 					margin: `calc(${styleHelper(thumbProps?.size ?? 22)} / 2)`,
 					...style
 				},
-				onPointerDown: (event) => {
-					pointerDownHandler(event);
-					onPointerDown?.(event);
-				},
+				onPointerDown,
 				onKeyDown: (event) => {
 					handleKeyDown(event);
 					onKeyDown?.(event);
@@ -1980,29 +1934,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__ */ 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__ */ jsxs("div", {
@@ -2154,13 +2085,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 = clamp(stepValue(rawValue(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
 				const valueY = clamp(stepValue(rawValue(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
@@ -2169,13 +2101,12 @@ const XYPad = {
 			onDragEnd: (nx, ny) => {
 				if (readonly) return;
 				if (externalStyles.userSelectNone) removeUserSelectNone();
-				if (externalStyles.cursor) resetCursorStyle();
 				const valueX = clamp(stepValue(rawValue(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
 				const valueY = clamp(stepValue(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;
@@ -2186,13 +2117,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
-		]);
+		});
 		useImperativeHandle(forwardedRef, () => {
 			return {
 				focus() {
@@ -2206,7 +2131,7 @@ const XYPad = {
 		}, []);
 		return /* @__PURE__ */ jsx("div", {
 			className: clsx("tremolo-xy-pad", className),
-			ref: composeRefs(rootRef, wheelRefCallback, touchMoveRefCallback),
+			ref: composeRefs(rootRef, wheelRefCallback, dragRefCallback),
 			tabIndex: -1,
 			"aria-disabled": disabled,
 			"aria-readonly": readonly,
@@ -2216,10 +2141,7 @@ const XYPad = {
 				WebkitTapHighlightColor: "transparent",
 				...style
 			},
-			onPointerDown: (event) => {
-				pointerDownHandler(event);
-				onPointerDown?.(event);
-			},
+			onPointerDown,
 			onKeyDown: (event) => {
 				handleKeyDown(event);
 				onKeyDown?.(event);
@@ -2270,72 +2192,56 @@ 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] = useState(null);
-	const [error, setError] = useState(null);
-	const request = useCallback(() => {
-		if (navigator.requestMIDIAccess) navigator.requestMIDIAccess().then((access) => {
-			setMidiAccess(access);
-			setError(null);
-		}).catch(() => {
-			setError(PERMISSION_DENIED);
-		});
-		else setError(NOT_SUPPORTED);
-	}, []);
+	const instance = useMemo(() => createMIDIAccess(), []);
+	const { midiAccess, error } = useSyncExternalStore(instance.subscribe, instance.getState, instance.getServerState);
 	useEffect(() => {
-		if (requestOnMount) request();
-	}, [requestOnMount, request]);
+		if (requestOnMount) instance.request();
+	}, [instance, requestOnMount]);
+	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) {
-	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, 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]);
+	useEffect(() => {
+		const instance = 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) {
+	useEffect(() => {
+		const instance = createMIDIMessage(midiAccess, onMIDIMessage);
+		return () => instance.destroy();
+	}, [midiAccess, onMIDIMessage]);
 }
 //#endregion
-export { AnimationCanvas, DragObserver, Knob, NOT_SUPPORTED, NumberInput, PERMISSION_DENIED, Piano, PointsEditor, SHORTCUTS, Slider, WheelObserver, XYPad, clampPoint, getNoteRangeArray, useAnimationFrame, useDrag, useDragWithElement, useEventListener, useInterval, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useSliderContext };
+export { AnimationCanvas, Knob, NOT_SUPPORTED, NumberInput, PERMISSION_DENIED, Piano, PointsEditor, SHORTCUTS, Slider, XYPad, clampPoint, getNoteRangeArray, useAnimationFrame, useDrag, useDragWithElement, useEventListener, useInterval, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useSliderContext, useWheel };
 
 //# sourceMappingURL=index.js.map