@tremolo-ui/react 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -1,4 +1,5 @@
-//#region rolldown:runtime
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -19,16 +20,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	value: mod,
 	enumerable: true
 }) : target, mod));
-
 //#endregion
 let clsx = require("clsx");
 clsx = __toESM(clsx);
 let react = require("react");
 react = __toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let __tremolo_ui_functions = require("@tremolo-ui/functions");
+let _tremolo_ui_functions = require("@tremolo-ui/functions");
 let zustand = require("zustand");
-
 //#region src/components/AnimationCanvas/canvas.ts
 const drawingState = [
 	"strokeStyle",
@@ -58,10 +57,9 @@ function setDprConfig(canvas, context, width, height, dpr) {
 	canvas.style.width = `${width}px`;
 	canvas.style.height = `${height}px`;
 }
-
 //#endregion
 //#region src/components/AnimationCanvas/index.tsx
-function AnimationCanvas({ draw, init, animate = true, options, width: _width = 100, height: _height = 100, relativeSize, reduceFlickering = true, className, onContextMenu = (event) => event.preventDefault(),...props }) {
+function AnimationCanvas({ draw, init, animate = true, options, width: _width = 100, height: _height = 100, relativeSize, reduceFlickering = true, className, onContextMenu = (event) => event.preventDefault(), ...props }) {
 	const canvasRef = (0, react.useRef)(null);
 	const memoCanvasRef = (0, react.useRef)(null);
 	const reqIdRef = (0, react.useRef)(-1);
@@ -165,7 +163,6 @@ function AnimationCanvas({ draw, init, animate = true, options, width: _width =
 		ref: memoCanvasRef
 	})] });
 }
-
 //#endregion
 //#region src/hooks/useCallbackRef.ts
 /**
@@ -181,14 +178,13 @@ function useCallbackRef(callback, deps = []) {
 	});
 	return (0, react.useCallback)((...args) => callbackRef.current?.(...args), deps);
 }
-
 //#endregion
 //#region src/hooks/useEventListener.ts
 function useEventListener(target, event, handler, options) {
 	const listener = useCallbackRef(handler);
 	(0, react.useEffect)(() => {
 		const node = typeof target === "function" ? target() : target ?? document;
-		if (!handler || !node) return;
+		if (!node) return;
 		node.addEventListener(event, listener, options);
 		return () => {
 			node.removeEventListener(event, listener, options);
@@ -197,14 +193,12 @@ function useEventListener(target, event, handler, options) {
 		event,
 		target,
 		options,
-		listener,
-		handler
+		listener
 	]);
 	return () => {
 		(typeof target === "function" ? target() : target ?? document)?.removeEventListener(event, listener, options);
 	};
 }
-
 //#endregion
 //#region src/hooks/useRefCallbackEvent.ts
 function useRefCallbackEvent(event, handler, options, deps = []) {
@@ -222,18 +216,17 @@ function useRefCallbackEvent(event, handler, options, deps = []) {
 		};
 	}, deps);
 }
-
 //#endregion
 //#region src/hooks/useDrag.ts
 /**
-* @category hooks
 * @returns [refCallback, pointerDownHandler]
 */
