@tremolo-ui/react 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -16,156 +16,200 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));
 //#endregion
-let clsx = require("clsx");
-clsx = __toESM(clsx);
+const require_compose_refs = require("./compose-refs.cjs");
 let react = require("react");
-react = __toESM(react);
+react = __toESM(react, 1);
+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 _tremolo_ui_dom = require("@tremolo-ui/dom");
-let zustand = require("zustand");
-//#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
-		});
-	}, [draw, animate]);
+/**
+* A simple animatable canvas with requestAnimationFrame()
+*/
+const AnimationCanvas = /* @__PURE__ */ (0, react.forwardRef)(function AnimationCanvas({ draw, init, animate = true, options, reduceFlickering = true, width = 100, height = 100, resizable = false, className, onContextMenu = (event) => event.preventDefault(), ...props }, forwardedRef) {
+	const [node, setNode] = (0, react.useState)(null);
+	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, setNode);
+	const latest = (0, react.useRef)({
+		draw,
+		init,
+		animate,
+		width,
+		height,
+		reduceFlickering,
+		options
+	});
+	const instanceRef = (0, react.useRef)(null);
 	(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, {
+		latest.current = {
+			draw,
+			init,
+			animate,
+			width,
+			height,
+			reduceFlickering,
+			options
+		};
+		instanceRef.current?.update({
+			animate,
+			size: {
 				width,
 				height
-			});
-			const now = performance.now();
-			deltaMemoRef.current = now;
-			startTimeRef.current = now;
-			loop(context, widthRef, heightRef, -1);
+			},
+			reduceFlickering
+		});
+	});
+	(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,
+			resizable,
+			contextAttributes: current.options
+		});
+		instanceRef.current = instance;
+		return () => {
+			instanceRef.current = null;
+			instance.destroy();
 		};
-		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);
-			};
-		}
-	}, [
-		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", {
-		className: (0, clsx.default)("tremolo-animation-canvas", className),
-		width: relativeSize ? 0 : _width,
-		height: relativeSize ? 0 : _height,
-		ref: canvasRef,
+	}, [node, resizable]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+		className,
+		ref: composedRef,
 		onContextMenu,
 		...props
-	}), relativeSize && reduceFlickering && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
-		style: { display: "none" },
-		ref: memoCanvasRef
-	})] });
+	});
+});
+//#endregion
+//#region src/hooks/_internal/useCheckSteps.ts
+/** Positions probed across the travel. The ends are left out so that the
+* clamp at `min` and `max` cannot be mistaken for a press that does nothing. */
+const PROBES = [
+	.1,
+	.2,
+	.3,
+	.4,
+	.5,
+	.6,
+	.7,
+	.8,
+	.9
+];
+const NONE = {
+	shiftKey: false,
+	altKey: false,
+	ctrlKey: false,
+	metaKey: false
+};
+const MODIFIER_STATE = {
+	shift: {
+		...NONE,
+		shiftKey: true
+	},
+	alt: {
+		...NONE,
+		altKey: true
+	},
+	ctrl: {
+		...NONE,
+		ctrlKey: true
+	},
+	meta: {
+		...NONE,
+		metaKey: true
+	}
+};
+/** Each entry of a modifier-aware input option, as a name and held keys. */
+function entries(options) {
+	if (Array.isArray(options)) return [{
+		name: "",
+		modifiers: NONE
+	}];
+	return Object.keys(options).map((key) => ({
+		name: key === "default" ? "" : key,
+		modifiers: MODIFIER_STATE[key] ?? NONE
+	}));
+}
+/**
+* Press every entry of `options` at nine points along the travel and report
+* whether anything came of it.
+*
+* Run against `applyDelta` itself rather than against a reading of `step`:
+* the whole point is that the amount, the step and the scale interact, and
+* the pipeline is the only thing that knows how.
+*/
+function probe(options, range, format) {
+	const { min, max, scale = _tremolo_ui_functions.linearScale } = range;
+	const outcome = {
+		moved: false,
+		visible: false
+	};
+	for (const { modifiers } of entries(options)) for (const position of PROBES) {
+		const value = scale.denormalize(position, min, max);
+		const up = (0, _tremolo_ui_functions.applyDelta)(value, 1, options, range, modifiers);
+		const down = (0, _tremolo_ui_functions.applyDelta)(value, -1, options, range, modifiers);
+		if (up !== value || down !== value) outcome.moved = true;
+		if (!format) continue;
+		const shown = format(value);
+		if (format(up) !== shown || format(down) !== shown) outcome.visible = true;
+	}
+	return outcome;
+}
+/**
+* Warn, in development only, when a key press or a wheel notch cannot produce
+* a change the user can see.
+*
+* Two settings that are each fine on their own can cancel out, and nothing
+* fails when they do — the control simply sits there:
+*
+* - **`step` coarser than the amount.** `keyboard={['raw', 0.1]}` with
+*   `step={1}` rounds every press straight back to where it started
+* - **the display coarser than the amount.** A `format` showing two decimals
+*   of a kHz value cannot show a press worth 1 Hz
+*
+* The second is only reported when the press is invisible at *every* point
+* along the travel. A display that rounds is a deliberate choice and is
+* normally right — it is being too coarse everywhere that makes it a mistake.
+*
+* @internal
+*/
+function useCheckSteps({ component, axis, range, keyboard, wheel, format }) {
+	const { min, max, step, scale } = range ?? {};
+	const where = axis ? `${component} (${axis})` : component;
+	(0, react.useEffect)(() => {
+		try {
+			if (process.env.NODE_ENV === "production") return;
+			if (!range || min === void 0 || max === void 0 || !(min < max)) return;
+			for (const [name, options] of [["keyboard", keyboard], ["wheel", wheel]]) {
+				if (!options) continue;
+				const { moved, visible } = probe(options, range, format);
+				if (!moved) console.warn(`[tremolo-ui] ${where}: \`${name}\` cannot move the value.` + (step !== void 0 ? ` Each press is smaller than \`step\` (${step}), so it rounds` : " Each press rounds") + " straight back to where it started.");
+				else if (format && !visible) console.warn(`[tremolo-ui] ${where}: \`${name}\` moves the value, but \`format\` shows the same text before and after, everywhere in the range. The display is too coarse for it to be seen.`);
+			}
+		} catch {}
+	}, [
+		where,
+		min,
+		max,
+		step,
+		scale,
+		keyboard,
+		wheel
+	]);
 }
 //#endregion
-//#region src/hooks/useCallbackRef.ts
+//#region src/hooks/_internal/useCallbackRef.ts
 /**
 * Internal
 * @private
@@ -180,36 +224,77 @@ function useCallbackRef(callback, deps = []) {
 	return (0, react.useCallback)((...args) => callbackRef.current?.(...args), deps);
 }
 //#endregion
-//#region src/hooks/useDrag.ts
+//#region src/hooks/useDragValue.ts
 /**
-* Track a pointer drag on an element.
+* Drive a value with a pointer drag.
 *
-* @returns a ref callback to attach to the element being dragged
+* @returns a ref callback for the element that starts the drag, and whether a drag is in progress
 */
-function useDrag({ threshold = 1, cursor, onDrag, onDragStart, onDragEnd }) {
-	const dragHandler = useCallbackRef(onDrag);
-	const dragStartHandler = useCallbackRef(onDragStart);
-	const dragEndHandler = useCallbackRef(onDragEnd);
+function useDragValue(options) {
+	const { axis, baseElementRef, pixelRange, updateOnPointerDown, threshold, cursor, pointerLock } = 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)(() => {
 		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()
+		const instance = (0, _tremolo_ui_dom.createDragValue)(node, {
+			axis: latest.current.axis,
+			mapping: baseElementRef ? (0, _tremolo_ui_dom.elementMapping)(() => baseElementRef.current, { sensitivity: (state) => latest.current.sensitivity?.(state) ?? 1 }) : (0, _tremolo_ui_dom.relativeMapping)({
+				pixelRange: [pixelRangeX ?? 100, pixelRangeY ?? 100],
+				sensitivity: (state) => latest.current.sensitivity?.(state) ?? 1
+			}),
+			getValue: () => valueGetter() ?? [0, 0],
+			updateOnPointerDown: latest.current.updateOnPointerDown,
+			threshold: latest.current.threshold,
+			cursor: latest.current.cursor,
+			pointerLock: latest.current.pointerLock,
+			shouldStart: (event) => latest.current.shouldStart?.(event) ?? true,
+			onChange: (value, state) => changeHandler(value, state),
+			onDragStart: (value, state) => {
+				setDragging(true);
+				dragStartHandler(value, state);
+			},
+			onDragEnd: (value, state) => {
+				setDragging(false);
+				dragEndHandler(value, state);
+			}
 		});
-		return () => instance.destroy();
+		instanceRef.current = instance;
+		return () => {
+			instanceRef.current = null;
+			instance.destroy();
+		};
 	}, [
 		node,
-		threshold,
-		cursor,
-		dragHandler,
+		baseElementRef,
+		pixelRangeX,
+		pixelRangeY,
+		valueGetter,
+		changeHandler,
 		dragStartHandler,
 		dragEndHandler
 	]);
-	return setNode;
+	(0, react.useEffect)(() => {
+		latest.current = options;
+		instanceRef.current?.update({
+			axis,
+			updateOnPointerDown,
+			threshold,
+			cursor,
+			pointerLock
+		});
+	});
+	return {
+		refCallback: setNode,
+		dragging
+	};
 }
 //#endregion
 //#region src/hooks/useWheel.ts
@@ -218,88 +303,169 @@ function useDrag({ threshold = 1, cursor, onDrag, onDragStart, onDragEnd }) {
 *
 * The listener is not passive, so the handler may call `preventDefault()`.
 *
-* @returns a ref callback to attach to the element
+* @returns a ref callback to attach to the element, unused when `target` is given
 */
-function useWheel(onWheel) {
+function useWheel(onWheel, { requireFocus = false, target } = {}) {
 	const wheelHandler = useCallbackRef(onWheel);
 	const [node, setNode] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
-		if (!node) return;
-		const instance = (0, _tremolo_ui_dom.createWheel)(node, (event) => wheelHandler(event));
+		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, wheelHandler]);
+	}, [
+		node,
+		target,
+		wheelHandler,
+		requireFocus
+	]);
 	return setNode;
 }
 //#endregion
