@tremolo-ui/react 0.1.6 → 0.2.1

package/dist/index.js

@@ -3,7 +3,6 @@ import React, { createContext, createRef, forwardRef, useCallback, useContext, u
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clamp, decimalPart, isBlackKey, isWhiteKey, normalizeValue, noteKey, noteKeys, radian, rawValue, stepValue, styleHelper, toFixed, xor } from "@tremolo-ui/functions";
 import { createStore, useStore } from "zustand";
-
 //#region src/components/AnimationCanvas/canvas.ts
 const drawingState = [
 	"strokeStyle",
@@ -33,10 +32,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 = useRef(null);
 	const memoCanvasRef = useRef(null);
 	const reqIdRef = useRef(-1);
@@ -140,7 +138,6 @@ function AnimationCanvas({ draw, init, animate = true, options, width: _width =
 		ref: memoCanvasRef
 	})] });
 }
-
 //#endregion
 //#region src/hooks/useCallbackRef.ts
 /**
@@ -156,14 +153,13 @@ function useCallbackRef(callback, deps = []) {
 	});
 	return useCallback((...args) => callbackRef.current?.(...args), deps);
 }
-
 //#endregion
 //#region src/hooks/useEventListener.ts
 function useEventListener(target, event, handler, options) {
 	const listener = useCallbackRef(handler);
 	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);
@@ -172,14 +168,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 = []) {
@@ -197,18 +191,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 = useRef(void 0);
 	const dragOffsetY = useRef(void 0);
 	const dragStartX = useRef(0);
 	const dragStartY = useRef(0);
+	const threshold = Math.max(_threshold, 1);
 	const handleDrag = useCallback((event, first = false) => {
 		const isTouch = event instanceof TouchEvent;
 		if (isTouch && event.cancelable) event.preventDefault();
@@ -229,15 +222,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 = 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;
@@ -246,168 +239,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 = 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 = useRef(0);
-	const elmRef = useRef(null);
-	const isRelativeSize = typeof (size ?? width) == "string" || typeof height == "string";
-	const onDrag = useCallback((_x, y) => {
-		if (!onChange) return;
-		onChange(clamp(stepValue(rawValue(valueRef.current - y / 100, min, max, skew), step), min, max));
-	}, [
-		max,
-		min,
-		onChange,
-		skew,
-		step
-	]);
-	const handleKeyDown = 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 = rawValue(normalizeValue(value, min, max, skew) + x, min, max, skew);
-			else v = value + x;
-			onChange(clamp(stepValue(v, step), min, max));
-		}
-	}, [
-		value,
-		min,
-		max,
-		step,
-		skew,
-		keyboard,
-		onChange
-	]);
-	const [touchMoveRefCallback, pointerDownHandler] = useDrag({
-		onDrag,
-		onDragStart: () => {
-			valueRef.current = 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 = rawValue(normalizeValue(value, min, max, skew) + x, min, max, skew);
-		else v = value + x;
-		if (onChange) onChange(clamp(stepValue(v, step), min, max));
-	}, { passive: false }, [
-		wheel,
-		value,
-		min,
-		max,
-		skew,
-		step,
-		onChange
-	]);
-	useImperativeHandle(ref, () => {
-		return {
-			focus() {
-				elmRef.current?.focus();
-			},
-			blur() {
-				elmRef.current?.blur();
-			}
-		};
-	}, []);
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("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__ */ jsx(AnimationCanvas, {
-			...isRelativeSize ? { relativeSize: true } : {
-				width: size ?? width,
-				height: size ?? height
-			},
-			draw: draw ? draw : (ctx, { width: width$1, height: height$1 }) => {
-				const p = normalizeValue(value, min, max, skew);
-				const startP = 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, radian(135), radian(45));
-				ctx.stroke();
-				ctx.beginPath();
-				ctx.strokeStyle = activeColor;
-				ctx.arc(cx, cy, r - .5 - lineWeight / 2, radian(135 + 270 * startP), radian(135 + 270 * p), p < startP);
-				ctx.stroke();
-				ctx.lineCap = "round";
-				ctx.beginPath();
-				ctx.moveTo(cx, cy);
-				ctx.lineTo(cx + Math.cos(radian(135 + 270 * p)) * (r - .5 - thumbWeight / 2), cy + Math.sin(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,
@@ -416,190 +251,333 @@ function DragObserver(props) {
 	});
 	return /* @__PURE__ */ 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 = forwardRef(({ value, min, max, step = 1, skew = 1, defaultValue = min, startValue = min, size = 50, bodyNoSelect = true, wheel = ["raw", 1], keyboard = ["raw", 1], enableDoubleClickDefault = true, disabled = false, readonly = false, activeLine, inactiveLine, thumb, thumbLine, thumbSize = 84, thumbLineWeight = 6, thumbLineLength = 35, lineWeight = 6, angleRange = 270, onChange, onKeyDown, onPointerDown, onDoubleClick, className, classes,...props }, forwardedRef) => {
-	const valueRef = useRef(0);
-	const elmRef = useRef(null);
-	const onDrag = useCallback((_x, y) => {
-		if (!onChange || readonly) return;
-		onChange(clamp(stepValue(rawValue(valueRef.current - y / 100, min, max, skew), step), min, max));
-	}, [
-		max,
-		min,
-		onChange,
-		readonly,
-		skew,
-		step
-	]);
-	const updateValueByEvent = useCallback((eventType, x) => {
-		let newValue;
-		if (eventType == "normalized") newValue = rawValue(normalizeValue(value, min, max, skew) + x, min, max, skew);
-		else newValue = value + x;
-		return clamp(stepValue(newValue, step), min, max);
-	}, [
-		max,
-		min,
-		skew,
-		step,
-		value
-	]);
-	const handleKeyDown = 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 = 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
-	]);
-	useImperativeHandle(forwardedRef, () => {
-		return {
-			focus() {
-				elmRef.current?.focus();
-			},
-			blur() {
-				elmRef.current?.blur();
-			}
-		};
-	}, []);
-	const viewBoxSize = 100;
-	const center = viewBoxSize / 2;
-	const padding = (viewBoxSize - clamp(thumbSize, 0, 100)) / 2;
+}
+function calcDrawingState({ value, min, max, skew, startValue, angleRange }) {
 	const p = normalizeValue(value, min, max, skew);
 	const s = normalizeValue(startValue, min, max, skew);
 	const r1 = -angleRange / 2;
 	const r2 = r1 + Math.min(p, s) * angleRange;
 	const r3 = r1 + Math.max(p, s) * angleRange;
 	const r4 = angleRange / 2;
-	const x1 = center + center * Math.cos(radian(r1 - 90));
-	const y1 = center + center * Math.sin(radian(r1 - 90));
-	const x2 = center + center * Math.cos(radian(r2 - 90));
-	const y2 = center + center * Math.sin(radian(r2 - 90));
-	const x3 = center + center * Math.cos(radian(r3 - 90));
-	const y3 = center + center * Math.sin(radian(r3 - 90));
-	const x4 = center + center * Math.cos(radian(r4 - 90));
-	const y4 = center + center * Math.sin(radian(r4 - 90));
+	return {
+		p,
+		r1,
+		r2,
+		r3,
+		r4,
+		x1: 50 + 50 * Math.cos(radian(r1 - 90)),
+		y1: 50 + 50 * Math.sin(radian(r1 - 90)),
+		x2: 50 + 50 * Math.cos(radian(r2 - 90)),
+		y2: 50 + 50 * Math.sin(radian(r2 - 90)),
+		x3: 50 + 50 * Math.cos(radian(r3 - 90)),
+		y3: 50 + 50 * Math.sin(radian(r3 - 90)),
+		x4: 50 + 50 * Math.cos(radian(r4 - 90)),
+		y4: 50 + 50 * Math.sin(radian(r4 - 90))
+	};
+}
+const createKnobStore = (initProps) => {
+	return createStore()(() => ({
+		...initProps,
+		...calcDrawingState(initProps)
+	}));
+};
+const KnobContext = createContext(null);
+function KnobProvider({ children, ...props }) {
+	const storeRef = useRef(null);
+	if (!storeRef.current) storeRef.current = createKnobStore(props);
+	useEffect(() => {
+		if (storeRef.current) storeRef.current.setState({
+			...props,
+			...calcDrawingState(props)
+		});
+		else storeRef.current = createKnobStore(props);
+	}, [props]);
+	return /* @__PURE__ */ jsx(KnobContext.Provider, {
+		value: storeRef.current,
+		children
+	});
+}
+function useKnobContext(selector) {
+	const store = useContext(KnobContext);
+	if (!store) throw new Error("Missing KnobContext.Provider in the tree");
+	return 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__ */ jsx("path", {
+		className: clsx("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__ */ jsxs(Fragment, { children: [startValue > min && /* @__PURE__ */ jsx("path", {
+		className: clsx("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__ */ jsx("path", {
+		className: clsx("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__ */ jsxs("svg", {
-		ref: (div) => {
-			elmRef.current = div;
-			wheelRefCallback(div);
-			touchMoveRefCallback(div);
-		},
-		className: clsx("tremolo-knob", className),
-		viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
-		width: size,
-		height: size,
-		tabIndex: 0,
-		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: clsx("tremolo-knob-thumb", classes?.thumb),
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "50%",
+			cy: "50%",
+			r: `${thumbSize / 2}%`,
+			fill: thumb
+		}), /* @__PURE__ */ jsx("line", {
+			className: clsx("tremolo-knob-thumb-line", classes?.thumbLine),
+			x1: "50%",
+			y1: `${(100 - 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__ */ jsx("svg", {
+		viewBox: `0 0 100 100`,
+		style: {
+			display: "block",
+			overflow: "visible",
+			...style
 		},
 		...props,
-		children: [
-			startValue > min && /* @__PURE__ */ jsx("path", {
-				className: clsx("tremolo-knob-inactive-line", classes?.inactiveLine),
-				d: `M ${x1} ${y1} A ${center} ${center} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2}, ${y2}`,
-				fill: "none",
-				stroke: inactiveLine || "currentColor",
-				strokeWidth: lineWeight
-			}),
-			/* @__PURE__ */ jsx("path", {
-				className: clsx("tremolo-knob-active-line", classes?.activeLine),
-				d: `M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`,
-				fill: "none",
-				stroke: activeLine || "currentColor",
-				strokeWidth: lineWeight
-			}),
-			startValue < max && /* @__PURE__ */ jsx("path", {
-				className: clsx("tremolo-knob-inactive-line", classes?.inactiveLine),
-				d: `M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4}, ${y4}`,
-				fill: "none",
-				stroke: inactiveLine || "currentColor",
-				strokeWidth: lineWeight
-			}),
-			/* @__PURE__ */ jsxs("svg", {
-				className: clsx("tremolo-knob-thumb", classes?.thumb),
-				children: [/* @__PURE__ */ jsx("circle", {
-					cx: "50%",
-					cy: "50%",
-					r: `${thumbSize / 2}%`,
-					fill: thumb || "currentColor"
-				}), /* @__PURE__ */ jsx("line", {
-					className: clsx("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__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(InactiveLine, {}),
+			/* @__PURE__ */ jsx(ActiveLine, {}),
+			/* @__PURE__ */ 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: 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] = useState(false);
+		const valueRef = useRef(0);
+		const elmRef = useRef(null);
+		const externalStyles = {
+			...defaultExternalStyles$3,
+			..._externalStyles
+		};
+		const onDrag = useCallback((_x, y) => {
+			if (!onChange || readonly) return;
+			onChange(clamp(stepValue(rawValue(valueRef.current - y / 100, min, max, skew), step), min, max));
+		}, [
+			max,
+			min,
+			onChange,
+			readonly,
+			skew,
+			step
+		]);
+		const updateValueByEvent = useCallback((eventType, x) => {
+			let newValue;
+			if (eventType == "normalized") newValue = rawValue(normalizeValue(value, min, max, skew) + x, min, max, skew);
+			else newValue = value + x;
+			return clamp(stepValue(newValue, step), min, max);
+		}, [
+			max,
+			min,
+			skew,
+			step,
+			value
+		]);
+		const handleKeyDown = 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 = 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
+		]);
+		useImperativeHandle(forwardedRef, () => {
+			return {
+				focus() {
+					elmRef.current?.focus();
+				},
+				blur() {
+					elmRef.current?.blur();
+				}
+			};
+		}, []);
+		return /* @__PURE__ */ jsx(KnobProvider, {
+			value,
+			min,
+			max,
+			step,
+			skew,
+			startValue,
+			angleRange,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: (elm) => {
+					elmRef.current = elm;
+					wheelRefCallback(elm);
+					touchMoveRefCallback(elm);
+				},
+				className: clsx("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__ */ jsx(SVGRoot, {})
+			})
+		});
+	}),
+	SVGRoot,
+	InactiveLine,
+	ActiveLine,
+	Thumb: Thumb$2
+};
 //#endregion
 //#region src/components/NumberInput/type.ts
 function selectUnit(units, value) {
@@ -610,8 +588,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,
@@ -621,26 +599,25 @@ function parseValue(inputString, units, digit) {
 	}
 	const unitList = units.map(([u, _s]) => u);
 	const scaleList = units.map(([_u, s]) => s);
-	let rawValue$1 = 0;
+	let rawValue = 0;
 	let unit = unitList[0];
-	let formatValue = (digit != void 0 ? rawValue$1.toFixed(digit) : rawValue$1) + unit;
+	let formatValue = (digit != void 0 ? rawValue.toFixed(digit) : rawValue) + unit;
 	const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
 	if (m) {
-		rawValue$1 = Number(m[1]) || 0;
+		rawValue = Number(m[1]) || 0;
 		const uIndex = unitList.indexOf(m[3]);
-		rawValue$1 *= uIndex != -1 ? scaleList[uIndex] : 1;
-		const [u, scale] = selectUnit(units, rawValue$1);
-		const v = rawValue$1 / 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$1,
+		rawValue,
 		formatValue,
 		unit
 	};
 }
-
 //#endregion
 //#region src/components/NumberInput/context.tsx
 function safeClamp(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
@@ -695,7 +672,7 @@ const createNumberInputStore = (initProps) => {
 	}));
 };
 const NumberInputContext = createContext(null);
-function NumberInputProvider({ children,...props }) {
+function NumberInputProvider({ children, ...props }) {
 	const storeRef = useRef(null);
 	if (!storeRef.current) storeRef.current = createNumberInputStore(props);
 	useEffect(() => {
@@ -713,48 +690,139 @@ function NumberInputProvider({ children,...props }) {
 		children
 	});
 }
-/** @category NumberInput */
 function useNumberInputContext(selector) {
 	const store = useContext(NumberInputContext);
 	if (!store) throw new Error("Missing NumberInputContext.Provider in the tree");
 	return useStore(store, selector);
 }
-
 //#endregion
-//#region src/components/NumberInput/InternalInput.tsx
-const InternalInput = forwardRef(({ disabled, readonly, selectWithFocus, blurOnEnter, clampValueOnBlur, wheel, keyboard, className, onChange, onFocus, onBlur, onKeyDown, children: _children,...props }, ref) => {
-	const elmRef = useRef(null);
-	const [editing, setEditing] = useState(false);
-	const value = useNumberInputContext((s) => s.value);
-	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
-	const min = useNumberInputContext((s) => s.min);
-	const max = useNumberInputContext((s) => s.max);
-	const step = useNumberInputContext((s) => s.step);
-	const units = useNumberInputContext((s) => s.units);
-	const digit = useNumberInputContext((s) => s.digit);
-	const change = useNumberInputContext((s) => s.change);
-	const error = useMemo(() => {
-		if (editing) return false;
-		const v = valueAsNumber;
-		return (min ?? -Infinity) > v || v > (max ?? Infinity);
-	}, [
-		editing,
-		max,
-		min,
-		valueAsNumber
-	]);
-	const updateValueByEvent = useCallback((eventType, x) => {
-		let newValue;
-		if (eventType == "normalized") {
-			if (!min || !max) throw new Error("required parameter: min, max");
-			newValue = rawValue(normalizeValue(valueAsNumber, min, max) + x, min, max);
-			return clamp(stepValue(newValue, step), min, max);
-		} else {
-			newValue = valueAsNumber + x;
-			return stepValue(newValue, step);
-		}
-	}, [
-		max,
+//#region src/hooks/useInterval.ts
+function useInterval(callback, delay) {
+	const savedCallback = useRef(callback);
+	useEffect(() => {
+		savedCallback.current = callback;
+	}, [callback]);
+	useEffect(() => {
+		if (delay === null) return;
+		const id = setInterval(() => {
+			savedCallback.current();
+		}, delay);
+		return () => {
+			clearInterval(id);
+		};
+	}, [delay]);
+}
+//#endregion
+//#region src/hooks/useLongPress.ts
+function useLongPress(callback, initialDelay = 500, interval = 40) {
+	const [pressed, setPressed] = useState(false);
+	const [delay, setDelay] = useState(initialDelay);
+	useInterval(() => {
+		callback();
+		setDelay(interval);
+	}, pressed ? delay : null);
+	useEventListener(globalThis.window, "pointerup", () => {
+		setPressed(false);
+		setDelay(initialDelay);
+	});
+	return useCallback(() => {
+		callback();
+		setPressed(true);
+	}, [callback]);
+}
+//#endregion
+//#region src/components/NumberInput/DecrementStepper.tsx
+function DecrementStepper({ size = 12, children, className, ...props }) {
+	const min = useNumberInputContext((s) => s.min);
+	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+	const readonly = useNumberInputContext((s) => s.readonly);
+	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
+	const press = useLongPress(useNumberInputContext((s) => s.decrement));
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("tremolo-number-input-decrement-stepper", className),
+		role: "button",
+		tabIndex: -1,
+		"aria-disabled": keepWithinRange && valueAsNumber <= (min ?? Number.MIN_SAFE_INTEGER),
+		"aria-readonly": readonly,
+		onPointerDown: press,
+		...props,
+		children: children || /* @__PURE__ */ jsx("svg", {
+			width: size,
+			height: size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+		})
+	});
+}
+//#endregion
+//#region src/components/NumberInput/IncrementStepper.tsx
+function IncrementStepper({ size = 12, children, className, ...props }) {
+	const max = useNumberInputContext((s) => s.max);
+	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+	const readonly = useNumberInputContext((s) => s.readonly);
+	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
+	const press = useLongPress(useNumberInputContext((s) => s.increment));
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("tremolo-number-input-increment-stepper", className),
+		role: "button",
+		tabIndex: -1,
+		"aria-disabled": keepWithinRange && valueAsNumber >= (max ?? Number.MAX_SAFE_INTEGER),
+		"aria-readonly": readonly,
+		onPointerDown: press,
+		...props,
+		children: children || /* @__PURE__ */ jsx("svg", {
+			width: size,
+			height: size,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
+		})
+	});
+}
+//#endregion
+//#region src/components/NumberInput/InternalInput.tsx
+const InternalInput = forwardRef(({ disabled, readonly, selectWithFocus, blurOnEnter, clampValueOnBlur, wheel, keyboard, className, onChange, onFocus, onBlur, onKeyDown, children: _children, ...props }, ref) => {
+	const elmRef = useRef(null);
+	const [editing, setEditing] = useState(false);
+	const value = useNumberInputContext((s) => s.value);
+	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
+	const min = useNumberInputContext((s) => s.min);
+	const max = useNumberInputContext((s) => s.max);
+	const step = useNumberInputContext((s) => s.step);
+	const units = useNumberInputContext((s) => s.units);
+	const digit = useNumberInputContext((s) => s.digit);
+	const change = useNumberInputContext((s) => s.change);
+	const error = useMemo(() => {
+		if (editing) return false;
+		const v = valueAsNumber;
+		return (min ?? -Infinity) > v || v > (max ?? Infinity);
+	}, [
+		editing,
+		max,
+		min,
+		valueAsNumber
+	]);
+	const updateValueByEvent = useCallback((eventType, x) => {
+		let newValue;
+		if (eventType == "normalized") {
+			if (!min || !max) throw new Error("[NumberInput] \"min\" and \"max\" are required when InputEventOption[0] is set to \"normalized\".");
+			newValue = rawValue(normalizeValue(valueAsNumber, min, max) + x, min, max);
+			return clamp(stepValue(newValue, step), min, max);
+		} else {
+			newValue = valueAsNumber + x;
+			return stepValue(newValue, step);
+		}
+	}, [
+		max,
 		min,
 		step,
 		valueAsNumber
@@ -816,8 +884,8 @@ const InternalInput = forwardRef(({ disabled, readonly, selectWithFocus, blurOnE
 			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;
@@ -848,11 +916,9 @@ const InternalInput = forwardRef(({ disabled, readonly, selectWithFocus, blurOnE
 		...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__ */ jsx("div", {
 		className: clsx("tremolo-number-input-stepper", className),
 		"data-dynamic": dynamic,
@@ -860,162 +926,58 @@ function Stepper({ dynamic = true, children, className,...props }) {
 		children
 	});
 }
-
-//#endregion
-//#region src/hooks/useInterval.ts
-/**
-* @category hooks
-*/
-function useInterval(callback, delay) {
-	const savedCallback = useRef(callback);
-	useEffect(() => {
-		savedCallback.current = callback;
-	}, [callback]);
-	useEffect(() => {
-		if (delay === null) return;
-		const id = setInterval(() => {
-			savedCallback.current();
-		}, delay);
-		return () => {
-			clearInterval(id);
-		};
-	}, [delay]);
-}
-
-//#endregion
-//#region src/hooks/useLongPress.ts
-/**
-* @category hooks
-*/
-function useLongPress(callback, initialDelay = 500, interval = 40) {
-	const [pressed, setPressed] = useState(false);
-	const [delay, setDelay] = useState(initialDelay);
-	useInterval(() => {
-		callback();
-		setDelay(interval);
-	}, pressed ? delay : null);
-	useEventListener(globalThis.window, "pointerup", () => {
-		setPressed(false);
-		setDelay(initialDelay);
-	});
-	return useCallback(() => {
-		callback();
-		setPressed(true);
-	}, [callback]);
-}
-
-//#endregion
-//#region src/components/NumberInput/IncrementStepper.tsx
-/** @category NumberInput */
-function IncrementStepper({ size = 12, children, className,...props }) {
-	const max = useNumberInputContext((s) => s.max);
-	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
-	const readonly = useNumberInputContext((s) => s.readonly);
-	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
-	const press = useLongPress(useNumberInputContext((s) => s.increment));
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("tremolo-number-input-increment-stepper", className),
-		role: "button",
-		tabIndex: -1,
-		"aria-disabled": keepWithinRange && valueAsNumber >= (max ?? Number.MAX_SAFE_INTEGER),
-		"aria-readonly": readonly,
-		onPointerDown: press,
-		...props,
-		children: children || /* @__PURE__ */ jsx("svg", {
-			width: size,
-			height: size,
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
-		})
-	});
-}
-
-//#endregion
-//#region src/components/NumberInput/DecrementStepper.tsx
-/** @category NumberInput */
-function DecrementStepper({ size = 12, children, className,...props }) {
-	const min = useNumberInputContext((s) => s.min);
-	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
-	const readonly = useNumberInputContext((s) => s.readonly);
-	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
-	const press = useLongPress(useNumberInputContext((s) => s.decrement));
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("tremolo-number-input-decrement-stepper", className),
-		role: "button",
-		tabIndex: -1,
-		"aria-disabled": keepWithinRange && valueAsNumber <= (min ?? Number.MIN_SAFE_INTEGER),
-		"aria-readonly": readonly,
-		onPointerDown: press,
-		...props,
-		children: children || /* @__PURE__ */ jsx("svg", {
-			width: size,
-			height: size,
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
-		})
-	});
-}
-
-//#endregion
-//#region src/components/NumberInput/index.tsx
 /**
 * Input with some useful functions for entering numerical values.
-* @category NumberInput
 */
-const NumberInput = forwardRef(({ value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = "outline", selectWithFocus = "none", blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ["raw", 1], keyboard = ["raw", 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children,...props }, forwardedRef) => {
-	const colors = { "--active-color": activeColor };
-	return /* @__PURE__ */ jsx(NumberInputProvider, {
-		value: String(value),
-		min,
-		max,
-		step,
-		units,
-		digit,
-		readonly,
-		keepWithinRange,
-		onChange,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: clsx("tremolo-number-input-wrapper", wrapperClassName),
-			tabIndex: 0,
-			style: { ...colors },
-			"data-stepper": !!children,
-			"data-variant": variant,
-			children: [/* @__PURE__ */ jsx(InternalInput, {
-				ref: forwardedRef,
-				readonly,
-				disabled,
-				selectWithFocus,
-				blurOnEnter,
-				clampValueOnBlur,
-				wheel,
-				keyboard,
-				className,
-				onChange,
-				onFocus,
-				onBlur,
-				...props
-			}), children]
-		})
-	});
-});
-
+const NumberInput = {
+	Root: forwardRef(({ value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = "outline", selectWithFocus = "none", blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ["raw", 1], keyboard = ["raw", 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children, ...props }, forwardedRef) => {
+		const colors = { "--active-color": activeColor };
+		return /* @__PURE__ */ jsx(NumberInputProvider, {
+			value: String(value),
+			min,
+			max,
+			step,
+			units,
+			digit,
+			readonly,
+			keepWithinRange,
+			onChange,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("tremolo-number-input-wrapper", wrapperClassName),
+				tabIndex: 0,
+				style: { ...colors },
+				"data-stepper": !!children,
+				"data-variant": variant,
+				children: [/* @__PURE__ */ 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 = useRef(false);
 	const normalizedX = useRef(0);
 	const normalizedY = useRef(0);
@@ -1044,9 +1006,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) => {
@@ -1069,7 +1033,7 @@ const createPianoStore = (initProps) => {
 	}));
 };
 const PianoContext = createContext(null);
-function PianoProvider({ children,...props }) {
+function PianoProvider({ children, ...props }) {
 	const storeRef = useRef(null);
 	if (!storeRef.current) storeRef.current = createPianoStore(props);
 	useEffect(() => {
@@ -1081,17 +1045,14 @@ function PianoProvider({ children,...props }) {
 		children
 	});
 }
-/** @category Piano */
 function usePianoContext(selector) {
 	const store = useContext(PianoContext);
 	if (!store) throw new Error("Missing PianoContext.Provider in the tree");
 	return 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__ */ jsx("div", {
@@ -1104,14 +1065,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 = forwardRef(({ keyType, noteNumber, width, height, bg, color, activeBg, activeColor, className, style, children, __width,...props }, ref) => {
+const KeyImpl = forwardRef(({ keyType, noteNumber, width, height, bg, color, activeBg, activeColor, className, style, children, __width, ...props }, ref) => {
 	const [played, setPlayed] = useState(false);
 	const midiMax = usePianoContext((s) => s.midiMax);
 	const fill = usePianoContext((s) => s.fill);
@@ -1173,8 +1127,7 @@ const KeyImpl = forwardRef(({ keyType, noteNumber, width, height, bg, color, act
 		})
 	});
 });
-/** @category Piano */
-const WhiteKey = forwardRef(({ width = defaultWhiteKeyWidth, height = "100%", onContextMenu = (e) => e.preventDefault(),...props }, ref) => {
+const WhiteKey = forwardRef(({ width = 40, height = "100%", onContextMenu = (e) => e.preventDefault(), ...props }, ref) => {
 	return /* @__PURE__ */ jsx(KeyImpl, {
 		ref,
 		keyType: "white",
@@ -1184,8 +1137,7 @@ const WhiteKey = forwardRef(({ width = defaultWhiteKeyWidth, height = "100%", on
 		...props
 	});
 });
-/** @category Piano */
-const BlackKey = forwardRef(({ width = defaultBlackKeyWidth, height = "60%", onContextMenu = (e) => e.preventDefault(),...props }, ref) => {
+const BlackKey = forwardRef(({ width = 26, height = "60%", onContextMenu = (e) => e.preventDefault(), ...props }, ref) => {
 	return /* @__PURE__ */ jsx(KeyImpl, {
 		ref,
 		keyType: "black",
@@ -1195,10 +1147,8 @@ const BlackKey = forwardRef(({ width = defaultBlackKeyWidth, height = "60%", onC
 		...props
 	});
 });
-
 //#endregion
 //#region src/components/Piano/keyboardShortcuts.ts
-/** @category Piano */
 const SHORTCUTS = { HOME_ROW: { keys: [
 	"a",
 	"w",
@@ -1218,203 +1168,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 blackPerWhiteWidth = 26 / 40;
 /**
 * Customizable piano component.
-* @category Piano
 */
-const Piano = forwardRef(({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? "100%" : 160, whiteNoteWidth: _whiteNoteWidth = defaultWhiteKeyWidth, style, className, onPlayNote, onStopNote, label, children, onPointerDown,...props }, forwardedRef) => {
-	const [whiteNoteWidth, setWhiteNoteWidth] = useState(_whiteNoteWidth);
-	const keyRefs = useRef([]);
-	for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) keyRefs.current[i] = createRef();
-	const pianoRef = useRef(null);
-	const hitKeyIndex = useRef(-1);
-	const noteRangeArray = getNoteRangeArray(noteRange);
-	const whiteNotes = noteRangeArray.filter((v) => isWhiteKey(v));
-	const blackNotes = noteRangeArray.filter((v) => isBlackKey(v));
-	const whiteNoteCount = whiteNotes.length;
-	const padding = 1;
-	const staticWidth = (whiteNoteWidth + padding) * whiteNoteCount;
-	const childrenWithProps = useMemo(() => {
-		return children && React.Children.map(children, (child, index) => {
-			if (React.isValidElement(child)) {
-				const __width = child.type == WhiteKey ? whiteNoteWidth : whiteNoteWidth * .65;
-				const props$1 = {
-					ref: keyRefs.current[index],
-					__width
+const Piano = {
+	Root: 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] = useState(_whiteNoteWidth);
+		const keyRefs = useRef([]);
+		for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) keyRefs.current[i] = createRef();
+		const pianoRef = useRef(null);
+		const hitKeyIndex = useRef(-1);
+		const noteRangeArray = getNoteRangeArray(noteRange);
+		const whiteNotes = noteRangeArray.filter((v) => isWhiteKey(v));
+		const blackNotes = noteRangeArray.filter((v) => isBlackKey(v));
+		const whiteNoteCount = whiteNotes.length;
+		const padding = 1;
+		const staticWidth = (whiteNoteWidth + padding) * whiteNoteCount;
+		const childrenWithProps = useMemo(() => {
+			return children && React.Children.map(children, (child, index) => {
+				if (React.isValidElement(child)) {
+					const __width = child.type == WhiteKey ? whiteNoteWidth : whiteNoteWidth * .65;
+					const props = {
+						ref: keyRefs.current[index],
+						__width
+					};
+					return React.cloneElement(child, props);
+				}
+				return child;
+			});
+		}, [children, whiteNoteWidth]);
+		const notePosition = 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 = noteKey(note);
+			const firstNoteKey = noteKey(noteRange.first);
+			const octave = Math.floor((note - noteRange.first) / 12);
+			const octaveOffset = noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0;
+			const w = whiteNoteWidth + padding;
+			const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey];
+			const blackKeyOffset = isBlackKey(note) ? blackNoteWidth / 2 : 0;
+			return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset;
+		}, [noteRange.first, whiteNoteWidth]);
+		const getHitKeyIndex = 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 = isWhiteKey(note) ? whiteNoteWidth : whiteNoteWidth * blackPerWhiteWidth;
+				const h = 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 = 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 = useCallback(() => {
+			if (keyRefs.current[hitKeyIndex.current]?.current?.played()) keyRefs.current[hitKeyIndex.current]?.current?.stop();
+			hitKeyIndex.current = -1;
+		}, [keyRefs]);
+		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.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 = 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 = noteKey(note);
-		const firstNoteKey = noteKey(noteRange.first);
-		const octave = Math.floor((note - noteRange.first) / 12);
-		const octaveOffset = noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0;
-		const w = whiteNoteWidth + padding$1;
-		const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey];
-		const blackKeyOffset = isBlackKey(note) ? blackNoteWidth / 2 : 0;
-		return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset;
-	}, [noteRange.first, whiteNoteWidth]);
-	const getHitKeyIndex = 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 = isWhiteKey(note) ? whiteNoteWidth : whiteNoteWidth * blackPerWhiteWidth;
-			const h = 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();
+		});
+		useImperativeHandle(forwardedRef, () => {
+			return {
+				playNote(note, velocity) {
+					const index = noteRangeArray.indexOf(note);
+					if (index != -1) {
+						if (!keyRefs.current[index]?.current?.played()) keyRefs.current[index]?.current?.play(velocity);
+					} else onPlayNote?.(note, velocity);
+				},
+				stopNote(note) {
+					const index = noteRangeArray.indexOf(note);
+					if (index != -1) keyRefs.current[index]?.current?.stop();
+					else onStopNote?.(note);
+				}
+			};
+		}, [
+			noteRangeArray,
+			onPlayNote,
+			onStopNote
+		]);
+		return /* @__PURE__ */ jsx(PianoProvider, {
+			notePosition,
+			noteRange,
+			glissando,
+			midiMax,
+			fill,
+			onPlayNote,
+			onStopNote,
+			label,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: (div) => {
+					pianoRef.current = div;
+					touchMoveRefCallback(div);
+				},
+				className: clsx("tremolo-piano", className),
+				style: {
+					width: fill ? "100%" : staticWidth,
+					height,
+					...style
+				},
+				onPointerDown: (event) => {
+					pointerDownHandler(event);
+					onPointerDown?.(event);
+				},
+				...props,
+				children: childrenWithProps || noteRangeArray.map((note, index) => isWhiteKey(note) ? /* @__PURE__ */ jsx(WhiteKey, {
+					ref: keyRefs.current[index],
+					noteNumber: note,
+					__width: whiteNoteWidth
+				}, note) : /* @__PURE__ */ 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__ */ jsx("div", {
+		className: clsx("tremolo-points-editor-background", className),
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/components/PointsEditor/context.tsx
+const createPointsEditorStore = (initProps) => {
+	const DEFAULT_PROPS = {
+		containerElementRef: createRef(),
+		disabled: false,
+		readonly: false,
+		externalStyles: {
+			userSelectNone: true,
+			cursor: "grabbing"
 		}
-		return -1;
-	}, [
-		blackNotes,
-		notePosition,
-		whiteNoteWidth,
-		whiteNotes
-	]);
-	const onDrag = 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 createStore()((set) => ({
+		...DEFAULT_PROPS,
+		...initProps,
+		setContainerElementRef: (containerElementRef) => {
+			set(() => ({ containerElementRef }));
 		}
-	}, [
-		getHitKeyIndex,
-		noteRangeArray,
-		staticWidth
-	]);
-	const onDragEnd = useCallback(() => {
-		if (keyRefs.current[hitKeyIndex.current]?.current?.played()) keyRefs.current[hitKeyIndex.current]?.current?.stop();
-		hitKeyIndex.current = -1;
-	}, [keyRefs]);
+	}));
+};
+const PointsEditorContext = createContext(null);
+function PointsEditorProvider({ children, ...props }) {
+	const storeRef = useRef(null);
+	if (!storeRef.current) storeRef.current = createPointsEditorStore(props);
 	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__ */ jsx(PointsEditorContext.Provider, {
+		value: storeRef.current,
+		children
+	});
+}
+function usePointsEditorContext(selector) {
+	const store = useContext(PointsEditorContext);
+	if (!store) throw new Error("Missing PointsEditorContext.Provider in the tree");
+	return useStore(store, selector);
+}
+//#endregion
+//#region src/components/PointsEditor/Container.tsx
+function Container({ className, children, ...props }) {
+	const containerElementRef = useRef(null);
+	usePointsEditorContext((s) => s.setContainerElementRef)(containerElementRef);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerElementRef,
+		className: clsx("tremolo-points-editor-container", className),
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/hooks/useDragWithElement.ts
+function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd }) {
+	const [dragging, setDragging] = useState(false);
+	const normalizedX = useRef(0);
+	const normalizedY = useRef(0);
+	const handleDrag = useCallback((event) => {
+		if (!baseElementRef.current || !dragging) return;
+		const isTouch = event instanceof TouchEvent;
+		if (isTouch && event.cancelable) event.preventDefault();
+		const { left, top, right, bottom } = baseElementRef.current.getBoundingClientRect();
+		const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
+		const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
+		const nx = normalizeValue(mouseX, left, right);
+		const ny = normalizeValue(mouseY, top, bottom);
+		normalizedX.current = nx;
+		normalizedY.current = ny;
+		onDrag(nx, ny);
 	}, [
-		fill,
-		_whiteNoteWidth,
-		whiteNoteCount
-	]);
-	const [touchMoveRefCallback, pointerDownHandler] = useDragWithElement({
-		baseElementRef: pianoRef,
 		onDrag,
-		onDragEnd
+		baseElementRef,
+		dragging
+	]);
+	const refHandler = useRefCallbackEvent("touchmove", handleDrag, { passive: false }, [onDrag]);
+	const pointerDownHandler = useCallback((event) => {
+		setDragging(true);
+		handleDrag(event);
+		onDragStart?.(normalizedX.current, normalizedY.current);
+	}, [handleDrag, onDragStart]);
+	useEventListener(globalThis.window, "pointermove", handleDrag);
+	useEventListener(globalThis.window, "pointerup", () => {
+		if (!dragging) return;
+		setDragging(false);
+		onDragEnd?.(normalizedX.current, normalizedY.current);
 	});
-	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: clamp(x, min?.x ?? 0, max?.x ?? 1),
+		y: 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();
-	});
-	useImperativeHandle(forwardedRef, () => {
-		return {
-			playNote(note, velocity) {
-				const index = noteRangeArray.indexOf(note);
-				if (index != -1) {
-					if (!keyRefs.current[index]?.current?.played()) keyRefs.current[index]?.current?.play(velocity);
-				} else onPlayNote?.(note, velocity);
-			},
-			stopNote(note) {
-				const index = noteRangeArray.indexOf(note);
-				if (index != -1) keyRefs.current[index]?.current?.stop();
-				else onStopNote?.(note);
-			}
-		};
-	}, [
-		noteRangeArray,
-		onPlayNote,
-		onStopNote
-	]);
-	return /* @__PURE__ */ jsx(PianoProvider, {
-		notePosition,
-		noteRange,
-		glissando,
-		midiMax,
-		fill,
-		onPlayNote,
-		onStopNote,
-		label,
-		children: /* @__PURE__ */ jsx("div", {
-			ref: (div) => {
-				pianoRef.current = div;
-				touchMoveRefCallback(div);
-			},
-			className: clsx("tremolo-piano", className),
-			style: {
-				width: fill ? "100%" : staticWidth,
-				height,
-				...style
-			},
-			onPointerDown: (event) => {
-				pointerDownHandler(event);
-				onPointerDown?.(event);
-			},
-			...props,
-			children: childrenWithProps || noteRangeArray.map((note, index) => isWhiteKey(note) ? /* @__PURE__ */ jsx(WhiteKey, {
-				ref: keyRefs.current[index],
-				noteNumber: note,
-				__width: whiteNoteWidth
-			}, note) : /* @__PURE__ */ jsx(BlackKey, {
-				ref: keyRefs.current[index],
-				noteNumber: note,
-				__width: whiteNoteWidth * blackPerWhiteWidth
-			}, note))
-		})
+	const colors = { "--color": color };
+	return /* @__PURE__ */ jsx("div", {
+		ref: (div) => {
+			touchMoveRefCallback(div);
+		},
+		className: clsx("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"
+};
+/**
+* Multiple Point Controller
+*/
+const PointsEditor = {
+	Root: forwardRef(({ width = 200, height = 100, disabled = false, readonly = false, externalStyles: _externalStyles, style, className, children, ...props }, forwardedRef) => {
+		return /* @__PURE__ */ jsx(PointsEditorProvider, {
+			disabled,
+			readonly,
+			externalStyles: {
+				...defaultExternalStyles$2,
+				..._externalStyles
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				ref: forwardedRef,
+				className: clsx("tremolo-points-editor", className),
+				style: {
+					width,
+					height,
+					...style
+				},
+				...props,
+				children
+			})
+		});
+	}),
+	Background,
+	Container,
+	Point
+};
 //#endregion
 //#region src/components/Slider/context.tsx
 const createSliderStore = (initProps) => {
@@ -1434,7 +1587,7 @@ const createSliderStore = (initProps) => {
 	}));
 };
 const SliderContext = createContext(null);
-function SliderProvider({ children,...props }) {
+function SliderProvider({ children, ...props }) {
 	const storeRef = useRef(null);
 	if (!storeRef.current) storeRef.current = createSliderStore(props);
 	useEffect(() => {
@@ -1446,24 +1599,21 @@ function SliderProvider({ children,...props }) {
 		children
 	});
 }
-/** @category Slider */
 function useSliderContext(selector) {
 	const store = useContext(SliderContext);
 	if (!store) throw new Error("Missing SliderContext.Provider in the tree");
 	return 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 = useCallback((rawValue$1) => {
-		return toFixed(xor(vertical, reverse) ? 100 - normalizeValue(rawValue$1, min, max, skew) * 100 : normalizeValue(rawValue$1, min, max, skew) * 100);
+	const calcPercent = useCallback((rawValue) => {
+		return toFixed(xor(vertical, reverse) ? 100 - normalizeValue(rawValue, min, max, skew) * 100 : normalizeValue(rawValue, min, max, skew) * 100);
 	}, [
 		vertical,
 		reverse,
@@ -1500,7 +1650,6 @@ function ScaleOption({ value, type = "mark-number", label, thickness = 1, length
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/Slider/type.ts
 function generateOptionsList(options, min, max, step) {
@@ -1516,11 +1665,9 @@ 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);
@@ -1544,13 +1691,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 SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defaultThumbSize, color, children, className, style, __percent }, ref) => {
+const Thumb$1 = forwardRef(({ size, width = 22, height = 22, color, children, className, style, __percent }, ref) => {
 	const wrapperRef = useRef(null);
 	const vertical = useSliderContext((s) => s.vertical);
 	const disabled = useSliderContext((s) => s.disabled);
@@ -1586,13 +1727,7 @@ const SliderThumb = forwardRef(({ size, width = defaultThumbSize, height = defau
 		})
 	});
 });
-
-//#endregion
-//#region src/components/Slider/Track.tsx
-const defaultLength = 140;
-const defaultThickness = 10;
-/** @category Slider */
-function SliderTrack({ length = defaultLength, thickness = defaultThickness, active, inactive, children, className, style, defaultStyle = true, __thumb, __percent = 0,...props }) {
+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);
@@ -1617,207 +1752,259 @@ function SliderTrack({ length = defaultLength, thickness = defaultThickness, act
 		children: [children, __thumb]
 	});
 }
-
 //#endregion
 //#region src/components/Slider/index.tsx
+const defaultExternalStyles$1 = {
+	userSelectNone: true,
+	cursor: "pointer"
+};
 /**
 * Customizable slider
-* @category Slider
 */
-const Slider = forwardRef(({ value, min, max, step = 1, skew = 1, vertical = false, reverse = false, bodyNoSelect = true, wheel = ["raw", 1], keyboard = ["raw", 1], disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown,...props }, forwardedRef) => {
-	const trackElementRef = useRef(null);
-	const thumbRef = useRef(null);
-	const p = toFixed(normalizeValue(value, min, max, skew) * 100);
-	const rev = toFixed(100 - p);
-	const displayReversed = useMemo(() => xor(vertical, reverse), [vertical, reverse]);
-	const percent = displayReversed ? rev : p;
-	let trackProps = {};
-	let thumbProps = {};
-	let scaleComponent = void 0;
-	if (children != void 0) React.Children.forEach(children, (child) => {
-		if (React.isValidElement(child)) if (child.type == SliderThumb) thumbProps = child.props;
-		else if (child.type == SliderTrack) trackProps = child.props;
-		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 = useCallback((nx, ny) => {
-		if (!onChange || readonly) return;
-		const n = vertical ? ny : nx;
-		onChange(clamp(stepValue(rawValue(displayReversed ? 1 - n : n, min, max, skew), step), min, max));
-	}, [
-		displayReversed,
-		max,
-		min,
-		onChange,
-		readonly,
-		skew,
-		step,
-		vertical
-	]);
-	const updateValueByEvent = useCallback((eventType, x) => {
-		let newValue;
-		if (eventType == "normalized") newValue = rawValue(normalizeValue(value, min, max, skew) + x, min, max, skew);
-		else newValue = value + x;
-		return clamp(stepValue(newValue, step), min, max);
-	}, [
-		max,
-		min,
-		skew,
-		step,
-		value
-	]);
-	const handleKeyDown = 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?.(clamp(stepValue(rawValue(vertical ? ny : nx, min, max, skew), step), min, max));
-		},
-		onDragEnd: (nx, ny) => {
-			if (readonly) return;
-			if (bodyNoSelect) removeNoSelect();
-			onDragEnd?.(clamp(stepValue(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
-	]);
-	useImperativeHandle(forwardedRef, () => {
-		return {
-			focus() {
-				thumbRef.current?.focus();
-			},
-			blur() {
-				thumbRef.current?.blur();
-			}
+const Slider = {
+	Root: 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 = useRef(null);
+		const thumbRef = useRef(null);
+		const externalStyles = {
+			...defaultExternalStyles$1,
+			..._externalStyles
 		};
-	}, []);
-	return /* @__PURE__ */ jsx(SliderProvider, {
-		min,
-		max,
-		step,
-		skew,
-		vertical,
-		reverse,
-		disabled,
-		readonly,
-		children: /* @__PURE__ */ jsx("div", {
-			className: clsx("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(${styleHelper(thumbProps?.size ?? 22)} / 2)`,
-				...style
-			},
-			onPointerDown: (event) => {
-				pointerDownHandler(event);
-				onPointerDown?.(event);
-			},
-			onKeyDown: (event) => {
-				handleKeyDown(event);
-				onKeyDown?.(event);
-			},
-			onFocus: (event) => {
+		const p = toFixed(normalizeValue(value, min, max, skew) * 100);
+		const rev = toFixed(100 - p);
+		const displayReversed = useMemo(() => xor(vertical, reverse), [vertical, reverse]);
+		const percent = displayReversed ? rev : p;
+		let trackProps = {};
+		let thumbProps = {};
+		let scaleComponent = void 0;
+		if (children != void 0) React.Children.forEach(children, (child) => {
+			if (React.isValidElement(child)) if (child.type == Thumb$1) thumbProps = child.props;
+			else if (child.type == Track) trackProps = child.props;
+			else if (child.type == Scale) scaleComponent = child;
+			else throw new Error("only <SliderThumb> or <SliderTrack>");
+			else throw new Error("children is an invalid element.");
+		});
+		const onDrag = useCallback((nx, ny) => {
+			if (!onChange || readonly) return;
+			const n = vertical ? ny : nx;
+			onChange(clamp(stepValue(rawValue(displayReversed ? 1 - n : n, min, max, skew), step), min, max));
+		}, [
+			displayReversed,
+			max,
+			min,
+			onChange,
+			readonly,
+			skew,
+			step,
+			vertical
+		]);
+		const updateValueByEvent = useCallback((eventType, x) => {
+			let newValue;
+			if (eventType == "normalized") newValue = rawValue(normalizeValue(value, min, max, skew) + x, min, max, skew);
+			else newValue = value + x;
+			return clamp(stepValue(newValue, step), min, max);
+		}, [
+			max,
+			min,
+			skew,
+			step,
+			value
+		]);
+		const handleKeyDown = 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);
-			},
-			onBlur: (event) => {
-				thumbRef.current?.blur();
-				onBlur?.(event);
+				onDragStart?.(clamp(stepValue(rawValue(vertical ? ny : nx, min, max, skew), step), min, max));
 			},
-			...props,
-			children: /* @__PURE__ */ jsxs("div", {
+			onDragEnd: (nx, ny) => {
+				if (readonly) return;
+				if (externalStyles.userSelectNone) removeUserSelectNone();
+				if (externalStyles.cursor) resetCursorStyle();
+				onDragEnd?.(clamp(stepValue(rawValue(vertical ? ny : nx, min, max, skew), step), min, max));
+			}
+		});
+		const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+			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
+		]);
+		useImperativeHandle(forwardedRef, () => {
+			return {
+				focus() {
+					thumbRef.current?.focus();
+				},
+				blur() {
+					thumbRef.current?.blur();
+				}
+			};
+		}, []);
+		return /* @__PURE__ */ jsx(SliderProvider, {
+			min,
+			max,
+			step,
+			skew,
+			vertical,
+			reverse,
+			disabled,
+			readonly,
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx("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(${styleHelper(thumbProps?.size ?? 22)} / 2)`,
+					...style
+				},
+				onPointerDown: (event) => {
+					pointerDownHandler(event);
+					onPointerDown?.(event);
+				},
+				onKeyDown: (event) => {
+					handleKeyDown(event);
+					onKeyDown?.(event);
 				},
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "tremolo-slider-track-wrapper",
-					ref: trackElementRef,
-					children: /* @__PURE__ */ jsx(SliderTrack, {
-						__percent: percent,
-						__thumb: /* @__PURE__ */ jsx(SliderThumb, {
-							ref: thumbRef,
+				onFocus: (event) => {
+					thumbRef.current?.focus();
+					onFocus?.(event);
+				},
+				onBlur: (event) => {
+					thumbRef.current?.blur();
+					onBlur?.(event);
+				},
+				...props,
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: vertical ? "row" : "column",
+						width: !vertical ? "100%" : void 0,
+						height: vertical ? "100%" : void 0
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "tremolo-slider-track-wrapper",
+						ref: trackElementRef,
+						children: /* @__PURE__ */ jsx(Track, {
 							__percent: percent,
-							...thumbProps
-						}),
-						...trackProps
-					})
-				}), scaleComponent]
+							__thumb: /* @__PURE__ */ jsx(Thumb$1, {
+								ref: thumbRef,
+								__percent: percent,
+								...thumbProps
+							}),
+							...trackProps
+						})
+					}), scaleComponent]
+				})
 			})
