@tremolo-ui/react 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -1,18 +1,35 @@
-import * as _$react from "react";
-import React, { CSSProperties, ComponentPropsWithoutRef, DependencyList, ReactElement, ReactNode, Ref, RefObject, SVGProps } from "react";
-import * as _$_tremolo_ui_dom0 from "@tremolo-ui/dom";
-import { AnimationFrame, AxisOptions, MIDIAccessError, NOT_SUPPORTED, PERMISSION_DENIED, WheelOptions, XY, XY as XY$1, XYInput, XYInput as XYInput$1 } from "@tremolo-ui/dom";
-import { InputEventOption, NoteRange, Scale, Units, ValueRange } from "@tremolo-ui/functions";
-
+import React, { AriaAttributes, CSSProperties, ComponentPropsWithoutRef, DependencyList, ReactNode, Ref, RefObject, SVGProps } from "react";
+import { AnimationFrame, AxisOptions, DragState, MIDIAccessError, MIDIAccessOptions, MIDIAccessOptions as MIDIAccessOptions$1, MIDIInputHandlers, NOT_SUPPORTED, PERMISSION_DENIED, PITCH_BEND_CENTER, SelectionBoxRect, UNAVAILABLE, WheelOptions, XY, XY as XY$1, XYInput, XYInput as XYInput$1 } from "@tremolo-ui/dom";
+import { InputEventOption, ModifierState, ModifierValue, NoteRange, Scale, ValueRange } from "@tremolo-ui/functions";
 //#region src/components/AnimationCanvas/index.d.ts
 type InitFunction = (context: CanvasRenderingContext2D, option: {
-  /** current canvas width */width: number; /** current canvas height */
+  /** current canvas width */
+  width: number;
+  /** current canvas height */
   height: number;
 }) => void;
 type DrawFunction = (context: CanvasRenderingContext2D, option: AnimationFrame) => void;