-function useDrag({ threshold = 1, onDrag, onDragStart, onDragEnd }) {
+function useDrag({ threshold: _threshold = 1, onDrag, onDragStart, onDragEnd }) {
 	const dragOffsetX = (0, react.useRef)(void 0);
 	const dragOffsetY = (0, react.useRef)(void 0);
 	const dragStartX = (0, react.useRef)(0);
 	const dragStartY = (0, react.useRef)(0);
+	const threshold = Math.max(_threshold, 1);
 	const handleDrag = (0, react.useCallback)((event, first = false) => {
 		const isTouch = event instanceof TouchEvent;
 		if (isTouch && event.cancelable) event.preventDefault();
@@ -254,15 +247,15 @@ function useDrag({ threshold = 1, onDrag, onDragStart, onDragEnd }) {
 			dragOffsetY.current = screenY;
 		}
 		if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return;
-		onDrag(screenX - dragStartX.current, screenY - dragStartY.current, deltaX, deltaY);
+		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]);
+	const refHandler = useRefCallbackEvent("touchmove", handleDrag, { passive: false }, [onDrag]);
 	useEventListener(globalThis.window, "mousemove", handleDrag);
 	useEventListener(globalThis.window, "pointerup", () => {
 		dragOffsetX.current = void 0;
@@ -271,168 +264,10 @@ function useDrag({ threshold = 1, onDrag, onDragStart, 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;
-		onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(valueRef.current - y / 100, min, max, skew), step), min, max));
-	}, [
-		max,
-		min,
-		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") v = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
-			else v = value + x;
-			onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, step), min, max));
-		}
-	}, [
-		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") v = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
-		else v = value + x;
-		if (onChange) onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, step), min, max));
-	}, { passive: false }, [
-		wheel,
-		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 { as: Component = "div", threshold = 1, onDrag, onDragStart, onDragEnd, children, onPointerDown, ...attributes } = props;
 	const [refCallback, pointerDownHandler] = useDrag({
 		threshold,
 		onDrag,
@@ -441,190 +276,333 @@ function DragObserver(props) {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref: refCallback,
-		onPointerDown: pointerDownHandler,
+		onPointerDown: (e) => {
+			pointerDownHandler(e);
+			onPointerDown?.(e);
+		},
 		...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, thumbSize = 84, thumbLineWeight = 6, thumbLineLength = 35, lineWeight = 6, angleRange = 270, onChange, onKeyDown, onPointerDown, onDoubleClick, className, classes,...props }, forwardedRef) => {
-	const valueRef = (0, react.useRef)(0);
-	const elmRef = (0, react.useRef)(null);
-	const onDrag = (0, react.useCallback)((_x, y) => {
-		if (!onChange || readonly) return;
-		onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(valueRef.current - y / 100, min, max, skew), step), min, max));
-	}, [
-		max,
-		min,
-		onChange,
-		readonly,
-		skew,
-		step
-	]);
-	const updateValueByEvent = (0, react.useCallback)((eventType, x) => {
-		let newValue;
-		if (eventType == "normalized") newValue = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
-		else newValue = value + x;
-		return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(newValue, step), min, max);
-	}, [
-		max,
-		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();
-		}
+//#region src/components/_util/index.ts
+function addUserSelectNone() {
+	window.document.body.classList.add("tremolo-user-select-none");
+}
+function removeUserSelectNone() {
+	window.document.body.classList.remove("tremolo-user-select-none");
+}
+const cursorStyles = {
+	grabbing: "tremolo-cursor-grabbing",
+	grab: "tremolo-cursor-grab",
+	pointer: "tremolo-cursor-pointer",
+	move: "tremolo-cursor-move",
+	none: "tremolo-cursor-none"
+};
+function setCursorStyle(type) {
+	resetCursorStyle();
+	window.document.body.classList.add(cursorStyles[type]);
+}
+function resetCursorStyle() {
+	Object.values(cursorStyles).forEach((s) => {
+		window.document.body.classList.remove(s);
 	});
-	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)(forwardedRef, () => {
-		return {
-			focus() {
-				elmRef.current?.focus();
-			},
-			blur() {
-				elmRef.current?.blur();
-			}
-		};
-	}, []);
-	const viewBoxSize = 100;
-	const center = viewBoxSize / 2;
-	const padding = (viewBoxSize - (0, __tremolo_ui_functions.clamp)(thumbSize, 0, 100)) / 2;
-	const p = (0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew);
-	const s = (0, __tremolo_ui_functions.normalizeValue)(startValue, min, max, skew);
+}
+function calcDrawingState({ value, min, max, skew, startValue, angleRange }) {
+	const p = (0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew);
+	const s = (0, _tremolo_ui_functions.normalizeValue)(startValue, min, max, skew);
 	const r1 = -angleRange / 2;
 	const r2 = r1 + Math.min(p, s) * angleRange;
 	const r3 = r1 + Math.max(p, s) * angleRange;
 	const r4 = angleRange / 2;
-	const x1 = center + center * Math.cos((0, __tremolo_ui_functions.radian)(r1 - 90));
-	const y1 = center + center * Math.sin((0, __tremolo_ui_functions.radian)(r1 - 90));
-	const x2 = center + center * Math.cos((0, __tremolo_ui_functions.radian)(r2 - 90));
-	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 {
+		p,
+		r1,
+		r2,
+		r3,
+		r4,
+		x1: 50 + 50 * Math.cos((0, _tremolo_ui_functions.radian)(r1 - 90)),
+		y1: 50 + 50 * Math.sin((0, _tremolo_ui_functions.radian)(r1 - 90)),
+		x2: 50 + 50 * Math.cos((0, _tremolo_ui_functions.radian)(r2 - 90)),
+		y2: 50 + 50 * Math.sin((0, _tremolo_ui_functions.radian)(r2 - 90)),
+		x3: 50 + 50 * Math.cos((0, _tremolo_ui_functions.radian)(r3 - 90)),
+		y3: 50 + 50 * Math.sin((0, _tremolo_ui_functions.radian)(r3 - 90)),
+		x4: 50 + 50 * Math.cos((0, _tremolo_ui_functions.radian)(r4 - 90)),
+		y4: 50 + 50 * Math.sin((0, _tremolo_ui_functions.radian)(r4 - 90))
+	};
+}
+const createKnobStore = (initProps) => {
+	return (0, zustand.createStore)()(() => ({
+		...initProps,
+		...calcDrawingState(initProps)
+	}));
+};
+const KnobContext = (0, react.createContext)(null);
+function KnobProvider({ children, ...props }) {
+	const storeRef = (0, react.useRef)(null);
+	if (!storeRef.current) storeRef.current = createKnobStore(props);
+	(0, react.useEffect)(() => {
+		if (storeRef.current) storeRef.current.setState({
+			...props,
+			...calcDrawingState(props)
+		});
+		else storeRef.current = createKnobStore(props);
+	}, [props]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KnobContext.Provider, {
+		value: storeRef.current,
+		children
+	});
+}
+function useKnobContext(selector) {
+	const store = (0, react.useContext)(KnobContext);
+	if (!store) throw new Error("Missing KnobContext.Provider in the tree");
+	return (0, zustand.useStore)(store, selector);
+}
+//#endregion
+//#region src/components/Knob/ActiveLine.tsx
+function ActiveLine({ stroke = "currentColor", strokeWidth = 6, className, ...props }) {
+	const r2 = useKnobContext((s) => s.r2);
+	const r3 = useKnobContext((s) => s.r3);
+	const x2 = useKnobContext((s) => s.x2);
+	const y2 = useKnobContext((s) => s.y2);
+	const x3 = useKnobContext((s) => s.x3);
+	const y3 = useKnobContext((s) => s.y3);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		className: (0, clsx.default)("tremolo-knob-active-line", className),
+		d: `M ${x2} ${y2} A 50 50 -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3} ${y3}`,
+		fill: "none",
+		stroke,
+		strokeWidth,
+		...props
+	});
+}
+//#endregion
+//#region src/components/Knob/InactiveLine.tsx
+function InactiveLine({ stroke = "currentColor", strokeWidth = 6, className, ...props }) {
+	const min = useKnobContext((s) => s.min);
+	const max = useKnobContext((s) => s.max);
+	const startValue = useKnobContext((s) => s.startValue);
+	const r1 = useKnobContext((s) => s.r1);
+	const r2 = useKnobContext((s) => s.r2);
+	const r3 = useKnobContext((s) => s.r3);
+	const r4 = useKnobContext((s) => s.r4);
+	const x1 = useKnobContext((s) => s.x1);
+	const y1 = useKnobContext((s) => s.y1);
+	const x2 = useKnobContext((s) => s.x2);
+	const y2 = useKnobContext((s) => s.y2);
+	const x3 = useKnobContext((s) => s.x3);
+	const y3 = useKnobContext((s) => s.y3);
+	const x4 = useKnobContext((s) => s.x4);
+	const y4 = useKnobContext((s) => s.y4);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [startValue > min && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		className: (0, clsx.default)("tremolo-knob-inactive-line", className),
+		d: `M ${x1} ${y1} A 50 50 -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2} ${y2}`,
+		fill: "none",
+		stroke,
+		strokeWidth,
+		...props
+	}), startValue < max && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		className: (0, clsx.default)("tremolo-knob-inactive-line", className),
+		d: `M ${x3} ${y3} A 50 50 -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4} ${y4}`,
+		fill: "none",
+		stroke,
+		strokeWidth,
+		...props
+	})] });
+}
+//#endregion
+//#region src/components/Knob/Thumb.tsx
+function Thumb$2({ className, thumb = "currentColor", thumbLine = "currentColor", thumbSize = 84, thumbLineWeight = 6, thumbLineLength = 35, classes, ...props }) {
+	const angleRange = useKnobContext((s) => s.angleRange);
+	const p = useKnobContext((s) => s.p);
+	const r1 = useKnobContext((s) => s.r1);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		ref: (div) => {
-			elmRef.current = div;
-			wheelRefCallback(div);
-			touchMoveRefCallback(div);
-		},
-		className: (0, clsx.default)("tremolo-knob", className),
-		viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
-		width: size,
-		height: size,
-		tabIndex: 0,
-		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);
+		className: (0, clsx.default)("tremolo-knob-thumb", classes?.thumb),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "50%",
+			cy: "50%",
+			r: `${thumbSize / 2}%`,
+			fill: thumb
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			className: (0, clsx.default)("tremolo-knob-thumb-line", classes?.thumbLine),
+			x1: "50%",
+			y1: `${(100 - (0, _tremolo_ui_functions.clamp)(thumbSize, 0, 100)) / 2}%`,
+			x2: "50%",
+			y2: `${thumbLineLength}%`,
+			stroke: thumbLine,
+			strokeWidth: `${thumbLineWeight}%`,
+			style: {
+				transform: `rotate(${r1 + p * angleRange}deg)`,
+				transformOrigin: "50% 50%"
+			}
+		})]
+	});
+}
+//#endregion
+//#region src/components/Knob/SVGRoot.tsx
+function SVGRoot({ children, style, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: `0 0 100 100`,
+		style: {
+			display: "block",
+			overflow: "visible",
+			...style
 		},
 		...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
-			}),
-			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.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
-			}),
-			/* @__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: `${thumbSize / 2}%`,
-					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(${r1 + p * angleRange}deg)`,
-						transformOrigin: "50% 50%"
-					}
-				})]
-			})
-		]
+		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InactiveLine, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActiveLine, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb$2, {})
+		] })
 	});
-});
-
+}
+//#endregion
+//#region src/components/Knob/index.tsx
+const defaultExternalStyles$3 = {
+	userSelectNone: true,
+	cursor: "grabbing"
+};
+/**
+* Interactive rotary knob component implemented in SVG.
+*/
+const Knob = {
+	Root: (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defaultValue = min, startValue = min, size, externalStyles: _externalStyles, wheel = ["raw", 1], keyboard = ["raw", 1], enableDoubleClickDefault = true, disabled = false, readonly = false, angleRange = 270, onChange, onKeyDown, onPointerDown, onDoubleClick, className, style, children, ...props }, forwardedRef) => {
+		const [dragging, setDragging] = (0, react.useState)(false);
+		const valueRef = (0, react.useRef)(0);
+		const elmRef = (0, react.useRef)(null);
+		const externalStyles = {
+			...defaultExternalStyles$3,
+			..._externalStyles
+		};
+		const onDrag = (0, react.useCallback)((_x, y) => {
+			if (!onChange || readonly) return;
+			onChange((0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(valueRef.current - y / 100, min, max, skew), step), min, max));
+		}, [
+			max,
+			min,
+			onChange,
+			readonly,
+			skew,
+			step
+		]);
+		const updateValueByEvent = (0, react.useCallback)((eventType, x) => {
+			let newValue;
+			if (eventType == "normalized") newValue = (0, _tremolo_ui_functions.rawValue)((0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
+			else newValue = value + x;
+			return (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)(newValue, step), min, max);
+		}, [
+			max,
+			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: () => {
+				setDragging(true);
+				valueRef.current = (0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew);
+				if (externalStyles.userSelectNone) addUserSelectNone();
+				if (externalStyles.cursor) setCursorStyle(externalStyles.cursor);
+			},
+			onDragEnd: () => {
+				setDragging(false);
+				if (externalStyles.userSelectNone) removeUserSelectNone();
+				if (externalStyles.cursor) resetCursorStyle();
+			}
+		});
+		const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+			if (!wheel || readonly) return;
+			event.preventDefault();
+			if (!onChange || event.deltaY == 0) return;
+			const x = Math.sign(event.deltaY) * -wheel[1];
+			onChange(updateValueByEvent(wheel[0], x));
+		}, { passive: false }, [
+			wheel,
+			onChange,
+			readonly,
+			updateValueByEvent
+		]);
+		(0, react.useImperativeHandle)(forwardedRef, () => {
+			return {
+				focus() {
+					elmRef.current?.focus();
+				},
+				blur() {
+					elmRef.current?.blur();
+				}
+			};
+		}, []);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KnobProvider, {
+			value,
+			min,
+			max,
+			step,
+			skew,
+			startValue,
+			angleRange,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: (elm) => {
+					elmRef.current = elm;
+					wheelRefCallback(elm);
+					touchMoveRefCallback(elm);
+				},
+				className: (0, clsx.default)("tremolo-knob", className),
+				tabIndex: 0,
+				role: "slider",
+				"aria-valuenow": value,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				"aria-disabled": disabled,
+				"aria-readonly": readonly,
+				"data-dragging": dragging,
+				style: {
+					width: size,
+					height: size,
+					...style
+				},
+				onPointerDown: (event) => {
+					pointerDownHandler(event);
+					onPointerDown?.(event);
+				},
+				onDoubleClick: (event) => {
+					if (enableDoubleClickDefault && onChange) onChange(defaultValue);
+					onDoubleClick?.(event);
+				},
+				onKeyDown: (event) => {
+					handleKeyDown(event);
+					onKeyDown?.(event);
+				},
+				...props,
+				children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SVGRoot, {})
+			})
+		});
+	}),
+	SVGRoot,
+	InactiveLine,
+	ActiveLine,
+	Thumb: Thumb$2
+};
 //#endregion
 //#region src/components/NumberInput/type.ts
 function selectUnit(units, value) {
@@ -635,8 +613,8 @@ function selectUnit(units, value) {
 function parseValue(inputString, units, digit) {
 	const str = inputString.trim();
 	if (!units || typeof units == "string") {
-		const m$1 = str.match(/-?\d+(\.\d+)?/);
-		let v = Number(m$1?.[0] ?? "0");
+		const m = str.match(/-?\d+(\.\d+)?/);
+		let v = Number(m?.[0] ?? "0");
 		v = isNaN(v) ? 0 : v;
 		return {
 			rawValue: v,
@@ -646,30 +624,29 @@ function parseValue(inputString, units, digit) {
 	}
 	const unitList = units.map(([u, _s]) => u);
 	const scaleList = units.map(([_u, s]) => s);
-	let rawValue$5 = 0;
+	let rawValue = 0;
 	let unit = unitList[0];
-	let formatValue = (digit != void 0 ? rawValue$5.toFixed(digit) : rawValue$5) + unit;
+	let formatValue = (digit != void 0 ? rawValue.toFixed(digit) : rawValue) + unit;
 	const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
 	if (m) {
-		rawValue$5 = Number(m[1]) || 0;
+		rawValue = Number(m[1]) || 0;
 		const uIndex = unitList.indexOf(m[3]);
-		rawValue$5 *= uIndex != -1 ? scaleList[uIndex] : 1;
-		const [u, scale] = selectUnit(units, rawValue$5);
-		const v = rawValue$5 / scale;
+		rawValue *= uIndex != -1 ? scaleList[uIndex] : 1;
+		const [u, scale] = selectUnit(units, rawValue);
+		const v = rawValue / scale;
 		formatValue = (digit != void 0 ? v.toFixed(digit) : v) + u;
 		unit = u;
 	}
 	return {
-		rawValue: rawValue$5,
+		rawValue,
 		formatValue,
 		unit
 	};
 }
-
 //#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);
+	return (0, _tremolo_ui_functions.clamp)(value, min, max);
 }
 const createNumberInputStore = (initProps) => {
 	const DEFAULT_PROPS = {
@@ -720,7 +697,7 @@ const createNumberInputStore = (initProps) => {
 	}));
 };
 const NumberInputContext = (0, react.createContext)(null);
-function NumberInputProvider({ children,...props }) {
+function NumberInputProvider({ children, ...props }) {
 	const storeRef = (0, react.useRef)(null);
 	if (!storeRef.current) storeRef.current = createNumberInputStore(props);
 	(0, react.useEffect)(() => {
@@ -738,18 +715,13 @@ function NumberInputProvider({ children,...props }) {
 		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/hooks/useInterval.ts
-/**
-* @category hooks
-*/
 function useInterval(callback, delay) {
 	const savedCallback = (0, react.useRef)(callback);
 	(0, react.useEffect)(() => {
@@ -765,12 +737,8 @@ function useInterval(callback, delay) {
 		};
 	}, [delay]);
 }
-
 //#endregion
 //#region src/hooks/useLongPress.ts
-/**
-* @category hooks
-*/
 function useLongPress(callback, initialDelay = 500, interval = 40) {
 	const [pressed, setPressed] = (0, react.useState)(false);
 	const [delay, setDelay] = (0, react.useState)(initialDelay);
@@ -787,11 +755,9 @@ function useLongPress(callback, initialDelay = 500, interval = 40) {
 		setPressed(true);
 	}, [callback]);
 }
-
 //#endregion
 //#region src/components/NumberInput/DecrementStepper.tsx
-/** @category NumberInput */
-function DecrementStepper({ size = 12, children, className,...props }) {
+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);
@@ -818,11 +784,9 @@ function DecrementStepper({ size = 12, children, className,...props }) {
 		})
 	});
 }
-
 //#endregion
 //#region src/components/NumberInput/IncrementStepper.tsx
-/** @category NumberInput */
-function IncrementStepper({ size = 12, children, className,...props }) {
+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);
@@ -849,10 +813,9 @@ function IncrementStepper({ size = 12, children, className,...props }) {
 		})
 	});
 }