-//#region src/components/_util/index.ts
-function addUserSelectNone() {
-	window.document.body.classList.add("tremolo-user-select-none");
+//#region src/input-event.ts
+/**
+* The keyboard amount used by Knob, NumberInput, Slider, and XYPad by default:
+* 1 per press in the units of the value, and 0.1 with shift held. That is one
+* `step` only while `step` is 1; a coarser `step` rounds 1 straight back, which
+* `useCheckSteps` warns about.
+*
+* A modifier entry is not snapped to `step`, which is what lets the finer
+* amount move at all — see `applyDelta` in `@tremolo-ui/functions`.
+*/
+const DEFAULT_KEYBOARD_OPTIONS = {
+	default: ["raw", 1],
+	shift: ["raw", .1]
+};
+/**
+* The wheel amount used by Knob, NumberInput, Slider, and XYPad by default.
+*
+* Browsers turn shift+wheel into horizontal scrolling, which empties `deltaY`
+* and fills `deltaX`, so no modifier is bound here.
+*/
+const DEFAULT_WHEEL_OPTIONS = ["raw", 1];
+/**
+* The drag sensitivity used by value controls by default. Shift makes the
+* same movement cover a tenth of the range, matching the arrow keys.
+*/
+const DEFAULT_DRAG_SENSITIVITY = {
+	default: 1,
+	shift: .1
+};
+//#endregion
+//#region src/components/_util/css-length.ts
+/**
+* A number as a CSS length, for a custom property.
+*
+* React appends `px` to a bare number for the properties it knows take a
+* length, and a custom property is never one of them: `--size: 50` would come
+* out as the invalid `50`. Anything already a string is passed through, so
+* `'3rem'` and `'100%'` still work.
+*/
+function cssLength(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+//#endregion
+//#region src/components/_util/Placement.tsx
+/**
+* The subcomponent that established the current placement, if any.
+*
+* @internal
+*/
+const PlacementContext = /* @__PURE__ */ (0, react.createContext)(null);
+/**
+* Marks its children as being inside `name`, for {@link useCheckPlacement}.
+*
+* @internal
+*/
+function Placement({ name, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlacementContext.Provider, {
+		value: name,
+		children
+	});
+}
+/**
+* Warn, in development only, when `child` is not rendered inside `parent`.
+*
+* A compound component renders its children exactly as they are composed, so a
+* subcomponent put at the wrong level still renders — it only loses whatever
+* its layout depended on, and does so silently. `Slider.Thumb` outside
+* `Slider.Track` keeps its `position: absolute` but resolves it against the
+* page rather than the track, and neither the build nor the tests notice.
+*
+* @internal
+*/
+function useCheckPlacement(child, parent) {
+	const found = (0, react.useContext)(PlacementContext);
+	(0, react.useEffect)(() => {
+		try {
+			if (process.env.NODE_ENV !== "production" && found !== parent) console.warn(`[tremolo-ui] ${child} has to be rendered inside ${parent}` + (found === null ? "." : `, but it is inside ${found}.`) + " It renders either way, so nothing fails — its position just comes out wrong.");
+		} catch {}
+	}, [
+		found,
+		child,
+		parent
+	]);
+}
+/**
+* 角度から円弧上の点を求める。
+*
+* 半径は線の太さの分だけ内側に取る必要があるが、太さは 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))
+	};
+}
+/** 線の太さが viewBox からはみ出さないようにした半径 */
+function arcRadius(strokeWidth) {
+	const width = typeof strokeWidth === "number" ? strokeWidth : Number.parseFloat(String(strokeWidth));
+	return Number.isFinite(width) ? 50 - width / 2 : 50;
 }
-function removeUserSelectNone() {
-	window.document.body.classList.remove("tremolo-user-select-none");
+/** Build an SVG path for an arc, splitting full turns into drawable segments. */
+function arcPath(startAngle, endAngle, radius) {
+	const start = pointOnArc(startAngle, radius);
+	const sweep = endAngle - startAngle;
+	const segmentCount = Math.max(1, Math.ceil(Math.abs(sweep) / 180));
+	const segmentSweep = sweep / segmentCount;
+	let path = `M ${start.x} ${start.y}`;
+	for (let i = 1; i <= segmentCount; i += 1) {
+		const end = pointOnArc(startAngle + segmentSweep * i, radius);
+		path += ` A ${radius} ${radius} 0 0 ${segmentSweep >= 0 ? 1 : 0} ${end.x} ${end.y}`;
+	}
+	return path;
 }
-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);
+/** 設定から描画に必要な角度を導出する。レンダー中に呼ぶ。 */
+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 KnobContext = /* @__PURE__ */ (0, react.createContext)(null);
+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 }) {
+	useCheckPlacement("Knob.ActiveLine", "Knob.SVGRoot");
 	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);
 	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}`,
+		className,
+		d: arcPath(r2, r3, radius),
 		fill: "none",
 		stroke,
 		strokeWidth,
@@ -309,6 +475,7 @@ function ActiveLine({ stroke = "currentColor", strokeWidth = 6, className, ...pr
 //#endregion
 //#region src/components/Knob/InactiveLine.tsx
 function InactiveLine({ stroke = "currentColor", strokeWidth = 6, className, ...props }) {
+	useCheckPlacement("Knob.InactiveLine", "Knob.SVGRoot");
 	const min = useKnobContext((s) => s.min);
 	const max = useKnobContext((s) => s.max);
 	const startValue = useKnobContext((s) => s.startValue);
@@ -316,24 +483,17 @@ 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);
 	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}`,
