@tremolo-ui/react 0.3.0 → 0.5.0

package/dist/index.cjs

@@ -25,147 +25,78 @@ let clsx = require("clsx");
 clsx = __toESM(clsx);
 let react = require("react");
 react = __toESM(react);
+let _tremolo_ui_dom = require("@tremolo-ui/dom");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _tremolo_ui_functions = require("@tremolo-ui/functions");
-let zustand = require("zustand");
-let _tremolo_ui_dom = require("@tremolo-ui/dom");
-//#region src/components/AnimationCanvas/canvas.ts
-const drawingState = [
-	"strokeStyle",
-	"fillStyle",
-	"globalAlpha",
-	"lineWidth",
-	"lineCap",
-	"lineJoin",
-	"miterLimit",
-	"lineDashOffset",
-	"shadowOffsetX",
-	"shadowOffsetY",
-	"shadowBlur",
-	"shadowColor",
-	"globalCompositeOperation",
-	"font",
-	"textAlign",
-	"textBaseline",
-	"direction",
-	"imageSmoothingEnabled"
-];
-function setDprConfig(canvas, context, width, height, dpr) {
-	canvas.width = width * dpr;
-	canvas.height = height * dpr;
-	context.setTransform(1, 0, 0, 1, 0, 0);
-	context.scale(dpr, dpr);
-	canvas.style.width = `${width}px`;
-	canvas.style.height = `${height}px`;
-}
-//#endregion
 //#region src/components/AnimationCanvas/index.tsx
-function AnimationCanvas({ draw, init, animate = true, options, width: _width = 100, height: _height = 100, relativeSize, reduceFlickering = true, className, onContextMenu = (event) => event.preventDefault(), ...props }) {
-	const canvasRef = (0, react.useRef)(null);
-	const memoCanvasRef = (0, react.useRef)(null);
-	const reqIdRef = (0, react.useRef)(-1);
-	const widthRef = (0, react.useRef)(0);
-	const heightRef = (0, react.useRef)(0);
-	const deltaMemoRef = (0, react.useRef)(-1);
-	const startTimeRef = (0, react.useRef)(-1);
-	const loop = (0, react.useCallback)((context, width, height, count) => {
-		const now = performance.now();
-		const deltaTime = now - deltaMemoRef.current;
-		const elapsedTime = now - startTimeRef.current;
-		deltaMemoRef.current = now;
-		if (animate) reqIdRef.current = requestAnimationFrame(() => loop(context, width, height, count + 1));
-		draw(context, {
-			width: width.current,
-			height: height.current,
-			count: count + 1,
-			deltaTime,
-			elapsedTime,
-			fps: 1e3 / deltaTime
+function AnimationCanvas({ draw, init, animate = true, options, width = 100, height = 100, relativeSize = false, reduceFlickering = true, className, onContextMenu = (event) => event.preventDefault(), ...props }) {
+	const [node, setNode] = (0, react.useState)(null);
+	const latest = (0, react.useRef)({
+		draw,
+		init,
+		animate,
+		width,
+		height,
+		reduceFlickering,
+		options
+	});
+	const instanceRef = (0, react.useRef)(null);
+	/** Set while the instance below is newer than the effect that pushes into it. */
+	const justCreated = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (!node) return;
+		const current = latest.current;
+		const instance = (0, _tremolo_ui_dom.createAnimationCanvas)(node, {
+			draw: (context, frame) => latest.current.draw(context, frame),
+			init: (context, size) => latest.current.init?.(context, size),
+			animate: current.animate,
+			size: {
+				width: current.width,
+				height: current.height
+			},
+			reduceFlickering: current.reduceFlickering,
+			relativeSize,
+			contextAttributes: current.options
 		});
-	}, [draw, animate]);
+		instanceRef.current = instance;
+		justCreated.current = true;
+		return () => {
+			instanceRef.current = null;
+			instance.destroy();
+		};
+	}, [node, relativeSize]);
 	(0, react.useEffect)(() => {
-		if (!canvasRef.current) return;
-		const canvas = canvasRef.current;
-		const context = canvas.getContext("2d", options);
-		if (!context) throw new Error("Cannot get canvas context.");
-		const dpr = globalThis.devicePixelRatio;
-		const firstRendering = (width, height) => {
-			setDprConfig(canvas, context, width, height, dpr);
-			widthRef.current = width;
-			heightRef.current = height;
-			if (init) init(context, {
-				width,
-				height
-			});
-			const now = performance.now();
-			deltaMemoRef.current = now;
-			startTimeRef.current = now;
-			loop(context, widthRef, heightRef, -1);
+		latest.current = {
+			draw,
+			init,
+			animate,
+			width,
+			height,
+			reduceFlickering,
+			options
 		};
-		if (relativeSize) {
-			const parent = canvas.parentElement;
-			if (!parent) throw new Error("Canvas doesn't have a parent element.");
-			const memoCanvas = memoCanvasRef.current;
-			const memoContext = memoCanvas?.getContext("2d", options);
-			const ro = new ResizeObserver((entries) => {
-				for (const entry of entries) {
-					const w = entry.contentRect.width;
-					const h = entry.contentRect.height;
-					const contextMemo = {};
-					if (reduceFlickering && memoCanvas && memoContext) {
-						for (const prop of drawingState) contextMemo[prop] = context[prop];
-						memoCanvas.width = w * dpr;
-						memoCanvas.height = h * dpr;
-						memoContext.scale(1 / dpr, 1 / dpr);
-						if (canvas.width > 0 && canvas.height > 0) memoContext.drawImage(canvas, 0, 0);
-					}
-					setDprConfig(canvas, context, w, h, dpr);
-					widthRef.current = w;
-					heightRef.current = h;
-					if (reduceFlickering && memoContext && memoCanvas && memoCanvas.width > 0 && memoCanvas.height > 0) {
-						for (const prop of drawingState) context[prop] = contextMemo[prop];
-						context.drawImage(memoContext.canvas, 0, 0);
-					}
-					if (!animate) loop(context, widthRef, heightRef, -1);
-				}
-			});
-			ro.observe(parent);
-			const width = parent.clientWidth;
-			const height = parent.clientHeight;
-			firstRendering(width, height);
-			return () => {
-				if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current);
-				ro.disconnect();
-			};
-		} else {
-			const { width, height } = canvas.getBoundingClientRect();
-			firstRendering(width, height);
-			return () => {
-				if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current);
-			};
+		if (justCreated.current) {
+			justCreated.current = false;
+			return;
 		}
-	}, [
-		loop,
-		init,
-		options,
-		reduceFlickering,
-		relativeSize,
-		animate
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+		instanceRef.current?.update({
+			animate,
+			size: {
+				width,
+				height
+			},
+			reduceFlickering
+		});
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
 		className: (0, clsx.default)("tremolo-animation-canvas", className),
-		width: relativeSize ? 0 : _width,
-		height: relativeSize ? 0 : _height,
-		ref: canvasRef,
+		ref: setNode,
 		onContextMenu,
 		...props
-	}), relativeSize && reduceFlickering && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
-		style: { display: "none" },
-		ref: memoCanvasRef
-	})] });
+	});
 }
 //#endregion
-//#region src/hooks/useCallbackRef.ts
+//#region src/hooks/_internal/useCallbackRef.ts
 /**
 * Internal
 * @private
@@ -180,110 +111,96 @@ function useCallbackRef(callback, deps = []) {
 	return (0, react.useCallback)((...args) => callbackRef.current?.(...args), deps);
 }
 //#endregion
-//#region src/hooks/useEventListener.ts
-function useEventListener(target, event, handler, options) {
-	const listener = useCallbackRef(handler);
+//#region src/hooks/useDragValue.ts
+/**
+* Drive a value with a pointer drag.
+*
+* @returns a ref callback for the element that starts the drag, and whether a drag is in progress
+*/
+function useDragValue(options) {
+	const { axis, baseElementRef, pixelRange, updateOnPointerDown, threshold, cursor } = options;
+	if (!baseElementRef && !options.getValue) throw new Error("useDragValue: give either baseElementRef or getValue, so that the drag has something to move");
+	const [dragging, setDragging] = (0, react.useState)(false);
+	const valueGetter = useCallbackRef(options.getValue);
+	const changeHandler = useCallbackRef(options.onChange);
+	const dragStartHandler = useCallbackRef(options.onDragStart);
+	const dragEndHandler = useCallbackRef(options.onDragEnd);
+	const latest = (0, react.useRef)(options);
+	const instanceRef = (0, react.useRef)(null);
+	const [node, setNode] = (0, react.useState)(null);
+	const [pixelRangeX, pixelRangeY] = Array.isArray(pixelRange) ? pixelRange : [pixelRange, pixelRange];
 	(0, react.useEffect)(() => {
-		const node = typeof target === "function" ? target() : target ?? document;
 		if (!node) return;
-		node.addEventListener(event, listener, options);
+		const instance = (0, _tremolo_ui_dom.createDragValue)(node, {
+			axis: latest.current.axis,
+			mapping: baseElementRef ? (0, _tremolo_ui_dom.elementMapping)(() => baseElementRef.current) : (0, _tremolo_ui_dom.relativeMapping)({ pixelRange: [pixelRangeX ?? 100, pixelRangeY ?? 100] }),
+			getValue: () => valueGetter() ?? [0, 0],
+			updateOnPointerDown: latest.current.updateOnPointerDown,
+			threshold: latest.current.threshold,
+			cursor: latest.current.cursor,
+			onChange: (value) => changeHandler(value),
+			onDragStart: (value) => {
+				setDragging(true);
+				dragStartHandler(value);
+			},
+			onDragEnd: (value) => {
+				setDragging(false);
+				dragEndHandler(value);
+			}
+		});
+		instanceRef.current = instance;
 		return () => {
-			node.removeEventListener(event, listener, options);
+			instanceRef.current = null;
+			instance.destroy();
 		};
 	}, [
-		event,
-		target,
-		options,
-		listener
+		node,
+		baseElementRef,
+		pixelRangeX,
+		pixelRangeY,
+		valueGetter,
+		changeHandler,
+		dragStartHandler,
+		dragEndHandler
 	]);
-	return () => {
-		(typeof target === "function" ? target() : target ?? document)?.removeEventListener(event, listener, options);
+	(0, react.useEffect)(() => {
+		latest.current = options;
+		instanceRef.current?.update({
+			axis,
+			updateOnPointerDown,
+			threshold,
+			cursor
+		});
+	});
+	return {
+		refCallback: setNode,
+		dragging
 	};
 }
 //#endregion
-//#region src/hooks/useRefCallbackEvent.ts
-function useRefCallbackEvent(event, handler, options, deps = []) {
-	return (0, react.useMemo)(() => {
-		let cleanup;
-		return (node) => {
-			if (!node) {
-				cleanup?.();
-				return;
-			}
-			node.addEventListener(event, handler, options);
-			cleanup = () => {
-				node.removeEventListener(event, handler, options);
-			};
-		};
-	}, deps);
-}
-//#endregion
-//#region src/hooks/useDrag.ts
+//#region src/hooks/useWheel.ts
 /**
-* @returns [refCallback, pointerDownHandler]
+* Listen to wheel events on an element.
+*
+* The listener is not passive, so the handler may call `preventDefault()`.
+*
+* @returns a ref callback to attach to the element, unused when `target` is given
 */
-function useDrag({ threshold: _threshold = 1, onDrag, onDragStart, onDragEnd }) {
-	const dragOffsetX = (0, react.useRef)(void 0);
-	const dragOffsetY = (0, react.useRef)(void 0);
-	const dragStartX = (0, react.useRef)(0);
-	const dragStartY = (0, react.useRef)(0);
-	const threshold = Math.max(_threshold, 1);
-	const handleDrag = (0, react.useCallback)((event, first = false) => {
-		const isTouch = event instanceof TouchEvent;
-		if (isTouch && event.cancelable) event.preventDefault();
-		const screenX = isTouch ? event.touches[0].screenX : event.screenX;
-		const screenY = isTouch ? event.touches[0].screenY : event.screenY;
-		let deltaX = 0;
-		let deltaY = 0;
-		if (first) {
-			dragStartX.current = screenX;
-			dragStartY.current = screenY;
-		}
-		if (dragOffsetX.current) {
-			deltaX = screenX - dragOffsetX.current;
-			dragOffsetX.current = screenX;
-		}
-		if (dragOffsetY.current) {
-			deltaY = screenY - dragOffsetY.current;
-			dragOffsetY.current = screenY;
-		}
-		if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return;
-		onDrag?.(screenX - dragStartX.current, screenY - dragStartY.current, deltaX, deltaY);
-	}, [threshold, onDrag]);
-	const pointerDownHandler = (0, react.useCallback)((event) => {
-		dragOffsetX.current = event.screenX;
-		dragOffsetY.current = event.screenY;
-		handleDrag(event, true);
-		onDragStart?.();
-	}, [handleDrag, onDragStart]);
-	const refHandler = useRefCallbackEvent("touchmove", handleDrag, { passive: false }, [onDrag]);
-	useEventListener(globalThis.window, "mousemove", handleDrag);
-	useEventListener(globalThis.window, "pointerup", () => {
-		dragOffsetX.current = void 0;
-		dragOffsetY.current = void 0;
-		onDragEnd?.();
-	});
-	return [refHandler, pointerDownHandler];
-}
-//#endregion
-//#region src/components/DragObserver/index.tsx
-function DragObserver(props) {
-	const { as: Component = "div", threshold = 1, onDrag, onDragStart, onDragEnd, children, onPointerDown, ...attributes } = props;
-	const [refCallback, pointerDownHandler] = useDrag({
-		threshold,
-		onDrag,
-		onDragStart,
-		onDragEnd
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-		ref: refCallback,
-		onPointerDown: (e) => {
-			pointerDownHandler(e);
-			onPointerDown?.(e);
-		},
-		...attributes,
-		children
-	});
+function useWheel(onWheel, { requireFocus = false, target } = {}) {
+	const wheelHandler = useCallbackRef(onWheel);
+	const [node, setNode] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		const element = target ? target.current : node;
+		if (!element) return;
+		const instance = (0, _tremolo_ui_dom.createWheel)(element, (event) => wheelHandler(event), { requireFocus });
+		return () => instance.destroy();
+	}, [
+		node,
+		target,
+		wheelHandler,
+		requireFocus
+	]);
+	return setNode;
 }
 //#endregion
 //#region src/components/_util/index.ts