-
 //#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 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);
@@ -876,12 +839,12 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 	const updateValueByEvent = (0, react.useCallback)((eventType, x) => {
 		let newValue;
 		if (eventType == "normalized") {
-			if (!min || !max) throw new Error("required parameter: min, max");
-			newValue = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(valueAsNumber, min, max) + x, min, max);
-			return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(newValue, step), min, max);
+			if (!min || !max) throw new Error("[NumberInput] \"min\" and \"max\" are required when InputEventOption[0] is set to \"normalized\".");
+			newValue = (0, _tremolo_ui_functions.rawValue)((0, _tremolo_ui_functions.normalizeValue)(valueAsNumber, min, max) + x, min, max);
+			return (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)(newValue, step), min, max);
 		} else {
 			newValue = valueAsNumber + x;
-			return (0, __tremolo_ui_functions.stepValue)(newValue, step);
+			return (0, _tremolo_ui_functions.stepValue)(newValue, step);
 		}
 	}, [
 		max,
@@ -946,8 +909,8 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 			const v = event.currentTarget.value;
 			const cursorPos = event.target.selectionStart;
 			change(v);
-			const valueAsNumber$1 = parseValue(v, units, digit).rawValue;
-			onChange?.(valueAsNumber$1, v);
+			const valueAsNumber = parseValue(v, units, digit).rawValue;
+			onChange?.(valueAsNumber, v);
 			if (cursorPos) {
 				event.target.selectionStart = cursorPos;
 				event.target.selectionEnd = cursorPos;
@@ -978,11 +941,9 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 		...props
 	});
 });