+		className,
+		d: arcPath(r1, r2, radius),
 		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}`,
+		className,
+		d: arcPath(r3, r4, radius),
 		fill: "none",
 		stroke,
 		strokeWidth,
@@ -341,13 +501,30 @@ 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: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Placement, {
+			name: "Knob.SVGRoot",
+			children
+		})
+	});
+}
+//#endregion
 //#region src/components/Knob/Thumb.tsx
 function Thumb$2({ className, thumb = "currentColor", thumbLine = "currentColor", thumbSize = 84, thumbLineWeight = 6, thumbLineLength = 35, classes, ...props }) {
+	useCheckPlacement("Knob.Thumb", "Knob.SVGRoot");
 	const angleRange = useKnobContext((s) => s.angleRange);
 	const p = useKnobContext((s) => s.p);
 	const r1 = useKnobContext((s) => s.r1);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		className: (0, clsx.default)("tremolo-knob-thumb", classes?.thumb),
+		className,
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
 			cx: "50%",
@@ -355,7 +532,7 @@ function Thumb$2({ className, thumb = "currentColor", thumbLine = "currentColor"
 			r: `${thumbSize / 2}%`,
 			fill: thumb
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			className: (0, clsx.default)("tremolo-knob-thumb-line", classes?.thumbLine),
+			className: classes?.thumbLine,
 			x1: "50%",
 			y1: `${(100 - (0, _tremolo_ui_functions.clamp)(thumbSize, 0, 100)) / 2}%`,
 			x2: "50%",
@@ -370,66 +547,43 @@ 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 = {
-	userSelectNone: true,
-	cursor: "grabbing"
-};
+const defaultExternalStyles$2 = { 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: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, defaultValue = min, startValue = min, size, externalStyles: _externalStyles, wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, pointerLock = false, 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 inactive = disabled || readonly;
+		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
 		]);
+		useCheckSteps({
+			component: "Knob",
+			range,
+			keyboard,
+			wheel
+		});
 		const handleKeyDown = (0, react.useCallback)((event) => {
-			if (!keyboard || !onChange || readonly) return;
+			if (!keyboard || !onChange || inactive) return;
 			const key = event.key;
 			if ([
 				"ArrowRight",
@@ -438,76 +592,93 @@ 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, event));
 			}
 		}, [
 			keyboard,
 			onChange,
-			readonly,
-			updateValueByEvent
+			inactive,
+			value,
+			range
 		]);
-		const dragRefCallback = useDrag({
-			cursor: readonly ? void 0 : externalStyles.cursor,
-			onDrag,
-			onDragStart: () => {
-				setDragging(true);
-				valueRef.current = (0, _tremolo_ui_functions.normalizeValue)(value, min, max, skew);
-				if (externalStyles.userSelectNone) addUserSelectNone();
-			},
-			onDragEnd: () => {
-				setDragging(false);
-				if (externalStyles.userSelectNone) removeUserSelectNone();
+		const { refCallback: dragRefCallback, dragging } = useDragValue({
+			axis: (0, react.useMemo)(() => [range, {
+				...range,
+				reverse: true
+			}], [range]),
+			getValue: () => [value, value],
+			sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
+			threshold: 1,
+			cursor: inactive ? void 0 : externalStyles.cursor,
+			pointerLock: inactive ? false : pointerLock,
+			shouldStart: () => !inactive,
+			onChange: (v) => {
+				if (inactive) return;
+				onChange?.(v[1]);
 			}
 		});
 		const wheelRefCallback = useWheel((event) => {
-			if (!wheel || readonly) return;
+			if (!wheel || inactive) return;
 			event.preventDefault();
-			if (!onChange || event.deltaY == 0) return;
-			const x = Math.sign(event.deltaY) * -wheel[1];
-			onChange(updateValueByEvent(wheel[0], x));
-		});
+			if (!onChange || event.deltaY === 0) return;
+			onChange((0, _tremolo_ui_functions.applyDelta)(value, -Math.sign(event.deltaY), wheel, range, event));
+		}, WHEEL_OPTIONS$2);
+		const rootRefCallback = require_compose_refs.useComposedRefs(elmRef, dragRefCallback, wheelRefCallback);
+		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 {
 				focus() {
-					elmRef.current?.focus();
+					if (!disabled) elmRef.current?.focus();
 				},
 				blur() {
 					elmRef.current?.blur();
 				}
 			};
-		}, []);
+		}, [disabled]);
 		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);
-					dragRefCallback(elm);
-				},
-				className: (0, clsx.default)("tremolo-knob", className),
-				tabIndex: 0,
+				ref: rootRefCallback,
+				className,
+				tabIndex: disabled ? -1 : 0,
 				role: "slider",
 				"aria-valuenow": value,
 				"aria-valuemin": min,
 				"aria-valuemax": max,
 				"aria-disabled": disabled,
 				"aria-readonly": readonly,
-				"data-dragging": dragging,
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readonly ? "" : void 0,
+				"data-dragging": dragging ? "" : void 0,
 				style: {
-					width: size,
-					height: size,
+					"--knob-size": cssLength(size),
 					...style
 				},
 				onPointerDown,
 				onDoubleClick: (event) => {
-					if (enableDoubleClickDefault && onChange) onChange(defaultValue);
+					if (!inactive && enableDoubleClickDefault && onChange) onChange(defaultValue);
 					onDoubleClick?.(event);
 				},
 				onKeyDown: (event) => {
@@ -515,7 +686,7 @@ const Knob = {
 					onKeyDown?.(event);
 				},
 				...props,
-				children: children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SVGRoot, {})
+				children
 			})
 		});
 	}),
@@ -525,142 +696,43 @@ 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)];
-}
-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
-	};
-}
-//#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);
-	(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
-	});
-}
+const NumberInputContext = /* @__PURE__ */ (0, react.createContext)(null);
+const NumberInputProvider = NumberInputContext.Provider;
 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 context = (0, react.useContext)(NumberInputContext);
+	if (!context) throw new Error("Missing NumberInputContext.Provider in the tree");
+	return selector ? selector(context) : context;
+}
+const StepperContext = /* @__PURE__ */ (0, react.createContext)(null);
+const StepperProvider = StepperContext.Provider;
+function useStepperContext() {
+	return (0, react.useContext)(StepperContext);
 }
 //#endregion
 //#region src/hooks/useEventListener.ts
 function useEventListener(target, event, handler, options) {
 	const listener = useCallbackRef(handler);
+	const cleanupRef = (0, react.useRef)(() => {});
 	(0, react.useEffect)(() => {
 		const node = typeof target === "function" ? target() : target ?? document;
 		if (!node) return;
 		node.addEventListener(event, listener, options);
-		return () => {
+		const cleanup = () => {
 			node.removeEventListener(event, listener, options);
 		};
+		cleanupRef.current = cleanup;
+		return () => {
+			cleanup();
+			if (cleanupRef.current === cleanup) cleanupRef.current = () => {};
+		};
 	}, [
 		event,
 		target,
 		options,
 		listener
 	]);
-	return () => {
-		(typeof target === "function" ? target() : target ?? document)?.removeEventListener(event, listener, options);
-	};
+	return (0, react.useCallback)(() => cleanupRef.current(), []);
 }
 //#endregion
 //#region src/hooks/useInterval.ts
@@ -684,783 +756,851 @@ function useInterval(callback, delay) {
 function useLongPress(callback, initialDelay = 500, interval = 40) {
 	const [pressed, setPressed] = (0, react.useState)(false);
 	const [delay, setDelay] = (0, react.useState)(initialDelay);
+	const activePointerId = (0, react.useRef)(null);
+	const isPressed = (0, react.useRef)(false);
 	useInterval(() => {
 		callback();
 		setDelay(interval);
 	}, pressed ? delay : null);
-	useEventListener(globalThis.window, "pointerup", () => {
+	const stop = (0, react.useCallback)((pointerId) => {
+		if (!isPressed.current) return;
+		if (pointerId !== void 0 && activePointerId.current !== null && activePointerId.current !== pointerId) return;
+		isPressed.current = false;
+		activePointerId.current = null;
 		setPressed(false);
 		setDelay(initialDelay);
+	}, [initialDelay]);
+	useEventListener(globalThis.window, "pointerup", (event) => {
+		stop(event.pointerId);
 	});
-	return (0, react.useCallback)(() => {
+	useEventListener(globalThis.window, "pointercancel", (event) => {
+		stop(event.pointerId);
+	});
+	useEventListener(globalThis.window, "blur", () => {
+		stop();
+	});
+	return (0, react.useCallback)((event) => {
+		if (isPressed.current || event && event.button !== 0) return;
+		isPressed.current = true;
+		activePointerId.current = event?.pointerId ?? null;
 		callback();
 		setPressed(true);
 	}, [callback]);
 }
 //#endregion
-//#region src/components/NumberInput/DecrementStepper.tsx
-function DecrementStepper({ size = 12, children, className, ...props }) {
-	const min = useNumberInputContext((s) => s.min);
-	const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber);
-	const readonly = useNumberInputContext((s) => s.readonly);
-	const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange);
-	const press = useLongPress(useNumberInputContext((s) => s.decrement));
+//#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, disabled, readonly, atMin, atMax, nudge } = useNumberInputContext();
+	const stepper = useStepperContext();
+	const press = useLongPress(() => {
+		if (stepper?.draggingRef.current) return;
+		nudge(direction, ["raw", step]);
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("tremolo-number-input-decrement-stepper", className),
+		className,
 		role: "button",
 		tabIndex: -1,
-		"aria-disabled": keepWithinRange && valueAsNumber <= (min ?? Number.MIN_SAFE_INTEGER),
-		"aria-readonly": readonly,
-		onPointerDown: press,
+		"aria-label": direction > 0 ? "Increment" : "Decrement",
+		"aria-disabled": disabled || (direction > 0 ? atMax : atMin),
+		"data-disabled": disabled || (direction > 0 ? atMax : atMin) ? "" : void 0,
+		"data-readonly": readonly ? "" : void 0,
+		style,
+		onPointerDown: (event) => {
+			if (!disabled && !readonly) press(event);
+			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", {
+		style: {
+			width: "var(--stepper-icon-size)",
+			height: "var(--stepper-icon-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: 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);
+//#region src/components/NumberInput/InputField.tsx
+/** The leading number of the displayed text, whatever the format put around it. */
+const NUMBER_PREFIX = /^\s*-?[\d.,]*/;
+const numberEnd = (text) => text.match(NUMBER_PREFIX)?.[0].length ?? text.length;
+/**
+* The index the caret is measured against: the decimal point, or where one
+* would go if the number has none.
+*
+* Measuring from an end instead would slide the caret across a digit whenever
+* the number changed length — `9.9` to `10.0` gains a character in front, `10`
+* to `9` loses one — which is exactly what stepping does.
+*/
+const decimalAnchor = (text) => {
+	const dot = text.indexOf(".");
+	return dot === -1 ? numberEnd(text) : dot;
+};
+/**
+* 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.
+*
+* How it behaves on focus, Enter and the arrow keys is set on `Root`
+* (`selectOnFocus`, `unformatOnFocus`, `keepCaretOnStep`, `blurOnEnter`).
+*/
+const InputField = /* @__PURE__ */ (0, react.forwardRef)(function InputField({ className, style, onFocus, onBlur, onKeyDown, ...props }, forwardedRef) {
+	const { value, min, max, step, disabled, readonly, keyboard, selectOnFocus, unformatOnFocus, keepCaretOnStep, blurOnEnter, text, editing, outOfRange, setDraft, commitDraft, nudge, inputRef } = useNumberInputContext();
+	const [focused, setFocused] = (0, react.useState)(false);
+	const shown = unformatOnFocus && focused && !editing ? String(value) : text;
+	(0, react.useEffect)(() => {
+		if (!focused || selectOnFocus === "none") return;
+		const input = inputRef.current;
+		if (!input) return;
+		if (selectOnFocus === "all") input.setSelectionRange(0, input.value.length);
+		else input.setSelectionRange(0, input.value.match(NUMBER_PREFIX)?.[0].length ?? 0);
 	}, [
-		keyboard,
-		readonly,
-		onChange,
-		updateValueByEvent
+		focused,
+		selectOnFocus,
+		inputRef
 	]);
-	const wheelRefCallback = useWheel((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);
+	/**
+	* Where to put the caret once the stepped value has been rendered, and the
+	* text it was measured against.
+	*/
+	const caretAfterStep = (0, react.useRef)(null);
+	(0, react.useLayoutEffect)(() => {
+		const pending = caretAfterStep.current;
+		if (!pending) return;
+		caretAfterStep.current = null;
+		const input = inputRef.current;
+		if (!input || input.value === pending.from) return;
+		const place = decimalAnchor(input.value) + pending.offset;
+		const caret = Math.max(0, Math.min(place, numberEnd(input.value)));
+		input.setSelectionRange(caret, caret);
 	});
-	(0, react.useImperativeHandle)(ref, () => {
-		return {
-			focus() {
-				elmRef.current?.focus();
-			},
-			blur() {
-				elmRef.current?.blur();
-			}
-		};
-	}, []);
+	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, inputRef);
 	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: composedRef,
+		className,
 		type: "text",
+		inputMode: "decimal",
+		role: "spinbutton",
+		value: shown,
+		disabled,
+		readOnly: readonly,
 		"aria-disabled": disabled,
 		"aria-readonly": readonly,
-		tabIndex: -1,
-		"data-error": error,
+		"data-disabled": disabled ? "" : void 0,
+		"data-readonly": readonly ? "" : void 0,
+		"aria-valuenow": value,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuetext": text,
+		step,
+		"data-out-of-range": outOfRange ? "" : void 0,
+		style,
 		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;
-			}
+			caretAfterStep.current = null;
+			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);
+			setFocused(true);
+			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);
+			setFocused(false);
+			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 && !disabled && !readonly && (key === "ArrowUp" || key === "ArrowDown") && !event.nativeEvent.isComposing) {
+				event.preventDefault();
+				const input = event.currentTarget;
+				if (keepCaretOnStep && input.selectionStart !== null) caretAfterStep.current = {
+					offset: input.selectionStart - decimalAnchor(input.value),
+					from: input.value
+				};
+				nudge(key === "ArrowUp" ? 1 : -1, keyboard, event);
+			}
 			onKeyDown?.(event);
 		},
 		...props
 	});
 });
 //#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
-	});
-}
+//#region src/hooks/useDrag.ts
 /**
-* Input with some useful functions for entering numerical values.
+* Track a pointer drag on an element.
+*
+* @returns a ref callback to attach to the element being dragged
 */
-const NumberInput = {
-	Root: (0, react.forwardRef)(({ value, min, max, step = 1, units, readonly = false, disabled = false, digit, variant = "outline", selectWithFocus = "none", blurOnEnter = true, keepWithinRange = true, clampValueOnBlur = true, wheel = ["raw", 1], keyboard = ["raw", 1], activeColor, wrapperClassName, className, onChange, onFocus, onBlur, children, ...props }, forwardedRef) => {
-		const colors = { "--active-color": activeColor };
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputProvider, {
-			value: String(value),
-			min,
-			max,
-			step,
-			units,
-			digit,
-			readonly,
-			keepWithinRange,
-			onChange,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, clsx.default)("tremolo-number-input-wrapper", wrapperClassName),
-				tabIndex: 0,
-				style: { ...colors },
-				"data-stepper": !!children,
-				"data-variant": variant,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalInput, {
-					ref: forwardedRef,
-					readonly,
-					disabled,
-					selectWithFocus,
-					blurOnEnter,
-					clampValueOnBlur,
-					wheel,
-					keyboard,
-					className,
-					onChange,
-					onFocus,
-					onBlur,
-					...props
-				}), children]
-			})
+function useDrag({ threshold = 1, cursor, pointerLock, 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,
+			pointerLock,
+			onDragStart: (state) => dragStartHandler(state),
+			onDrag: (state) => dragHandler(state.x, state.y, state.deltaX, state.deltaY, state),
+			onDragEnd: (state) => dragEndHandler(state)
 		});
-	}),
-	Stepper,
-	IncrementStepper,
-	DecrementStepper
-};
-//#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);
+		return () => instance.destroy();
+	}, [
+		node,
+		threshold,
+		cursor,
+		pointerLock,
+		dragHandler,
+		dragStartHandler,
+		dragEndHandler
+	]);
+	return setNode;
 }
 //#endregion
-//#region src/hooks/usePianoDrag.ts
+//#region src/components/NumberInput/Stepper.tsx
 /**
-* Internal
-* @returns [refCallback, pointerDownHandler]
-* @private
+* 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 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
+const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ className, style, children, ...props }, forwardedRef) {
+	const { value, step, disabled, readonly, drag, dragSensitivity, pointerLock, rawRange, changeValue } = useNumberInputContext();
+	const inactive = disabled || readonly;
+	/**
+	* The sensitivity as an amount per `drag` pixels, so that the drag goes
+	* through the same `applyDelta` the wheel and the arrow keys do. Carrying
+	* the modifier map over rather than resolving it here is what keeps `step`
+	* out of the pipeline for a modifier entry — naming one is a request to move
+	* off the grid.
+	*/
+	const dragOptions = (0, react.useMemo)(() => (0, _tremolo_ui_functions.mapModifier)(dragSensitivity, (factor) => ["raw", step * factor]), [dragSensitivity, step]);
+	/**
+	* 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);
+	/**
+	* Which modifier the drag is currently counting at, and where the previous
+	* event was — a key produces no pointer event of its own, so a change is
+	* only seen on the next move and has to be dated back to the one before it.
+	*/
+	const factorRef = (0, react.useRef)(1);
+	const previousYRef = (0, react.useRef)(0);
+	const dragRefCallback = useDrag({
+		threshold: 1,
+		cursor: inactive ? void 0 : "ns-resize",
+		pointerLock: inactive ? false : pointerLock,
+		onDragStart: (state) => {
+			originRef.current = null;
+			draggingRef.current = false;
+			factorRef.current = (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value;
 		},
-		glissando: true,
-		midiMax: 127,
-		fill: false,
-		label: () => void 0,
-		onPlayNote: () => {},
-		onStopNote: () => {}
-	};
-	return (0, zustand.createStore)()(() => ({
-		...DEFAULT_PROPS,
-		...initProps,
-		notePosition: initProps.notePosition
-	}));
-};
-const PianoContext = (0, react.createContext)(null);
-function PianoProvider({ children, ...props }) {
-	const storeRef = (0, react.useRef)(null);
-	if (!storeRef.current) storeRef.current = createPianoStore(props);
-	(0, react.useEffect)(() => {
-		if (storeRef.current) storeRef.current.setState(props);
-		else storeRef.current = createPianoStore(props);
-	}, [props]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PianoContext.Provider, {
-		value: storeRef.current,
-		children
+		onDrag: (_x, y, _dx, _dy, state) => {
+			if (inactive || drag === null) return;
+			if (!originRef.current) {
+				originRef.current = {
+					y,
+					value
+				};
+				previousYRef.current = y;
+				return;
+			}
+			const factor = (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value;
+			if (factor !== factorRef.current) {
+				originRef.current = {
+					y: previousYRef.current,
+					value
+				};
+				factorRef.current = factor;
+			}
+			previousYRef.current = y;
+			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, dragOptions, rawRange, state.event));
+		},
+		onDragEnd: () => {
+			draggingRef.current = false;
+		}
 	});
-}
-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,
+	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, drag !== null && !inactive ? dragRefCallback : void 0);
+	const context = (0, react.useMemo)(() => ({ draggingRef }), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperProvider, {
+		value: context,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("tremolo-piano-key-label", className),
+			ref: composedRef,
+			className,
+			style,
 			...props,
-			children: content
-		})
-	});
-}
-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;
-			}
-		};
-	}, [
-		disabled,
-		noteNumber,
-		onPlayNote,
-		onStopNote,
-		played
-	]);
-	let keyLabelProps = {};
-	if (children != void 0) react.default.Children.forEach(children, (child) => {
-		if (react.default.isValidElement(child)) if (child.type == KeyLabel) keyLabelProps = child.props;
-		else throw new Error("only <KeyLabel>");
-		else throw new Error("children is an invalid element.");
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)(`tremolo-piano-${keyType}-key`, className),
-		"aria-disabled": disabled,
-		"data-active": played,
-		style: {
-			...colors,
-			left: position,
-			width: fill ? __width : width,
-			height,
-			...style
-		},
-		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(KeyLabel, {
-			label,
-			__note: noteNumber,
-			...keyLabelProps
+			children
 		})
 	});
 });
-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
+//#region src/components/NumberInput/index.tsx
 /**
-* [noteRange.first, noteRange.first + 1 ..., noteRange.last]
+* A number at the start of the text, and nothing read after it. A half-typed
+* entry still yields the number in front of it, but text with no number is
+* `NaN` rather than 0, so that "unreadable" and "the user typed 0" stay apart.
 */
-function getNoteRangeArray(noteRange) {
-	return Array.from({ length: noteRange.last - noteRange.first + 1 }, (_, i) => i + noteRange.first);
-}
-const blackPerWhiteWidth = 26 / 40;
+const LEADING_NUMBER = /^\s*([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?)/;
+const defaultFormat = (value) => String(value);
+const defaultParse = (text) => {
+	const match = text.match(LEADING_NUMBER);
+	return match ? Number(match[1]) : NaN;
+};
 /**
-* Customizable piano component.
+* Input with some useful functions for entering numerical values.
 */
-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;
+const NumberInput = {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, format: formatProp, parse: parseProp, clampValue = true, wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, drag = 1, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, pointerLock = false, selectOnFocus = "none", unformatOnFocus = false, keepCaretOnStep = false, blurOnEnter = true, 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 inactive = disabled || readonly;
+		const format = formatProp ?? defaultFormat;
+		const parse = parseProp ?? defaultParse;
+		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,
+			scale
+		]);
+		const rawRange = (0, react.useMemo)(() => ({
+			min: (clampValue ? min : void 0) ?? -Number.MAX_VALUE,
+			max: (clampValue ? max : void 0) ?? Number.MAX_VALUE,
+			step,
+			scale
+		}), [
+			clampValue,
+			min,
+			max,
+			step,
+			scale
+		]);
+		useCheckSteps({
+			component: "NumberInput",
+			range: (0, react.useMemo)(() => min !== void 0 && max !== void 0 && min < max ? {
+				min,
+				max,
+				step,
+				scale
+			} : null, [
+				min,
+				max,
+				step,
+				scale
+			]),
+			keyboard,
+			wheel,
+			format
+		});
+		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 (inactive) return;
+			setDraft(next);
+			const parsed = parse(next);
+			if (Number.isFinite(parsed)) onChange?.(parsed);
 		}, [
-			blackNotes,
-			notePosition,
-			whiteNoteWidth,
-			whiteNotes
+			inactive,
+			parse,
+			onChange
 		]);
-		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;
+		const changeValue = (0, react.useCallback)((next) => {
+			if (inactive) return;
+			setDraft(null);
+			if (next !== value) onChange?.(next);
+		}, [
+			inactive,
+			value,
+			onChange
+		]);
+		const commitDraft = (0, react.useCallback)(() => {
+			if (draft === null || inactive) return;
+			const parsed = parse(draft);
+			if (!Number.isFinite(parsed)) {
+				setDraft(null);
+				return;
 			}
+			let committed = parsed;
+			if (clampValue && min !== void 0) committed = Math.max(committed, min);
+			if (clampValue && max !== void 0) committed = Math.min(committed, max);
+			changeValue(committed);
 		}, [
-			getHitKeyIndex,
-			noteRangeArray,
-			staticWidth
+			draft,
+			inactive,
+			parse,
+			clampValue,
+			min,
+			max,
+			changeValue
 		]);
-		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);
+		const nudge = (0, react.useCallback)((direction, option, modifiers) => {
+			const [mode] = (0, _tremolo_ui_functions.selectInputEvent)(option, modifiers).option;
+			changeValue((0, _tremolo_ui_functions.applyDelta)(value, direction, option, mode === "raw" ? rawRange : range, modifiers));
 		}, [
-			fill,
-			_whiteNoteWidth,
-			whiteNoteCount
+			changeValue,
+			value,
+			rawRange,
+			range
+		]);
+		const wheelRefCallback = useWheel((event) => {
+			if (!wheel || inactive || event.deltaY === 0) return;
+			event.preventDefault();
+			nudge(-Math.sign(event.deltaY), wheel, event);
+		}, { requireFocus: true });
+		const context = (0, react.useMemo)(() => ({
+			value,
+			min,
+			max,
+			step,
+			scale,
+			disabled,
+			readonly,
+			clampValue,
+			range,
+			rawRange,
+			keyboard,
+			text,
+			editing,
+			outOfRange,
+			dragSensitivity,
+			pointerLock,
+			selectOnFocus,
+			unformatOnFocus,
+			keepCaretOnStep,
+			blurOnEnter,
+			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,
+			rawRange,
+			keyboard,
+			text,
+			editing,
+			outOfRange,
+			drag,
+			dragSensitivity,
+			pointerLock,
+			selectOnFocus,
+			unformatOnFocus,
+			keepCaretOnStep,
+			blurOnEnter,
+			format,
+			parse,
+			handleDraft,
+			commitDraft,
+			changeValue,
+			nudge
 		]);
-		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);
+				focus() {
+					if (!disabled) inputRef.current?.focus();
 				},
-				stopNote(note) {
-					const index = noteRangeArray.indexOf(note);
-					if (index != -1) keyRefs.current[index]?.current?.stop();
-					else onStopNote?.(note);
+				blur() {
+					inputRef.current?.blur();
 				}
 			};
-		}, [
-			noteRangeArray,
-			onPlayNote,
-			onStopNote
-		]);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PianoProvider, {
-			notePosition,
-			noteRange,
-			glissando,
-			midiMax,
-			fill,
-			onPlayNote,
-			onStopNote,
-			label,
+		}, [disabled]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputProvider, {
+			value: context,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref: (div) => {
-					pianoRef.current = div;
-					touchMoveRefCallback(div);
-				},
-				className: (0, clsx.default)("tremolo-piano", className),
-				style: {
-					width: fill ? "100%" : staticWidth,
-					height,
-					...style
-				},
-				onPointerDown: (event) => {
-					pointerDownHandler(event);
-					onPointerDown?.(event);
-				},
+				ref: wheelRefCallback,
+				className,
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readonly ? "" : void 0,
+				style,
 				...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))
+				children
 			})
 		});
 	}),
-	WhiteKey,
-	BlackKey,
-	KeyLabel
+	InputField,
+	Stepper,
+	IncrementStepper,
+	DecrementStepper
 };
 //#endregion
-//#region src/components/PointsEditor/Background.tsx
-function Background({ className, children, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("tremolo-points-editor-background", className),
-		...props,
-		children
-	});
-}
-//#endregion
-//#region src/components/PointsEditor/context.tsx
-const createPointsEditorStore = (initProps) => {
-	const DEFAULT_PROPS = {
-		containerElementRef: (0, react.createRef)(),
-		disabled: false,
-		readonly: false,
-		externalStyles: {
-			userSelectNone: true,
-			cursor: "grabbing"
-		}
-	};
-	return (0, zustand.createStore)()((set) => ({
-		...DEFAULT_PROPS,
-		...initProps,
-		setContainerElementRef: (containerElementRef) => {
-			set(() => ({ containerElementRef }));
-		}
-	}));
+//#region src/components/Piano/keyboard-shortcuts.ts
+/**
+* Ready-made keyboard layouts. Both assume `noteRange.first` is a C.
+*/
+const SHORTCUTS = {
+	/** Every semitone from C, over the two rows of a QWERTY keyboard. */
+	HOME_ROW: { keys: [
+		"a",
+		"w",
+		"s",
+		"e",
+		"d",
+		"f",
+		"t",
+		"g",
+		"y",
+		"h",
+		"u",
+		"j",
+		"k",
+		"o",
+		"l",
+		"p",
+		";"
+	] },
+	/** The white keys only, on the home row. Black keys have no shortcut. */
+	HOME_ROW_NATURAL: { keys: [
+		"a",
+		"",
+		"s",
+		"",
+		"d",
+		"f",
+		"",
+		"g",
+		"",
+		"h",
+		"",
+		"j",
+		"k",
+		"",
+		"l",
+		"",
+		";"
+	] }
 };
-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
-	});
-}
-function usePointsEditorContext(selector) {
-	const store = (0, react.useContext)(PointsEditorContext);
-	if (!store) throw new Error("Missing PointsEditorContext.Provider in the tree");
-	return (0, zustand.useStore)(store, selector);
-}
 //#endregion
-//#region src/components/PointsEditor/Container.tsx
-function Container({ className, children, ...props }) {
-	const containerElementRef = (0, react.useRef)(null);
-	usePointsEditorContext((s) => s.setContainerElementRef)(containerElementRef);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: containerElementRef,
-		className: (0, clsx.default)("tremolo-points-editor-container", className),
-		...props,
-		children
-	});
+//#region src/components/Piano/index.tsx
+function isEditableTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.matches("input, textarea, select")) return true;
+	for (let element = target; element;) {
+		const contentEditable = element.getAttribute("contenteditable");
+		if (contentEditable !== null) return contentEditable.toLowerCase() !== "false";
+		element = element.parentElement;
+	}
+	return false;
+}
+function shortcutKey(event) {
+	return event.code || event.key;
 }
-//#endregion
-//#region src/hooks/useDragWithElement.ts
 /**
-* Track a pointer drag, reporting the position normalized against
-* the bounding rect of `baseElementRef`.
-*
-* @returns a ref callback for the element that starts the drag, and whether a drag is in progress
+* Customizable piano component.
 */
-function useDragWithElement({ baseElementRef, updateOnPointerDown = false, cursor, onDrag, onDragStart, onDragEnd }) {
-	const [dragging, setDragging] = (0, react.useState)(false);
-	const normalizedX = (0, react.useRef)(0);
-	const normalizedY = (0, react.useRef)(0);
-	const dragHandler = useCallbackRef(onDrag);
-	const dragStartHandler = useCallbackRef(onDragStart);
-	const dragEndHandler = useCallbackRef(onDragEnd);
-	const update = (0, react.useCallback)((clientX, clientY) => {
-		const base = baseElementRef.current;
-		if (!base) return false;
-		const { left, top, right, bottom } = base.getBoundingClientRect();
-		normalizedX.current = (0, _tremolo_ui_functions.normalizeValue)(clientX, left, right);
-		normalizedY.current = (0, _tremolo_ui_functions.normalizeValue)(clientY, top, bottom);
-		return true;
-	}, [baseElementRef]);
+const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, keyboardShortcutsScope = "root", resizable = false, whiteKeyWidth = 40, keyGap = 1, blackKeyWidthRatio = .65, blackKeyHeightRatio = .6, height, style, className, label, keyProps, classes, onPlayNote, onStopNote, ...props }, forwardedRef) {
 	const [node, setNode] = (0, react.useState)(null);
+	const [activeNotes, setActiveNotes] = (0, react.useState)([]);
+	/** Set while `resizable` is on, measured from the parent. */
+	const [resizedKeyWidth, setResizedKeyWidth] = (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: resizable ? resizedKeyWidth : whiteKeyWidth,
+		keyGap,
+		blackKeyWidthRatio,
+		blackKeyHeightRatio
+	}), [
+		noteRange,
+		resizable,
+		resizedKeyWidth,
+		whiteKeyWidth,
+		keyGap,
+		blackKeyWidthRatio,
+		blackKeyHeightRatio
+	]);
+	const latest = (0, react.useRef)({
+		layout,
+		glissando,
+		midiMax,
+		onPlayNote,
+		onStopNote
+	});
+	const instanceRef = (0, react.useRef)(null);
+	const shortcutNotes = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const releaseShortcutNotes = (0, react.useCallback)(() => {
+		for (const { note, source } of shortcutNotes.current.values()) instanceRef.current?.noteOff(note, { source });
+		shortcutNotes.current.clear();
+	}, []);
 	(0, react.useEffect)(() => {
 		if (!node) return;
-		const instance = (0, _tremolo_ui_dom.createDrag)(node, {
-			cursor,
-			onDragStart: ({ clientX, clientY }) => {
-				setDragging(true);
-				if (update(clientX, clientY) && updateOnPointerDown) dragHandler(normalizedX.current, normalizedY.current);
-				dragStartHandler(normalizedX.current, normalizedY.current);
-			},
-			onDrag: ({ clientX, clientY }) => {
-				if (update(clientX, clientY)) dragHandler(normalizedX.current, normalizedY.current);
-			},
-			onDragEnd: () => {
-				setDragging(false);
-				dragEndHandler(normalizedX.current, normalizedY.current);
-			}
+		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
 		});
-		return () => instance.destroy();
+		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 (!resizable || !node) return;
+		const parent = node.parentElement;
+		if (!parent) throw new Error("doesn't have a parent element.");
+		const resizeObserver = new ResizeObserver(() => {
+			setResizedKeyWidth(node.clientWidth / Math.max(whiteKeyCount, 1) - keyGap);
+		});
+		resizeObserver.observe(parent);
+		return () => resizeObserver.disconnect();
 	}, [
+		resizable,
 		node,
-		update,
-		updateOnPointerDown,
-		cursor,
-		dragHandler,
-		dragStartHandler,
-		dragEndHandler
+		whiteKeyCount,
+		keyGap
 	]);
-	return {
-		refCallback: setNode,
-		dragging
-	};
+	const shortcutKeys = keyboardShortcuts?.keys;
+	const hasShortcuts = shortcutKeys !== void 0;
+	const shortcutMapping = shortcutKeys?.join("\0");
+	(0, react.useEffect)(() => releaseShortcutNotes, [
+		releaseShortcutNotes,
+		shortcutMapping,
+		keyboardShortcutsScope,
+		noteRange.first,
+		noteRange.last
+	]);
+	/** The note a shortcut key plays, or null when it has none. */
+	function shortcutNote(key) {
+		if (!shortcutKeys || key === "") return null;
+		const index = shortcutKeys.indexOf(key);
+		const note = noteRange.first + index;
+		return index === -1 || note > noteRange.last ? null : note;
+	}
+	const shortcutTarget = (0, react.useMemo)(() => () => {
+		if (!hasShortcuts) return null;
+		return keyboardShortcutsScope === "window" ? globalThis.window : node;
+	}, [
+		hasShortcuts,
+		keyboardShortcutsScope,
+		node
+	]);
+	const focusOutTarget = (0, react.useMemo)(() => () => hasShortcuts && keyboardShortcutsScope === "root" ? node : null, [
+		hasShortcuts,
+		keyboardShortcutsScope,
+		node
+	]);
+	const windowBlurTarget = (0, react.useMemo)(() => () => hasShortcuts ? globalThis.window : null, [hasShortcuts]);
+	useEventListener(shortcutTarget, "keydown", (e) => {
+		const key = shortcutKey(e);
+		if (e.repeat || shortcutNotes.current.has(key)) return;
+		if (isEditableTarget(e.target)) return;
+		const note = shortcutNote(e.key);
+		if (note === null) return;
+		const source = `keyboard:${key}`;
+		shortcutNotes.current.set(key, {
+			note,
+			source
+		});
+		instanceRef.current?.noteOn(note, { source });
+	});
+	useEventListener(shortcutTarget, "keyup", (e) => {
+		const key = shortcutKey(e);
+		const shortcut = shortcutNotes.current.get(key);
+		if (!shortcut) return;
+		shortcutNotes.current.delete(key);
+		instanceRef.current?.noteOff(shortcut.note, { source: shortcut.source });
+	});
+	useEventListener(focusOutTarget, "focusout", (e) => {
+		if (e.relatedTarget instanceof Node && node?.contains(e.relatedTarget)) return;
+		releaseShortcutNotes();
+	});
+	useEventListener(windowBlurTarget, "blur", releaseShortcutNotes);
+	(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", {
+		ref: setNode,
+		className,
+		"data-resizable": resizable ? "" : void 0,
+		role: "group",
+		tabIndex: 0,
+		style: {
+			width: resizable ? "100%" : (0, _tremolo_ui_functions.pianoWidth)(layout),
+			"--height": cssLength(height),
+			position: "relative",
+			...style
+		},
+		...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
+			};
+			const { className: keyClassName, style: keyStyle, ...rest } = keyProps?.(note, state) ?? {};
+			const content = label?.(note, state);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: keyClassName,
+				"data-note": note,
+				"data-note-key": (0, _tremolo_ui_functions.noteKey)(note),
+				"data-active": state.active ? "" : void 0,
+				"data-disabled": state.disabled ? "" : void 0,
+				...rest,
+				style: {
+					position: "absolute",
+					zIndex: keyType === "white" ? 1 : 2,
+					...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}%`
+				},
+				children: content !== "" && content !== null && content !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classes?.keyLabelWrapper,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: classes?.keyLabel,
+						children: content
+					})
+				})
+			}, note);
+		})
+	});
+}) };
+//#endregion
+//#region src/components/PointsEditor/Background.tsx
+function Background({ className, children, style, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: 0,
+			...style
+		},
+		...props,
+		children
+	});
 }
 //#endregion
