@tremolo-ui/react 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -21,13 +21,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 
 //#endregion
-const clsx = __toESM(require("clsx"));
-const react = __toESM(require("react"));
-const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
-const __tremolo_ui_functions = __toESM(require("@tremolo-ui/functions"));
-const zustand = __toESM(require("zustand"));
-const __tremolo_ui_functions_NumberInput = __toESM(require("@tremolo-ui/functions/NumberInput"));
-const __tremolo_ui_functions_Slider = __toESM(require("@tremolo-ui/functions/Slider"));
+let clsx = require("clsx");
+clsx = __toESM(clsx);
+let react = require("react");
+react = __toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let __tremolo_ui_functions = require("@tremolo-ui/functions");
+let zustand = require("zustand");
 
 //#region src/components/AnimationCanvas/canvas.ts
 const drawingState = [
@@ -50,9 +50,6 @@ const drawingState = [
 	"direction",
 	"imageSmoothingEnabled"
 ];
-
-//#endregion
-//#region src/components/AnimationCanvas/index.tsx
 function setDprConfig(canvas, context, width, height, dpr) {
 	canvas.width = width * dpr;
 	canvas.height = height * dpr;
@@ -61,7 +58,10 @@ function setDprConfig(canvas, context, width, height, dpr) {
 	canvas.style.width = `${width}px`;
 	canvas.style.height = `${height}px`;
 }
-function AnimationCanvas({ options, init, draw, width = 100, height = 100, relativeSize, reduceFlickering = true, className, onContextMenu = (event) => event.preventDefault(),...props }) {
+
+//#endregion
+//#region src/components/AnimationCanvas/index.tsx
+function AnimationCanvas({ draw, init, animate = true, options, width: _width = 100, height: _height = 100, relativeSize, reduceFlickering = true, className, onContextMenu = (event) => event.preventDefault(),...props }) {
 	const canvasRef = (0, react.useRef)(null);
 	const memoCanvasRef = (0, react.useRef)(null);
 	const reqIdRef = (0, react.useRef)(-1);
@@ -69,27 +69,40 @@ function AnimationCanvas({ options, init, draw, width = 100, height = 100, relat
 	const heightRef = (0, react.useRef)(0);
 	const deltaMemoRef = (0, react.useRef)(-1);
 	const startTimeRef = (0, react.useRef)(-1);
-	const loop = (0, react.useCallback)((context, width$1, height$1, count) => {
+	const loop = (0, react.useCallback)((context, width, height, count) => {
 		const now = performance.now();
 		const deltaTime = now - deltaMemoRef.current;
 		const elapsedTime = now - startTimeRef.current;
 		deltaMemoRef.current = now;
-		reqIdRef.current = requestAnimationFrame(() => loop(context, width$1, height$1, count + 1));
+		if (animate) reqIdRef.current = requestAnimationFrame(() => loop(context, width, height, count + 1));
 		draw(context, {
-			width: width$1.current,
-			height: height$1.current,
+			width: width.current,
+			height: height.current,
 			count: count + 1,
 			deltaTime,
 			elapsedTime,
 			fps: 1e3 / deltaTime
 		});
-	}, [draw]);
+	}, [draw, animate]);
 	(0, react.useEffect)(() => {
 		if (!canvasRef.current) return;
 		const canvas = canvasRef.current;
 		const context = canvas.getContext("2d", options);
 		if (!context) throw new Error("Cannot get canvas context.");
 		const dpr = globalThis.devicePixelRatio;
+		const firstRendering = (width, height) => {
+			setDprConfig(canvas, context, width, height, dpr);
+			widthRef.current = width;
+			heightRef.current = height;
+			if (init) init(context, {
+				width,
+				height
+			});
+			const now = performance.now();
+			deltaMemoRef.current = now;
+			startTimeRef.current = now;
+			loop(context, widthRef, heightRef, -1);
+		};
 		if (relativeSize) {
 			const parent = canvas.parentElement;
 			if (!parent) throw new Error("Canvas doesn't have a parent element.");
@@ -97,52 +110,37 @@ function AnimationCanvas({ options, init, draw, width = 100, height = 100, relat
 			const memoContext = memoCanvas?.getContext("2d", options);
 			const ro = new ResizeObserver((entries) => {
 				for (const entry of entries) {
+					const w = entry.contentRect.width;
+					const h = entry.contentRect.height;
 					const contextMemo = {};
-					for (const prop of drawingState) contextMemo[prop] = context[prop];
-					const w$1 = entry.contentRect.width;
-					const h$1 = entry.contentRect.height;
 					if (reduceFlickering && memoCanvas && memoContext) {
-						memoCanvas.width = w$1 * dpr;
-						memoCanvas.height = h$1 * dpr;
+						for (const prop of drawingState) contextMemo[prop] = context[prop];
+						memoCanvas.width = w * dpr;
+						memoCanvas.height = h * dpr;
 						memoContext.scale(1 / dpr, 1 / dpr);
 						if (canvas.width > 0 && canvas.height > 0) memoContext.drawImage(canvas, 0, 0);
 					}
-					setDprConfig(canvas, context, w$1, h$1, dpr);
-					widthRef.current = w$1;
-					heightRef.current = h$1;
-					for (const prop of drawingState) context[prop] = contextMemo[prop];
-					if (reduceFlickering && memoContext && memoCanvas && memoCanvas.width > 0 && memoCanvas.height > 0) context.drawImage(memoContext.canvas, 0, 0);
+					setDprConfig(canvas, context, w, h, dpr);
+					widthRef.current = w;
+					heightRef.current = h;
+					if (reduceFlickering && memoContext && memoCanvas && memoCanvas.width > 0 && memoCanvas.height > 0) {
+						for (const prop of drawingState) context[prop] = contextMemo[prop];
+						context.drawImage(memoContext.canvas, 0, 0);
+					}
+					if (!animate) loop(context, widthRef, heightRef, -1);
 				}
 			});
 			ro.observe(parent);
-			const w = parent.clientWidth;
-			const h = parent.clientHeight;
-			setDprConfig(canvas, context, w, h, dpr);
-			if (init) init(context, {
-				width: widthRef.current,
-				height: heightRef.current
-			});
-			const now = performance.now();
-			deltaMemoRef.current = now;
-			startTimeRef.current = now;
-			loop(context, widthRef, heightRef, -1);
+			const width = parent.clientWidth;
+			const height = parent.clientHeight;
+			firstRendering(width, height);
 			return () => {
 				if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current);
 				ro.disconnect();
 			};
 		} else {
-			const rect = canvas.getBoundingClientRect();
-			setDprConfig(canvas, context, rect.width, rect.height, dpr);
-			widthRef.current = rect.width;
-			heightRef.current = rect.height;
-			if (init) init(context, {
-				width: widthRef.current,
-				height: heightRef.current
-			});
-			const now = performance.now();
-			deltaMemoRef.current = now;
-			startTimeRef.current = now;
-			loop(context, widthRef, heightRef, -1);
+			const { width, height } = canvas.getBoundingClientRect();
+			firstRendering(width, height);
 			return () => {
 				if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current);
 			};
@@ -152,12 +150,13 @@ function AnimationCanvas({ options, init, draw, width = 100, height = 100, relat
 		init,
 		options,
 		reduceFlickering,
-		relativeSize
+		relativeSize,
+		animate
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
 		className: (0, clsx.default)("tremolo-animation-canvas", className),
-		width: relativeSize ? 0 : width,
-		height: relativeSize ? 0 : height,
+		width: relativeSize ? 0 : _width,
+		height: relativeSize ? 0 : _height,
 		ref: canvasRef,
 		onContextMenu,
 		...props
@@ -170,8 +169,8 @@ function AnimationCanvas({ options, init, draw, width = 100, height = 100, relat
 //#endregion
 //#region src/hooks/useCallbackRef.ts
 /**
-* This hook is user-land implementation of the experimental `useEffectEvent` hook.
-* React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+* Internal
+* @private
 */
 function useCallbackRef(callback, deps = []) {
 	const callbackRef = (0, react.useRef)(() => {
@@ -202,8 +201,7 @@ function useEventListener(target, event, handler, options) {
 		handler
 	]);
 	return () => {
-		const node = typeof target === "function" ? target() : target ?? document;
-		node?.removeEventListener(event, listener, options);
+		(typeof target === "function" ? target() : target ?? document)?.removeEventListener(event, listener, options);
 	};
 }
 
@@ -228,6 +226,7 @@ function useRefCallbackEvent(event, handler, options, deps = []) {
 //#endregion
 //#region src/hooks/useDrag.ts
 /**
+* @category hooks
 * @returns [refCallback, pointerDownHandler]
 */
 function useDrag({ threshold = 1, onDrag, onDragStart, onDragEnd }) {
@@ -294,9 +293,7 @@ const AnimationKnob = (0, react.forwardRef)(({ value, min, max, defaultValue = m
 	const isRelativeSize = typeof (size ?? width) == "string" || typeof height == "string";
 	const onDrag = (0, react.useCallback)((_x, y) => {
 		if (!onChange) return;
-		const v = (0, __tremolo_ui_functions.rawValue)(valueRef.current - y / 100, min, max, skew);
-		const v2 = (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, step), min, max);
-		onChange(v2);
+		onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(valueRef.current - y / 100, min, max, skew), step), min, max));
 	}, [
 		max,
 		min,
@@ -316,10 +313,8 @@ const AnimationKnob = (0, react.forwardRef)(({ value, min, max, defaultValue = m
 			event.preventDefault();
 			const x = key == "ArrowRight" || key == "ArrowUp" ? keyboard[1] : -keyboard[1];
 			let v;
-			if (keyboard[0] == "normalized") {
-				const n = (0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew);
-				v = (0, __tremolo_ui_functions.rawValue)(n + x, min, max, skew);
-			} else v = value + x;
+			if (keyboard[0] == "normalized") v = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
+			else v = value + x;
 			onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, step), min, max));
 		}
 	}, [
@@ -346,10 +341,8 @@ const AnimationKnob = (0, react.forwardRef)(({ value, min, max, defaultValue = m
 		event.preventDefault();
 		const x = event.deltaY > 0 ? -wheel[1] : wheel[1];
 		let v;
-		if (wheel[0] == "normalized") {
-			const n = (0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew);
-			v = (0, __tremolo_ui_functions.rawValue)(n + x, min, max, skew);
-		} else v = value + x;
+		if (wheel[0] == "normalized") v = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
+		else v = value + x;
 		if (onChange) onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, step), min, max));
 	}, { passive: false }, [
 		wheel,
@@ -461,20 +454,12 @@ function DragObserver(props) {
 *
 * @category Knob
 */
-const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defaultValue = min, startValue = min, size = 50, bodyNoSelect = true, wheel = ["raw", 1], keyboard = ["raw", 1], enableDoubleClickDefault = true, disabled = false, readonly = false, activeLine, inactiveLine, thumb, thumbLine, onChange, onKeyDown, onPointerDown, onDoubleClick, className, classes,...props }, ref) => {
+const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defaultValue = min, startValue = min, size = 50, bodyNoSelect = true, wheel = ["raw", 1], keyboard = ["raw", 1], enableDoubleClickDefault = true, disabled = false, readonly = false, activeLine, inactiveLine, thumb, thumbLine, thumbSize = 84, thumbLineWeight = 6, thumbLineLength = 35, lineWeight = 6, angleRange = 270, onChange, onKeyDown, onPointerDown, onDoubleClick, className, classes,...props }, forwardedRef) => {
 	const valueRef = (0, react.useRef)(0);
 	const elmRef = (0, react.useRef)(null);
-	const padding = 8;
-	const thumbLineWeight = 6;
-	const thumbLineLength = 35;
-	const lineWeight = size * .06;
-	const p = (0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew);
-	const s = (0, __tremolo_ui_functions.normalizeValue)(startValue, min, max, skew);
 	const onDrag = (0, react.useCallback)((_x, y) => {
 		if (!onChange || readonly) return;
-		const v = (0, __tremolo_ui_functions.rawValue)(valueRef.current - y / 100, min, max, skew);
-		const v2 = (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, step), min, max);
-		onChange(v2);
+		onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(valueRef.current - y / 100, min, max, skew), step), min, max));
 	}, [
 		max,
 		min,
@@ -485,10 +470,8 @@ const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defau
 	]);
 	const updateValueByEvent = (0, react.useCallback)((eventType, x) => {
 		let newValue;
-		if (eventType == "normalized") {
-			const n = (0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew);
-			newValue = (0, __tremolo_ui_functions.rawValue)(n + x, min, max, skew);
-		} else newValue = value + x;
+		if (eventType == "normalized") newValue = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
+		else newValue = value + x;
 		return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(newValue, step), min, max);
 	}, [
 		max,
@@ -538,7 +521,7 @@ const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defau
 		readonly,
 		updateValueByEvent
 	]);
-	(0, react.useImperativeHandle)(ref, () => {
+	(0, react.useImperativeHandle)(forwardedRef, () => {
 		return {
 			focus() {
 				elmRef.current?.focus();
@@ -548,11 +531,15 @@ const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defau
 			}
 		};
 	}, []);
-	const center = size / 2;
-	const r1 = -135;
-	const r2 = -135 + Math.min(p, s) * 270;
-	const r3 = -135 + Math.max(p, s) * 270;
-	const r4 = 135;
+	const viewBoxSize = 100;
+	const center = viewBoxSize / 2;
+	const padding = (viewBoxSize - (0, __tremolo_ui_functions.clamp)(thumbSize, 0, 100)) / 2;
+	const p = (0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew);
+	const s = (0, __tremolo_ui_functions.normalizeValue)(startValue, min, max, skew);
+	const r1 = -angleRange / 2;
+	const r2 = r1 + Math.min(p, s) * angleRange;
+	const r3 = r1 + Math.max(p, s) * angleRange;
+	const r4 = angleRange / 2;
 	const x1 = center + center * Math.cos((0, __tremolo_ui_functions.radian)(r1 - 90));
 	const y1 = center + center * Math.sin((0, __tremolo_ui_functions.radian)(r1 - 90));
 	const x2 = center + center * Math.cos((0, __tremolo_ui_functions.radian)(r2 - 90));
@@ -562,12 +549,13 @@ const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defau
 	const x4 = center + center * Math.cos((0, __tremolo_ui_functions.radian)(r4 - 90));
 	const y4 = center + center * Math.sin((0, __tremolo_ui_functions.radian)(r4 - 90));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		className: (0, clsx.default)("tremolo-knob", className),
 		ref: (div) => {
 			elmRef.current = div;
 			wheelRefCallback(div);
 			touchMoveRefCallback(div);
 		},
+		className: (0, clsx.default)("tremolo-knob", className),
+		viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
 		width: size,
 		height: size,
 		tabIndex: 0,
@@ -617,7 +605,7 @@ const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defau
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
 					cx: "50%",
 					cy: "50%",
-					r: `${50 - padding}%`,
+					r: `${thumbSize / 2}%`,
 					fill: thumb || "currentColor"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
 					className: (0, clsx.default)("tremolo-knob-thumb-line", classes?.thumbLine),
@@ -628,7 +616,7 @@ const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defau
 					stroke: thumbLine || "currentColor",
 					strokeWidth: `${thumbLineWeight}%`,
 					style: {
-						transform: `rotate(${-135 + p * 270}deg)`,
+						transform: `rotate(${r1 + p * angleRange}deg)`,
 						transformOrigin: "50% 50%"
 					}
 				})]
@@ -637,6 +625,47 @@ const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defau
 	});
 });
 
+//#endregion
+//#region src/components/NumberInput/type.ts
+function selectUnit(units, value) {
+	let i = 0;
+	for (; i < units.length; i++) if (Math.abs(units[i][1]) > Math.abs(value)) break;
+	return units[Math.max(0, i - 1)];
+}
+function parseValue(inputString, units, digit) {
+	const str = inputString.trim();
+	if (!units || typeof units == "string") {
+		const m$1 = str.match(/-?\d+(\.\d+)?/);
+		let v = Number(m$1?.[0] ?? "0");
+		v = isNaN(v) ? 0 : v;
+		return {
+			rawValue: v,
+			formatValue: (digit != void 0 ? v.toFixed(digit) : v) + (units ?? ""),
+			unit: units ?? ""
+		};
+	}
+	const unitList = units.map(([u, _s]) => u);
+	const scaleList = units.map(([_u, s]) => s);
+	let rawValue$5 = 0;
+	let unit = unitList[0];
+	let formatValue = (digit != void 0 ? rawValue$5.toFixed(digit) : rawValue$5) + unit;
+	const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
+	if (m) {
+		rawValue$5 = Number(m[1]) || 0;
+		const uIndex = unitList.indexOf(m[3]);
+		rawValue$5 *= uIndex != -1 ? scaleList[uIndex] : 1;
+		const [u, scale] = selectUnit(units, rawValue$5);
+		const v = rawValue$5 / scale;
+		formatValue = (digit != void 0 ? v.toFixed(digit) : v) + u;
+		unit = u;
+	}
+	return {
+		rawValue: rawValue$5,
+		formatValue,
+		unit
+	};
+}
+
 //#endregion
 //#region src/components/NumberInput/context.tsx
 function safeClamp(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
@@ -656,14 +685,13 @@ const createNumberInputStore = (initProps) => {
 	return (0, zustand.createStore)()((set) => ({
 		...DEFAULT_PROPS,
 		...initProps,
-		value: (0, __tremolo_ui_functions_NumberInput.parseValue)(String(initProps?.value || ""), initProps?.units, initProps?.digit).formatValue,
-		valueAsNumber: (0, __tremolo_ui_functions_NumberInput.parseValue)(String(initProps?.value || ""), initProps?.units, initProps?.digit).rawValue,
+		value: parseValue(String(initProps?.value || ""), initProps?.units, initProps?.digit).formatValue,
+		valueAsNumber: parseValue(String(initProps?.value || ""), initProps?.units, initProps?.digit).rawValue,
 		increment: () => set((state) => {
 			if (state.readonly) return {};
-			const current = (0, __tremolo_ui_functions_NumberInput.parseValue)(state.value, state.units, state.digit).rawValue;
-			let next = current + (state.step ?? 1);
+			let next = parseValue(state.value, state.units, state.digit).rawValue + (state.step ?? 1);
 			if (state.keepWithinRange) next = safeClamp(next, state.min, state.max);
-			const v = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(next), state.units, state.digit).formatValue;
+			const v = parseValue(String(next), state.units, state.digit).formatValue;
 			state?.onChange?.(next, v);
 			return {
 				value: v,
@@ -672,10 +700,9 @@ const createNumberInputStore = (initProps) => {
 		}),
 		decrement: () => set((state) => {
 			if (state.readonly) return {};
-			const current = (0, __tremolo_ui_functions_NumberInput.parseValue)(state.value, state.units, state.digit).rawValue;
-			let next = current - (state.step ?? 1);
+			let next = parseValue(state.value, state.units, state.digit).rawValue - (state.step ?? 1);
 			if (state.keepWithinRange) next = safeClamp(next, state.min, state.max);
-			const v = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(next), state.units, state.digit).formatValue;
+			const v = parseValue(String(next), state.units, state.digit).formatValue;
 			state?.onChange?.(next, v);
 			return {
 				value: v,
@@ -687,7 +714,7 @@ const createNumberInputStore = (initProps) => {
 			const v = value ?? "";
 			return {
 				value: v,
-				valueAsNumber: (0, __tremolo_ui_functions_NumberInput.parseValue)(v, state.units, state.digit).rawValue
+				valueAsNumber: parseValue(v, state.units, state.digit).rawValue
 			};
 		})
 	}));
@@ -698,7 +725,7 @@ function NumberInputProvider({ children,...props }) {
 	if (!storeRef.current) storeRef.current = createNumberInputStore(props);
 	(0, react.useEffect)(() => {
 		if (storeRef.current) {
-			const parsed = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(props?.value || ""), props?.units, props?.digit);
+			const parsed = parseValue(String(props?.value || ""), props?.units, props?.digit);
 			storeRef.current.setState({
 				...props,
 				value: parsed.formatValue,
@@ -745,8 +772,7 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 		let newValue;
 		if (eventType == "normalized") {
 			if (!min || !max) throw new Error("required parameter: min, max");
-			const n = (0, __tremolo_ui_functions.normalizeValue)(valueAsNumber, min, max);
-			newValue = (0, __tremolo_ui_functions.rawValue)(n + x, min, max);
+			newValue = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(valueAsNumber, min, max) + x, min, max);
 			return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(newValue, step), min, max);
 		} else {
 			newValue = valueAsNumber + x;
@@ -764,7 +790,7 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 		if (!["ArrowUp", "ArrowDown"].includes(key)) return;
 		event.preventDefault();
 		const x = key == "ArrowUp" ? keyboard[1] : -keyboard[1];
-		const parsed = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(updateValueByEvent(keyboard[0], x)));
+		const parsed = parseValue(String(updateValueByEvent(keyboard[0], x)));
 		onChange?.(parsed.rawValue, parsed.formatValue);
 	}, [
 		keyboard,
@@ -777,7 +803,7 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 		event.preventDefault();
 		if (!onChange || event.deltaY == 0) return;
 		const x = Math.sign(event.deltaY) * -wheel[1];
-		const parsed = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(updateValueByEvent(wheel[0], x)));
+		const parsed = parseValue(String(updateValueByEvent(wheel[0], x)));
 		onChange?.(parsed.rawValue, parsed.formatValue);
 	}, { passive: false }, [
 		wheel,
@@ -815,7 +841,7 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 			const v = event.currentTarget.value;
 			const cursorPos = event.target.selectionStart;
 			change(v);
-			const valueAsNumber$1 = (0, __tremolo_ui_functions_NumberInput.parseValue)(v, units, digit).rawValue;
+			const valueAsNumber$1 = parseValue(v, units, digit).rawValue;
 			onChange?.(valueAsNumber$1, v);
 			if (cursorPos) {
 				event.target.selectionStart = cursorPos;
@@ -825,16 +851,16 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 		onFocus: (event) => {
 			setEditing(true);
 			const v = event.currentTarget.value;
-			const parsed = (0, __tremolo_ui_functions_NumberInput.parseValue)(v, units, digit);
+			const parsed = parseValue(v, units, digit);
 			if (selectWithFocus == "all") event.currentTarget.setSelectionRange(0, v.length);
 			else if (selectWithFocus == "number") event.currentTarget.setSelectionRange(0, parsed.formatValue.length - parsed.unit.length);
 			onFocus?.(parsed.rawValue, parsed.formatValue, event);
 		},
 		onBlur: (event) => {
 			setEditing(false);
-			let v = (0, __tremolo_ui_functions_NumberInput.parseValue)(event.currentTarget.value, units, digit).rawValue;
+			let v = parseValue(event.currentTarget.value, units, digit).rawValue;
 			if (clampValueOnBlur) v = safeClamp(v, min, max);
-			const parsed = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(v), units, digit);
+			const parsed = parseValue(String(v), units, digit);
 			change(parsed.formatValue);
 			if (clampValueOnBlur) onChange?.(parsed.rawValue, parsed.formatValue);
 			onBlur?.(parsed.rawValue, parsed.formatValue, event);
@@ -862,6 +888,9 @@ function Stepper({ dynamic = true, children, className,...props }) {
 
 //#endregion
 //#region src/hooks/useInterval.ts
+/**
+* @category hooks
+*/
 function useInterval(callback, delay) {
 	const savedCallback = (0, react.useRef)(callback);
 	(0, react.useEffect)(() => {
@@ -880,6 +909,9 @@ function useInterval(callback, delay) {
 
 //#endregion
 //#region src/hooks/useLongPress.ts
+/**
+* @category hooks
+*/
 function useLongPress(callback, initialDelay = 500, interval = 40) {
 	const [pressed, setPressed] = (0, react.useState)(false);
 	const [delay, setDelay] = (0, react.useState)(initialDelay);
@@ -905,8 +937,7 @@ function IncrementStepper({ size = 12, children, className,...props }) {
 	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
 	const readonly = useNumberInputContext((s) => s.readonly);
 	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
-	const increment = useNumberInputContext((s) => s.increment);
-	const press = useLongPress(increment);
+	const press = useLongPress(useNumberInputContext((s) => s.increment));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, clsx.default)("tremolo-number-input-increment-stepper", className),
 		role: "button",
@@ -937,8 +968,7 @@ function DecrementStepper({ size = 12, children, className,...props }) {
 	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
 	const readonly = useNumberInputContext((s) => s.readonly);
 	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
-	const decrement = useNumberInputContext((s) => s.decrement);
-	const press = useLongPress(decrement);
+	const press = useLongPress(useNumberInputContext((s) => s.decrement));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, clsx.default)("tremolo-number-input-decrement-stepper", className),
 		role: "button",
@@ -967,7 +997,7 @@ function DecrementStepper({ size = 12, children, className,...props }) {
 * Input with some useful functions for entering numerical values.
 * @category NumberInput
 */
-const NumberInput = (0, react.forwardRef)(({ value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = "outline", selectWithFocus = "none", blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ["raw", 1], keyboard = ["raw", 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children,...props }, ref) => {
+const NumberInput = (0, react.forwardRef)(({ value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = "outline", selectWithFocus = "none", blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ["raw", 1], keyboard = ["raw", 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children,...props }, forwardedRef) => {
 	const colors = { "--active-color": activeColor };
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputProvider, {
 		value: String(value),
@@ -986,7 +1016,7 @@ const NumberInput = (0, react.forwardRef)(({ value, min, max, step = 1, units, r
 			"data-stepper": !!children,
 			"data-variant": variant,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalInput, {
-				ref,
+				ref: forwardedRef,
 				readonly,
 				disabled,
 				selectWithFocus,
@@ -1007,6 +1037,7 @@ const NumberInput = (0, react.forwardRef)(({ value, min, max, step = 1, units, r
 //#endregion
 //#region src/hooks/useDragWithElement.ts
 /**
+* @category hooks
 * @returns [refCallback, pointerDownHandler]
 */
 function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd }) {
@@ -1086,9 +1117,7 @@ function usePianoContext(selector) {
 //#region src/components/Piano/KeyLabel.tsx
 /** @category Piano */
 function KeyLabel({ label, className, wrapperClassName, wrapperStyle, __note, __label,...props }) {
-	const noteRange = usePianoContext((s) => s.noteRange);
-	const noteRangeArray = getNoteRangeArray(noteRange);
-	const index = noteRangeArray.indexOf(__note);
+	const index = getNoteRangeArray(usePianoContext((s) => s.noteRange)).indexOf(__note);
 	const content = label ? label(__note, index) : __label && __label(__note, index);
 	return (content != void 0 || content != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, clsx.default)("tremolo-piano-key-label-wrapper", wrapperClassName),
@@ -1114,8 +1143,7 @@ const KeyImpl = (0, react.forwardRef)(({ keyType, noteNumber, width, height, bg,
 	const onPlayNote = usePianoContext((s) => s.onPlayNote);
 	const onStopNote = usePianoContext((s) => s.onStopNote);
 	const label = usePianoContext((s) => s.label);
-	const notePosition = usePianoContext((s) => s.notePosition);
-	const position = notePosition(noteNumber);
+	const position = usePianoContext((s) => s.notePosition)(noteNumber);
 	const disabled = noteNumber > midiMax;
 	const colors = {
 		"--bg": bg,
@@ -1125,10 +1153,10 @@ const KeyImpl = (0, react.forwardRef)(({ keyType, noteNumber, width, height, bg,
 	};
 	(0, react.useImperativeHandle)(ref, () => {
 		return {
-			play() {
+			play(velocity) {
 				if (disabled) return;
 				setPlayed(true);
-				if (onPlayNote) onPlayNote(noteNumber);
+				if (onPlayNote) onPlayNote(noteNumber, velocity);
 			},
 			stop() {
 				setPlayed(false);
@@ -1219,12 +1247,9 @@ const SHORTCUTS = { HOME_ROW: { keys: [
 //#endregion
 //#region src/components/Piano/index.tsx
 /**
-* Piano component
-*
-* TODO:
-* - add scale highlight
+* [noteRange.first, noteRange.first + 1 ..., noteRange.last]
+* @category Piano
 */
-/** @category Piano */
 function getNoteRangeArray(noteRange) {
 	return Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
 }
@@ -1233,7 +1258,7 @@ const blackPerWhiteWidth = defaultBlackKeyWidth / defaultWhiteKeyWidth;
 * Customizable piano component.
 * @category Piano
 */
-function Piano({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? "100%" : 160, whiteNoteWidth: _whiteNoteWidth = defaultWhiteKeyWidth, style, className, onPlayNote, onStopNote, label, children, onPointerDown,...props }) {
+const Piano = (0, react.forwardRef)(({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? "100%" : 160, whiteNoteWidth: _whiteNoteWidth = defaultWhiteKeyWidth, style, className, onPlayNote, onStopNote, label, children, onPointerDown,...props }, forwardedRef) => {
 	const [whiteNoteWidth, setWhiteNoteWidth] = (0, react.useState)(_whiteNoteWidth);
 	const keyRefs = (0, react.useRef)([]);
 	for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) keyRefs.current[i] = (0, react.createRef)();
@@ -1304,9 +1329,7 @@ function Piano({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts,
 	]);
 	const onDrag = (0, react.useCallback)((perX, perY) => {
 		if (!pianoRef.current) return;
-		const x = perX * staticWidth;
-		const y = perY * pianoRef.current.clientHeight;
-		const note = getHitKeyIndex(x, y);
+		const note = getHitKeyIndex(perX * staticWidth, perY * pianoRef.current.clientHeight);
 		const index = noteRangeArray.indexOf(note);
 		if (index == -1) return;
 		if (hitKeyIndex.current != index) {
@@ -1360,6 +1383,25 @@ function Piano({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts,
 		const index = keyboardShortcuts.keys.indexOf(e.key);
 		if (index != -1) keyRefs.current[index]?.current?.stop();
 	});
+	(0, react.useImperativeHandle)(forwardedRef, () => {
+		return {
+			playNote(note, velocity) {
+				const index = noteRangeArray.indexOf(note);
+				if (index != -1) {
+					if (!keyRefs.current[index]?.current?.played()) keyRefs.current[index]?.current?.play(velocity);
+				} else onPlayNote?.(note, velocity);
+			},
+			stopNote(note) {
+				const index = noteRangeArray.indexOf(note);
+				if (index != -1) keyRefs.current[index]?.current?.stop();
+				else onStopNote?.(note);
+			}
+		};
+	}, [
+		noteRangeArray,
+		onPlayNote,
+		onStopNote
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PianoProvider, {
 		notePosition,
 		noteRange,
@@ -1396,7 +1438,7 @@ function Piano({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts,
 			}, note))
 		})
 	});
-}
+});
 
 //#endregion
 //#region src/components/Slider/context.tsx
@@ -1484,6 +1526,22 @@ function ScaleOption({ value, type = "mark-number", label, thickness = 1, length
 	});
 }
 
+//#endregion
+//#region src/components/Slider/type.ts
+function generateOptionsList(options, min, max, step) {
+	const optionsList = [];
+	const per = options[0] == "step" ? step : options[0];
+	const count = Math.floor(max / per) - Math.ceil(min / per) + 1;
+	for (let i = 0; i < count; i++) {
+		const value = (0, __tremolo_ui_functions.toFixed)(per * (Math.ceil(min / per) + i), (0, __tremolo_ui_functions.decimalPart)(per)?.length);
+		optionsList.push({
+			value,
+			type: options[1]
+		});
+	}
+	return optionsList;
+}
+
 //#endregion
 //#region src/components/Slider/Scale.tsx
 /** @category Slider */
@@ -1493,7 +1551,7 @@ function Scale({ gap = 6, options, children, className, style,...props }) {
 	const step = useSliderContext((s) => s.step);
 	const vertical = useSliderContext((s) => s.vertical);
 	const reverse = useSliderContext((s) => s.reverse);
-	const optionsList = options ? (0, __tremolo_ui_functions_Slider.generateOptionsList)(options, min, max, step) : [];
+	const optionsList = options ? generateOptionsList(options, min, max, step) : [];
 	if ((0, __tremolo_ui_functions.xor)(vertical, reverse)) optionsList.reverse();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, clsx.default)("tremolo-slider-scale", className),
@@ -1574,7 +1632,7 @@ function SliderTrack({ length = defaultLength, thickness = defaultThickness, act
 		"data-vertical": vertical,
 		style: !defaultStyle ? style : {
 			...colors,
-			background: (0, __tremolo_ui_functions.xor)(vertical, reverse) ? `linear-gradient(to ${direction}, var(--inactive, #eee) ${__percent}%, var(--active, #7998ec) ${__percent}%)` : `linear-gradient(to ${direction}, var(--active, #7998ec) ${__percent}%, var(--inactive, #eee) ${__percent}%)`,
+			background: (0, __tremolo_ui_functions.xor)(vertical, reverse) ? `linear-gradient(to ${direction}, var(--inactive) ${__percent}%, var(--active) ${__percent}%)` : `linear-gradient(to ${direction}, var(--active) ${__percent}%, var(--inactive) ${__percent}%)`,
 			borderRadius: (0, __tremolo_ui_functions.styleHelper)(thickness, "/", 2),
 			width: !vertical ? length : thickness,
 			height: vertical ? length : thickness,
@@ -1591,7 +1649,7 @@ function SliderTrack({ length = defaultLength, thickness = defaultThickness, act
 * Customizable slider
 * @category Slider
 */
-const Slider = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, vertical = false, reverse = false, bodyNoSelect = true, wheel = ["raw", 1], keyboard = ["raw", 1], disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown,...props }, ref) => {
+const Slider = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, vertical = false, reverse = false, bodyNoSelect = true, wheel = ["raw", 1], keyboard = ["raw", 1], disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown,...props }, forwardedRef) => {
 	const trackElementRef = (0, react.useRef)(null);
 	const thumbRef = (0, react.useRef)(null);
 	const p = (0, __tremolo_ui_functions.toFixed)((0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew) * 100);
@@ -1611,9 +1669,7 @@ const Slider = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, ver
 	const onDrag = (0, react.useCallback)((nx, ny) => {
 		if (!onChange || readonly) return;
 		const n = vertical ? ny : nx;
-		const v = (0, __tremolo_ui_functions.rawValue)(displayReversed ? 1 - n : n, min, max, skew);
-		const v2 = (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, step), min, max);
-		onChange(v2);
+		onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(displayReversed ? 1 - n : n, min, max, skew), step), min, max));
 	}, [
 		displayReversed,
 		max,
@@ -1626,10 +1682,8 @@ const Slider = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, ver
 	]);
 	const updateValueByEvent = (0, react.useCallback)((eventType, x) => {
 		let newValue;
-		if (eventType == "normalized") {
-			const n = (0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew);
-			newValue = (0, __tremolo_ui_functions.rawValue)(n + x, min, max, skew);
-		} else newValue = value + x;
+		if (eventType == "normalized") newValue = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
+		else newValue = value + x;
 		return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(newValue, step), min, max);
 	}, [
 		max,
@@ -1692,7 +1746,7 @@ const Slider = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, ver
 		onChange,
 		updateValueByEvent
 	]);
-	(0, react.useImperativeHandle)(ref, () => {
+	(0, react.useImperativeHandle)(forwardedRef, () => {
 		return {
 			focus() {
 				thumbRef.current?.focus();
@@ -1776,11 +1830,10 @@ const Slider = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, ver
 /** @category WheelObserver */
 function WheelObserver(props) {
 	const { children, onWheel, as: Component = "div",...attributes } = props;
-	const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
-		if (onWheel) onWheel(event);
-	}, { passive: false }, [onWheel]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-		ref: wheelRefCallback,
+		ref: useRefCallbackEvent("wheel", (event) => {
+			if (onWheel) onWheel(event);
+		}, { passive: false }, [onWheel]),
 		...attributes,
 		children
 	});
@@ -1853,7 +1906,7 @@ const defaultValueOptions = {
 * Simple XYPad
 * @category XYPad
 */
-const XYPad = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSelect = true, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children,...props }, ref) => {
+const XYPad = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSelect = true, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children,...props }, forwardedRef) => {
 	const x = (0, react.useMemo)(() => {
 		return {
 			...defaultValueOptions,
@@ -1884,9 +1937,7 @@ const XYPad = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSel
 		if (!onChange || readonly) return;
 		const vx = (0, __tremolo_ui_functions.rawValue)(x.reverse ? 1 - nx$1 : nx$1, x.min, x.max, x.skew);
 		const vy = (0, __tremolo_ui_functions.rawValue)(y.reverse ? 1 - ny$1 : ny$1, y.min, y.max, y.skew);
-		const newX = (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(vx, x.step), x.min, x.max);
-		const newY = (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(vy, y.step), y.min, y.max);
-		onChange(newX, newY);
+		onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(vx, x.step), x.min, x.max), (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(vy, y.step), y.min, y.max));
 	}, [
 		onChange,
 		readonly,
@@ -1903,10 +1954,8 @@ const XYPad = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSel
 	]);
 	const updateValueByEvent = (0, react.useCallback)((eventType, target, x$1) => {
 		let v;
-		if (eventType == "normalized") {
-			const n = (0, __tremolo_ui_functions.normalizeValue)(target.value, target.min, target.max, target.skew);
-			v = (0, __tremolo_ui_functions.rawValue)(n + x$1, target.min, target.max, target.skew);
-		} else v = target.value + x$1;
+		if (eventType == "normalized") v = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(target.value, target.min, target.max, target.skew) + x$1, target.min, target.max, target.skew);
+		else v = target.value + x$1;
 		return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, target.step), target.min, target.max);
 	}, []);
 	const handleKeyDown = (0, react.useCallback)((event) => {
@@ -1973,7 +2022,7 @@ const XYPad = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSel
 		readonly,
 		updateValueByEvent
 	]);
-	(0, react.useImperativeHandle)(ref, () => {
+	(0, react.useImperativeHandle)(forwardedRef, () => {
 		return {
 			focus() {
 				thumbRef.current?.focus();
@@ -2036,6 +2085,9 @@ const XYPad = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSel
 
 //#endregion
 //#region src/hooks/useAnimationFrame.ts
+/**
+* @category hooks
+*/
 function useAnimationFrame(callback = () => {}, deps = []) {
 	const reqIdRef = (0, react.useRef)(-1);
 	const loop = (0, react.useCallback)(() => {
@@ -2048,6 +2100,79 @@ function useAnimationFrame(callback = () => {}, deps = []) {
 	}, [loop]);
 }
 
+//#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.
+* @category hooks
+*/
+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);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (requestOnMount) request();
+	}, [requestOnMount, request]);
+	return {
+		request,
+		midiAccess,
+		error
+	};
+}
+
+//#endregion
+//#region src/hooks/useMIDIMessage.ts
+/**
+* Hooks for when you want to process MIDI events in more detail than useMIDIInput.
+* @category hooks
+*/
+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.
+* @category hooks
+*/
+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]);
+	}, [
+		onNoteOffEvent,
+		onNoteOnEvent,
+		onPitchBendEvent
+	]));
+}
+
 //#endregion
 exports.AnimationCanvas = AnimationCanvas;
 exports.AnimationKnob = AnimationKnob;
@@ -2057,7 +2182,9 @@ exports.DragObserver = DragObserver;
 exports.IncrementStepper = IncrementStepper;
 exports.KeyLabel = KeyLabel;
 exports.Knob = Knob;
+exports.NOT_SUPPORTED = NOT_SUPPORTED;
 exports.NumberInput = NumberInput;
+exports.PERMISSION_DENIED = PERMISSION_DENIED;
 exports.Piano = Piano;
 exports.SHORTCUTS = SHORTCUTS;
 exports.Scale = Scale;
@@ -2078,5 +2205,8 @@ exports.useDragWithElement = useDragWithElement;
 exports.useEventListener = useEventListener;
 exports.useInterval = useInterval;
 exports.useLongPress = useLongPress;
+exports.useMIDIAccess = useMIDIAccess;
+exports.useMIDIInput = useMIDIInput;
+exports.useMIDIMessage = useMIDIMessage;
 exports.useSliderContext = useSliderContext;
 //# sourceMappingURL=index.cjs.map