-interface CommonProps {
+interface AnimationCanvasCommonProps {
+  /**
+   * Draw one frame. It is given the 2D context and the frame: the size in CSS
+   * pixels, `count`, `deltaTime`, `elapsedTime` and `fps`.
+   *
+   * A new function replaces the old one in place, so writing it inline does
+   * not restart anything.
+   */
   draw: DrawFunction;
+  /**
+   * Called once before the first frame, with the context and the size in CSS
+   * pixels. Set up what every frame shares here.
+   */
   init?: InitFunction;
+  /**
+   * Redraw on every animation frame. Turn it off to draw only when there is a
+   * reason to: when the canvas mounts, when it is resized, and when the
+   * component re-renders.
+   *
+   * @default true
+   */
   animate?: boolean;
   /**
    * Read once, when the 2D context is created, so changing it later has no
@@ -21,95 +38,150 @@ interface CommonProps {
    * @see https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext#contextattributes
    */
   options?: CanvasRenderingContext2DSettings;
+  /**
+   * Carry the drawing across a resize, so that the canvas does not blank for a
+   * frame while the new size is drawn. A fixed canvas is resized too, when its
+   * `width` or `height` changes.
+   *
+   * @default true
+   */
+  reduceFlickering?: boolean;
 }
-interface AbsoluteSizingProps {
+/** A canvas of the size given in CSS pixels. This is the default. */
+interface AnimationCanvasFixedProps {
+  /** Leave it out, or pass `false`, for a canvas of the size below. */
+  resizable?: false;
+  /**
+   * Width of the canvas in CSS pixels.
+   * @default 100
+   */
   width?: number;
+  /**
+   * Height of the canvas in CSS pixels.
+   * @default 100
+   */
   height?: number;
 }
-interface RelativeSizingProps {
-  relativeSize?: boolean;
-  reduceFlickering?: boolean;
+/**
+ * A canvas that follows the size of its parent element, so the parent needs a
+ * size of its own.
+ */
+interface AnimationCanvasResizableProps {
+  /**
+   * Follow the size of the parent element instead of `width` and `height`.
+   * Switching it rebuilds the canvas.
+   */
+  resizable: true;
+  /** Not accepted: the size comes from the parent element. */
+  width?: never;
+  /** Not accepted: the size comes from the parent element. */
+  height?: never;
 }
-type AnimationCanvasProps = CommonProps & AbsoluteSizingProps & RelativeSizingProps;
+type AnimationCanvasProps = AnimationCanvasCommonProps & (AnimationCanvasFixedProps | AnimationCanvasResizableProps);
+type Props = AnimationCanvasProps & Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasCommonProps | 'resizable' | 'width' | 'height'>;
 /**
  * A simple animatable canvas with requestAnimationFrame()
  */
-declare function AnimationCanvas(props: CommonProps & AbsoluteSizingProps & Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>): ReactElement;
-declare function AnimationCanvas(pros: CommonProps & RelativeSizingProps & Omit<ComponentPropsWithoutRef<'canvas'>, keyof AnimationCanvasProps>): ReactElement;
-//#endregion
-//#region src/components/_util/index.d.ts
-declare const cursorStyles: {
-  grabbing: string;
-  grab: string;
-  pointer: string;
-  move: string;
-  none: string;
-};
-type Cursor = keyof typeof cursorStyles;
+declare const AnimationCanvas: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLCanvasElement>>;
 //#endregion
 //#region src/components/Knob/ActiveLine.d.ts
-declare function ActiveLine({
-  stroke,
-  strokeWidth,
-  className,
-  ...props
-}: Omit<SVGProps<SVGPathElement>, 'd'>): _$react.JSX.Element;
+declare function ActiveLine({ stroke, strokeWidth, className, ...props }: Omit<SVGProps<SVGPathElement>, 'd'>): import("react").JSX.Element;
 //#endregion
 //#region src/components/Knob/InactiveLine.d.ts
-declare function InactiveLine({
-  stroke,
-  strokeWidth,
-  className,
-  ...props
-}: Omit<SVGProps<SVGPathElement>, 'd'>): _$react.JSX.Element;
+declare function InactiveLine({ stroke, strokeWidth, className, ...props }: Omit<SVGProps<SVGPathElement>, 'd'>): import("react").JSX.Element;
 //#endregion
 //#region src/components/Knob/SVGRoot.d.ts
-interface SVGRootProps {
+interface KnobSVGRootProps {
   /**
    * `<Knob.InactiveLine />`, `<Knob.ActiveLine />` and `<Knob.Thumb />` go
    * here, in the order you want them painted.
    */
   children: ReactNode;
 }
-declare function SVGRoot({
-  children,
-  style,
-  ...props
-}: SVGRootProps & Omit<SVGProps<SVGSVGElement>, keyof SVGRootProps>): _$react.JSX.Element;
+declare function SVGRoot({ children, style, ...props }: KnobSVGRootProps & Omit<SVGProps<SVGSVGElement>, keyof KnobSVGRootProps>): import("react").JSX.Element;
 //#endregion
 //#region src/components/Knob/Thumb.d.ts
-interface Props$1 {
-  /** color */
+interface KnobThumbProps {
+  /**
+   * Fill colour of the circle.
+   * @default 'currentColor'
+   */
   thumb?: string;
-  /** color */
+  /**
+   * Colour of the line that points at the value.
+   * @default 'currentColor'
+   */
   thumbLine?: string;
-  /** percent (0-100) */
+  /**
+   * Diameter of the circle, as a percentage of the knob.
+   * @default 84
+   */
   thumbSize?: number;
-  /** percent (0-100) */
+  /**
+   * Thickness of the line, as a percentage of the knob.
+   * @default 6
+   */
   thumbLineWeight?: number;
-  /** percent (0-100) */
+  /**
+   * How far down the line reaches, as a percentage of the knob from its top.
+   * The line starts at the edge of the circle.
+   * @default 35
+   */
   thumbLineLength?: number;
+  /**
+   * Classes for what the thumb draws inside itself: `thumbLine` is the line
+   * that points at the value.
+   */
   classes?: {
-    thumb?: string;
     thumbLine?: string;
   };
 }
-declare function Thumb$2({
-  className,
-  thumb,
-  thumbLine,
-  thumbSize,
-  thumbLineWeight,
-  thumbLineLength,
-  classes,
-  ...props
-}: Props$1 & Omit<SVGProps<SVGSVGElement>, 'd' | keyof Props$1>): _$react.JSX.Element;
+declare function Thumb({ className, thumb, thumbLine, thumbSize, thumbLineWeight, thumbLineLength, classes, ...props }: KnobThumbProps & Omit<SVGProps<SVGSVGElement>, 'd' | keyof KnobThumbProps>): import("react").JSX.Element;
+//#endregion
+//#region src/components/Knob/context.d.ts
+type KnobConfig = {
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  scale: Scale;
+  startValue: number;
+  /** angle range [degree] */
+  angleRange: number;
+};
+type KnobContextValue = KnobConfig & {
+  /** normalized value */
+  p: number;
+  /** ロータリー開始位置 */
+  r1: number;
+  /** activeLine の開始位置 */
+  r2: number;
+  /** activeLine の終了位置 */
+  r3: number;
+  /** ロータリー終了位置 */
+  r4: number;
+};
+/**
+ * Everything here is derived during render, so there is no state to keep in
+ * sync: `value` comes from the props of `Root` and the rest follows from it.
+ */
+declare function useKnobContext(): KnobContextValue;
+declare function useKnobContext<T>(selector: (state: KnobContextValue) => T): T;
 //#endregion
 //#region src/components/Knob/index.d.ts
 interface KnobProps {
+  /** The current value. The knob shows only this, so update it from `onChange`. */
   value: number;
+  /** The value with the knob turned all the way down. */
   min: number;
+  /** The value with the knob turned all the way up. */
   max: number;
+  /**
+   * Granularity of the value. A drag, the wheel and the arrow keys snap it to
+   * multiples of `step`.
+   *
+   * @default 1
+   */
   step?: number;
   /**
    * How the value is distributed across the travel.
@@ -122,46 +194,115 @@ interface KnobProps {
    */
   scale?: Scale;
   /**
-   * value set when double-clicking
-   * restriction: enableDoubleClickDefault = true
+   * The value a double click restores, while `enableDoubleClickDefault` is on.
    * @default min
-   * @see enableDoubleClickDefault
    */
   defaultValue?: number;
   /**
-   * Value to be used as the starting point of the line when drawing.
+   * Where the active arc starts. Put it at the centre of a bipolar control,
+   * such as a pan knob, so that the arc grows from there either way.
    * @default min
    */
   startValue?: number;
-  /** width and height */
   /**
-   * Width and height of the knob.
-   * Defaults to the `--knob-size` CSS variable (50px).
+   * Width and height of the knob. Sets `--knob-size`; the size the theme
+   * gives it stands when this is omitted.
    */
   size?: number | string;
   /**
-   * Global style to apply when dragged
-   * @default defaultExternalStyles
+   * The cursor to show while dragging. It is set on the dragged element, so it
+   * stays while the pointer is outside the knob.
+   *
+   * @default { cursor: 'grabbing' }
    */
   externalStyles?: {
-    userSelectNone?: boolean;
-    cursor?: Cursor;
+    cursor?: CSSProperties['cursor'];
   };
   /**
-   * wheel control option
-   * If null, no event will be triggered
+   * How much one notch of the wheel moves the value. It only acts while the
+   * focus is inside, so that scrolling the page past the knob leaves it alone.
+   *
+   * `['raw', n]` moves the value by `n`, and `['normalized', n]` by `n` of the
+   * range between `min` and `max`. The result is snapped to `step`, except for
+   * an amount set on a modifier key (`{ default: …, shift: … }`). `null` turns
+   * the wheel off.
+   *
+   * @default ['raw', 1]
+   */
+  wheel?: ModifierValue<InputEventOption> | null;
+  /**
+   * How much a drag moves the value, per modifier key.
+   *
+   * `1` is the normal travel of 100px for the whole range; `0.1` makes the
+   * same movement cover a tenth of it. Shift is bound to `0.1` by default, to
+   * match what it does on the arrow keys.
+   *
+   * Pressing or releasing the key mid-drag does not disturb the value: the
+   * travel so far is kept and the new sensitivity applies from there. It takes
+   * effect on the next movement, since a key on its own produces no pointer
+   * event.
+   *
+   * @default { default: 1, shift: 0.1 }
+   */
+  dragSensitivity?: ModifierValue<number>;
+  /**
+   * Hide the cursor while dragging and read the pointer movement directly,
+   * rather than letting it wander off across the screen.
+   *
+   * A knob does not care where the pointer is, only how far it moved, and
+   * letting it wander costs twice: the cursor ends up far from the knob it is
+   * holding, and **the drag stops at the edge of the screen**, where the
+   * operating system pins the pointer and the coordinates stop changing. A
+   * `dragSensitivity` below 1 reaches that edge quickly.
+   *
+   * Off by default because it is not free: the browser shows its own notice,
+   * Esc takes the lock back, and the request needs a user gesture and can be
+   * refused. A refused request is not an error — the drag simply carries on as
+   * an ordinary one.
+   *
+   * @default false
+   */
+  pointerLock?: boolean;
+  /**
+   * How much one arrow key press moves the value.
+   *
+   * `['raw', n]` moves the value by `n`, and `['normalized', n]` by `n` of the
+   * range between `min` and `max`. The result is snapped to `step`, except for
+   * an amount set on a modifier key, which is what lets shift move off the
+   * grid. `null` turns the arrow keys off.
+   *
+   * The default moves by 1, and by 0.1 with shift. With a `step` above 1, raise
+   * the amount to match: 1 would round straight back to where it started, and
+   * a development build warns about it.
+   *
+   * @default { default: ['raw', 1], shift: ['raw', 0.1] }
    */
-  wheel?: InputEventOption | null;
+  keyboard?: ModifierValue<InputEventOption> | null;
   /**
-   * keyboard control option
-   * If null, no event will be triggered
+   * Restore `defaultValue` on a double click.
+   * @default true
    */
-  keyboard?: InputEventOption | null;
   enableDoubleClickDefault?: boolean;
+  /**
+   * Make the knob unchangeable and remove it from the tab order.
+   * The parts carry `data-disabled` while it is set.
+   */
   disabled?: boolean;
+  /**
+   * Make the knob unchangeable while leaving it focusable.
+   * The parts carry `data-readonly` while it is set.
+   */
   readonly?: boolean;
-  /** angle range [degree] */
+  /**
+   * How far the knob turns from `min` to `max`, in degrees, centred on the
+   * top.
+   * @default 270
+   */
   angleRange?: number;
+  /**
+   * Called with the new value when a drag, the wheel, an arrow key or a double
+   * click moves it.
+   */
   onChange?: (value: number) => void;
   /**
    * The knob renders exactly what you compose here; there is no default
@@ -186,88 +327,44 @@ interface KnobMethods {
  * Interactive rotary knob component implemented in SVG.
  */
 declare const Knob: {
-  Root: _$react.ForwardRefExoticComponent<KnobProps & Omit<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KnobProps> & _$react.RefAttributes<KnobMethods>>;
+  Root: import("react").ForwardRefExoticComponent<KnobProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KnobProps> & import("react").RefAttributes<KnobMethods>>;
   SVGRoot: typeof SVGRoot;
   InactiveLine: typeof InactiveLine;
   ActiveLine: typeof ActiveLine;
-  Thumb: typeof Thumb$2;
+  Thumb: typeof Thumb;
 };
 //#endregion
-//#region src/components/NumberInput/stepperButton.d.ts
-interface StepperButtonProps {
+//#region src/components/NumberInput/InputField.d.ts
+interface NumberInputInputFieldProps {
   className?: string;
   style?: CSSProperties;
-  /** Replaces the default arrow. Size it with the `--stepper-icon-size` variable. */
-  children?: ReactNode;
 }
 //#endregion
-//#region src/components/NumberInput/DecrementStepper.d.ts
-type DecrementStepperProps = StepperButtonProps;
-/** Lowers the value by one `step`, repeating while held. */
-declare function DecrementStepper(props: DecrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DecrementStepperProps>): _$react.JSX.Element;
-//#endregion
-//#region src/components/NumberInput/IncrementStepper.d.ts
-type IncrementStepperProps = StepperButtonProps;
-/** Raises the value by one `step`, repeating while held. */
-declare function IncrementStepper(props: IncrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof IncrementStepperProps>): _$react.JSX.Element;
-//#endregion
-//#region src/components/NumberInput/InputField.d.ts
-interface NumberInputFieldProps {
-  /**
-   * Select the text when the input takes focus. `'number'` selects the leading
-   * number, leaving whatever the format appended to it.
-   * @default 'none'
-   */
-  selectOnFocus?: 'all' | 'number' | 'none';
-  /**
-   * Commit and leave the input when Enter is pressed. Enter commits either way.
-   * @default true
-   */
-  blurOnEnter?: boolean;
+//#region src/components/NumberInput/Stepper.d.ts
+interface NumberInputStepperProps {
   className?: string;
   style?: CSSProperties;
-  ref?: Ref<HTMLInputElement>;
+  /** `<NumberInput.IncrementStepper />` and `<NumberInput.DecrementStepper />` go here. */
+  children?: ReactNode;
 }
-/**
- * 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.
- */
-declare function InputField({
-  selectOnFocus,
-  blurOnEnter,
-  className,
-  style,
-  ref,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  ...props
-}: NumberInputFieldProps & Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputFieldProps | 'type' | 'value' | 'defaultValue'>): _$react.JSX.Element;
 //#endregion
-//#region src/components/NumberInput/Stepper.d.ts
-interface StepperProps {
+//#region src/components/NumberInput/StepperButton.d.ts
+interface StepperButtonProps {
   className?: string;
   style?: CSSProperties;
-  /** `<NumberInput.IncrementStepper />` and `<NumberInput.DecrementStepper />` go here. */
+  /** Replaces the default arrow. Size it with the `--stepper-icon-size` variable. */
   children?: ReactNode;
-  ref?: Ref<HTMLDivElement>;
 }
-/**
- * The area the steppers sit in, and a drag handle in its own right: dragging it
- * up and down moves the value one `step` every `drag` pixels.
- *
- * The drag lives here rather than on `InputField` because `createDrag` turns
- * off text selection on whatever element it is attached to.
- */
-declare function Stepper({
-  className,
-  style,
-  children,
-  ref,
-  ...props
-}: StepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof StepperProps>): _$react.JSX.Element;
+//#endregion
+//#region src/components/NumberInput/DecrementStepper.d.ts
+interface NumberInputDecrementStepperProps extends StepperButtonProps {}
+/** Lowers the value by one `step`, repeating while held. */
+declare function DecrementStepper(props: NumberInputDecrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof NumberInputDecrementStepperProps>): import("react").JSX.Element;
+//#endregion
+//#region src/components/NumberInput/IncrementStepper.d.ts
+interface NumberInputIncrementStepperProps extends StepperButtonProps {}
+/** Raises the value by one `step`, repeating while held. */
+declare function IncrementStepper(props: NumberInputIncrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof NumberInputIncrementStepperProps>): import("react").JSX.Element;
 //#endregion
 //#region src/components/NumberInput/context.d.ts
 type NumberInputContextValue = {
@@ -279,29 +376,53 @@ type NumberInputContextValue = {
    */
   min?: number;
   max?: number;
-  step: number; /** How the value is distributed across the travel. */
+  step: number;
+  /** How the value is distributed across the travel. */
   scale: Scale;
   disabled: boolean;
   readonly: boolean;
   clampValue: boolean;
   /**
-   * The effective scaling for `applyDelta` and for clamping on commit, with the
-   * unbounded ends filled in. Ignores `min` / `max` when `clampValue` is off.
+   * The effective scaling for `applyDelta`, with unbounded ends filled in.
+   * Ignores `min` / `max` when `clampValue` is off.
    */
   range: ValueRange;
-  keyboard: InputEventOption | null; /** Pixels of vertical drag on `Stepper` that move the value by one `step`. */
-  drag: number | null; /** What the input shows: the draft while editing, the formatted value otherwise. */
+  /** The effective range for raw input, whose open ends cover finite numbers. */
+  rawRange: ValueRange;
+  keyboard: ModifierValue<InputEventOption> | null;
+  /** Pixels of vertical drag on `Stepper` that move the value by one `step`. */
+  drag: number | null;
+  /** How much a `Stepper` drag counts, per modifier key. */
+  dragSensitivity: ModifierValue<number>;
+  /** Whether a `Stepper` drag hides the pointer and reads its movement. */
+  pointerLock: boolean;
+  /** What `InputField` selects when it takes focus. */
+  selectOnFocus: 'all' | 'number' | 'none';
+  /** Whether `InputField` shows the plain value while it has focus. */
+  unformatOnFocus: boolean;
+  /** Whether `InputField` puts the caret back after an arrow key steps the value. */
+  keepCaretOnStep: boolean;
+  /** Whether Enter leaves `InputField` as well as committing. */
+  blurOnEnter: boolean;
+  /** What the input shows: the draft while editing, the formatted value otherwise. */
   text: string;
-  editing: boolean; /** Whether the value sits outside `min` / `max`. Not judged while editing. */
-  outOfRange: boolean; /** Whether a stepper would have no effect, for `aria-disabled`. */
+  editing: boolean;
+  /** Whether the value sits outside `min` / `max`. Not judged while editing. */
+  outOfRange: boolean;
+  /** Whether a stepper would have no effect, for `aria-disabled`. */
   atMin: boolean;
   atMax: boolean;
   format: (value: number) => string;
-  parse: (text: string) => number; /** Typing. Replaces the draft and reports the parsed value, unclamped. */
-  setDraft: (text: string) => void; /** Blur or Enter. Clamps the draft, reports it, and drops the draft. */
-  commitDraft: () => void; /** Drops the draft and replaces the value: steppers, wheel, keyboard, drag. */
-  changeValue: (next: number) => void; /** Moves the value by one `option` in `direction`, normally +1 or -1. */
-  nudge: (direction: number, option: InputEventOption) => void; /** `InputField` registers itself here; `Root` focuses it through its methods. */
+  parse: (text: string) => number;
+  /** Typing. Replaces the draft and reports the parsed value, unclamped. */
+  setDraft: (text: string) => void;
+  /** Blur or Enter. Optionally clamps the draft, reports it, and drops it. */
+  commitDraft: () => void;
+  /** Drops the draft and replaces the value: steppers, wheel, keyboard, drag. */
+  changeValue: (next: number) => void;
+  /** Moves the value by one `option` in `direction`, normally +1 or -1. */
+  nudge: (direction: number, option: ModifierValue<InputEventOption>, modifiers?: ModifierState) => void;
+  /** `InputField` registers itself here; `Root` focuses it through its methods. */
   inputRef: RefObject<HTMLInputElement | null>;
 };
 /**
@@ -318,8 +439,27 @@ interface NumberInputProps {
    * is typing, when their own text stands until it is committed.
    */
   value: number;
+  /**
+   * Lowest value. Leave it out for no lower bound.
+   *
+   * It is enforced when a value is committed or stepped, while `clampValue` is
+   * on. A value below it carries `data-out-of-range` on `InputField`.
+   */
   min?: number;
+  /**
+   * Highest value. Leave it out for no upper bound.
+   *
+   * It is enforced when a value is committed or stepped, while `clampValue` is
+   * on. A value above it carries `data-out-of-range` on `InputField`.
+   */
   max?: number;
+  /**
+   * Granularity of the value. The steppers, a drag on `Stepper`, the wheel and
+   * the arrow keys snap it to multiples of `step`; a typed value is left as it
+   * is.
+   *
+   * @default 1
+   */
   step?: number;
   /**
    * How the value is distributed across the travel of a drag or a
@@ -329,26 +469,20 @@ interface NumberInputProps {
    */
   scale?: Scale;
   /**
-   * Unit to display the value in, or a list to pick from by magnitude.
-   * Builds the default `format` and `parse`.
+   * Render the value as text. Plain digits by default.
+   *
+   * `unitFormat` from `@tremolo-ui/functions` builds this and `parse` together
+   * for a unit, as a pair to spread into the root.
    *
    * @example
-   * units='Hz'
-   * units={[['Hz', 1], ['kHz', 1000]]}
-   * units={[['ms', 1], ['s', 1000]]}
+   * <NumberInput.Root {...unitFormat('Hz', { digits: 2 })} value={v} />
    */
-  units?: string | Units;
+  format?: (value: number) => string;
   /**
-   * Digits after the decimal point, for the default `format`.
+   * Read a value back out of the text. Has to undo `format`.
    *
-   * @example
-   * // units={[['Hz', 1], ['kHz', 1000]]} digit={2}
-   * // 100 -> 100.00Hz, 1600 -> 1.60kHz
+   * Text with no number in it reads as `NaN`, which leaves the value alone.
    */
-  digit?: number;
-  /** Render the value as text. Takes precedence over `units` / `digit`. */
-  format?: (value: number) => string;
-  /** Read a value back out of the text. Takes precedence over `units`. */
   parse?: (text: string) => number;
   /**
    * Keep the value within `min` and `max` when it is committed or stepped.
@@ -357,35 +491,130 @@ interface NumberInputProps {
    */
   clampValue?: boolean;
   /**
-   * Wheel control option. Only applies while the focus is inside, so that
-   * scrolling past the input does not change it.
-   * If null, no event will be triggered
+   * How much one notch of the wheel moves the value. It only acts while the
+   * focus is inside, so that scrolling the page past the input leaves it
+   * alone.
+   *
+   * `['raw', n]` moves the value by `n`, and `['normalized', n]` by `n` of the
+   * range between `min` and `max`. The result is snapped to `step`, except for
+   * an amount set on a modifier key (`{ default: …, shift: … }`). `null` turns
+   * the wheel off.
+   *
+   * @default ['raw', 1]
    */
-  wheel?: InputEventOption | null;
+  wheel?: ModifierValue<InputEventOption> | null;
   /**
-   * keyboard control option
-   * If null, no event will be triggered
+   * How much one arrow key press moves the value.
+   *
+   * `['raw', n]` moves the value by `n`, and `['normalized', n]` by `n` of the
+   * range between `min` and `max`. The result is snapped to `step`, except for
+   * an amount set on a modifier key, which is what lets shift move off the
+   * grid. `null` turns the arrow keys off.
+   *
+   * The default moves by 1, and by 0.1 with shift. With a `step` above 1, raise
+   * the amount to match: 1 would round straight back to where it started, and
+   * a development build warns about it.
+   *
+   * @default { default: ['raw', 1], shift: ['raw', 0.1] }
    */
-  keyboard?: InputEventOption | null;
+  keyboard?: ModifierValue<InputEventOption> | null;
   /**
    * Pixels of vertical drag on `Stepper` that move the value by one `step`.
-   * If null, no event will be triggered
+   * `null` turns the drag off.
    * @default 1
    */
   drag?: number | null;
   /**
-   * Only the appearance will change.
-   * Please consider using with readonly.
-   * aria-disabled property is also applied.
+   * How much a `Stepper` drag counts, per modifier key.
+   *
+   * `1` is `drag` pixels per `step`; `0.1` makes the same movement cover a
+   * tenth of that. Shift is bound to `0.1` by default, to match what it does
+   * on the arrow keys.
+   *
+   * A modifier entry is not snapped to `step`, which is what lets a finer
+   * amount move at all.
+   *
+   * @default { default: 1, shift: 0.1 }
+   */
+  dragSensitivity?: ModifierValue<number>;
+  /**
+   * Hide the cursor while dragging a `Stepper` and read the pointer movement
+   * directly, rather than letting it wander off across the screen.
+   *
+   * The drag is already relative, so the pointer position carries nothing —
+   * but it still runs into the edge of the screen, where the operating system
+   * pins it and the coordinates stop changing.
+   *
+   * Off by default: the browser shows its own notice, Esc takes the lock back,
+   * and the request can be refused. A refused request is not an error, and the
+   * drag carries on as an ordinary one.
+   *
+   * @default false
+   */
+  pointerLock?: boolean;
+  /**
+   * Select the text when `InputField` takes focus: `'all'` selects all of it,
+   * `'number'` only the leading number, leaving whatever the format appended,
+   * and `'none'` leaves the caret where the click put it.
+   * @default 'none'
+   */
+  selectOnFocus?: 'all' | 'number' | 'none';
+  /**
+   * Show the plain value while `InputField` has focus, dropping whatever
+   * `format` put around it: an input reading `1.23kHz` shows `1230` to be
+   * typed over.
+   *
+   * The number shown is the value itself, not the number inside the formatted
+   * text. Those differ whenever the format scales — `1.23` out of `1.23kHz`
+   * would read back as 1.23 and lose a factor of a thousand — and it is also
+   * why a rounded display no longer becomes the value: `1.6` shown as `2Hz`
+   * offers `1.6` for editing, not `2`.
+   *
+   * @default false
+   */
+  unformatOnFocus?: boolean;
+  /**
+   * Put the caret in `InputField` back where it was after an arrow key steps
+   * the value.
+   *
+   * A controlled input whose `value` is replaced drops the caret at the end,
+   * so without this the second press of a repeated step always acts on the
+   * last digit. With it, the digit under the caret stays under the caret and
+   * a column can be held while stepping.
+   *
+   * The position is measured from the decimal point rather than from either
+   * end, so it survives the number growing or shrinking: the caret between
+   * `9` and `.9` is still between `10` and `.0`.
+   *
+   * It only restores the caret. Which digit it sits on does not change the
+   * size of the step — that is `keyboard`'s to say.
+   *
+   * @default false
+   */
+  keepCaretOnStep?: boolean;
+  /**
+   * Commit and leave `InputField` when Enter is pressed. Enter commits either
+   * way.
+   * @default true
+   */
+  blurOnEnter?: boolean;
+  /**
+   * Make the input unchangeable and remove it from the tab order.
+   * The parts carry `data-disabled` while it is set.
    */
   disabled?: boolean;
   /**
    * Make the value unchangeable.
-   * aria-readonly property is also applied.
+   * The parts carry `data-readonly` while it is set.
    */
   readonly?: boolean;
   className?: string;
   style?: CSSProperties;
+  /**
+   * Called with the new value. While the user types, it is called for every
+   * entry that reads as a number, unclamped; committing the entry calls it
+   * again if clamping changes the value.
+   */
   onChange?: (value: number) => void;
   /**
    * The input renders exactly what you compose here; there is no default
@@ -410,14 +639,14 @@ interface NumberInputMethods {
  * Input with some useful functions for entering numerical values.
  */
 declare const NumberInput: {
-  Root: _$react.ForwardRefExoticComponent<NumberInputProps & Omit<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof NumberInputProps> & _$react.RefAttributes<NumberInputMethods>>;
-  InputField: typeof InputField;
-  Stepper: typeof Stepper;
+  Root: import("react").ForwardRefExoticComponent<NumberInputProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof NumberInputProps> & import("react").RefAttributes<NumberInputMethods>>;
+  InputField: import("react").ForwardRefExoticComponent<NumberInputInputFieldProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultValue" | "value" | "type" | keyof NumberInputInputFieldProps> & import("react").RefAttributes<HTMLInputElement>>;
+  Stepper: import("react").ForwardRefExoticComponent<NumberInputStepperProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof NumberInputStepperProps> & import("react").RefAttributes<HTMLDivElement>>;
   IncrementStepper: typeof IncrementStepper;
   DecrementStepper: typeof DecrementStepper;
 };
 //#endregion
-//#region src/components/Piano/keyboardShortcuts.d.ts
+//#region src/components/Piano/keyboard-shortcuts.d.ts
 type KeyboardShortcuts = {
   /**
    * Keys laid out from `noteRange.first`, one entry per semitone.
@@ -433,15 +662,18 @@ type KeyboardShortcuts = {
  * Ready-made keyboard layouts. Both assume `noteRange.first` is a C.
  */
 declare const SHORTCUTS: {
-  /** Every semitone from C, over the two rows of a QWERTY keyboard. */HOME_ROW: {
+  /** Every semitone from C, over the two rows of a QWERTY keyboard. */
+  HOME_ROW: {
     keys: string[];
-  }; /** The white keys only, on the home row. Black keys have no shortcut. */
+  };
+  /** The white keys only, on the home row. Black keys have no shortcut. */
   HOME_ROW_NATURAL: {
     keys: string[];
   };
 };
 //#endregion
 //#region src/components/Piano/index.d.ts
+type KeyboardShortcutsScope = 'root' | 'window';
 /**
  * `style` that also takes CSS custom properties, which is how a key's colours
  * are set: see `index.css` for the ones each key type reads.
@@ -468,31 +700,62 @@ interface KeyState {
   disabled: boolean;
 }
 interface PianoProps {
+  /**
+   * Classes for what a key draws inside itself: `keyLabelWrapper`, and
+   * `keyLabel` around what `label` returns. The key itself takes a class
+   * through `keyProps`, which is also where the note and its state are.
+   */
+  classes?: {
+    keyLabelWrapper?: string;
+    keyLabel?: string;
+  };
+  /**
+   * The notes to draw keys for, as MIDI note numbers from `first` to `last`,
+   * both included.
+   */
   noteRange: NoteRange;
   /**
-   * Let a pointer slide from one key to the next while it is down.
+   * Let a pointer slide from one key to the next while it is down. With it
+   * off, the key that was pressed sounds until the pointer is released.
    *
    * @default true
    */
   glissando?: boolean;
   /**
-   * Highest note that can sound. Keys above it are drawn `aria-disabled`.
+   * Highest note that can sound. Keys above it carry `data-disabled`.
    *
    * @default 127
    */
   midiMax?: number;
+  /**
+   * Play notes from the computer keyboard: `keys[i]` plays
+   * `noteRange.first + i`. `SHORTCUTS` has ready-made layouts, which assume
+   * `noteRange.first` is a C. Where they listen is `keyboardShortcutsScope`.
+   */
   keyboardShortcuts?: KeyboardShortcuts;
   /**
-   * Fill the parent element, deriving the width of a white key from it.
-   * {@link PianoProps.whiteKeyWidth} is ignored.
+   * Where keyboard shortcuts listen. `root` handles keys only while the Piano
+   * root or one of its descendants has focus; `window` handles them anywhere
+   * on the page except in editable elements.
+   *
+   * @default 'root'
+   */
+  keyboardShortcutsScope?: KeyboardShortcutsScope;
+  /**
+   * Follow the width of the parent element, deriving the width of a white key
+   * from it. {@link PianoProps.whiteKeyWidth} is ignored.
    *
    * @default false
    */
-  fill?: boolean;
-  /** @default 40 */
+  resizable?: boolean;
+  /**
+   * Width of a white key in pixels, not counting `keyGap`. Ignored while
+   * `resizable` is on.
+   * @default 40
+   */
   whiteKeyWidth?: number;
   /**
-   * Space between two white keys.
+   * Space between two white keys, in pixels.
    * @default 1
    */
   keyGap?: number;
@@ -506,7 +769,11 @@ interface PianoProps {
    * @default 0.6
    */
   blackKeyHeightRatio?: number;
-  /** @default `fill ? '100%' : 160` */
+  /**
+   * Height of the keyboard. Sets `--height`; when it is omitted, the height
+   * the theme gives stands, and the theme can tell `resizable` apart through
+   * `data-resizable`.
+   */
   height?: number | string;
   style?: CSSProperties & CSSVariables;
   /**
@@ -525,11 +792,18 @@ interface PianoProps {
    *
    * @example highlight the notes of a scale
    * ```tsx
-   * keyProps={(note) => ({ 'data-in-scale': inScale(note, root, 'major') })}
+   * keyProps={(note) => ({ 'data-in-scale': inScale(note, root, 'major') ? '' : undefined })}
    * ```
    */
   keyProps?: (note: number, state: KeyState) => KeyAttributes;
+  /**
+   * Called when a note starts sounding, whether a pointer, a keyboard shortcut
+   * or `playNote` asked for it. A note held by several of them at once is
+   * reported once. `velocity` is what `playNote` was given, and `undefined`
+   * otherwise.
+   */
   onPlayNote?: (note: number, velocity?: number) => void;
+  /** Called once everything holding a note has let go of it. */
   onStopNote?: (note: number) => void;
 }
 interface PianoMethods {
@@ -540,32 +814,21 @@ interface PianoMethods {
  * Customizable piano component.
  */
 declare const Piano: {
-  Root: _$react.ForwardRefExoticComponent<PianoProps & Omit<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PianoProps> & _$react.RefAttributes<PianoMethods>>;
+  Root: import("react").ForwardRefExoticComponent<PianoProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PianoProps> & import("react").RefAttributes<PianoMethods>>;
 };
 //#endregion
-//#region src/components/PointsEditor/Background.d.ts
-interface PointsEditorBackgroundProps {
-  /** Whatever the points are placed over: a graph, a canvas, an image. */
-  children?: ReactNode;
-}
-declare function Background({
-  className,
-  children,
-  ...props
-}: PointsEditorBackgroundProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorBackgroundProps>): _$react.JSX.Element;
-//#endregion
 //#region src/components/PointsEditor/Container.d.ts
 interface PointsEditorContainerProps {
   /** `<PointsEditor.Point />` goes here. */
   children?: ReactNode;
-  ref?: Ref<HTMLDivElement>;
 }
-declare function Container({
-  children,
-  className,
-  ref,
-  ...props
-}: PointsEditorContainerProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorContainerProps>): _$react.JSX.Element;
+//#endregion
+//#region src/components/PointsEditor/Background.d.ts
+interface PointsEditorBackgroundProps {
+  /** Whatever the points are placed over: a graph, a canvas, an image. */
+  children?: ReactNode;
+}
+declare function Background({ className, children, style, ...props }: PointsEditorBackgroundProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorBackgroundProps>): import("react").JSX.Element;
 //#endregion
 //#region src/components/PointsEditor/Point.d.ts
 type PointBaseType = {
@@ -576,104 +839,252 @@ declare function clampPoint(point: PointBaseType, min?: Partial<PointBaseType>,
   x: number;
   y: number;
 };
-interface PointProps<T extends PointBaseType> {
+interface PointsEditorPointProps<T extends PointBaseType> {
+  /**
+   * Where the point is, as `{ x, y }` from 0 to 1 on each axis, with `y`
+   * growing downwards.
+   */
   value: T;
+  /** Drawn inside the point: the theme's own dot stands when it is left out. */
+  children?: ReactNode;
+  /**
+   * How the selection refers to this point. One is generated when it is left
+   * out, which lasts as long as the point is mounted — give your own if the
+   * selection has to survive a remount, or be recognised in your own state.
+   */
+  id?: string;
+  /** The lowest position the point can take, per axis. An axis left out is 0. */
   min?: Partial<PointBaseType>;
+  /** The highest position the point can take, per axis. An axis left out is 1. */
   max?: Partial<PointBaseType>;
+  /** Width and height at once. Sets both `--width` and `--height`. */
   size?: number | string;
+  /** Sets `--width`; the size the theme gives it stands when omitted. */
   width?: number | string;
+  /** Sets `--height`; the size the theme gives it stands when omitted. */
   height?: number | string;
+  /** Sets `--color`, for the theme to colour the point with. */
   color?: string;
   /** Overrides the `disabled` of `PointsEditor.Root`. */
   disabled?: boolean;
   /** Overrides the `readonly` of `PointsEditor.Root`. */
   readonly?: boolean;
   /** Overrides the `wheel` of `PointsEditor.Root`. */
-  wheel?: InputEventOption | null;
+  wheel?: ModifierValue<InputEventOption> | null;
   /** Overrides the `keyboard` of `PointsEditor.Root`. */
-  keyboard?: InputEventOption | null;
+  keyboard?: ModifierValue<InputEventOption> | null;
+  /**
+   * The accessible name of each axis. There are two range inputs inside the
+   * point, so this takes one name per axis; a single string names them both.
+   */
+  'aria-label'?: string | Partial<Record<'x' | 'y', string>>;
+  /** What the value of each axis means, when the number does not say it. */
+  'aria-valuetext'?: string | Partial<Record<'x' | 'y', string>>;
+  /**
+   * Called with the new position when the point is dragged or moved by the
+   * arrow keys or the wheel, including when it moves along with a selection.
+   */
   onChange?: (value: PointBaseType) => void;
+  /** Called when a drag on this point starts, with where the point is. */
   onDragStart?: (value: PointBaseType) => void;
+  /** Called when that drag ends, with where the point is. */
   onDragEnd?: (value: PointBaseType) => void;
 }
-declare function Point<T extends PointBaseType>({
-  value,
-  min,
-  max,
-  size,
-  width,
-  height,
-  color,
-  disabled: _disabled,
-  readonly: _readonly,
-  wheel: _wheel,
-  keyboard: _keyboard,
-  onChange,
-  onDragStart,
-  onDragEnd,
-  className,
-  style,
-  onPointerDown,
-  onKeyDown,
-  ...props
-}: PointProps<T> & Omit<ComponentPropsWithoutRef<'div'>, keyof PointProps<T>>): _$react.JSX.Element;
+declare function Point<T extends PointBaseType>({ 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 }: PointsEditorPointProps<T> & Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorPointProps<T>>): import("react").JSX.Element;
+//#endregion
+//#region src/components/PointsEditor/SelectionBox.d.ts
+interface PointsEditorSelectionBoxProps {
+  /** Drawn inside the box, which is only there while a drag is running. */
+  children?: ReactNode;
+}
+/**
+ * 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.
+ */
+declare function SelectionBox({ children, className, style, ...props }: PointsEditorSelectionBoxProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorSelectionBoxProps>): import("react").JSX.Element | null;
 //#endregion
 //#region src/components/PointsEditor/context.d.ts
+/**
+ * What a `Point` tells the editor about itself, so that a selection can be
+ * moved without the editor knowing how the points are stored.
+ *
+ * Held behind a ref and rewritten on every render: the value changes on every
+ * frame of a drag, and a registry keyed on it would be rebuilt just as often.
+ */
+interface PointRegistration {
+  value: PointBaseType;
+  min?: Partial<PointBaseType>;
+  max?: Partial<PointBaseType>;
+  readonly: boolean;
+  onChange?: (value: PointBaseType) => void;
+  /** The point's own element, to match the focus against. */
+  element: HTMLElement | null;
+  /** The wheel option this point resolved, root inheritance applied. */
+  wheel: ModifierValue<InputEventOption> | null;
+}
 type PointsEditorContextValue = {
   disabled: boolean;
-  readonly: boolean; /** Inherited by every `Point`; `null` turns the wheel off. */
-  wheel: InputEventOption | null; /** Inherited by every `Point`; `null` turns the keyboard off. */
-  keyboard: InputEventOption | null;
+  readonly: boolean;
+  /** Inherited by every `Point`; `null` turns the wheel off. */
+  wheel: ModifierValue<InputEventOption> | null;
+  /** Inherited by every `Point`; `null` turns the keyboard off. */
+  keyboard: ModifierValue<InputEventOption> | null;
+  /** Inherited by every `Point`. See `PointsEditorProps.dragSensitivity`. */
+  dragSensitivity: ModifierValue<number>;
   externalStyles: {
-    userSelectNone?: boolean;
-    cursor?: Cursor;
+    cursor?: CSSProperties['cursor'];
   };
   /**
    * `Container` registers its element here; `Point` normalizes the pointer
    * against it, so a point is placed by its position within the container.
    */
   containerRef: RefObject<HTMLDivElement | null>;
+  /** Whether points can be selected at all. See `PointsEditorProps.selectable`. */
+  selectable: boolean;
+  /** Ids of the points currently selected. Always empty while `selectable` is off. */
+  selection: readonly string[];
+  /** Register a point so that a selection can move it with the rest. */
+  registerPoint: (id: string, entry: RefObject<PointRegistration>) => () => void;
+  /**
+   * Whether the element is a point, or inside one. The registry knows which
+   * elements the points are, so nothing has to be recognised by a class name.
+   */
+  isPointElement: (element: Element | null | undefined) => boolean;
+  /**
+   * A pointer went down on a point: works out the new selection and takes the
+   * snapshot the move will be measured against.
+   */
+  beginPointDrag: (id: string, modifiers: ModifierState) => void;
+  /** Move everything the drag picked up, by one amount, clamped as one. */
+  movePointDrag: (delta: PointBaseType) => void;
+  /**
+   * Move the selection by an amount that did not come from a drag — an arrow
+   * key or a wheel notch. The current values are the starting point.
+   */
+  nudgeSelection: (id: string, delta: PointBaseType) => void;
+  /**
+   * Move the point that currently holds focus by one notch. The wheel listener
+   * belongs to `Container` rather than to every `Point`, so the lookup of who
+   * has focus happens here, where the registry is. Returns whether a point
+   * took it, so the caller knows whether to consume the event.
+   */
+  nudgeFocusedPoint: (axis: 'x' | 'y', direction: number, modifiers: ModifierState) => boolean;
+  /** The selection box, while one is being dragged. */
+  selectionBox: SelectionBoxRect | null;
+  beginSelectionBox: (at: PointBaseType, modifiers: ModifierState) => void;
+  moveSelectionBox: (to: PointBaseType) => void;
+  endSelectionBox: () => void;
 };
 /**
- * The settings `Root` was given, for the subcomponents to read. There is no
- * state to keep in sync: a point's value belongs to the `Point` that draws it.
+ * The settings `Root` was given, for the subcomponents to read. A point's
+ * value still belongs to the `Point` that draws it; what the root keeps is
+ * which points are selected, and a registry of who they are.
  */
 declare function usePointsEditorContext(): PointsEditorContextValue;
 declare function usePointsEditorContext<T>(selector: (state: PointsEditorContextValue) => T): T;
 //#endregion
 //#region src/components/PointsEditor/index.d.ts
 interface PointsEditorProps {
+  /** Sets `--width`; the size the theme gives it stands when omitted. */
   width?: number | string;
+  /** Sets `--height`; the size the theme gives it stands when omitted. */
   height?: number | string;
   /**
-   * Only the appearance will change.
-   * Please consider using with readonly.
-   * aria-disabled property is also applied.
+   * Make the points unchangeable and remove them from the tab order.
+   * The parts carry `data-disabled` while it is set.
    */
   disabled?: boolean;
   /**
    * Make the points unmovable.
-   * aria-readonly property is also applied.
+   * The parts carry `data-readonly` while it is set.
    */
   readonly?: boolean;
+  /**
+   * The cursor to show while dragging a point. It is set on the dragged
+   * point, so it stays while the pointer is outside it.
+   *
+   * @default { cursor: 'grabbing' }
+   */
   externalStyles?: {
-    userSelectNone?: boolean;
-    cursor?: Cursor;
+    cursor?: CSSProperties['cursor'];
   };
   /**
-   * wheel control option for every `Point`. Shift selects the x axis.
-   * If null, no event will be triggered
+   * How much one notch of the wheel moves the focused `Point`. Scrolling
+   * sideways, or with shift held, moves x; otherwise it moves y.
+   *
+   * A position runs from 0 to 1, so `['normalized', n]` and `['raw', n]` both
+   * move it by `n` of the editor. `null` turns the wheel off, and a `Point`
+   * can override it with a `wheel` of its own.
+   *
+   * @default ['normalized', 0.01]
+   */
+  wheel?: ModifierValue<InputEventOption> | null;
+  /**
+   * How much one arrow key press moves a `Point`. Left and right move x, up
+   * and down move y.
+   *
+   * A position runs from 0 to 1, so `['normalized', n]` and `['raw', n]` both
+   * move it by `n` of the editor; give a map to set an amount per modifier
+   * key. `null` turns the arrow keys off, and a `Point` can override it with a
+   * `keyboard` of its own.
+   *
+   * @default { default: ['normalized', 0.01], shift: ['normalized', 0.001] }
+   */
+  keyboard?: ModifierValue<InputEventOption> | null;
+  /**
+   * How much a drag moves a `Point`, per modifier key.
+   *
+   * `1` is the pointer position itself, which is what dragging a point
+   * normally is. **Anything else turns the drag relative**: `0.1` makes the
+   * same movement cover a tenth of the editor, so the point stops following
+   * the pointer and starts moving a tenth as fast. Shift is bound to `0.1` by
+   * default, to match what it does on the arrow keys.
+   *
+   * Pressing or releasing the key mid-drag does not disturb the point: the
+   * travel so far is kept and the new sensitivity applies from there. **The
+   * pointer and the point stay apart for the rest of the drag** — snapping
+   * them back together on release would move the point nobody asked to move.
+   *
+   * @default { default: 1, shift: 0.1 }
+   */
+  dragSensitivity?: ModifierValue<number>;
+  /**
+   * Let points be selected, and a selection be moved as one.
    *
-   * A `Point` can override it with a `wheel` of its own.
+   * Off by default, because it changes what a press and a drag mean: a press
+   * on empty space starts a selection box rather than doing nothing, and a drag
+   * on a point moves everything else that is selected. An editor whose points
+   * each mean something different — the four handles of an ADSR envelope, say
+   * — has nothing to gain from moving them together.
+   *
+   * **A selection calls `onChange` on several points in the same tick**, so
+   * each of them has to update from the previous state rather than from a
+   * value captured in the render:
+   *
+   * ```jsx
+   * onChange={(v) => setPoints((prev) => ({ ...prev, [id]: v }))}
+   * ```
+   *
+   * Written the other way round — `setPoints({ ...points, [id]: v })` — every
+   * call but the last is thrown away, and only one point appears to move.
+   *
+   * @default false
    */
-  wheel?: InputEventOption | null;
+  selectable?: boolean;
   /**
-   * keyboard control option for every `Point`, on the arrow keys.
-   * If null, no event will be triggered
+   * Ids of the selected points, to hold the selection yourself. Leave it out
+   * and the editor keeps its own.
    *
-   * A `Point` can override it with a `keyboard` of its own.
+   * A `Point` takes its id from its `id` prop, or generates one that lasts as
+   * long as it is mounted.
    */
-  keyboard?: InputEventOption | null;
+  selection?: string[];
+  /** The selection to start with, when the editor keeps its own. */
+  defaultSelection?: string[];
+  /** Called whenever the selection changes, controlled or not. */
+  onSelectionChange?: (selection: string[]) => void;
   /**
    * The editor renders exactly what you compose here; there is no default
    * markup to fall back to.
@@ -696,135 +1107,151 @@ interface PointsEditorProps {
  * Multiple Point Controller
  */
 declare const PointsEditor: {
-  Root: _$react.ForwardRefExoticComponent<PointsEditorProps & Omit<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PointsEditorProps> & _$react.RefAttributes<HTMLDivElement>>;
+  Root: import("react").ForwardRefExoticComponent<PointsEditorProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PointsEditorProps> & import("react").RefAttributes<HTMLDivElement>>;
   Background: typeof Background;
-  Container: typeof Container;
+  Container: import("react").ForwardRefExoticComponent<PointsEditorContainerProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & import("react").RefAttributes<HTMLDivElement>>;
   Point: typeof Point;
+  SelectionBox: typeof SelectionBox;
 };
 //#endregion
-//#region src/components/Slider/type.d.ts
-type MarksType = 'mark' | 'mark-number' | 'number';
-type MarksOptions = ['step', MarksType] | [number, MarksType];
-//#endregion
-//#region src/components/Slider/Marks.d.ts
-interface MarksProps {
-  gap?: number | string;
-  options?: MarksOptions;
-  children?: ReactNode;
-}
-declare function Marks({
-  gap,
-  options,
-  children,
-  className,
-  style,
-  ...props
-}: MarksProps & Omit<ComponentPropsWithoutRef<'div'>, keyof MarksProps>): _$react.JSX.Element;
-//#endregion
-//#region src/components/Slider/MarksOption.d.ts
-interface MarksOptionProps {
-  value: number;
-  type?: MarksType;
-  /** Display text instead of value. */
-  label?: string;
-  /** mark thickness */
-  thickness?: number | string;
-  /** mark length */
-  length?: number | string;
-  /** Gap between mark and label. */
-  gap?: number | string;
-  labelWidth?: number | string;
-  classes?: {
-    mark?: string;
-    label?: string;
-  };
-  styles?: {
-    mark?: CSSProperties;
-    label?: CSSProperties;
-  };
-}
-declare function MarksOption({
-  value,
-  type,
-  label,
-  thickness,
-  length,
-  gap,
-  labelWidth,
-  classes,
-  styles,
-  className,
-  style,
-  ...props
-}: MarksOptionProps & Omit<ComponentPropsWithoutRef<'div'>, keyof MarksOptionProps>): _$react.JSX.Element;
-//#endregion
 //#region src/components/Slider/Thumb.d.ts
 interface SliderThumbProps {
   /**
-   * Size comes from the `--thumb-size` CSS variable on `Slider.Root`, so that
-   * the root can reserve the matching amount of space around the track.
+   * Sets `--color`, for the theme to colour the thumb with. The size is not
+   * set here but by `--thumb-size` on `Slider.Root`, so that the root can
+   * leave the matching room around the track.
    */
   color?: string;
   className?: string;
   style?: CSSProperties;
+  /**
+   * Rendered inside the thumb. The thumb is one element either way, so what
+   * is passed here is decoration on top of it rather than a replacement for
+   * it — `className` and `style` are how its own appearance is changed.
+   */
   children?: ReactNode;
-  ref?: Ref<SliderThumbMethods>;
+  'aria-label'?: AriaAttributes['aria-label'];
+  'aria-labelledby'?: AriaAttributes['aria-labelledby'];
+  'aria-describedby'?: AriaAttributes['aria-describedby'];
+  'aria-valuetext'?: AriaAttributes['aria-valuetext'];
 }
 interface SliderThumbMethods {
   focus: () => void;
   blur: () => void;
 }
-declare function Thumb$1({
-  color,
-  children,
-  className,
-  style,
-  ref
-}: SliderThumbProps): _$react.JSX.Element;
 //#endregion
 //#region src/components/Slider/Track.d.ts
 interface SliderTrackProps {
+  /**
+   * How long the track is along the axis the slider runs. Sets `--length`;
+   * the size the theme gives it stands when this is omitted.
+   */
   length?: number | string;
+  /** How thick the track is across that axis. Sets `--thickness`. */
   thickness?: number | string;
+  /** Colour of the part from `min` to the value. Sets `--active`. */
   active?: string;
+  /** Colour of the rest of the track. Sets `--inactive`. */
   inactive?: string;
-  defaultStyle?: boolean;
   className?: string;
   style?: CSSProperties;
   /** `<Slider.Thumb />` goes here. */
   children?: ReactNode;
-  ref?: Ref<HTMLDivElement>;
 }
-declare function Track({
-  length,
-  thickness,
-  active,
-  inactive,
-  children,
-  className,
-  style,
-  defaultStyle,
-  ref,
-  ...props
-}: SliderTrackProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>): _$react.JSX.Element;
+//#endregion
+//#region src/components/Slider/type.d.ts
+/**
+ * How `Slider.Marks` fills itself in when it is given no children: one option
+ * every `per`, or every `step` of the slider. The object form turns off the
+ * mark or the label for the whole set; a single option is customized by
+ * writing `Slider.MarksOption` out instead.
+ */
+type MarksOptions = 'step' | number | {
+  per: 'step' | number;
+  mark?: boolean;
+  label?: boolean;
+};
+//#endregion
+//#region src/components/Slider/Marks.d.ts
+interface SliderMarksProps {
+  /**
+   * Space between the marks and the track. Sets `--gap`; the theme's own
+   * spacing stands when this is omitted.
+   */
+  gap?: number | string;
+  /**
+   * Build the marks instead of writing `Slider.MarksOption` out: a number puts
+   * one every that many, `'step'` one every `step`, and `{ per, mark, label }`
+   * also turns the mark or the label off for all of them. `children` is
+   * ignored while it is set.
+   *
+   * `'step'` makes one per step, which is a great many for a fine `step`.
+   */
+  options?: MarksOptions;
+  /**
+   * `<Slider.MarksOption />` goes here, one per mark. Ignored while `options`
+   * is set.
+   */
+  children?: ReactNode;
+}
+declare function Marks({ gap, options, children, className, style, ...props }: SliderMarksProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderMarksProps>): import("react").JSX.Element;
+//#endregion
+//#region src/components/Slider/MarksOption.d.ts
+interface SliderMarksOptionProps {
+  /** Where the mark sits, on the same scale as the thumb. */
+  value: number;
+  /**
+   * Draw the mark itself. Turn it off to show the label alone.
+   * @default true
+   */
+  mark?: boolean;
+  /**
+   * Text shown next to the mark. Leave it out to show the value; `null` leaves
+   * the label out, and an empty string draws an empty one.
+   */
+  label?: number | string | null;
+  /** Thickness of the mark. Sets `--thickness`. */
+  thickness?: number | string;
+  /** Length of the mark. Sets `--length`. */
+  length?: number | string;
+  /** Space between the mark and the label. Sets `--gap`. */
+  gap?: number | string;
+  /** Width of the label. Sets `--label-width`. */
+  labelWidth?: number | string;
+  /** Classes for the mark and the label inside the option. */
+  classes?: {
+    mark?: string;
+    label?: string;
+  };
+  /** Styles for the mark and the label inside the option. */
+  styles?: {
+    mark?: CSSProperties;
+    label?: CSSProperties;
+  };
+}
+declare function MarksOption({ value, mark, label, thickness, length, gap, labelWidth, classes, styles, className, style, ...props }: SliderMarksOptionProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderMarksOptionProps>): import("react").JSX.Element;
 //#endregion
 //#region src/components/Slider/context.d.ts
 type SliderContextValue = {
   value: number;
   min: number;
   max: number;
-  step: number; /** How the value is distributed across the travel. */
+  step: number;
+  /** How the value is distributed across the travel. */
   scale: Scale;
   vertical: boolean;
   reverse: boolean;
   disabled: boolean;
   readonly: boolean;
+  onChange?: (value: number) => void;
   /**
    * Position of the thumb, 0-100, already accounting for the display direction
    * implied by `vertical` and `reverse`.
    */
-  percent: number; /** `Track` registers its element here; `Root` normalizes the pointer against it. */
-  trackRef: RefObject<HTMLDivElement | null>; /** `Thumb` registers itself here; `Root` focuses it when a drag starts. */
+  percent: number;
+  /** `Track` registers its element here; `Root` normalizes the pointer against it. */
+  trackRef: RefObject<HTMLDivElement | null>;
+  /** `Thumb` registers itself here; `Root` focuses it when a drag starts. */
   thumbRef: RefObject<SliderThumbMethods | null>;
 };
 /**
@@ -836,9 +1263,18 @@ declare function useSliderContext<T>(selector: (state: SliderContextValue) => T)
 //#endregion
 //#region src/components/Slider/index.d.ts
 interface SliderProps {
+  /** The current value. The slider shows only this, so update it from `onChange`. */
   value: number;
+  /** The value at the start of the travel. */
   min: number;
+  /** The value at the end of the travel. */
   max: number;
+  /**
+   * Granularity of the value. A drag, the wheel and the arrow keys snap it to
+   * multiples of `step`.
+   *
+   * @default 1
+   */
   step?: number;
   /**
    * How the value is distributed across the travel.
@@ -851,41 +1287,90 @@ interface SliderProps {
    */
   scale?: Scale;
   /**
-   * slider orientation
-   * aria-orientation property is also applied.
+   * Run the slider vertically, with the value growing upwards. The range input
+   * inside the thumb takes its `aria-orientation` from this.
+   *
+   * @default false
    */
   vertical?: boolean;
+  /**
+   * Grow the value the other way: leftwards, or downwards when `vertical`.
+   * The arrow keys follow the direction on screen.
+   *
+   * @default false
+   */
   reverse?: boolean;
-  /** Global style to apply when dragged */
+  /**
+   * The cursor to show while dragging. It is set on the dragged element, so it
+   * stays while the pointer is outside the slider.
+   *
+   * @default { cursor: 'pointer' }
+   */
   externalStyles?: {
-    userSelectNone?: boolean;
-    cursor?: Cursor;
+    cursor?: CSSProperties['cursor'];
   };
   /**
-   * wheel control option
-   * If null, no event will be triggered
+   * How much one notch of the wheel moves the value. It only acts while the
+   * focus is inside, so that scrolling the page past the slider leaves it
+   * alone.
+   *
+   * `['raw', n]` moves the value by `n`, and `['normalized', n]` by `n` of the
+   * range between `min` and `max`. The result is snapped to `step`, except for
+   * an amount set on a modifier key (`{ default: …, shift: … }`). `null` turns
+   * the wheel off.
+   *
+   * @default ['raw', 1]
+   */
+  wheel?: ModifierValue<InputEventOption> | null;
+  /**
+   * How much a drag moves the value, per modifier key.
+   *
+   * `1` is the pointer position itself, which is what a drag normally is here.
+   * **Anything else turns the drag relative**: `0.1` makes the same movement
+   * cover a tenth of the travel, so the value stops following the pointer and
+   * starts moving a tenth as fast. Shift is bound to `0.1` by default, to
+   * match what it does on the arrow keys.
+   *
+   * Pressing or releasing the key mid-drag does not disturb the value: the
+   * travel so far is kept and the new sensitivity applies from there. **The
+   * pointer and the value stay apart for the rest of the drag** — snapping
+   * them back together on release would move the value nobody asked to move.
+   *
+   * @default { default: 1, shift: 0.1 }
    */
-  wheel?: InputEventOption | null;
+  dragSensitivity?: ModifierValue<number>;
   /**
-   * keyboard control option
-   * If null, no event will be triggered
+   * How much one arrow key press moves the value.
+   *
+   * `['raw', n]` moves the value by `n`, and `['normalized', n]` by `n` of the
+   * range between `min` and `max`. The result is snapped to `step`, except for
+   * an amount set on a modifier key, which is what lets shift move off the
+   * grid. `null` turns the arrow keys off.
+   *
+   * The default moves by 1, and by 0.1 with shift. With a `step` above 1, raise
+   * the amount to match: 1 would round straight back to where it started, and
+   * a development build warns about it.
+   *
+   * @default { default: ['raw', 1], shift: ['raw', 0.1] }
    */
-  keyboard?: InputEventOption | null;
+  keyboard?: ModifierValue<InputEventOption> | null;
   /**
-   * Only the appearance will change.
-   * Please consider using with readonly.
-   * aria-disabled property is also applied.
+   * Make the slider unchangeable and remove it from the tab order.
+   * The parts carry `data-disabled` while it is set.
    */
   disabled?: boolean;
   /**
    * Make the value unchangeable.
-   * aria-readonly property is also applied.
+   * The parts carry `data-readonly` while it is set.
    */
   readonly?: boolean;
   className?: string;
   style?: CSSProperties;
+  /** Called with the new value when a drag, the wheel or an arrow key moves it. */
   onChange?: (value: number) => void;
+  /** Called when a drag starts, with the value where the track was pressed. */
   onDragStart?: (value: number) => void;
+  /** Called when the drag ends, with the value it ended on. */
   onDragEnd?: (value: number) => void;
   /**
    * The slider renders exactly what you compose here; there is no default
@@ -894,7 +1379,7 @@ interface SliderProps {
    * @example
    * <Slider.Root value={value} min={0} max={100} onChange={setValue}>
    *   <Slider.Track>
-   *     <Slider.Thumb />
+   *     <Slider.Thumb aria-label="Level" />
    *   </Slider.Track>
    * </Slider.Root>
    */
@@ -909,61 +1394,90 @@ interface SliderMethods {
  */
 declare const Slider: {
   Root: React.ForwardRefExoticComponent<SliderProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderProps> & React.RefAttributes<SliderMethods>>;
-  Thumb: typeof Thumb$1;
-  Track: typeof Track;
+  Thumb: React.ForwardRefExoticComponent<SliderThumbProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderThumbProps> & React.RefAttributes<SliderThumbMethods>>;
+  Track: React.ForwardRefExoticComponent<SliderTrackProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderTrackProps> & React.RefAttributes<HTMLDivElement>>;
   Marks: typeof Marks;
   MarksOption: typeof MarksOption;
 };
 //#endregion
-//#region src/components/XYPad/Area.d.ts
-interface XYPadAreaProps {
-  width?: number | string;
-  height?: number | string;
-  color?: string;
-  className?: string;
-  style?: CSSProperties;
-  /** `<XYPad.Thumb />` goes here. */
-  children?: ReactNode;
-  ref?: Ref<HTMLDivElement>;
-}
-declare function Area({
-  width,
-  height,
-  color,
-  children,
-  className,
-  style,
-  ref,
-  ...props
-}: XYPadAreaProps & Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadAreaProps>): _$react.JSX.Element;
+//#region src/components/XYPad/context.d.ts
+type XYPadContextValue = {
+  value: XY<number>;
+  min: XY<number>;
+  max: XY<number>;
+  step: XY<number>;
+  /** How the value of each axis is distributed across the travel. */
+  scale: XY<Scale>;
+  reverse: XY<boolean>;
+  disabled: boolean;
+  readonly: boolean;
+  onChange?: (value: XY<number>) => void;
+  /**
+   * Position of the thumb, 0-100 per axis, already accounting for `reverse`.
+   */
+  percent: XY<number>;
+  /** `Area` registers its element here; `Root` normalizes the pointer against it. */
+  areaRef: RefObject<HTMLDivElement | null>;
+  /** `Thumb` registers itself here; `Root` focuses it when a drag starts. */
+  thumbRef: RefObject<XYPadThumbMethods | null>;
+};
+/**
+ * Everything here is derived during render, so there is no state to keep in
+ * sync: `value` comes from the props of `Root` and the rest follows from it.
+ */
+declare function useXYPadContext(): XYPadContextValue;
+declare function useXYPadContext<T>(selector: (state: XYPadContextValue) => T): T;
 //#endregion
 //#region src/components/XYPad/Thumb.d.ts
 interface XYPadThumbProps {
   /**
-   * Size comes from the `--thumb-size` CSS variable on `XYPad.Root`, so that
-   * the root can reserve the matching amount of space around the area.
+   * Sets `--color`, for the theme to colour the thumb with. The size is not
+   * set here but by `--thumb-size` on `XYPad.Root`, so that the root can leave
+   * the matching room around the area.
    */
   color?: string;
-  wrapperClassName?: string;
-  wrapperStyle?: CSSProperties;
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * Rendered inside the thumb. The thumb is one element either way, so what
+   * is passed here is decoration on top of it rather than a replacement for
+   * it — `className` and `style` are how its own appearance is changed.
+   */
   children?: ReactNode;
-  ref?: Ref<XYPadThumbMethods>;
+  /**
+   * The accessible name of each axis, as `[x, y]`. There are two range inputs
+   * inside the thumb, so each takes a name of its own; a single string names
+   * them both, which is rarely what you want.
+   */
+  'aria-label'?: XYInput<AriaAttributes['aria-label']>;
+  /** The ids of what labels each axis, as `[x, y]` or one for both. */
+  'aria-labelledby'?: XYInput<AriaAttributes['aria-labelledby']>;
+  /** The ids of what describes each axis, as `[x, y]` or one for both. */
+  'aria-describedby'?: XYInput<AriaAttributes['aria-describedby']>;
+  /**
+   * What the value of each axis means, when the number does not say it, as
+   * `[x, y]` or one for both.
+   */
+  'aria-valuetext'?: XYInput<AriaAttributes['aria-valuetext']>;
 }
 interface XYPadThumbMethods {
   focus: () => void;
   blur: () => void;
 }
-type Props = XYPadThumbProps & Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadThumbProps>;
-declare function Thumb({
-  color,
-  children,
-  wrapperClassName,
-  wrapperStyle,
-  className,
-  style,
-  ref,
-  ...props
-}: Props): _$react.JSX.Element;
+//#endregion
+//#region src/components/XYPad/Area.d.ts
+interface XYPadAreaProps {
+  /** Sets `--width`; the size the theme gives it stands when omitted. */
+  width?: number | string;
+  /** Sets `--height`; the size the theme gives it stands when omitted. */
+  height?: number | string;
+  /** Sets `--color`, for the theme to colour the area with. */
+  color?: string;
+  className?: string;
+  style?: CSSProperties;
+  /** `<XYPad.Thumb />` goes here. */
+  children?: ReactNode;
+}
 //#endregion
 //#region src/components/XYPad/index.d.ts
 /**
@@ -973,12 +1487,22 @@ declare function Thumb({
  * value applies to both axes.
  */
 interface XYPadProps {
+  /** The current value as `[x, y]`. The pad shows only this, so update it from `onChange`. */
   value: XY<number>;
+  /** The value at the start of each axis, as `[x, y]` or one number for both. */
   min: XYInput<number>;
+  /** The value at the end of each axis, as `[x, y]` or one number for both. */
   max: XYInput<number>;
+  /**
+   * Granularity of each axis, as `[x, y]` or one number for both. A drag, the
+   * wheel and the arrow keys snap the value to multiples of it.
+   *
+   * @default 1
+   */
   step?: XYInput<number>;
   /**
-   * How the value of each axis is distributed across the travel.
+   * How the value of each axis is distributed across the travel, as `[x, y]`
+   * or one scale for both.
    *
    * Pick one of the scales from `@tremolo-ui/functions`: `linearScale`,
    * `exponentialScale`, `curveScale(n)`, `symmetricSkewScale(n)`, or
@@ -987,25 +1511,83 @@ interface XYPadProps {
    * @default linearScale
    */
   scale?: XYInput<Scale>;
+  /**
+   * Grow an axis the other way, as `[x, y]` or one for both. By default x grows
+   * rightwards and y downwards. The arrow keys follow the direction on screen.
+   *
+   * @default false
+   */
   reverse?: XYInput<boolean>;
   /**
-   * wheel control option. Shift selects the x axis.
-   * If null, no event will be triggered
+   * How much one notch of the wheel moves the value. It only acts while the
+   * focus is inside, so that scrolling the page past the pad leaves it alone.
+   * Scrolling sideways, or with shift held, moves x; otherwise it moves y.
+   *
+   * `['raw', n]` moves the value by `n`, and `['normalized', n]` by `n` of the
+   * range of that axis. The result is snapped to `step`, except for an amount
+   * set on a modifier key (`{ default: …, alt: … }`). `null` turns the wheel
+   * off.
+   *
+   * @default ['raw', 1]
+   */
+  wheel?: ModifierValue<InputEventOption> | null;
+  /**
+   * How much a drag moves the value, per modifier key.
+   *
+   * `1` is the pointer position itself, which is what a drag normally is here.
+   * **Anything else turns the drag relative**: `0.1` makes the same movement
+   * cover a tenth of the travel, so the value stops following the pointer and
+   * starts moving a tenth as fast. Shift is bound to `0.1` by default, to
+   * match what it does on the arrow keys.
+   *
+   * Pressing or releasing the key mid-drag does not disturb the value: the
+   * travel so far is kept and the new sensitivity applies from there. **The
+   * pointer and the value stay apart for the rest of the drag** — snapping
+   * them back together on release would move the value nobody asked to move.
+   *
+   * @default { default: 1, shift: 0.1 }
+   */
+  dragSensitivity?: ModifierValue<number>;
+  /**
+   * How much one arrow key press moves the value. Left and right move x, up
+   * and down move y.
+   *
+   * `['raw', n]` moves the value by `n`, and `['normalized', n]` by `n` of the
+   * range of that axis. The result is snapped to `step`, except for an amount
+   * set on a modifier key, which is what lets shift move off the grid. `null`
+   * turns the arrow keys off.
+   *
+   * The default moves by 1, and by 0.1 with shift. With a `step` above 1, raise
+   * the amount to match: 1 would round straight back to where it started, and
+   * a development build warns about it.
+   *
+   * @default { default: ['raw', 1], shift: ['raw', 0.1] }
    */
-  wheel?: InputEventOption | null;
+  keyboard?: ModifierValue<InputEventOption> | null;
   /**
-   * keyboard control option
-   * If null, no event will be triggered
+   * The cursor to show while dragging. It is set on the dragged element, so it
+   * stays while the pointer is outside the pad.
+   *
+   * @default { cursor: 'pointer' }
    */
-  keyboard?: InputEventOption | null;
   externalStyles?: {
-    userSelectNone?: boolean;
-    cursor?: Cursor;
+    cursor?: CSSProperties['cursor'];
   };
+  /**
+   * Make the pad unchangeable and remove its thumb from the tab order.
+   * The parts carry `data-disabled` while it is set.
+   */
   disabled?: boolean;
+  /**
+   * Make the pad unchangeable while leaving its thumb focusable.
+   * The parts carry `data-readonly` while it is set.
+   */
   readonly?: boolean;
+  /** Called with the new value when a drag, the wheel or an arrow key moves it. */
   onChange?: (value: XY<number>) => void;
+  /** Called when a drag starts, with the value where the area was pressed. */
   onDragStart?: (value: XY<number>) => void;
+  /** Called when the drag ends, with the value it ended on. */
   onDragEnd?: (value: XY<number>) => void;
   /**
    * The pad renders exactly what you compose here; there is no default
@@ -1029,9 +1611,9 @@ interface XYPadMethods {
  * Simple XYPad
  */
 declare const XYPad: {
-  Root: _$react.ForwardRefExoticComponent<XYPadProps & Omit<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadProps> & _$react.RefAttributes<XYPadMethods>>;
-  Thumb: typeof Thumb;
-  Area: typeof Area;
+  Root: import("react").ForwardRefExoticComponent<XYPadProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadProps> & import("react").RefAttributes<XYPadMethods>>;
+  Thumb: import("react").ForwardRefExoticComponent<XYPadThumbProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadThumbProps> & import("react").RefAttributes<XYPadThumbMethods>>;
+  Area: import("react").ForwardRefExoticComponent<XYPadAreaProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadAreaProps> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 //#region src/hooks/useAnimationFrame.d.ts
@@ -1046,22 +1628,28 @@ interface UseDragProps {
   threshold?: number;
   /** CSS cursor to show while dragging. Applied to the element itself. */
   cursor?: string;
-  onDrag?: (x: number, y: number, deltaX: number, deltaY: number) => void;
-  onDragStart?: () => void;
-  onDragEnd?: () => void;
+  /**
+   * Hide the pointer and read its movement directly, instead of following it
+   * around the screen.
+   *
+   * @see DragOptions.pointerLock
+   * @default false
+   */
+  pointerLock?: boolean;
+  /**
+   * @param state the whole drag, for anything the four numbers leave out —
+   * the pointer event and its modifier keys, most of all.
+   */
+  onDrag?: (x: number, y: number, deltaX: number, deltaY: number, state: DragState) => void;
+  onDragStart?: (state: DragState) => void;
+  onDragEnd?: (state: DragState) => void;
 }
 /**
  * Track a pointer drag on an element.
  *
  * @returns a ref callback to attach to the element being dragged
  */
-declare function useDrag<T extends Element>({
-  threshold,
-  cursor,
-  onDrag,
-  onDragStart,
-  onDragEnd
-}: UseDragProps): (node: T | null) => void;
+declare function useDrag<T extends Element>({ threshold, cursor, pointerLock, onDrag, onDragStart, onDragEnd }: UseDragProps): (node: T | null) => void;
 //#endregion
 //#region src/hooks/useDragValue.d.ts
 interface UseDragValueOptions {
@@ -1086,15 +1674,48 @@ interface UseDragValueOptions {
    * @default 100
    */
   pixelRange?: XYInput$1<number>;
+  /**
+   * How much the movement counts, read on every move. `0.1` makes the same
+   * movement cover a tenth of the range, which is what a fine-adjustment
+   * modifier wants.
+   *
+   * With `baseElementRef` the value is normally the position pointed at, so
+   * anything but `1` turns the mapping relative and leaves the pointer and the
+   * value apart for the rest of the drag.
+   *
+   * @see relativeMapping
+   * @see elementMapping
+   */
+  sensitivity?: (state: DragState) => number;
   /** @see DragValueOptions.updateOnPointerDown */
   updateOnPointerDown?: boolean;
   /** @default 0 */
   threshold?: number;
   /** CSS cursor to show while dragging. Applied to the element itself. */
   cursor?: string;
-  onChange?: (value: XY$1<number>) => void;
-  onDragStart?: (value: XY$1<number>) => void;
-  onDragEnd?: (value: XY$1<number>) => void;
+  /**
+   * Hide the pointer and read its movement directly, instead of following it
+   * around the screen. Only with `getValue`: there is no pointer position to
+   * normalize against a `baseElementRef` while the pointer is locked.
+   *
+   * @see DragOptions.pointerLock
+   * @default false
+   */
+  pointerLock?: boolean;
+  /**
+   * Decide whether a pointerdown starts a drag at all, before the pointer is
+   * captured.
+   *
+   * @see DragOptions.shouldStart
+   */
+  shouldStart?: (event: PointerEvent) => boolean;
+  /**
+   * @param state the whole drag, for anything the value leaves out — the
+   * pointer event and its modifier keys, most of all.
+   */
+  onChange?: (value: XY$1<number>, state: DragState) => void;
+  onDragStart?: (value: XY$1<number>, state: DragState) => void;
+  onDragEnd?: (value: XY$1<number>, state: DragState) => void;
 }
 /**
  * Drive a value with a pointer drag.
@@ -1117,27 +1738,53 @@ declare function useEventListener<K extends keyof GlobalEventHandlersEventMap>(t
 declare function useInterval(callback: () => void, delay: number | null): void;
 //#endregion
 //#region src/hooks/useLongPress.d.ts
-declare function useLongPress(callback: () => void, initialDelay?: number, interval?: number): () => void;
+declare function useLongPress(callback: () => void, initialDelay?: number, interval?: number): (event?: Pick<PointerEvent, "button" | "pointerId">) => void;
 //#endregion
 //#region src/hooks/useMIDIAccess.d.ts
 /**
  * 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.
  */
 declare function useMIDIAccess(requestOnMount?: boolean): {
-  request: () => void;
+  request: (options?: MIDIAccessOptions$1) => void;
   midiAccess: MIDIAccess | null;
-  error: _$_tremolo_ui_dom0.MIDIAccessError | null;
+  error: import("@tremolo-ui/dom").MIDIAccessError | null;
+  inputs: readonly MIDIInput[];
 };
 //#endregion
 //#region src/hooks/useMIDIInput.d.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)
+ *   },
+ * })
  */
-declare function useMIDIInput(midiAccess: MIDIAccess | null, onNoteOnEvent?: (note: number, velocity: number) => void, onNoteOffEvent?: (note: number) => void, onPitchBendEvent?: (msb: number, lsb: number) => void): void;
+declare function useMIDIInput(midiAccess: MIDIAccess | null, handlers: MIDIInputHandlers): void;
 //#endregion
 //#region src/hooks/useMIDIMessage.d.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.
  */
 declare function useMIDIMessage(midiAccess: MIDIAccess | null, onMIDIMessage: (event: MIDIMessageEvent) => void): void;
 //#endregion
@@ -1164,10 +1811,31 @@ interface UseWheelOptions extends WheelOptions {
  *
  * @returns a ref callback to attach to the element, unused when `target` is given
  */
-declare function useWheel<T extends Element>(onWheel: (event: WheelEvent) => void, {
-  requireFocus,
-  target
-}?: UseWheelOptions): (node: T | null) => void;
+declare function useWheel<T extends Element>(onWheel: (event: WheelEvent) => void, { requireFocus, target }?: UseWheelOptions): (node: T | null) => void;
+//#endregion
+//#region src/input-event.d.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`.
+ */
+declare const DEFAULT_KEYBOARD_OPTIONS: ModifierValue<InputEventOption>;
+/**
+ * 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.
+ */
+declare const DEFAULT_WHEEL_OPTIONS: ModifierValue<InputEventOption>;
+/**
+ * The drag sensitivity used by value controls by default. Shift makes the
+ * same movement cover a tenth of the range, matching the arrow keys.
+ */
+declare const DEFAULT_DRAG_SENSITIVITY: ModifierValue<number>;
 //#endregion
-export { type AbsoluteSizingProps, AnimationCanvas, type AnimationCanvasProps, type CSSVariables, type CommonProps, type DecrementStepperProps, type DrawFunction, type IncrementStepperProps, type InitFunction, type KeyAttributes, type KeyState, type KeyboardShortcuts, Knob, type KnobMethods, type KnobProps, type MIDIAccessError, type MarksOptionProps, type MarksProps, NOT_SUPPORTED, NumberInput, type NumberInputFieldProps, type NumberInputMethods, type NumberInputProps, PERMISSION_DENIED, Piano, type PianoMethods, type PianoProps, type PointBaseType, type PointProps, PointsEditor, type PointsEditorBackgroundProps, type PointsEditorContainerProps, type PointsEditorContextValue, type PointsEditorProps, type RelativeSizingProps, SHORTCUTS, Slider, type SliderMethods, type SliderProps, type SliderThumbMethods, type SliderThumbProps, type SliderTrackProps, type StepperProps, type UseDragValueOptions, type UseWheelOptions, type XY, type XYInput, XYPad, type XYPadAreaProps, type XYPadMethods, type XYPadProps, type XYPadThumbMethods, type XYPadThumbProps, clampPoint, useAnimationFrame, useDrag, useDragValue, useEventListener, useInterval, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useNumberInputContext, usePointsEditorContext, useSliderContext, useWheel };
+export { AnimationCanvas, type AnimationCanvasCommonProps, type AnimationCanvasFixedProps, type AnimationCanvasProps, type AnimationCanvasResizableProps, type CSSVariables, DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, type DrawFunction, type InitFunction, type KeyAttributes, type KeyState, type KeyboardShortcuts, Knob, type KnobContextValue, type KnobMethods, type KnobProps, type KnobSVGRootProps, type KnobThumbProps, type MIDIAccessError, type MIDIAccessOptions, type MIDIInputHandlers, type MarksOptions, NOT_SUPPORTED, NumberInput, type NumberInputContextValue, type NumberInputDecrementStepperProps, type NumberInputIncrementStepperProps, type NumberInputInputFieldProps, type NumberInputMethods, type NumberInputProps, type NumberInputStepperProps, PERMISSION_DENIED, PITCH_BEND_CENTER, Piano, type PianoMethods, type PianoProps, type PointBaseType, PointsEditor, type PointsEditorBackgroundProps, type PointsEditorContainerProps, type PointsEditorContextValue, type PointsEditorPointProps, type PointsEditorProps, type PointsEditorSelectionBoxProps, SHORTCUTS, Slider, type SliderContextValue, type SliderMarksOptionProps, type SliderMarksProps, type SliderMethods, type SliderProps, type SliderThumbMethods, type SliderThumbProps, type SliderTrackProps, UNAVAILABLE, type UseDragValueOptions, type UseWheelOptions, type XY, type XYInput, XYPad, type XYPadAreaProps, type XYPadContextValue, type XYPadMethods, type XYPadProps, type XYPadThumbMethods, type XYPadThumbProps, clampPoint, useAnimationFrame, useDrag, useDragValue, useEventListener, useInterval, useKnobContext, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useNumberInputContext, usePointsEditorContext, useSliderContext, useWheel, useXYPadContext };
 //# sourceMappingURL=index.d.ts.map