@tremolo-ui/react 0.7.0 → 0.9.0

package/dist/index.d.ts

@@ -1,14 +1,7 @@
-import React, { AriaAttributes, CSSProperties, ComponentPropsWithoutRef, DependencyList, ReactNode, Ref, RefObject, SVGProps } from "react";
-import { AnimationFrame, AxisOptions, DragState, DropZoneOptions, InputEventOption, MIDIAccessError, MIDIAccessOptions, MIDIAccessOptions as MIDIAccessOptions$1, MIDIInputHandlers, ModifierState, ModifierValue, NOT_SUPPORTED, NoteRange, PERMISSION_DENIED, PITCH_BEND_CENTER, SelectionBoxRect, UNAVAILABLE, WheelOptions, XY, XY as XY$1, XYInput, XYInput as XYInput$1 } from "@tremolo-ui/dom";
+import React, { AriaAttributes, CSSProperties, ComponentPropsWithoutRef, ReactNode, Ref, RefObject, SVGProps } from "react";
+import { AxisOptions, CanvasDrawFunction, CanvasInitFunction, ChangeSource, DragState, DropZoneOptions, InputEventOption, KeyboardShortcuts, KeyboardShortcutsScope, KnobAngles, MIDIAccessOptions, MIDIInputHandlers, MarksOptions, ModifierState, ModifierValue, NoteRange, PointPosition, PointsEditorInstance, SelectionBoxRect, WheelOptions, XY, XYInput } from "@tremolo-ui/dom";
 import { 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 */
-  height: number;
-}) => void;
-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
@@ -17,12 +10,12 @@ interface AnimationCanvasCommonProps {
    * A new function replaces the old one in place, so writing it inline does
    * not restart anything.
    */
-  draw: DrawFunction;
+  draw: CanvasDrawFunction;
   /**
    * Called once before the first frame, with the context and the size in CSS
    * pixels. Set up what every frame shares here.
    */
-  init?: InitFunction;
+  init?: CanvasInitFunction;
   /**
    * 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
@@ -120,7 +113,8 @@ interface DropZoneProps {
   onDrop?: (files: File[], event: DragEvent) => void;
   /**
    * Called with the dropped files that do not match `accept`, so that the
-   * reason can be shown.
+   * reason can be shown. It comes after `onDrop` for the same drop, so a list
+   * of rejected files can be cleared in `onDrop` and filled here.
    */
   onReject?: (files: File[], event: DragEvent) => void;
   /** What the zone shows. */
@@ -181,7 +175,8 @@ interface FileInputProps {
   /**
    * Called with the files that were picked and do not match `accept`, so that
    * the reason can be shown. Given alongside `onChange` when a selection held
-   * both.
+   * both, and after it, so a list of rejected files can be cleared in
+   * `onChange` and filled here.
    */
   onReject?: (files: File[]) => void;
   /** Normally a `FileInput.Trigger`, and whatever shows what was picked. */
@@ -217,37 +212,37 @@ interface KnobThumbProps {
    * Fill colour of the circle.
    * @default 'currentColor'
    */
-  thumb?: string;
+  color?: string;
   /**
    * Colour of the line that points at the value.
    * @default 'currentColor'
    */
-  thumbLine?: string;
+  lineColor?: string;
   /**
    * Diameter of the circle, as a percentage of the knob.
    * @default 84
    */
-  thumbSize?: number;
+  size?: number;
   /**
    * Thickness of the line, as a percentage of the knob.
    * @default 6
    */
-  thumbLineWeight?: number;
+  lineWeight?: number;
   /**
    * 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;
+  lineLength?: number;
   /**
-   * Classes for what the thumb draws inside itself: `thumbLine` is the line
-   * that points at the value.
+   * Classes for what the thumb draws inside itself: `line` is the line that
+   * points at the value.
    */
   classes?: {
-    thumbLine?: string;
+    line?: string;
   };
 }
-declare function Thumb({ className, thumb, thumbLine, thumbSize, thumbLineWeight, thumbLineLength, classes, ...props }: KnobThumbProps & Omit<SVGProps<SVGSVGElement>, 'd' | keyof KnobThumbProps>): import("react").JSX.Element;
+declare function Thumb({ className, color, lineColor, size, lineWeight, lineLength, classes, ...props }: KnobThumbProps & Omit<SVGProps<SVGSVGElement>, 'd' | keyof KnobThumbProps>): import("react").JSX.Element;
 //#endregion
 //#region src/css-variables.d.ts
 /**
@@ -281,18 +276,7 @@ type KnobConfig = {
   /** angle range [degree] */
   angleRange: number;
 };
-type KnobContextValue = KnobConfig & {
-  /** normalized value */
-  p: number;
-  /** ロータリー開始位置 */
-  r1: number;
-  /** activeLine の開始位置 */
-  r2: number;
-  /** activeLine の終了位置 */
-  r3: number;
-  /** ロータリー終了位置 */
-  r4: number;
-};
+type KnobContextValue = KnobConfig & KnobAngles;
 /**
  * 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.
@@ -326,10 +310,10 @@ interface KnobProps {
    */
   scale?: Scale;
   /**
-   * The value a double click restores, while `enableDoubleClickDefault` is on.
-   * @default min
+   * The value a double click restores. `null` turns the double click off.
+   * @default startValue
    */
-  defaultValue?: number;
+  resetValue?: number | null;
   /**
    * 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.
@@ -345,11 +329,9 @@ interface KnobProps {
    * 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' }
+   * @default 'grabbing'
    */
-  externalStyles?: {
-    cursor?: CSSProperties['cursor'];
-  };
+  dragCursor?: CSSProperties['cursor'];
   /**
    * 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.
@@ -410,11 +392,6 @@ interface KnobProps {
    * @default { default: ['raw', 1], shift: ['raw', 0.1] }
    */
   keyboard?: ModifierValue<InputEventOption> | null;
-  /**
-   * Restore `defaultValue` on a double click.
-   * @default true
-   */
-  enableDoubleClickDefault?: boolean;
   /**
    * Make the knob unchangeable and remove it from the tab order.
    * The parts carry `data-disabled` while it is set.
@@ -424,7 +401,7 @@ interface KnobProps {
    * Make the knob unchangeable while leaving it focusable.
    * The parts carry `data-readonly` while it is set.
    */
-  readonly?: boolean;
+  readOnly?: boolean;
   /**
    * How far the knob turns from `min` to `max`, in degrees, centred on the
    * top.
@@ -436,6 +413,25 @@ interface KnobProps {
    * click moves it.
    */
   onChange?: (value: number) => void;
+  /**
+   * Called when a change of the value starts — a drag, a double click, the first wheel notch
+   * or arrow key — with the value
+   * before it and what it is made with. A host recording automation can treat
+   * the control as touched from here until `onChangeEnd`.
+   */
+  onChangeStart?: (value: number, source: ChangeSource) => void;
+  /**
+   * Called when the change ends, with the value it ended on: on release, or
+   * `changeEndDelay` after the last wheel notch or arrow key.
+   */
+  onChangeEnd?: (value: number, source: ChangeSource) => void;
+  /**
+   * How long after the last wheel notch or arrow key the change counts as
+   * over, in milliseconds. Neither has an event that says it is done.
+   *
+   * @default 500
+   */
+  changeEndDelay?: number;
   /**
    * The knob renders exactly what you compose here; there is no default
    * markup to fall back to.
@@ -451,6 +447,12 @@ interface KnobProps {
    */
   children: ReactNode;
   style?: CSSProperties & CSSVariables<'knob-size'>;
+  /**
+   * Receives `focus` and `blur`. They do nothing while the knob is disabled,
+   * where the element's own `focus()` would still focus it. `ref` reaches the
+   * root element itself.
+   */
+  actionsRef?: Ref<KnobMethods>;
 }
 interface KnobMethods {
   focus: () => void;
@@ -460,7 +462,7 @@ interface KnobMethods {
  * Interactive rotary knob component implemented in SVG.
  */
 export declare const Knob: {
-  Root: import("react").ForwardRefExoticComponent<KnobProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KnobProps> & import("react").RefAttributes<KnobMethods>>;
+  Root: import("react").ForwardRefExoticComponent<KnobProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KnobProps> & import("react").RefAttributes<HTMLDivElement>>;
   SVGRoot: typeof SVGRoot;
   InactiveLine: typeof InactiveLine;
   ActiveLine: typeof ActiveLine;
@@ -498,7 +500,7 @@ type NumberInputContextValue = {
   /** How the value is distributed across the travel. */
   scale: Scale;
   disabled: boolean;
-  readonly: boolean;
+  readOnly: boolean;
   clampValue: boolean;
   /**
    * The effective scaling for `applyDelta`, with unbounded ends filled in.
@@ -514,6 +516,8 @@ type NumberInputContextValue = {
   dragSensitivity: ModifierValue<number>;
   /** Whether a `Stepper` drag hides the pointer and reads its movement. */
   pointerLock: boolean;
+  /** The cursor shown while a `Stepper` is dragged. */
+  dragCursor: CSSProperties['cursor'];
   /** What `InputField` selects when it takes focus. */
   selectOnFocus: 'all' | 'number' | 'none';
   /** Whether `InputField` shows the plain value while it has focus. */
@@ -600,6 +604,9 @@ interface NumberInputProps {
    * 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.
+   * The default, `parseNumberText` from `@tremolo-ui/dom`, reads the number
+   * with the unit around it left out, and is `NaN` for one it cannot read
+   * whole: `1,000`, `1:30`, or a number with a unit in front, such as `L 30`.
    */
   parse?: (text: string) => number;
   /**
@@ -670,9 +677,16 @@ interface NumberInputProps {
    * @default false
    */
   pointerLock?: boolean;
+  /**
+   * The cursor to show while dragging a `Stepper`. It is set on the stepper
+   * being dragged, so it stays while the pointer is outside it.
+   *
+   * @default 'ns-resize'
+   */
+  dragCursor?: CSSProperties['cursor'];
   /**
    * Select the text when `InputField` takes focus: `'all'` selects all of it,
-   * `'number'` only the leading number, leaving whatever the format appended,
+   * `'number'` only the number, leaving the unit the format put around it,
    * and `'none'` leaves the caret where the click put it.
    * @default 'none'
    */
@@ -725,13 +739,34 @@ interface NumberInputProps {
    * Make the value unchangeable.
    * The parts carry `data-readonly` while it is set.
    */
-  readonly?: boolean;
+  readOnly?: boolean;
   /**
    * 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;
+  /**
+   * Called when a change of the value starts — a press on a stepper, the
+   * first wheel notch, arrow key or typed character — with the value before
+   * it and what it is made with. A host recording automation can treat the
+   * input as touched from here until `onChangeEnd`.
+   */
+  onChangeStart?: (value: number, source: ChangeSource) => void;
+  /**
+   * Called when the change ends, with the value it ended on: when the stepper
+   * is released, when typed text is committed, or `changeEndDelay` after the
+   * last wheel notch or arrow key.
+   */
+  onChangeEnd?: (value: number, source: ChangeSource) => void;
+  /**
+   * How long after the last wheel notch, arrow key or typed character the
+   * change counts as over, in milliseconds. None of them has an event that
+   * says it is done.
+   *
+   * @default 500
+   */
+  changeEndDelay?: number;
   /**
    * The input renders exactly what you compose here; there is no default
    * markup to fall back to.
@@ -746,6 +781,12 @@ interface NumberInputProps {
    * </NumberInput.Root>
    */
   children: ReactNode;
+  /**
+   * Receives `focus` and `blur`, which act on the input of `InputField` — the
+   * element that takes the focus — and do nothing while
+   * the input is disabled. `ref` reaches the root element itself.
+   */
+  actionsRef?: Ref<NumberInputMethods>;
 }
 interface NumberInputMethods {
   focus: () => void;
@@ -755,16 +796,14 @@ interface NumberInputMethods {
  * Input with some useful functions for entering numerical values.
  */
 export declare const NumberInput: {
-  Root: import("react").ForwardRefExoticComponent<NumberInputProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof NumberInputProps> & import("react").RefAttributes<NumberInputMethods>>;
+  Root: import("react").ForwardRefExoticComponent<NumberInputProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof NumberInputProps> & import("react").RefAttributes<HTMLDivElement>>;
   InputField: import("react").ForwardRefExoticComponent<{
     form?: string | undefined | undefined;
     slot?: string | undefined | undefined;
-    style?: import("react").CSSProperties | undefined;
+    style?: CSSProperties | undefined;
     title?: string | undefined | undefined;
     pattern?: string | undefined | undefined;
     key?: import("react").Key | null | undefined;
-    height?: number | string | undefined | undefined;
-    width?: number | string | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
@@ -772,7 +811,7 @@ export declare const NumberInput: {
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -1045,7 +1084,10 @@ export declare const NumberInput: {
     max?: number | string | undefined | undefined;
     step?: number | string | undefined | undefined;
     disabled?: boolean | undefined | undefined;
+    readOnly?: boolean | undefined | undefined;
     alt?: string | undefined | undefined;
+    height?: number | string | undefined | undefined;
+    width?: number | string | undefined | undefined;
     accept?: string | undefined | undefined;
     multiple?: boolean | undefined | undefined;
     size?: number | undefined | undefined;
@@ -1062,7 +1104,6 @@ export declare const NumberInput: {
     minLength?: number | undefined | undefined;
     name?: string | undefined | undefined;
     placeholder?: string | undefined | undefined;
-    readOnly?: boolean | undefined | undefined;
     required?: boolean | undefined | undefined;
     src?: string | undefined | undefined;
   } & import("react").RefAttributes<HTMLInputElement>>;
@@ -1071,34 +1112,7 @@ export declare const NumberInput: {
   DecrementStepper: typeof DecrementStepper;
 };
 //#endregion
-//#region src/components/Piano/keyboard-shortcuts.d.ts
-type KeyboardShortcuts = {
-  /**
-   * 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.
-   */
-  keys: string[];
-};
-/**
- * Ready-made keyboard layouts. Both assume `noteRange.first` is a C.
- */
-export 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/index.d.ts
-type KeyboardShortcutsScope = 'root' | 'window';
 /**
  * What {@link PianoProps.keyProps} may return for one key.
  *
@@ -1106,9 +1120,7 @@ type KeyboardShortcutsScope = 'root' | 'window';
  * JSX syntax, not on an object type, and selecting on one is the usual way to
  * mark a key out.
  */
-type KeyAttributes = Omit<ComponentPropsWithoutRef<'div'>, 'style'> & {
-  style?: CSSProperties & CSSVariables<'color' | 'bg' | 'active-color' | 'active-bg'>;
-} & Record<`data-${string}`, string | number | boolean | undefined>;
+type KeyAttributes = ComponentPropsWithoutRef<'div'> & 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`. */
@@ -1189,15 +1201,9 @@ interface PianoProps {
    * @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;
   /**
    * 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
+   * a layout with gaps — `SHORTCUTS.HOME_ROW_NATURAL`, say — needs no
    * special casing.
    */
   label?: (note: number, state: KeyState) => ReactNode;
@@ -1224,7 +1230,11 @@ interface PianoProps {
   onPlayNote?: (note: number, velocity?: number) => void;
   /** Called once everything holding a note has let go of it. */
   onStopNote?: (note: number) => void;
-  style?: CSSProperties & CSSVariables<'height'>;
+  /**
+   * Receives `playNote` and `stopNote`, which press and release a key as the
+   * pointer or the keyboard would. `ref` reaches the root element itself.
+   */
+  actionsRef?: Ref<PianoMethods>;
 }
 interface PianoMethods {
   playNote: (note: number, velocity?: number) => void;
@@ -1234,22 +1244,14 @@ interface PianoMethods {
  * Customizable piano component.
  */
 export declare const Piano: {
-  Root: import("react").ForwardRefExoticComponent<PianoProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PianoProps> & import("react").RefAttributes<PianoMethods>>;
+  Root: import("react").ForwardRefExoticComponent<PianoProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof PianoProps> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 //#region src/components/PointsEditor/Background.d.ts
 declare function Background({ className, children, style, ...props }: ComponentPropsWithoutRef<'div'>): import("react").JSX.Element;
 //#endregion
 //#region src/components/PointsEditor/Point.d.ts
-type PointBaseType = {
-  x: number;
-  y: number;
-};
-export declare function clampPoint(point: PointBaseType, min?: Partial<PointBaseType>, max?: Partial<PointBaseType>): {
-  x: number;
-  y: number;
-};
-interface PointsEditorPointProps<T extends PointBaseType> {
+interface PointsEditorPointProps<T extends PointPosition> {
   /**
    * Where the point is, as `{ x, y }` from 0 to 1 on each axis, with `y`
    * growing downwards.
@@ -1262,21 +1264,15 @@ interface PointsEditorPointProps<T extends PointBaseType> {
    */
   id?: string;
   /** The lowest position the point can take, per axis. An axis left out is 0. */
-  min?: Partial<PointBaseType>;
+  min?: Partial<PointPosition>;
   /** 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;
+  max?: Partial<PointPosition>;
   /** 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 `readOnly` of `PointsEditor.Root`. */
+  readOnly?: boolean;
   /** Overrides the `wheel` of `PointsEditor.Root`. */
   wheel?: ModifierValue<InputEventOption> | null;
   /** Overrides the `keyboard` of `PointsEditor.Root`. */
@@ -1292,14 +1288,29 @@ interface PointsEditorPointProps<T extends PointBaseType> {
    * 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;
-  style?: CSSProperties & CSSVariables<'width' | 'height' | 'color' | 'translate'>;
+  onChange?: (value: PointPosition) => void;
+  /**
+   * Called when a change of this point starts — a drag on it, the first wheel
+   * notch or arrow key while it has the focus — with where it is and what the
+   * change is made with. The points that move along with a selection report
+   * through `onChange` only: the change belongs to the point being operated.
+   */
+  onChangeStart?: (value: PointPosition, source: ChangeSource) => void;
+  /**
+   * Called when that change ends, with where the point is: on release, or
+   * `changeEndDelay` after the last wheel notch or arrow key.
+   */
+  onChangeEnd?: (value: PointPosition, source: ChangeSource) => void;
+  /**
+   * How long after the last wheel notch or arrow key the change counts as
+   * over, in milliseconds. Neither has an event that says it is done.
+   *
+   * @default 500
+   */
+  changeEndDelay?: number;
+  style?: CSSProperties & CSSVariables<'color' | 'translate'>;
 }
-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;
+declare function Point<T extends PointPosition>({ value, children, id: idProp, min, max, color, disabled: _disabled, readOnly: _readOnly, wheel: _wheel, keyboard: _keyboard, 'aria-label': ariaLabel, 'aria-valuetext': ariaValuetext, onChange, onChangeStart, onChangeEnd, changeEndDelay, 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
 /**
@@ -1311,36 +1322,17 @@ declare function Point<T extends PointBaseType>({ value, children, id: idProp, m
 declare function SelectionBox({ children, className, style, ...props }: ComponentPropsWithoutRef<'div'>): 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;
+  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'];
-  };
+  /** Inherited by every `Point`. See `PointsEditorProps.dragCursor`. */
+  dragCursor: CSSProperties['cursor'];
   /**
    * `Container` registers its element here; `Point` normalizes the pointer
    * against it, so a point is placed by its position within the container.
@@ -1350,37 +1342,14 @@ type PointsEditorContextValue = {
   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.
+   * The selection and the moves, from `createPointsEditor` in
+   * `@tremolo-ui/dom`: every `Point` registers with it, and a press, a drag,
+   * a key or the wheel goes through it so that a selection moves as one.
    */
-  nudgeFocusedPoint: (axis: 'x' | 'y', direction: number, modifiers: ModifierState) => boolean;
+  editor: PointsEditorInstance;
   /** 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
@@ -1392,10 +1361,6 @@ export declare function usePointsEditorContext<T>(selector: (state: PointsEditor
 //#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;
   /**
    * Make the points unchangeable and remove them from the tab order.
    * The parts carry `data-disabled` while it is set.
@@ -1405,16 +1370,14 @@ interface PointsEditorProps {
    * Make the points unmovable.
    * The parts carry `data-readonly` while it is set.
    */
-  readonly?: boolean;
+  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' }
+   * @default 'grabbing'
    */
-  externalStyles?: {
-    cursor?: CSSProperties['cursor'];
-  };
+  dragCursor?: CSSProperties['cursor'];
   /**
    * How much one notch of the wheel moves the focused `Point`. Scrolling
    * sideways, or with shift held, moves x; otherwise it moves y.
@@ -1507,7 +1470,6 @@ interface PointsEditorProps {
    * </PointsEditor.Root>
    */
   children: ReactNode;
-  style?: CSSProperties & CSSVariables<'width' | 'height'>;
 }
 /**
  * Multiple Point Controller
@@ -1529,6 +1491,11 @@ interface SliderThumbProps {
    */
   color?: string;
   style?: CSSProperties & CSSVariables<'color' | 'translate'>;
+  /**
+   * Receives `focus` and `blur` for the range input inside, which do nothing
+   * while the slider is disabled. `ref` reaches the thumb element itself.
+   */
+  actionsRef?: Ref<SliderThumbMethods>;
 }
 interface SliderThumbMethods {
   focus: () => void;
@@ -1544,26 +1511,13 @@ interface SliderTrackProps {
   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;
-  style?: CSSProperties & CSSVariables<'length' | 'thickness' | 'active' | 'inactive' | 'percent'>;
+  /** Colour of the part from `min` to the value. Sets `--active-color`. */
+  activeColor?: string;
+  /** Colour of the rest of the track. Sets `--inactive-color`. */
+  inactiveColor?: string;
+  style?: CSSProperties & CSSVariables<'length' | 'thickness' | 'active-color' | 'inactive-color' | 'percent'>;
 }
 //#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 {
   /**
@@ -1604,8 +1558,6 @@ interface SliderMarksOptionProps {
   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;
@@ -1616,9 +1568,9 @@ interface SliderMarksOptionProps {
     mark?: CSSProperties;
     label?: CSSProperties;
   };
-  style?: CSSProperties & CSSVariables<'thickness' | 'length' | 'gap' | 'label-width' | 'translate'>;
+  style?: CSSProperties & CSSVariables<'thickness' | 'length' | 'gap' | 'translate'>;
 }
-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;
+declare function MarksOption({ value, mark, label, thickness, length, gap, classes, styles, className, style, ...props }: SliderMarksOptionProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderMarksOptionProps>): import("react").JSX.Element;
 //#endregion
 //#region src/components/Slider/context.d.ts
 type SliderContextValue = {
@@ -1628,14 +1580,14 @@ type SliderContextValue = {
   step: number;
   /** How the value is distributed across the travel. */
   scale: Scale;
-  vertical: boolean;
+  orientation: 'horizontal' | 'vertical';
   reverse: boolean;
   disabled: boolean;
-  readonly: boolean;
+  readOnly: boolean;
   onChange?: (value: number) => void;
   /**
    * Position of the thumb, 0-100, already accounting for the display direction
-   * implied by `vertical` and `reverse`.
+   * implied by `orientation` and `reverse`.
    */
   percent: number;
   /** `Track` registers its element here; `Root` normalizes the pointer against it. */
@@ -1676,14 +1628,15 @@ interface SliderProps {
    */
   scale?: Scale;
   /**
-   * Run the slider vertically, with the value growing upwards. The range input
-   * inside the thumb takes its `aria-orientation` from this.
+   * Which way the slider runs. A vertical slider grows upwards. Every part
+   * carries the same value as `data-orientation`, and the range input inside
+   * the thumb takes its `aria-orientation` from it.
    *
-   * @default false
+   * @default 'horizontal'
    */
-  vertical?: boolean;
+  orientation?: 'horizontal' | 'vertical';
   /**
-   * Grow the value the other way: leftwards, or downwards when `vertical`.
+   * Grow the value the other way: leftwards, or downwards when vertical.
    * The arrow keys follow the direction on screen.
    *
    * @default false
@@ -1693,11 +1646,9 @@ interface SliderProps {
    * 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' }
+   * @default 'pointer'
    */
-  externalStyles?: {
-    cursor?: CSSProperties['cursor'];
-  };
+  dragCursor?: CSSProperties['cursor'];
   /**
    * 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
@@ -1752,13 +1703,28 @@ interface SliderProps {
    * Make the value unchangeable.
    * The parts carry `data-readonly` while it is set.
    */
-  readonly?: boolean;
+  readOnly?: boolean;
   /** 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;
+  /**
+   * Called when a change of the value starts — a press on the track, the first wheel notch
+   * or arrow key — with the value
+   * before it and what it is made with. A host recording automation can treat
+   * the control as touched from here until `onChangeEnd`.
+   */
+  onChangeStart?: (value: number, source: ChangeSource) => void;
+  /**
+   * Called when the change ends, with the value it ended on: on release, or
+   * `changeEndDelay` after the last wheel notch or arrow key.
+   */
+  onChangeEnd?: (value: number, source: ChangeSource) => void;
+  /**
+   * How long after the last wheel notch or arrow key the change counts as
+   * over, in milliseconds. Neither has an event that says it is done.
+   *
+   * @default 500
+   */
+  changeEndDelay?: number;
   /**
    * The slider renders exactly what you compose here; there is no default
    * markup to fall back to.
@@ -1771,6 +1737,12 @@ interface SliderProps {
    * </Slider.Root>
    */
   children: ReactNode;
+  /**
+   * Receives `focus` and `blur`, which act on the range input inside the thumb —
+   * the element that takes the focus — and do nothing while the slider is
+   * disabled. `ref` reaches the root element itself.
+   */
+  actionsRef?: Ref<SliderMethods>;
 }
 interface SliderMethods {
   focus: () => void;
@@ -1780,41 +1752,13 @@ interface SliderMethods {
  * Customizable slider
  */
 export declare const Slider: {
-  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>>;
+  Root: React.ForwardRefExoticComponent<SliderProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderProps> & React.RefAttributes<HTMLDivElement>>;
+  Thumb: React.ForwardRefExoticComponent<SliderThumbProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderThumbProps> & React.RefAttributes<HTMLDivElement>>;
   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/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.
- */
-export declare function useXYPadContext(): XYPadContextValue;
-export declare function useXYPadContext<T>(selector: (state: XYPadContextValue) => T): T;
-//#endregion
 //#region src/components/XYPad/Thumb.d.ts
 interface XYPadThumbProps {
   /**
@@ -1839,22 +1783,44 @@ interface XYPadThumbProps {
    */
   'aria-valuetext'?: XYInput<AriaAttributes['aria-valuetext']>;
   style?: CSSProperties & CSSVariables<'color' | 'translate'>;
+  /**
+   * Receives `focus` and `blur` for the range inputs inside, which do nothing
+   * while the pad is disabled. `ref` reaches the thumb element itself.
+   */
+  actionsRef?: Ref<XYPadThumbMethods>;
 }
 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;
-  style?: CSSProperties & CSSVariables<'width' | 'height' | 'color'>;
-}
+//#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.
+ */
+export declare function useXYPadContext(): XYPadContextValue;
+export declare function useXYPadContext<T>(selector: (state: XYPadContextValue) => T): T;
 //#endregion
 //#region src/components/XYPad/index.d.ts
 /**
@@ -1945,11 +1911,9 @@ interface XYPadProps {
    * 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' }
+   * @default 'pointer'
    */
-  externalStyles?: {
-    cursor?: CSSProperties['cursor'];
-  };
+  dragCursor?: CSSProperties['cursor'];
   /**
    * Make the pad unchangeable and remove its thumb from the tab order.
    * The parts carry `data-disabled` while it is set.
@@ -1959,13 +1923,28 @@ interface XYPadProps {
    * Make the pad unchangeable while leaving its thumb focusable.
    * The parts carry `data-readonly` while it is set.
    */
-  readonly?: boolean;
+  readOnly?: boolean;
   /** Called with the new value when a drag, the wheel or an arrow key moves it. */
   onChange?: (value: XY<number>) => void;
-  /** Called when a drag starts, with the value where the area was pressed. */
-  onDragStart?: (value: XY<number>) => void;
-  /** Called when the drag ends, with the value it ended on. */
-  onDragEnd?: (value: XY<number>) => void;
+  /**
+   * Called when a change of the value starts — a press on the area, the first wheel notch
+   * or arrow key — with the value
+   * before it and what it is made with. A host recording automation can treat
+   * the control as touched from here until `onChangeEnd`.
+   */
+  onChangeStart?: (value: XY<number>, source: ChangeSource) => void;
+  /**
+   * Called when the change ends, with the value it ended on: on release, or
+   * `changeEndDelay` after the last wheel notch or arrow key.
+   */
+  onChangeEnd?: (value: XY<number>, source: ChangeSource) => void;
+  /**
+   * How long after the last wheel notch or arrow key the change counts as
+   * over, in milliseconds. Neither has an event that says it is done.
+   *
+   * @default 500
+   */
+  changeEndDelay?: number;
   /**
    * The pad renders exactly what you compose here; there is no default
    * markup to fall back to.
@@ -1978,23 +1957,46 @@ interface XYPadProps {
    * </XYPad.Root>
    */
   children: ReactNode;
+  /**
+   * Receives `focus` and `blur`, which act on the range inputs inside the thumb —
+   * the elements that take the focus — and do nothing while
+   * the pad is disabled. `ref` reaches the root element itself.
+   */
+  actionsRef?: Ref<XYPadMethods>;
 }
 interface XYPadMethods {
   focus: () => void;
   blur: () => void;
-  original: Ref<HTMLDivElement>;
 }
 /**
  * Simple XYPad
  */
 export declare const XYPad: {
-  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>>;
+  Root: import("react").ForwardRefExoticComponent<XYPadProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadProps> & import("react").RefAttributes<HTMLDivElement>>;
+  Thumb: import("react").ForwardRefExoticComponent<XYPadThumbProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof XYPadThumbProps> & import("react").RefAttributes<HTMLDivElement>>;
+  Area: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 //#region src/hooks/useAnimationFrame.d.ts
-export declare function useAnimationFrame(callback?: () => void, deps?: DependencyList): void;
+interface UseAnimationFrameOptions {
+  /**
+   * Stop the loop. Turning it back on starts a new one, whose first frame has
+   * a `deltaTime` of `0`.
+   * @default false
+   */
+  disabled?: boolean;
+}
+/**
+ * Call `callback` on every animation frame for as long as the component is
+ * mounted.
+ *
+ * The callback is read on every frame, so it can be written inline and see
+ * the latest render without restarting the loop.
+ *
+ * @param callback receives the frame's timestamp and the milliseconds since
+ * the previous frame, which is `0` on the first one
+ */
+export declare function useAnimationFrame(callback: (timestamp: DOMHighResTimeStamp, deltaTime: number) => void, { disabled }?: UseAnimationFrameOptions): void;
 //#endregion
 //#region src/hooks/useDrag.d.ts
 interface UseDragOptions {
@@ -2040,7 +2042,7 @@ export declare function useDrag<T extends Element>({ threshold, cursor, pointerL
 //#region src/hooks/useDragValue.d.ts
 interface UseDragValueOptions {
   /** Scaling of each axis; a single value applies to both. */
-  axis: XYInput$1<AxisOptions>;
+  axis: XYInput<AxisOptions>;
   /**
    * Normalize the pointer against the bounding rect of this element, so that
    * the value *is* the position pointed at.
@@ -2054,12 +2056,12 @@ interface UseDragValueOptions {
    *
    * Give either this or `baseElementRef`.
    */
-  getValue?: () => XY$1<number>;
+  getValue?: () => XY<number>;
   /**
    * Pixels of movement that span the whole range, with `getValue`.
    * @default 100
    */
-  pixelRange?: XYInput$1<number>;
+  pixelRange?: XYInput<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
@@ -2112,11 +2114,11 @@ interface UseDragValueOptions {
    * @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;
+  onChange?: (value: XY<number>, state: DragState) => void;
   /** Called once the drag starts, with the value it starts from. */
-  onDragStart?: (value: XY$1<number>, state: DragState) => void;
+  onDragStart?: (value: XY<number>, state: DragState) => void;
   /** Called when the pointer is released, with the value it ends on. */
-  onDragEnd?: (value: XY$1<number>, state: DragState) => void;
+  onDragEnd?: (value: XY<number>, state: DragState) => void;
 }
 /**
  * Drive a value with a pointer drag.
@@ -2145,17 +2147,40 @@ export declare function useDropZone<T extends Element>({ accept, multiple, disab
 };
 //#endregion
 //#region src/hooks/useEventListener.d.ts
-type Target = EventTarget | null | (() => EventTarget | null);
-type Options = boolean | AddEventListenerOptions;
-export declare function useEventListener<K extends keyof DocumentEventMap>(target: Target, event: K, handler: (event: DocumentEventMap[K]) => void, options?: Options): VoidFunction;
-export declare function useEventListener<K extends keyof WindowEventMap>(target: Target, event: K, handler: (event: WindowEventMap[K]) => void, options?: Options): VoidFunction;
-export declare function useEventListener<K extends keyof GlobalEventHandlersEventMap>(target: Target, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void, options?: Options): VoidFunction;
-//#endregion
-//#region src/hooks/useInterval.d.ts
-export declare function useInterval(callback: () => void, delay: number | null): void;
+/**
+ * What {@link useEventListener} listens on. A function is called after every
+ * render, so it can return an element out of a ref; `null` listens on nothing.
+ */
+type UseEventListenerTarget = EventTarget | null | (() => EventTarget | null);
+/**
+ * The options of `addEventListener`, as a boolean for `capture` or as an
+ * object. `signal` is left out: the hook already owns when the listener goes.
+ */
+type UseEventListenerOptions = boolean | Pick<AddEventListenerOptions, 'capture' | 'once' | 'passive'>;
+/**
+ * Listen to an event on a target for as long as the component is mounted.
+ *
+ * The handler is read on every event, and the target and the options are
+ * compared by what they resolve to, so all three can be written inline. The
+ * listener is re-attached only when the element, the event or one of the
+ * options actually changes.
+ *
+ * @returns a function that removes the listener. It stays removed until the
+ * target, the event or the options change.
+ */
+export declare function useEventListener<K extends keyof DocumentEventMap>(target: UseEventListenerTarget, event: K, handler: (event: DocumentEventMap[K]) => void, options?: UseEventListenerOptions): VoidFunction;
+export declare function useEventListener<K extends keyof WindowEventMap>(target: UseEventListenerTarget, event: K, handler: (event: WindowEventMap[K]) => void, options?: UseEventListenerOptions): VoidFunction;
+export declare function useEventListener<K extends keyof GlobalEventHandlersEventMap>(target: UseEventListenerTarget, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void, options?: UseEventListenerOptions): VoidFunction;
 //#endregion
 //#region src/hooks/useLongPress.d.ts
-export declare function useLongPress(callback: () => void, initialDelay?: number, interval?: number): (event?: Pick<PointerEvent, "button" | "pointerId">) => void;
+/**
+ * Repeat `callback` while a pointer is held down: once on the press, then
+ * every `interval` after `initialDelay`. The repeat itself is
+ * `createLongPress` in `@tremolo-ui/dom`.
+ *
+ * Returns the function that starts a press, for an `onPointerDown`.
+ */
+export declare function useLongPress(callback: () => void, initialDelay?: number, interval?: number): (event?: Pick<PointerEvent, "button" | "pointerId">) => void | undefined;
 //#endregion
 //#region src/hooks/useMIDIAccess.d.ts
 /**
@@ -2169,7 +2194,7 @@ export declare function useLongPress(callback: () => void, initialDelay?: number
  * ask for it only when it is actually used.
  */
 export declare function useMIDIAccess(requestOnMount?: boolean): {
-  request: (options?: MIDIAccessOptions$1) => void;
+  request: (options?: MIDIAccessOptions) => void;
   midiAccess: MIDIAccess | null;
   error: import("@tremolo-ui/dom").MIDIAccessError | null;
   inputs: readonly MIDIInput[];
@@ -2230,29 +2255,5 @@ interface UseWheelOptions extends Omit<WheelOptions, 'onWheel'> {
  */
 export 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/dom`.
- */
-export 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.
- */
-export 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.
- */
-export declare const DEFAULT_DRAG_SENSITIVITY: ModifierValue<number>;
-//#endregion
-export { type AnimationCanvasCommonProps, type AnimationCanvasFixedProps, type AnimationCanvasProps, type AnimationCanvasResizableProps, type CSSVariables, type DrawFunction, type DropZoneProps, type FileInputContextValue, type FileInputProps, type FileInputTriggerProps, type InitFunction, type KeyAttributes, type KeyState, type KeyboardShortcuts, type KnobContextValue, type KnobMethods, type KnobProps, type KnobSVGRootProps, type KnobThumbProps, type MIDIAccessError, type MIDIAccessOptions, type MIDIInputHandlers, type MarksOptions, NOT_SUPPORTED, type NumberInputContextValue, type NumberInputMethods, type NumberInputProps, PERMISSION_DENIED, PITCH_BEND_CENTER, type PianoMethods, type PianoProps, type PointBaseType, type PointsEditorContextValue, type PointsEditorPointProps, type PointsEditorProps, type SliderContextValue, type SliderMarksOptionProps, type SliderMarksProps, type SliderMethods, type SliderProps, type SliderThumbMethods, type SliderThumbProps, type SliderTrackProps, UNAVAILABLE, type UseDragOptions, type UseDragValueOptions, type UseDropZoneOptions, type UseWheelOptions, type XY, type XYInput, type XYPadAreaProps, type XYPadContextValue, type XYPadMethods, type XYPadProps, type XYPadThumbMethods, type XYPadThumbProps };
+export type { AnimationCanvasCommonProps, AnimationCanvasFixedProps, AnimationCanvasProps, AnimationCanvasResizableProps, CSSVariables, DropZoneProps, FileInputContextValue, FileInputProps, FileInputTriggerProps, KeyAttributes, KeyState, KnobContextValue, KnobMethods, KnobProps, KnobSVGRootProps, KnobThumbProps, NumberInputContextValue, NumberInputMethods, NumberInputProps, PianoMethods, PianoProps, PointsEditorContextValue, PointsEditorPointProps, PointsEditorProps, SliderContextValue, SliderMarksOptionProps, SliderMarksProps, SliderMethods, SliderProps, SliderThumbMethods, SliderThumbProps, SliderTrackProps, UseAnimationFrameOptions, UseDragOptions, UseDragValueOptions, UseDropZoneOptions, UseEventListenerOptions, UseEventListenerTarget, UseWheelOptions, XYPadContextValue, XYPadMethods, XYPadProps, XYPadThumbMethods, XYPadThumbProps };
 //# sourceMappingURL=index.d.ts.map