@@ -293,84 +210,92 @@ function addUserSelectNone() {
 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]);
+//#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;
 }
-function resetCursorStyle() {
-	Object.values(cursorStyles).forEach((s) => {
-		window.document.body.classList.remove(s);
-	});
+/**
+* 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);
+			}
+		};
+	};
+}
+/**
+* A custom hook that composes multiple refs
+* Accepts callback refs and RefObject(s)
+*/
+function useComposedRefs(...refs) {
+	return (0, react.useCallback)(composeRefs(...refs), refs);
+}
+/**
+* 角度から円弧上の点を求める。
+*
+* 半径は線の太さの分だけ内側に取る必要があるが、太さは ActiveLine / InactiveLine が
+* それぞれ持つため、座標はストアで先に計算せず各コンポーネント側で求める。
+*/
+function pointOnArc(angle, radius) {
+	return {
+		x: 50 + radius * Math.cos((0, _tremolo_ui_functions.radian)(angle - 90)),
+		y: 50 + radius * Math.sin((0, _tremolo_ui_functions.radian)(angle - 90))
+	};
 }
-function calcDrawingState({ value, min, max, skew, startValue, angleRange }) {
-	const p = (0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew);
-	const s = (0, _tremolo_ui_functions.normalizeValue)(startValue, min, max, skew);
+/** 線の太さが viewBox からはみ出さないようにした半径 */
+function arcRadius(strokeWidth) {
+	const width = typeof strokeWidth === "number" ? strokeWidth : Number.parseFloat(String(strokeWidth));
+	return Number.isFinite(width) ? 50 - width / 2 : 50;
+}
+/** 設定から描画に必要な角度を導出する。レンダー中に呼ぶ。 */
+function calcAngles({ value, min, max, scale, startValue, angleRange }) {
+	const p = scale.normalize(value, min, max);
+	const s = scale.normalize(startValue, min, max);
 	const r1 = -angleRange / 2;
-	const r2 = r1 + Math.min(p, s) * angleRange;
-	const r3 = r1 + Math.max(p, s) * angleRange;
-	const r4 = angleRange / 2;
 	return {
 		p,
 		r1,
-		r2,
-		r3,
-		r4,
-		x1: 50 + 50 * Math.cos((0, _tremolo_ui_functions.radian)(r1 - 90)),
-		y1: 50 + 50 * Math.sin((0, _tremolo_ui_functions.radian)(r1 - 90)),
-		x2: 50 + 50 * Math.cos((0, _tremolo_ui_functions.radian)(r2 - 90)),
-		y2: 50 + 50 * Math.sin((0, _tremolo_ui_functions.radian)(r2 - 90)),
-		x3: 50 + 50 * Math.cos((0, _tremolo_ui_functions.radian)(r3 - 90)),
-		y3: 50 + 50 * Math.sin((0, _tremolo_ui_functions.radian)(r3 - 90)),
-		x4: 50 + 50 * Math.cos((0, _tremolo_ui_functions.radian)(r4 - 90)),
-		y4: 50 + 50 * Math.sin((0, _tremolo_ui_functions.radian)(r4 - 90))
+		r2: r1 + Math.min(p, s) * angleRange,
+		r3: r1 + Math.max(p, s) * angleRange,
+		r4: angleRange / 2
 	};
 }
-const createKnobStore = (initProps) => {
-	return (0, zustand.createStore)()(() => ({
-		...initProps,
-		...calcDrawingState(initProps)
-	}));
-};
 const KnobContext = (0, react.createContext)(null);
-function KnobProvider({ children, ...props }) {
-	const storeRef = (0, react.useRef)(null);
-	if (!storeRef.current) storeRef.current = createKnobStore(props);
-	(0, react.useEffect)(() => {
-		if (storeRef.current) storeRef.current.setState({
-			...props,
-			...calcDrawingState(props)
-		});
-		else storeRef.current = createKnobStore(props);
-	}, [props]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KnobContext.Provider, {
-		value: storeRef.current,
-		children
-	});
-}
+const KnobProvider = KnobContext.Provider;
 function useKnobContext(selector) {
-	const store = (0, react.useContext)(KnobContext);
-	if (!store) throw new Error("Missing KnobContext.Provider in the tree");
-	return (0, zustand.useStore)(store, selector);
+	const context = (0, react.useContext)(KnobContext);
+	if (!context) throw new Error("Missing KnobContext.Provider in the tree");
+	return selector ? selector(context) : context;
 }
 //#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);
+	const radius = arcRadius(strokeWidth);
+	const start = pointOnArc(r2, radius);
+	const end = pointOnArc(r3, radius);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 		className: (0, clsx.default)("tremolo-knob-active-line", className),
-		d: `M ${x2} ${y2} A 50 50 -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3} ${y3}`,
+		d: `M ${start.x} ${start.y} A ${radius} ${radius} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${end.x} ${end.y}`,
 		fill: "none",
 		stroke,
 		strokeWidth,
@@ -387,24 +312,21 @@ function InactiveLine({ stroke = "currentColor", strokeWidth = 6, className, ...
 	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);
+	const radius = arcRadius(strokeWidth);
+	const p1 = pointOnArc(r1, radius);
+	const p2 = pointOnArc(r2, radius);
+	const p3 = pointOnArc(r3, radius);
+	const p4 = pointOnArc(r4, radius);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [startValue > min && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 		className: (0, clsx.default)("tremolo-knob-inactive-line", className),
-		d: `M ${x1} ${y1} A 50 50 -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2} ${y2}`,
+		d: `M ${p1.x} ${p1.y} A ${radius} ${radius} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${p2.x} ${p2.y}`,
 		fill: "none",
 		stroke,
 		strokeWidth,
 		...props
 	}), startValue < max && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 		className: (0, clsx.default)("tremolo-knob-inactive-line", className),
-		d: `M ${x3} ${y3} A 50 50 -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4} ${y4}`,
+		d: `M ${p3.x} ${p3.y} A ${radius} ${radius} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${p4.x} ${p4.y}`,
 		fill: "none",
 		stroke,
 		strokeWidth,
@@ -412,6 +334,19 @@ function InactiveLine({ stroke = "currentColor", strokeWidth = 6, className, ...
 	})] });
 }
 //#endregion
+//#region src/components/Knob/SVGRoot.tsx
+function SVGRoot({ children, style, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: `0 0 100 100`,
+		style: {
+			display: "block",
+			...style
+		},
+		...props,
+		children
+	});
+}
+//#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);
@@ -441,63 +376,36 @@ function Thumb$2({ className, thumb = "currentColor", thumbLine = "currentColor"
 	});
 }
 //#endregion
-//#region src/components/Knob/SVGRoot.tsx
-function SVGRoot({ children, style, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		viewBox: `0 0 100 100`,
-		style: {
-			display: "block",
-			overflow: "visible",
-			...style
-		},
-		...props,
-		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InactiveLine, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActiveLine, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb$2, {})
-		] })
-	});
-}
-//#endregion
 //#region src/components/Knob/index.tsx
-const defaultExternalStyles$3 = {
+const defaultExternalStyles$2 = {
 	userSelectNone: true,
 	cursor: "grabbing"
 };
 /**
+* The wheel only acts while the focus is inside, so that scrolling a page past
+* the control does not change its value.
+*/
+const WHEEL_OPTIONS$2 = { requireFocus: true };
+/**
 * Interactive rotary knob component implemented in SVG.
 */
 const Knob = {
-	Root: (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defaultValue = min, startValue = min, size, externalStyles: _externalStyles, wheel = ["raw", 1], keyboard = ["raw", 1], enableDoubleClickDefault = true, disabled = false, readonly = false, angleRange = 270, onChange, onKeyDown, onPointerDown, onDoubleClick, className, style, children, ...props }, forwardedRef) => {
-		const [dragging, setDragging] = (0, react.useState)(false);
-		const valueRef = (0, react.useRef)(0);
+	Root: (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, 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 elmRef = (0, react.useRef)(null);
 		const externalStyles = {
-			...defaultExternalStyles$3,
+			...defaultExternalStyles$2,
 			..._externalStyles
 		};
-		const onDrag = (0, react.useCallback)((_x, y) => {
-			if (!onChange || readonly) return;
-			onChange((0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(valueRef.current - y / 100, min, max, skew), step), min, max));
-		}, [
-			max,
+		const range = (0, react.useMemo)(() => ({
 			min,
-			onChange,
-			readonly,
-			skew,
-			step
-		]);
-		const updateValueByEvent = (0, react.useCallback)((eventType, x) => {
-			let newValue;
-			if (eventType == "normalized") newValue = (0, _tremolo_ui_functions.rawValue)((0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
-			else newValue = value + x;
-			return (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)(newValue, step), min, max);
-		}, [
 			max,
+			step,
+			scale
+		}), [
 			min,
-			skew,
+			max,
 			step,
-			value
+			scale
 		]);
 		const handleKeyDown = (0, react.useCallback)((event) => {
 			if (!keyboard || !onChange || readonly) return;
@@ -509,40 +417,62 @@ const Knob = {
 				"ArrowDown"
 			].includes(key)) {
 				event.preventDefault();
-				const x = key == "ArrowRight" || key == "ArrowUp" ? keyboard[1] : -keyboard[1];
-				onChange(updateValueByEvent(keyboard[0], x));
+				onChange((0, _tremolo_ui_functions.applyDelta)(value, key == "ArrowRight" || key == "ArrowUp" ? 1 : -1, keyboard, range));
 			}
 		}, [
 			keyboard,
 			onChange,
 			readonly,
-			updateValueByEvent
+			value,
+			range
 		]);
-		const [touchMoveRefCallback, pointerDownHandler] = useDrag({
-			onDrag,
+		const { refCallback: dragRefCallback, dragging } = useDragValue({
+			axis: (0, react.useMemo)(() => [range, {
+				...range,
+				reverse: true
+			}], [range]),
+			getValue: () => [value, value],
+			threshold: 1,
+			cursor: readonly ? void 0 : externalStyles.cursor,
+			onChange: (v) => {
+				if (readonly) return;
+				onChange?.(v[1]);
+			},
 			onDragStart: () => {
-				setDragging(true);
-				valueRef.current = (0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew);
 				if (externalStyles.userSelectNone) addUserSelectNone();
-				if (externalStyles.cursor) setCursorStyle(externalStyles.cursor);
 			},
 			onDragEnd: () => {
-				setDragging(false);
 				if (externalStyles.userSelectNone) removeUserSelectNone();
-				if (externalStyles.cursor) resetCursorStyle();
 			}
 		});
-		const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+		const rootRefCallback = useComposedRefs(elmRef, dragRefCallback, useWheel((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
+			onChange((0, _tremolo_ui_functions.applyDelta)(value, -Math.sign(event.deltaY), wheel, range));
+		}, WHEEL_OPTIONS$2));
+		const context = (0, react.useMemo)(() => {
+			const config = {
+				value,
+				min,
+				max,
+				step,
+				scale,
+				startValue,
+				angleRange
+			};
+			return {
+				...config,
+				...calcAngles(config)
+			};
+		}, [
+			value,
+			min,
+			max,
+			step,
+			scale,
+			startValue,
+			angleRange
 		]);
 		(0, react.useImperativeHandle)(forwardedRef, () => {
 			return {
@@ -555,19 +485,9 @@ const Knob = {
 			};
 		}, []);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KnobProvider, {
-			value,
-			min,
-			max,
-			step,
-			skew,
-			startValue,
-			angleRange,
+			value: context,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref: (elm) => {
-					elmRef.current = elm;
-					wheelRefCallback(elm);
-					touchMoveRefCallback(elm);
-				},
+				ref: rootRefCallback,
 				className: (0, clsx.default)("tremolo-knob", className),
 				tabIndex: 0,
 				role: "slider",
@@ -582,10 +502,7 @@ const Knob = {
 					height: size,
 					...style
 				},
-				onPointerDown: (event) => {
-					pointerDownHandler(event);
-					onPointerDown?.(event);
-				},
+				onPointerDown,
 				onDoubleClick: (event) => {
 					if (enableDoubleClickDefault && onChange) onChange(defaultValue);
 					onDoubleClick?.(event);
@@ -595,7 +512,7 @@ const Knob = {
 					onKeyDown?.(event);
 				},
 				...props,
-				children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SVGRoot, {})
+				children
 			})
 		});
 	}),
@@ -605,121 +522,39 @@ const Knob = {
 	Thumb: Thumb$2
 };
 //#endregion
-//#region src/components/NumberInput/type.ts
-function selectUnit(units, value) {
-	let i = 0;
-	for (; i < units.length; i++) if (Math.abs(units[i][1]) > Math.abs(value)) break;
-	return units[Math.max(0, i - 1)];
+//#region src/components/NumberInput/context.tsx
+const NumberInputContext = (0, react.createContext)(null);
+const NumberInputProvider = NumberInputContext.Provider;
+function useNumberInputContext(selector) {
+	const context = (0, react.useContext)(NumberInputContext);
+	if (!context) throw new Error("Missing NumberInputContext.Provider in the tree");
+	return selector ? selector(context) : context;
 }
-function parseValue(inputString, units, digit) {
-	const str = inputString.trim();
-	if (!units || typeof units == "string") {
-		const m = str.match(/-?\d+(\.\d+)?/);
-		let v = Number(m?.[0] ?? "0");
-		v = isNaN(v) ? 0 : v;
-		return {
-			rawValue: v,
-			formatValue: (digit != void 0 ? v.toFixed(digit) : v) + (units ?? ""),
-			unit: units ?? ""
-		};
-	}
-	const unitList = units.map(([u, _s]) => u);
-	const scaleList = units.map(([_u, s]) => s);
-	let rawValue = 0;
-	let unit = unitList[0];
-	let formatValue = (digit != void 0 ? rawValue.toFixed(digit) : rawValue) + unit;
-	const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
-	if (m) {
-		rawValue = Number(m[1]) || 0;
-		const uIndex = unitList.indexOf(m[3]);
-		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,
-		formatValue,
-		unit
-	};
+const StepperContext = (0, react.createContext)(null);
+const StepperProvider = StepperContext.Provider;
+function useStepperContext() {
+	return (0, react.useContext)(StepperContext);
 }
 //#endregion
-//#region src/components/NumberInput/context.tsx
-function safeClamp(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
-	return (0, _tremolo_ui_functions.clamp)(value, min, max);
-}
-const createNumberInputStore = (initProps) => {
-	const DEFAULT_PROPS = {
-		value: "",
-		valueAsNumber: 0,
-		min: 0,
-		max: 0,
-		step: 1,
-		readonly: false,
-		keepWithinRange: true,
-		onChange: (_v, _t) => {}
-	};
-	return (0, zustand.createStore)()((set) => ({
-		...DEFAULT_PROPS,
-		...initProps,
-		value: parseValue(String(initProps?.value || ""), initProps?.units, initProps?.digit).formatValue,
-		valueAsNumber: parseValue(String(initProps?.value || ""), initProps?.units, initProps?.digit).rawValue,
-		increment: () => set((state) => {
-			if (state.readonly) return {};
-			let next = parseValue(state.value, state.units, state.digit).rawValue + (state.step ?? 1);
-			if (state.keepWithinRange) next = safeClamp(next, state.min, state.max);
-			const v = parseValue(String(next), state.units, state.digit).formatValue;
-			state?.onChange?.(next, v);
-			return {
-				value: v,
-				valueAsNumber: next
-			};
-		}),
-		decrement: () => set((state) => {
-			if (state.readonly) return {};
-			let next = parseValue(state.value, state.units, state.digit).rawValue - (state.step ?? 1);
-			if (state.keepWithinRange) next = safeClamp(next, state.min, state.max);
-			const v = parseValue(String(next), state.units, state.digit).formatValue;
-			state?.onChange?.(next, v);
-			return {
-				value: v,
-				valueAsNumber: next
-			};
-		}),
-		change: (value) => set((state) => {
-			if (state.readonly) return {};
-			const v = value ?? "";
-			return {
-				value: v,
-				valueAsNumber: parseValue(v, state.units, state.digit).rawValue
-			};
-		})
-	}));
-};
-const NumberInputContext = (0, react.createContext)(null);
-function NumberInputProvider({ children, ...props }) {
-	const storeRef = (0, react.useRef)(null);
-	if (!storeRef.current) storeRef.current = createNumberInputStore(props);
+//#region src/hooks/useEventListener.ts
+function useEventListener(target, event, handler, options) {
+	const listener = useCallbackRef(handler);
 	(0, react.useEffect)(() => {
-		if (storeRef.current) {
-			const parsed = parseValue(String(props?.value || ""), props?.units, props?.digit);
-			storeRef.current.setState({
-				...props,
-				value: parsed.formatValue,
-				valueAsNumber: parsed.rawValue
-			});
-		} else storeRef.current = createNumberInputStore(props);
-	}, [props]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputContext.Provider, {
-		value: storeRef.current,
-		children
-	});
-}
-function useNumberInputContext(selector) {
-	const store = (0, react.useContext)(NumberInputContext);
-	if (!store) throw new Error("Missing NumberInputContext.Provider in the tree");
-	return (0, zustand.useStore)(store, selector);
+		const node = typeof target === "function" ? target() : target ?? document;
+		if (!node) return;
+		node.addEventListener(event, listener, options);
+		return () => {
+			node.removeEventListener(event, listener, options);
+		};
+	}, [
+		event,
+		target,
+		options,
+		listener
+	]);
+	return () => {
+		(typeof target === "function" ? target() : target ?? document)?.removeEventListener(event, listener, options);
+	};
 }
 //#endregion
 //#region src/hooks/useInterval.ts
@@ -757,641 +592,554 @@ function useLongPress(callback, initialDelay = 500, interval = 40) {
 	}, [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));
+//#region src/components/NumberInput/stepperButton.tsx
+/**
+* Shared body of `IncrementStepper` and `DecrementStepper`: the two differ only
+* in which way they move the value and which arrow they draw.
+*/
+function StepperButton({ direction, variant, icon, className, style, children, onPointerDown, ...props }) {
+	const { step, readonly, atMin, atMax, nudge } = useNumberInputContext();
+	const stepper = useStepperContext();
+	const press = useLongPress((0, react.useCallback)(() => {
+		if (stepper?.draggingRef.current) return;
+		nudge(direction, ["raw", step]);
+	}, [
+		stepper,
+		nudge,
+		direction,
+		step
+	]));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("tremolo-number-input-decrement-stepper", className),
+		className: (0, clsx.default)(`tremolo-number-input-${variant}-stepper`, className),
 		role: "button",
 		tabIndex: -1,
-		"aria-disabled": keepWithinRange && valueAsNumber <= (min ?? Number.MIN_SAFE_INTEGER),
+		"aria-label": direction > 0 ? "Increment" : "Decrement",
+		"aria-disabled": direction > 0 ? atMax : atMin,
 		"aria-readonly": readonly,
-		onPointerDown: press,
+		style,
+		onPointerDown: (event) => {
+			if (!readonly) press();
+			onPointerDown?.(event);
+		},
 		...props,
-		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-			width: size,
-			height: size,
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "6 9 12 15 18 9" })
-		})
+		children: children ?? icon
+	});
+}
+function StepperArrow({ up }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		className: "tremolo-number-input-stepper-icon",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: up ? "18 15 12 9 6 15" : "6 9 12 15 18 9" })
+	});
+}
+//#endregion
+//#region src/components/NumberInput/DecrementStepper.tsx
+/** Lowers the value by one `step`, repeating while held. */
+function DecrementStepper(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperButton, {
+		direction: -1,
+		variant: "decrement",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperArrow, { up: false }),
+		...props
 	});
 }
 //#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__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("tremolo-number-input-increment-stepper", className),
