@tremolo-ui/react 0.1.5 → 0.2.0

package/dist/index.js

@@ -144,8 +144,8 @@ function AnimationCanvas({ draw, init, animate = true, options, width: _width =
 //#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 = useRef(() => {
@@ -176,8 +176,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);
 	};
 }
 
@@ -202,6 +201,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 }) {
@@ -268,9 +268,7 @@ const AnimationKnob = forwardRef(({ value, min, max, defaultValue = min, startVa
 	const isRelativeSize = typeof (size ?? width) == "string" || typeof height == "string";
 	const onDrag = useCallback((_x, y) => {
 		if (!onChange) return;
-		const v = rawValue(valueRef.current - y / 100, min, max, skew);
-		const v2 = clamp(stepValue(v, step), min, max);
-		onChange(v2);
+		onChange(clamp(stepValue(rawValue(valueRef.current - y / 100, min, max, skew), step), min, max));
 	}, [
 		max,
 		min,
@@ -290,10 +288,8 @@ const AnimationKnob = forwardRef(({ value, min, max, defaultValue = min, startVa
 			event.preventDefault();
 			const x = key == "ArrowRight" || key == "ArrowUp" ? keyboard[1] : -keyboard[1];
 			let v;
-			if (keyboard[0] == "normalized") {
-				const n = normalizeValue(value, min, max, skew);
-				v = rawValue(n + x, min, max, skew);
-			} else v = value + x;
+			if (keyboard[0] == "normalized") v = rawValue(normalizeValue(value, min, max, skew) + x, min, max, skew);
+			else v = value + x;
 			onChange(clamp(stepValue(v, step), min, max));
 		}
 	}, [
@@ -320,10 +316,8 @@ const AnimationKnob = forwardRef(({ value, min, max, defaultValue = min, startVa
 		event.preventDefault();
 		const x = event.deltaY > 0 ? -wheel[1] : wheel[1];
 		let v;
-		if (wheel[0] == "normalized") {
-			const n = normalizeValue(value, min, max, skew);
-			v = rawValue(n + x, min, max, skew);
-		} else v = value + x;
+		if (wheel[0] == "normalized") v = rawValue(normalizeValue(value, min, max, skew) + x, min, max, skew);
+		else v = value + x;
 		if (onChange) onChange(clamp(stepValue(v, step), min, max));
 	}, { passive: false }, [
 		wheel,
@@ -435,20 +429,12 @@ function DragObserver(props) {
 *
 * @category Knob
 */
-const Knob = 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 = 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 = useRef(0);
 	const elmRef = useRef(null);
-	const padding = 8;
-	const thumbLineWeight = 6;
-	const thumbLineLength = 35;
-	const lineWeight = size * .06;
-	const p = normalizeValue(value, min, max, skew);
-	const s = normalizeValue(startValue, min, max, skew);
 	const onDrag = useCallback((_x, y) => {
 		if (!onChange || readonly) return;
-		const v = rawValue(valueRef.current - y / 100, min, max, skew);
-		const v2 = clamp(stepValue(v, step), min, max);
-		onChange(v2);
+		onChange(clamp(stepValue(rawValue(valueRef.current - y / 100, min, max, skew), step), min, max));
 	}, [
 		max,
 		min,
@@ -459,10 +445,8 @@ const Knob = forwardRef(({ value, min, max, step = 1, skew = 1, defaultValue = m
 	]);
 	const updateValueByEvent = useCallback((eventType, x) => {
 		let newValue;
-		if (eventType == "normalized") {
-			const n = normalizeValue(value, min, max, skew);
-			newValue = rawValue(n + x, min, max, skew);
-		} else newValue = value + x;
+		if (eventType == "normalized") newValue = rawValue(normalizeValue(value, min, max, skew) + x, min, max, skew);
+		else newValue = value + x;
 		return clamp(stepValue(newValue, step), min, max);
 	}, [
 		max,
@@ -512,7 +496,7 @@ const Knob = forwardRef(({ value, min, max, step = 1, skew = 1, defaultValue = m
 		readonly,
 		updateValueByEvent
 	]);
-	useImperativeHandle(ref, () => {
+	useImperativeHandle(forwardedRef, () => {
 		return {
 			focus() {
 				elmRef.current?.focus();
@@ -522,11 +506,15 @@ const Knob = forwardRef(({ value, min, max, step = 1, skew = 1, defaultValue = m
 			}
 		};
 	}, []);
-	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 - clamp(thumbSize, 0, 100)) / 2;
+	const p = normalizeValue(value, min, max, skew);
+	const s = 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(radian(r1 - 90));
 	const y1 = center + center * Math.sin(radian(r1 - 90));
 	const x2 = center + center * Math.cos(radian(r2 - 90));
@@ -536,12 +524,13 @@ const Knob = forwardRef(({ value, min, max, step = 1, skew = 1, defaultValue = m
 	const x4 = center + center * Math.cos(radian(r4 - 90));
 	const y4 = center + center * Math.sin(radian(r4 - 90));
 	return /* @__PURE__ */ jsxs("svg", {
-		className: clsx("tremolo-knob", className),
 		ref: (div) => {
 			elmRef.current = div;
 			wheelRefCallback(div);
 			touchMoveRefCallback(div);
 		},
+		className: clsx("tremolo-knob", className),
+		viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
 		width: size,
 		height: size,
 		tabIndex: 0,
@@ -572,13 +561,6 @@ const Knob = forwardRef(({ value, min, max, step = 1, skew = 1, defaultValue = m
 				stroke: inactiveLine || "currentColor",
 				strokeWidth: lineWeight
 			}),
-			/* @__PURE__ */ jsx("path", {
-				className: clsx("tremolo-knob-active-line", classes?.activeLine),
-				d: `M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`,
-				fill: "none",
-				stroke: activeLine || "currentColor",
-				strokeWidth: lineWeight
-			}),
 			startValue < max && /* @__PURE__ */ jsx("path", {
 				className: clsx("tremolo-knob-inactive-line", classes?.inactiveLine),
 				d: `M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4}, ${y4}`,
@@ -586,12 +568,19 @@ const Knob = forwardRef(({ value, min, max, step = 1, skew = 1, defaultValue = m
 				stroke: inactiveLine || "currentColor",
 				strokeWidth: lineWeight
 			}),
+			/* @__PURE__ */ jsx("path", {
+				className: clsx("tremolo-knob-active-line", classes?.activeLine),
+				d: `M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`,
+				fill: "none",
+				stroke: activeLine || "currentColor",
+				strokeWidth: lineWeight
+			}),
 			/* @__PURE__ */ jsxs("svg", {
 				className: clsx("tremolo-knob-thumb", classes?.thumb),
 				children: [/* @__PURE__ */ jsx("circle", {
 					cx: "50%",
 					cy: "50%",
-					r: `${50 - padding}%`,
+					r: `${thumbSize / 2}%`,
 					fill: thumb || "currentColor"
 				}), /* @__PURE__ */ jsx("line", {
 					className: clsx("tremolo-knob-thumb-line", classes?.thumbLine),
@@ -602,7 +591,7 @@ const Knob = forwardRef(({ value, min, max, step = 1, skew = 1, defaultValue = m
 					stroke: thumbLine || "currentColor",
 					strokeWidth: `${thumbLineWeight}%`,
 					style: {
-						transform: `rotate(${-135 + p * 270}deg)`,
+						transform: `rotate(${r1 + p * angleRange}deg)`,
 						transformOrigin: "50% 50%"
 					}
 				})]
@@ -675,8 +664,7 @@ const createNumberInputStore = (initProps) => {
 		valueAsNumber: parseValue(String(initProps?.value || ""), initProps?.units, initProps?.digit).rawValue,
 		increment: () => set((state) => {
 			if (state.readonly) return {};
-			const current = 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 = parseValue(String(next), state.units, state.digit).formatValue;
 			state?.onChange?.(next, v);
@@ -687,8 +675,7 @@ const createNumberInputStore = (initProps) => {
 		}),
 		decrement: () => set((state) => {
 			if (state.readonly) return {};
-			const current = 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 = parseValue(String(next), state.units, state.digit).formatValue;
 			state?.onChange?.(next, v);
@@ -733,6 +720,111 @@ function useNumberInputContext(selector) {
 	return useStore(store, selector);
 }
 
+//#endregion
+//#region src/hooks/useInterval.ts
+/**
+* @category hooks
+*/
+function useInterval(callback, delay) {
+	const savedCallback = useRef(callback);
+	useEffect(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+	useEffect(() => {
+		if (delay === null) return;
+		const id = setInterval(() => {
+			savedCallback.current();
+		}, delay);
+		return () => {
+			clearInterval(id);
+		};
+	}, [delay]);
+}
+
+//#endregion
+//#region src/hooks/useLongPress.ts
+/**
+* @category hooks
+*/
+function useLongPress(callback, initialDelay = 500, interval = 40) {
+	const [pressed, setPressed] = useState(false);
+	const [delay, setDelay] = useState(initialDelay);
+	useInterval(() => {
+		callback();
+		setDelay(interval);
+	}, pressed ? delay : null);
+	useEventListener(globalThis.window, "pointerup", () => {
+		setPressed(false);
+		setDelay(initialDelay);
+	});
+	return useCallback(() => {
+		callback();
+		setPressed(true);
+	}, [callback]);
+}
+
+//#endregion
+//#region src/components/NumberInput/DecrementStepper.tsx
+/** @category NumberInput */
+function DecrementStepper({ size = 12, children, className,...props }) {
+	const min = useNumberInputContext((s) => s.min);
+	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+	const readonly = useNumberInputContext((s) => s.readonly);
+	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
+	const press = useLongPress(useNumberInputContext((s) => s.decrement));
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("tremolo-number-input-decrement-stepper", className),
+		role: "button",
+		tabIndex: -1,
+		"aria-disabled": keepWithinRange && valueAsNumber <= (min ?? Number.MIN_SAFE_INTEGER),
+		"aria-readonly": readonly,
+		onPointerDown: press,
+		...props,
+		children: children || /* @__PURE__ */ jsx("svg", {
+			width: size,
+			height: size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+		})
+	});
+}
+
+//#endregion
+//#region src/components/NumberInput/IncrementStepper.tsx
+/** @category NumberInput */
+function IncrementStepper({ size = 12, children, className,...props }) {
+	const max = useNumberInputContext((s) => s.max);
+	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+	const readonly = useNumberInputContext((s) => s.readonly);
+	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
+	const press = useLongPress(useNumberInputContext((s) => s.increment));
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("tremolo-number-input-increment-stepper", className),
+		role: "button",
+		tabIndex: -1,
+		"aria-disabled": keepWithinRange && valueAsNumber >= (max ?? Number.MAX_SAFE_INTEGER),
+		"aria-readonly": readonly,
+		onPointerDown: press,
+		...props,
+		children: children || /* @__PURE__ */ jsx("svg", {
+			width: size,
+			height: size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
+		})
+	});
+}
+
 //#endregion
 //#region src/components/NumberInput/InternalInput.tsx
 const InternalInput = forwardRef(({ disabled, readonly, selectWithFocus, blurOnEnter, clampValueOnBlur, wheel, keyboard, className, onChange, onFocus, onBlur, onKeyDown, children: _children,...props }, ref) => {
@@ -760,8 +852,7 @@ const InternalInput = forwardRef(({ disabled, readonly, selectWithFocus, blurOnE
 		let newValue;
 		if (eventType == "normalized") {
 			if (!min || !max) throw new Error("required parameter: min, max");
-			const n = normalizeValue(valueAsNumber, min, max);
-			newValue = rawValue(n + x, min, max);
+			newValue = rawValue(normalizeValue(valueAsNumber, min, max) + x, min, max);
 			return clamp(stepValue(newValue, step), min, max);
 		} else {
 			newValue = valueAsNumber + x;
@@ -875,114 +966,9 @@ function Stepper({ dynamic = true, children, className,...props }) {
 	});
 }
 
-//#endregion
-//#region src/hooks/useInterval.ts
-function useInterval(callback, delay) {
-	const savedCallback = useRef(callback);
-	useEffect(() => {
-		savedCallback.current = callback;
-	}, [callback]);
-	useEffect(() => {
-		if (delay === null) return;
-		const id = setInterval(() => {
-			savedCallback.current();
-		}, delay);
-		return () => {
-			clearInterval(id);
-		};
-	}, [delay]);
-}
-
-//#endregion
-//#region src/hooks/useLongPress.ts
-function useLongPress(callback, initialDelay = 500, interval = 40) {
-	const [pressed, setPressed] = useState(false);
-	const [delay, setDelay] = useState(initialDelay);
-	useInterval(() => {
-		callback();
-		setDelay(interval);
-	}, pressed ? delay : null);
-	useEventListener(globalThis.window, "pointerup", () => {
-		setPressed(false);
-		setDelay(initialDelay);
-	});
-	return useCallback(() => {
-		callback();
-		setPressed(true);
-	}, [callback]);
-}
-
-//#endregion
-//#region src/components/NumberInput/IncrementStepper.tsx
-/** @category NumberInput */
-function IncrementStepper({ size = 12, children, className,...props }) {
-	const max = useNumberInputContext((s) => s.max);
-	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);
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("tremolo-number-input-increment-stepper", className),
-		role: "button",
-		tabIndex: -1,
-		"aria-disabled": keepWithinRange && valueAsNumber >= (max ?? Number.MAX_SAFE_INTEGER),
-		"aria-readonly": readonly,
-		onPointerDown: press,
-		...props,
-		children: children || /* @__PURE__ */ jsx("svg", {
-			width: size,
-			height: size,
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
-		})
-	});
-}
-
-//#endregion
-//#region src/components/NumberInput/DecrementStepper.tsx
-/** @category NumberInput */
-function DecrementStepper({ size = 12, children, className,...props }) {
-	const min = useNumberInputContext((s) => s.min);
-	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);
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("tremolo-number-input-decrement-stepper", className),
-		role: "button",
-		tabIndex: -1,
-		"aria-disabled": keepWithinRange && valueAsNumber <= (min ?? Number.MIN_SAFE_INTEGER),
-		"aria-readonly": readonly,
-		onPointerDown: press,
-		...props,
-		children: children || /* @__PURE__ */ jsx("svg", {
-			width: size,
-			height: size,
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
-		})
-	});
-}
-
 //#endregion
 //#region src/components/NumberInput/index.tsx
-/**
-* Input with some useful functions for entering numerical values.
-* @category NumberInput
-*/
-const NumberInput = 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 NumberInputImpl = 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__ */ jsx(NumberInputProvider, {
 		value: String(value),
@@ -1001,7 +987,7 @@ const NumberInput = forwardRef(({ value, min, max, step = 1, units, readonly = f
 			"data-stepper": !!children,
 			"data-variant": variant,
 			children: [/* @__PURE__ */ jsx(InternalInput, {
-				ref,
+				ref: forwardedRef,
 				readonly,
 				disabled,
 				selectWithFocus,
@@ -1018,10 +1004,20 @@ const NumberInput = forwardRef(({ value, min, max, step = 1, units, readonly = f
 		})
 	});
 });
+/**
+* Input with some useful functions for entering numerical values.
+* @category NumberInput
+*/
+const NumberInput = Object.assign(NumberInputImpl, {
+	Stepper,
+	IncrementStepper,
+	DecrementStepper
+});
 
 //#endregion
 //#region src/hooks/useDragWithElement.ts
 /**
+* @category hooks
 * @returns [refCallback, pointerDownHandler]
 */
 function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd }) {
@@ -1101,9 +1097,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__ */ jsx("div", {
 		className: clsx("tremolo-piano-key-label-wrapper", wrapperClassName),
@@ -1129,8 +1123,7 @@ const KeyImpl = forwardRef(({ keyType, noteNumber, width, height, bg, color, act
 	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,
@@ -1140,10 +1133,10 @@ const KeyImpl = forwardRef(({ keyType, noteNumber, width, height, bg, color, act
 	};
 	useImperativeHandle(ref, () => {
 		return {
-			play() {
+			play(velocity) {
 				if (disabled) return;
 				setPlayed(true);
-				if (onPlayNote) onPlayNote(noteNumber);
+				if (onPlayNote) onPlayNote(noteNumber, velocity);
 			},
 			stop() {
 				setPlayed(false);
@@ -1234,21 +1227,14 @@ 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);
 }
 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 PianoImpl = 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] = useState(_whiteNoteWidth);
 	const keyRefs = useRef([]);
 	for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) keyRefs.current[i] = createRef();
@@ -1319,9 +1305,7 @@ function Piano({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts,
 	]);
 	const onDrag = 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) {
@@ -1375,6 +1359,25 @@ function Piano({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts,
 		const index = keyboardShortcuts.keys.indexOf(e.key);
 		if (index != -1) keyRefs.current[index]?.current?.stop();
 	});
+	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__ */ jsx(PianoProvider, {
 		notePosition,
 		noteRange,
@@ -1411,7 +1414,16 @@ function Piano({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts,
 			}, note))
 		})
 	});
-}
+});
+/**
+* Customizable piano component.
+* @category Piano
+*/
+const Piano = Object.assign(PianoImpl, {
+	WhiteKey,
+	BlackKey,
+	KeyLabel
+});
 
 //#endregion
 //#region src/components/Slider/context.tsx
@@ -1548,7 +1560,7 @@ function Scale({ gap = 6, options, children, className, style,...props }) {
 /** @category Slider */
 const defaultThumbSize = 22;
 /** @category Slider */
-const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defaultThumbSize, color, children, className, style, __percent }, ref) => {
+const Thumb$1 = forwardRef(({ size, width = defaultThumbSize, height = defaultThumbSize, color, children, className, style, __percent }, ref) => {
 	const wrapperRef = useRef(null);
 	const vertical = useSliderContext((s) => s.vertical);
 	const disabled = useSliderContext((s) => s.disabled);
@@ -1590,7 +1602,7 @@ const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defau
 const defaultLength = 140;
 const defaultThickness = 10;
 /** @category Slider */
-function SliderTrack({ length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, defaultStyle = true, __thumb, __percent = 0,...props }) {
+function Track({ length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, defaultStyle = true, __thumb, __percent = 0,...props }) {
 	const vertical = useSliderContext((s) => s.vertical);
 	const reverse = useSliderContext((s) => s.reverse);
 	const disabled = useSliderContext((s) => s.disabled);
@@ -1605,7 +1617,7 @@ function SliderTrack({ length = defaultLength, thickness = defaultThickness, act
 		"data-vertical": vertical,
 		style: !defaultStyle ? style : {
 			...colors,
-			background: 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: xor(vertical, reverse) ? `linear-gradient(to ${direction}, var(--inactive) ${__percent}%, var(--active) ${__percent}%)` : `linear-gradient(to ${direction}, var(--active) ${__percent}%, var(--inactive) ${__percent}%)`,
 			borderRadius: styleHelper(thickness, "/", 2),
 			width: !vertical ? length : thickness,
 			height: vertical ? length : thickness,
@@ -1618,11 +1630,7 @@ function SliderTrack({ length = defaultLength, thickness = defaultThickness, act
 
 //#endregion
 //#region src/components/Slider/index.tsx
-/**
-* Customizable slider
-* @category Slider
-*/
-const Slider = 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 SliderImpl = 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 = useRef(null);
 	const thumbRef = useRef(null);
 	const p = toFixed(normalizeValue(value, min, max, skew) * 100);
@@ -1633,8 +1641,8 @@ const Slider = forwardRef(({ value, min, max, step = 1, skew = 1, vertical = fal
 	let thumbProps = {};
 	let scaleComponent = void 0;
 	if (children != void 0) React.Children.forEach(children, (child) => {
-		if (React.isValidElement(child)) if (child.type == SliderThumb) thumbProps = child.props;
-		else if (child.type == SliderTrack) trackProps = child.props;
+		if (React.isValidElement(child)) if (child.type == Thumb$1) thumbProps = child.props;
+		else if (child.type == Track) trackProps = child.props;
 		else if (child.type == Scale) scaleComponent = child;
 		else throw new Error("only <SliderThumb> or <SliderTrack>");
 		else throw new Error("children is an invalid element.");
@@ -1642,9 +1650,7 @@ const Slider = forwardRef(({ value, min, max, step = 1, skew = 1, vertical = fal
 	const onDrag = useCallback((nx, ny) => {
 		if (!onChange || readonly) return;
 		const n = vertical ? ny : nx;
-		const v = rawValue(displayReversed ? 1 - n : n, min, max, skew);
-		const v2 = clamp(stepValue(v, step), min, max);
-		onChange(v2);
+		onChange(clamp(stepValue(rawValue(displayReversed ? 1 - n : n, min, max, skew), step), min, max));
 	}, [
 		displayReversed,
 		max,
@@ -1657,10 +1663,8 @@ const Slider = forwardRef(({ value, min, max, step = 1, skew = 1, vertical = fal
 	]);
 	const updateValueByEvent = useCallback((eventType, x) => {
 		let newValue;
-		if (eventType == "normalized") {
-			const n = normalizeValue(value, min, max, skew);
-			newValue = rawValue(n + x, min, max, skew);
-		} else newValue = value + x;
+		if (eventType == "normalized") newValue = rawValue(normalizeValue(value, min, max, skew) + x, min, max, skew);
+		else newValue = value + x;
 		return clamp(stepValue(newValue, step), min, max);
 	}, [
 		max,
@@ -1723,7 +1727,7 @@ const Slider = forwardRef(({ value, min, max, step = 1, skew = 1, vertical = fal
 		onChange,
 		updateValueByEvent
 	]);
-	useImperativeHandle(ref, () => {
+	useImperativeHandle(forwardedRef, () => {
 		return {
 			focus() {
 				thumbRef.current?.focus();
@@ -1787,9 +1791,9 @@ const Slider = forwardRef(({ value, min, max, step = 1, skew = 1, vertical = fal
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "tremolo-slider-track-wrapper",
 					ref: trackElementRef,
-					children: /* @__PURE__ */ jsx(SliderTrack, {
+					children: /* @__PURE__ */ jsx(Track, {
 						__percent: percent,
-						__thumb: /* @__PURE__ */ jsx(SliderThumb, {
+						__thumb: /* @__PURE__ */ jsx(Thumb$1, {
 							ref: thumbRef,
 							__percent: percent,
 							...thumbProps
@@ -1801,17 +1805,26 @@ const Slider = forwardRef(({ value, min, max, step = 1, skew = 1, vertical = fal
 		})
 	});
 });
+/**
+* Customizable slider
+* @category Slider
+*/
+const Slider = Object.assign(SliderImpl, {
+	Thumb: Thumb$1,
+	Track,
+	Scale,
+	ScaleOption
+});
 
 //#endregion
 //#region src/components/WheelObserver/index.tsx
 /** @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__ */ jsx(Component, {
-		ref: wheelRefCallback,
+		ref: useRefCallbackEvent("wheel", (event) => {
+			if (onWheel) onWheel(event);
+		}, { passive: false }, [onWheel]),
 		...attributes,
 		children
 	});
@@ -1820,7 +1833,7 @@ function WheelObserver(props) {
 //#endregion
 //#region src/components/XYPad/Area.tsx
 /** @category XYPad */
-function XYPadArea({ width = 120, height = 120, color, children, className, style, __thumb,...props }) {
+function Area({ width = 120, height = 120, color, children, className, style, __thumb,...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("tremolo-xy-pad-area", className),
 		style: {
@@ -1837,7 +1850,7 @@ function XYPadArea({ width = 120, height = 120, color, children, className, styl
 //#endregion
 //#region src/components/XYPad/Thumb.tsx
 /** @category XYPad */
-const XYPadThumb = forwardRef(({ size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __css,...props }, ref) => {
+const Thumb = forwardRef(({ size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __readonly, __css,...props }, ref) => {
 	const wrapperRef = useRef(null);
 	useImperativeHandle(ref, () => {
 		return {
@@ -1861,6 +1874,7 @@ const XYPadThumb = forwardRef(({ size, width = 22, height = 22, color, children,
 			className: clsx("tremolo-xy-pad-thumb", className),
 			tabIndex: 0,
 			"aria-disabled": __disabled,
+			"aria-readonly": __readonly,
 			style: {
 				"--color": color,
 				width: size ?? width,
@@ -1880,11 +1894,7 @@ const defaultValueOptions = {
 	wheel: ["raw", 1],
 	keyboard: ["raw", 1]
 };
-/**
-* Simple XYPad
-* @category XYPad
-*/
-const XYPad = forwardRef(({ x: _x, y: _y, className, style, bodyNoSelect = true, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children,...props }, ref) => {
+const XYPadImpl = 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 = useMemo(() => {
 		return {
 			...defaultValueOptions,
@@ -1906,8 +1916,8 @@ const XYPad = forwardRef(({ x: _x, y: _y, className, style, bodyNoSelect = true,
 	let areaProps = {};
 	let thumbProps = {};
 	if (children != void 0) React.Children.forEach(children, (child) => {
-		if (React.isValidElement(child)) if (child.type == XYPadThumb) thumbProps = child.props;
-		else if (child.type == XYPadArea) areaProps = child.props;
+		if (React.isValidElement(child)) if (child.type == Thumb) thumbProps = child.props;
+		else if (child.type == Area) areaProps = child.props;
 		else throw new Error("only <XYPadThumb> or <XYPadArea>");
 		else throw new Error("children is an invalid element.");
 	});
@@ -1915,9 +1925,7 @@ const XYPad = forwardRef(({ x: _x, y: _y, className, style, bodyNoSelect = true,
 		if (!onChange || readonly) return;
 		const vx = rawValue(x.reverse ? 1 - nx$1 : nx$1, x.min, x.max, x.skew);
 		const vy = rawValue(y.reverse ? 1 - ny$1 : ny$1, y.min, y.max, y.skew);
-		const newX = clamp(stepValue(vx, x.step), x.min, x.max);
-		const newY = clamp(stepValue(vy, y.step), y.min, y.max);
-		onChange(newX, newY);
+		onChange(clamp(stepValue(vx, x.step), x.min, x.max), clamp(stepValue(vy, y.step), y.min, y.max));
 	}, [
 		onChange,
 		readonly,
@@ -1934,10 +1942,8 @@ const XYPad = forwardRef(({ x: _x, y: _y, className, style, bodyNoSelect = true,
 	]);
 	const updateValueByEvent = useCallback((eventType, target, x$1) => {
 		let v;
-		if (eventType == "normalized") {
-			const n = normalizeValue(target.value, target.min, target.max, target.skew);
-			v = rawValue(n + x$1, target.min, target.max, target.skew);
-		} else v = target.value + x$1;
+		if (eventType == "normalized") v = rawValue(normalizeValue(target.value, target.min, target.max, target.skew) + x$1, target.min, target.max, target.skew);
+		else v = target.value + x$1;
 		return clamp(stepValue(v, target.step), target.min, target.max);
 	}, []);
 	const handleKeyDown = useCallback((event) => {
@@ -2004,7 +2010,7 @@ const XYPad = forwardRef(({ x: _x, y: _y, className, style, bodyNoSelect = true,
 		readonly,
 		updateValueByEvent
 	]);
-	useImperativeHandle(ref, () => {
+	useImperativeHandle(forwardedRef, () => {
 		return {
 			focus() {
 				thumbRef.current?.focus();
@@ -2049,10 +2055,11 @@ const XYPad = forwardRef(({ x: _x, y: _y, className, style, bodyNoSelect = true,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "tremolo-xy-pad-area-wrapper",
 			ref: areaElementRef,
-			children: /* @__PURE__ */ jsx(XYPadArea, {
-				__thumb: /* @__PURE__ */ jsx(XYPadThumb, {
+			children: /* @__PURE__ */ jsx(Area, {
+				__thumb: /* @__PURE__ */ jsx(Thumb, {
 					ref: thumbRef,
 					__disabled: disabled,
+					__readonly: readonly,
 					__css: {
 						top: `${percentY}%`,
 						left: `${percentX}%`
@@ -2064,9 +2071,20 @@ const XYPad = forwardRef(({ x: _x, y: _y, className, style, bodyNoSelect = true,
 		})
 	});
 });
+/**
+* Simple XYPad
+* @category XYPad
+*/
+const XYPad = Object.assign(XYPadImpl, {
+	Thumb,
+	Area
+});
 
 //#endregion
 //#region src/hooks/useAnimationFrame.ts
+/**
+* @category hooks
+*/
 function useAnimationFrame(callback = () => {}, deps = []) {
 	const reqIdRef = useRef(-1);
 	const loop = useCallback(() => {
@@ -2080,5 +2098,78 @@ function useAnimationFrame(callback = () => {}, deps = []) {
 }
 
 //#endregion
-export { AnimationCanvas, AnimationKnob, BlackKey, DecrementStepper, DragObserver, IncrementStepper, KeyLabel, Knob, NumberInput, Piano, SHORTCUTS, Scale, ScaleOption, Slider, SliderThumb, SliderTrack, Stepper, WheelObserver, WhiteKey, XYPad, XYPadArea, XYPadThumb, getNoteRangeArray, useAnimationFrame, useDrag, useDragWithElement, useEventListener, useInterval, useLongPress, useSliderContext };
+//#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] = 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);
+	}, []);
+	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) {
+	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, 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
+export { AnimationCanvas, AnimationKnob, DragObserver, Knob, NOT_SUPPORTED, NumberInput, PERMISSION_DENIED, Piano, SHORTCUTS, Slider, WheelObserver, XYPad, getNoteRangeArray, useAnimationFrame, useDrag, useDragWithElement, useEventListener, useInterval, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useSliderContext };
 //# sourceMappingURL=index.js.map