-
 //#endregion
 //#region src/components/NumberInput/Stepper.tsx
-/** @category NumberInput */
-function Stepper({ dynamic = true, children, className,...props }) {
+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,
@@ -990,62 +951,58 @@ function Stepper({ dynamic = true, children, className,...props }) {
 		children
 	});
 }
-
-//#endregion
-//#region src/components/NumberInput/index.tsx
-const NumberInputImpl = (0, react.forwardRef)(({ value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = "outline", selectWithFocus = "none", blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ["raw", 1], keyboard = ["raw", 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children,...props }, forwardedRef) => {
-	const colors = { "--active-color": activeColor };
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputProvider, {
-		value: String(value),
-		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: forwardedRef,
-				readonly,
-				disabled,
-				selectWithFocus,
-				blurOnEnter,
-				clampValueOnBlur,
-				wheel,
-				keyboard,
-				className,
-				onChange,
-				onFocus,
-				onBlur,
-				...props
-			}), children]
-		})
-	});
-});
 /**
 * Input with some useful functions for entering numerical values.
-* @category NumberInput
 */
-const NumberInput = Object.assign(NumberInputImpl, {
+const NumberInput = {
+	Root: (0, react.forwardRef)(({ value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = "outline", selectWithFocus = "none", blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ["raw", 1], keyboard = ["raw", 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children, ...props }, forwardedRef) => {
+		const colors = { "--active-color": activeColor };
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputProvider, {
+			value: String(value),
+			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: forwardedRef,
+					readonly,
+					disabled,
+					selectWithFocus,
+					blurOnEnter,
+					clampValueOnBlur,
+					wheel,
+					keyboard,
+					className,
+					onChange,
+					onFocus,
+					onBlur,
+					...props
+				}), children]
+			})
+		});
+	}),
 	Stepper,
 	IncrementStepper,
 	DecrementStepper
-});
-
+};
 //#endregion
-//#region src/hooks/useDragWithElement.ts
+//#region src/hooks/usePianoDrag.ts
 /**
-* @category hooks
+* Internal
 * @returns [refCallback, pointerDownHandler]
+* @private
 */
-function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd }) {
+function usePianoDrag({ baseElementRef, onDrag, onDragStart, onDragEnd }) {
 	const dragged = (0, react.useRef)(false);
 	const normalizedX = (0, react.useRef)(0);
 	const normalizedY = (0, react.useRef)(0);
@@ -1056,8 +1013,8 @@ function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd })
 		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);
+		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);
@@ -1074,9 +1031,11 @@ function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd })
 		dragged.current = false;
 		onDragEnd?.(normalizedX.current, normalizedY.current);
 	});
-	return [refHandler, pointerDownHandler];
+	return {
+		refHandler,
+		pointerDownHandler
+	};
 }
-
 //#endregion
 //#region src/components/Piano/context.tsx
 const createPianoStore = (initProps) => {
@@ -1099,7 +1058,7 @@ const createPianoStore = (initProps) => {
 	}));
 };
 const PianoContext = (0, react.createContext)(null);
-function PianoProvider({ children,...props }) {
+function PianoProvider({ children, ...props }) {
 	const storeRef = (0, react.useRef)(null);
 	if (!storeRef.current) storeRef.current = createPianoStore(props);
 	(0, react.useEffect)(() => {
@@ -1111,17 +1070,14 @@ function PianoProvider({ children,...props }) {
 		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 }) {
+function KeyLabel({ label, className, wrapperClassName, wrapperStyle, __note, __label, ...props }) {
 	const index = getNoteRangeArray(usePianoContext((s) => s.noteRange)).indexOf(__note);
 	const content = label ? label(__note, index) : __label && __label(__note, index);
 	return (content != void 0 || content != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1134,14 +1090,7 @@ function KeyLabel({ label, className, wrapperClassName, wrapperStyle, __note, __
 		})
 	});
 }
-
-//#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 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);
@@ -1203,8 +1152,7 @@ const KeyImpl = (0, react.forwardRef)(({ keyType, noteNumber, width, height, bg,
 		})
 	});
 });