-		role: "button",
-		tabIndex: -1,
-		"aria-disabled": keepWithinRange && valueAsNumber >= (max ?? Number.MAX_SAFE_INTEGER),
-		"aria-readonly": readonly,
-		onPointerDown: press,
-		...props,
-		children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-			width: size,
-			height: size,
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "18 15 12 9 6 15" })
-		})
+/** Raises the value by one `step`, repeating while held. */
+function IncrementStepper(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperButton, {
+		direction: 1,
+		variant: "increment",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperArrow, { up: true }),
+		...props
 	});
 }
 //#endregion
-//#region src/components/NumberInput/InternalInput.tsx
-const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFocus, blurOnEnter, clampValueOnBlur, wheel, keyboard, className, onChange, onFocus, onBlur, onKeyDown, children: _children, ...props }, ref) => {
-	const elmRef = (0, react.useRef)(null);
-	const [editing, setEditing] = (0, react.useState)(false);
-	const value = useNumberInputContext((s) => s.value);
-	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
-	const min = useNumberInputContext((s) => s.min);
-	const max = useNumberInputContext((s) => s.max);
-	const step = useNumberInputContext((s) => s.step);
-	const units = useNumberInputContext((s) => s.units);
-	const digit = useNumberInputContext((s) => s.digit);
-	const change = useNumberInputContext((s) => s.change);
-	const error = (0, react.useMemo)(() => {
-		if (editing) return false;
-		const v = valueAsNumber;
-		return (min ?? -Infinity) > v || v > (max ?? Infinity);
-	}, [
-		editing,
-		max,
-		min,
-		valueAsNumber
-	]);
-	const updateValueByEvent = (0, react.useCallback)((eventType, x) => {
-		let newValue;
-		if (eventType == "normalized") {
-			if (!min || !max) throw new Error("[NumberInput] \"min\" and \"max\" are required when InputEventOption[0] is set to \"normalized\".");
-			newValue = (0, _tremolo_ui_functions.rawValue)((0, _tremolo_ui_functions.normalizeValue)(valueAsNumber, min, max) + x, min, max);
-			return (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)(newValue, step), min, max);
-		} else {
-			newValue = valueAsNumber + x;
-			return (0, _tremolo_ui_functions.stepValue)(newValue, step);
-		}
-	}, [
-		max,
-		min,
-		step,
-		valueAsNumber
-	]);
-	const handleKeyDown = (0, react.useCallback)((event) => {
-		if (!keyboard || !onChange || readonly) return;
-		const key = event.key;
-		if (!["ArrowUp", "ArrowDown"].includes(key)) return;
-		event.preventDefault();
-		const x = key == "ArrowUp" ? keyboard[1] : -keyboard[1];
-		const parsed = parseValue(String(updateValueByEvent(keyboard[0], x)));
-		onChange?.(parsed.rawValue, parsed.formatValue);
-	}, [
-		keyboard,
-		readonly,
-		onChange,
-		updateValueByEvent
-	]);
-	const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
-		if (!wheel || readonly) return;
-		event.preventDefault();
-		if (!onChange || event.deltaY == 0) return;
-		const x = Math.sign(event.deltaY) * -wheel[1];
-		const parsed = parseValue(String(updateValueByEvent(wheel[0], x)));
-		onChange?.(parsed.rawValue, parsed.formatValue);
-	}, { passive: false }, [
-		wheel,
-		readonly,
-		onChange,
-		updateValueByEvent
-	]);
-	(0, react.useImperativeHandle)(ref, () => {
-		return {
-			focus() {
-				elmRef.current?.focus();
-			},
-			blur() {
-				elmRef.current?.blur();
-			}
-		};
-	}, []);
+//#region src/components/NumberInput/InputField.tsx
+/** The leading number of the displayed text, whatever the format put around it. */
+const NUMBER_PREFIX = /^\s*-?[\d.,]*/;
+/**
+* The text field of a `NumberInput`, and the only place the value can be typed.
+*
+* While the user types, their own text stands rather than `format(value)`, so
+* that a half-finished entry is not rewritten under the caret.
+*/
+function InputField({ selectOnFocus = "none", blurOnEnter = true, className, style, ref, onFocus, onBlur, onKeyDown, ...props }) {
+	const { value, min, max, step, disabled, readonly, keyboard, text, outOfRange, setDraft, commitDraft, nudge, inputRef } = useNumberInputContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-		ref: (input) => {
-			elmRef.current = input;
-			wheelRefCallback(input);
-		},
-		className: (0, clsx.default)("tremolo-number-input", className),
-		value,
-		min,
-		max,
-		step,
+		ref: useComposedRefs(ref, inputRef),
+		className: (0, clsx.default)("tremolo-number-input-field", className),
 		type: "text",
+		inputMode: "decimal",
+		role: "spinbutton",
+		value: text,
+		readOnly: readonly,
 		"aria-disabled": disabled,
 		"aria-readonly": readonly,
-		tabIndex: -1,
-		"data-error": error,
-		onChange: (event) => {
-			if (readonly) return;
-			const v = event.currentTarget.value;
-			const cursorPos = event.target.selectionStart;
-			change(v);
-			const valueAsNumber = parseValue(v, units, digit).rawValue;
-			onChange?.(valueAsNumber, v);
-			if (cursorPos) {
-				event.target.selectionStart = cursorPos;
-				event.target.selectionEnd = cursorPos;
-			}
-		},
+		"aria-valuenow": value,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuetext": text,
+		step,
+		"data-out-of-range": outOfRange,
+		style,
+		onChange: (event) => setDraft(event.currentTarget.value),
 		onFocus: (event) => {
-			setEditing(true);
-			const v = event.currentTarget.value;
-			const parsed = parseValue(v, units, digit);
-			if (selectWithFocus == "all") event.currentTarget.setSelectionRange(0, v.length);
-			else if (selectWithFocus == "number") event.currentTarget.setSelectionRange(0, parsed.formatValue.length - parsed.unit.length);
-			onFocus?.(parsed.rawValue, parsed.formatValue, event);
+			const input = event.currentTarget;
+			if (selectOnFocus == "all") input.setSelectionRange(0, input.value.length);
+			else if (selectOnFocus == "number") input.setSelectionRange(0, input.value.match(NUMBER_PREFIX)?.[0].length ?? 0);
+			onFocus?.(event);
 		},
 		onBlur: (event) => {
-			setEditing(false);
-			let v = parseValue(event.currentTarget.value, units, digit).rawValue;
-			if (clampValueOnBlur) v = safeClamp(v, min, max);
-			const parsed = parseValue(String(v), units, digit);
-			change(parsed.formatValue);
-			if (clampValueOnBlur) onChange?.(parsed.rawValue, parsed.formatValue);
-			onBlur?.(parsed.rawValue, parsed.formatValue, event);
+			commitDraft();
+			onBlur?.(event);
 		},
 		onKeyDown: (event) => {
-			if (blurOnEnter && event.key == "Enter") event.currentTarget.blur();
-			handleKeyDown(event);
+			const key = event.key;
+			if (key == "Enter") {
+				commitDraft();
+				if (blurOnEnter) event.currentTarget.blur();
+			} else if (keyboard && !readonly && (key == "ArrowUp" || key == "ArrowDown")) {
+				event.preventDefault();
+				nudge(key == "ArrowUp" ? 1 : -1, keyboard);
+			}
 			onKeyDown?.(event);
 		},
 		...props
 	});
-});
+}
+//#endregion
+//#region src/hooks/useDrag.ts
+/**
+* Track a pointer drag on an element.
+*
+* @returns a ref callback to attach to the element being dragged
+*/
+function useDrag({ threshold = 1, cursor, onDrag, onDragStart, onDragEnd }) {
+	const dragHandler = useCallbackRef(onDrag);
+	const dragStartHandler = useCallbackRef(onDragStart);
+	const dragEndHandler = useCallbackRef(onDragEnd);
+	const [node, setNode] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!node) return;
+		const instance = (0, _tremolo_ui_dom.createDrag)(node, {
+			threshold,
+			cursor,
+			onDragStart: () => dragStartHandler(),
+			onDrag: ({ x, y, deltaX, deltaY }) => dragHandler(x, y, deltaX, deltaY),
+			onDragEnd: () => dragEndHandler()
+		});
+		return () => instance.destroy();
+	}, [
+		node,
+		threshold,
+		cursor,
+		dragHandler,
+		dragStartHandler,
+		dragEndHandler
+	]);
+	return setNode;
+}
 //#endregion
 //#region src/components/NumberInput/Stepper.tsx
