@tremolo-ui/react 0.4.0 → 0.6.0

package/dist/index.d.ts

@@ -1,159 +1,323 @@
-import * as _$react from "react";
-import React$1, { CSSProperties, ComponentPropsWithoutRef, DependencyList, ReactElement, ReactNode, Ref, RefObject, SVGProps } from "react";
-import { InputEventOption } from "@tremolo-ui/functions";
-import * as _$_tremolo_ui_dom0 from "@tremolo-ui/dom";
-import { MIDIAccessError, NOT_SUPPORTED, PERMISSION_DENIED } from "@tremolo-ui/dom";
-
+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: {
-  /** current canvas width */width: number; /** current canvas height */
-  height: number; /** frame count */
-  count: number; /** delta time (ms) */
-  deltaTime: number; /** elapsed time (ms) */
-  elapsedTime: number; /** frame per second */
-  fps: number;
-}) => void;
-interface CommonProps {
+type DrawFunction = (context: CanvasRenderingContext2D, option: AnimationFrame) => void;
+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
+   * effect. Passing a fresh object on every render is therefore harmless.
+   *
    * @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;
-//#endregion
-//#region src/components/_util/type.d.ts
-type Override<T, U> = T & Omit<U, keyof T>;
+declare function InactiveLine({ stroke, strokeWidth, className, ...props }: Omit<SVGProps<SVGPathElement>, 'd'>): import("react").JSX.Element;
 //#endregion
 //#region src/components/Knob/SVGRoot.d.ts
-interface SVGRoot {
-  block?: boolean;
-  overflowVisible?: boolean;
+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
-}: Override<SVGRoot, SVGProps<SVGSVGElement>>): _$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 {
-  /** 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({
-  className,
-  thumb,
-  thumbLine,
-  thumbSize,
-  thumbLineWeight,
-  thumbLineLength,
-  classes,
-  ...props
-}: Props & Omit<SVGProps<SVGSVGElement>, 'd' | keyof Props>): _$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;
-  skew?: number;
   /**
-   * value set when double-clicking
-   * restriction: enableDoubleClickDefault = true
+   * How the value is distributed across the travel.
+   *
+   * Pick one of the scales from `@tremolo-ui/functions`: `linearScale`,
+   * `exponentialScale`, `curveScale(n)`, `symmetricSkewScale(n)`, or
+   * `skewScale(n)` for a value that has to match a JUCE parameter.
+   *
+   * @default linearScale
+   */
+  scale?: Scale;
+  /**
+   * 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. 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
    */
-  wheel?: InputEventOption | null;
+  pointerLock?: boolean;
   /**
-   * 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?: ModifierValue<InputEventOption> | null;
+  /**
+   * 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
+   * markup to fall back to.
+   *
+   * @example
+   * <Knob.Root value={value} min={0} max={100} onChange={setValue}>
+   *   <Knob.SVGRoot>
+   *     <Knob.InactiveLine />
+   *     <Knob.ActiveLine />
+   *     <Knob.Thumb />
+   *   </Knob.SVGRoot>
+   * </Knob.Root>
+   */
+  children: ReactNode;
 }
 interface KnobMethods {
   focus: () => void;
@@ -163,109 +327,309 @@ 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;
 };
 //#endregion