+//#region src/components/PointsEditor/context.tsx
+const PointsEditorContext = /* @__PURE__ */ (0, react.createContext)(null);
+const PointsEditorProvider = PointsEditorContext.Provider;
+function usePointsEditorContext(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/_util/VisuallyHiddenRangeInput.tsx
+const hiddenStyle = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0,
+	pointerEvents: "none"
+};
+const VisuallyHiddenRangeInput = /* @__PURE__ */ (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+	...props,
+	ref,
+	type: "range",
+	style: hiddenStyle
+}));
+//#endregion
 //#region src/components/PointsEditor/Point.tsx
 function clampPoint(point, min, max) {
 	const { x, y } = point;
@@ -1469,82 +1609,471 @@ 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 { refCallback: dragRefCallback, dragging } = useDragWithElement({
-		baseElementRef: containerElementRef,
-		cursor: readonly ? void 0 : externalStyles.cursor,
-		onDrag: (x, y) => {
-			if (readonly) return;
-			onChange?.(clampPoint({
-				x,
-				y
-			}, min, max));
+/**
+* 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
+};
+/**
+* One setting for both axes, or one per axis. The point holds a range input
+* for each, so anything that names or describes it comes in a pair.
+*/
+function perAxis(value, axis) {
+	return typeof value === "string" ? value : value?.[axis];
+}
+function Point({ value, children, id: idProp, min, max, size, width, height, color, disabled: _disabled, readonly: _readonly, wheel: _wheel, keyboard: _keyboard, "aria-label": ariaLabel, "aria-valuetext": ariaValuetext, onChange, onDragStart, onDragEnd, className, style, onPointerDown, onKeyDown, onFocus, ...props }) {
+	const { containerRef, externalStyles, disabled: rootDisabled, readonly: rootReadonly, wheel: rootWheel, keyboard: rootKeyboard, dragSensitivity, selection, registerPoint, beginPointDrag, movePointDrag, nudgeSelection } = usePointsEditorContext();
+	const generatedId = (0, react.useId)();
+	const id = idProp ?? generatedId;
+	const selected = selection.includes(id);
+	const disabled = _disabled ?? rootDisabled;
+	const readonly = _readonly ?? rootReadonly;
+	const inactive = disabled || readonly;
+	const wheel = _wheel === void 0 ? rootWheel : _wheel;
+	const keyboard = _keyboard === void 0 ? rootKeyboard : _keyboard;
+	useCheckPlacement("PointsEditor.Point", "PointsEditor.Container");
+	const [element, setElement] = (0, react.useState)(null);
+	const xInputRef = (0, react.useRef)(null);
+	const yInputRef = (0, react.useRef)(null);
+	const registration = (0, react.useRef)({
+		value,
+		min,
+		max,
+		readonly: inactive,
+		onChange,
+		element,
+		wheel
+	});
+	(0, react.useEffect)(() => {
+		registration.current = {
+			value,
+			min,
+			max,
+			readonly: inactive,
+			onChange,
+			element,
+			wheel
+		};
+	});
+	(0, react.useEffect)(() => registerPoint(id, registration), [id, registerPoint]);
+	/** Where the pointer was when the drag started, to measure the move from. */
+	const pointerOrigin = (0, react.useRef)(null);
+	const { refCallback: dragRefCallback, dragging } = useDragValue({
+		axis: AXIS,
+		baseElementRef: containerRef,
+		sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
+		cursor: inactive ? void 0 : externalStyles.cursor,
+		shouldStart: () => !disabled,
+		onChange: ([x, y]) => {
+			const origin = pointerOrigin.current;
+			if (!origin) return;
+			movePointDrag({
+				x: x - origin.x,
+				y: y - origin.y
+			});
 		},
-		onDragStart: (x, y) => {
-			if (readonly) return;
-			if (externalStyles.userSelectNone) addUserSelectNone();
-			onDragStart?.(clampPoint({
+		onDragStart: ([x, y], state) => {
+			beginPointDrag(id, state.event);
+			pointerOrigin.current = {
 				x,
 				y
-			}, min, max));
+			};
+			xInputRef.current?.focus();
+			if (inactive) return;
+			onDragStart?.(clampPoint(value, min, max));
+		},
+		onDragEnd: () => {
+			pointerOrigin.current = null;
+			if (inactive) return;
+			onDragEnd?.(clampPoint(value, min, max));
+		}
+	});
+	const nudge = (0, react.useCallback)((axis, direction, option, modifiers) => {
+		const next = (0, _tremolo_ui_functions.applyDelta)(value[axis], direction, option, AXIS, modifiers);
+		nudgeSelection(id, {
+			x: axis === "x" ? next - value.x : 0,
+			y: axis === "y" ? next - value.y : 0
+		});
+	}, [
+		value,
+		id,
+		nudgeSelection
+	]);
+	const refCallback = require_compose_refs.useComposedRefs(dragRefCallback, setElement);
+	const handleKeyDown = (event) => {
+		const key = event.key;
+		if (![
+			"ArrowRight",
+			"ArrowLeft",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(key)) return;
+		const axis = key === "ArrowRight" || key === "ArrowLeft" ? "x" : "y";
+		event.preventDefault();
+		if (!onChange || inactive || !keyboard) return;
+		nudge(axis, key === "ArrowLeft" || key === "ArrowUp" ? -1 : 1, keyboard, event);
+	};
+	const current = clampPoint(value, min, max);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: refCallback,
+		className,
+		"data-disabled": disabled ? "" : void 0,
+		"data-readonly": readonly ? "" : void 0,
+		tabIndex: -1,
+		"data-dragging": dragging ? "" : void 0,
+		"data-selected": selected ? "" : void 0,
+		style: {
+			"--color": color,
+			"--width": cssLength(size ?? width),
+			"--height": cssLength(size ?? height),
+			position: "absolute",
+			translate: "var(--translate, -50% -50%)",
+			...style,
+			left: `${value.x * 100}%`,
+			top: `${value.y * 100}%`
+		},
+		onPointerDown,
+		onFocus: (event) => {
+			if (!disabled && event.target === event.currentTarget) xInputRef.current?.focus();
+			onFocus?.(event);
 		},
-		onDragEnd: (x, y) => {
-			if (readonly) return;
-			if (externalStyles.userSelectNone) removeUserSelectNone();
-			onDragEnd?.(clampPoint({
+		onKeyDown: (event) => {
+			handleKeyDown(event);
+			onKeyDown?.(event);
+		},
+		...props,
+		children: [["x", "y"].map((axis) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisuallyHiddenRangeInput, {
+			ref: axis === "x" ? xInputRef : yInputRef,
+			"data-axis": axis,
+			value: current[axis],
+			min: min?.[axis] ?? 0,
+			max: max?.[axis] ?? 1,
+			step: "any",
+			disabled,
+			"aria-readonly": readonly,
+			"aria-orientation": axis === "x" ? "horizontal" : "vertical",
+			"aria-label": perAxis(ariaLabel, axis) ?? axis,
+			"aria-valuetext": perAxis(ariaValuetext, axis),
+			onChange: (event) => {
+				if (readonly) {
+					event.currentTarget.value = String(current[axis]);
+					return;
+				}
+				const delta = event.currentTarget.valueAsNumber - value[axis];
+				nudgeSelection(id, {
+					x: axis === "x" ? delta : 0,
+					y: axis === "y" ? delta : 0
+				});
+			}
+		}, axis)), children]
+	});
+}
+//#endregion
+//#region src/components/PointsEditor/Container.tsx
+const Container = /* @__PURE__ */ (0, react.forwardRef)(function Container({ children, className, style, ...props }, forwardedRef) {
+	const { containerRef, disabled, selectable, isPointElement, nudgeFocusedPoint, beginSelectionBox, moveSelectionBox, endSelectionBox } = usePointsEditorContext();
+	const { refCallback: dragRefCallback } = useDragValue({
+		axis: AXIS,
+		baseElementRef: containerRef,
+		shouldStart: (event) => !disabled && !isPointElement(event.target),
+		onDragStart: ([x, y], state) => {
+			beginSelectionBox({
 				x,
 				y
-			}, min, max));
-		}
+			}, state.event);
+		},
+		onChange: ([x, y]) => moveSelectionBox({
+			x,
+			y
+		}),
+		onDragEnd: endSelectionBox
 	});
-	const colors = { "--color": color };
+	useWheel((event) => {
+		const horizontal = event.deltaX !== 0;
+		const delta = horizontal ? event.deltaX : event.deltaY;
+		if (delta === 0) return;
+		const axis = horizontal || event.shiftKey ? "x" : "y";
+		if (nudgeFocusedPoint(axis, delta < 0 ? -1 : 1, event)) event.preventDefault();
+	}, { target: containerRef });
+	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, containerRef, selectable && !disabled ? dragRefCallback : void 0);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: dragRefCallback,
-		className: (0, clsx.default)("tremolo-points-editor-point", className),
-		tabIndex: 0,
-		"aria-disabled": disabled != void 0 ? disabled : __disabled,
-		"aria-readonly": readonly != void 0 ? readonly : __readonly,
-		"data-dragging": dragging,
+		ref: composedRef,
+		className,
 		style: {
-			...colors,
-			width: size ?? width,
-			height: size ?? height,
-			left: `${value.x * 100}%`,
-			top: `${value.y * 100}%`,
+			position: "absolute",
+			inset: 0,
+			zIndex: 10,
 			...style
 		},
-		onPointerDown,
-		...props
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Placement, {
+			name: "PointsEditor.Container",
+			children
+		})
+	});
+});
+//#endregion
+//#region src/components/PointsEditor/SelectionBox.tsx
+/**
+* The box a drag on empty space draws, and what it covers is selected.
+*
+* Nothing is rendered while no drag is running, and leaving it out leaves the
+* editor without one — the selection still works, it just cannot be seen.
+*/
+function SelectionBox({ children, className, style, ...props }) {
+	useCheckPlacement("PointsEditor.SelectionBox", "PointsEditor.Container");
+	const selectionBox = usePointsEditorContext((s) => s.selectionBox);
+	if (!selectionBox) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		...props,
+		style: {
+			position: "absolute",
+			zIndex: 20,
+			pointerEvents: "none",
+			...style,
+			left: `${selectionBox.x * 100}%`,
+			top: `${selectionBox.y * 100}%`,
+			width: `${selectionBox.width * 100}%`,
+			height: `${selectionBox.height * 100}%`
+		},
+		children
 	});
 }
 //#endregion
 //#region src/components/PointsEditor/index.tsx
