@tremolo-ui/react 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -0,0 +1,2082 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : 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"));
+
+//#region src/components/AnimationCanvas/canvas.ts
+const drawingState = [
+	"strokeStyle",
+	"fillStyle",
+	"globalAlpha",
+	"lineWidth",
+	"lineCap",
+	"lineJoin",
+	"miterLimit",
+	"lineDashOffset",
+	"shadowOffsetX",
+	"shadowOffsetY",
+	"shadowBlur",
+	"shadowColor",
+	"globalCompositeOperation",
+	"font",
+	"textAlign",
+	"textBaseline",
+	"direction",
+	"imageSmoothingEnabled"
+];
+
+//#endregion
+//#region src/components/AnimationCanvas/index.tsx
+function setDprConfig(canvas, context, width, height, dpr) {
+	canvas.width = width * dpr;
+	canvas.height = height * dpr;
+	context.setTransform(1, 0, 0, 1, 0, 0);
+	context.scale(dpr, 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 }) {
+	const canvasRef = (0, react.useRef)(null);
+	const memoCanvasRef = (0, react.useRef)(null);
+	const reqIdRef = (0, react.useRef)(-1);
+	const widthRef = (0, react.useRef)(0);
+	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 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));
+		draw(context, {
+			width: width$1.current,
+			height: height$1.current,
+			count: count + 1,
+			deltaTime,
+			elapsedTime,
+			fps: 1e3 / deltaTime
+		});
+	}, [draw]);
+	(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;
+		if (relativeSize) {
+			const parent = canvas.parentElement;
+			if (!parent) throw new Error("Canvas doesn't have a parent element.");
+			const memoCanvas = memoCanvasRef.current;
+			const memoContext = memoCanvas?.getContext("2d", options);
+			const ro = new ResizeObserver((entries) => {
+				for (const entry of entries) {
+					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;
+						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);
+				}
+			});
+			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);
+			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);
+			return () => {
+				if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current);
+			};
+		}
+	}, [
+		loop,
+		init,
+		options,
+		reduceFlickering,
+		relativeSize
+	]);
+	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,
+		ref: canvasRef,
+		onContextMenu,
+		...props
+	}), relativeSize && reduceFlickering && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+		style: { display: "none" },
+		ref: memoCanvasRef
+	})] });
+}
+
+//#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
+*/
+function useCallbackRef(callback, deps = []) {
+	const callbackRef = (0, react.useRef)(() => {
+		throw new Error("Cannot call an event handler while rendering.");
+	});
+	(0, react.useInsertionEffect)(() => {
+		callbackRef.current = callback;
+	});
+	return (0, react.useCallback)((...args) => callbackRef.current?.(...args), deps);
+}
+
+//#endregion
+//#region src/hooks/useEventListener.ts
+function useEventListener(target, event, handler, options) {
+	const listener = useCallbackRef(handler);
+	(0, react.useEffect)(() => {
+		const node = typeof target === "function" ? target() : target ?? document;
+		if (!handler || !node) return;
+		node.addEventListener(event, listener, options);
+		return () => {
+			node.removeEventListener(event, listener, options);
+		};
+	}, [
+		event,
+		target,
+		options,
+		listener,
+		handler
+	]);
+	return () => {
+		const node = typeof target === "function" ? target() : target ?? document;
+		node?.removeEventListener(event, listener, options);
+	};
+}
+
+//#endregion
+//#region src/hooks/useRefCallbackEvent.ts
+function useRefCallbackEvent(event, handler, options, deps = []) {
+	return (0, react.useMemo)(() => {
+		let cleanup;
+		return (node) => {
+			if (!node) {
+				cleanup?.();
+				return;
+			}
+			node.addEventListener(event, handler, options);
+			cleanup = () => {
+				node.removeEventListener(event, handler, options);
+			};
+		};
+	}, deps);
+}
+
+//#endregion
+//#region src/hooks/useDrag.ts
+/**
+* @returns [refCallback, pointerDownHandler]
+*/
+function useDrag({ threshold = 1, onDrag, onDragStart, onDragEnd }) {
+	const dragOffsetX = (0, react.useRef)(void 0);
+	const dragOffsetY = (0, react.useRef)(void 0);
+	const dragStartX = (0, react.useRef)(0);
+	const dragStartY = (0, react.useRef)(0);
+	const handleDrag = (0, react.useCallback)((event, first = false) => {
+		const isTouch = event instanceof TouchEvent;
+		if (isTouch && event.cancelable) event.preventDefault();
+		const screenX = isTouch ? event.touches[0].screenX : event.screenX;
+		const screenY = isTouch ? event.touches[0].screenY : event.screenY;
+		let deltaX = 0;
+		let deltaY = 0;
+		if (first) {
+			dragStartX.current = screenX;
+			dragStartY.current = screenY;
+		}
+		if (dragOffsetX.current) {
+			deltaX = screenX - dragOffsetX.current;
+			dragOffsetX.current = screenX;
+		}
+		if (dragOffsetY.current) {
+			deltaY = screenY - dragOffsetY.current;
+			dragOffsetY.current = screenY;
+		}
+		if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return;
+		onDrag(screenX - dragStartX.current, screenY - dragStartY.current, deltaX, deltaY);
+	}, [threshold, onDrag]);
+	const refHandler = useRefCallbackEvent("touchmove", handleDrag, { passive: false }, [onDrag]);
+	const pointerDownHandler = (0, react.useCallback)((event) => {
+		dragOffsetX.current = event.screenX;
+		dragOffsetY.current = event.screenY;
+		handleDrag(event, true);
+		onDragStart?.();
+	}, [handleDrag, onDragStart]);
+	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/_util/index.ts
+function addNoSelect() {
+	document.body.classList.add("tremolo-no-select");
+}
+function removeNoSelect() {
+	document.body.classList.remove("tremolo-no-select");
+}
+
+//#endregion
+//#region src/components/AnimationKnob/index.tsx
+/**
+* Animatable rotary knob.
+* @category AnimationKnob
+*/
+const AnimationKnob = (0, react.forwardRef)(({ value, min, max, defaultValue = min, startValue = min, step = 1, skew = 1, size, width = 50, height = 50, activeColor = "#7998ec", inactiveColor = "#eee", bg = "#ccc", thumb = "#4e76e6", lineWeight = 6, thumbWeight = 4, draw, bodyNoSelect = true, wheel = ["raw", 1], keyboard = ["raw", 1], enableDoubleClickDefault = true, style, className, onChange,...props }, ref) => {
+	const valueRef = (0, react.useRef)(0);
+	const elmRef = (0, react.useRef)(null);
+	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);
+	}, [
+		max,
+		min,
+		onChange,
+		skew,
+		step
+	]);
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		if (!keyboard || !onChange) return;
+		const key = event.key;
+		if ([
+			"ArrowRight",
+			"ArrowLeft",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(key)) {
+			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;
+			onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, step), min, max));
+		}
+	}, [
+		value,
+		min,
+		max,
+		step,
+		skew,
+		keyboard,
+		onChange
+	]);
+	const [touchMoveRefCallback, pointerDownHandler] = useDrag({
+		onDrag,
+		onDragStart: () => {
+			valueRef.current = (0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew);
+			if (bodyNoSelect) addNoSelect();
+		},
+		onDragEnd: () => {
+			if (bodyNoSelect) removeNoSelect();
+		}
+	});
+	const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+		if (!wheel) return;
+		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 (onChange) onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, step), min, max));
+	}, { passive: false }, [
+		wheel,
+		value,
+		min,
+		max,
+		skew,
+		step,
+		onChange
+	]);
+	(0, react.useImperativeHandle)(ref, () => {
+		return {
+			focus() {
+				elmRef.current?.focus();
+			},
+			blur() {
+				elmRef.current?.blur();
+			}
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("tremolo-animation-knob", className),
+		ref: (div) => {
+			elmRef.current = div;
+			wheelRefCallback(div);
+			touchMoveRefCallback(div);
+		},
+		role: "slider",
+		tabIndex: 0,
+		"aria-valuenow": value,
+		"aria-valuemax": max,
+		"aria-valuemin": min,
+		style: {
+			display: "inline-block",
+			width: size ?? width,
+			height: size ?? height,
+			cursor: "pointer",
+			WebkitTapHighlightColor: "transparent",
+			...style
+		},
+		onPointerDown: pointerDownHandler,
+		onDoubleClick: () => {
+			if (enableDoubleClickDefault && onChange) onChange(defaultValue);
+		},
+		onKeyDown: handleKeyDown,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimationCanvas, {
+			...isRelativeSize ? { relativeSize: true } : {
+				width: size ?? width,
+				height: size ?? height
+			},
+			draw: draw ? draw : (ctx, { width: width$1, height: height$1 }) => {
+				const p = (0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew);
+				const startP = (0, __tremolo_ui_functions.normalizeValue)(startValue, min, max, skew);
+				const cx = width$1 / 2;
+				const cy = height$1 / 2;
+				const r = Math.min(cx, cy);
+				if (r <= 0) return;
+				ctx.clearRect(0, 0, width$1, height$1);
+				ctx.lineCap = "butt";
+				ctx.beginPath();
+				ctx.fillStyle = bg;
+				ctx.arc(cx, cy, r - .5, 0, 2 * Math.PI);
+				ctx.fill();
+				ctx.lineWidth = lineWeight;
+				ctx.beginPath();
+				ctx.strokeStyle = inactiveColor;
+				ctx.arc(cx, cy, r - .5 - lineWeight / 2, (0, __tremolo_ui_functions.radian)(135), (0, __tremolo_ui_functions.radian)(45));
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.strokeStyle = activeColor;
+				ctx.arc(cx, cy, r - .5 - lineWeight / 2, (0, __tremolo_ui_functions.radian)(135 + 270 * startP), (0, __tremolo_ui_functions.radian)(135 + 270 * p), p < startP);
+				ctx.stroke();
+				ctx.lineCap = "round";
+				ctx.beginPath();
+				ctx.moveTo(cx, cy);
+				ctx.lineTo(cx + Math.cos((0, __tremolo_ui_functions.radian)(135 + 270 * p)) * (r - .5 - thumbWeight / 2), cy + Math.sin((0, __tremolo_ui_functions.radian)(135 + 270 * p)) * (r - .5 - thumbWeight / 2));
+				ctx.strokeStyle = thumb;
+				ctx.lineWidth = thumbWeight;
+				ctx.stroke();
+			}
+		})
+	});
+});
+
+//#endregion
+//#region src/components/DragObserver/index.tsx
+/** @category DragObserver */
+function DragObserver(props) {
+	const { as: Component = "div", threshold = 1, children, onDrag, onDragStart, onDragEnd,...attributes } = props;
+	const [refCallback, pointerDownHandler] = useDrag({
+		threshold,
+		onDrag,
+		onDragStart,
+		onDragEnd
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		ref: refCallback,
+		onPointerDown: pointerDownHandler,
+		...attributes,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/Knob/index.tsx
+/**
+* Interactive rotary knob component implemented in SVG.
+*
+* @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 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);
+	}, [
+		max,
+		min,
+		onChange,
+		readonly,
+		skew,
+		step
+	]);
+	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;
+		return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(newValue, step), min, max);
+	}, [
+		max,
+		min,
+		skew,
+		step,
+		value
+	]);
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		if (!keyboard || !onChange || readonly) return;
+		const key = event.key;
+		if ([
+			"ArrowRight",
+			"ArrowLeft",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(key)) {
+			event.preventDefault();
+			const x = key == "ArrowRight" || key == "ArrowUp" ? keyboard[1] : -keyboard[1];
+			onChange(updateValueByEvent(keyboard[0], x));
+		}
+	}, [
+		keyboard,
+		onChange,
+		readonly,
+		updateValueByEvent
+	]);
+	const [touchMoveRefCallback, pointerDownHandler] = useDrag({
+		onDrag,
+		onDragStart: () => {
+			valueRef.current = (0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew);
+			if (bodyNoSelect) addNoSelect();
+		},
+		onDragEnd: () => {
+			if (bodyNoSelect) removeNoSelect();
+		}
+	});
+	const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+		if (!wheel || readonly) return;
+		event.preventDefault();
+		if (!onChange || event.deltaY == 0) return;
+		const x = Math.sign(event.deltaY) * -wheel[1];
+		onChange(updateValueByEvent(wheel[0], x));
+	}, { passive: false }, [
+		wheel,
+		onChange,
+		readonly,
+		updateValueByEvent
+	]);
+	(0, react.useImperativeHandle)(ref, () => {
+		return {
+			focus() {
+				elmRef.current?.focus();
+			},
+			blur() {
+				elmRef.current?.blur();
+			}
+		};
+	}, []);
+	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 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));
+	const y2 = center + center * Math.sin((0, __tremolo_ui_functions.radian)(r2 - 90));
+	const x3 = center + center * Math.cos((0, __tremolo_ui_functions.radian)(r3 - 90));
+	const y3 = center + center * Math.sin((0, __tremolo_ui_functions.radian)(r3 - 90));
+	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);
+		},
+		width: size,
+		height: size,
+		tabIndex: 0,
+		role: "slider",
+		"aria-valuenow": value,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-disabled": disabled,
+		"aria-readonly": readonly,
+		onPointerDown: (event) => {
+			pointerDownHandler(event);
+			onPointerDown?.(event);
+		},
+		onDoubleClick: (event) => {
+			if (enableDoubleClickDefault && onChange) onChange(defaultValue);
+			onDoubleClick?.(event);
+		},
+		onKeyDown: (event) => {
+			handleKeyDown(event);
+			onKeyDown?.(event);
+		},
+		...props,
+		children: [
+			startValue > min && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				className: (0, clsx.default)("tremolo-knob-inactive-line", classes?.inactiveLine),
+				d: `M ${x1} ${y1} A ${center} ${center} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2}, ${y2}`,
+				fill: "none",
+				stroke: inactiveLine || "currentColor",
+				strokeWidth: lineWeight
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("path", {
+				className: (0, clsx.default)("tremolo-knob-inactive-line", classes?.inactiveLine),
+				d: `M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4}, ${y4}`,
+				fill: "none",
+				stroke: inactiveLine || "currentColor",
+				strokeWidth: lineWeight
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				className: (0, clsx.default)("tremolo-knob-thumb", classes?.thumb),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "50%",
+					cy: "50%",
+					r: `${50 - padding}%`,
+					fill: thumb || "currentColor"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+					className: (0, clsx.default)("tremolo-knob-thumb-line", classes?.thumbLine),
+					x1: "50%",
+					y1: `${padding}%`,
+					x2: "50%",
+					y2: `${thumbLineLength}%`,
+					stroke: thumbLine || "currentColor",
+					strokeWidth: `${thumbLineWeight}%`,
+					style: {
+						transform: `rotate(${-135 + p * 270}deg)`,
+						transformOrigin: "50% 50%"
+					}
+				})]
+			})
+		]
+	});
+});
+
+//#endregion
+//#region src/components/NumberInput/context.tsx
+function safeClamp(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
+	return (0, __tremolo_ui_functions.clamp)(value, min, max);
+}
+const createNumberInputStore = (initProps) => {
+	const DEFAULT_PROPS = {
+		value: "",
+		valueAsNumber: 0,
+		min: 0,
+		max: 0,
+		step: 1,
+		readonly: false,
+		keepWithinRange: true,
+		onChange: (_v, _t) => {}
+	};
+	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,
+		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);
+			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;
+			state?.onChange?.(next, v);
+			return {
+				value: v,
+				valueAsNumber: next
+			};
+		}),
+		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);
+			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;
+			state?.onChange?.(next, v);
+			return {
+				value: v,
+				valueAsNumber: next
+			};
+		}),
+		change: (value) => set((state) => {
+			if (state.readonly) return {};
+			const v = value ?? "";
+			return {
+				value: v,
+				valueAsNumber: (0, __tremolo_ui_functions_NumberInput.parseValue)(v, state.units, state.digit).rawValue
+			};
+		})
+	}));
+};
+const NumberInputContext = (0, react.createContext)(null);
+function NumberInputProvider({ children,...props }) {
+	const storeRef = (0, react.useRef)(null);
+	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);
+			storeRef.current.setState({
+				...props,
+				value: parsed.formatValue,
+				valueAsNumber: parsed.rawValue
+			});
+		} else storeRef.current = createNumberInputStore(props);
+	}, [props]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputContext.Provider, {
+		value: storeRef.current,
+		children
+	});
+}
+/** @category NumberInput */
+function useNumberInputContext(selector) {
+	const store = (0, react.useContext)(NumberInputContext);
+	if (!store) throw new Error("Missing NumberInputContext.Provider in the tree");
+	return (0, zustand.useStore)(store, selector);
+}
+
+//#endregion
+//#region src/components/NumberInput/InternalInput.tsx
+const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFocus, blurOnEnter, clampValueOnBlur, wheel, keyboard, className, onChange, onFocus, onBlur, onKeyDown, children: _children,...props }, ref) => {
+	const elmRef = (0, react.useRef)(null);
+	const [editing, setEditing] = (0, react.useState)(false);
+	const value = useNumberInputContext((s) => s.value);
+	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+	const min = useNumberInputContext((s) => s.min);
+	const max = useNumberInputContext((s) => s.max);
+	const step = useNumberInputContext((s) => s.step);
+	const units = useNumberInputContext((s) => s.units);
+	const digit = useNumberInputContext((s) => s.digit);
+	const change = useNumberInputContext((s) => s.change);
+	const error = (0, react.useMemo)(() => {
+		if (editing) return false;
+		const v = valueAsNumber;
+		return (min ?? -Infinity) > v || v > (max ?? Infinity);
+	}, [
+		editing,
+		max,
+		min,
+		valueAsNumber
+	]);
+	const updateValueByEvent = (0, react.useCallback)((eventType, x) => {
+		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);
+			return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(newValue, step), min, max);
+		} else {
+			newValue = valueAsNumber + x;
+			return (0, __tremolo_ui_functions.stepValue)(newValue, step);
+		}
+	}, [
+		max,
+		min,
+		step,
+		valueAsNumber
+	]);
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		if (!keyboard || !onChange || readonly) return;
+		const key = event.key;
+		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)));
+		onChange?.(parsed.rawValue, parsed.formatValue);
+	}, [
+		keyboard,
+		readonly,
+		onChange,
+		updateValueByEvent
+	]);
+	const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+		if (!wheel || readonly) return;
+		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)));
+		onChange?.(parsed.rawValue, parsed.formatValue);
+	}, { passive: false }, [
+		wheel,
+		readonly,
+		onChange,
+		updateValueByEvent
+	]);
+	(0, react.useImperativeHandle)(ref, () => {
+		return {
+			focus() {
+				elmRef.current?.focus();
+			},
+			blur() {
+				elmRef.current?.blur();
+			}
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref: (input) => {
+			elmRef.current = input;
+			wheelRefCallback(input);
+		},
+		className: (0, clsx.default)("tremolo-number-input", className),
+		value,
+		min,
+		max,
+		step,
+		type: "text",
+		"aria-disabled": disabled,
+		"aria-readonly": readonly,
+		tabIndex: -1,
+		"data-error": error,
+		onChange: (event) => {
+			if (readonly) return;
+			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;
+			onChange?.(valueAsNumber$1, v);
+			if (cursorPos) {
+				event.target.selectionStart = cursorPos;
+				event.target.selectionEnd = cursorPos;
+			}
+		},
+		onFocus: (event) => {
+			setEditing(true);
+			const v = event.currentTarget.value;
+			const parsed = (0, __tremolo_ui_functions_NumberInput.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;
+			if (clampValueOnBlur) v = safeClamp(v, min, max);
+			const parsed = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(v), units, digit);
+			change(parsed.formatValue);
+			if (clampValueOnBlur) onChange?.(parsed.rawValue, parsed.formatValue);
+			onBlur?.(parsed.rawValue, parsed.formatValue, event);
+		},
+		onKeyDown: (event) => {
+			if (blurOnEnter && event.key == "Enter") event.currentTarget.blur();
+			handleKeyDown(event);
+			onKeyDown?.(event);
+		},
+		...props
+	});
+});
+
+//#endregion
+//#region src/components/NumberInput/Stepper.tsx
+/** @category NumberInput */
+function Stepper({ dynamic = true, children, className,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("tremolo-number-input-stepper", className),
+		"data-dynamic": dynamic,
+		...props,
+		children
+	});
+}
+
+//#endregion
+//#region src/hooks/useInterval.ts
+function useInterval(callback, delay) {
+	const savedCallback = (0, react.useRef)(callback);
+	(0, react.useEffect)(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+	(0, react.useEffect)(() => {
+		if (delay === null) return;
+		const id = setInterval(() => {
+			savedCallback.current();
+		}, delay);
+		return () => {
+			clearInterval(id);
+		};
+	}, [delay]);
+}
+
+//#endregion
+//#region src/hooks/useLongPress.ts
+function useLongPress(callback, initialDelay = 500, interval = 40) {
+	const [pressed, setPressed] = (0, react.useState)(false);
+	const [delay, setDelay] = (0, react.useState)(initialDelay);
+	useInterval(() => {
+		callback();
+		setDelay(interval);
+	}, pressed ? delay : null);
+	useEventListener(globalThis.window, "pointerup", () => {
+		setPressed(false);
+		setDelay(initialDelay);
+	});
+	return (0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("svg", {
+			width: size,
+			height: size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("svg", {
+			width: size,
+			height: size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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 = (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 colors = { "--active-color": activeColor };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputProvider, {
+		value: String(value),
+		min,
+		max,
+		step,
+		units,
+		digit,
+		readonly,
+		keepWithinRange,
+		onChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("tremolo-number-input-wrapper", wrapperClassName),
+			tabIndex: 0,
+			style: { ...colors },
+			"data-stepper": !!children,
+			"data-variant": variant,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalInput, {
+				ref,
+				readonly,
+				disabled,
+				selectWithFocus,
+				blurOnEnter,
+				clampValueOnBlur,
+				wheel,
+				keyboard,
+				className,
+				onChange,
+				onFocus,
+				onBlur,
+				...props
+			}), children]
+		})
+	});
+});
+
+//#endregion
+//#region src/hooks/useDragWithElement.ts
+/**
+* @returns [refCallback, pointerDownHandler]
+*/
+function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd }) {
+	const dragged = (0, react.useRef)(false);
+	const normalizedX = (0, react.useRef)(0);
+	const normalizedY = (0, react.useRef)(0);
+	const handleDrag = (0, react.useCallback)((event) => {
+		if (!baseElementRef.current || !dragged.current) return;
+		const isTouch = event instanceof TouchEvent;
+		if (isTouch && event.cancelable) event.preventDefault();
+		const { left, top, right, bottom } = baseElementRef.current.getBoundingClientRect();
+		const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
+		const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
+		const nx = (0, __tremolo_ui_functions.normalizeValue)(mouseX, left, right);
+		const ny = (0, __tremolo_ui_functions.normalizeValue)(mouseY, top, bottom);
+		normalizedX.current = nx;
+		normalizedY.current = ny;
+		onDrag(nx, ny);
+	}, [onDrag, baseElementRef]);
+	const refHandler = useRefCallbackEvent("touchmove", handleDrag, { passive: false }, [onDrag]);
+	const pointerDownHandler = (0, react.useCallback)((event) => {
+		dragged.current = true;
+		handleDrag(event);
+		onDragStart?.(normalizedX.current, normalizedY.current);
+	}, [handleDrag, onDragStart]);
+	useEventListener(globalThis.window, "pointermove", handleDrag);
+	useEventListener(globalThis.window, "pointerup", () => {
+		if (!dragged.current) return;
+		dragged.current = false;
+		onDragEnd?.(normalizedX.current, normalizedY.current);
+	});
+	return [refHandler, pointerDownHandler];
+}
+
+//#endregion
+//#region src/components/Piano/context.tsx
+const createPianoStore = (initProps) => {
+	const DEFAULT_PROPS = {
+		noteRange: {
+			first: 0,
+			last: 127
+		},
+		glissando: true,
+		midiMax: 127,
+		fill: false,
+		label: () => void 0,
+		onPlayNote: () => {},
+		onStopNote: () => {}
+	};
+	return (0, zustand.createStore)()(() => ({
+		...DEFAULT_PROPS,
+		...initProps,
+		notePosition: initProps.notePosition
+	}));
+};
+const PianoContext = (0, react.createContext)(null);
+function PianoProvider({ children,...props }) {
+	const storeRef = (0, react.useRef)(null);
+	if (!storeRef.current) storeRef.current = createPianoStore(props);
+	(0, react.useEffect)(() => {
+		if (storeRef.current) storeRef.current.setState(props);
+		else storeRef.current = createPianoStore(props);
+	}, [props]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PianoContext.Provider, {
+		value: storeRef.current,
+		children
+	});
+}
+/** @category Piano */
+function usePianoContext(selector) {
+	const store = (0, react.useContext)(PianoContext);
+	if (!store) throw new Error("Missing PianoContext.Provider in the tree");
+	return (0, zustand.useStore)(store, selector);
+}
+
+//#endregion
+//#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 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),
+		style: wrapperStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("tremolo-piano-key-label", className),
+			...props,
+			children: content
+		})
+	});
+}
+
+//#endregion
+//#region src/components/Piano/key.tsx
+/** @category Piano */
+const defaultWhiteKeyWidth = 40;
+/** @category Piano */
+const defaultBlackKeyWidth = 26;
+const KeyImpl = (0, react.forwardRef)(({ keyType, noteNumber, width, height, bg, color, activeBg, activeColor, className, style, children, __width,...props }, ref) => {
+	const [played, setPlayed] = (0, react.useState)(false);
+	const midiMax = usePianoContext((s) => s.midiMax);
+	const fill = usePianoContext((s) => s.fill);
+	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 disabled = noteNumber > midiMax;
+	const colors = {
+		"--bg": bg,
+		"--color": color,
+		"--active-bg": activeBg,
+		"--active-color": activeColor
+	};
+	(0, react.useImperativeHandle)(ref, () => {
+		return {
+			play() {
+				if (disabled) return;
+				setPlayed(true);
+				if (onPlayNote) onPlayNote(noteNumber);
+			},
+			stop() {
+				setPlayed(false);
+				if (onStopNote) onStopNote(noteNumber);
+			},
+			played() {
+				return played;
+			}
+		};
+	}, [
+		disabled,
+		noteNumber,
+		onPlayNote,
+		onStopNote,
+		played
+	]);
+	let keyLabelProps = {};
+	if (children != void 0) react.default.Children.forEach(children, (child) => {
+		if (react.default.isValidElement(child)) if (child.type == KeyLabel) keyLabelProps = child.props;
+		else throw new Error("only <KeyLabel>");
+		else throw new Error("children is an invalid element.");
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)(`tremolo-piano-${keyType}-key`, className),
+		"aria-disabled": disabled,
+		"data-active": played,
+		style: {
+			...colors,
+			left: position,
+			width: fill ? __width : width,
+			height,
+			...style
+		},
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyLabel, {
+			label,
+			__note: noteNumber,
+			...keyLabelProps
+		})
+	});
+});
+/** @category Piano */
+const WhiteKey = (0, react.forwardRef)(({ width = defaultWhiteKeyWidth, height = "100%", onContextMenu = (e) => e.preventDefault(),...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyImpl, {
+		ref,
+		keyType: "white",
+		width,
+		height,
+		onContextMenu,
+		...props
+	});
+});
+/** @category Piano */
+const BlackKey = (0, react.forwardRef)(({ width = defaultBlackKeyWidth, height = "60%", onContextMenu = (e) => e.preventDefault(),...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyImpl, {
+		ref,
+		keyType: "black",
+		width,
+		height,
+		onContextMenu,
+		...props
+	});
+});
+
+//#endregion
+//#region src/components/Piano/keyboardShortcuts.ts
+/** @category Piano */
+const SHORTCUTS = { HOME_ROW: { keys: [
+	"a",
+	"w",
+	"s",
+	"e",
+	"d",
+	"f",
+	"t",
+	"g",
+	"y",
+	"h",
+	"u",
+	"j",
+	"k",
+	"o",
+	"l",
+	"p",
+	";"
+] } };
+
+//#endregion
+//#region src/components/Piano/index.tsx
+/**
+* Piano component
+*
+* TODO:
+* - add scale highlight
+*/
+/** @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 [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)();
+	const pianoRef = (0, react.useRef)(null);
+	const hitKeyIndex = (0, react.useRef)(-1);
+	const noteRangeArray = getNoteRangeArray(noteRange);
+	const whiteNotes = noteRangeArray.filter((v) => (0, __tremolo_ui_functions.isWhiteKey)(v));
+	const blackNotes = noteRangeArray.filter((v) => (0, __tremolo_ui_functions.isBlackKey)(v));
+	const whiteNoteCount = whiteNotes.length;
+	const padding = 1;
+	const staticWidth = (whiteNoteWidth + padding) * whiteNoteCount;
+	const childrenWithProps = (0, react.useMemo)(() => {
+		return children && react.default.Children.map(children, (child, index) => {
+			if (react.default.isValidElement(child)) {
+				const __width = child.type == WhiteKey ? whiteNoteWidth : whiteNoteWidth * .65;
+				const props$1 = {
+					ref: keyRefs.current[index],
+					__width
+				};
+				return react.default.cloneElement(child, props$1);
+			}
+			return child;
+		});
+	}, [children, whiteNoteWidth]);
+	const notePosition = (0, react.useCallback)((note) => {
+		const pitchPositions = {
+			C: 0,
+			"C#": 1,
+			D: 1,
+			"D#": 2,
+			E: 2,
+			F: 3,
+			"F#": 4,
+			G: 4,
+			"G#": 5,
+			A: 5,
+			"A#": 6,
+			B: 6
+		};
+		const blackNoteWidth = whiteNoteWidth * blackPerWhiteWidth;
+		const padding$1 = 1;
+		const targetNoteKey = (0, __tremolo_ui_functions.noteKey)(note);
+		const firstNoteKey = (0, __tremolo_ui_functions.noteKey)(noteRange.first);
+		const octave = Math.floor((note - noteRange.first) / 12);
+		const octaveOffset = __tremolo_ui_functions.noteKeys.indexOf(firstNoteKey) > __tremolo_ui_functions.noteKeys.indexOf(targetNoteKey) ? 1 : 0;
+		const w = whiteNoteWidth + padding$1;
+		const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey];
+		const blackKeyOffset = (0, __tremolo_ui_functions.isBlackKey)(note) ? blackNoteWidth / 2 : 0;
+		return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset;
+	}, [noteRange.first, whiteNoteWidth]);
+	const getHitKeyIndex = (0, react.useCallback)((x, y) => {
+		if (!pianoRef.current) return -1;
+		const containerHeight = pianoRef.current.clientHeight;
+		const notes = [...blackNotes, ...whiteNotes];
+		for (let i = 0; i < notes.length; i++) {
+			const note = notes[i];
+			const pos = notePosition(note);
+			const w = (0, __tremolo_ui_functions.isWhiteKey)(note) ? whiteNoteWidth : whiteNoteWidth * blackPerWhiteWidth;
+			const h = (0, __tremolo_ui_functions.isWhiteKey)(note) ? containerHeight : containerHeight * .6;
+			if (pos <= x && x < pos + w && 0 <= y && y < h) return note;
+		}
+		return -1;
+	}, [
+		blackNotes,
+		notePosition,
+		whiteNoteWidth,
+		whiteNotes
+	]);
+	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 index = noteRangeArray.indexOf(note);
+		if (index == -1) return;
+		if (hitKeyIndex.current != index) {
+			keyRefs.current[hitKeyIndex.current]?.current?.stop();
+			keyRefs.current[index]?.current?.play();
+			hitKeyIndex.current = index;
+		}
+	}, [
+		getHitKeyIndex,
+		noteRangeArray,
+		staticWidth
+	]);
+	const onDragEnd = (0, react.useCallback)(() => {
+		if (keyRefs.current[hitKeyIndex.current]?.current?.played()) keyRefs.current[hitKeyIndex.current]?.current?.stop();
+		hitKeyIndex.current = -1;
+	}, [keyRefs]);
+	(0, react.useEffect)(() => {
+		if (fill && pianoRef.current) {
+			const parent = pianoRef.current.parentElement;
+			if (!parent) throw new Error("doesn't have a parent element.");
+			const resizeObserver = new ResizeObserver(() => {
+				const w = pianoRef.current.clientWidth;
+				setWhiteNoteWidth(w / whiteNoteCount - padding);
+			});
+			resizeObserver.observe(parent);
+			return () => {
+				resizeObserver.unobserve(parent);
+			};
+		} else setWhiteNoteWidth(_whiteNoteWidth);
+	}, [
+		fill,
+		_whiteNoteWidth,
+		whiteNoteCount
+	]);
+	const [touchMoveRefCallback, pointerDownHandler] = useDragWithElement({
+		baseElementRef: pianoRef,
+		onDrag,
+		onDragEnd
+	});
+	useEventListener(globalThis.window, "keydown", (e) => {
+		if (e.repeat) return;
+		if (!keyboardShortcuts) return;
+		const index = keyboardShortcuts.keys.indexOf(e.key);
+		if (index != -1) {
+			if (!keyRefs.current[index]?.current?.played()) keyRefs.current[index]?.current?.play();
+		}
+	});
+	useEventListener(globalThis.window, "keyup", (e) => {
+		if (e.repeat) return;
+		if (!keyboardShortcuts) return;
+		const index = keyboardShortcuts.keys.indexOf(e.key);
+		if (index != -1) keyRefs.current[index]?.current?.stop();
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PianoProvider, {
+		notePosition,
+		noteRange,
+		glissando,
+		midiMax,
+		fill,
+		onPlayNote,
+		onStopNote,
+		label,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: (div) => {
+				pianoRef.current = div;
+				touchMoveRefCallback(div);
+			},
+			className: (0, clsx.default)("tremolo-piano", className),
+			style: {
+				width: fill ? "100%" : staticWidth,
+				height,
+				...style
+			},
+			onPointerDown: (event) => {
+				pointerDownHandler(event);
+				onPointerDown?.(event);
+			},
+			...props,
+			children: childrenWithProps || noteRangeArray.map((note, index) => (0, __tremolo_ui_functions.isWhiteKey)(note) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WhiteKey, {
+				ref: keyRefs.current[index],
+				noteNumber: note,
+				__width: whiteNoteWidth
+			}, note) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlackKey, {
+				ref: keyRefs.current[index],
+				noteNumber: note,
+				__width: whiteNoteWidth * blackPerWhiteWidth
+			}, note))
+		})
+	});
+}
+
+//#endregion
+//#region src/components/Slider/context.tsx
+const createSliderStore = (initProps) => {
+	const DEFAULT_PROPS = {
+		min: 0,
+		max: 0,
+		step: 0,
+		skew: 0,
+		vertical: false,
+		reverse: false,
+		disabled: false,
+		readonly: false
+	};
+	return (0, zustand.createStore)()(() => ({
+		...DEFAULT_PROPS,
+		...initProps
+	}));
+};
+const SliderContext = (0, react.createContext)(null);
+function SliderProvider({ children,...props }) {
+	const storeRef = (0, react.useRef)(null);
+	if (!storeRef.current) storeRef.current = createSliderStore(props);
+	(0, react.useEffect)(() => {
+		if (storeRef.current) storeRef.current.setState(props);
+		else storeRef.current = createSliderStore(props);
+	}, [props]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderContext.Provider, {
+		value: storeRef.current,
+		children
+	});
+}
+/** @category Slider */
+function useSliderContext(selector) {
+	const store = (0, react.useContext)(SliderContext);
+	if (!store) throw new Error("Missing SliderContext.Provider in the tree");
+	return (0, zustand.useStore)(store, selector);
+}
+
+//#endregion
+//#region src/components/Slider/ScaleOption.tsx
+/** @category Slider */
+function ScaleOption({ value, type = "mark-number", label, thickness = 1, length = "0.5rem", gap = 2, labelWidth, classes, styles, className, style,...props }) {
+	const min = useSliderContext((s) => s.min);
+	const max = useSliderContext((s) => s.max);
+	const skew = useSliderContext((s) => s.skew);
+	const vertical = useSliderContext((s) => s.vertical);
+	const reverse = useSliderContext((s) => s.reverse);
+	const calcPercent = (0, react.useCallback)((rawValue$5) => {
+		return (0, __tremolo_ui_functions.toFixed)((0, __tremolo_ui_functions.xor)(vertical, reverse) ? 100 - (0, __tremolo_ui_functions.normalizeValue)(rawValue$5, min, max, skew) * 100 : (0, __tremolo_ui_functions.normalizeValue)(rawValue$5, min, max, skew) * 100);
+	}, [
+		vertical,
+		reverse,
+		max,
+		min,
+		skew
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("tremolo-slider-scale-option", className),
+		style: {
+			left: !vertical ? `${calcPercent(value)}%` : void 0,
+			top: vertical ? `${calcPercent(value)}%` : void 0,
+			...style
+		},
+		"data-vertical": vertical,
+		...props,
+		children: [type != "number" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("tremolo-slider-scale-option-mark", classes?.mark),
+			style: {
+				width: !vertical ? thickness : length,
+				height: vertical ? thickness : length,
+				marginBottom: !vertical ? gap : void 0,
+				marginRight: vertical ? gap : void 0,
+				...styles?.mark
+			},
+			"data-vertical": vertical
+		}), type != "mark" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("tremolo-slider-scale-option-label", classes?.label),
+			style: {
+				width: labelWidth,
+				...styles?.label
+			},
+			children: label || value
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/Slider/Scale.tsx
+/** @category Slider */
+function Scale({ gap = 6, options, children, className, style,...props }) {
+	const min = useSliderContext((s) => s.min);
+	const max = useSliderContext((s) => s.max);
+	const step = useSliderContext((s) => s.step);
+	const vertical = useSliderContext((s) => s.vertical);
+	const reverse = useSliderContext((s) => s.reverse);
+	const optionsList = options ? (0, __tremolo_ui_functions_Slider.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),
+		style: {
+			marginLeft: vertical ? gap : void 0,
+			marginTop: !vertical ? gap : void 0,
+			...style
+		},
+		...props,
+		children: options ? optionsList.map(({ value, type }, index) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScaleOption, {
+				value,
+				type
+			}, index);
+		}) : children
+	});
+}
+
+//#endregion
+//#region src/components/Slider/Thumb.tsx
+/** @category Slider */
+const defaultThumbSize = 22;
+/** @category Slider */
+const SliderThumb = (0, react.forwardRef)(({ size, width = defaultThumbSize, height = defaultThumbSize, color, children, className, style, __percent }, ref) => {
+	const wrapperRef = (0, react.useRef)(null);
+	const vertical = useSliderContext((s) => s.vertical);
+	const disabled = useSliderContext((s) => s.disabled);
+	const readonly = useSliderContext((s) => s.readonly);
+	(0, react.useImperativeHandle)(ref, () => {
+		return {
+			focus() {
+				wrapperRef.current?.focus();
+			},
+			blur() {
+				wrapperRef.current?.blur();
+			}
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "tremolo-slider-thumb-wrapper",
+		style: {
+			top: vertical ? `${__percent}%` : "50%",
+			left: !vertical ? `${__percent}%` : "50%"
+		},
+		children: children ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: wrapperRef,
+			className: (0, clsx.default)("tremolo-slider-thumb", className),
+			tabIndex: 0,
+			"aria-disabled": disabled,
+			"aria-readonly": readonly,
+			style: {
+				"--color": color,
+				width: size ?? width,
+				height: size ?? height,
+				...style
+			}
+		})
+	});
+});
+
+//#endregion
+//#region src/components/Slider/Track.tsx
+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 }) {
+	const vertical = useSliderContext((s) => s.vertical);
+	const reverse = useSliderContext((s) => s.reverse);
+	const disabled = useSliderContext((s) => s.disabled);
+	const direction = vertical ? "bottom" : "right";
+	const colors = {
+		"--active": active,
+		"--inactive": inactive
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("tremolo-slider-track", className),
+		"aria-disabled": disabled,
+		"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}%)`,
+			borderRadius: (0, __tremolo_ui_functions.styleHelper)(thickness, "/", 2),
+			width: !vertical ? length : thickness,
+			height: vertical ? length : thickness,
+			...style
+		},
+		...props,
+		children: [children, __thumb]
+	});
+}
+
+//#endregion
+//#region src/components/Slider/index.tsx
+/**
+* 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 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);
+	const rev = (0, __tremolo_ui_functions.toFixed)(100 - p);
+	const displayReversed = (0, react.useMemo)(() => (0, __tremolo_ui_functions.xor)(vertical, reverse), [vertical, reverse]);
+	const percent = displayReversed ? rev : p;
+	let trackProps = {};
+	let thumbProps = {};
+	let scaleComponent = void 0;
+	if (children != void 0) react.default.Children.forEach(children, (child) => {
+		if (react.default.isValidElement(child)) if (child.type == SliderThumb) thumbProps = child.props;
+		else if (child.type == SliderTrack) 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.");
+	});
+	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);
+	}, [
+		displayReversed,
+		max,
+		min,
+		onChange,
+		readonly,
+		skew,
+		step,
+		vertical
+	]);
+	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;
+		return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(newValue, step), min, max);
+	}, [
+		max,
+		min,
+		skew,
+		step,
+		value
+	]);
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		if (!keyboard || !onChange || readonly) return;
+		const key = event.key;
+		if ([
+			"ArrowRight",
+			"ArrowLeft",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(key)) {
+			event.preventDefault();
+			let x = key == "ArrowRight" || key == "ArrowUp" ? keyboard[1] : -keyboard[1];
+			if (reverse) x *= -1;
+			onChange(updateValueByEvent(keyboard[0], x));
+		}
+	}, [
+		keyboard,
+		onChange,
+		readonly,
+		reverse,
+		updateValueByEvent
+	]);
+	const [touchMoveRefCallback, pointerDownHandler] = useDragWithElement({
+		baseElementRef: trackElementRef,
+		onDrag,
+		onDragStart: (nx, ny) => {
+			if (readonly) return;
+			if (bodyNoSelect) addNoSelect();
+			thumbRef.current?.focus();
+			onDragStart?.((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(vertical ? ny : nx, min, max, skew), step), min, max));
+		},
+		onDragEnd: (nx, ny) => {
+			if (readonly) return;
+			if (bodyNoSelect) removeNoSelect();
+			onDragEnd?.((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(vertical ? ny : nx, min, max, skew), step), min, max));
+		}
+	});
+	const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+		if (!wheel || !onChange || readonly) return;
+		event.preventDefault();
+		let x;
+		if (!vertical && event.deltaX != 0) x = event.deltaX > 0 ? wheel[1] : -wheel[1];
+		else {
+			if (event.deltaY == 0) return;
+			x = event.deltaY > 0 ? -wheel[1] : wheel[1];
+		}
+		if (vertical && reverse) x *= -1;
+		onChange(updateValueByEvent(wheel[0], x));
+	}, { passive: false }, [
+		wheel,
+		vertical,
+		readonly,
+		onChange,
+		updateValueByEvent
+	]);
+	(0, react.useImperativeHandle)(ref, () => {
+		return {
+			focus() {
+				thumbRef.current?.focus();
+			},
+			blur() {
+				thumbRef.current?.blur();
+			}
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderProvider, {
+		min,
+		max,
+		step,
+		skew,
+		vertical,
+		reverse,
+		disabled,
+		readonly,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("tremolo-slider", className),
+			ref: (div) => {
+				wheelRefCallback(div);
+				touchMoveRefCallback(div);
+			},
+			tabIndex: -1,
+			role: "slider",
+			"aria-valuenow": value,
+			"aria-valuemin": min,
+			"aria-valuemax": max,
+			"aria-orientation": vertical ? "vertical" : "horizontal",
+			"aria-disabled": disabled,
+			"aria-readonly": readonly,
+			style: {
+				margin: `calc(${(0, __tremolo_ui_functions.styleHelper)(thumbProps?.size ?? 22)} / 2)`,
+				...style
+			},
+			onPointerDown: (event) => {
+				pointerDownHandler(event);
+				onPointerDown?.(event);
+			},
+			onKeyDown: (event) => {
+				handleKeyDown(event);
+				onKeyDown?.(event);
+			},
+			onFocus: (event) => {
+				thumbRef.current?.focus();
+				onFocus?.(event);
+			},
+			onBlur: (event) => {
+				thumbRef.current?.blur();
+				onBlur?.(event);
+			},
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					flexDirection: vertical ? "row" : "column",
+					width: !vertical ? "100%" : void 0,
+					height: vertical ? "100%" : void 0
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "tremolo-slider-track-wrapper",
+					ref: trackElementRef,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderTrack, {
+						__percent: percent,
+						__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderThumb, {
+							ref: thumbRef,
+							__percent: percent,
+							...thumbProps
+						}),
+						...trackProps
+					})
+				}), scaleComponent]
+			})
+		})
+	});
+});
+
+//#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__ */ (0, react_jsx_runtime.jsx)(Component, {
+		ref: wheelRefCallback,
+		...attributes,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/XYPad/Area.tsx
+/** @category XYPad */
+function XYPadArea({ width = 120, height = 120, color, children, className, style, __thumb,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("tremolo-xy-pad-area", className),
+		style: {
+			"--color": color,
+			width,
+			height,
+			...style
+		},
+		...props,
+		children: [children, __thumb]
+	});
+}
+
+//#endregion
+//#region src/components/XYPad/Thumb.tsx
+/** @category XYPad */
+const XYPadThumb = (0, react.forwardRef)(({ size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __css,...props }, ref) => {
+	const wrapperRef = (0, react.useRef)(null);
+	(0, react.useImperativeHandle)(ref, () => {
+		return {
+			focus() {
+				wrapperRef.current?.focus();
+			},
+			blur() {
+				wrapperRef.current?.blur();
+			}
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("tremolo-xy-pad-thumb-wrapper", wrapperClassName),
+		style: {
+			...__css,
+			...wrapperStyle
+		},
+		...props,
+		children: children ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: wrapperRef,
+			className: (0, clsx.default)("tremolo-xy-pad-thumb", className),
+			tabIndex: 0,
+			"aria-disabled": __disabled,
+			style: {
+				"--color": color,
+				width: size ?? width,
+				height: size ?? height,
+				...style
+			}
+		})
+	});
+});
+
+//#endregion
+//#region src/components/XYPad/index.tsx
+const defaultValueOptions = {
+	skew: 1,
+	step: 1,
+	reverse: false,
+	wheel: ["raw", 1],
+	keyboard: ["raw", 1]
+};
+/**
+* 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 x = (0, react.useMemo)(() => {
+		return {
+			...defaultValueOptions,
+			..._x
+		};
+	}, [_x]);
+	const y = (0, react.useMemo)(() => {
+		return {
+			...defaultValueOptions,
+			..._y
+		};
+	}, [_y]);
+	const areaElementRef = (0, react.useRef)(null);
+	const thumbRef = (0, react.useRef)(null);
+	const nx = (0, __tremolo_ui_functions.normalizeValue)(x.value, x.min, x.max, x.skew);
+	const ny = (0, __tremolo_ui_functions.normalizeValue)(y.value, y.min, y.max, y.skew);
+	const percentX = (0, __tremolo_ui_functions.toFixed)((x.reverse ? 1 - nx : nx) * 100);
+	const percentY = (0, __tremolo_ui_functions.toFixed)((y.reverse ? 1 - ny : ny) * 100);
+	let areaProps = {};
+	let thumbProps = {};
+	if (children != void 0) react.default.Children.forEach(children, (child) => {
+		if (react.default.isValidElement(child)) if (child.type == XYPadThumb) thumbProps = child.props;
+		else if (child.type == XYPadArea) areaProps = child.props;
+		else throw new Error("only <XYPadThumb> or <XYPadArea>");
+		else throw new Error("children is an invalid element.");
+	});
+	const onDrag = (0, react.useCallback)((nx$1, ny$1) => {
+		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,
+		readonly,
+		x.max,
+		x.min,
+		x.reverse,
+		x.skew,
+		x.step,
+		y.max,
+		y.min,
+		y.reverse,
+		y.skew,
+		y.step
+	]);
+	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;
+		return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, target.step), target.min, target.max);
+	}, []);
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		if (!onChange || readonly) return;
+		const key = event.key;
+		if ([
+			"ArrowRight",
+			"ArrowLeft",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(key)) {
+			const isHorizontal = key == "ArrowRight" || key == "ArrowLeft";
+			const target = isHorizontal ? x : y;
+			if (!target.keyboard) return;
+			event.preventDefault();
+			let delta = target.keyboard[1];
+			if (key == "ArrowLeft" || key == "ArrowUp") delta *= -1;
+			if (target.reverse) delta *= -1;
+			const newValue = updateValueByEvent(target.keyboard[0], target, delta);
+			if (isHorizontal) onChange(newValue, y.value);
+			else onChange(x.value, newValue);
+		}
+	}, [
+		onChange,
+		readonly,
+		x,
+		y,
+		updateValueByEvent
+	]);
+	const [touchMoveRefCallback, pointerDownHandler] = useDragWithElement({
+		baseElementRef: areaElementRef,
+		onDrag,
+		onDragStart: (nx$1, ny$1) => {
+			if (readonly) return;
+			if (bodyNoSelect) addNoSelect();
+			thumbRef.current?.focus();
+			const valueX = (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(nx$1, x.min, x.max, x.skew), x.step), x.min, x.max);
+			const valueY = (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(ny$1, y.min, y.max, y.skew), y.step), y.min, y.max);
+			onDragStart?.(valueX, valueY);
+		},
+		onDragEnd: (nx$1, ny$1) => {
+			if (readonly) return;
+			if (bodyNoSelect) removeNoSelect();
+			const valueX = (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(nx$1, x.min, x.max, x.skew), x.step), x.min, x.max);
+			const valueY = (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(ny$1, y.min, y.max, y.skew), y.step), y.min, y.max);
+			onDragEnd?.(valueX, valueY);
+		}
+	});
+	const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+		if (!onChange || readonly) return;
+		const target = event.shiftKey ? x : y;
+		if (!target.wheel) return;
+		event.preventDefault();
+		let delta = target.wheel[1];
+		if (event.deltaY < 0) delta *= -1;
+		if (target.reverse) delta *= -1;
+		const newValue = updateValueByEvent(target.wheel[0], target, delta);
+		if (event.shiftKey) onChange(newValue, y.value);
+		else onChange(x.value, newValue);
+	}, { passive: false }, [
+		x,
+		y,
+		onChange,
+		readonly,
+		updateValueByEvent
+	]);
+	(0, react.useImperativeHandle)(ref, () => {
+		return {
+			focus() {
+				thumbRef.current?.focus();
+			},
+			blur() {
+				thumbRef.current?.blur();
+			}
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("tremolo-xy-pad", className),
+		ref: (div) => {
+			wheelRefCallback(div);
+			touchMoveRefCallback(div);
+		},
+		tabIndex: -1,
+		"aria-disabled": disabled,
+		"aria-readonly": readonly,
+		style: {
+			margin: `calc(${(0, __tremolo_ui_functions.styleHelper)(thumbProps?.size ?? 22)} / 2)`,
+			cursor: readonly ? "not-allowed" : "pointer",
+			WebkitTapHighlightColor: "transparent",
+			...style
+		},
+		onPointerDown: (event) => {
+			pointerDownHandler(event);
+			onPointerDown?.(event);
+		},
+		onKeyDown: (event) => {
+			handleKeyDown(event);
+			onKeyDown?.(event);
+		},
+		onFocus: (event) => {
+			thumbRef.current?.focus();
+			onFocus?.(event);
+		},
+		onBlur: (event) => {
+			thumbRef.current?.blur();
+			onBlur?.(event);
+		},
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "tremolo-xy-pad-area-wrapper",
+			ref: areaElementRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYPadArea, {
+				__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYPadThumb, {
+					ref: thumbRef,
+					__disabled: disabled,
+					__css: {
+						top: `${percentY}%`,
+						left: `${percentX}%`
+					},
+					...thumbProps
+				}),
+				...areaProps
+			})
+		})
+	});
+});
+
+//#endregion
+//#region src/hooks/useAnimationFrame.ts
+function useAnimationFrame(callback = () => {}, deps = []) {
+	const reqIdRef = (0, react.useRef)(-1);
+	const loop = (0, react.useCallback)(() => {
+		reqIdRef.current = requestAnimationFrame(loop);
+		callback();
+	}, [callback, ...deps]);
+	(0, react.useEffect)(() => {
+		reqIdRef.current = requestAnimationFrame(loop);
+		return () => cancelAnimationFrame(reqIdRef.current);
+	}, [loop]);
+}
+
+//#endregion
+exports.AnimationCanvas = AnimationCanvas;
+exports.AnimationKnob = AnimationKnob;
+exports.BlackKey = BlackKey;
+exports.DecrementStepper = DecrementStepper;
+exports.DragObserver = DragObserver;
+exports.IncrementStepper = IncrementStepper;
+exports.KeyLabel = KeyLabel;
+exports.Knob = Knob;
+exports.NumberInput = NumberInput;
+exports.Piano = Piano;
+exports.SHORTCUTS = SHORTCUTS;
+exports.Scale = Scale;
+exports.ScaleOption = ScaleOption;
+exports.Slider = Slider;
+exports.SliderThumb = SliderThumb;
+exports.SliderTrack = SliderTrack;
+exports.Stepper = Stepper;
+exports.WheelObserver = WheelObserver;
+exports.WhiteKey = WhiteKey;
+exports.XYPad = XYPad;
+exports.XYPadArea = XYPadArea;
+exports.XYPadThumb = XYPadThumb;
+exports.getNoteRangeArray = getNoteRangeArray;
+exports.useAnimationFrame = useAnimationFrame;
+exports.useDrag = useDrag;
+exports.useDragWithElement = useDragWithElement;
+exports.useEventListener = useEventListener;
+exports.useInterval = useInterval;
+exports.useLongPress = useLongPress;
+exports.useSliderContext = useSliderContext;
+//# sourceMappingURL=index.cjs.map