-/** @category Piano */
-const WhiteKey = (0, react.forwardRef)(({ width = defaultWhiteKeyWidth, height = "100%", onContextMenu = (e) => e.preventDefault(),...props }, ref) => {
+const WhiteKey = (0, react.forwardRef)(({ width = 40, height = "100%", onContextMenu = (e) => e.preventDefault(), ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyImpl, {
 		ref,
 		keyType: "white",
@@ -1214,8 +1162,7 @@ const WhiteKey = (0, react.forwardRef)(({ width = defaultWhiteKeyWidth, height =
 		...props
 	});
 });
-/** @category Piano */
-const BlackKey = (0, react.forwardRef)(({ width = defaultBlackKeyWidth, height = "60%", onContextMenu = (e) => e.preventDefault(),...props }, ref) => {
+const BlackKey = (0, react.forwardRef)(({ width = 26, height = "60%", onContextMenu = (e) => e.preventDefault(), ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyImpl, {
 		ref,
 		keyType: "black",
@@ -1225,10 +1172,8 @@ const BlackKey = (0, react.forwardRef)(({ width = defaultBlackKeyWidth, height =
 		...props
 	});
 });
-
 //#endregion
 //#region src/components/Piano/keyboardShortcuts.ts
-/** @category Piano */
 const SHORTCUTS = { HOME_ROW: { keys: [
 	"a",
 	"w",
@@ -1248,208 +1193,406 @@ const SHORTCUTS = { HOME_ROW: { keys: [
 	"p",
 	";"
 ] } };
-
 //#endregion
 //#region src/components/Piano/index.tsx
 /**
 * [noteRange.first, noteRange.first + 1 ..., noteRange.last]
-* @category Piano
 */
 function getNoteRangeArray(noteRange) {
 	return Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
 }
-const blackPerWhiteWidth = defaultBlackKeyWidth / defaultWhiteKeyWidth;
-const PianoImpl = (0, react.forwardRef)(({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? "100%" : 160, whiteNoteWidth: _whiteNoteWidth = defaultWhiteKeyWidth, style, className, onPlayNote, onStopNote, label, children, onPointerDown,...props }, forwardedRef) => {
-	const [whiteNoteWidth, setWhiteNoteWidth] = (0, react.useState)(_whiteNoteWidth);
-	const keyRefs = (0, react.useRef)([]);
-	for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) keyRefs.current[i] = (0, react.createRef)();
-	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
+const blackPerWhiteWidth = 26 / 40;
+/**
+* Customizable piano component.
+*/
+const Piano = {
+	Root: (0, react.forwardRef)(({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? "100%" : 160, whiteNoteWidth: _whiteNoteWidth = 40, style, className, onPlayNote, onStopNote, label, children, onPointerDown, ...props }, forwardedRef) => {
+		const [whiteNoteWidth, setWhiteNoteWidth] = (0, react.useState)(_whiteNoteWidth);
+		const keyRefs = (0, react.useRef)([]);
+		for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) keyRefs.current[i] = (0, react.createRef)();
+		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 = {
+						ref: keyRefs.current[index],
+						__width
+					};
+					return react.default.cloneElement(child, props);
+				}
+				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;
+			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;
+			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 note = getHitKeyIndex(perX * staticWidth, perY * pianoRef.current.clientHeight);
+			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);
 				};
-				return react.default.cloneElement(child, props$1);
+			} else setWhiteNoteWidth(_whiteNoteWidth);
+		}, [
+			fill,
+			_whiteNoteWidth,
+			whiteNoteCount
+		]);
+		const { refHandler: touchMoveRefCallback, pointerDownHandler } = usePianoDrag({
+			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();
 			}
-			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;
+		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();
+		});
+		(0, react.useImperativeHandle)(forwardedRef, () => {
+			return {
+				playNote(note, velocity) {
+					const index = noteRangeArray.indexOf(note);
+					if (index != -1) {
+						if (!keyRefs.current[index]?.current?.played()) keyRefs.current[index]?.current?.play(velocity);
+					} else onPlayNote?.(note, velocity);
+				},
+				stopNote(note) {
+					const index = noteRangeArray.indexOf(note);
+					if (index != -1) keyRefs.current[index]?.current?.stop();
+					else onStopNote?.(note);
+				}
+			};
+		}, [
+			noteRangeArray,
+			onPlayNote,
+			onStopNote
+		]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PianoProvider, {
+			notePosition,
+			noteRange,
+			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))
+			})
+		});
+	}),
+	WhiteKey,
+	BlackKey,
+	KeyLabel
+};
+//#endregion
+//#region src/components/PointsEditor/Background.tsx
+function Background({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("tremolo-points-editor-background", className),
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/components/PointsEditor/context.tsx
+const createPointsEditorStore = (initProps) => {
+	const DEFAULT_PROPS = {
+		containerElementRef: (0, react.createRef)(),
+		disabled: false,
+		readonly: false,
+		externalStyles: {
+			userSelectNone: true,
+			cursor: "grabbing"
 		}
-		return -1;
-	}, [
-		blackNotes,
-		notePosition,
-		whiteNoteWidth,
-		whiteNotes
-	]);
-	const onDrag = (0, react.useCallback)((perX, perY) => {
-		if (!pianoRef.current) return;
-		const note = getHitKeyIndex(perX * staticWidth, perY * pianoRef.current.clientHeight);
-		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;
+	};
+	return (0, zustand.createStore)()((set) => ({
+		...DEFAULT_PROPS,
+		...initProps,
+		setContainerElementRef: (containerElementRef) => {
+			set(() => ({ containerElementRef }));
 		}
-	}, [
-		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]);
+	}));
+};
+const PointsEditorContext = (0, react.createContext)(null);
+function PointsEditorProvider({ children, ...props }) {
+	const storeRef = (0, react.useRef)(null);
+	if (!storeRef.current) storeRef.current = createPointsEditorStore(props);
 	(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);
+		if (storeRef.current) storeRef.current.setState(props);
+		else storeRef.current = createPointsEditorStore(props);
+	}, [props]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsEditorContext.Provider, {
+		value: storeRef.current,
+		children
+	});
+}
+function usePointsEditorContext(selector) {
+	const store = (0, react.useContext)(PointsEditorContext);
+	if (!store) throw new Error("Missing PointsEditorContext.Provider in the tree");
+	return (0, zustand.useStore)(store, selector);
+}
+//#endregion
+//#region src/components/PointsEditor/Container.tsx
+function Container({ className, children, ...props }) {
+	const containerElementRef = (0, react.useRef)(null);
+	usePointsEditorContext((s) => s.setContainerElementRef)(containerElementRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: containerElementRef,
+		className: (0, clsx.default)("tremolo-points-editor-container", className),
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/hooks/useDragWithElement.ts
+function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd }) {
+	const [dragging, setDragging] = (0, react.useState)(false);
+	const normalizedX = (0, react.useRef)(0);
+	const normalizedY = (0, react.useRef)(0);
+	const handleDrag = (0, react.useCallback)((event) => {
+		if (!baseElementRef.current || !dragging) return;
+		const isTouch = event instanceof TouchEvent;
+		if (isTouch && event.cancelable) event.preventDefault();
+		const { left, top, right, bottom } = baseElementRef.current.getBoundingClientRect();
+		const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
+		const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
+		const nx = (0, _tremolo_ui_functions.normalizeValue)(mouseX, left, right);
+		const ny = (0, _tremolo_ui_functions.normalizeValue)(mouseY, top, bottom);
+		normalizedX.current = nx;
+		normalizedY.current = ny;
+		onDrag(nx, ny);
 	}, [
-		fill,
-		_whiteNoteWidth,
-		whiteNoteCount
-	]);
-	const [touchMoveRefCallback, pointerDownHandler] = useDragWithElement({
-		baseElementRef: pianoRef,
 		onDrag,
-		onDragEnd
+		baseElementRef,
+		dragging
+	]);
+	const refHandler = useRefCallbackEvent("touchmove", handleDrag, { passive: false }, [onDrag]);
+	const pointerDownHandler = (0, react.useCallback)((event) => {
+		setDragging(true);
+		handleDrag(event);
+		onDragStart?.(normalizedX.current, normalizedY.current);
+	}, [handleDrag, onDragStart]);
+	useEventListener(globalThis.window, "pointermove", handleDrag);
+	useEventListener(globalThis.window, "pointerup", () => {
+		if (!dragging) return;
+		setDragging(false);
+		onDragEnd?.(normalizedX.current, normalizedY.current);
 	});
-	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();
+	return {
+		refHandler,
+		pointerDownHandler,
+		dragging
+	};
+}
+//#endregion
+//#region src/components/PointsEditor/Point.tsx
+function clampPoint(point, min, max) {
+	const { x, y } = point;
+	return {
+		x: (0, _tremolo_ui_functions.clamp)(x, min?.x ?? 0, max?.x ?? 1),
+		y: (0, _tremolo_ui_functions.clamp)(y, min?.y ?? 0, max?.y ?? 1)
+	};
+}
+function Point({ value, min, max, size, width = 16, height = 16, color, disabled, readonly, onChange, onDragStart, onDragEnd, className, style, onPointerDown, ...props }) {
+	const containerElementRef = usePointsEditorContext((s) => s.containerElementRef);
+	const externalStyles = usePointsEditorContext((s) => s.externalStyles);
+	const __disabled = usePointsEditorContext((s) => s.disabled);
+	const __readonly = usePointsEditorContext((s) => s.readonly);
+	const { refHandler: touchMoveRefCallback, pointerDownHandler, dragging } = useDragWithElement({
+		baseElementRef: containerElementRef,
+		onDrag: (x, y) => {
+			if (readonly) return;
+			onChange?.(clampPoint({
+				x,
+				y
+			}, min, max));
+		},
+		onDragStart: (x, y) => {
+			if (readonly) return;
+			if (externalStyles.userSelectNone) addUserSelectNone();
+			if (externalStyles.cursor) setCursorStyle(externalStyles.cursor);
+			onDragStart?.(clampPoint({
+				x,
+				y
+			}, min, max));
+		},
+		onDragEnd: (x, y) => {
+			if (readonly) return;
+			if (externalStyles.userSelectNone) removeUserSelectNone();
+			if (externalStyles.cursor) resetCursorStyle();
+			onDragEnd?.(clampPoint({
+				x,
+				y
+			}, min, max));
 		}
 	});
-	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();
-	});
-	(0, react.useImperativeHandle)(forwardedRef, () => {
-		return {
-			playNote(note, velocity) {
-				const index = noteRangeArray.indexOf(note);
-				if (index != -1) {
-					if (!keyRefs.current[index]?.current?.played()) keyRefs.current[index]?.current?.play(velocity);
-				} else onPlayNote?.(note, velocity);
-			},
-			stopNote(note) {
-				const index = noteRangeArray.indexOf(note);
-				if (index != -1) keyRefs.current[index]?.current?.stop();
-				else onStopNote?.(note);
-			}
-		};
-	}, [
-		noteRangeArray,
-		onPlayNote,
-		onStopNote
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PianoProvider, {
-		notePosition,
-		noteRange,
-		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))
-		})
+	const colors = { "--color": color };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: (div) => {
+			touchMoveRefCallback(div);
+		},
+		className: (0, clsx.default)("tremolo-points-editor-point", className),
+		tabIndex: 0,
+		"aria-disabled": disabled != void 0 ? disabled : __disabled,
+		"aria-readonly": readonly != void 0 ? readonly : __readonly,
+		"data-dragging": dragging,
+		style: {
+			...colors,
+			width: size ?? width,
+			height: size ?? height,
+			left: `${value.x * 100}%`,
+			top: `${value.y * 100}%`,
+			...style
+		},
+		onPointerDown: (event) => {
+			pointerDownHandler(event);
+			onPointerDown?.(event);
+		},
+		...props
 	});