-const defaultExternalStyles$2 = {
-	userSelectNone: true,
-	cursor: "grabbing"
+/** One array for every editor with selection turned off, so memos hold still. */
+const EMPTY = [];
+/**
+* How far a point may move before something in the selection leaves its range.
+*
+* Clamping each point on its own would break the shape of the selection: the
+* one that reached the edge would stop while the rest carried on. One amount
+* for all of them means the whole selection stops together.
+*/
+function allowedDelta(delta, entries) {
+	let loX = -Infinity;
+	let hiX = Infinity;
+	let loY = -Infinity;
+	let hiY = Infinity;
+	for (const { start, registration } of entries) {
+		loX = Math.max(loX, (registration.min?.x ?? 0) - start.x);
+		hiX = Math.min(hiX, (registration.max?.x ?? 1) - start.x);
+		loY = Math.max(loY, (registration.min?.y ?? 0) - start.y);
+		hiY = Math.min(hiY, (registration.max?.y ?? 1) - start.y);
+	}
+	return {
+		x: hiX < loX ? 0 : (0, _tremolo_ui_functions.clamp)(delta.x, loX, hiX),
+		y: hiY < loY ? 0 : (0, _tremolo_ui_functions.clamp)(delta.y, loY, hiY)
+	};
+}
+/**
+* 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_WHEEL = ["normalized", .01];
+/**
+* Shift is the fine-adjustment key everywhere else, so it is bound here too
+* — but only on the keyboard. On the wheel it already means the x axis, and
+* browsers hand shift+wheel over as horizontal scrolling anyway.
+*/
+const DEFAULT_KEYBOARD = {
+	default: ["normalized", .01],
+	shift: ["normalized", .001]
 };
 /**
 * Multiple Point Controller
 */
 const PointsEditor = {
-	Root: (0, react.forwardRef)(({ width = 200, height = 100, disabled = false, readonly = false, externalStyles: _externalStyles, style, className, children, ...props }, forwardedRef) => {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsEditorProvider, {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ width, height, disabled = false, readonly = false, wheel = DEFAULT_WHEEL, keyboard = DEFAULT_KEYBOARD, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, selectable = false, selection: selectionProp, defaultSelection, onSelectionChange, externalStyles, style, className, children, ...props }, forwardedRef) => {
+		const containerRef = (0, react.useRef)(null);
+		const { cursor = "grabbing" } = externalStyles ?? {};
+		const controlled = selectionProp !== void 0;
+		const [ownSelection, setOwnSelection] = (0, react.useState)(defaultSelection ?? []);
+		const selection = selectable ? selectionProp ?? ownSelection : EMPTY;
+		const selectionRef = (0, react.useRef)(selection);
+		const changeHandlerRef = (0, react.useRef)(onSelectionChange);
+		(0, react.useEffect)(() => {
+			selectionRef.current = selection;
+			changeHandlerRef.current = onSelectionChange;
+		});
+		const changeSelection = (0, react.useCallback)((next) => {
+			selectionRef.current = next;
+			if (!controlled) setOwnSelection(next);
+			changeHandlerRef.current?.(next);
+		}, [controlled]);
+		/**
+		* Every mounted point, by id. A registration is a ref rather than a value:
+		* the value inside changes on every frame of a drag, and a registry keyed
+		* on it would be rebuilt just as often.
+		*/
+		const points = (0, react.useRef)(/* @__PURE__ */ new Map());
+		const registerPoint = (0, react.useCallback)((id, entry) => {
+			points.current.set(id, entry);
+			return () => {
+				points.current.delete(id);
+			};
+		}, []);
+		/** What the current drag picked up, and where those points started. */
+		const dragRef = (0, react.useRef)([]);
+		const snapshot = (0, react.useCallback)((ids) => {
+			return ids.flatMap((id) => {
+				const registration = points.current.get(id)?.current;
+				return registration ? [{
+					id,
+					start: { ...registration.value }
+				}] : [];
+			});
+		}, []);
+		const applyDeltaTo = (0, react.useCallback)((entries, delta) => {
+			const withRegistration = entries.flatMap((entry) => {
+				const registration = points.current.get(entry.id)?.current;
+				return registration ? [{
+					...entry,
+					registration
+				}] : [];
+			});
+			const allowed = allowedDelta(delta, withRegistration);
+			for (const { start, registration } of withRegistration) {
+				if (registration.readonly) continue;
+				registration.onChange?.({
+					x: (0, _tremolo_ui_functions.toPrecision)(start.x + allowed.x),
+					y: (0, _tremolo_ui_functions.toPrecision)(start.y + allowed.y)
+				});
+			}
+		}, []);
+		const beginPointDrag = (0, react.useCallback)((id, modifiers) => {
+			if (!selectable) {
+				dragRef.current = snapshot([id]);
+				return;
+			}
+			const current = selectionRef.current;
+			const additive = modifiers.ctrlKey || modifiers.metaKey;
+			let next;
+			if (additive) next = current.includes(id) ? current.filter((x) => x !== id) : [...current, id];
+			else if (current.includes(id)) next = current;
+			else next = [id];
+			changeSelection([...next]);
+			dragRef.current = next.includes(id) ? snapshot(next) : [];
+		}, [
+			selectable,
+			changeSelection,
+			snapshot
+		]);
+		const movePointDrag = (0, react.useCallback)((delta) => applyDeltaTo(dragRef.current, delta), [applyDeltaTo]);
+		const nudgeSelection = (0, react.useCallback)((id, delta) => {
+			const ids = selectionRef.current.includes(id) ? selectionRef.current : [id];
+			applyDeltaTo(snapshot(ids), delta);
+		}, [applyDeltaTo, snapshot]);
+		const isPointElement = (0, react.useCallback)((element) => {
+			if (!element) return false;
+			for (const [, entry] of points.current) if (entry.current.element?.contains(element)) return true;
+			return false;
+		}, []);
+		const nudgeFocusedPoint = (0, react.useCallback)((axis, direction, modifiers) => {
+			const container = containerRef.current;
+			const active = container?.ownerDocument.activeElement;
+			if (!container || !active || !container.contains(active)) return false;
+			for (const [id, entry] of points.current) {
+				const { element, wheel, readonly, onChange, value } = entry.current;
+				if (!element?.contains(active)) continue;
+				if (!wheel || readonly || !onChange) return false;
+				const next = (0, _tremolo_ui_functions.applyDelta)(value[axis], direction, wheel, AXIS, modifiers);
+				nudgeSelection(id, {
+					x: axis === "x" ? next - value.x : 0,
+					y: axis === "y" ? next - value.y : 0
+				});
+				return true;
+			}
+			return false;
+		}, [nudgeSelection]);
+		const [selectionBox, setSelectionBox] = (0, react.useState)(null);
+		const selectionBoxRef = (0, react.useRef)(null);
+		selectionBoxRef.current ??= (0, _tremolo_ui_dom.createSelectionBox)({
+			*items() {
+				for (const [id, entry] of points.current) {
+					const { x, y } = entry.current.value;
+					yield [id, [x, y]];
+				}
+			},
+			onBoxChange: setSelectionBox
+		});
+		(0, react.useEffect)(() => {
+			selectionBoxRef.current?.update({ onSelectionChange: changeSelection });
+		}, [changeSelection]);
+		(0, react.useEffect)(() => {
+			const box = selectionBoxRef.current;
+			return () => box?.destroy();
+		}, []);
+		const beginSelectionBox = (0, react.useCallback)((at, modifiers) => {
+			if (!selectable) return;
+			selectionBoxRef.current?.begin([at.x, at.y], {
+				additive: modifiers.ctrlKey || modifiers.metaKey,
+				selection: selectionRef.current
+			});
+		}, [selectable]);
+		const moveSelectionBox = (0, react.useCallback)((to) => {
+			selectionBoxRef.current?.move([to.x, to.y]);
+		}, []);
+		const endSelectionBox = (0, react.useCallback)(() => {
+			if (!selectionBoxRef.current?.end()) return;
+			const [first] = selectionRef.current;
+			if (first) points.current.get(first)?.current.element?.focus();
+		}, []);
+		const context = (0, react.useMemo)(() => ({
 			disabled,
 			readonly,
-			externalStyles: {
-				...defaultExternalStyles$2,
-				..._externalStyles
-			},
+			wheel,
+			keyboard,
+			dragSensitivity,
+			externalStyles: { cursor },
+			containerRef,
+			selectable,
+			selection,
+			registerPoint,
+			isPointElement,
+			beginPointDrag,
+			movePointDrag,
+			nudgeSelection,
+			nudgeFocusedPoint,
+			selectionBox,
+			beginSelectionBox,
+			moveSelectionBox,
+			endSelectionBox
+		}), [
+			disabled,
+			readonly,
+			wheel,
+			keyboard,
+			dragSensitivity,
+			cursor,
+			selectable,
+			selection,
+			registerPoint,
+			isPointElement,
+			beginPointDrag,
+			movePointDrag,
+			nudgeSelection,
+			nudgeFocusedPoint,
+			selectionBox,
+			beginSelectionBox,
+			moveSelectionBox,
+			endSelectionBox
+		]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointsEditorProvider, {
+			value: context,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: forwardedRef,
-				className: (0, clsx.default)("tremolo-points-editor", className),
+				className,
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readonly ? "" : void 0,
 				style: {
-					width,
-					height,
+					"--width": cssLength(width),
+					"--height": cssLength(height),
+					position: "relative",
 					...style
 				},
 				...props,
@@ -1554,108 +2083,84 @@ const PointsEditor = {
 	}),
 	Background,
 	Container,
-	Point
-};
-//#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
-	}));
+	Point,
+	SelectionBox
 };