-function Stepper({ dynamic = true, children, className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("tremolo-number-input-stepper", className),
-		"data-dynamic": dynamic,
-		...props,
-		children
+/**
+* The area the steppers sit in, and a drag handle in its own right: dragging it
+* up and down moves the value one `step` every `drag` pixels.
+*
+* The drag lives here rather than on `InputField` because `createDrag` turns
+* off text selection on whatever element it is attached to.
+*/
+function Stepper({ className, style, children, ref, ...props }) {
+	const { value, step, readonly, drag, range, changeValue } = useNumberInputContext();
+	/**
+	* Set once the drag has actually moved the value, so that the press-and-hold
+	* repeat of a stepper stands down and leaves the value to the drag. A ref,
+	* because it is read from inside the repeat rather than rendered.
+	*/
+	const draggingRef = (0, react.useRef)(false);
+	/**
+	* Where the drag started, taken on the first move rather than on pointer
+	* down: the steppers act on pointer down, so by then the value may already
+	* have been nudged once, and the drag should carry on from there.
+	*/
+	const originRef = (0, react.useRef)(null);
+	const dragRefCallback = useDrag({
+		threshold: 1,
+		cursor: readonly ? void 0 : "ns-resize",
+		onDragStart: () => {
+			originRef.current = null;
+			draggingRef.current = false;
+		},
+		onDrag: (_x, y) => {
+			if (readonly || drag == null) return;
+			if (!originRef.current) {
+				originRef.current = {
+					y,
+					value
+				};
+				return;
+			}
+			const steps = Math.round(-(y - originRef.current.y) / drag);
+			if (steps == 0) return;
+			draggingRef.current = true;
+			changeValue((0, _tremolo_ui_functions.applyDelta)(originRef.current.value, steps, ["raw", step], range));
+		},
+		onDragEnd: () => {
+			draggingRef.current = false;
+		}
+	});
+	const composedRef = useComposedRefs(ref, drag != null && !readonly ? dragRefCallback : void 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperProvider, {
+		value: (0, react.useMemo)(() => ({ draggingRef }), []),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: composedRef,
+			className: (0, clsx.default)("tremolo-number-input-stepper", className),
+			style,
+			...props,
+			children
+		})
 	});
 }
 /**
 * Input with some useful functions for entering numerical values.
 */
 const NumberInput = {
-	Root: (0, react.forwardRef)(({ value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = "outline", selectWithFocus = "none", blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ["raw", 1], keyboard = ["raw", 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children, ...props }, forwardedRef) => {
-		const colors = { "--active-color": activeColor };
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputProvider, {
-			value: String(value),
+	Root: (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, units, digit, format: formatProp, parse: parseProp, clampValue = true, wheel = ["raw", 1], keyboard = ["raw", 1], drag = 1, disabled = false, readonly = false, className, style, onChange, children, ...props }, forwardedRef) => {
+		const inputRef = (0, react.useRef)(null);
+		/**
+		* The text being typed. The only state here: it is not a copy of `value`,
+		* but the half-finished entry that has no value to be derived from yet.
+		*/
+		const [draft, setDraft] = (0, react.useState)(null);
+		const format = (0, react.useCallback)((v) => formatProp ? formatProp(v) : (0, _tremolo_ui_functions.formatValue)(v, units, digit), [
+			formatProp,
+			units,
+			digit
+		]);
+		const parse = (0, react.useCallback)((t) => parseProp ? parseProp(t) : (0, _tremolo_ui_functions.parseValue)(t, units), [parseProp, units]);
+		const range = (0, react.useMemo)(() => ({
+			min: (clampValue ? min : void 0) ?? Number.MIN_SAFE_INTEGER,
+			max: (clampValue ? max : void 0) ?? Number.MAX_SAFE_INTEGER,
+			step,
+			scale
+		}), [
+			clampValue,
 			min,
 			max,
 			step,
-			units,
-			digit,
+			scale
+		]);
+		const text = draft ?? format(value);
+		const editing = draft != null;
+		const outOfRange = !editing && (min != void 0 && value < min || max != void 0 && value > max);
+		const handleDraft = (0, react.useCallback)((next) => {
+			if (readonly) return;
+			setDraft(next);
+			const parsed = parse(next);
+			if (Number.isFinite(parsed)) onChange?.(parsed);
+		}, [
 			readonly,
-			keepWithinRange,
-			onChange,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, clsx.default)("tremolo-number-input-wrapper", wrapperClassName),
-				tabIndex: 0,
-				style: { ...colors },
-				"data-stepper": !!children,
-				"data-variant": variant,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalInput, {
-					ref: forwardedRef,
-					readonly,
-					disabled,
-					selectWithFocus,
-					blurOnEnter,
-					clampValueOnBlur,
-					wheel,
-					keyboard,
-					className,
-					onChange,
-					onFocus,
-					onBlur,
-					...props
-				}), children]
+			parse,
+			onChange
+		]);
+		const changeValue = (0, react.useCallback)((next) => {
+			if (readonly) return;
+			setDraft(null);
+			if (next != value) onChange?.(next);
+		}, [
+			readonly,
+			value,
+			onChange
+		]);
+		const commitDraft = (0, react.useCallback)(() => {
+			if (draft == null || readonly) return;
+			changeValue((0, _tremolo_ui_functions.clamp)(parse(draft), range.min, range.max));
+		}, [
+			draft,
+			readonly,
+			parse,
+			range,
+			changeValue
+		]);
+		const nudge = (0, react.useCallback)((direction, option) => {
+			changeValue((0, _tremolo_ui_functions.applyDelta)(value, direction, option, range));
+		}, [
+			changeValue,
+			value,
+			range
+		]);
+		const wheelRefCallback = useWheel((event) => {
+			if (!wheel || readonly || event.deltaY == 0) return;
+			event.preventDefault();
+			nudge(-Math.sign(event.deltaY), wheel);
+		}, { requireFocus: true });
+		const context = (0, react.useMemo)(() => ({
+			value,
+			min,
+			max,
+			step,
+			scale,
+			disabled,
+			readonly,
+			clampValue,
+			range,
+			keyboard,
+			text,
+			editing,
+			outOfRange,
+			atMin: clampValue && min != void 0 && value <= min,
+			atMax: clampValue && max != void 0 && value >= max,
+			drag,
+			format,
+			parse,
+			setDraft: handleDraft,
+			commitDraft,
+			changeValue,
+			nudge,
+			inputRef
+		}), [
+			value,
+			min,
+			max,
+			step,
+			scale,
+			disabled,
+			readonly,
+			clampValue,
+			range,
+			keyboard,
+			text,
+			editing,
+			outOfRange,
+			drag,
+			format,
+			parse,
+			handleDraft,
+			commitDraft,
+			changeValue,
+			nudge
+		]);
+		(0, react.useImperativeHandle)(forwardedRef, () => {
+			return {
+				focus() {
+					inputRef.current?.focus();
+				},
+				blur() {
+					inputRef.current?.blur();
+				}
+			};
+		}, []);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputProvider, {
+			value: context,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: wheelRefCallback,
+				className: (0, clsx.default)("tremolo-number-input", className),
+				"aria-disabled": disabled,
+				"aria-readonly": readonly,
+				style,
+				...props,
+				children
 			})
 		});
 	}),
+	InputField,
 	Stepper,
 	IncrementStepper,
 	DecrementStepper
 };
 //#endregion
-//#region src/hooks/usePianoDrag.ts
+//#region src/components/Piano/keyboardShortcuts.ts
 /**
-* Internal
-* @returns [refCallback, pointerDownHandler]
-* @private
+* Ready-made keyboard layouts. Both assume `noteRange.first` is a C.
 */