-});
+}
+//#endregion
+//#region src/components/PointsEditor/index.tsx
+const defaultExternalStyles$2 = {
+	userSelectNone: true,
+	cursor: "grabbing"
+};
 /**
-* Customizable piano component.
-* @category Piano
+* Multiple Point Controller
 */
-const Piano = Object.assign(PianoImpl, {
-	WhiteKey,
-	BlackKey,
-	KeyLabel
-});
-
+const PointsEditor = {
+	Root: (0, react.forwardRef)(({ width = 200, height = 100, disabled = false, readonly = false, externalStyles: _externalStyles, style, className, children, ...props }, forwardedRef) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsEditorProvider, {
+			disabled,
+			readonly,
+			externalStyles: {
+				...defaultExternalStyles$2,
+				..._externalStyles
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: forwardedRef,
+				className: (0, clsx.default)("tremolo-points-editor", className),
+				style: {
+					width,
+					height,
+					...style
+				},
+				...props,
+				children
+			})
+		});
+	}),
+	Background,
+	Container,
+	Point
+};
 //#endregion
 //#region src/components/Slider/context.tsx
 const createSliderStore = (initProps) => {
@@ -1469,7 +1612,7 @@ const createSliderStore = (initProps) => {
 	}));
 };
 const SliderContext = (0, react.createContext)(null);
-function SliderProvider({ children,...props }) {
+function SliderProvider({ children, ...props }) {
 	const storeRef = (0, react.useRef)(null);
 	if (!storeRef.current) storeRef.current = createSliderStore(props);
 	(0, react.useEffect)(() => {
@@ -1481,24 +1624,21 @@ function SliderProvider({ children,...props }) {
 		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 }) {
+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);
+	const calcPercent = (0, react.useCallback)((rawValue) => {
+		return (0, _tremolo_ui_functions.toFixed)((0, _tremolo_ui_functions.xor)(vertical, reverse) ? 100 - (0, _tremolo_ui_functions.normalizeValue)(rawValue, min, max, skew) * 100 : (0, _tremolo_ui_functions.normalizeValue)(rawValue, min, max, skew) * 100);
 	}, [
 		vertical,
 		reverse,
@@ -1535,7 +1675,6 @@ function ScaleOption({ value, type = "mark-number", label, thickness = 1, length
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/Slider/type.ts
 function generateOptionsList(options, min, max, step) {
@@ -1543,7 +1682,7 @@ function generateOptionsList(options, min, max, step) {
 	const per = options[0] == "step" ? step : options[0];
 	const count = Math.floor(max / per) - Math.ceil(min / per) + 1;
 	for (let i = 0; i < count; i++) {
-		const value = (0, __tremolo_ui_functions.toFixed)(per * (Math.ceil(min / per) + i), (0, __tremolo_ui_functions.decimalPart)(per)?.length);
+		const value = (0, _tremolo_ui_functions.toFixed)(per * (Math.ceil(min / per) + i), (0, _tremolo_ui_functions.decimalPart)(per)?.length);
 		optionsList.push({
 			value,
 			type: options[1]
@@ -1551,18 +1690,16 @@ function generateOptionsList(options, min, max, step) {
 	}
 	return optionsList;
 }
-
 //#endregion
 //#region src/components/Slider/Scale.tsx
-/** @category Slider */
-function Scale({ gap = 6, options, children, className, style,...props }) {
+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 ? generateOptionsList(options, min, max, step) : [];
-	if ((0, __tremolo_ui_functions.xor)(vertical, reverse)) optionsList.reverse();
+	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: {
@@ -1579,13 +1716,7 @@ function Scale({ gap = 6, options, children, className, style,...props }) {
 		}) : children
 	});
 }
-
-//#endregion
-//#region src/components/Slider/Thumb.tsx
-/** @category Slider */
-const defaultThumbSize = 22;
-/** @category Slider */
-const Thumb$1 = (0, react.forwardRef)(({ size, width = defaultThumbSize, height = defaultThumbSize, color, children, className, style, __percent }, ref) => {
+const Thumb$1 = (0, react.forwardRef)(({ size, width = 22, height = 22, color, children, className, style, __percent }, ref) => {
 	const wrapperRef = (0, react.useRef)(null);
 	const vertical = useSliderContext((s) => s.vertical);
 	const disabled = useSliderContext((s) => s.disabled);
@@ -1621,13 +1752,7 @@ const Thumb$1 = (0, react.forwardRef)(({ size, width = defaultThumbSize, height
 		})
 	});
 });
-
-//#endregion
-//#region src/components/Slider/Track.tsx
-const defaultLength = 140;
-const defaultThickness = 10;
-/** @category Slider */
-function Track({ length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, defaultStyle = true, __thumb, __percent = 0,...props }) {
+function Track({ length = 140, thickness = 10, 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);
@@ -1642,8 +1767,8 @@ function Track({ length = defaultLength, thickness = defaultThickness, active, i
 		"data-vertical": vertical,
 		style: !defaultStyle ? style : {
 			...colors,
-			background: (0, __tremolo_ui_functions.xor)(vertical, reverse) ? `linear-gradient(to ${direction}, var(--inactive) ${__percent}%, var(--active) ${__percent}%)` : `linear-gradient(to ${direction}, var(--active) ${__percent}%, var(--inactive) ${__percent}%)`,
-			borderRadius: (0, __tremolo_ui_functions.styleHelper)(thickness, "/", 2),
+			background: (0, _tremolo_ui_functions.xor)(vertical, reverse) ? `linear-gradient(to ${direction}, var(--inactive) ${__percent}%, var(--active) ${__percent}%)` : `linear-gradient(to ${direction}, var(--active) ${__percent}%, var(--inactive) ${__percent}%)`,
+			borderRadius: (0, _tremolo_ui_functions.styleHelper)(thickness, "/", 2),
 			width: !vertical ? length : thickness,
 			height: vertical ? length : thickness,
 			...style
@@ -1652,213 +1777,259 @@ function Track({ length = defaultLength, thickness = defaultThickness, active, i
 		children: [children, __thumb]
 	});
 }
-
 //#endregion
 //#region src/components/Slider/index.tsx
-const SliderImpl = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, vertical = false, reverse = false, bodyNoSelect = true, wheel = ["raw", 1], keyboard = ["raw", 1], disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown,...props }, forwardedRef) => {
-	const trackElementRef = (0, react.useRef)(null);
-	const thumbRef = (0, react.useRef)(null);
-	const p = (0, __tremolo_ui_functions.toFixed)((0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew) * 100);
-	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 == 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.");
-	});
-	const onDrag = (0, react.useCallback)((nx, ny) => {
-		if (!onChange || readonly) return;
-		const n = vertical ? ny : nx;
-		onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)((0, __tremolo_ui_functions.rawValue)(displayReversed ? 1 - n : n, min, max, skew), step), min, max));
-	}, [
-		displayReversed,
-		max,
-		min,
-		onChange,
-		readonly,
-		skew,
-		step,
-		vertical
-	]);
-	const updateValueByEvent = (0, react.useCallback)((eventType, x) => {
-		let newValue;
-		if (eventType == "normalized") newValue = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
-		else newValue = value + x;
-		return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(newValue, step), min, max);
-	}, [
-		max,
-		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)(forwardedRef, () => {
-		return {
-			focus() {
-				thumbRef.current?.focus();
-			},
-			blur() {
-				thumbRef.current?.blur();
-			}
+const defaultExternalStyles$1 = {
+	userSelectNone: true,
+	cursor: "pointer"
+};
+/**
+* Customizable slider
+*/
+const Slider = {
+	Root: (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, vertical = false, reverse = false, externalStyles: _externalStyles, wheel = ["raw", 1], keyboard = ["raw", 1], disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown, ...props }, forwardedRef) => {
+		const trackElementRef = (0, react.useRef)(null);
+		const thumbRef = (0, react.useRef)(null);
+		const externalStyles = {
+			...defaultExternalStyles$1,
+			..._externalStyles
 		};
-	}, []);
-	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) => {
+		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 == 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.");
+		});
+		const onDrag = (0, react.useCallback)((nx, ny) => {
+			if (!onChange || readonly) return;
+			const n = vertical ? ny : nx;
+			onChange((0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(displayReversed ? 1 - n : n, min, max, skew), step), min, max));
+		}, [
+			displayReversed,
+			max,
+			min,
+			onChange,
+			readonly,
+			skew,
+			step,
+			vertical
+		]);
+		const updateValueByEvent = (0, react.useCallback)((eventType, x) => {
+			let newValue;
+			if (eventType == "normalized") newValue = (0, _tremolo_ui_functions.rawValue)((0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
+			else newValue = value + x;
+			return (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)(newValue, step), min, max);
+		}, [
+			max,
+			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 { refHandler: touchMoveRefCallback, pointerDownHandler } = useDragWithElement({
+			baseElementRef: trackElementRef,
+			onDrag,
+			onDragStart: (nx, ny) => {
+				if (readonly) return;
+				if (externalStyles.userSelectNone) addUserSelectNone();
+				if (externalStyles.cursor) setCursorStyle(externalStyles.cursor);
 				thumbRef.current?.focus();
-				onFocus?.(event);
+				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));
 			},
-			onBlur: (event) => {
-				thumbRef.current?.blur();
-				onBlur?.(event);
-			},
-			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			onDragEnd: (nx, ny) => {
+				if (readonly) return;
+				if (externalStyles.userSelectNone) removeUserSelectNone();
+				if (externalStyles.cursor) resetCursorStyle();
+				onDragEnd?.((0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(vertical ? ny : nx, min, max, skew), step), min, max));
+			}
+		});
+		const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+			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)(forwardedRef, () => {
+			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: {
-					display: "flex",
-					flexDirection: vertical ? "row" : "column",
-					width: !vertical ? "100%" : void 0,
-					height: vertical ? "100%" : void 0
+					margin: `calc(${(0, _tremolo_ui_functions.styleHelper)(thumbProps?.size ?? 22)} / 2)`,
+					...style
 				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "tremolo-slider-track-wrapper",
-					ref: trackElementRef,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Track, {
-						__percent: percent,
-						__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb$1, {
-							ref: thumbRef,
+				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)(Track, {
 							__percent: percent,
-							...thumbProps
-						}),
-						...trackProps
-					})
-				}), scaleComponent]
+							__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb$1, {
+								ref: thumbRef,
+								__percent: percent,
+								...thumbProps
+							}),
+							...trackProps
+						})
+					}), scaleComponent]
+				})
 			})