-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
-	});
-}
+//#endregion
+//#region src/components/Slider/context.tsx
+const SliderContext = /* @__PURE__ */ (0, react.createContext)(null);
+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, mark = true, label, thickness, length, gap, labelWidth, classes, styles, className, style, ...props }) {
+	useCheckPlacement("Slider.MarksOption", "Slider.Marks");
 	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,
 		style: {
+			"--thickness": cssLength(thickness),
+			"--length": cssLength(length),
+			"--gap": cssLength(gap),
+			"--label-width": cssLength(labelWidth),
+			position: "absolute",
+			translate: vertical ? "var(--translate, 0 -50%)" : "var(--translate, -50% 0)",
+			zIndex: 10,
+			...style,
 			left: !vertical ? `${calcPercent(value)}%` : void 0,
-			top: vertical ? `${calcPercent(value)}%` : void 0,
-			...style
+			top: vertical ? `${calcPercent(value)}%` : void 0
 		},
-		"data-vertical": vertical,
+		"data-orientation": vertical ? "vertical" : "horizontal",
 		...props,
-		children: [type != "number" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("tremolo-slider-scale-option-mark", classes?.mark),
-			style: {
-				width: !vertical ? thickness : length,
-				height: vertical ? thickness : length,
-				marginBottom: !vertical ? gap : void 0,
-				marginRight: vertical ? gap : void 0,
-				...styles?.mark
-			},
-			"data-vertical": vertical
-		}), type != "mark" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("tremolo-slider-scale-option-label", classes?.label),
-			style: {
-				width: labelWidth,
-				...styles?.label
-			},
-			children: label || value
+		children: [mark && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: classes?.mark,
+			style: styles?.mark,
+			"data-orientation": vertical ? "vertical" : "horizontal"
+		}), label !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: classes?.label,
+			style: styles?.label,
+			children: label ?? value
 		})]
 	});
 }
 //#endregion
 //#region src/components/Slider/type.ts
 function generateOptionsList(options, min, max, step) {
+	const { per, mark = true, label = true } = typeof options === "object" ? options : { per: options };
 	const optionsList = [];
-	const per = options[0] == "step" ? step : options[0];
-	const count = Math.floor(max / per) - Math.ceil(min / per) + 1;
+	const interval = per === "step" ? step : per;
+	const count = Math.floor(max / interval) - Math.ceil(min / interval) + 1;
 	for (let i = 0; i < count; i++) {
-		const value = (0, _tremolo_ui_functions.toFixed)(per * (Math.ceil(min / per) + i), (0, _tremolo_ui_functions.decimalPart)(per)?.length);
+		const value = (0, _tremolo_ui_functions.toFixed)(interval * (Math.ceil(min / interval) + i), (0, _tremolo_ui_functions.decimalPart)(interval)?.length);
 		optionsList.push({
 			value,
-			type: options[1]
+			mark,
+			label
 		});
 	}
 	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, options, children, className, style, ...props }) {
 	const min = useSliderContext((s) => s.min);
 	const max = useSliderContext((s) => s.max);
 	const step = useSliderContext((s) => s.step);
@@ -1664,233 +2169,260 @@ 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,
+		"data-orientation": vertical ? "vertical" : "horizontal",
 		style: {
-			marginLeft: vertical ? gap : void 0,
-			marginTop: !vertical ? gap : void 0,
+			"--gap": cssLength(gap),
+			position: "relative",
 			...style
 		},
 		...props,
-		children: options ? optionsList.map(({ value, type }, index) => {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScaleOption, {
-				value,
-				type
-			}, index);
-		}) : children
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Placement, {
+			name: "Slider.Marks",
+			children: options ? optionsList.map(({ value, mark, label }, index) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarksOption, {
+					value,
+					mark,
+					label: label ? void 0 : null
+				}, 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();
-			}
-		};
-	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "tremolo-slider-thumb-wrapper",
+//#endregion
+//#region src/components/Slider/Thumb.tsx
+const Thumb$1 = /* @__PURE__ */ (0, react.forwardRef)(function Thumb({ color, children, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, ...props }, forwardedRef) {
+	const inputRef = (0, react.useRef)(null);
+	const { value, min, max, step, vertical, disabled, readonly, onChange, percent, thumbRef } = useSliderContext();
+	useCheckPlacement("Slider.Thumb", "Slider.Track");
+	const methods = () => ({
+		focus() {
+			if (!disabled) inputRef.current?.focus();
+		},
+		blur() {
+			inputRef.current?.blur();
+		}
+	});
+	(0, react.useImperativeHandle)(forwardedRef, methods, [disabled]);
+	(0, react.useImperativeHandle)(thumbRef, methods, [disabled]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className,
+		"data-disabled": disabled ? "" : void 0,
+		"data-readonly": readonly ? "" : void 0,
+		...props,
 		style: {
-			top: vertical ? `${__percent}%` : "50%",
-			left: !vertical ? `${__percent}%` : "50%"
+			"--color": color,
+			position: "absolute",
+			translate: "var(--translate, -50% -50%)",
+			zIndex: 100,
+			...style,
+			top: vertical ? `${percent}%` : "50%",
+			left: !vertical ? `${percent}%` : "50%"
 		},
-		children: children ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref: wrapperRef,
-			className: (0, clsx.default)("tremolo-slider-thumb", className),
-			tabIndex: 0,
-			"aria-disabled": disabled,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisuallyHiddenRangeInput, {
+			ref: inputRef,
+			value,
+			min,
+			max,
+			step,
+			disabled,
 			"aria-readonly": readonly,
-			style: {
-				"--color": color,
-				width: size ?? width,
-				height: size ?? height,
-				...style
+			"aria-orientation": vertical ? "vertical" : "horizontal",
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"aria-describedby": ariaDescribedby,
+			"aria-valuetext": ariaValuetext,
+			onChange: (event) => {
+				if (readonly) {
+					event.currentTarget.value = String(value);
+					return;
+				}
+				onChange?.(event.currentTarget.valueAsNumber);
 			}
-		})
+		}), children]
 	});
 });