-function usePianoDrag({ baseElementRef, onDrag, onDragStart, onDragEnd }) {
-	const dragged = (0, react.useRef)(false);
-	const normalizedX = (0, react.useRef)(0);
-	const normalizedY = (0, react.useRef)(0);
-	const handleDrag = (0, react.useCallback)((event) => {
-		if (!baseElementRef.current || !dragged.current) return;
-		const isTouch = event instanceof TouchEvent;
-		if (isTouch && event.cancelable) event.preventDefault();
-		const { left, top, right, bottom } = baseElementRef.current.getBoundingClientRect();
-		const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
-		const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
-		const nx = (0, _tremolo_ui_functions.normalizeValue)(mouseX, left, right);
-		const ny = (0, _tremolo_ui_functions.normalizeValue)(mouseY, top, bottom);
-		normalizedX.current = nx;
-		normalizedY.current = ny;
-		onDrag(nx, ny);
-	}, [onDrag, baseElementRef]);
-	const refHandler = useRefCallbackEvent("touchmove", handleDrag, { passive: false }, [onDrag]);
-	const pointerDownHandler = (0, react.useCallback)((event) => {
-		dragged.current = true;
-		handleDrag(event);
-		onDragStart?.(normalizedX.current, normalizedY.current);
-	}, [handleDrag, onDragStart]);
-	useEventListener(globalThis.window, "pointermove", handleDrag);
-	useEventListener(globalThis.window, "pointerup", () => {
-		if (!dragged.current) return;
-		dragged.current = false;
-		onDragEnd?.(normalizedX.current, normalizedY.current);
-	});
-	return {
-		refHandler,
-		pointerDownHandler
-	};
-}
-//#endregion
-//#region src/components/Piano/context.tsx
-const createPianoStore = (initProps) => {
-	const DEFAULT_PROPS = {
-		noteRange: {
-			first: 0,
-			last: 127
-		},
-		glissando: true,
-		midiMax: 127,
-		fill: false,
-		label: () => void 0,
-		onPlayNote: () => {},
-		onStopNote: () => {}
-	};
-	return (0, zustand.createStore)()(() => ({
-		...DEFAULT_PROPS,
-		...initProps,
-		notePosition: initProps.notePosition
-	}));
+const SHORTCUTS = {
+	HOME_ROW: { keys: [
+		"a",
+		"w",
+		"s",
+		"e",
+		"d",
+		"f",
+		"t",
+		"g",
+		"y",
+		"h",
+		"u",
+		"j",
+		"k",
+		"o",
+		"l",
+		"p",
+		";"
+	] },
+	HOME_ROW_NATURAL: { keys: [
+		"a",
+		"",
+		"s",
+		"",
+		"d",
+		"f",
+		"",
+		"g",
+		"",
+		"h",
+		"",
+		"j",
+		"k",
+		"",
+		"l",
+		"",
+		";"
+	] }
 };
-const PianoContext = (0, react.createContext)(null);
-function PianoProvider({ children, ...props }) {
-	const storeRef = (0, react.useRef)(null);
-	if (!storeRef.current) storeRef.current = createPianoStore(props);
-	(0, react.useEffect)(() => {
-		if (storeRef.current) storeRef.current.setState(props);
-		else storeRef.current = createPianoStore(props);
-	}, [props]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PianoContext.Provider, {
-		value: storeRef.current,
-		children
-	});
-}
-function usePianoContext(selector) {
-	const store = (0, react.useContext)(PianoContext);
-	if (!store) throw new Error("Missing PianoContext.Provider in the tree");
-	return (0, zustand.useStore)(store, selector);
-}
-//#endregion
-//#region src/components/Piano/KeyLabel.tsx
-function KeyLabel({ label, className, wrapperClassName, wrapperStyle, __note, __label, ...props }) {
-	const index = getNoteRangeArray(usePianoContext((s) => s.noteRange)).indexOf(__note);
-	const content = label ? label(__note, index) : __label && __label(__note, index);
-	return (content != void 0 || content != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("tremolo-piano-key-label-wrapper", wrapperClassName),
-		style: wrapperStyle,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("tremolo-piano-key-label", className),
-			...props,
-			children: content
-		})
+/**
+* Customizable piano component.
+*/
+const Piano = { Root: (0, react.forwardRef)(function Root({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, whiteKeyWidth = 40, keyGap = 1, blackKeyWidthRatio = .65, blackKeyHeightRatio = .6, height = fill ? "100%" : 160, style, className, label, keyProps, onPlayNote, onStopNote, ...props }, forwardedRef) {
+	const [node, setNode] = (0, react.useState)(null);
+	const [activeNotes, setActiveNotes] = (0, react.useState)([]);
+	/** Set while `fill` is on, measured from the parent. */
+	const [filledKeyWidth, setFilledKeyWidth] = (0, react.useState)(whiteKeyWidth);
+	const notes = (0, react.useMemo)(() => (0, _tremolo_ui_functions.getNoteRangeArray)(noteRange), [noteRange]);
+	const whiteKeyCount = (0, react.useMemo)(() => notes.filter(_tremolo_ui_functions.isWhiteKey).length, [notes]);
+	const layout = (0, react.useMemo)(() => ({
+		noteRange,
+		whiteKeyWidth: fill ? filledKeyWidth : whiteKeyWidth,
+		keyGap,
+		blackKeyWidthRatio,
+		blackKeyHeightRatio
+	}), [
+		noteRange,
+		fill,
+		filledKeyWidth,
+		whiteKeyWidth,
+		keyGap,
+		blackKeyWidthRatio,
+		blackKeyHeightRatio
+	]);
+	const latest = (0, react.useRef)({
+		layout,
+		glissando,
+		midiMax,
+		onPlayNote,
+		onStopNote
 	});
-}
-const KeyImpl = (0, react.forwardRef)(({ keyType, noteNumber, width, height, bg, color, activeBg, activeColor, className, style, children, __width, ...props }, ref) => {
-	const [played, setPlayed] = (0, react.useState)(false);
-	const midiMax = usePianoContext((s) => s.midiMax);
-	const fill = usePianoContext((s) => s.fill);
-	const onPlayNote = usePianoContext((s) => s.onPlayNote);
-	const onStopNote = usePianoContext((s) => s.onStopNote);
-	const label = usePianoContext((s) => s.label);
-	const position = usePianoContext((s) => s.notePosition)(noteNumber);
-	const disabled = noteNumber > midiMax;
-	const colors = {
-		"--bg": bg,
-		"--color": color,
-		"--active-bg": activeBg,
-		"--active-color": activeColor
-	};
-	(0, react.useImperativeHandle)(ref, () => {
-		return {
-			play(velocity) {
-				if (disabled) return;
-				setPlayed(true);
-				if (onPlayNote) onPlayNote(noteNumber, velocity);
-			},
-			stop() {
-				setPlayed(false);
-				if (onStopNote) onStopNote(noteNumber);
-			},
-			played() {
-				return played;
-			}
+	const instanceRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (!node) return;
+		const instance = (0, _tremolo_ui_dom.createPianoInput)(node, {
+			layout: latest.current.layout,
+			glissando: latest.current.glissando,
+			midiMax: latest.current.midiMax,
+			onPlayNote: (note, velocity) => latest.current.onPlayNote?.(note, velocity),
+			onStopNote: (note) => latest.current.onStopNote?.(note),
+			onActiveNotesChange: setActiveNotes
+		});
+		instanceRef.current = instance;
+		return () => {
+			instanceRef.current = null;
+			instance.destroy();
 		};
+	}, [node]);
+	(0, react.useEffect)(() => {
+		latest.current = {
+			layout,
+			glissando,
+			midiMax,
+			onPlayNote,
+			onStopNote
+		};
+		instanceRef.current?.update({
+			layout,
+			glissando,
+			midiMax
+		});
+	});
+	(0, react.useEffect)(() => {
+		if (!fill || !node) return;
+		const parent = node.parentElement;
+		if (!parent) throw new Error("doesn't have a parent element.");
+		const resizeObserver = new ResizeObserver(() => {
+			setFilledKeyWidth(node.clientWidth / whiteKeyCount - keyGap);
+		});
+		resizeObserver.observe(parent);
+		return () => resizeObserver.disconnect();
 	}, [
-		disabled,
-		noteNumber,
-		onPlayNote,
-		onStopNote,
-		played
+		fill,
+		node,
+		whiteKeyCount,
+		keyGap
 	]);
-	let keyLabelProps = {};
-	if (children != void 0) react.default.Children.forEach(children, (child) => {
-		if (react.default.isValidElement(child)) if (child.type == KeyLabel) keyLabelProps = child.props;
-		else throw new Error("only <KeyLabel>");
-		else throw new Error("children is an invalid element.");
+	/** The note a shortcut key plays, or null when it has none. */
+	function shortcutNote(key) {
+		if (!keyboardShortcuts || key === "") return null;
+		const index = keyboardShortcuts.keys.indexOf(key);
+		return index === -1 ? null : noteRange.first + index;
+	}
+	useEventListener(globalThis.window, "keydown", (e) => {
+		if (e.repeat) return;
+		const note = shortcutNote(e.key);
+		if (note !== null) instanceRef.current?.noteOn(note, { source: "keyboard" });
 	});
+	useEventListener(globalThis.window, "keyup", (e) => {
+		const note = shortcutNote(e.key);
+		if (note !== null) instanceRef.current?.noteOff(note, { source: "keyboard" });
+	});
+	(0, react.useImperativeHandle)(forwardedRef, () => ({
+		playNote: (note, velocity) => instanceRef.current?.noteOn(note, {
+			source: "api",
+			velocity
+		}),
+		stopNote: (note) => instanceRef.current?.noteOff(note, { source: "api" })
+	}), []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)(`tremolo-piano-${keyType}-key`, className),
-		"aria-disabled": disabled,
-		"data-active": played,
+		ref: setNode,
+		className: (0, clsx.default)("tremolo-piano", className),
 		style: {
-			...colors,
-			left: position,
-			width: fill ? __width : width,
+			width: fill ? "100%" : (0, _tremolo_ui_functions.pianoWidth)(layout),
 			height,
 			...style
-		},
-		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyLabel, {
-			label,
-			__note: noteNumber,
-			...keyLabelProps
-		})
-	});
-});
-const WhiteKey = (0, react.forwardRef)(({ width = 40, height = "100%", onContextMenu = (e) => e.preventDefault(), ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyImpl, {
-		ref,
-		keyType: "white",
-		width,
-		height,
-		onContextMenu,
-		...props
-	});
-});
-const BlackKey = (0, react.forwardRef)(({ width = 26, height = "60%", onContextMenu = (e) => e.preventDefault(), ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyImpl, {
-		ref,
-		keyType: "black",
-		width,
-		height,
-		onContextMenu,
-		...props
-	});
-});
-//#endregion
-//#region src/components/Piano/keyboardShortcuts.ts
-const SHORTCUTS = { HOME_ROW: { keys: [
-	"a",
-	"w",
-	"s",
-	"e",
-	"d",
-	"f",
-	"t",
-	"g",
-	"y",
-	"h",
-	"u",
-	"j",
-	"k",
-	"o",
-	"l",
-	"p",
-	";"
-] } };
-//#endregion
-//#region src/components/Piano/index.tsx
-/**
-* [noteRange.first, noteRange.first + 1 ..., noteRange.last]
-*/
-function getNoteRangeArray(noteRange) {
-	return Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
-}
-const blackPerWhiteWidth = 26 / 40;
-/**
-* Customizable piano component.
-*/
-const Piano = {
-	Root: (0, react.forwardRef)(({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, height = fill ? "100%" : 160, whiteNoteWidth: _whiteNoteWidth = 40, style, className, onPlayNote, onStopNote, label, children, onPointerDown, ...props }, forwardedRef) => {
-		const [whiteNoteWidth, setWhiteNoteWidth] = (0, react.useState)(_whiteNoteWidth);
-		const keyRefs = (0, react.useRef)([]);
-		for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) keyRefs.current[i] = (0, react.createRef)();
-		const pianoRef = (0, react.useRef)(null);
-		const hitKeyIndex = (0, react.useRef)(-1);
-		const noteRangeArray = getNoteRangeArray(noteRange);
-		const whiteNotes = noteRangeArray.filter((v) => (0, _tremolo_ui_functions.isWhiteKey)(v));
-		const blackNotes = noteRangeArray.filter((v) => (0, _tremolo_ui_functions.isBlackKey)(v));
-		const whiteNoteCount = whiteNotes.length;
-		const padding = 1;
-		const staticWidth = (whiteNoteWidth + padding) * whiteNoteCount;
-		const childrenWithProps = (0, react.useMemo)(() => {
-			return children && react.default.Children.map(children, (child, index) => {
-				if (react.default.isValidElement(child)) {
-					const __width = child.type == WhiteKey ? whiteNoteWidth : whiteNoteWidth * .65;
-					const props = {
-						ref: keyRefs.current[index],
-						__width
-					};
-					return react.default.cloneElement(child, props);
-				}
-				return child;
-			});
-		}, [children, whiteNoteWidth]);
-		const notePosition = (0, react.useCallback)((note) => {
-			const pitchPositions = {
-				C: 0,
-				"C#": 1,
-				D: 1,
-				"D#": 2,
-				E: 2,
-				F: 3,
-				"F#": 4,
-				G: 4,
-				"G#": 5,
-				A: 5,
-				"A#": 6,
-				B: 6
-			};
-			const blackNoteWidth = whiteNoteWidth * blackPerWhiteWidth;
-			const padding = 1;
-			const targetNoteKey = (0, _tremolo_ui_functions.noteKey)(note);
-			const firstNoteKey = (0, _tremolo_ui_functions.noteKey)(noteRange.first);
-			const octave = Math.floor((note - noteRange.first) / 12);
-			const octaveOffset = _tremolo_ui_functions.noteKeys.indexOf(firstNoteKey) > _tremolo_ui_functions.noteKeys.indexOf(targetNoteKey) ? 1 : 0;
-			const w = whiteNoteWidth + padding;
-			const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey];
-			const blackKeyOffset = (0, _tremolo_ui_functions.isBlackKey)(note) ? blackNoteWidth / 2 : 0;
-			return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset;
-		}, [noteRange.first, whiteNoteWidth]);
-		const getHitKeyIndex = (0, react.useCallback)((x, y) => {
-			if (!pianoRef.current) return -1;
-			const containerHeight = pianoRef.current.clientHeight;
-			const notes = [...blackNotes, ...whiteNotes];
-			for (let i = 0; i < notes.length; i++) {
-				const note = notes[i];
-				const pos = notePosition(note);
-				const w = (0, _tremolo_ui_functions.isWhiteKey)(note) ? whiteNoteWidth : whiteNoteWidth * blackPerWhiteWidth;
-				const h = (0, _tremolo_ui_functions.isWhiteKey)(note) ? containerHeight : containerHeight * .6;
-				if (pos <= x && x < pos + w && 0 <= y && y < h) return note;
-			}
-			return -1;
-		}, [
-			blackNotes,
-			notePosition,
-			whiteNoteWidth,
-			whiteNotes
-		]);
-		const onDrag = (0, react.useCallback)((perX, perY) => {
-			if (!pianoRef.current) return;
-			const note = getHitKeyIndex(perX * staticWidth, perY * pianoRef.current.clientHeight);
-			const index = noteRangeArray.indexOf(note);
-			if (index == -1) return;
-			if (hitKeyIndex.current != index) {
-				keyRefs.current[hitKeyIndex.current]?.current?.stop();
-				keyRefs.current[index]?.current?.play();
-				hitKeyIndex.current = index;
-			}
-		}, [
-			getHitKeyIndex,
-			noteRangeArray,
-			staticWidth
-		]);
-		const onDragEnd = (0, react.useCallback)(() => {
-			if (keyRefs.current[hitKeyIndex.current]?.current?.played()) keyRefs.current[hitKeyIndex.current]?.current?.stop();
-			hitKeyIndex.current = -1;
-		}, [keyRefs]);
-		(0, react.useEffect)(() => {
-			if (fill && pianoRef.current) {
-				const parent = pianoRef.current.parentElement;
-				if (!parent) throw new Error("doesn't have a parent element.");
-				const resizeObserver = new ResizeObserver(() => {
-					const w = pianoRef.current.clientWidth;
-					setWhiteNoteWidth(w / whiteNoteCount - padding);
-				});
-				resizeObserver.observe(parent);
-				return () => {
-					resizeObserver.unobserve(parent);
-				};
-			} 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();
-			}
-		});
-		useEventListener(globalThis.window, "keyup", (e) => {
-			if (e.repeat) return;
-			if (!keyboardShortcuts) return;
-			const index = keyboardShortcuts.keys.indexOf(e.key);
-			if (index != -1) keyRefs.current[index]?.current?.stop();
-		});
-		(0, react.useImperativeHandle)(forwardedRef, () => {
-			return {
-				playNote(note, velocity) {
-					const index = noteRangeArray.indexOf(note);
-					if (index != -1) {
-						if (!keyRefs.current[index]?.current?.played()) keyRefs.current[index]?.current?.play(velocity);
-					} else onPlayNote?.(note, velocity);
-				},
-				stopNote(note) {
-					const index = noteRangeArray.indexOf(note);
-					if (index != -1) keyRefs.current[index]?.current?.stop();
-					else onStopNote?.(note);
-				}
+		},
+		...props,
+		children: notes.map((note, index) => {
+			const keyType = (0, _tremolo_ui_functions.isWhiteKey)(note) ? "white" : "black";
+			const state = {
+				index,
+				keyType,
+				active: activeNotes.includes(note),
+				disabled: note > midiMax
 			};
-		}, [
-			noteRangeArray,
-			onPlayNote,
-			onStopNote
-		]);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PianoProvider, {
-			notePosition,
-			noteRange,
-			glissando,
-			midiMax,
-			fill,
-			onPlayNote,
-			onStopNote,
-			label,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref: (div) => {
-					pianoRef.current = div;
-					touchMoveRefCallback(div);
-				},
-				className: (0, clsx.default)("tremolo-piano", className),
+			const { className: keyClassName, style: keyStyle, ...rest } = keyProps?.(note, state) ?? {};
+			const content = label?.(note, state);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, clsx.default)(`tremolo-piano-${keyType}-key`, keyClassName),
+				"data-note": note,
+				"data-note-key": (0, _tremolo_ui_functions.noteKey)(note),
+				"data-active": state.active,
+				"aria-disabled": state.disabled,
+				...rest,
 				style: {
-					width: fill ? "100%" : staticWidth,
-					height,
-					...style
-				},
-				onPointerDown: (event) => {
-					pointerDownHandler(event);
-					onPointerDown?.(event);
+					...keyStyle,
+					left: (0, _tremolo_ui_functions.notePosition)(note, layout),
+					width: keyType === "white" ? layout.whiteKeyWidth : (0, _tremolo_ui_functions.blackKeyWidth)(layout),
+					height: keyType === "white" ? "100%" : `${blackKeyHeightRatio * 100}%`
 				},
-				...props,
-				children: childrenWithProps || noteRangeArray.map((note, index) => (0, _tremolo_ui_functions.isWhiteKey)(note) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WhiteKey, {
-					ref: keyRefs.current[index],
-					noteNumber: note,
-					__width: whiteNoteWidth
-				}, note) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlackKey, {
-					ref: keyRefs.current[index],
-					noteNumber: note,
-					__width: whiteNoteWidth * blackPerWhiteWidth
-				}, note))
-			})
-		});
-	}),
-	WhiteKey,
-	BlackKey,
-	KeyLabel
-};
+				children: content !== "" && content !== null && content !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "tremolo-piano-key-label-wrapper",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "tremolo-piano-key-label",
+						children: content
+					})
+				})
+			}, note);
+		})
+	});
+}) };
 //#endregion
 //#region src/components/PointsEditor/Background.tsx
 function Background({ className, children, ...props }) {
@@ -1403,96 +1151,24 @@ function Background({ className, children, ...props }) {
 }
 //#endregion
 //#region src/components/PointsEditor/context.tsx
-const createPointsEditorStore = (initProps) => {
-	const DEFAULT_PROPS = {
-		containerElementRef: (0, react.createRef)(),
-		disabled: false,
-		readonly: false,
-		externalStyles: {
-			userSelectNone: true,
-			cursor: "grabbing"
-		}
-	};
-	return (0, zustand.createStore)()((set) => ({
-		...DEFAULT_PROPS,
-		...initProps,
-		setContainerElementRef: (containerElementRef) => {
-			set(() => ({ containerElementRef }));
-		}
-	}));
-};
 const PointsEditorContext = (0, react.createContext)(null);
-function PointsEditorProvider({ children, ...props }) {
-	const storeRef = (0, react.useRef)(null);
-	if (!storeRef.current) storeRef.current = createPointsEditorStore(props);
-	(0, react.useEffect)(() => {
-		if (storeRef.current) storeRef.current.setState(props);
-		else storeRef.current = createPointsEditorStore(props);
-	}, [props]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsEditorContext.Provider, {
-		value: storeRef.current,
-		children
-	});
-}
+const PointsEditorProvider = PointsEditorContext.Provider;
 function usePointsEditorContext(selector) {
-	const store = (0, react.useContext)(PointsEditorContext);
-	if (!store) throw new Error("Missing PointsEditorContext.Provider in the tree");
-	return (0, zustand.useStore)(store, selector);
+	const context = (0, react.useContext)(PointsEditorContext);
+	if (!context) throw new Error("Missing PointsEditorContext.Provider in the tree");
+	return selector ? selector(context) : context;
 }
 //#endregion
 //#region src/components/PointsEditor/Container.tsx
-function Container({ className, children, ...props }) {
-	const containerElementRef = (0, react.useRef)(null);
-	usePointsEditorContext((s) => s.setContainerElementRef)(containerElementRef);
+function Container({ children, className, ref, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: containerElementRef,
+		ref: useComposedRefs(ref, usePointsEditorContext((s) => s.containerRef)),
 		className: (0, clsx.default)("tremolo-points-editor-container", className),
 		...props,
 		children
 	});
 }
 //#endregion
-//#region src/hooks/useDragWithElement.ts
-function useDragWithElement({ baseElementRef, onDrag, onDragStart, onDragEnd }) {
-	const [dragging, setDragging] = (0, react.useState)(false);
-	const normalizedX = (0, react.useRef)(0);
-	const normalizedY = (0, react.useRef)(0);
-	const handleDrag = (0, react.useCallback)((event) => {
-		if (!baseElementRef.current || !dragging) return;
-		const isTouch = event instanceof TouchEvent;
-		if (isTouch && event.cancelable) event.preventDefault();
-		const { left, top, right, bottom } = baseElementRef.current.getBoundingClientRect();
-		const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
-		const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
-		const nx = (0, _tremolo_ui_functions.normalizeValue)(mouseX, left, right);
-		const ny = (0, _tremolo_ui_functions.normalizeValue)(mouseY, top, bottom);
-		normalizedX.current = nx;
-		normalizedY.current = ny;
-		onDrag(nx, ny);
-	}, [
-		onDrag,
-		baseElementRef,
-		dragging
-	]);
-	const refHandler = useRefCallbackEvent("touchmove", handleDrag, { passive: false }, [onDrag]);
-	const pointerDownHandler = (0, react.useCallback)((event) => {
-		setDragging(true);
-		handleDrag(event);
-		onDragStart?.(normalizedX.current, normalizedY.current);
-	}, [handleDrag, onDragStart]);
-	useEventListener(globalThis.window, "pointermove", handleDrag);
-	useEventListener(globalThis.window, "pointerup", () => {
-		if (!dragging) return;
-		setDragging(false);
-		onDragEnd?.(normalizedX.current, normalizedY.current);
-	});
-	return {
-		refHandler,
-		pointerDownHandler,
-		dragging
-	};
-}
-//#endregion
 //#region src/components/PointsEditor/Point.tsx
 function clampPoint(point, min, max) {
 	const { x, y } = point;
@@ -1501,48 +1177,88 @@ function clampPoint(point, min, max) {
 		y: (0, _tremolo_ui_functions.clamp)(y, min?.y ?? 0, max?.y ?? 1)
 	};
 }
-function Point({ value, min, max, size, width = 16, height = 16, color, disabled, readonly, onChange, onDragStart, onDragEnd, className, style, onPointerDown, ...props }) {
-	const containerElementRef = usePointsEditorContext((s) => s.containerElementRef);
-	const externalStyles = usePointsEditorContext((s) => s.externalStyles);
-	const __disabled = usePointsEditorContext((s) => s.disabled);
-	const __readonly = usePointsEditorContext((s) => s.readonly);
-	const { refHandler: touchMoveRefCallback, pointerDownHandler, dragging } = useDragWithElement({
-		baseElementRef: containerElementRef,
-		onDrag: (x, y) => {
+/**
+* A point is placed by its position within the container, so its value is a
+* position: 0..1 on each axis, with y growing downwards.
+*/
+const AXIS = {
+	min: 0,
+	max: 1
+};
+function Point({ value, min, max, size, width = 16, height = 16, color, disabled: _disabled, readonly: _readonly, wheel: _wheel, keyboard: _keyboard, onChange, onDragStart, onDragEnd, className, style, onPointerDown, onKeyDown, ...props }) {
+	const { containerRef, externalStyles, disabled: rootDisabled, readonly: rootReadonly, wheel: rootWheel, keyboard: rootKeyboard } = usePointsEditorContext();
+	const disabled = _disabled ?? rootDisabled;
+	const readonly = _readonly ?? rootReadonly;
+	const wheel = _wheel === void 0 ? rootWheel : _wheel;
+	const keyboard = _keyboard === void 0 ? rootKeyboard : _keyboard;
+	const [element, setElement] = (0, react.useState)(null);
+	const { refCallback: dragRefCallback, dragging } = useDragValue({
+		axis: AXIS,
+		baseElementRef: containerRef,
+		cursor: readonly ? void 0 : externalStyles.cursor,
+		onChange: ([x, y]) => {
 			if (readonly) return;
 			onChange?.(clampPoint({
 				x,
 				y
 			}, min, max));
 		},
-		onDragStart: (x, y) => {
+		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) => {
+		onDragEnd: ([x, y]) => {
 			if (readonly) return;
 			if (externalStyles.userSelectNone) removeUserSelectNone();
-			if (externalStyles.cursor) resetCursorStyle();
 			onDragEnd?.(clampPoint({
 				x,
 				y
 			}, min, max));
 		}
 	});
+	const nudge = (0, react.useCallback)((axis, direction, option) => {
+		const next = (0, _tremolo_ui_functions.applyDelta)(value[axis], direction, option, AXIS);
+		onChange?.(clampPoint({
+			...value,
+			[axis]: next
+		}, min, max));
+	}, [
+		value,
+		min,
+		max,
+		onChange
+	]);
+	useWheel((event) => {
+		if (!onChange || readonly || !wheel) return;
+		if (!element || element.ownerDocument.activeElement !== element) return;
+		event.preventDefault();
+		nudge(event.shiftKey ? "x" : "y", event.deltaY < 0 ? -1 : 1, wheel);
+	}, { target: containerRef });
+	const refCallback = useComposedRefs(dragRefCallback, setElement);
+	const handleKeyDown = (event) => {
+		if (!onChange || readonly || !keyboard) return;
+		const key = event.key;
+		if ([
+			"ArrowRight",
+			"ArrowLeft",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(key)) {
+			event.preventDefault();
+			nudge(key === "ArrowRight" || key === "ArrowLeft" ? "x" : "y", key === "ArrowLeft" || key === "ArrowUp" ? -1 : 1, keyboard);
+		}
+	};
 	const colors = { "--color": color };
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: (div) => {
-			touchMoveRefCallback(div);
-		},
+		ref: refCallback,
 		className: (0, clsx.default)("tremolo-points-editor-point", className),
 		tabIndex: 0,
-		"aria-disabled": disabled != void 0 ? disabled : __disabled,
-		"aria-readonly": readonly != void 0 ? readonly : __readonly,
+		"aria-disabled": disabled,
+		"aria-readonly": readonly,
 		"data-dragging": dragging,
 		style: {
 			...colors,
@@ -1552,34 +1268,52 @@ function Point({ value, min, max, size, width = 16, height = 16, color, disabled
 			top: `${value.y * 100}%`,
 			...style
 		},
-		onPointerDown: (event) => {
-			pointerDownHandler(event);
-			onPointerDown?.(event);
+		onPointerDown,
+		onKeyDown: (event) => {
+			handleKeyDown(event);
+			onKeyDown?.(event);
 		},
 		...props
 	});
 }
 //#endregion
 //#region src/components/PointsEditor/index.tsx
-const defaultExternalStyles$2 = {
-	userSelectNone: true,
-	cursor: "grabbing"
-};
+/**
+* A point moves over 0..1 in both axes, so a nudge of 0.01 crosses the editor
+* in a hundred steps whatever its pixel size.
+*/
+const DEFAULT_INPUT_EVENT_OPTION = ["normalized", .01];
 /**
 * Multiple Point Controller
 */
 const PointsEditor = {
-	Root: (0, react.forwardRef)(({ width = 200, height = 100, disabled = false, readonly = false, externalStyles: _externalStyles, style, className, children, ...props }, forwardedRef) => {
+	Root: (0, react.forwardRef)(({ width = 200, height = 100, disabled = false, readonly = false, wheel = DEFAULT_INPUT_EVENT_OPTION, keyboard = DEFAULT_INPUT_EVENT_OPTION, externalStyles, style, className, children, ...props }, forwardedRef) => {
+		const containerRef = (0, react.useRef)(null);
+		const { userSelectNone = true, cursor = "grabbing" } = externalStyles ?? {};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsEditorProvider, {
-			disabled,
-			readonly,
-			externalStyles: {
-				...defaultExternalStyles$2,
-				..._externalStyles
-			},
+			value: (0, react.useMemo)(() => ({
+				disabled,
+				readonly,
+				wheel,
+				keyboard,
+				externalStyles: {
+					userSelectNone,
+					cursor
+				},
+				containerRef
+			}), [
+				disabled,
+				readonly,
+				wheel,
+				keyboard,
+				userSelectNone,
+				cursor
+			]),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: forwardedRef,
 				className: (0, clsx.default)("tremolo-points-editor", className),
+				"aria-disabled": disabled,
+				"aria-readonly": readonly,
 				style: {
 					width,
 					height,
@@ -1596,59 +1330,33 @@ const PointsEditor = {
 };
 //#endregion
 //#region src/components/Slider/context.tsx
-const createSliderStore = (initProps) => {
-	const DEFAULT_PROPS = {
-		min: 0,
-		max: 0,
-		step: 0,
-		skew: 0,
-		vertical: false,
-		reverse: false,
-		disabled: false,
-		readonly: false
-	};
-	return (0, zustand.createStore)()(() => ({
-		...DEFAULT_PROPS,
-		...initProps
-	}));
-};
 const SliderContext = (0, react.createContext)(null);
-function SliderProvider({ children, ...props }) {
-	const storeRef = (0, react.useRef)(null);
-	if (!storeRef.current) storeRef.current = createSliderStore(props);
-	(0, react.useEffect)(() => {
-		if (storeRef.current) storeRef.current.setState(props);
-		else storeRef.current = createSliderStore(props);
-	}, [props]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderContext.Provider, {
-		value: storeRef.current,
-		children
-	});
-}
+const SliderProvider = SliderContext.Provider;
 function useSliderContext(selector) {
-	const store = (0, react.useContext)(SliderContext);
-	if (!store) throw new Error("Missing SliderContext.Provider in the tree");
-	return (0, zustand.useStore)(store, selector);
+	const context = (0, react.useContext)(SliderContext);
+	if (!context) throw new Error("Missing SliderContext.Provider in the tree");
+	return selector ? selector(context) : context;
 }
 //#endregion
-//#region src/components/Slider/ScaleOption.tsx
-function ScaleOption({ value, type = "mark-number", label, thickness = 1, length = "0.5rem", gap = 2, labelWidth, classes, styles, className, style, ...props }) {
+//#region src/components/Slider/MarksOption.tsx
+function MarksOption({ 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 scale = useSliderContext((s) => s.scale);
 	const vertical = useSliderContext((s) => s.vertical);
 	const reverse = useSliderContext((s) => s.reverse);
-	const calcPercent = (0, react.useCallback)((rawValue) => {
-		return (0, _tremolo_ui_functions.toFixed)((0, _tremolo_ui_functions.xor)(vertical, reverse) ? 100 - (0, _tremolo_ui_functions.normalizeValue)(rawValue, min, max, skew) * 100 : (0, _tremolo_ui_functions.normalizeValue)(rawValue, min, max, skew) * 100);
+	const calcPercent = (0, react.useCallback)((value) => {
+		const percent = scale.normalize(value, min, max) * 100;
+		return (0, _tremolo_ui_functions.toFixed)((0, _tremolo_ui_functions.xor)(vertical, reverse) ? 100 - percent : percent);
 	}, [
 		vertical,
 		reverse,
 		max,
 		min,
-		skew
+		scale
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("tremolo-slider-scale-option", className),
+		className: (0, clsx.default)("tremolo-slider-marks-option", className),
 		style: {
 			left: !vertical ? `${calcPercent(value)}%` : void 0,
 			top: vertical ? `${calcPercent(value)}%` : void 0,
@@ -1657,7 +1365,7 @@ function ScaleOption({ value, type = "mark-number", label, thickness = 1, length
 		"data-vertical": vertical,
 		...props,
 		children: [type != "number" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("tremolo-slider-scale-option-mark", classes?.mark),
+			className: (0, clsx.default)("tremolo-slider-marks-option-mark", classes?.mark),
 			style: {
 				width: !vertical ? thickness : length,
 				height: vertical ? thickness : length,
@@ -1667,7 +1375,7 @@ function ScaleOption({ value, type = "mark-number", label, thickness = 1, length
 			},
 			"data-vertical": vertical
 		}), type != "mark" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("tremolo-slider-scale-option-label", classes?.label),
+			className: (0, clsx.default)("tremolo-slider-marks-option-label", classes?.label),
 			style: {
 				width: labelWidth,
 				...styles?.label
@@ -1692,8 +1400,8 @@ function generateOptionsList(options, min, max, step) {
 	return optionsList;
 }
 //#endregion
-//#region src/components/Slider/Scale.tsx
-function Scale({ gap = 6, options, children, className, style, ...props }) {
+//#region src/components/Slider/Marks.tsx
+function Marks({ 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);
@@ -1702,7 +1410,7 @@ function Scale({ gap = 6, options, children, className, style, ...props }) {
 	const optionsList = options ? generateOptionsList(options, min, max, step) : [];
 	if ((0, _tremolo_ui_functions.xor)(vertical, reverse)) optionsList.reverse();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("tremolo-slider-scale", className),
+		className: (0, clsx.default)("tremolo-slider-marks", className),
 		style: {
 			marginLeft: vertical ? gap : void 0,
 			marginTop: !vertical ? gap : void 0,
@@ -1710,72 +1418,70 @@ function Scale({ gap = 6, options, children, className, style, ...props }) {
 		},
 		...props,
 		children: options ? optionsList.map(({ value, type }, index) => {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScaleOption, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarksOption, {
 				value,
 				type
 			}, index);
 		}) : children
 	});
 }
-const Thumb$1 = (0, react.forwardRef)(({ size, width = 22, height = 22, color, children, className, style, __percent }, ref) => {
-	const wrapperRef = (0, react.useRef)(null);
-	const vertical = useSliderContext((s) => s.vertical);
-	const disabled = useSliderContext((s) => s.disabled);
-	const readonly = useSliderContext((s) => s.readonly);
-	(0, react.useImperativeHandle)(ref, () => {
-		return {
-			focus() {
-				wrapperRef.current?.focus();
-			},
-			blur() {
-				wrapperRef.current?.blur();
-			}
-		};
-	}, []);
+//#endregion
+//#region src/components/Slider/Thumb.tsx
+function Thumb$1({ color, children, className, style, ref }) {
+	const elementRef = (0, react.useRef)(null);
+	const { vertical, disabled, readonly, percent, thumbRef } = useSliderContext();
+	const methods = () => ({
+		focus() {
+			elementRef.current?.focus();
+		},
+		blur() {
+			elementRef.current?.blur();
+		}
+	});
+	(0, react.useImperativeHandle)(ref, methods, []);
+	(0, react.useImperativeHandle)(thumbRef, methods, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "tremolo-slider-thumb-wrapper",
 		style: {
-			top: vertical ? `${__percent}%` : "50%",
-			left: !vertical ? `${__percent}%` : "50%"
+			top: vertical ? `${percent}%` : "50%",
+			left: !vertical ? `${percent}%` : "50%"
 		},
 		children: children ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref: wrapperRef,
+			ref: elementRef,
 			className: (0, clsx.default)("tremolo-slider-thumb", className),
 			tabIndex: 0,
 			"aria-disabled": disabled,
 			"aria-readonly": readonly,
 			style: {
 				"--color": color,
-				width: size ?? width,
-				height: size ?? height,
 				...style
 			}
 		})
 	});
-});
-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);
+}
+function Track({ length = 140, thickness = 10, active, inactive, children, className, style, defaultStyle = true, ref, ...props }) {
+	const { vertical, reverse, disabled, percent, trackRef } = useSliderContext();
+	const composedRef = useComposedRefs(ref, trackRef);
 	const direction = vertical ? "bottom" : "right";
 	const colors = {
 		"--active": active,
 		"--inactive": inactive
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: composedRef,
 		className: (0, clsx.default)("tremolo-slider-track", className),
 		"aria-disabled": disabled,
 		"data-vertical": vertical,
 		style: !defaultStyle ? style : {
 			...colors,
-			background: (0, _tremolo_ui_functions.xor)(vertical, reverse) ? `linear-gradient(to ${direction}, var(--inactive) ${__percent}%, var(--active) ${__percent}%)` : `linear-gradient(to ${direction}, var(--active) ${__percent}%, var(--inactive) ${__percent}%)`,
+			background: (0, _tremolo_ui_functions.xor)(vertical, reverse) ? `linear-gradient(to ${direction}, var(--inactive) ${percent}%, var(--active) ${percent}%)` : `linear-gradient(to ${direction}, var(--active) ${percent}%, var(--inactive) ${percent}%)`,
 			borderRadius: (0, _tremolo_ui_functions.styleHelper)(thickness, "/", 2),
 			width: !vertical ? length : thickness,
 			height: vertical ? length : thickness,
 			...style
 		},
 		...props,
-		children: [children, __thumb]
+		children
 	});
 }
 //#endregion
@@ -1785,55 +1491,37 @@ const defaultExternalStyles$1 = {
 	cursor: "pointer"
 };
 /**
+* The wheel only acts while the focus is inside, so that scrolling a page past
+* the control does not change its value.
+*/
+const WHEEL_OPTIONS$1 = { requireFocus: true };
+/**
 * Customizable slider
 */
 const Slider = {
-	Root: (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, vertical = false, reverse = false, externalStyles: _externalStyles, wheel = ["raw", 1], keyboard = ["raw", 1], disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown, ...props }, forwardedRef) => {
-		const trackElementRef = (0, react.useRef)(null);
+	Root: (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, 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 trackRef = (0, react.useRef)(null);
 		const thumbRef = (0, react.useRef)(null);
 		const externalStyles = {
 			...defaultExternalStyles$1,
 			..._externalStyles
 		};
-		const p = (0, _tremolo_ui_functions.toFixed)((0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew) * 100);
+		const p = (0, _tremolo_ui_functions.toFixed)(scale.normalize(value, min, max) * 100);
 		const rev = (0, _tremolo_ui_functions.toFixed)(100 - p);
 		const displayReversed = (0, react.useMemo)(() => (0, _tremolo_ui_functions.xor)(vertical, reverse), [vertical, reverse]);
 		const percent = displayReversed ? rev : p;
-		let trackProps = {};
-		let thumbProps = {};
-		let scaleComponent = void 0;
-		if (children != void 0) react.default.Children.forEach(children, (child) => {
-			if (react.default.isValidElement(child)) if (child.type == Thumb$1) thumbProps = child.props;
-			else if (child.type == Track) trackProps = child.props;
-			else if (child.type == Scale) scaleComponent = child;
-			else throw new Error("only <SliderThumb> or <SliderTrack>");
-			else throw new Error("children is an invalid element.");
-		});
-		const onDrag = (0, react.useCallback)((nx, ny) => {
-			if (!onChange || readonly) return;
-			const n = vertical ? ny : nx;
-			onChange((0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(displayReversed ? 1 - n : n, min, max, skew), step), min, max));
-		}, [
-			displayReversed,
-			max,
+		const axis = (0, react.useMemo)(() => ({
 			min,
-			onChange,
-			readonly,
-			skew,
-			step,
-			vertical
-		]);
-		const updateValueByEvent = (0, react.useCallback)((eventType, x) => {
-			let newValue;
-			if (eventType == "normalized") newValue = (0, _tremolo_ui_functions.rawValue)((0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew) + x, min, max, skew);
-			else newValue = value + x;
-			return (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)(newValue, step), min, max);
-		}, [
 			max,
+			step,
+			scale,
+			reverse: displayReversed
+		}), [
 			min,
-			skew,
+			max,
 			step,
-			value
+			scale,
+			displayReversed
 		]);
 		const handleKeyDown = (0, react.useCallback)((event) => {
 			if (!keyboard || !onChange || readonly) return;
@@ -1845,51 +1533,76 @@ const Slider = {
 				"ArrowDown"
 			].includes(key)) {
 				event.preventDefault();
-				let x = key == "ArrowRight" || key == "ArrowUp" ? keyboard[1] : -keyboard[1];
-				if (reverse) x *= -1;
-				onChange(updateValueByEvent(keyboard[0], x));
+				let direction = key == "ArrowRight" || key == "ArrowUp" ? 1 : -1;
+				if (reverse) direction *= -1;
+				onChange((0, _tremolo_ui_functions.applyDelta)(value, direction, keyboard, axis));
 			}
 		}, [
 			keyboard,
 			onChange,
 			readonly,
 			reverse,
-			updateValueByEvent
+			value,
+			axis
 		]);
-		const { refHandler: touchMoveRefCallback, pointerDownHandler } = useDragWithElement({
-			baseElementRef: trackElementRef,
-			onDrag,
-			onDragStart: (nx, ny) => {
+		const valueOf = (v) => v[vertical ? 1 : 0];
+		const { refCallback: dragRefCallback } = useDragValue({
+			axis,
+			baseElementRef: trackRef,
+			cursor: readonly ? void 0 : externalStyles.cursor,
+			updateOnPointerDown: true,
+			onChange: (v) => {
+				if (readonly) return;
+				onChange?.(valueOf(v));
+			},
+			onDragStart: (v) => {
 				if (readonly) return;
 				if (externalStyles.userSelectNone) addUserSelectNone();
-				if (externalStyles.cursor) setCursorStyle(externalStyles.cursor);
 				thumbRef.current?.focus();
-				onDragStart?.((0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(vertical ? ny : nx, min, max, skew), step), min, max));
+				onDragStart?.(valueOf(v));
 			},
-			onDragEnd: (nx, ny) => {
+			onDragEnd: (v) => {
 				if (readonly) return;
 				if (externalStyles.userSelectNone) removeUserSelectNone();
-				if (externalStyles.cursor) resetCursorStyle();
-				onDragEnd?.((0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(vertical ? ny : nx, min, max, skew), step), min, max));
+				onDragEnd?.(valueOf(v));
 			}
 		});
-		const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
+		const rootRefCallback = useComposedRefs(dragRefCallback, useWheel((event) => {
 			if (!wheel || !onChange || readonly) return;
 			event.preventDefault();
-			let x;
-			if (!vertical && event.deltaX != 0) x = event.deltaX > 0 ? wheel[1] : -wheel[1];
+			let direction;
+			if (!vertical && event.deltaX != 0) direction = event.deltaX > 0 ? 1 : -1;
 			else {
 				if (event.deltaY == 0) return;
-				x = event.deltaY > 0 ? -wheel[1] : wheel[1];
+				direction = event.deltaY > 0 ? -1 : 1;
 			}
-			if (vertical && reverse) x *= -1;
-			onChange(updateValueByEvent(wheel[0], x));
-		}, { passive: false }, [
-			wheel,
+			if (vertical && reverse) direction *= -1;
+			onChange((0, _tremolo_ui_functions.applyDelta)(value, direction, wheel, axis));
+		}, WHEEL_OPTIONS$1));
+		const context = (0, react.useMemo)(() => ({
+			value,
+			min,
+			max,
+			step,
+			scale,
 			vertical,
+			reverse,
+			disabled,
 			readonly,
-			onChange,
-			updateValueByEvent
+			percent,
+			trackRef,
+			thumbRef
+		}), [
+			value,
+			min,
+			max,
+			step,
+			scale,
+			vertical,
+			reverse,
+			disabled,
+			readonly,
+			percent
 		]);
 		(0, react.useImperativeHandle)(forwardedRef, () => {
 			return {
@@ -1902,20 +1615,10 @@ const Slider = {
 			};
 		}, []);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderProvider, {
-			min,
-			max,
-			step,
-			skew,
-			vertical,
-			reverse,
-			disabled,
-			readonly,
+			value: context,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: (0, clsx.default)("tremolo-slider", className),
-				ref: (div) => {
-					wheelRefCallback(div);
-					touchMoveRefCallback(div);
-				},
+				ref: rootRefCallback,
 				tabIndex: -1,
 				role: "slider",
 				"aria-valuenow": value,
@@ -1924,14 +1627,9 @@ const Slider = {
 				"aria-orientation": vertical ? "vertical" : "horizontal",
 				"aria-disabled": disabled,
 				"aria-readonly": readonly,
-				style: {
-					margin: `calc(${(0, _tremolo_ui_functions.styleHelper)(thumbProps?.size ?? 22)} / 2)`,
-					...style
-				},
-				onPointerDown: (event) => {
-					pointerDownHandler(event);
-					onPointerDown?.(event);
-				},
+				"data-vertical": vertical,
+				style,
+				onPointerDown,
 				onKeyDown: (event) => {
 					handleKeyDown(event);
 					onKeyDown?.(event);
@@ -1945,93 +1643,30 @@ const Slider = {
 					onBlur?.(event);
 				},
 				...props,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					style: {
-						display: "flex",
-						flexDirection: vertical ? "row" : "column",
-						width: !vertical ? "100%" : void 0,
-						height: vertical ? "100%" : void 0
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "tremolo-slider-track-wrapper",
-						ref: trackElementRef,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Track, {
-							__percent: percent,
-							__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb$1, {
-								ref: thumbRef,
-								__percent: percent,
-								...thumbProps
-							}),
-							...trackProps
-						})
-					}), scaleComponent]
-				})
+				children
 			})
 		});
 	}),
 	Thumb: Thumb$1,
 	Track,
-	Scale,
-	ScaleOption
+	Marks,
+	MarksOption
 };
 //#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
-/**
-* @example
-* <WheelObserver
-*   onWheel={(event) => {
-*     event.preventDefault()
-*     console.log(event.deltaY)
-*   }
-* >
-*   <div>Wheel here</div>
-* </WheelObserver>
-*/
-function WheelObserver(props) {
-	const { as: Component = "div", children, onWheel, ref, ...attributes } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-		ref: composeRefs(ref, useRefCallbackEvent("wheel", (event) => {
-			if (onWheel) onWheel(event);
-		}, { passive: false }, [onWheel])),
-		...attributes,
-		children
-	});
+//#region src/components/XYPad/context.tsx
+const XYPadContext = (0, react.createContext)(null);
+const XYPadProvider = XYPadContext.Provider;
+function useXYPadContext(selector) {
+	const context = (0, react.useContext)(XYPadContext);
+	if (!context) throw new Error("Missing XYPadContext.Provider in the tree");
+	return selector ? selector(context) : context;
 }
 //#endregion
 //#region src/components/XYPad/Area.tsx
-function Area({ width = 120, height = 120, color, children, className, style, __thumb, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+function Area({ width = 120, height = 120, color, children, className, style, ref, ...props }) {
+	const { areaRef } = useXYPadContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: useComposedRefs(ref, areaRef),
 		className: (0, clsx.default)("tremolo-xy-pad-area", className),
 		style: {
 			"--color": color,
@@ -2040,121 +1675,105 @@ function Area({ width = 120, height = 120, color, children, className, style, __
 			...style
 		},
 		...props,
-		children: [children, __thumb]
+		children
 	});
 }
 //#endregion
 //#region src/components/XYPad/Thumb.tsx
-const Thumb = (0, react.forwardRef)(({ size, width = 22, height = 22, color, children, wrapperClassName, wrapperStyle, className, style, __disabled, __readonly, __css, ...props }, ref) => {
-	const wrapperRef = (0, react.useRef)(null);
-	(0, react.useImperativeHandle)(ref, () => {
-		return {
-			focus() {
-				wrapperRef.current?.focus();
-			},
-			blur() {
-				wrapperRef.current?.blur();
-			}
-		};
-	}, []);
+function Thumb({ color, children, wrapperClassName, wrapperStyle, className, style, ref, ...props }) {
+	const elementRef = (0, react.useRef)(null);
+	const { disabled, readonly, percent, thumbRef } = useXYPadContext();
+	const methods = () => ({
+		focus() {
+			elementRef.current?.focus();
+		},
+		blur() {
+			elementRef.current?.blur();
+		}
+	});
+	(0, react.useImperativeHandle)(ref, methods, []);
+	(0, react.useImperativeHandle)(thumbRef, methods, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, clsx.default)("tremolo-xy-pad-thumb-wrapper", wrapperClassName),
 		style: {
-			...__css,
+			left: `${percent[0]}%`,
+			top: `${percent[1]}%`,
 			...wrapperStyle
 		},
 		...props,
 		children: children ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref: wrapperRef,
+			ref: elementRef,
 			className: (0, clsx.default)("tremolo-xy-pad-thumb", className),
 			tabIndex: 0,
-			"aria-disabled": __disabled,
-			"aria-readonly": __readonly,
+			"aria-disabled": disabled,
+			"aria-readonly": readonly,
 			style: {
 				"--color": color,
-				width: size ?? width,
-				height: size ?? height,
 				...style
 			}
 		})
 	});
-});
+}
 //#endregion
 //#region src/components/XYPad/index.tsx
-const defaultValueOptions = {
-	skew: 1,
-	step: 1,
-	reverse: false,
-	wheel: ["raw", 1],
-	keyboard: ["raw", 1]
-};
 const defaultExternalStyles = {
 	userSelectNone: true,
 	cursor: "pointer"
 };
 /**
+* The wheel only acts while the focus is inside, so that scrolling a page past
+* the control does not change its value.
+*/
+const WHEEL_OPTIONS = { requireFocus: true };
+/**
 * Simple XYPad
 */
 const XYPad = {
-	Root: (0, react.forwardRef)(({ x: _x, y: _y, className, style, externalStyles: _externalStyles, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children, ...props }, forwardedRef) => {
-		const x = (0, react.useMemo)(() => {
-			return {
-				...defaultValueOptions,
-				..._x
-			};
-		}, [_x]);
-		const y = (0, react.useMemo)(() => {
-			return {
-				...defaultValueOptions,
-				..._y
-			};
-		}, [_y]);
+	Root: (0, react.forwardRef)(({ value, min: _min, max: _max, step: _step = 1, scale: _scale = _tremolo_ui_functions.linearScale, reverse: _reverse = false, wheel = ["raw", 1], keyboard = ["raw", 1], className, style, externalStyles: _externalStyles, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children, ...props }, forwardedRef) => {
 		const rootRef = (0, react.useRef)(null);
-		const areaElementRef = (0, react.useRef)(null);
+		const areaRef = (0, react.useRef)(null);
 		const thumbRef = (0, react.useRef)(null);
 		const externalStyles = {
 			...defaultExternalStyles,
 			..._externalStyles
 		};
-		const nx = (0, _tremolo_ui_functions.normalizeValue)(x.value, x.min, x.max, x.skew);
-		const ny = (0, _tremolo_ui_functions.normalizeValue)(y.value, y.min, y.max, y.skew);
-		const percentX = (0, _tremolo_ui_functions.toFixed)((x.reverse ? 1 - nx : nx) * 100);
-		const percentY = (0, _tremolo_ui_functions.toFixed)((y.reverse ? 1 - ny : ny) * 100);
-		let areaProps = {};
-		let thumbProps = {};
-		if (children != void 0) react.default.Children.forEach(children, (child) => {
-			if (react.default.isValidElement(child)) if (child.type == Thumb) thumbProps = child.props;
-			else if (child.type == Area) areaProps = child.props;
-			else throw new Error("only <XYPadThumb> or <XYPadArea>");
-			else throw new Error("children is an invalid element.");
-		});
-		const onDrag = (0, react.useCallback)((nx, ny) => {
-			if (!onChange || readonly) return;
-			const vx = (0, _tremolo_ui_functions.rawValue)(x.reverse ? 1 - nx : nx, x.min, x.max, x.skew);
-			const vy = (0, _tremolo_ui_functions.rawValue)(y.reverse ? 1 - ny : ny, y.min, y.max, y.skew);
-			onChange((0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)(vx, x.step), x.min, x.max), (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)(vy, y.step), y.min, y.max));
+		const min = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_min), [_min]);
+		const max = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_max), [_max]);
+		const step = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_step), [_step]);
+		const scale = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_scale), [_scale]);
+		const reverse = (0, react.useMemo)(() => (0, _tremolo_ui_dom.toXY)(_reverse), [_reverse]);
+		const percent = (0, react.useMemo)(() => {
+			const normalized = [0, 1].map((i) => scale[i].normalize(value[i], min[i], max[i]));
+			return [0, 1].map((i) => (0, _tremolo_ui_functions.toFixed)((reverse[i] ? 1 - normalized[i] : normalized[i]) * 100));
 		}, [
-			onChange,
-			readonly,
-			x.max,
-			x.min,
-			x.reverse,
-			x.skew,
-			x.step,
-			y.max,
-			y.min,
-			y.reverse,
-			y.skew,
-			y.step
+			value,
+			min,
+			max,
+			scale,
+			reverse
+		]);
+		const axis = (0, react.useMemo)(() => [0, 1].map((i) => ({
+			min: min[i],
+			max: max[i],
+			step: step[i],
+			scale: scale[i],
+			reverse: reverse[i]
+		})), [
+			min,
+			max,
+			step,
+			scale,
+			reverse
+		]);
+		const withAxis = (0, react.useCallback)((axis, next) => axis == 0 ? [next, value[1]] : [value[0], next], [value]);
+		/** @param i 0 = x, 1 = y */
+		const nudge = (0, react.useCallback)((i, direction, option) => withAxis(i, (0, _tremolo_ui_functions.applyDelta)(value[i], direction, option, axis[i])), [
+			value,
+			axis,
+			withAxis
 		]);
-		const updateValueByEvent = (0, react.useCallback)((eventType, target, x) => {
-			let v;
-			if (eventType == "normalized") v = (0, _tremolo_ui_functions.rawValue)((0, _tremolo_ui_functions.normalizeValue)(target.value, target.min, target.max, target.skew) + x, target.min, target.max, target.skew);
-			else v = target.value + x;
-			return (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)(v, target.step), target.min, target.max);
-		}, []);
 		const handleKeyDown = (0, react.useCallback)((event) => {
-			if (!onChange || readonly) return;
+			if (!onChange || readonly || !keyboard) return;
 			const key = event.key;
 			if ([
 				"ArrowRight",
@@ -2162,62 +1781,72 @@ const XYPad = {
 				"ArrowUp",
 				"ArrowDown"
 			].includes(key)) {
-				const isHorizontal = key == "ArrowRight" || key == "ArrowLeft";
-				const target = isHorizontal ? x : y;
-				if (!target.keyboard) return;
+				const i = key == "ArrowRight" || key == "ArrowLeft" ? 0 : 1;
 				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);
+				let direction = 1;
+				if (key == "ArrowLeft" || key == "ArrowUp") direction *= -1;
+				if (reverse[i]) direction *= -1;
+				onChange(nudge(i, direction, keyboard));
 			}
 		}, [
 			onChange,
 			readonly,
-			x,
-			y,
-			updateValueByEvent
+			keyboard,
+			reverse,
+			nudge
 		]);
-		const { refHandler: touchMoveRefCallback, pointerDownHandler } = useDragWithElement({
-			baseElementRef: areaElementRef,
-			onDrag,
-			onDragStart: (nx, ny) => {
+		const { refCallback: dragRefCallback } = useDragValue({
+			axis,
+			baseElementRef: areaRef,
+			updateOnPointerDown: true,
+			cursor: readonly ? void 0 : externalStyles.cursor,
+			onChange: (v) => {
+				if (readonly) return;
+				onChange?.(v);
+			},
+			onDragStart: (v) => {
 				if (readonly) return;
 				if (externalStyles.userSelectNone) addUserSelectNone();
-				if (externalStyles.cursor) setCursorStyle(externalStyles.cursor);
 				thumbRef.current?.focus();
-				const valueX = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
-				const valueY = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
-				onDragStart?.(valueX, valueY);
+				onDragStart?.(v);
 			},
-			onDragEnd: (nx, ny) => {
+			onDragEnd: (v) => {
 				if (readonly) return;
 				if (externalStyles.userSelectNone) removeUserSelectNone();
-				if (externalStyles.cursor) resetCursorStyle();
-				const valueX = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(nx, x.min, x.max, x.skew), x.step), x.min, x.max);
-				const valueY = (0, _tremolo_ui_functions.clamp)((0, _tremolo_ui_functions.stepValue)((0, _tremolo_ui_functions.rawValue)(ny, y.min, y.max, y.skew), y.step), y.min, y.max);
-				onDragEnd?.(valueX, valueY);
+				onDragEnd?.(v);
 			}
 		});
-		const wheelRefCallback = useRefCallbackEvent("wheel", (event) => {
-			if (!onChange || readonly) return;
-			const target = event.shiftKey ? x : y;
-			if (!target.wheel) return;
+		const rootRefCallback = useComposedRefs(rootRef, dragRefCallback, useWheel((event) => {
+			if (!onChange || readonly || !wheel) return;
+			const i = event.shiftKey ? 0 : 1;
 			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,
+			let direction = 1;
+			if (event.deltaY < 0) direction *= -1;
+			if (reverse[i]) direction *= -1;
+			onChange(nudge(i, direction, wheel));
+		}, WHEEL_OPTIONS));
+		const context = (0, react.useMemo)(() => ({
+			value,
+			min,
+			max,
+			step,
+			scale,
+			reverse,
+			disabled,
+			readonly,
+			percent,
+			areaRef,
+			thumbRef
+		}), [
+			value,
+			min,
+			max,
+			step,
+			scale,
+			reverse,
+			disabled,
 			readonly,
-			updateValueByEvent
+			percent
 		]);
 		(0, react.useImperativeHandle)(forwardedRef, () => {
 			return {
@@ -2230,51 +1859,30 @@ const XYPad = {
 				original: rootRef
 			};
 		}, []);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("tremolo-xy-pad", className),
-			ref: composeRefs(rootRef, wheelRefCallback, touchMoveRefCallback),
-			tabIndex: -1,
-			"aria-disabled": disabled,
-			"aria-readonly": readonly,
-			style: {
-				margin: `calc(${(0, _tremolo_ui_functions.styleHelper)(thumbProps?.size ?? 22)} / 2)`,
-				cursor: readonly ? "not-allowed" : "pointer",
-				WebkitTapHighlightColor: "transparent",
-				...style
-			},
-			onPointerDown: (event) => {
-				pointerDownHandler(event);
-				onPointerDown?.(event);
-			},
-			onKeyDown: (event) => {
-				handleKeyDown(event);
-				onKeyDown?.(event);
-			},
-			onFocus: (event) => {
-				thumbRef.current?.focus();
-				onFocus?.(event);
-			},
-			onBlur: (event) => {
-				thumbRef.current?.blur();
-				onBlur?.(event);
-			},
-			...props,
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYPadProvider, {
+			value: context,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "tremolo-xy-pad-area-wrapper",
-				ref: areaElementRef,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Area, {
-					__thumb: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb, {
-						ref: thumbRef,
-						__disabled: disabled,
-						__readonly: readonly,
-						__css: {
-							top: `${percentY}%`,
-							left: `${percentX}%`
-						},
-						...thumbProps
-					}),
-					...areaProps
-				})
+				className: (0, clsx.default)("tremolo-xy-pad", className),
+				ref: rootRefCallback,
+				tabIndex: -1,
+				"aria-disabled": disabled,
+				"aria-readonly": readonly,
+				style,
+				onPointerDown,
+				onKeyDown: (event) => {
+					handleKeyDown(event);
+					onKeyDown?.(event);
+				},
+				onFocus: (event) => {
+					thumbRef.current?.focus();
+					onFocus?.(event);
+				},
+				onBlur: (event) => {
+					thumbRef.current?.blur();
+					onBlur?.(event);
+				},
+				...props,
+				children
 			})
 		});
 	}),
@@ -2347,7 +1955,6 @@ function useMIDIMessage(midiAccess, onMIDIMessage) {
 }
 //#endregion
 exports.AnimationCanvas = AnimationCanvas;
-exports.DragObserver = DragObserver;
 exports.Knob = Knob;
 Object.defineProperty(exports, "NOT_SUPPORTED", {
 	enumerable: true,
@@ -2366,19 +1973,20 @@ exports.Piano = Piano;
 exports.PointsEditor = PointsEditor;
 exports.SHORTCUTS = SHORTCUTS;
 exports.Slider = Slider;
-exports.WheelObserver = WheelObserver;
 exports.XYPad = XYPad;
 exports.clampPoint = clampPoint;
-exports.getNoteRangeArray = getNoteRangeArray;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useDrag = useDrag;
-exports.useDragWithElement = useDragWithElement;
+exports.useDragValue = useDragValue;
 exports.useEventListener = useEventListener;
 exports.useInterval = useInterval;
 exports.useLongPress = useLongPress;
 exports.useMIDIAccess = useMIDIAccess;
 exports.useMIDIInput = useMIDIInput;
 exports.useMIDIMessage = useMIDIMessage;
+exports.useNumberInputContext = useNumberInputContext;
+exports.usePointsEditorContext = usePointsEditorContext;
 exports.useSliderContext = useSliderContext;
+exports.useWheel = useWheel;
 
 //# sourceMappingURL=index.cjs.map