-		})
-	});
-});
-/**
-* Customizable slider
-* @category Slider
-*/
-const Slider = Object.assign(SliderImpl, {
+		});
+	}),
 	Thumb: Thumb$1,
 	Track,
 	Scale,
 	ScaleOption
-});
-
+};
+//#endregion
+//#region src/components/_util/composeRefs.tsx
+/**
+* Set a given ref to a given value
+* This utility takes care of different types of refs: callback refs and RefObject(s)
+*/
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+/**
+* A utility to compose multiple refs together
+* Accepts callback refs and RefObject(s)
+*/
+function composeRefs(...refs) {
+	return (node) => {
+		let hasCleanup = false;
+		const cleanups = refs.map((ref) => {
+			const cleanup = setRef(ref, node);
+			if (!hasCleanup && typeof cleanup == "function") hasCleanup = true;
+			return cleanup;
+		});
+		if (hasCleanup) return () => {
+			for (let i = 0; i < cleanups.length; i++) {
+				const cleanup = cleanups[i];
+				if (typeof cleanup == "function") cleanup();
+				else setRef(refs[i], null);
+			}
+		};
+	};
+}
 //#endregion
 //#region src/components/WheelObserver/index.tsx
-/** @category WheelObserver */
+/**
+* @example
+* <WheelObserver
+*   onWheel={(event) => {
+*     event.preventDefault()
+*     console.log(event.deltaY)
+*   }
+* >
+*   <div>Wheel here</div>
+* </WheelObserver>
+*/
 function WheelObserver(props) {
-	const { children, onWheel, as: Component = "div",...attributes } = props;
+	const { as: Component = "div", children, onWheel, ref, ...attributes } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-		ref: useRefCallbackEvent("wheel", (event) => {
+		ref: composeRefs(ref, useRefCallbackEvent("wheel", (event) => {
 			if (onWheel) onWheel(event);
-		}, { passive: false }, [onWheel]),
+		}, { passive: false }, [onWheel])),
 		...attributes,
 		children
 	});
 }
-
 //#endregion
 //#region src/components/XYPad/Area.tsx