-		})
-	});
-});
-
+		});
+	}),
+	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__ */ 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 XYPadArea({ width = 120, height = 120, color, children, className, style, __thumb,...props }) {
+function Area({ width = 120, height = 120, color, children, className, style, __thumb, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("tremolo-xy-pad-area", className),
 		style: {
@@ -1830,11 +2017,9 @@ function XYPadArea({ width = 120, height = 120, color, children, className, styl
 		children: [children, __thumb]
 	});
 }
-
 //#endregion
 //#region src/components/XYPad/Thumb.tsx
-/** @category XYPad */
-const XYPadThumb = forwardRef(({ size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __css,...props }, ref) => {
+const Thumb = forwardRef(({ size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __readonly, __css, ...props }, ref) => {
 	const wrapperRef = useRef(null);
 	useImperativeHandle(ref, () => {
 		return {
@@ -1858,6 +2043,7 @@ const XYPadThumb = forwardRef(({ size, width = 22, height = 22, color, children,
 			className: clsx("tremolo-xy-pad-thumb", className),
 			tabIndex: 0,
 			"aria-disabled": __disabled,
+			"aria-readonly": __readonly,
 			style: {
 				"--color": color,
 				width: size ?? width,
@@ -1867,7 +2053,6 @@ const XYPadThumb = forwardRef(({ size, width = 22, height = 22, color, children,
 		})
 	});
 });
-
 //#endregion
 //#region src/components/XYPad/index.tsx
 const defaultValueOptions = {
@@ -1877,192 +2062,201 @@ const defaultValueOptions = {
 	wheel: ["raw", 1],
 	keyboard: ["raw", 1]
 };
+const defaultExternalStyles = {
+	userSelectNone: true,
+	cursor: "pointer"
+};
 /**
 * Simple XYPad
-* @category XYPad
 */
-const XYPad = forwardRef(({ x: _x, y: _y, className, style, bodyNoSelect = true, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children,...props }, forwardedRef) => {
-	const x = useMemo(() => {
-		return {
-			...defaultValueOptions,
-			..._x
-		};
-	}, [_x]);
-	const y = useMemo(() => {
-		return {
-			...defaultValueOptions,
-			..._y
+const XYPad = {
+	Root: 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 = useMemo(() => {
+			return {
+				...defaultValueOptions,
+				..._x
+			};
+		}, [_x]);
+		const y = useMemo(() => {
+			return {
+				...defaultValueOptions,
+				..._y
+			};
+		}, [_y]);
+		const rootRef = useRef(null);
+		const areaElementRef = useRef(null);
+		const thumbRef = useRef(null);
+		const externalStyles = {
+			...defaultExternalStyles,
+			..._externalStyles
 		};
-	}, [_y]);
-	const areaElementRef = useRef(null);
-	const thumbRef = useRef(null);
-	const nx = normalizeValue(x.value, x.min, x.max, x.skew);
-	const ny = normalizeValue(y.value, y.min, y.max, y.skew);
-	const percentX = toFixed((x.reverse ? 1 - nx : nx) * 100);
-	const percentY = toFixed((y.reverse ? 1 - ny : ny) * 100);
-	let areaProps = {};
-	let thumbProps = {};
-	if (children != void 0) React.Children.forEach(children, (child) => {
-		if (React.isValidElement(child)) if (child.type == XYPadThumb) thumbProps = child.props;
-		else if (child.type == XYPadArea) areaProps = child.props;
-		else throw new Error("only <XYPadThumb> or <XYPadArea>");
-		else throw new Error("children is an invalid element.");
-	});
-	const onDrag = useCallback((nx$1, ny$1) => {
-		if (!onChange || readonly) return;
-		const vx = rawValue(x.reverse ? 1 - nx$1 : nx$1, x.min, x.max, x.skew);
-		const vy = rawValue(y.reverse ? 1 - ny$1 : ny$1, y.min, y.max, y.skew);
-		onChange(clamp(stepValue(vx, x.step), x.min, x.max), clamp(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 = useCallback((eventType, target, x$1) => {
-		let v;
-		if (eventType == "normalized") v = rawValue(normalizeValue(target.value, target.min, target.max, target.skew) + x$1, target.min, target.max, target.skew);
-		else v = target.value + x$1;
-		return clamp(stepValue(v, target.step), target.min, target.max);
-	}, []);
-	const handleKeyDown = useCallback((event) => {
-		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 = normalizeValue(x.value, x.min, x.max, x.skew);
+		const ny = normalizeValue(y.value, y.min, y.max, y.skew);
+		const percentX = toFixed((x.reverse ? 1 - nx : nx) * 100);
+		const percentY = toFixed((y.reverse ? 1 - ny : ny) * 100);
+		let areaProps = {};
+		let thumbProps = {};
+		if (children != void 0) React.Children.forEach(children, (child) => {
+			if (React.isValidElement(child)) if (child.type == Thumb) thumbProps = child.props;
+			else if (child.type == Area) areaProps = child.props;
+			else throw new Error("only <XYPadThumb> or <XYPadArea>");
+			else throw new Error("children is an invalid element.");
+		});
+		const onDrag = useCallback((nx, ny) => {
+			if (!onChange || readonly) return;
+			const vx = rawValue(x.reverse ? 1 - nx : nx, x.min, x.max, x.skew);
+			const vy = rawValue(y.reverse ? 1 - ny : ny, y.min, y.max, y.skew);
+			onChange(clamp(stepValue(vx, x.step), x.min, x.max), clamp(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 = useCallback((eventType, target, x) => {
+			let v;
+			if (eventType == "normalized") v = rawValue(normalizeValue(target.value, target.min, target.max, target.skew) + x, target.min, target.max, target.skew);
+			else v = target.value + x;
+			return clamp(stepValue(v, target.step), target.min, target.max);
+		}, []);
+		const handleKeyDown = 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 = clamp(stepValue(rawValue(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
+				const valueY = clamp(stepValue(rawValue(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
+				onDragStart?.(valueX, valueY);
+			},
+			onDragEnd: (nx, ny) => {
+				if (readonly) return;
+				if (externalStyles.userSelectNone) removeUserSelectNone();
+				if (externalStyles.cursor) resetCursorStyle();
+				const valueX = clamp(stepValue(rawValue(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
+				const valueY = clamp(stepValue(rawValue(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
+				onDragEnd?.(valueX, valueY);
+			}
+		});
+		const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+			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 = clamp(stepValue(rawValue(nx$1, x.min, x.max, x.skew), x.step), x.min, x.max);
-			const valueY = clamp(stepValue(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 = clamp(stepValue(rawValue(nx$1, x.min, x.max, x.skew), x.step), x.min, x.max);
-			const valueY = clamp(stepValue(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
-	]);
-	useImperativeHandle(forwardedRef, () => {
-		return {
-			focus() {
+		}, { passive: false }, [
+			x,
+			y,
+			onChange,
+			readonly,
+			updateValueByEvent
+		]);
+		useImperativeHandle(forwardedRef, () => {
+			return {
+				focus() {
+					thumbRef.current?.focus();
+				},
+				blur() {
+					thumbRef.current?.blur();
+				},
+				original: rootRef
+			};
+		}, []);
+		return /* @__PURE__ */ jsx("div", {
+			className: clsx("tremolo-xy-pad", className),
+			ref: composeRefs(rootRef, wheelRefCallback, touchMoveRefCallback),
+			tabIndex: -1,
+			"aria-disabled": disabled,
+			"aria-readonly": readonly,
+			style: {
+				margin: `calc(${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__ */ jsx("div", {
-		className: clsx("tremolo-xy-pad", className),
-		ref: (div) => {
-			wheelRefCallback(div);
-			touchMoveRefCallback(div);
-		},
-		tabIndex: -1,
-		"aria-disabled": disabled,
-		"aria-readonly": readonly,
-		style: {
-			margin: `calc(${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__ */ jsx("div", {
-			className: "tremolo-xy-pad-area-wrapper",
-			ref: areaElementRef,
-			children: /* @__PURE__ */ jsx(XYPadArea, {
-				__thumb: /* @__PURE__ */ jsx(XYPadThumb, {
-					ref: thumbRef,
-					__disabled: disabled,
-					__css: {
-						top: `${percentY}%`,
-						left: `${percentX}%`
-					},
-					...thumbProps
-				}),
-				...areaProps
+				onBlur?.(event);
+			},
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "tremolo-xy-pad-area-wrapper",
+				ref: areaElementRef,
+				children: /* @__PURE__ */ jsx(Area, {
+					__thumb: /* @__PURE__ */ jsx(Thumb, {
+						ref: thumbRef,
+						__disabled: disabled,
+						__readonly: readonly,
+						__css: {
+							top: `${percentY}%`,
+							left: `${percentX}%`
+						},
+						...thumbProps
+					}),
+					...areaProps
+				})
 			})
-		})
-	});
-});
-
+		});
+	}),
+	Thumb,
+	Area
+};
 //#endregion
 //#region src/hooks/useAnimationFrame.ts
-/**
-* @category hooks
-*/
 function useAnimationFrame(callback = () => {}, deps = []) {
 	const reqIdRef = useRef(-1);
 	const loop = useCallback(() => {
@@ -2074,7 +2268,6 @@ function useAnimationFrame(callback = () => {}, deps = []) {
 		return () => cancelAnimationFrame(reqIdRef.current);
 	}, [loop]);
 }
-
 //#endregion
 //#region src/hooks/useMIDIAccess.ts
 /** @private */
@@ -2083,7 +2276,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] = useState(null);
@@ -2106,12 +2298,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) {
 	useEffect(() => {
@@ -2122,7 +2312,6 @@ function useMIDIMessage(midiAccess, onMIDIMessage) {
 		};
 	}, [midiAccess, onMIDIMessage]);
 }
-
 //#endregion
 //#region src/hooks/useMIDIInput.ts
 const MIDI_EVENT_TO_NUMBER = {
@@ -2132,7 +2321,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, useCallback((event) => {
@@ -2147,7 +2335,7 @@ function useMIDIInput(midiAccess, onNoteOnEvent, onNoteOffEvent, onPitchBendEven
 		onPitchBendEvent
 	]));
 }
-
 //#endregion
-export { AnimationCanvas, AnimationKnob, BlackKey, DecrementStepper, DragObserver, IncrementStepper, KeyLabel, Knob, NOT_SUPPORTED, NumberInput, PERMISSION_DENIED, Piano, SHORTCUTS, Scale, ScaleOption, Slider, SliderThumb, SliderTrack, Stepper, WheelObserver, WhiteKey, XYPad, XYPadArea, XYPadThumb, getNoteRangeArray, useAnimationFrame, useDrag, useDragWithElement, useEventListener, useInterval, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useSliderContext };
+export { AnimationCanvas, DragObserver, Knob, NOT_SUPPORTED, NumberInput, PERMISSION_DENIED, Piano, PointsEditor, SHORTCUTS, Slider, WheelObserver, XYPad, clampPoint, getNoteRangeArray, useAnimationFrame, useDrag, useDragWithElement, useEventListener, useInterval, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useSliderContext };
+
 //# sourceMappingURL=index.js.map