-//#region src/components/NumberInput/DecrementStepper.d.ts
-interface DecrementStepperProps {
-  size?: number;
-  children?: ReactNode;
+//#region src/components/NumberInput/InputField.d.ts
+interface NumberInputInputFieldProps {
+  className?: string;
+  style?: CSSProperties;
 }
-declare function DecrementStepper({
-  size,
-  children,
-  className,
-  ...props
-}: DecrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DecrementStepperProps>): _$react.JSX.Element;
 //#endregion
-//#region src/components/NumberInput/IncrementStepper.d.ts
-interface IncrementStepperProps {
-  size?: number;
+//#region src/components/NumberInput/Stepper.d.ts
+interface NumberInputStepperProps {
+  className?: string;
+  style?: CSSProperties;
+  /** `<NumberInput.IncrementStepper />` and `<NumberInput.DecrementStepper />` go here. */
   children?: ReactNode;
 }
-declare function IncrementStepper({
-  size,
-  children,
-  className,
-  ...props
-}: IncrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof IncrementStepperProps>): _$react.JSX.Element;
 //#endregion
-//#region src/components/NumberInput/Stepper.d.ts
-interface StepperProps {
-  /** Display only when hovering. */
-  dynamic?: boolean;
+//#region src/components/NumberInput/StepperButton.d.ts
+interface StepperButtonProps {
+  className?: string;
+  style?: CSSProperties;
+  /** Replaces the default arrow. Size it with the `--stepper-icon-size` variable. */
   children?: ReactNode;
 }
-declare function Stepper({
-  dynamic,
-  children,
-  className,
-  ...props
-}: StepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof StepperProps>): _$react.JSX.Element;
 //#endregion
-//#region src/components/NumberInput/type.d.ts
+//#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 = {
+  value: number;
+  /**
+   * The range the caller asked for. Left undefined when unbounded, which is
+   * what `aria-valuemin` / `aria-valuemax` and the steppers need to tell apart
+   * from a range that happens to sit at the edge of the safe integers.
+   */
+  min?: number;
+  max?: number;
+  step: number;
+  /** How the value is distributed across the travel. */
+  scale: Scale;
+  disabled: boolean;
+  readonly: boolean;
+  clampValue: boolean;
+  /**
+   * The effective scaling for `applyDelta`, with unbounded ends filled in.
+   * Ignores `min` / `max` when `clampValue` is off.
+   */
+  range: ValueRange;
+  /** 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`. */
+  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. 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>;
+};
 /**
- * [unit, scale][]
- * @example
- * [['Hz', 1], ['kHz', 1000]]
+ * The only state behind this is the editing draft; `value` comes from the props
+ * of `Root` and everything else is derived during render.
  */
-type Units = [string, number][];
+declare function useNumberInputContext(): NumberInputContextValue;
+declare function useNumberInputContext<T>(selector: (state: NumberInputContextValue) => T): T;
 //#endregion
 //#region src/components/NumberInput/index.d.ts
 interface NumberInputProps {
-  value: number | string;
   /**
-   * Number.MIN_SAFE_INTEGER
+   * The value. What the input shows is `format(value)`, except while the user
+   * 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;
   /**
-   * Number.MAX_SAFE_INTEGER
+   * 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;
   /**
-   * @example
-   * units='Hz'
-   * units={[['Hz', 1], ['kHz', 1000]]}
-   * units={[['ms', 1], ['s', 1000]]}
+   * How the value is distributed across the travel of a drag or a
+   * `'normalized'` wheel / keyboard nudge.
+   *
+   * @default linearScale
    */
-  units?: string | Units;
+  scale?: Scale;
   /**
-   * Digits for rounding numbers.
+   * 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
-   * with:
-   * units={[['Hz', 1], ['kHz', 1000]]}
-   * digit={3}
-   * results:
-   * value=100 -> 100Hz, value=1600 -> 1.60Hz
+   * <NumberInput.Root {...unitFormat('Hz', { digits: 2 })} value={v} />
+   */
+  format?: (value: number) => string;
+  /**
+   * Read a value back out of the text. Has to undo `format`.
+   *
+   * Text with no number in it reads as `NaN`, which leaves the value alone.
+   */
+  parse?: (text: string) => number;
+  /**
+   * Keep the value within `min` and `max` when it is committed or stepped.
+   * Typing is never clamped, so that a value can be entered digit by digit.
+   * @default true
+   */
+  clampValue?: boolean;
+  /**
+   * 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?: ModifierValue<InputEventOption> | null;
+  /**
+   * 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?: ModifierValue<InputEventOption> | null;
+  /**
+   * Pixels of vertical drag on `Stepper` that move the value by one `step`.
+   * `null` turns the drag off.
+   * @default 1
+   */
+  drag?: number | null;
+  /**
+   * 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
    */
-  digit?: number;
-  readonly?: boolean;
-  variant?: 'outline' | 'filled' | 'flushed' | 'unstyled';
-  selectWithFocus?: 'all' | 'number' | 'none';
   blurOnEnter?: boolean;
-  keepWithinRange?: boolean;
-  clampValueOnBlur?: boolean;
   /**
-   * wheel control option
-   * If null, no event will be triggered
+   * Make the input unchangeable and remove it from the tab order.
+   * The parts carry `data-disabled` while it is set.
    */
-  wheel?: InputEventOption | null;
+  disabled?: boolean;
   /**
-   * keyboard control option
-   * If null, no event will be triggered
+   * Make the value unchangeable.
+   * The parts carry `data-readonly` while it is set.
    */
-  keyboard?: InputEventOption | null;
-  activeColor?: string;
-  wrapperClassName?: string;
-  onChange?: (value: number, text: string) => void;
-  onFocus?: (value: number, text: string, event: React.FocusEvent<HTMLInputElement, Element>) => void;
-  onBlur?: (value: number, text: string, event: React.FocusEvent<HTMLInputElement, Element>) => void;
-  children?: ReactNode;
+  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
+   * markup to fall back to.
+   *
+   * @example
+   * <NumberInput.Root value={value} min={0} max={100} onChange={setValue}>
+   *   <NumberInput.InputField />
+   *   <NumberInput.Stepper>
+   *     <NumberInput.IncrementStepper />
+   *     <NumberInput.DecrementStepper />
+   *   </NumberInput.Stepper>
+   * </NumberInput.Root>
+   */
+  children: ReactNode;
 }
 interface NumberInputMethods {
   focus: () => void;
@@ -275,99 +639,172 @@ interface NumberInputMethods {
  * Input with some useful functions for entering numerical values.
  */
 declare const NumberInput: {
-  Root: _$react.ForwardRefExoticComponent<NumberInputProps & Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | keyof NumberInputProps> & _$react.RefAttributes<NumberInputMethods>>;
-  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/key.d.ts
-interface KeyProps {
-  noteNumber: number;
-  width?: number;
-  height?: number | `${number}%`;
-  bg?: string;
-  color?: string;
-  activeBg?: string;
-  activeColor?: string;
-  style?: CSSProperties;
+//#region src/components/Piano/keyboard-shortcuts.d.ts
+type KeyboardShortcuts = {
   /**
-   * \<KeyLabel />
+   * Keys laid out from `noteRange.first`, one entry per semitone.
+   *
+   * An empty string leaves that note without a shortcut: `KeyboardEvent.key` is
+   * never empty, so the entry can never match. Use it to skip the black keys
+   * (see {@link SHORTCUTS.HOME_ROW_NATURAL}) and keep the remaining entries
+   * lined up with the notes.
    */
-  children?: ReactElement;
-  /** @internal */
-  __width?: number;
-}
-interface KeyMethods {
-  play: (velocity?: number) => void;
-  stop: () => void;
-  played: () => boolean;
-}
-//#endregion
-//#region src/components/Piano/context.d.ts
-type NoteRange = {
-  first: number;
-  last: number;
-};
-//#endregion
-//#region src/components/Piano/keyboardShortcuts.d.ts
-type KeyboardShortcuts = {
   keys: string[];
-  flags?: {
-    naturalOnly?: boolean;
-  };
 };
+/**
+ * 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: {
     keys: string[];
   };
+  /** The white keys only, on the home row. Black keys have no shortcut. */
+  HOME_ROW_NATURAL: {
+    keys: string[];
+  };
 };
 //#endregion
-//#region src/components/Piano/KeyLabel.d.ts
-interface KeyLabelProps {
-  /**
-   * override Piano.label
-   */
-  label?: (note: number, index: number) => ReactNode;
-  wrapperClassName?: string;
-  wrapperStyle?: CSSProperties;
-  /** @internal */
-  __note?: number;
-  /** @internal */
-  __label?: (note: number, index: number) => ReactNode;
-}
-declare function KeyLabel({
-  label,
-  className,
-  wrapperClassName,
-  wrapperStyle,
-  __note,
-  __label,
-  ...props
-}: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>): false | _$react.JSX.Element;
-//#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.
+ */
+type CSSVariables = Record<`--${string}`, string | number | undefined>;
 /**
- * [noteRange.first, noteRange.first + 1 ..., noteRange.last]
+ * What {@link PianoProps.keyProps} may return for one key.
+ *
+ * `data-*` attributes are spelled out because TypeScript only allows them on
+ * JSX syntax, not on an object type, and selecting on one is the usual way to
+ * mark a key out.
  */
-declare function getNoteRangeArray(noteRange: NoteRange): number[];
+type KeyAttributes = Omit<ComponentPropsWithoutRef<'div'>, 'style'> & {
+  style?: CSSProperties & CSSVariables;
+} & Record<`data-${string}`, string | number | boolean | undefined>;
+/** What a key is, when {@link PianoProps.label} or `keyProps` is asked about it. */
+interface KeyState {
+  /** Position in the note range, counting from `noteRange.first`. */
+  index: number;
+  keyType: 'white' | 'black';
+  /** Whether the note is currently sounding. */
+  active: boolean;
+  /** Whether the note is above {@link PianoProps.midiMax} and cannot sound. */
+  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. 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 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?: boolean;
-  whiteNoteWidth?: number;
-  blackNoteWidth?: number;
+  /**
+   * 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
+   */
+  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, in pixels.
+   * @default 1
+   */
+  keyGap?: number;
+  /**
+   * Width of a black key, as a fraction of {@link PianoProps.whiteKeyWidth}.
+   * @default 0.65
+   */
+  blackKeyWidthRatio?: number;
+  /**
+   * Height of a black key, as a fraction of the height of the keyboard.
+   * @default 0.6
+   */
+  blackKeyHeightRatio?: number;
+  /**
+   * 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;
-  onPlayNote?: (note: number, velocity?: number) => void;
-  onStopNote?: (note: number) => void;
-  label?: (note: number, index: number) => ReactNode;
+  style?: CSSProperties & CSSVariables;
   /**
-   * \<WhiteKey /> | \<BlackKey />
+   * What to draw inside a key. `''`, `null` and `undefined` leave it bare, so
+   * a layout with gaps — {@link SHORTCUTS.HOME_ROW_NATURAL}, say — needs no
+   * special casing.
    */
-  children?: ReactElement | ReactElement[];
+  label?: (note: number, state: KeyState) => ReactNode;
+  /**
+   * Extra props for one key, by note: a class, a style, a `data-*` attribute
+   * to select on.
+   *
+   * The geometry of the key (`left`, `width`, `height`) is applied after the
+   * returned `style` and cannot be overridden, so a key cannot be drawn
+   * somewhere other than where it responds.
+   *
+   * @example highlight the notes of a scale
+   * ```tsx
+   * 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 {
   playNote: (note: number, velocity?: number) => void;
@@ -377,25 +814,21 @@ interface PianoMethods {
  * Customizable piano component.
  */
 declare const Piano: {
-  Root: React$1.ForwardRefExoticComponent<PianoProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PianoProps> & React$1.RefAttributes<PianoMethods>>;
-  WhiteKey: React$1.ForwardRefExoticComponent<KeyProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React$1.RefAttributes<KeyMethods>>;
-  BlackKey: React$1.ForwardRefExoticComponent<KeyProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React$1.RefAttributes<KeyMethods>>;
-  KeyLabel: typeof KeyLabel;
+  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
-declare function Background({
-  className,
-  children,
-  ...props
-}: ComponentPropsWithoutRef<'div'>): _$react.JSX.Element;
-//#endregion
 //#region src/components/PointsEditor/Container.d.ts
-declare function Container({
-  className,
-  children,
-  ...props
-}: ComponentPropsWithoutRef<'div'>): _$react.JSX.Element;
+interface PointsEditorContainerProps {
+  /** `<PointsEditor.Point />` goes here. */
+  children?: ReactNode;
+}
+//#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 = {
@@ -406,138 +839,301 @@ 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?: ModifierValue<InputEventOption> | null;
+  /** Overrides the `keyboard` of `PointsEditor.Root`. */
+  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,
-  readonly,
-  onChange,
-  onDragStart,
-  onDragEnd,
-  className,
-  style,
-  onPointerDown,
-  ...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: 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: {
+    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. 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;
-  grid?: number | PointBaseType;
+  /**
+   * 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.
+   * 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
-   * 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.
+   *
+   * 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
+   */
+  selectable?: boolean;
+  /**
+   * Ids of the selected points, to hold the selection yourself. Leave it out
+   * and the editor keeps its own.
+   *
+   * A `Point` takes its id from its `id` prop, or generates one that lasts as
+   * long as it is mounted.
    */
-  wheel?: 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;
   /**
-   * keyboard control option
-   * If null, no event will be triggered
+   * The editor renders exactly what you compose here; there is no default
+   * markup to fall back to.
+   *
+   * @example
+   * <PointsEditor.Root>
+   *   <PointsEditor.Background>
+   *     <svg viewBox="0 0 200 100">...</svg>
+   *   </PointsEditor.Background>
+   *   <PointsEditor.Container>
+   *     {points.map((point, i) => (
+   *       <PointsEditor.Point key={i} value={point} onChange={...} />
+   *     ))}
+   *   </PointsEditor.Container>
+   * </PointsEditor.Root>
    */
-  keyboard?: InputEventOption | null;
+  children: ReactNode;
 }
 /**
  * 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 ScaleType = 'mark' | 'mark-number' | 'number';
-type ScaleOptions = ['step', ScaleType] | [number, ScaleType];
-//#endregion
-//#region src/components/Slider/Scale.d.ts
-interface ScaleProps {
-  gap?: number | string;
-  options?: ScaleOptions;
-  children?: ReactNode;
-}
-declare function Scale({
-  gap,
-  options,
-  children,
-  className,
-  style,
-  ...props
-}: ScaleProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>): _$react.JSX.Element;
-//#endregion
-//#region src/components/Slider/ScaleOption.d.ts
-interface ScaleOptionProps {
-  value: number;
-  type?: ScaleType;
-  /** 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 ScaleOption({
-  value,
-  type,
-  label,
-  thickness,
-  length,
-  gap,
-  labelWidth,
-  classes,
-  styles,
-  className,
-  style,
-  ...props
-}: ScaleOptionProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleOptionProps>): _$react.JSX.Element;
-//#endregion
 //#region src/components/Slider/Thumb.d.ts
 interface SliderThumbProps {
-  size?: number | string;
-  width?: number | string;
-  height?: number | string;
+  /**
+   * 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;
-  /** @internal */
-  __percent?: number;
+  'aria-label'?: AriaAttributes['aria-label'];
+  'aria-labelledby'?: AriaAttributes['aria-labelledby'];
+  'aria-describedby'?: AriaAttributes['aria-describedby'];
+  'aria-valuetext'?: AriaAttributes['aria-valuetext'];
 }
 interface SliderThumbMethods {
   focus: () => void;
@@ -546,92 +1142,248 @@ interface SliderThumbMethods {
 //#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;
-  children?: ReactElement;
-  /** @internal */
-  __thumb?: ReactElement;
-  /** @internal */
-  __percent?: number;
-}
-declare function Track({
-  length,
-  thickness,
-  active,
-  inactive,
-  children,
-  className,
-  style,
-  defaultStyle,
-  __thumb,
-  __percent,
-  ...props
-}: SliderTrackProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>): _$react.JSX.Element;
+  /** `<Slider.Thumb />` goes here. */
+  children?: ReactNode;
+}
+//#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 State = {
+type SliderContextValue = {
+  value: number;
   min: number;
   max: number;
   step: number;
-  skew: 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. */
+  thumbRef: RefObject<SliderThumbMethods | null>;
 };
-declare function useSliderContext<T>(selector: (state: State) => T): T;
+/**
+ * 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 useSliderContext(): SliderContextValue;
+declare function useSliderContext<T>(selector: (state: SliderContextValue) => T): 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;
-  skew?: number;
   /**
-   * slider orientation
-   * aria-orientation property is also applied.
+   * How the value is distributed across the travel.
+   *
+   * Pick one of the scales from `@tremolo-ui/functions`: `linearScale`,
+   * `exponentialScale`, `curveScale(n)`, `symmetricSkewScale(n)`, or
+   * `skewScale(n)` for a value that has to match a JUCE parameter.
+   *
+   * @default linearScale
+   */
+  scale?: Scale;
+  /**
+   * 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;
-  /** \<SliderThumb /> | \<SliderTrack /> */
-  children?: ReactElement | ReactElement[];
+  /**
+   * The slider renders exactly what you compose here; there is no default
+   * markup to fall back to.
+   *
+   * @example
+   * <Slider.Root value={value} min={0} max={100} onChange={setValue}>
+   *   <Slider.Track>
+   *     <Slider.Thumb aria-label="Level" />
+   *   </Slider.Track>
+   * </Slider.Root>
+   */
+  children: ReactNode;
 }
 interface SliderMethods {
   focus: () => void;
@@ -641,90 +1393,214 @@ interface SliderMethods {
  * Customizable slider
  */
 declare const Slider: {
-  Root: React$1.ForwardRefExoticComponent<SliderProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderProps> & React$1.RefAttributes<SliderMethods>>;
-  Thumb: React$1.ForwardRefExoticComponent<SliderThumbProps & React$1.RefAttributes<SliderThumbMethods>>;
-  Track: typeof Track;
-  Scale: typeof Scale;
-  ScaleOption: typeof ScaleOption;
+  Root: React.ForwardRefExoticComponent<SliderProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderProps> & React.RefAttributes<SliderMethods>>;
+  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;
-  children?: ReactElement;
-  /** inherit */
-  __thumb?: ReactElement;
-}
-declare function Area({
-  width,
-  height,
-  color,
-  children,
-  className,
-  style,
-  __thumb,
-  ...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?: number | string;
-  width?: number | string;
-  height?: number | string;
+  /**
+   * 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;
-  /** @internal */
-  __disabled?: boolean;
-  /** @internal */
-  __readonly?: boolean;
-  /** @internal */
-  __css?: CSSProperties;
+  /**
+   * 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;
 }
 //#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
 /**
  * Two-dimensional slider component.
+ *
+ * The per-axis settings mirror `Slider`, given as `[x, y]` tuples. A plain
+ * value applies to both axes.
  */
-interface ValueOptions {
-  value: number;
-  min: number;
-  max: number;
-  step?: number;
-  skew?: number;
-  reverse?: boolean;
+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>;
   /**
-   * wheel control option
+   * 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
    */
-  wheel?: InputEventOption | null;
+  step?: XYInput<number>;
   /**
-   * keyboard control option
+   * 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
+   * `skewScale(n)` for a value that has to match a JUCE parameter.
+   *
+   * @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>;
+  /**
+   * 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] }
+   */
+  keyboard?: ModifierValue<InputEventOption> | null;
+  /**
+   * 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;
-}
-interface XYPadProps {
-  x: ValueOptions;
-  y: ValueOptions;
   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;
-  onChange?: (valueX: number, valueY: number) => void;
-  onDragStart?: (valueX: number, valueY: number) => void;
-  onDragEnd?: (valueX: number, valueY: number) => void;
-  /** \<XYPadThumb /> | \<XYPadArea /> */
-  children?: ReactElement | ReactElement[];
+  /** 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
+   * markup to fall back to.
+   *
+   * @example
+   * <XYPad.Root value={[x, y]} min={0} max={100} onChange={setValue}>
+   *   <XYPad.Area>
+   *     <XYPad.Thumb />
+   *   </XYPad.Area>
+   * </XYPad.Root>
+   */
+  children: ReactNode;
 }
 interface XYPadMethods {
   focus: () => void;
@@ -735,9 +1611,9 @@ interface XYPadMethods {
  * Simple XYPad
  */
 declare const XYPad: {
-  Root: React$1.ForwardRefExoticComponent<XYPadProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadProps> & React$1.RefAttributes<XYPadMethods>>;
-  Thumb: React$1.ForwardRefExoticComponent<XYPadThumbProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadThumbProps> & React$1.RefAttributes<XYPadThumbMethods>>;
-  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
@@ -752,57 +1628,102 @@ 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/useDragWithElement.d.ts
-interface UseDragWithElement<T extends Element> {
-  baseElementRef: RefObject<T | null>;
+//#region src/hooks/useDragValue.d.ts
+interface UseDragValueOptions {
+  /** Scaling of each axis; a single value applies to both. */
+  axis: XYInput$1<AxisOptions>;
   /**
-   * Report the position on pointer down, before any movement.
+   * Normalize the pointer against the bounding rect of this element, so that
+   * the value *is* the position pointed at.
    *
-   * Enable it where the pointer position *is* the value, so that a plain click
-   * jumps to it. Leave it off where the element being dragged is an object in
-   * its own right, so that grabbing its edge does not shift it under the cursor.
+   * Give either this or `getValue`.
+   */
+  baseElementRef?: RefObject<Element | null>;
+  /**
+   * Move the value away from where it stood when the drag started, by the
+   * distance dragged. The pointer position itself carries no meaning.
    *
-   * @default false
+   * Give either this or `baseElementRef`.
+   */
+  getValue?: () => XY$1<number>;
+  /**
+   * Pixels of movement that span the whole range, with `getValue`.
+   * @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;
-  onDrag: (normalizedX: number, normalizedY: number) => void;
-  onDragStart?: (normalizedX: number, normalizedY: number) => void;
-  onDragEnd?: (normalizedX: number, normalizedY: 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;
 }
 /**
- * Track a pointer drag, reporting the position normalized against
- * the bounding rect of `baseElementRef`.
+ * Drive a value with a pointer drag.
  *
  * @returns a ref callback for the element that starts the drag, and whether a drag is in progress
  */
-declare function useDragWithElement<T extends Element>({
-  baseElementRef,
-  updateOnPointerDown,
-  cursor,
-  onDrag,
-  onDragStart,
-  onDragEnd
-}: UseDragWithElement<T>): {
-  refCallback: _$react.Dispatch<_$react.SetStateAction<Element | null>>;
+declare function useDragValue<T extends Element>(options: UseDragValueOptions): {
+  refCallback: (node: T | null) => void;
   dragging: boolean;
 };
 //#endregion
@@ -817,39 +1738,104 @@ 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
 //#region src/hooks/useWheel.d.ts
+interface UseWheelOptions extends WheelOptions {
+  /**
+   * Listen on this element rather than on the one the returned ref callback is
+   * attached to, and ignore that callback.
+   *
+   * For a control made of several movable parts: a wheel event only reaches
+   * what the cursor is over, so a listener per part responds only while the
+   * cursor is over that same part. Listening on the element they share lets
+   * every part see the event, and each one decide whether it is the one to act.
+   *
+   * The element is read when the listener is attached, so a ref filled in by a
+   * parent is fine as long as the parent is above in the tree.
+   */
+  target?: RefObject<Element | null>;
+}
 /**
  * Listen to wheel events on an element.
  *
  * The listener is not passive, so the handler may call `preventDefault()`.
  *
- * @returns a ref callback to attach to the element
+ * @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;
+//#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 function useWheel<T extends Element>(onWheel: (event: WheelEvent) => void): (node: T | null) => void;
+declare const DEFAULT_DRAG_SENSITIVITY: ModifierValue<number>;
 //#endregion
-export { type AbsoluteSizingProps, AnimationCanvas, type AnimationCanvasProps, type CommonProps, type DecrementStepperProps, type DrawFunction, type IncrementStepperProps, type InitFunction, type KeyLabelProps, type KeyMethods, type KeyProps, type KeyboardShortcuts, Knob, type KnobMethods, type KnobProps, type MIDIAccessError, NOT_SUPPORTED, NumberInput, type NumberInputMethods, type NumberInputProps, PERMISSION_DENIED, Piano, type PianoMethods, type PianoProps, type PointBaseType, type PointProps, PointsEditor, type PointsEditorProps, type RelativeSizingProps, SHORTCUTS, type ScaleOptionProps, type ScaleProps, Slider, type SliderMethods, type SliderProps, type SliderThumbMethods, type SliderThumbProps, type SliderTrackProps, type StepperProps, type ValueOptions, XYPad, type XYPadAreaProps, type XYPadMethods, type XYPadProps, type XYPadThumbMethods, type XYPadThumbProps, clampPoint, getNoteRangeArray, useAnimationFrame, useDrag, useDragWithElement, useEventListener, useInterval, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, 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