-/** @category XYPad */
-function Area({ width = 120, height = 120, color, children, className, style, __thumb,...props }) {
+function Area({ 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: {
@@ -1871,11 +2042,9 @@ function Area({ width = 120, height = 120, color, children, className, style, __
 		children: [children, __thumb]
 	});
 }
-
 //#endregion
 //#region src/components/XYPad/Thumb.tsx
-/** @category XYPad */
-const Thumb = (0, react.forwardRef)(({ size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __readonly, __css,...props }, ref) => {
+const Thumb = (0, react.forwardRef)(({ size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __readonly, __css, ...props }, ref) => {
 	const wrapperRef = (0, react.useRef)(null);
 	(0, react.useImperativeHandle)(ref, () => {
 		return {
@@ -1909,7 +2078,6 @@ const Thumb = (0, react.forwardRef)(({ size, width = 22, height = 22, color, chi
 		})
 	});
 });
-
 //#endregion
 //#region src/components/XYPad/index.tsx
 const defaultValueOptions = {
@@ -1919,197 +2087,201 @@ const defaultValueOptions = {
 	wheel: ["raw", 1],
 	keyboard: ["raw", 1]
 };
-const XYPadImpl = (0, react.forwardRef)(({ x: _x, y: _y, className, style, bodyNoSelect = true, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children,...props }, forwardedRef) => {
-	const x = (0, react.useMemo)(() => {
-		return {
-			...defaultValueOptions,
-			..._x
-		};
-	}, [_x]);
-	const y = (0, react.useMemo)(() => {
-		return {
-			...defaultValueOptions,
-			..._y
+const defaultExternalStyles = {
+	userSelectNone: true,
+	cursor: "pointer"
+};
+/**
+* Simple XYPad
+*/
+const XYPad = {
+	Root: (0, react.forwardRef)(({ x: _x, y: _y, className, style, externalStyles: _externalStyles, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children, ...props }, forwardedRef) => {
+		const x = (0, react.useMemo)(() => {
+			return {
+				...defaultValueOptions,
+				..._x
+			};
+		}, [_x]);
+		const y = (0, react.useMemo)(() => {
+			return {
+				...defaultValueOptions,
+				..._y
+			};
+		}, [_y]);
+		const rootRef = (0, react.useRef)(null);
+		const areaElementRef = (0, react.useRef)(null);
+		const thumbRef = (0, react.useRef)(null);
+		const externalStyles = {
+			...defaultExternalStyles,
+			..._externalStyles
 		};
-	}, [_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 == 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.");
-	});
-	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);
-		onChange((0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(vx, x.step), x.min, x.max), (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(vy, y.step), y.min, y.max));
-	}, [
-		onChange,
-		readonly,
-		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") v = (0, __tremolo_ui_functions.rawValue)((0, __tremolo_ui_functions.normalizeValue)(target.value, target.min, target.max, target.skew) + x$1, target.min, target.max, target.skew);
-		else v = target.value + x$1;
-		return (0, __tremolo_ui_functions.clamp)((0, __tremolo_ui_functions.stepValue)(v, target.step), target.min, target.max);
-	}, []);
-	const handleKeyDown = (0, react.useCallback)((event) => {
-		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;
+		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 == 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.");
+		});
+		const onDrag = (0, react.useCallback)((nx, ny) => {
+			if (!onChange || readonly) return;
+			const vx = (0, _tremolo_ui_functions.rawValue)(x.reverse ? 1 - nx : nx, x.min, x.max, x.skew);
+			const vy = (0, _tremolo_ui_functions.rawValue)(y.reverse ? 1 - ny : ny, y.min, y.max, y.skew);
+			onChange((0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)(vx, x.step), x.min, x.max), (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)(vy, y.step), y.min, y.max));
+		}, [
+			onChange,
+			readonly,
+			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) => {
+			let v;
+			if (eventType == "normalized") v = (0, _tremolo_ui_functions.rawValue)((0, _tremolo_ui_functions.normalizeValue)(target.value, target.min, target.max, target.skew) + x, target.min, target.max, target.skew);
+			else v = target.value + x;
+			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 { refHandler: touchMoveRefCallback, pointerDownHandler } = useDragWithElement({
+			baseElementRef: areaElementRef,
+			onDrag,
+			onDragStart: (nx, ny) => {
+				if (readonly) return;
+				if (externalStyles.userSelectNone) addUserSelectNone();
+				if (externalStyles.cursor) setCursorStyle(externalStyles.cursor);
+				thumbRef.current?.focus();
+				const valueX = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
+				const valueY = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
+				onDragStart?.(valueX, valueY);
+			},
+			onDragEnd: (nx, ny) => {
+				if (readonly) return;
+				if (externalStyles.userSelectNone) removeUserSelectNone();
+				if (externalStyles.cursor) resetCursorStyle();
+				const valueX = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
+				const valueY = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
+				onDragEnd?.(valueX, valueY);
+			}
+		});
+		const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+			if (!onChange || readonly) return;
+			const target = event.shiftKey ? x : y;
+			if (!target.wheel) return;
 			event.preventDefault();
-			let delta = target.keyboard[1];
-			if (key == "ArrowLeft" || key == "ArrowUp") delta *= -1;
+			let delta = target.wheel[1];
+			if (event.deltaY < 0) delta *= -1;
 			if (target.reverse) delta *= -1;
-			const newValue = updateValueByEvent(target.keyboard[0], target, delta);
-			if (isHorizontal) onChange(newValue, y.value);
+			const newValue = updateValueByEvent(target.wheel[0], target, delta);
+			if (event.shiftKey) 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)(forwardedRef, () => {
-		return {
-			focus() {
+		}, { passive: false }, [
+			x,
+			y,
+			onChange,
+			readonly,
+			updateValueByEvent
+		]);
+		(0, react.useImperativeHandle)(forwardedRef, () => {
+			return {
+				focus() {
+					thumbRef.current?.focus();
+				},
+				blur() {
+					thumbRef.current?.blur();
+				},
+				original: rootRef
+			};
+		}, []);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("tremolo-xy-pad", className),
+			ref: composeRefs(rootRef, wheelRefCallback, touchMoveRefCallback),
+			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);
 			},
-			blur() {
+			onBlur: (event) => {
 				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)(Area, {
-				__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb, {
-					ref: thumbRef,
-					__disabled: disabled,
-					__readonly: readonly,
-					__css: {
-						top: `${percentY}%`,
-						left: `${percentX}%`
-					},
-					...thumbProps
-				}),
-				...areaProps
+				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)(Area, {
+					__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb, {
+						ref: thumbRef,
+						__disabled: disabled,
+						__readonly: readonly,
+						__css: {
+							top: `${percentY}%`,
+							left: `${percentX}%`
+						},
+						...thumbProps
+					}),
+					...areaProps
+				})
 			})
-		})
-	});
-});
-/**
-* 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 = (0, react.useRef)(-1);
 	const loop = (0, react.useCallback)(() => {
@@ -2121,7 +2293,6 @@ function useAnimationFrame(callback = () => {}, deps = []) {
 		return () => cancelAnimationFrame(reqIdRef.current);
 	}, [loop]);
 }
-
 //#endregion
 //#region src/hooks/useMIDIAccess.ts
 /** @private */
@@ -2130,7 +2301,6 @@ const PERMISSION_DENIED = "PERMISSION_DENIED";
 const NOT_SUPPORTED = "NOT_SUPPORTED";
 /**
 * Hooks for requesting MIDI access in the browser. The first argument allows you to choose whether to request access on mount.
-* @category hooks
 */
 function useMIDIAccess(requestOnMount = true) {
 	const [midiAccess, setMidiAccess] = (0, react.useState)(null);
@@ -2153,12 +2323,10 @@ function useMIDIAccess(requestOnMount = true) {
 		error
 	};
 }
-
 //#endregion
 //#region src/hooks/useMIDIMessage.ts
 /**
 * Hooks for when you want to process MIDI events in more detail than useMIDIInput.
-* @category hooks
 */
 function useMIDIMessage(midiAccess, onMIDIMessage) {
 	(0, react.useEffect)(() => {
@@ -2169,7 +2337,6 @@ function useMIDIMessage(midiAccess, onMIDIMessage) {
 		};
 	}, [midiAccess, onMIDIMessage]);
 }
-
 //#endregion
 //#region src/hooks/useMIDIInput.ts
 const MIDI_EVENT_TO_NUMBER = {
@@ -2179,7 +2346,6 @@ const MIDI_EVENT_TO_NUMBER = {
 };
 /**
 * Hooks for handling note on/off events. To be used with useMIDIAccess. Internally uses useMIDIMessage.
-* @category hooks
 */
 function useMIDIInput(midiAccess, onNoteOnEvent, onNoteOffEvent, onPitchBendEvent) {
 	useMIDIMessage(midiAccess, (0, react.useCallback)((event) => {
@@ -2194,20 +2360,20 @@ function useMIDIInput(midiAccess, onNoteOnEvent, onNoteOffEvent, onPitchBendEven
 		onPitchBendEvent
 	]));
 }
-
 //#endregion
 exports.AnimationCanvas = AnimationCanvas;
-exports.AnimationKnob = AnimationKnob;
 exports.DragObserver = DragObserver;
 exports.Knob = Knob;
 exports.NOT_SUPPORTED = NOT_SUPPORTED;
 exports.NumberInput = NumberInput;
 exports.PERMISSION_DENIED = PERMISSION_DENIED;
 exports.Piano = Piano;
+exports.PointsEditor = PointsEditor;
 exports.SHORTCUTS = SHORTCUTS;
 exports.Slider = Slider;
 exports.WheelObserver = WheelObserver;
 exports.XYPad = XYPad;
+exports.clampPoint = clampPoint;
 exports.getNoteRangeArray = getNoteRangeArray;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useDrag = useDrag;
@@ -2219,4 +2385,5 @@ exports.useMIDIAccess = useMIDIAccess;
 exports.useMIDIInput = useMIDIInput;
 exports.useMIDIMessage = useMIDIMessage;
 exports.useSliderContext = useSliderContext;
+
 //# sourceMappingURL=index.cjs.map