-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);
-	const direction = vertical ? "bottom" : "right";
-	const colors = {
-		"--active": active,
-		"--inactive": inactive
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("tremolo-slider-track", className),
-		"aria-disabled": disabled,
-		"data-vertical": vertical,
-		style: !defaultStyle ? style : {
-			...colors,
-			background: (0, _tremolo_ui_functions.xor)(vertical, reverse) ? `linear-gradient(to ${direction}, var(--inactive) ${__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,
+//#endregion
+//#region src/components/Slider/Track.tsx
+const Track = /* @__PURE__ */ (0, react.forwardRef)(function Track({ length, thickness, active, inactive, children, className, style, ...props }, forwardedRef) {
+	const { vertical, reverse, disabled, percent, trackRef } = useSliderContext();
+	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, trackRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: composedRef,
+		className,
+		"data-disabled": disabled ? "" : void 0,
+		"data-orientation": vertical ? "vertical" : "horizontal",
+		"data-flipped": (0, _tremolo_ui_functions.xor)(vertical, reverse) ? "" : void 0,
+		style: {
+			"--active": active,
+			"--inactive": inactive,
+			"--length": cssLength(length),
+			"--thickness": cssLength(thickness),
+			"--percent": `${percent}%`,
+			position: "relative",
 			...style
 		},
 		...props,
-		children: [children, __thumb]
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Placement, {
+			name: "Slider.Track",
+			children
+		})
 	});
-}
+});
 //#endregion
 //#region src/components/Slider/index.tsx
-const defaultExternalStyles$1 = {
-	userSelectNone: true,
-	cursor: "pointer"
-};
+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: /* @__PURE__ */ (0, react.forwardRef)(({ value, min, max, step = 1, scale = _tremolo_ui_functions.linearScale, vertical = false, reverse = false, externalStyles: _externalStyles, wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, 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 inactive = disabled || readonly;
+		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
 		]);
+		useCheckSteps({
+			component: "Slider",
+			range: axis,
+			keyboard,
+			wheel
+		});
 		const handleKeyDown = (0, react.useCallback)((event) => {
-			if (!keyboard || !onChange || readonly) return;
 			const key = event.key;
-			if ([
+			if (![
 				"ArrowRight",
 				"ArrowLeft",
 				"ArrowUp",
 				"ArrowDown"
-			].includes(key)) {
-				event.preventDefault();
-				let x = key == "ArrowRight" || key == "ArrowUp" ? keyboard[1] : -keyboard[1];
-				if (reverse) x *= -1;
-				onChange(updateValueByEvent(keyboard[0], x));
-			}
+			].includes(key)) return;
+			event.preventDefault();
+			if (!keyboard || !onChange || inactive) return;
+			let direction = key === "ArrowRight" || key === "ArrowUp" ? 1 : -1;
+			if (reverse) direction *= -1;
+			onChange((0, _tremolo_ui_functions.applyDelta)(value, direction, keyboard, axis, event));
 		}, [
 			keyboard,
 			onChange,
-			readonly,
+			inactive,
 			reverse,
-			updateValueByEvent
+			value,
+			axis
 		]);
-		const { refCallback: dragRefCallback } = useDragWithElement({
-			baseElementRef: trackElementRef,
-			cursor: readonly ? void 0 : externalStyles.cursor,
+		const valueOf = (v) => v[vertical ? 1 : 0];
+		const { refCallback: dragRefCallback } = useDragValue({
+			axis,
+			baseElementRef: trackRef,
+			cursor: inactive ? void 0 : externalStyles.cursor,
+			shouldStart: () => !inactive,
+			sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
 			updateOnPointerDown: true,
-			onDrag,
-			onDragStart: (nx, ny) => {
-				if (readonly) return;
-				if (externalStyles.userSelectNone) addUserSelectNone();
+			onChange: (v) => {
+				if (inactive) return;
+				onChange?.(valueOf(v));
+			},
+			onDragStart: (v) => {
+				if (inactive) return;
 				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) => {
-				if (readonly) return;
-				if (externalStyles.userSelectNone) removeUserSelectNone();
-				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: (v) => {
+				if (inactive) return;
+				onDragEnd?.(valueOf(v));
 			}
 		});
 		const wheelRefCallback = useWheel((event) => {
-			if (!wheel || !onChange || readonly) return;
+			if (!wheel || !onChange || inactive) 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];
+				if (event.deltaY === 0) return;
+				direction = event.deltaY > 0 ? -1 : 1;
 			}
-			if (vertical && reverse) x *= -1;
-			onChange(updateValueByEvent(wheel[0], x));
-		});
+			if (reverse) direction *= -1;
+			onChange((0, _tremolo_ui_functions.applyDelta)(value, direction, wheel, axis, event));
+		}, WHEEL_OPTIONS$1);
+		const rootRefCallback = require_compose_refs.useComposedRefs(dragRefCallback, wheelRefCallback);
+		const context = (0, react.useMemo)(() => ({
+			value,
+			min,
+			max,
+			step,
+			scale,
+			vertical,
+			reverse,
+			disabled,
+			readonly,
+			onChange,
+			percent,
+			trackRef,
+			thumbRef
+		}), [
+			value,
+			min,
+			max,
+			step,
+			scale,
+			vertical,
+			reverse,
+			disabled,
+			readonly,
+			onChange,
+			percent
+		]);
 		(0, react.useImperativeHandle)(forwardedRef, () => {
 			return {
 				focus() {
-					thumbRef.current?.focus();
+					if (!disabled) thumbRef.current?.focus();
 				},
 				blur() {
 					thumbRef.current?.blur();
 				}
 			};
-		}, []);
+		}, [disabled]);
 		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);
-					dragRefCallback(div);
-				},
+				className,
+				ref: rootRefCallback,
+				role: "group",
 				tabIndex: -1,
-				role: "slider",
-				"aria-valuenow": value,
-				"aria-valuemin": min,
-				"aria-valuemax": max,
-				"aria-orientation": vertical ? "vertical" : "horizontal",
-				"aria-disabled": disabled,
-				"aria-readonly": readonly,
-				style: {
-					margin: `calc(${(0, _tremolo_ui_functions.styleHelper)(thumbProps?.size ?? 22)} / 2)`,
-					...style
-				},
+				"data-orientation": vertical ? "vertical" : "horizontal",
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readonly ? "" : void 0,
+				style,
 				onPointerDown,
 				onKeyDown: (event) => {
 					handleKeyDown(event);
 					onKeyDown?.(event);
 				},
 				onFocus: (event) => {
-					thumbRef.current?.focus();
+					if (!disabled) thumbRef.current?.focus();
 					onFocus?.(event);
 				},
 				onBlur: (event) => {
@@ -1898,304 +2430,295 @@ 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);
-			}
-		};
-	};
+//#region src/components/XYPad/context.tsx
+const XYPadContext = /* @__PURE__ */ (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", {
-		className: (0, clsx.default)("tremolo-xy-pad-area", className),
+const Area = /* @__PURE__ */ (0, react.forwardRef)(function Area({ width, height, color, children, className, style, ...props }, forwardedRef) {
+	const { areaRef } = useXYPadContext();
+	const composedRef = require_compose_refs.useComposedRefs(forwardedRef, areaRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: composedRef,
+		className,
 		style: {
 			"--color": color,
-			width,
-			height,
+			"--width": cssLength(width),
+			"--height": cssLength(height),
+			position: "relative",
 			...style
 		},
 		...props,
-		children: [children, __thumb]
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Placement, {
+			name: "XYPad.Area",
+			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();
-			}
-		};
-	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("tremolo-xy-pad-thumb-wrapper", wrapperClassName),
-		style: {
-			...__css,
-			...wrapperStyle
+const Thumb = /* @__PURE__ */ (0, react.forwardRef)(function Thumb({ color, children, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, ...props }, forwardedRef) {
+	const xInputRef = (0, react.useRef)(null);
+	const yInputRef = (0, react.useRef)(null);
+	const { value, min, max, step, disabled, readonly, onChange, percent, thumbRef } = useXYPadContext();
+	useCheckPlacement("XYPad.Thumb", "XYPad.Area");
+	const labels = (0, _tremolo_ui_dom.toXY)(ariaLabel);
+	const labelledby = (0, _tremolo_ui_dom.toXY)(ariaLabelledby);
+	const describedby = (0, _tremolo_ui_dom.toXY)(ariaDescribedby);
+	const valueText = (0, _tremolo_ui_dom.toXY)(ariaValuetext);
+	const methods = () => ({
+		focus() {
+			if (!disabled) xInputRef.current?.focus();
 		},
+		blur() {
+			xInputRef.current?.blur();
+			yInputRef.current?.blur();
+		}
+	});
+	(0, react.useImperativeHandle)(forwardedRef, methods, [disabled]);
+	(0, react.useImperativeHandle)(thumbRef, methods, [disabled]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className,
+		"data-disabled": disabled ? "" : void 0,
+		"data-readonly": readonly ? "" : void 0,
 		...props,
-		children: children ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref: wrapperRef,
-			className: (0, clsx.default)("tremolo-xy-pad-thumb", className),
-			tabIndex: 0,
-			"aria-disabled": __disabled,
-			"aria-readonly": __readonly,
-			style: {
-				"--color": color,
-				width: size ?? width,
-				height: size ?? height,
-				...style
+		style: {
+			"--color": color,
+			position: "absolute",
+			translate: "var(--translate, -50% -50%)",
+			zIndex: 100,
+			...style,
+			left: `${percent[0]}%`,
+			top: `${percent[1]}%`
+		},
+		children: [[0, 1].map((axis) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisuallyHiddenRangeInput, {
+			ref: axis === 0 ? xInputRef : yInputRef,
+			"data-axis": axis === 0 ? "x" : "y",
+			value: value[axis],
+			min: min[axis],
+			max: max[axis],
+			step: step[axis],
+			disabled,
+			"aria-readonly": readonly,
+			"aria-orientation": axis === 0 ? "horizontal" : "vertical",
+			"aria-label": labels[axis] ?? (axis === 0 ? "x" : "y"),
+			"aria-labelledby": labelledby[axis],
+			"aria-describedby": describedby[axis],
+			"aria-valuetext": valueText[axis],
+			onChange: (event) => {
+				if (readonly) {
+					event.currentTarget.value = String(value[axis]);
+					return;
+				}
+				const next = [...value];
+				next[axis] = event.currentTarget.valueAsNumber;
+				onChange?.(next);
 			}
-		})
+		}, axis)), children]
 	});
 });
 //#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"
-};
+const defaultExternalStyles = { 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: /* @__PURE__ */ (0, react.forwardRef)(({ value, min: _min, max: _max, step: _step = 1, scale: _scale = _tremolo_ui_functions.linearScale, reverse: _reverse = false, wheel = DEFAULT_WHEEL_OPTIONS, keyboard = DEFAULT_KEYBOARD_OPTIONS, dragSensitivity = DEFAULT_DRAG_SENSITIVITY, 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 inactive = disabled || readonly;
+		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
+		]);
+		useCheckSteps({
+			component: "XYPad",
+			axis: "x",
+			range: axis[0],
+			keyboard,
+			wheel
+		});
+		useCheckSteps({
+			component: "XYPad",
+			axis: "y",
+			range: axis[1],
+			keyboard,
+			wheel
+		});
+		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, modifiers) => withAxis(i, (0, _tremolo_ui_functions.applyDelta)(value[i], direction, option, axis[i], modifiers)), [
+			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;
 			const key = event.key;
-			if ([
+			if (![
 				"ArrowRight",
 				"ArrowLeft",
 				"ArrowUp",
 				"ArrowDown"
-			].includes(key)) {
-				const isHorizontal = key == "ArrowRight" || key == "ArrowLeft";
-				const target = isHorizontal ? x : y;
-				if (!target.keyboard) return;
-				event.preventDefault();
-				let delta = target.keyboard[1];
-				if (key == "ArrowLeft" || key == "ArrowUp") delta *= -1;
-				if (target.reverse) delta *= -1;
-				const newValue = updateValueByEvent(target.keyboard[0], target, delta);
-				if (isHorizontal) onChange(newValue, y.value);
-				else onChange(x.value, newValue);
-			}
+			].includes(key)) return;
+			const i = key === "ArrowRight" || key === "ArrowLeft" ? 0 : 1;
+			event.preventDefault();
+			if (!onChange || inactive || !keyboard) return;
+			let direction = 1;
+			if (key === "ArrowLeft" || key === "ArrowUp") direction *= -1;
+			if (reverse[i]) direction *= -1;
+			onChange(nudge(i, direction, keyboard, event));
 		}, [
 			onChange,
-			readonly,
-			x,
-			y,
-			updateValueByEvent
+			inactive,
+			keyboard,
+			reverse,
+			nudge
 		]);
-		const { refCallback: dragRefCallback } = useDragWithElement({
-			baseElementRef: areaElementRef,
-			cursor: readonly ? void 0 : externalStyles.cursor,
+		const { refCallback: dragRefCallback } = useDragValue({
+			axis,
+			baseElementRef: areaRef,
+			sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
 			updateOnPointerDown: true,
-			onDrag,
-			onDragStart: (nx, ny) => {
-				if (readonly) return;
-				if (externalStyles.userSelectNone) addUserSelectNone();
+			cursor: inactive ? void 0 : externalStyles.cursor,
+			shouldStart: () => !inactive,
+			onChange: (v) => {
+				if (inactive) return;
+				onChange?.(v);
+			},
+			onDragStart: (v) => {
+				if (inactive) return;
 				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) => {
-				if (readonly) return;
-				if (externalStyles.userSelectNone) removeUserSelectNone();
-				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) => {
+				if (inactive) return;
+				onDragEnd?.(v);
 			}
 		});
 		const wheelRefCallback = useWheel((event) => {
-			if (!onChange || readonly) return;
-			const target = event.shiftKey ? x : y;
-			if (!target.wheel) return;
+			if (!onChange || inactive || !wheel) return;
+			const horizontal = event.deltaX !== 0;
+			const delta = horizontal ? event.deltaX : event.deltaY;
+			if (delta === 0) return;
+			const i = horizontal || 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);
-		});
+			let direction = 1;
+			if (delta < 0) direction *= -1;
+			if (reverse[i]) direction *= -1;
+			onChange(nudge(i, direction, wheel, event));
+		}, WHEEL_OPTIONS);
+		const rootRefCallback = require_compose_refs.useComposedRefs(rootRef, dragRefCallback, wheelRefCallback);
+		const context = (0, react.useMemo)(() => ({
+			value,
+			min,
+			max,
+			step,
+			scale,
+			reverse,
+			disabled,
+			readonly,
+			onChange,
+			percent,
+			areaRef,
+			thumbRef
+		}), [
+			value,
+			min,
+			max,
+			step,
+			scale,
+			reverse,
+			disabled,
+			readonly,
+			onChange,
+			percent
+		]);
 		(0, react.useImperativeHandle)(forwardedRef, () => {
 			return {
 				focus() {
-					thumbRef.current?.focus();
+					if (!disabled) thumbRef.current?.focus();
 				},
 				blur() {
 					thumbRef.current?.blur();
 				},
 				original: rootRef
 			};
-		}, []);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("tremolo-xy-pad", className),
-			ref: composeRefs(rootRef, wheelRefCallback, dragRefCallback),
-			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,
-			onKeyDown: (event) => {
-				handleKeyDown(event);
-				onKeyDown?.(event);
-			},
-			onFocus: (event) => {
-				thumbRef.current?.focus();
-				onFocus?.(event);
-			},
-			onBlur: (event) => {
-				thumbRef.current?.blur();
-				onBlur?.(event);
-			},
-			...props,
+		}, [disabled]);
+		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,
+				ref: rootRefCallback,
+				role: "group",
+				tabIndex: -1,
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readonly ? "" : void 0,
+				style,
+				onPointerDown,
+				onKeyDown: (event) => {
+					handleKeyDown(event);
+					onKeyDown?.(event);
+				},
+				onFocus: (event) => {
+					if (!disabled) thumbRef.current?.focus();
+					onFocus?.(event);
+				},
+				onBlur: (event) => {
+					thumbRef.current?.blur();
+					onBlur?.(event);
+				},
+				...props,
+				children
 			})
 		});
 	}),
@@ -2206,68 +2729,157 @@ const XYPad = {
 //#region src/hooks/useAnimationFrame.ts
 function useAnimationFrame(callback = () => {}, deps = []) {
 	const reqIdRef = (0, react.useRef)(-1);
-	const loop = (0, react.useCallback)(() => {
-		reqIdRef.current = requestAnimationFrame(loop);
-		callback();
-	}, [callback, ...deps]);
+	const runCallback = useCallbackRef(callback);
 	(0, react.useEffect)(() => {
+		const loop = () => {
+			reqIdRef.current = requestAnimationFrame(loop);
+			runCallback();
+		};
 		reqIdRef.current = requestAnimationFrame(loop);
 		return () => cancelAnimationFrame(reqIdRef.current);
-	}, [loop]);
+	}, [runCallback, ...deps]);
 }
 //#endregion
 //#region src/hooks/useMIDIAccess.ts
+const INITIAL_STATE = {
+	midiAccess: null,
+	error: null,
+	inputs: []
+};
+function createMIDIAccessStore() {
+	let instance = null;
+	let unsubscribe = null;
+	let state = INITIAL_STATE;
+	const listeners = /* @__PURE__ */ new Set();
+	function emit() {
+		for (const listener of listeners) listener();
+	}
+	function connect() {
+		const nextInstance = (0, _tremolo_ui_dom.createMIDIAccess)();
+		instance = nextInstance;
+		state = nextInstance.getState();
+		unsubscribe = nextInstance.subscribe(() => {
+			state = nextInstance.getState();
+			emit();
+		});
+		emit();
+		return nextInstance;
+	}
+	function disconnect(currentInstance) {
+		if (instance !== currentInstance) return;
+		unsubscribe?.();
+		unsubscribe = null;
+		instance = null;
+		state = INITIAL_STATE;
+		currentInstance.destroy();
+		emit();
+	}
+	function request(options) {
+		instance?.request(options);
+	}
+	return {
+		connect,
+		disconnect,
+		request,
+		getState: () => state,
+		getServerState: () => INITIAL_STATE,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		}
+	};
+}
 /**
 * Hooks for requesting MIDI access in the browser. The first argument allows you to choose whether to request access on mount.
+*
+* `inputs` follows the devices: it changes as one is plugged in or unplugged,
+* so a list of devices needs no `statechange` listener of its own.
+*
+* `request` takes `{ sysex: true }` when the app needs system exclusive
+* messages. Browsers treat that as a separate, more sensitive permission, so
+* ask for it only when it is actually used.
 */
 function useMIDIAccess(requestOnMount = true) {
-	const instance = (0, react.useMemo)(() => (0, _tremolo_ui_dom.createMIDIAccess)(), []);
-	const { midiAccess, error } = (0, react.useSyncExternalStore)(instance.subscribe, instance.getState, instance.getServerState);
+	const store = (0, react.useMemo)(() => createMIDIAccessStore(), []);
+	const { midiAccess, error, inputs } = (0, react.useSyncExternalStore)(store.subscribe, store.getState, store.getServerState);
 	(0, react.useEffect)(() => {
-		if (requestOnMount) instance.request();
-	}, [instance, requestOnMount]);
+		const instance = store.connect();
+		return () => store.disconnect(instance);
+	}, [store]);
 	(0, react.useEffect)(() => {
-		return () => instance.destroy();
-	}, [instance]);
+		if (requestOnMount) store.request();
+	}, [store, requestOnMount]);
 	return {
-		request: instance.request,
+		request: store.request,
 		midiAccess,
-		error
+		error,
+		inputs
 	};
 }
 //#endregion
 //#region src/hooks/useMIDIInput.ts
 /**
-* Hooks for handling note on/off events. To be used with useMIDIAccess. Internally uses useMIDIMessage.
+* Handle MIDI input events. To be used with {@link useMIDIAccess}.
+*
+* The handlers are read fresh on every event, so writing them inline is fine:
+* the listeners are attached once per `midiAccess` and stay attached. Devices
+* plugged in later are picked up without anything having to be rebuilt.
+*
+* @example
+* const { midiAccess } = useMIDIAccess()
+* useMIDIInput(midiAccess, {
+*   onNoteOnEvent: (note, velocity) => play(note, velocity / 127),
+*   onNoteOffEvent: (note) => stop(note),
+*   onControlChangeEvent: (controller, value) => {
+*     if (controller === 1) setModulation(value / 127)
+*   },
+* })
 */
-function useMIDIInput(midiAccess, onNoteOnEvent, onNoteOffEvent, onPitchBendEvent) {
+function useMIDIInput(midiAccess, handlers) {
+	const latest = (0, react.useRef)(handlers);
+	const instanceRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
-		const instance = (0, _tremolo_ui_dom.createMIDIInput)(midiAccess, {
-			onNoteOnEvent,
-			onNoteOffEvent,
-			onPitchBendEvent
-		});
-		return () => instance.destroy();
-	}, [
-		midiAccess,
-		onNoteOnEvent,
-		onNoteOffEvent,
-		onPitchBendEvent
-	]);
+		const instance = (0, _tremolo_ui_dom.createMIDIInput)(midiAccess, latest.current);
+		instanceRef.current = instance;
+		return () => {
+			instanceRef.current = null;
+			instance.destroy();
+		};
+	}, [midiAccess]);
+	(0, react.useEffect)(() => {
+		latest.current = handlers;
+		instanceRef.current?.update(handlers);
+	});
 }
 //#endregion
 //#region src/hooks/useMIDIMessage.ts
 /**
 * Hooks for when you want to process MIDI events in more detail than useMIDIInput.
+*
+* The handler is read fresh on every event, so writing it inline is fine: the
+* listeners are attached once per `midiAccess` and stay attached, and devices
+* plugged in later are picked up.
 */
 function useMIDIMessage(midiAccess, onMIDIMessage) {
+	const latest = (0, react.useRef)(onMIDIMessage);
+	const instanceRef = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
-		const instance = (0, _tremolo_ui_dom.createMIDIMessage)(midiAccess, onMIDIMessage);
-		return () => instance.destroy();
-	}, [midiAccess, onMIDIMessage]);
+		const instance = (0, _tremolo_ui_dom.createMIDIMessage)(midiAccess, (event) => latest.current(event));
+		instanceRef.current = instance;
+		return () => {
+			instanceRef.current = null;
+			instance.destroy();
+		};
+	}, [midiAccess]);
+	(0, react.useEffect)(() => {
+		latest.current = onMIDIMessage;
+	});
 }
 //#endregion
 exports.AnimationCanvas = AnimationCanvas;
+exports.DEFAULT_DRAG_SENSITIVITY = DEFAULT_DRAG_SENSITIVITY;
+exports.DEFAULT_KEYBOARD_OPTIONS = DEFAULT_KEYBOARD_OPTIONS;
+exports.DEFAULT_WHEEL_OPTIONS = DEFAULT_WHEEL_OPTIONS;
 exports.Knob = Knob;
 Object.defineProperty(exports, "NOT_SUPPORTED", {
 	enumerable: true,
@@ -2282,23 +2894,33 @@ Object.defineProperty(exports, "PERMISSION_DENIED", {
 		return _tremolo_ui_dom.PERMISSION_DENIED;
 	}
 });
+exports.PITCH_BEND_CENTER = _tremolo_ui_dom.PITCH_BEND_CENTER;
 exports.Piano = Piano;
 exports.PointsEditor = PointsEditor;
 exports.SHORTCUTS = SHORTCUTS;
 exports.Slider = Slider;
+Object.defineProperty(exports, "UNAVAILABLE", {
+	enumerable: true,
+	get: function() {
+		return _tremolo_ui_dom.UNAVAILABLE;
+	}
+});
 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.useKnobContext = useKnobContext;
 exports.useLongPress = useLongPress;
 exports.useMIDIAccess = useMIDIAccess;
 exports.useMIDIInput = useMIDIInput;
 exports.useMIDIMessage = useMIDIMessage;
+exports.useNumberInputContext = useNumberInputContext;
+exports.usePointsEditorContext = usePointsEditorContext;
 exports.useSliderContext = useSliderContext;
 exports.useWheel = useWheel;
+exports.useXYPadContext = useXYPadContext;
 
 //# sourceMappingURL=index.cjs.map