@tremolo-ui/react 0.5.0 → 0.6.0

package/dist/index.js

@@ -1,11 +1,15 @@
-import clsx from "clsx";
-import { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useInsertionEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { NOT_SUPPORTED, PERMISSION_DENIED, createAnimationCanvas, createDrag, createDragValue, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createWheel, elementMapping, relativeMapping, toXY } from "@tremolo-ui/dom";
+import { useComposedRefs } from "./compose-refs.js";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { NOT_SUPPORTED, PERMISSION_DENIED, PITCH_BEND_CENTER, UNAVAILABLE, createAnimationCanvas, createDrag, createDragValue, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createSelectionBox, createWheel, elementMapping, relativeMapping, toXY } from "@tremolo-ui/dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { applyDelta, blackKeyWidth, clamp, decimalPart, formatValue, getNoteRangeArray, isWhiteKey, linearScale, noteKey, notePosition, parseValue, pianoWidth, radian, styleHelper, toFixed, xor } from "@tremolo-ui/functions";
+import { applyDelta, blackKeyWidth, clamp, decimalPart, getNoteRangeArray, isWhiteKey, linearScale, mapModifier, noteKey, notePosition, pianoWidth, radian, selectInputEvent, selectModifier, toFixed, toPrecision, xor } from "@tremolo-ui/functions";
 //#region src/components/AnimationCanvas/index.tsx
-function AnimationCanvas({ draw, init, animate = true, options, width = 100, height = 100, relativeSize = false, reduceFlickering = true, className, onContextMenu = (event) => event.preventDefault(), ...props }) {
+/**
+* A simple animatable canvas with requestAnimationFrame()
+*/
+const AnimationCanvas = /* @__PURE__ */ 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] = useState(null);
+	const composedRef = useComposedRefs(forwardedRef, setNode);
 	const latest = useRef({
 		draw,
 		init,
@@ -16,30 +20,6 @@ function AnimationCanvas({ draw, init, animate = true, options, width = 100, hei
 		options
 	});
 	const instanceRef = useRef(null);
-	/** Set while the instance below is newer than the effect that pushes into it. */
-	const justCreated = useRef(false);
-	useEffect(() => {
-		if (!node) return;
-		const current = latest.current;
-		const instance = createAnimationCanvas(node, {
-			draw: (context, frame) => latest.current.draw(context, frame),
-			init: (context, size) => latest.current.init?.(context, size),
-			animate: current.animate,
-			size: {
-				width: current.width,
-				height: current.height
-			},
-			reduceFlickering: current.reduceFlickering,
-			relativeSize,
-			contextAttributes: current.options
-		});
-		instanceRef.current = instance;
-		justCreated.current = true;
-		return () => {
-			instanceRef.current = null;
-			instance.destroy();
-		};
-	}, [node, relativeSize]);
 	useEffect(() => {
 		latest.current = {
 			draw,
@@ -50,10 +30,6 @@ function AnimationCanvas({ draw, init, animate = true, options, width = 100, hei
 			reduceFlickering,
 			options
 		};
-		if (justCreated.current) {
-			justCreated.current = false;
-			return;
-		}
 		instanceRef.current?.update({
 			animate,
 			size: {
@@ -63,12 +39,150 @@ function AnimationCanvas({ draw, init, animate = true, options, width = 100, hei
 			reduceFlickering
 		});
 	});
+	useEffect(() => {
+		if (!node) return;
+		const current = latest.current;
+		const instance = 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();
+		};
+	}, [node, resizable]);
 	return /* @__PURE__ */ jsx("canvas", {
-		className: clsx("tremolo-animation-canvas", className),
-		ref: setNode,
+		className,
+		ref: composedRef,
 		onContextMenu,
 		...props
 	});
+});
+//#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 = 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 = applyDelta(value, 1, options, range, modifiers);
+		const down = 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;
+	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/_internal/useCallbackRef.ts
@@ -93,7 +207,7 @@ function useCallbackRef(callback, deps = []) {
 * @returns a ref callback for the element that starts the drag, and whether a drag is in progress
 */
 function useDragValue(options) {
-	const { axis, baseElementRef, pixelRange, updateOnPointerDown, threshold, cursor } = options;
+	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] = useState(false);
 	const valueGetter = useCallbackRef(options.getValue);
@@ -108,19 +222,24 @@ function useDragValue(options) {
 		if (!node) return;
 		const instance = createDragValue(node, {
 			axis: latest.current.axis,
-			mapping: baseElementRef ? elementMapping(() => baseElementRef.current) : relativeMapping({ pixelRange: [pixelRangeX ?? 100, pixelRangeY ?? 100] }),
+			mapping: baseElementRef ? elementMapping(() => baseElementRef.current, { sensitivity: (state) => latest.current.sensitivity?.(state) ?? 1 }) : 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,
-			onChange: (value) => changeHandler(value),
-			onDragStart: (value) => {
+			pointerLock: latest.current.pointerLock,
+			shouldStart: (event) => latest.current.shouldStart?.(event) ?? true,
+			onChange: (value, state) => changeHandler(value, state),
+			onDragStart: (value, state) => {
 				setDragging(true);
-				dragStartHandler(value);
+				dragStartHandler(value, state);
 			},
-			onDragEnd: (value) => {
+			onDragEnd: (value, state) => {
 				setDragging(false);
-				dragEndHandler(value);
+				dragEndHandler(value, state);
 			}
 		});
 		instanceRef.current = instance;
@@ -144,7 +263,8 @@ function useDragValue(options) {
 			axis,
 			updateOnPointerDown,
 			threshold,
-			cursor
+			cursor,
+			pointerLock
 		});
 	});
 	return {
@@ -178,50 +298,89 @@ function useWheel(onWheel, { requireFocus = false, target } = {}) {
 	return setNode;
 }
 //#endregion
-//#region src/components/_util/index.ts
-function addUserSelectNone() {
-	window.document.body.classList.add("tremolo-user-select-none");
-}
-function removeUserSelectNone() {
-	window.document.body.classList.remove("tremolo-user-select-none");
-}
+//#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/composeRefs.tsx
+//#region src/components/_util/css-length.ts
 /**
-* Set a given ref to a given value
-* This utility takes care of different types of refs: callback refs and RefObject(s)
+* 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 setRef(ref, value) {
-	if (typeof ref === "function") return ref(value);
-	else if (ref !== null && ref !== void 0) ref.current = value;
+function cssLength(value) {
+	return typeof value === "number" ? `${value}px` : value;
 }
+//#endregion
+//#region src/components/_util/Placement.tsx
 /**
-* A utility to compose multiple refs together
-* Accepts callback refs and RefObject(s)
+* The subcomponent that established the current placement, if any.
+*
+* @internal
 */
-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);
-			}
-		};
-	};
+const PlacementContext = /* @__PURE__ */ createContext(null);
+/**
+* Marks its children as being inside `name`, for {@link useCheckPlacement}.
+*
+* @internal
+*/
+function Placement({ name, children }) {
+	return /* @__PURE__ */ jsx(PlacementContext.Provider, {
+		value: name,
+		children
+	});
 }
 /**
-* A custom hook that composes multiple refs
-* Accepts callback refs and RefObject(s)
+* 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 useComposedRefs(...refs) {
-	return useCallback(composeRefs(...refs), refs);
+function useCheckPlacement(child, parent) {
+	const found = useContext(PlacementContext);
+	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
+	]);
 }
 /**
 * 角度から円弧上の点を求める。
@@ -240,6 +399,19 @@ function arcRadius(strokeWidth) {
 	const width = typeof strokeWidth === "number" ? strokeWidth : Number.parseFloat(String(strokeWidth));
 	return Number.isFinite(width) ? 50 - width / 2 : 50;
 }
+/** 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 calcAngles({ value, min, max, scale, startValue, angleRange }) {
 	const p = scale.normalize(value, min, max);
@@ -253,7 +425,7 @@ function calcAngles({ value, min, max, scale, startValue, angleRange }) {
 		r4: angleRange / 2
 	};
 }
-const KnobContext = createContext(null);
+const KnobContext = /* @__PURE__ */ createContext(null);
 const KnobProvider = KnobContext.Provider;
 function useKnobContext(selector) {
 	const context = useContext(KnobContext);
@@ -263,14 +435,13 @@ function useKnobContext(selector) {
 //#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 radius = arcRadius(strokeWidth);
-	const start = pointOnArc(r2, radius);
-	const end = pointOnArc(r3, radius);
 	return /* @__PURE__ */ jsx("path", {
-		className: clsx("tremolo-knob-active-line", className),
-		d: `M ${start.x} ${start.y} A ${radius} ${radius} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${end.x} ${end.y}`,
+		className,
+		d: arcPath(r2, r3, radius),
 		fill: "none",
 		stroke,
 		strokeWidth,
@@ -280,6 +451,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);
@@ -288,20 +460,16 @@ function InactiveLine({ stroke = "currentColor", strokeWidth = 6, className, ...
 	const r3 = useKnobContext((s) => s.r3);
 	const r4 = useKnobContext((s) => s.r4);
 	const radius = arcRadius(strokeWidth);
-	const p1 = pointOnArc(r1, radius);
-	const p2 = pointOnArc(r2, radius);
-	const p3 = pointOnArc(r3, radius);
-	const p4 = pointOnArc(r4, radius);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [startValue > min && /* @__PURE__ */ jsx("path", {
-		className: clsx("tremolo-knob-inactive-line", className),
-		d: `M ${p1.x} ${p1.y} A ${radius} ${radius} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${p2.x} ${p2.y}`,
+		className,
+		d: arcPath(r1, r2, radius),
 		fill: "none",
 		stroke,
 		strokeWidth,
 		...props
 	}), startValue < max && /* @__PURE__ */ jsx("path", {
-		className: clsx("tremolo-knob-inactive-line", className),
-		d: `M ${p3.x} ${p3.y} A ${radius} ${radius} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${p4.x} ${p4.y}`,
+		className,
+		d: arcPath(r3, r4, radius),
 		fill: "none",
 		stroke,
 		strokeWidth,
@@ -318,17 +486,21 @@ function SVGRoot({ children, style, ...props }) {
 			...style
 		},
 		...props,
-		children
+		children: /* @__PURE__ */ 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__ */ jsxs("svg", {
-		className: clsx("tremolo-knob-thumb", classes?.thumb),
+		className,
 		...props,
 		children: [/* @__PURE__ */ jsx("circle", {
 			cx: "50%",
@@ -336,7 +508,7 @@ function Thumb$2({ className, thumb = "currentColor", thumbLine = "currentColor"
 			r: `${thumbSize / 2}%`,
 			fill: thumb
 		}), /* @__PURE__ */ jsx("line", {
-			className: clsx("tremolo-knob-thumb-line", classes?.thumbLine),
+			className: classes?.thumbLine,
 			x1: "50%",
 			y1: `${(100 - clamp(thumbSize, 0, 100)) / 2}%`,
 			x2: "50%",
@@ -352,10 +524,7 @@ function Thumb$2({ className, thumb = "currentColor", thumbLine = "currentColor"
 }
 //#endregion
 //#region src/components/Knob/index.tsx
-const defaultExternalStyles$2 = {
-	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.
@@ -365,12 +534,13 @@ const WHEEL_OPTIONS$2 = { requireFocus: true };
 * Interactive rotary knob component implemented in SVG.
 */
 const Knob = {
-	Root: forwardRef(({ value, min, max, step = 1, scale = linearScale, defaultValue = min, startValue = min, size, externalStyles: _externalStyles, wheel = ["raw", 1], keyboard = ["raw", 1], enableDoubleClickDefault = true, disabled = false, readonly = false, angleRange = 270, onChange, onKeyDown, onPointerDown, onDoubleClick, className, style, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ forwardRef(({ value, min, max, step = 1, scale = 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 = useRef(null);
 		const externalStyles = {
 			...defaultExternalStyles$2,
 			..._externalStyles
 		};
+		const inactive = disabled || readonly;
 		const range = useMemo(() => ({
 			min,
 			max,
@@ -382,8 +552,14 @@ const Knob = {
 			step,
 			scale
 		]);
+		useCheckSteps({
+			component: "Knob",
+			range,
+			keyboard,
+			wheel
+		});
 		const handleKeyDown = useCallback((event) => {
-			if (!keyboard || !onChange || readonly) return;
+			if (!keyboard || !onChange || inactive) return;
 			const key = event.key;
 			if ([
 				"ArrowRight",
@@ -392,12 +568,12 @@ const Knob = {
 				"ArrowDown"
 			].includes(key)) {
 				event.preventDefault();
-				onChange(applyDelta(value, key == "ArrowRight" || key == "ArrowUp" ? 1 : -1, keyboard, range));
+				onChange(applyDelta(value, key === "ArrowRight" || key === "ArrowUp" ? 1 : -1, keyboard, range, event));
 			}
 		}, [
 			keyboard,
 			onChange,
-			readonly,
+			inactive,
 			value,
 			range
 		]);
@@ -407,25 +583,23 @@ const Knob = {
 				reverse: true
 			}], [range]),
 			getValue: () => [value, value],
+			sensitivity: (state) => selectModifier(dragSensitivity, state.event).value,
 			threshold: 1,
-			cursor: readonly ? void 0 : externalStyles.cursor,
+			cursor: inactive ? void 0 : externalStyles.cursor,
+			pointerLock: inactive ? false : pointerLock,
+			shouldStart: () => !inactive,
 			onChange: (v) => {
-				if (readonly) return;
+				if (inactive) return;
 				onChange?.(v[1]);
-			},
-			onDragStart: () => {
-				if (externalStyles.userSelectNone) addUserSelectNone();
-			},
-			onDragEnd: () => {
-				if (externalStyles.userSelectNone) removeUserSelectNone();
 			}
 		});
-		const rootRefCallback = useComposedRefs(elmRef, dragRefCallback, useWheel((event) => {
-			if (!wheel || readonly) return;
+		const wheelRefCallback = useWheel((event) => {
+			if (!wheel || inactive) return;
 			event.preventDefault();
-			if (!onChange || event.deltaY == 0) return;
-			onChange(applyDelta(value, -Math.sign(event.deltaY), wheel, range));
-		}, WHEEL_OPTIONS$2));
+			if (!onChange || event.deltaY === 0) return;
+			onChange(applyDelta(value, -Math.sign(event.deltaY), wheel, range, event));
+		}, WHEEL_OPTIONS$2);
+		const rootRefCallback = useComposedRefs(elmRef, dragRefCallback, wheelRefCallback);
 		const context = useMemo(() => {
 			const config = {
 				value,
@@ -452,34 +626,35 @@ const Knob = {
 		useImperativeHandle(forwardedRef, () => {
 			return {
 				focus() {
-					elmRef.current?.focus();
+					if (!disabled) elmRef.current?.focus();
 				},
 				blur() {
 					elmRef.current?.blur();
 				}
 			};
-		}, []);
+		}, [disabled]);
 		return /* @__PURE__ */ jsx(KnobProvider, {
 			value: context,
 			children: /* @__PURE__ */ jsx("div", {
 				ref: rootRefCallback,
-				className: clsx("tremolo-knob", className),
-				tabIndex: 0,
+				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) => {
@@ -498,14 +673,14 @@ const Knob = {
 };
 //#endregion
 //#region src/components/NumberInput/context.tsx
-const NumberInputContext = createContext(null);
+const NumberInputContext = /* @__PURE__ */ createContext(null);
 const NumberInputProvider = NumberInputContext.Provider;
 function useNumberInputContext(selector) {
 	const context = useContext(NumberInputContext);
 	if (!context) throw new Error("Missing NumberInputContext.Provider in the tree");
 	return selector ? selector(context) : context;
 }
-const StepperContext = createContext(null);
+const StepperContext = /* @__PURE__ */ createContext(null);
 const StepperProvider = StepperContext.Provider;
 function useStepperContext() {
 	return useContext(StepperContext);
@@ -514,22 +689,26 @@ function useStepperContext() {
 //#region src/hooks/useEventListener.ts
 function useEventListener(target, event, handler, options) {
 	const listener = useCallbackRef(handler);
+	const cleanupRef = useRef(() => {});
 	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 useCallback(() => cleanupRef.current(), []);
 }
 //#endregion
 //#region src/hooks/useInterval.ts
@@ -553,47 +732,61 @@ function useInterval(callback, delay) {
 function useLongPress(callback, initialDelay = 500, interval = 40) {
 	const [pressed, setPressed] = useState(false);
 	const [delay, setDelay] = useState(initialDelay);
+	const activePointerId = useRef(null);
+	const isPressed = useRef(false);
 	useInterval(() => {
 		callback();
 		setDelay(interval);
 	}, pressed ? delay : null);
-	useEventListener(globalThis.window, "pointerup", () => {
+	const stop = 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);
+	});
+	useEventListener(globalThis.window, "pointercancel", (event) => {
+		stop(event.pointerId);
+	});
+	useEventListener(globalThis.window, "blur", () => {
+		stop();
 	});
-	return useCallback(() => {
+	return 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/stepperButton.tsx
+//#region src/components/NumberInput/StepperButton.tsx
 /**
 * Shared body of `IncrementStepper` and `DecrementStepper`: the two differ only
 * in which way they move the value and which arrow they draw.
 */
 function StepperButton({ direction, variant, icon, className, style, children, onPointerDown, ...props }) {
-	const { step, readonly, atMin, atMax, nudge } = useNumberInputContext();
+	const { step, disabled, readonly, atMin, atMax, nudge } = useNumberInputContext();
 	const stepper = useStepperContext();
-	const press = useLongPress(useCallback(() => {
+	const press = useLongPress(() => {
 		if (stepper?.draggingRef.current) return;
 		nudge(direction, ["raw", step]);
-	}, [
-		stepper,
-		nudge,
-		direction,
-		step
-	]));
+	});
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx(`tremolo-number-input-${variant}-stepper`, className),
+		className,
 		role: "button",
 		tabIndex: -1,
 		"aria-label": direction > 0 ? "Increment" : "Decrement",
-		"aria-disabled": direction > 0 ? atMax : atMin,
-		"aria-readonly": readonly,
+		"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 (!readonly) press();
+			if (!disabled && !readonly) press(event);
 			onPointerDown?.(event);
 		},
 		...props,
@@ -602,7 +795,10 @@ function StepperButton({ direction, variant, icon, className, style, children, o
 }
 function StepperArrow({ up }) {
 	return /* @__PURE__ */ jsx("svg", {
-		className: "tremolo-number-input-stepper-icon",
+		style: {
+			width: "var(--stepper-icon-size)",
+			height: "var(--stepper-icon-size)"
+		},
 		viewBox: "0 0 24 24",
 		fill: "none",
 		stroke: "currentColor",
@@ -638,56 +834,111 @@ function IncrementStepper(props) {
 //#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`).
 */
-function InputField({ selectOnFocus = "none", blurOnEnter = true, className, style, ref, onFocus, onBlur, onKeyDown, ...props }) {
-	const { value, min, max, step, disabled, readonly, keyboard, text, outOfRange, setDraft, commitDraft, nudge, inputRef } = useNumberInputContext();
+const InputField = /* @__PURE__ */ 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] = useState(false);
+	const shown = unformatOnFocus && focused && !editing ? String(value) : text;
+	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);
+	}, [
+		focused,
+		selectOnFocus,
+		inputRef
+	]);
+	/**
+	* Where to put the caret once the stepped value has been rendered, and the
+	* text it was measured against.
+	*/
+	const caretAfterStep = useRef(null);
+	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);
+	});
+	const composedRef = useComposedRefs(forwardedRef, inputRef);
 	return /* @__PURE__ */ jsx("input", {
-		ref: useComposedRefs(ref, inputRef),
-		className: clsx("tremolo-number-input-field", className),
+		ref: composedRef,
+		className,
 		type: "text",
 		inputMode: "decimal",
 		role: "spinbutton",
-		value: text,
+		value: shown,
+		disabled,
 		readOnly: readonly,
 		"aria-disabled": disabled,
 		"aria-readonly": readonly,
+		"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,
+		"data-out-of-range": outOfRange ? "" : void 0,
 		style,
-		onChange: (event) => setDraft(event.currentTarget.value),
+		onChange: (event) => {
+			caretAfterStep.current = null;
+			setDraft(event.currentTarget.value);
+		},
 		onFocus: (event) => {
-			const input = event.currentTarget;
-			if (selectOnFocus == "all") input.setSelectionRange(0, input.value.length);
-			else if (selectOnFocus == "number") input.setSelectionRange(0, input.value.match(NUMBER_PREFIX)?.[0].length ?? 0);
+			setFocused(true);
 			onFocus?.(event);
 		},
 		onBlur: (event) => {
+			setFocused(false);
 			commitDraft();
 			onBlur?.(event);
 		},
 		onKeyDown: (event) => {
 			const key = event.key;
-			if (key == "Enter") {
+			if (key === "Enter") {
 				commitDraft();
 				if (blurOnEnter) event.currentTarget.blur();
-			} else if (keyboard && !readonly && (key == "ArrowUp" || key == "ArrowDown")) {
+			} else if (keyboard && !disabled && !readonly && (key === "ArrowUp" || key === "ArrowDown") && !event.nativeEvent.isComposing) {
 				event.preventDefault();
-				nudge(key == "ArrowUp" ? 1 : -1, keyboard);
+				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/hooks/useDrag.ts
 /**
@@ -695,7 +946,7 @@ function InputField({ selectOnFocus = "none", blurOnEnter = true, className, sty
 *
 * @returns a ref callback to attach to the element being dragged
 */
-function useDrag({ threshold = 1, cursor, onDrag, onDragStart, onDragEnd }) {
+function useDrag({ threshold = 1, cursor, pointerLock, onDrag, onDragStart, onDragEnd }) {
 	const dragHandler = useCallbackRef(onDrag);
 	const dragStartHandler = useCallbackRef(onDragStart);
 	const dragEndHandler = useCallbackRef(onDragEnd);
@@ -705,15 +956,17 @@ function useDrag({ threshold = 1, cursor, onDrag, onDragStart, onDragEnd }) {
 		const instance = createDrag(node, {
 			threshold,
 			cursor,
-			onDragStart: () => dragStartHandler(),
-			onDrag: ({ x, y, deltaX, deltaY }) => dragHandler(x, y, deltaX, deltaY),
-			onDragEnd: () => dragEndHandler()
+			pointerLock,
+			onDragStart: (state) => dragStartHandler(state),
+			onDrag: (state) => dragHandler(state.x, state.y, state.deltaX, state.deltaY, state),
+			onDragEnd: (state) => dragEndHandler(state)
 		});
 		return () => instance.destroy();
 	}, [
 		node,
 		threshold,
 		cursor,
+		pointerLock,
 		dragHandler,
 		dragStartHandler,
 		dragEndHandler
@@ -729,8 +982,17 @@ function useDrag({ threshold = 1, cursor, onDrag, onDragStart, onDragEnd }) {
 * The drag lives here rather than on `InputField` because `createDrag` turns
 * off text selection on whatever element it is attached to.
 */
-function Stepper({ className, style, children, ref, ...props }) {
-	const { value, step, readonly, drag, range, changeValue } = useNumberInputContext();
+const Stepper = /* @__PURE__ */ 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 = useMemo(() => 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,
@@ -743,60 +1005,90 @@ function Stepper({ className, style, children, ref, ...props }) {
 	* have been nudged once, and the drag should carry on from there.
 	*/
 	const originRef = 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 = useRef(1);
+	const previousYRef = useRef(0);
 	const dragRefCallback = useDrag({
 		threshold: 1,
-		cursor: readonly ? void 0 : "ns-resize",
-		onDragStart: () => {
+		cursor: inactive ? void 0 : "ns-resize",
+		pointerLock: inactive ? false : pointerLock,
+		onDragStart: (state) => {
 			originRef.current = null;
 			draggingRef.current = false;
+			factorRef.current = selectModifier(dragSensitivity, state.event).value;
 		},
-		onDrag: (_x, y) => {
-			if (readonly || drag == null) return;
+		onDrag: (_x, y, _dx, _dy, state) => {
+			if (inactive || drag === null) return;
 			if (!originRef.current) {
 				originRef.current = {
 					y,
 					value
 				};
+				previousYRef.current = y;
 				return;
 			}
+			const factor = 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;
+			if (steps === 0) return;
 			draggingRef.current = true;
-			changeValue(applyDelta(originRef.current.value, steps, ["raw", step], range));
+			changeValue(applyDelta(originRef.current.value, steps, dragOptions, rawRange, state.event));
 		},
 		onDragEnd: () => {
 			draggingRef.current = false;
 		}
 	});
-	const composedRef = useComposedRefs(ref, drag != null && !readonly ? dragRefCallback : void 0);
+	const composedRef = useComposedRefs(forwardedRef, drag !== null && !inactive ? dragRefCallback : void 0);
+	const context = useMemo(() => ({ draggingRef }), []);
 	return /* @__PURE__ */ jsx(StepperProvider, {
-		value: useMemo(() => ({ draggingRef }), []),
+		value: context,
 		children: /* @__PURE__ */ jsx("div", {
 			ref: composedRef,
-			className: clsx("tremolo-number-input-stepper", className),
+			className,
 			style,
 			...props,
 			children
 		})
 	});
-}
+});
+//#endregion
+//#region src/components/NumberInput/index.tsx
+/**
+* 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.
+*/
+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;
+};
 /**
 * Input with some useful functions for entering numerical values.
 */
 const NumberInput = {
-	Root: forwardRef(({ value, min, max, step = 1, scale = linearScale, units, digit, format: formatProp, parse: parseProp, clampValue = true, wheel = ["raw", 1], keyboard = ["raw", 1], drag = 1, disabled = false, readonly = false, className, style, onChange, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ forwardRef(({ value, min, max, step = 1, scale = 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 = 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] = useState(null);
-		const format = useCallback((v) => formatProp ? formatProp(v) : formatValue(v, units, digit), [
-			formatProp,
-			units,
-			digit
-		]);
-		const parse = useCallback((t) => parseProp ? parseProp(t) : parseValue(t, units), [parseProp, units]);
+		const inactive = disabled || readonly;
+		const format = formatProp ?? defaultFormat;
+		const parse = parseProp ?? defaultParse;
 		const range = useMemo(() => ({
 			min: (clampValue ? min : void 0) ?? Number.MIN_SAFE_INTEGER,
 			max: (clampValue ? max : void 0) ?? Number.MAX_SAFE_INTEGER,
@@ -809,49 +1101,90 @@ const NumberInput = {
 			step,
 			scale
 		]);
+		const rawRange = 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: 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 editing = draft !== null;
+		const outOfRange = !editing && (min !== void 0 && value < min || max !== void 0 && value > max);
 		const handleDraft = useCallback((next) => {
-			if (readonly) return;
+			if (inactive) return;
 			setDraft(next);
 			const parsed = parse(next);
 			if (Number.isFinite(parsed)) onChange?.(parsed);
 		}, [
-			readonly,
+			inactive,
 			parse,
 			onChange
 		]);
 		const changeValue = useCallback((next) => {
-			if (readonly) return;
+			if (inactive) return;
 			setDraft(null);
-			if (next != value) onChange?.(next);
+			if (next !== value) onChange?.(next);
 		}, [
-			readonly,
+			inactive,
 			value,
 			onChange
 		]);
 		const commitDraft = useCallback(() => {
-			if (draft == null || readonly) return;
-			changeValue(clamp(parse(draft), range.min, range.max));
+			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);
 		}, [
 			draft,
-			readonly,
+			inactive,
 			parse,
-			range,
+			clampValue,
+			min,
+			max,
 			changeValue
 		]);
-		const nudge = useCallback((direction, option) => {
-			changeValue(applyDelta(value, direction, option, range));
+		const nudge = useCallback((direction, option, modifiers) => {
+			const [mode] = selectInputEvent(option, modifiers).option;
+			changeValue(applyDelta(value, direction, option, mode === "raw" ? rawRange : range, modifiers));
 		}, [
 			changeValue,
 			value,
+			rawRange,
 			range
 		]);
 		const wheelRefCallback = useWheel((event) => {
-			if (!wheel || readonly || event.deltaY == 0) return;
+			if (!wheel || inactive || event.deltaY === 0) return;
 			event.preventDefault();
-			nudge(-Math.sign(event.deltaY), wheel);
+			nudge(-Math.sign(event.deltaY), wheel, event);
 		}, { requireFocus: true });
 		const context = useMemo(() => ({
 			value,
@@ -863,12 +1196,19 @@ const NumberInput = {
 			readonly,
 			clampValue,
 			range,
+			rawRange,
 			keyboard,
 			text,
 			editing,
 			outOfRange,
-			atMin: clampValue && min != void 0 && value <= min,
-			atMax: clampValue && max != void 0 && value >= max,
+			dragSensitivity,
+			pointerLock,
+			selectOnFocus,
+			unformatOnFocus,
+			keepCaretOnStep,
+			blurOnEnter,
+			atMin: clampValue && min !== void 0 && value <= min,
+			atMax: clampValue && max !== void 0 && value >= max,
 			drag,
 			format,
 			parse,
@@ -887,11 +1227,18 @@ const NumberInput = {
 			readonly,
 			clampValue,
 			range,
+			rawRange,
 			keyboard,
 			text,
 			editing,
 			outOfRange,
 			drag,
+			dragSensitivity,
+			pointerLock,
+			selectOnFocus,
+			unformatOnFocus,
+			keepCaretOnStep,
+			blurOnEnter,
 			format,
 			parse,
 			handleDraft,
@@ -902,20 +1249,20 @@ const NumberInput = {
 		useImperativeHandle(forwardedRef, () => {
 			return {
 				focus() {
-					inputRef.current?.focus();
+					if (!disabled) inputRef.current?.focus();
 				},
 				blur() {
 					inputRef.current?.blur();
 				}
 			};
-		}, []);
+		}, [disabled]);
 		return /* @__PURE__ */ jsx(NumberInputProvider, {
 			value: context,
 			children: /* @__PURE__ */ jsx("div", {
 				ref: wheelRefCallback,
-				className: clsx("tremolo-number-input", className),
-				"aria-disabled": disabled,
-				"aria-readonly": readonly,
+				className,
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readonly ? "" : void 0,
 				style,
 				...props,
 				children
@@ -928,11 +1275,12 @@ const NumberInput = {
 	DecrementStepper
 };
 //#endregion
-//#region src/components/Piano/keyboardShortcuts.ts
+//#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",
@@ -952,6 +1300,7 @@ const SHORTCUTS = {
 		"p",
 		";"
 	] },
+	/** The white keys only, on the home row. Black keys have no shortcut. */
 	HOME_ROW_NATURAL: { keys: [
 		"a",
 		"",
@@ -972,26 +1321,41 @@ const SHORTCUTS = {
 		";"
 	] }
 };
+//#endregion
+//#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;
+}
 /**
 * Customizable piano component.
 */
-const Piano = { Root: forwardRef(function Root({ noteRange, glissando = true, midiMax = 127, keyboardShortcuts, fill = false, whiteKeyWidth = 40, keyGap = 1, blackKeyWidthRatio = .65, blackKeyHeightRatio = .6, height = fill ? "100%" : 160, style, className, label, keyProps, onPlayNote, onStopNote, ...props }, forwardedRef) {
+const Piano = { Root: /* @__PURE__ */ 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] = useState(null);
 	const [activeNotes, setActiveNotes] = useState([]);
-	/** Set while `fill` is on, measured from the parent. */
-	const [filledKeyWidth, setFilledKeyWidth] = useState(whiteKeyWidth);
+	/** Set while `resizable` is on, measured from the parent. */
+	const [resizedKeyWidth, setResizedKeyWidth] = useState(whiteKeyWidth);
 	const notes = useMemo(() => getNoteRangeArray(noteRange), [noteRange]);
 	const whiteKeyCount = useMemo(() => notes.filter(isWhiteKey).length, [notes]);
 	const layout = useMemo(() => ({
 		noteRange,
-		whiteKeyWidth: fill ? filledKeyWidth : whiteKeyWidth,
+		whiteKeyWidth: resizable ? resizedKeyWidth : whiteKeyWidth,
 		keyGap,
 		blackKeyWidthRatio,
 		blackKeyHeightRatio
 	}), [
 		noteRange,
-		fill,
-		filledKeyWidth,
+		resizable,
+		resizedKeyWidth,
 		whiteKeyWidth,
 		keyGap,
 		blackKeyWidthRatio,
@@ -1005,6 +1369,11 @@ const Piano = { Root: forwardRef(function Root({ noteRange, glissando = true, mi
 		onStopNote
 	});
 	const instanceRef = useRef(null);
+	const shortcutNotes = useRef(/* @__PURE__ */ new Map());
+	const releaseShortcutNotes = useCallback(() => {
+		for (const { note, source } of shortcutNotes.current.values()) instanceRef.current?.noteOff(note, { source });
+		shortcutNotes.current.clear();
+	}, []);
 	useEffect(() => {
 		if (!node) return;
 		const instance = createPianoInput(node, {
@@ -1036,35 +1405,76 @@ const Piano = { Root: forwardRef(function Root({ noteRange, glissando = true, mi
 		});
 	});
 	useEffect(() => {
-		if (!fill || !node) return;
+		if (!resizable || !node) return;
 		const parent = node.parentElement;
 		if (!parent) throw new Error("doesn't have a parent element.");
 		const resizeObserver = new ResizeObserver(() => {
-			setFilledKeyWidth(node.clientWidth / whiteKeyCount - keyGap);
+			setResizedKeyWidth(node.clientWidth / Math.max(whiteKeyCount, 1) - keyGap);
 		});
 		resizeObserver.observe(parent);
 		return () => resizeObserver.disconnect();
 	}, [
-		fill,
+		resizable,
 		node,
 		whiteKeyCount,
 		keyGap
 	]);
+	const shortcutKeys = keyboardShortcuts?.keys;
+	const hasShortcuts = shortcutKeys !== void 0;
+	const shortcutMapping = shortcutKeys?.join("\0");
+	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 (!keyboardShortcuts || key === "") return null;
-		const index = keyboardShortcuts.keys.indexOf(key);
-		return index === -1 ? null : noteRange.first + index;
+		if (!shortcutKeys || key === "") return null;
+		const index = shortcutKeys.indexOf(key);
+		const note = noteRange.first + index;
+		return index === -1 || note > noteRange.last ? null : note;
 	}
-	useEventListener(globalThis.window, "keydown", (e) => {
-		if (e.repeat) return;
+	const shortcutTarget = useMemo(() => () => {
+		if (!hasShortcuts) return null;
+		return keyboardShortcutsScope === "window" ? globalThis.window : node;
+	}, [
+		hasShortcuts,
+		keyboardShortcutsScope,
+		node
+	]);
+	const focusOutTarget = useMemo(() => () => hasShortcuts && keyboardShortcutsScope === "root" ? node : null, [
+		hasShortcuts,
+		keyboardShortcutsScope,
+		node
+	]);
+	const windowBlurTarget = 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) instanceRef.current?.noteOn(note, { source: "keyboard" });
+		if (note === null) return;
+		const source = `keyboard:${key}`;
+		shortcutNotes.current.set(key, {
+			note,
+			source
+		});
+		instanceRef.current?.noteOn(note, { source });
 	});
-	useEventListener(globalThis.window, "keyup", (e) => {
-		const note = shortcutNote(e.key);
-		if (note !== null) instanceRef.current?.noteOff(note, { source: "keyboard" });
+	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);
 	useImperativeHandle(forwardedRef, () => ({
 		playNote: (note, velocity) => instanceRef.current?.noteOn(note, {
 			source: "api",
@@ -1074,10 +1484,14 @@ const Piano = { Root: forwardRef(function Root({ noteRange, glissando = true, mi
 	}), []);
 	return /* @__PURE__ */ jsx("div", {
 		ref: setNode,
-		className: clsx("tremolo-piano", className),
+		className,
+		"data-resizable": resizable ? "" : void 0,
+		role: "group",
+		tabIndex: 0,
 		style: {
-			width: fill ? "100%" : pianoWidth(layout),
-			height,
+			width: resizable ? "100%" : pianoWidth(layout),
+			"--height": cssLength(height),
+			position: "relative",
 			...style
 		},
 		...props,
@@ -1092,22 +1506,24 @@ const Piano = { Root: forwardRef(function Root({ noteRange, glissando = true, mi
 			const { className: keyClassName, style: keyStyle, ...rest } = keyProps?.(note, state) ?? {};
 			const content = label?.(note, state);
 			return /* @__PURE__ */ jsx("div", {
-				className: clsx(`tremolo-piano-${keyType}-key`, keyClassName),
+				className: keyClassName,
 				"data-note": note,
 				"data-note-key": noteKey(note),
-				"data-active": state.active,
-				"aria-disabled": state.disabled,
+				"data-active": state.active ? "" : void 0,
+				"data-disabled": state.disabled ? "" : void 0,
 				...rest,
 				style: {
+					position: "absolute",
+					zIndex: keyType === "white" ? 1 : 2,
 					...keyStyle,
 					left: notePosition(note, layout),
 					width: keyType === "white" ? layout.whiteKeyWidth : blackKeyWidth(layout),
 					height: keyType === "white" ? "100%" : `${blackKeyHeightRatio * 100}%`
 				},
 				children: content !== "" && content !== null && content !== void 0 && /* @__PURE__ */ jsx("div", {
-					className: "tremolo-piano-key-label-wrapper",
+					className: classes?.keyLabelWrapper,
 					children: /* @__PURE__ */ jsx("div", {
-						className: "tremolo-piano-key-label",
+						className: classes?.keyLabel,
 						children: content
 					})
 				})
@@ -1117,16 +1533,22 @@ const Piano = { Root: forwardRef(function Root({ noteRange, glissando = true, mi
 }) };
 //#endregion
 //#region src/components/PointsEditor/Background.tsx
-function Background({ className, children, ...props }) {
+function Background({ className, children, style, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("tremolo-points-editor-background", className),
+		className,
+		style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: 0,
+			...style
+		},
 		...props,
 		children
 	});
 }
 //#endregion
 //#region src/components/PointsEditor/context.tsx
-const PointsEditorContext = createContext(null);
+const PointsEditorContext = /* @__PURE__ */ createContext(null);
 const PointsEditorProvider = PointsEditorContext.Provider;
 function usePointsEditorContext(selector) {
 	const context = useContext(PointsEditorContext);
@@ -1134,15 +1556,26 @@ function usePointsEditorContext(selector) {
 	return selector ? selector(context) : context;
 }
 //#endregion
-//#region src/components/PointsEditor/Container.tsx
-function Container({ children, className, ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		ref: useComposedRefs(ref, usePointsEditorContext((s) => s.containerRef)),
-		className: clsx("tremolo-points-editor-container", className),
-		...props,
-		children
-	});
-}
+//#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__ */ forwardRef((props, ref) => /* @__PURE__ */ jsx("input", {
+	...props,
+	ref,
+	type: "range",
+	style: hiddenStyle
+}));
 //#endregion
 //#region src/components/PointsEditor/Point.tsx
 function clampPoint(point, min, max) {
@@ -1160,138 +1593,463 @@ const AXIS = {
 	min: 0,
 	max: 1
 };
-function Point({ value, min, max, size, width = 16, height = 16, color, disabled: _disabled, readonly: _readonly, wheel: _wheel, keyboard: _keyboard, onChange, onDragStart, onDragEnd, className, style, onPointerDown, onKeyDown, ...props }) {
-	const { containerRef, externalStyles, disabled: rootDisabled, readonly: rootReadonly, wheel: rootWheel, keyboard: rootKeyboard } = usePointsEditorContext();
+/**
+* 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 = 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] = useState(null);
+	const xInputRef = useRef(null);
+	const yInputRef = useRef(null);
+	const registration = useRef({
+		value,
+		min,
+		max,
+		readonly: inactive,
+		onChange,
+		element,
+		wheel
+	});
+	useEffect(() => {
+		registration.current = {
+			value,
+			min,
+			max,
+			readonly: inactive,
+			onChange,
+			element,
+			wheel
+		};
+	});
+	useEffect(() => registerPoint(id, registration), [id, registerPoint]);
+	/** Where the pointer was when the drag started, to measure the move from. */
+	const pointerOrigin = useRef(null);
 	const { refCallback: dragRefCallback, dragging } = useDragValue({
 		axis: AXIS,
 		baseElementRef: containerRef,
-		cursor: readonly ? void 0 : externalStyles.cursor,
+		sensitivity: (state) => selectModifier(dragSensitivity, state.event).value,
+		cursor: inactive ? void 0 : externalStyles.cursor,
+		shouldStart: () => !disabled,
 		onChange: ([x, y]) => {
-			if (readonly) return;
-			onChange?.(clampPoint({
-				x,
-				y
-			}, min, max));
+			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: ([x, y]) => {
-			if (readonly) return;
-			if (externalStyles.userSelectNone) removeUserSelectNone();
-			onDragEnd?.(clampPoint({
-				x,
-				y
-			}, min, max));
+		onDragEnd: () => {
+			pointerOrigin.current = null;
+			if (inactive) return;
+			onDragEnd?.(clampPoint(value, min, max));
 		}
 	});
-	const nudge = useCallback((axis, direction, option) => {
-		const next = applyDelta(value[axis], direction, option, AXIS);
-		onChange?.(clampPoint({
-			...value,
-			[axis]: next
-		}, min, max));
+	const nudge = useCallback((axis, direction, option, modifiers) => {
+		const next = applyDelta(value[axis], direction, option, AXIS, modifiers);
+		nudgeSelection(id, {
+			x: axis === "x" ? next - value.x : 0,
+			y: axis === "y" ? next - value.y : 0
+		});
 	}, [
 		value,
-		min,
-		max,
-		onChange
+		id,
+		nudgeSelection
 	]);
-	useWheel((event) => {
-		if (!onChange || readonly || !wheel) return;
-		if (!element || element.ownerDocument.activeElement !== element) return;
-		event.preventDefault();
-		nudge(event.shiftKey ? "x" : "y", event.deltaY < 0 ? -1 : 1, wheel);
-	}, { target: containerRef });
 	const refCallback = useComposedRefs(dragRefCallback, setElement);
 	const handleKeyDown = (event) => {
-		if (!onChange || readonly || !keyboard) return;
 		const key = event.key;
-		if ([
+		if (![
 			"ArrowRight",
 			"ArrowLeft",
 			"ArrowUp",
 			"ArrowDown"
-		].includes(key)) {
-			event.preventDefault();
-			nudge(key === "ArrowRight" || key === "ArrowLeft" ? "x" : "y", key === "ArrowLeft" || key === "ArrowUp" ? -1 : 1, keyboard);
-		}
+		].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 colors = { "--color": color };
-	return /* @__PURE__ */ jsx("div", {
+	const current = clampPoint(value, min, max);
+	return /* @__PURE__ */ jsxs("div", {
 		ref: refCallback,
-		className: clsx("tremolo-points-editor-point", className),
-		tabIndex: 0,
-		"aria-disabled": disabled,
-		"aria-readonly": readonly,
-		"data-dragging": dragging,
+		className,
+		"data-disabled": disabled ? "" : void 0,
+		"data-readonly": readonly ? "" : void 0,
+		tabIndex: -1,
+		"data-dragging": dragging ? "" : void 0,
+		"data-selected": selected ? "" : void 0,
 		style: {
-			...colors,
-			width: size ?? width,
-			height: size ?? height,
+			"--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}%`,
-			...style
+			top: `${value.y * 100}%`
 		},
 		onPointerDown,
+		onFocus: (event) => {
+			if (!disabled && event.target === event.currentTarget) xInputRef.current?.focus();
+			onFocus?.(event);
+		},
 		onKeyDown: (event) => {
 			handleKeyDown(event);
 			onKeyDown?.(event);
 		},
-		...props
+		...props,
+		children: [["x", "y"].map((axis) => /* @__PURE__ */ 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__ */ 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
+			}, state.event);
+		},
+		onChange: ([x, y]) => moveSelectionBox({
+			x,
+			y
+		}),
+		onDragEnd: endSelectionBox
+	});
+	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 = useComposedRefs(forwardedRef, containerRef, selectable && !disabled ? dragRefCallback : void 0);
+	return /* @__PURE__ */ jsx("div", {
+		ref: composedRef,
+		className,
+		style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: 10,
+			...style
+		},
+		...props,
+		children: /* @__PURE__ */ 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__ */ 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
+/** 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 : clamp(delta.x, loX, hiX),
+		y: hiY < loY ? 0 : 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_INPUT_EVENT_OPTION = ["normalized", .01];
+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: forwardRef(({ width = 200, height = 100, disabled = false, readonly = false, wheel = DEFAULT_INPUT_EVENT_OPTION, keyboard = DEFAULT_INPUT_EVENT_OPTION, externalStyles, style, className, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ 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 = useRef(null);
-		const { userSelectNone = true, cursor = "grabbing" } = externalStyles ?? {};
+		const { cursor = "grabbing" } = externalStyles ?? {};
+		const controlled = selectionProp !== void 0;
+		const [ownSelection, setOwnSelection] = useState(defaultSelection ?? []);
+		const selection = selectable ? selectionProp ?? ownSelection : EMPTY;
+		const selectionRef = useRef(selection);
+		const changeHandlerRef = useRef(onSelectionChange);
+		useEffect(() => {
+			selectionRef.current = selection;
+			changeHandlerRef.current = onSelectionChange;
+		});
+		const changeSelection = 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 = useRef(/* @__PURE__ */ new Map());
+		const registerPoint = 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 = useRef([]);
+		const snapshot = useCallback((ids) => {
+			return ids.flatMap((id) => {
+				const registration = points.current.get(id)?.current;
+				return registration ? [{
+					id,
+					start: { ...registration.value }
+				}] : [];
+			});
+		}, []);
+		const applyDeltaTo = 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: toPrecision(start.x + allowed.x),
+					y: toPrecision(start.y + allowed.y)
+				});
+			}
+		}, []);
+		const beginPointDrag = 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 = useCallback((delta) => applyDeltaTo(dragRef.current, delta), [applyDeltaTo]);
+		const nudgeSelection = useCallback((id, delta) => {
+			const ids = selectionRef.current.includes(id) ? selectionRef.current : [id];
+			applyDeltaTo(snapshot(ids), delta);
+		}, [applyDeltaTo, snapshot]);
+		const isPointElement = useCallback((element) => {
+			if (!element) return false;
+			for (const [, entry] of points.current) if (entry.current.element?.contains(element)) return true;
+			return false;
+		}, []);
+		const nudgeFocusedPoint = 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 = 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] = useState(null);
+		const selectionBoxRef = useRef(null);
+		selectionBoxRef.current ??= createSelectionBox({
+			*items() {
+				for (const [id, entry] of points.current) {
+					const { x, y } = entry.current.value;
+					yield [id, [x, y]];
+				}
+			},
+			onBoxChange: setSelectionBox
+		});
+		useEffect(() => {
+			selectionBoxRef.current?.update({ onSelectionChange: changeSelection });
+		}, [changeSelection]);
+		useEffect(() => {
+			const box = selectionBoxRef.current;
+			return () => box?.destroy();
+		}, []);
+		const beginSelectionBox = useCallback((at, modifiers) => {
+			if (!selectable) return;
+			selectionBoxRef.current?.begin([at.x, at.y], {
+				additive: modifiers.ctrlKey || modifiers.metaKey,
+				selection: selectionRef.current
+			});
+		}, [selectable]);
+		const moveSelectionBox = useCallback((to) => {
+			selectionBoxRef.current?.move([to.x, to.y]);
+		}, []);
+		const endSelectionBox = useCallback(() => {
+			if (!selectionBoxRef.current?.end()) return;
+			const [first] = selectionRef.current;
+			if (first) points.current.get(first)?.current.element?.focus();
+		}, []);
+		const context = useMemo(() => ({
+			disabled,
+			readonly,
+			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__ */ jsx(PointsEditorProvider, {
-			value: useMemo(() => ({
-				disabled,
-				readonly,
-				wheel,
-				keyboard,
-				externalStyles: {
-					userSelectNone,
-					cursor
-				},
-				containerRef
-			}), [
-				disabled,
-				readonly,
-				wheel,
-				keyboard,
-				userSelectNone,
-				cursor
-			]),
+			value: context,
 			children: /* @__PURE__ */ jsx("div", {
 				ref: forwardedRef,
-				className: clsx("tremolo-points-editor", className),
-				"aria-disabled": disabled,
-				"aria-readonly": readonly,
+				className,
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readonly ? "" : void 0,
 				style: {
-					width,
-					height,
+					"--width": cssLength(width),
+					"--height": cssLength(height),
+					position: "relative",
 					...style
 				},
 				...props,
@@ -1301,11 +2059,12 @@ const PointsEditor = {
 	}),
 	Background,
 	Container,
-	Point
+	Point,
+	SelectionBox
 };
 //#endregion
 //#region src/components/Slider/context.tsx
-const SliderContext = createContext(null);
+const SliderContext = /* @__PURE__ */ createContext(null);
 const SliderProvider = SliderContext.Provider;
 function useSliderContext(selector) {
 	const context = useContext(SliderContext);
@@ -1314,7 +2073,8 @@ function useSliderContext(selector) {
 }
 //#endregion
 //#region src/components/Slider/MarksOption.tsx
-function MarksOption({ value, type = "mark-number", label, thickness = 1, length = "0.5rem", gap = 2, labelWidth, classes, styles, className, style, ...props }) {
+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 scale = useSliderContext((s) => s.scale);
@@ -1331,52 +2091,52 @@ function MarksOption({ value, type = "mark-number", label, thickness = 1, length
 		scale
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("tremolo-slider-marks-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__ */ jsx("div", {
-			className: clsx("tremolo-slider-marks-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__ */ jsx("div", {
-			className: clsx("tremolo-slider-marks-option-label", classes?.label),
-			style: {
-				width: labelWidth,
-				...styles?.label
-			},
-			children: label || value
+		children: [mark && /* @__PURE__ */ jsx("div", {
+			className: classes?.mark,
+			style: styles?.mark,
+			"data-orientation": vertical ? "vertical" : "horizontal"
+		}), label !== null && /* @__PURE__ */ 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 = toFixed(per * (Math.ceil(min / per) + i), decimalPart(per)?.length);
+		const value = toFixed(interval * (Math.ceil(min / interval) + i), decimalPart(interval)?.length);
 		optionsList.push({
 			value,
-			type: options[1]
+			mark,
+			label
 		});
 	}
 	return optionsList;
 }
 //#endregion
 //#region src/components/Slider/Marks.tsx
-function Marks({ gap = 6, options, children, className, style, ...props }) {
+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);
@@ -1385,86 +2145,109 @@ function Marks({ gap = 6, options, children, className, style, ...props }) {
 	const optionsList = options ? generateOptionsList(options, min, max, step) : [];
 	if (xor(vertical, reverse)) optionsList.reverse();
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("tremolo-slider-marks", 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__ */ jsx(MarksOption, {
-				value,
-				type
-			}, index);
-		}) : children
+		children: /* @__PURE__ */ jsx(Placement, {
+			name: "Slider.Marks",
+			children: options ? optionsList.map(({ value, mark, label }, index) => {
+				return /* @__PURE__ */ jsx(MarksOption, {
+					value,
+					mark,
+					label: label ? void 0 : null
+				}, index);
+			}) : children
+		})
 	});
 }
 //#endregion
 //#region src/components/Slider/Thumb.tsx
-function Thumb$1({ color, children, className, style, ref }) {
-	const elementRef = useRef(null);
-	const { vertical, disabled, readonly, percent, thumbRef } = useSliderContext();
+const Thumb$1 = /* @__PURE__ */ forwardRef(function Thumb({ color, children, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, ...props }, forwardedRef) {
+	const inputRef = useRef(null);
+	const { value, min, max, step, vertical, disabled, readonly, onChange, percent, thumbRef } = useSliderContext();
+	useCheckPlacement("Slider.Thumb", "Slider.Track");
 	const methods = () => ({
 		focus() {
-			elementRef.current?.focus();
+			if (!disabled) inputRef.current?.focus();
 		},
 		blur() {
-			elementRef.current?.blur();
+			inputRef.current?.blur();
 		}
 	});
-	useImperativeHandle(ref, methods, []);
-	useImperativeHandle(thumbRef, methods, []);
-	return /* @__PURE__ */ jsx("div", {
-		className: "tremolo-slider-thumb-wrapper",
+	useImperativeHandle(forwardedRef, methods, [disabled]);
+	useImperativeHandle(thumbRef, methods, [disabled]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-disabled": disabled ? "" : void 0,
+		"data-readonly": readonly ? "" : void 0,
+		...props,
 		style: {
+			"--color": color,
+			position: "absolute",
+			translate: "var(--translate, -50% -50%)",
+			zIndex: 100,
+			...style,
 			top: vertical ? `${percent}%` : "50%",
 			left: !vertical ? `${percent}%` : "50%"
 		},
-		children: children ? children : /* @__PURE__ */ jsx("div", {
-			ref: elementRef,
-			className: clsx("tremolo-slider-thumb", className),
-			tabIndex: 0,
-			"aria-disabled": disabled,
+		children: [/* @__PURE__ */ jsx(VisuallyHiddenRangeInput, {
+			ref: inputRef,
+			value,
+			min,
+			max,
+			step,
+			disabled,
 			"aria-readonly": readonly,
-			style: {
-				"--color": color,
-				...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, ref, ...props }) {
+});
+//#endregion
+//#region src/components/Slider/Track.tsx
+const Track = /* @__PURE__ */ forwardRef(function Track({ length, thickness, active, inactive, children, className, style, ...props }, forwardedRef) {
 	const { vertical, reverse, disabled, percent, trackRef } = useSliderContext();
-	const composedRef = useComposedRefs(ref, trackRef);
-	const direction = vertical ? "bottom" : "right";
-	const colors = {
-		"--active": active,
-		"--inactive": inactive
-	};
+	const composedRef = useComposedRefs(forwardedRef, trackRef);
 	return /* @__PURE__ */ jsx("div", {
 		ref: composedRef,
-		className: clsx("tremolo-slider-track", className),
-		"aria-disabled": disabled,
-		"data-vertical": vertical,
-		style: !defaultStyle ? style : {
-			...colors,
-			background: xor(vertical, reverse) ? `linear-gradient(to ${direction}, var(--inactive) ${percent}%, var(--active) ${percent}%)` : `linear-gradient(to ${direction}, var(--active) ${percent}%, var(--inactive) ${percent}%)`,
-			borderRadius: styleHelper(thickness, "/", 2),
-			width: !vertical ? length : thickness,
-			height: vertical ? length : thickness,
+		className,
+		"data-disabled": disabled ? "" : void 0,
+		"data-orientation": vertical ? "vertical" : "horizontal",
+		"data-flipped": xor(vertical, reverse) ? "" : void 0,
+		style: {
+			"--active": active,
+			"--inactive": inactive,
+			"--length": cssLength(length),
+			"--thickness": cssLength(thickness),
+			"--percent": `${percent}%`,
+			position: "relative",
 			...style
 		},
 		...props,
-		children
+		children: /* @__PURE__ */ 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.
@@ -1474,13 +2257,14 @@ const WHEEL_OPTIONS$1 = { requireFocus: true };
 * Customizable slider
 */
 const Slider = {
-	Root: forwardRef(({ value, min, max, step = 1, scale = linearScale, vertical = false, reverse = false, externalStyles: _externalStyles, wheel = ["raw", 1], keyboard = ["raw", 1], disabled = false, readonly = false, onChange, onDragStart, onDragEnd, className, style, children, onFocus, onBlur, onPointerDown, onKeyDown, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ forwardRef(({ value, min, max, step = 1, scale = 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 = useRef(null);
 		const thumbRef = useRef(null);
 		const externalStyles = {
 			...defaultExternalStyles$1,
 			..._externalStyles
 		};
+		const inactive = disabled || readonly;
 		const p = toFixed(scale.normalize(value, min, max) * 100);
 		const rev = toFixed(100 - p);
 		const displayReversed = useMemo(() => xor(vertical, reverse), [vertical, reverse]);
@@ -1498,24 +2282,29 @@ const Slider = {
 			scale,
 			displayReversed
 		]);
+		useCheckSteps({
+			component: "Slider",
+			range: axis,
+			keyboard,
+			wheel
+		});
 		const handleKeyDown = useCallback((event) => {
-			if (!keyboard || !onChange || readonly) return;
 			const key = event.key;
-			if ([
+			if (![
 				"ArrowRight",
 				"ArrowLeft",
 				"ArrowUp",
 				"ArrowDown"
-			].includes(key)) {
-				event.preventDefault();
-				let direction = key == "ArrowRight" || key == "ArrowUp" ? 1 : -1;
-				if (reverse) direction *= -1;
-				onChange(applyDelta(value, direction, keyboard, axis));
-			}
+			].includes(key)) return;
+			event.preventDefault();
+			if (!keyboard || !onChange || inactive) return;
+			let direction = key === "ArrowRight" || key === "ArrowUp" ? 1 : -1;
+			if (reverse) direction *= -1;
+			onChange(applyDelta(value, direction, keyboard, axis, event));
 		}, [
 			keyboard,
 			onChange,
-			readonly,
+			inactive,
 			reverse,
 			value,
 			axis
@@ -1524,36 +2313,37 @@ const Slider = {
 		const { refCallback: dragRefCallback } = useDragValue({
 			axis,
 			baseElementRef: trackRef,
-			cursor: readonly ? void 0 : externalStyles.cursor,
+			cursor: inactive ? void 0 : externalStyles.cursor,
+			shouldStart: () => !inactive,
+			sensitivity: (state) => selectModifier(dragSensitivity, state.event).value,
 			updateOnPointerDown: true,
 			onChange: (v) => {
-				if (readonly) return;
+				if (inactive) return;
 				onChange?.(valueOf(v));
 			},
 			onDragStart: (v) => {
-				if (readonly) return;
-				if (externalStyles.userSelectNone) addUserSelectNone();
+				if (inactive) return;
 				thumbRef.current?.focus();
 				onDragStart?.(valueOf(v));
 			},
 			onDragEnd: (v) => {
-				if (readonly) return;
-				if (externalStyles.userSelectNone) removeUserSelectNone();
+				if (inactive) return;
 				onDragEnd?.(valueOf(v));
 			}
 		});
-		const rootRefCallback = useComposedRefs(dragRefCallback, useWheel((event) => {
-			if (!wheel || !onChange || readonly) return;
+		const wheelRefCallback = useWheel((event) => {
+			if (!wheel || !onChange || inactive) return;
 			event.preventDefault();
 			let direction;
-			if (!vertical && event.deltaX != 0) direction = event.deltaX > 0 ? 1 : -1;
+			if (!vertical && event.deltaX !== 0) direction = event.deltaX > 0 ? 1 : -1;
 			else {
-				if (event.deltaY == 0) return;
+				if (event.deltaY === 0) return;
 				direction = event.deltaY > 0 ? -1 : 1;
 			}
-			if (vertical && reverse) direction *= -1;
-			onChange(applyDelta(value, direction, wheel, axis));
-		}, WHEEL_OPTIONS$1));
+			if (reverse) direction *= -1;
+			onChange(applyDelta(value, direction, wheel, axis, event));
+		}, WHEEL_OPTIONS$1);
+		const rootRefCallback = useComposedRefs(dragRefCallback, wheelRefCallback);
 		const context = useMemo(() => ({
 			value,
 			min,
@@ -1564,6 +2354,7 @@ const Slider = {
 			reverse,
 			disabled,
 			readonly,
+			onChange,
 			percent,
 			trackRef,
 			thumbRef
@@ -1577,32 +2368,29 @@ const Slider = {
 			reverse,
 			disabled,
 			readonly,
+			onChange,
 			percent
 		]);
 		useImperativeHandle(forwardedRef, () => {
 			return {
 				focus() {
-					thumbRef.current?.focus();
+					if (!disabled) thumbRef.current?.focus();
 				},
 				blur() {
 					thumbRef.current?.blur();
 				}
 			};
-		}, []);
+		}, [disabled]);
 		return /* @__PURE__ */ jsx(SliderProvider, {
 			value: context,
 			children: /* @__PURE__ */ jsx("div", {
-				className: clsx("tremolo-slider", className),
+				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,
-				"data-vertical": vertical,
+				"data-orientation": vertical ? "vertical" : "horizontal",
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readonly ? "" : void 0,
 				style,
 				onPointerDown,
 				onKeyDown: (event) => {
@@ -1610,7 +2398,7 @@ const Slider = {
 					onKeyDown?.(event);
 				},
 				onFocus: (event) => {
-					thumbRef.current?.focus();
+					if (!disabled) thumbRef.current?.focus();
 					onFocus?.(event);
 				},
 				onBlur: (event) => {
@@ -1629,7 +2417,7 @@ const Slider = {
 };
 //#endregion
 //#region src/components/XYPad/context.tsx
-const XYPadContext = createContext(null);
+const XYPadContext = /* @__PURE__ */ createContext(null);
 const XYPadProvider = XYPadContext.Provider;
 function useXYPadContext(selector) {
 	const context = useContext(XYPadContext);
@@ -1638,63 +2426,91 @@ function useXYPadContext(selector) {
 }
 //#endregion
 //#region src/components/XYPad/Area.tsx
-function Area({ width = 120, height = 120, color, children, className, style, ref, ...props }) {
+const Area = /* @__PURE__ */ forwardRef(function Area({ width, height, color, children, className, style, ...props }, forwardedRef) {
 	const { areaRef } = useXYPadContext();
+	const composedRef = useComposedRefs(forwardedRef, areaRef);
 	return /* @__PURE__ */ jsx("div", {
-		ref: useComposedRefs(ref, areaRef),
-		className: clsx("tremolo-xy-pad-area", className),
+		ref: composedRef,
+		className,
 		style: {
 			"--color": color,
-			width,
-			height,
+			"--width": cssLength(width),
+			"--height": cssLength(height),
+			position: "relative",
 			...style
 		},
 		...props,
-		children
+		children: /* @__PURE__ */ jsx(Placement, {
+			name: "XYPad.Area",
+			children
+		})
 	});
-}
+});
 //#endregion
 //#region src/components/XYPad/Thumb.tsx
-function Thumb({ color, children, wrapperClassName, wrapperStyle, className, style, ref, ...props }) {
-	const elementRef = useRef(null);
-	const { disabled, readonly, percent, thumbRef } = useXYPadContext();
+const Thumb = /* @__PURE__ */ forwardRef(function Thumb({ color, children, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, ...props }, forwardedRef) {
+	const xInputRef = useRef(null);
+	const yInputRef = useRef(null);
+	const { value, min, max, step, disabled, readonly, onChange, percent, thumbRef } = useXYPadContext();
+	useCheckPlacement("XYPad.Thumb", "XYPad.Area");
+	const labels = toXY(ariaLabel);
+	const labelledby = toXY(ariaLabelledby);
+	const describedby = toXY(ariaDescribedby);
+	const valueText = toXY(ariaValuetext);
 	const methods = () => ({
 		focus() {
-			elementRef.current?.focus();
+			if (!disabled) xInputRef.current?.focus();
 		},
 		blur() {
-			elementRef.current?.blur();
+			xInputRef.current?.blur();
+			yInputRef.current?.blur();
 		}
 	});
-	useImperativeHandle(ref, methods, []);
-	useImperativeHandle(thumbRef, methods, []);
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("tremolo-xy-pad-thumb-wrapper", wrapperClassName),
+	useImperativeHandle(forwardedRef, methods, [disabled]);
+	useImperativeHandle(thumbRef, methods, [disabled]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-disabled": disabled ? "" : void 0,
+		"data-readonly": readonly ? "" : void 0,
+		...props,
 		style: {
+			"--color": color,
+			position: "absolute",
+			translate: "var(--translate, -50% -50%)",
+			zIndex: 100,
+			...style,
 			left: `${percent[0]}%`,
-			top: `${percent[1]}%`,
-			...wrapperStyle
+			top: `${percent[1]}%`
 		},
-		...props,
-		children: children ? children : /* @__PURE__ */ jsx("div", {
-			ref: elementRef,
-			className: clsx("tremolo-xy-pad-thumb", className),
-			tabIndex: 0,
-			"aria-disabled": disabled,
+		children: [[0, 1].map((axis) => /* @__PURE__ */ 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,
-			style: {
-				"--color": color,
-				...style
+			"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 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.
@@ -1704,7 +2520,7 @@ const WHEEL_OPTIONS = { requireFocus: true };
 * Simple XYPad
 */
 const XYPad = {
-	Root: forwardRef(({ value, min: _min, max: _max, step: _step = 1, scale: _scale = linearScale, reverse: _reverse = false, wheel = ["raw", 1], keyboard = ["raw", 1], className, style, externalStyles: _externalStyles, disabled = false, readonly = false, onChange, onDragStart, onDragEnd, onPointerDown, onKeyDown, onFocus, onBlur, children, ...props }, forwardedRef) => {
+	Root: /* @__PURE__ */ forwardRef(({ value, min: _min, max: _max, step: _step = 1, scale: _scale = 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 = useRef(null);
 		const areaRef = useRef(null);
 		const thumbRef = useRef(null);
@@ -1712,6 +2528,7 @@ const XYPad = {
 			...defaultExternalStyles,
 			..._externalStyles
 		};
+		const inactive = disabled || readonly;
 		const min = useMemo(() => toXY(_min), [_min]);
 		const max = useMemo(() => toXY(_max), [_max]);
 		const step = useMemo(() => toXY(_step), [_step]);
@@ -1740,32 +2557,45 @@ const XYPad = {
 			scale,
 			reverse
 		]);
-		const withAxis = useCallback((axis, next) => axis == 0 ? [next, value[1]] : [value[0], next], [value]);
+		useCheckSteps({
+			component: "XYPad",
+			axis: "x",
+			range: axis[0],
+			keyboard,
+			wheel
+		});
+		useCheckSteps({
+			component: "XYPad",
+			axis: "y",
+			range: axis[1],
+			keyboard,
+			wheel
+		});
+		const withAxis = useCallback((axis, next) => axis === 0 ? [next, value[1]] : [value[0], next], [value]);
 		/** @param i 0 = x, 1 = y */
-		const nudge = useCallback((i, direction, option) => withAxis(i, applyDelta(value[i], direction, option, axis[i])), [
+		const nudge = useCallback((i, direction, option, modifiers) => withAxis(i, applyDelta(value[i], direction, option, axis[i], modifiers)), [
 			value,
 			axis,
 			withAxis
 		]);
 		const handleKeyDown = useCallback((event) => {
-			if (!onChange || readonly || !keyboard) return;
 			const key = event.key;
-			if ([
+			if (![
 				"ArrowRight",
 				"ArrowLeft",
 				"ArrowUp",
 				"ArrowDown"
-			].includes(key)) {
-				const i = key == "ArrowRight" || key == "ArrowLeft" ? 0 : 1;
-				event.preventDefault();
-				let direction = 1;
-				if (key == "ArrowLeft" || key == "ArrowUp") direction *= -1;
-				if (reverse[i]) direction *= -1;
-				onChange(nudge(i, direction, keyboard));
-			}
+			].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,
+			inactive,
 			keyboard,
 			reverse,
 			nudge
@@ -1773,33 +2603,37 @@ const XYPad = {
 		const { refCallback: dragRefCallback } = useDragValue({
 			axis,
 			baseElementRef: areaRef,
+			sensitivity: (state) => selectModifier(dragSensitivity, state.event).value,
 			updateOnPointerDown: true,
-			cursor: readonly ? void 0 : externalStyles.cursor,
+			cursor: inactive ? void 0 : externalStyles.cursor,
+			shouldStart: () => !inactive,
 			onChange: (v) => {
-				if (readonly) return;
+				if (inactive) return;
 				onChange?.(v);
 			},
 			onDragStart: (v) => {
-				if (readonly) return;
-				if (externalStyles.userSelectNone) addUserSelectNone();
+				if (inactive) return;
 				thumbRef.current?.focus();
 				onDragStart?.(v);
 			},
 			onDragEnd: (v) => {
-				if (readonly) return;
-				if (externalStyles.userSelectNone) removeUserSelectNone();
+				if (inactive) return;
 				onDragEnd?.(v);
 			}
 		});
-		const rootRefCallback = useComposedRefs(rootRef, dragRefCallback, useWheel((event) => {
-			if (!onChange || readonly || !wheel) return;
-			const i = event.shiftKey ? 0 : 1;
+		const wheelRefCallback = useWheel((event) => {
+			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 direction = 1;
-			if (event.deltaY < 0) direction *= -1;
+			if (delta < 0) direction *= -1;
 			if (reverse[i]) direction *= -1;
-			onChange(nudge(i, direction, wheel));
-		}, WHEEL_OPTIONS));
+			onChange(nudge(i, direction, wheel, event));
+		}, WHEEL_OPTIONS);
+		const rootRefCallback = useComposedRefs(rootRef, dragRefCallback, wheelRefCallback);
 		const context = useMemo(() => ({
 			value,
 			min,
@@ -1809,6 +2643,7 @@ const XYPad = {
 			reverse,
 			disabled,
 			readonly,
+			onChange,
 			percent,
 			areaRef,
 			thumbRef
@@ -1821,27 +2656,29 @@ const XYPad = {
 			reverse,
 			disabled,
 			readonly,
+			onChange,
 			percent
 		]);
 		useImperativeHandle(forwardedRef, () => {
 			return {
 				focus() {
-					thumbRef.current?.focus();
+					if (!disabled) thumbRef.current?.focus();
 				},
 				blur() {
 					thumbRef.current?.blur();
 				},
 				original: rootRef
 			};
-		}, []);
+		}, [disabled]);
 		return /* @__PURE__ */ jsx(XYPadProvider, {
 			value: context,
 			children: /* @__PURE__ */ jsx("div", {
-				className: clsx("tremolo-xy-pad", className),
+				className,
 				ref: rootRefCallback,
+				role: "group",
 				tabIndex: -1,
-				"aria-disabled": disabled,
-				"aria-readonly": readonly,
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readonly ? "" : void 0,
 				style,
 				onPointerDown,
 				onKeyDown: (event) => {
@@ -1849,7 +2686,7 @@ const XYPad = {
 					onKeyDown?.(event);
 				},
 				onFocus: (event) => {
-					thumbRef.current?.focus();
+					if (!disabled) thumbRef.current?.focus();
 					onFocus?.(event);
 				},
 				onBlur: (event) => {
@@ -1868,67 +2705,153 @@ const XYPad = {
 //#region src/hooks/useAnimationFrame.ts
 function useAnimationFrame(callback = () => {}, deps = []) {
 	const reqIdRef = useRef(-1);
-	const loop = useCallback(() => {
-		reqIdRef.current = requestAnimationFrame(loop);
-		callback();
-	}, [callback, ...deps]);
+	const runCallback = useCallbackRef(callback);
 	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 = 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 = useMemo(() => createMIDIAccess(), []);
-	const { midiAccess, error } = useSyncExternalStore(instance.subscribe, instance.getState, instance.getServerState);
+	const store = useMemo(() => createMIDIAccessStore(), []);
+	const { midiAccess, error, inputs } = useSyncExternalStore(store.subscribe, store.getState, store.getServerState);
 	useEffect(() => {
-		if (requestOnMount) instance.request();
-	}, [instance, requestOnMount]);
+		const instance = store.connect();
+		return () => store.disconnect(instance);
+	}, [store]);
 	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 = useRef(handlers);
+	const instanceRef = useRef(null);
 	useEffect(() => {
-		const instance = createMIDIInput(midiAccess, {
-			onNoteOnEvent,
-			onNoteOffEvent,
-			onPitchBendEvent
-		});
-		return () => instance.destroy();
-	}, [
-		midiAccess,
-		onNoteOnEvent,
-		onNoteOffEvent,
-		onPitchBendEvent
-	]);
+		const instance = createMIDIInput(midiAccess, latest.current);
+		instanceRef.current = instance;
+		return () => {
+			instanceRef.current = null;
+			instance.destroy();
+		};
+	}, [midiAccess]);
+	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 = useRef(onMIDIMessage);
+	const instanceRef = useRef(null);
 	useEffect(() => {
-		const instance = createMIDIMessage(midiAccess, onMIDIMessage);
-		return () => instance.destroy();
-	}, [midiAccess, onMIDIMessage]);
+		const instance = createMIDIMessage(midiAccess, (event) => latest.current(event));
+		instanceRef.current = instance;
+		return () => {
+			instanceRef.current = null;
+			instance.destroy();
+		};
+	}, [midiAccess]);
+	useEffect(() => {
+		latest.current = onMIDIMessage;
+	});
 }
 //#endregion
-export { AnimationCanvas, Knob, NOT_SUPPORTED, NumberInput, PERMISSION_DENIED, Piano, PointsEditor, SHORTCUTS, Slider, XYPad, clampPoint, useAnimationFrame, useDrag, useDragValue, useEventListener, useInterval, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useNumberInputContext, usePointsEditorContext, useSliderContext, useWheel };
+export { AnimationCanvas, DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, Knob, NOT_SUPPORTED, NumberInput, PERMISSION_DENIED, PITCH_BEND_CENTER, Piano, PointsEditor, SHORTCUTS, Slider, UNAVAILABLE, XYPad, clampPoint, useAnimationFrame, useDrag, useDragValue, useEventListener, useInterval, useKnobContext, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useNumberInputContext, usePointsEditorContext, useSliderContext, useWheel, useXYPadContext };
 
 //# sourceMappingURL=index.js.map