@tremolo-ui/react 0.6.0 → 0.8.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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";
+import { AnimationFrame, AxisOptions, 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 */
@@ -82,7 +82,120 @@ type Props = AnimationCanvasProps & Omit<ComponentPropsWithoutRef<'canvas'>, key
 /**
  * A simple animatable canvas with requestAnimationFrame()
  */
-declare const AnimationCanvas: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLCanvasElement>>;
+export declare const AnimationCanvas: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLCanvasElement>>;
+//#endregion
+//#region src/components/DropZone/index.d.ts
+interface DropZoneProps {
+  /**
+   * Which files to take, written the way the `accept` attribute of a file
+   * input is: a comma separated list of extensions (`.wav`), MIME types
+   * (`audio/wav`) and type groups (`audio/*`).
+   *
+   * What does not match goes to `onReject` rather than `onDrop`. While the
+   * drag is still in the air the element is marked `[data-invalid]`, as far as
+   * the browser lets it be told apart — a rule written as an extension cannot
+   * be decided until the drop.
+   */
+  accept?: string;
+  /**
+   * Take more than one file from a single drop. With it off, only the first
+   * accepted file is reported, as a file input without `multiple` does.
+   *
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Refuse the drop. The drag is still swallowed rather than let through: an
+   * unhandled drop makes the browser leave the page and open the file.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Called with the dropped files that match `accept`.
+   *
+   * @param event the drop, for anything the files leave out — where on the
+   * element it landed, most of all.
+   */
+  onDrop?: (files: File[], event: DragEvent) => void;
+  /**
+   * Called with the dropped files that do not match `accept`, so that the
+   * 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. */
+  children: ReactNode;
+}
+/**
+ * An area that takes files dropped onto it.
+ */
+export declare const DropZone: {
+  Root: import("react").ForwardRefExoticComponent<DropZoneProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof DropZoneProps> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+//#region src/components/FileInput/Trigger.d.ts
+interface FileInputTriggerProps {
+  /** What the trigger reads. It is the accessible name of the file input. */
+  children: ReactNode;
+}
+//#endregion
+//#region src/components/FileInput/context.d.ts
+type FileInputContextValue = {
+  /** The id of the hidden `<input type="file">`, for `Trigger`'s `htmlFor`. */
+  inputId: string;
+  disabled: boolean;
+};
+export declare function useFileInputContext(): FileInputContextValue;
+export declare function useFileInputContext<T>(selector: (state: FileInputContextValue) => T): T;
+//#endregion
+//#region src/components/FileInput/index.d.ts
+interface FileInputProps {
+  /**
+   * Which files to take, written the way the HTML attribute is: a comma
+   * separated list of extensions (`.wav`), MIME types (`audio/wav`) and type
+   * groups (`audio/*`).
+   *
+   * **The browser treats it as a hint to the picker, not a rule.** A person
+   * can switch the picker to "All Files", so what arrives is checked again
+   * here, and anything that does not match goes to `onReject` instead.
+   */
+  accept?: string;
+  /**
+   * Let more than one file be picked at a time.
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * Refuse to open the picker, and mark every part with `[data-disabled]`.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Called with the files that were picked and match `accept`.
+   *
+   * It is not called at all when the picker is dismissed, or when every file
+   * picked was rejected — an empty array never arrives, so there is no need to
+   * tell "nothing was chosen" from "the choice was cleared".
+   */
+  onChange?: (files: File[]) => void;
+  /**
+   * 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, 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. */
+  children: ReactNode;
+}
+/**
+ * Picks files, and hands them over as `File`s.
+ */
+export declare const FileInput: {
+  Root: import("react").ForwardRefExoticComponent<FileInputProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof FileInputProps> & import("react").RefAttributes<HTMLDivElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<FileInputTriggerProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "children" | "htmlFor"> & import("react").RefAttributes<HTMLLabelElement>>;
+};
 //#endregion
 //#region src/components/Knob/ActiveLine.d.ts
 declare function ActiveLine({ stroke, strokeWidth, className, ...props }: Omit<SVGProps<SVGPathElement>, 'd'>): import("react").JSX.Element;
@@ -138,6 +251,27 @@ interface KnobThumbProps {
 }
 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/css-variables.d.ts
+/**
+ * CSS custom properties, for a `style` object.
+ *
+ * React's `CSSProperties` has no key starting with `--`, so
+ * `style={{ '--color': 'red' }}` is refused as an unknown property even though
+ * the browser takes it. Every part accepts this alongside `CSSProperties`,
+ * which is how a variable the component or a theme reads is set inline.
+ *
+ * `T` names the custom properties the part itself writes or reads, without the
+ * leading `--`, so that an editor can suggest them. Any other `--` name is
+ * still accepted — a theme reads variables of its own, such as the colours of
+ * each kind of key.
+ *
+ * @example
+ * CSSVariables<'thickness' | 'length'>
+ * // { '--thickness'?: string | number, '--length'?: string | number,
+ * //   [name: `--${string}`]: string | number | undefined }
+ */
+type CSSVariables<T extends string = never> = { [K in T as `--${K}`]?: string | number; } & { [K in `--${string}`]?: string | number; };
+//#endregion
 //#region src/components/Knob/context.d.ts
 type KnobConfig = {
   value: number;
@@ -149,24 +283,13 @@ 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.
  */
-declare function useKnobContext(): KnobContextValue;
-declare function useKnobContext<T>(selector: (state: KnobContextValue) => T): T;
+export declare function useKnobContext(): KnobContextValue;
+export declare function useKnobContext<T>(selector: (state: KnobContextValue) => T): T;
 //#endregion
 //#region src/components/Knob/index.d.ts
 interface KnobProps {
@@ -318,6 +441,7 @@ interface KnobProps {
    * </Knob.Root>
    */
   children: ReactNode;
+  style?: CSSProperties & CSSVariables<'knob-size'>;
 }
 interface KnobMethods {
   focus: () => void;
@@ -326,7 +450,7 @@ interface KnobMethods {
 /**
  * Interactive rotary knob component implemented in SVG.
  */
-declare const Knob: {
+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>>;
   SVGRoot: typeof SVGRoot;
   InactiveLine: typeof InactiveLine;
@@ -334,37 +458,22 @@ declare const Knob: {
   Thumb: typeof Thumb;
 };
 //#endregion
-//#region src/components/NumberInput/InputField.d.ts
-interface NumberInputInputFieldProps {
-  className?: string;
-  style?: CSSProperties;
-}
-//#endregion
-//#region src/components/NumberInput/Stepper.d.ts
-interface NumberInputStepperProps {
-  className?: string;
-  style?: CSSProperties;
-  /** `<NumberInput.IncrementStepper />` and `<NumberInput.DecrementStepper />` go here. */
-  children?: ReactNode;
-}
-//#endregion
 //#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;
-}
+/**
+ * `--stepper-icon-size` is read by the default arrow inside, and set on the
+ * button so that it inherits there.
+ */
+type StepperButtonProps = Omit<ComponentPropsWithoutRef<'div'>, 'style'> & {
+  style?: CSSProperties & CSSVariables<'stepper-icon-size'>;
+};
 //#endregion
 //#region src/components/NumberInput/DecrementStepper.d.ts
-interface NumberInputDecrementStepperProps extends StepperButtonProps {}
 /** Lowers the value by one `step`, repeating while held. */
-declare function DecrementStepper(props: NumberInputDecrementStepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof NumberInputDecrementStepperProps>): import("react").JSX.Element;
+declare function DecrementStepper(props: StepperButtonProps): 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;
+declare function IncrementStepper(props: StepperButtonProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/NumberInput/context.d.ts
 type NumberInputContextValue = {
@@ -429,8 +538,8 @@ type NumberInputContextValue = {
  * The only state behind this is the editing draft; `value` comes from the props
  * of `Root` and everything else is derived during render.
  */
-declare function useNumberInputContext(): NumberInputContextValue;
-declare function useNumberInputContext<T>(selector: (state: NumberInputContextValue) => T): T;
+export declare function useNumberInputContext(): NumberInputContextValue;
+export declare function useNumberInputContext<T>(selector: (state: NumberInputContextValue) => T): T;
 //#endregion
 //#region src/components/NumberInput/index.d.ts
 interface NumberInputProps {
@@ -482,6 +591,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;
   /**
@@ -554,7 +666,7 @@ interface NumberInputProps {
   pointerLock?: boolean;
   /**
    * 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'
    */
@@ -608,8 +720,6 @@ interface NumberInputProps {
    * The parts carry `data-readonly` while it is set.
    */
   readonly?: boolean;
-  className?: string;
-  style?: CSSProperties;
   /**
    * Called with the new value. While the user types, it is called for every
    * entry that reads as a number, unclamped; committing the entry calls it
@@ -638,47 +748,324 @@ interface NumberInputMethods {
 /**
  * Input with some useful functions for entering numerical values.
  */
-declare const NumberInput: {
+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>>;
-  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>>;
+  InputField: import("react").ForwardRefExoticComponent<{
+    form?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
+    title?: string | undefined | undefined;
+    pattern?: string | undefined | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    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;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    children?: ReactNode;
+    dangerouslySetInnerHTML?: {
+      __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onChange?: import("react").ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<HTMLInputElement, Element> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLInputElement> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<HTMLInputElement> | undefined;
+    onInput?: import("react").InputEventHandler<HTMLInputElement> | undefined;
+    onInputCapture?: import("react").InputEventHandler<HTMLInputElement> | undefined;
+    onReset?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<HTMLInputElement> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<HTMLInputElement> | undefined;
+    onInvalid?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLInputElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLInputElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLInputElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLInputElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+    accept?: string | undefined | undefined;
+    multiple?: boolean | undefined | undefined;
+    disabled?: boolean | undefined | undefined;
+    height?: number | string | undefined | undefined;
+    width?: number | string | undefined | undefined;
+    min?: number | string | undefined | undefined;
+    max?: number | string | undefined | undefined;
+    step?: number | string | undefined | undefined;
+    alt?: string | undefined | undefined;
+    autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
+    capture?: boolean | "user" | "environment" | undefined | undefined;
+    checked?: boolean | undefined | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined | undefined;
+    formMethod?: string | undefined | undefined;
+    formNoValidate?: boolean | undefined | undefined;
+    formTarget?: string | undefined | undefined;
+    list?: string | undefined | undefined;
+    maxLength?: number | undefined | undefined;
+    minLength?: number | undefined | undefined;
+    name?: string | undefined | undefined;
+    placeholder?: string | undefined | undefined;
+    readOnly?: boolean | undefined | undefined;
+    required?: boolean | undefined | undefined;
+    size?: number | undefined | undefined;
+    src?: string | undefined | undefined;
+  } & import("react").RefAttributes<HTMLInputElement>>;
+  Stepper: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   IncrementStepper: typeof IncrementStepper;
   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.
- */
-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';
-/**
- * `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>;
 /**
  * What {@link PianoProps.keyProps} may return for one key.
  *
@@ -686,9 +1073,7 @@ type CSSVariables = Record<`--${string}`, string | number | undefined>;
  * 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;
-} & 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`. */
@@ -769,16 +1154,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;
-  style?: CSSProperties & CSSVariables;
   /**
    * 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;
@@ -813,40 +1191,20 @@ interface PianoMethods {
 /**
  * Customizable piano component.
  */
-declare const Piano: {
+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>>;
 };
 //#endregion
-//#region src/components/PointsEditor/Container.d.ts
-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;
+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;
-};
-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.
    */
   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
@@ -854,15 +1212,9 @@ 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`. */
@@ -884,46 +1236,25 @@ 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;
+  onChange?: (value: PointPosition) => void;
   /** Called when a drag on this point starts, with where the point is. */
-  onDragStart?: (value: PointBaseType) => void;
+  onDragStart?: (value: PointPosition) => void;
   /** Called when that drag ends, with where the point is. */
-  onDragEnd?: (value: PointBaseType) => void;
+  onDragEnd?: (value: PointPosition) => void;
+  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, 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;
+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;
@@ -945,52 +1276,25 @@ 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.
+   * 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.
    */
-  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;
+  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
  * 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;
+export declare function usePointsEditorContext(): PointsEditorContextValue;
+export 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;
   /**
    * Make the points unchangeable and remove them from the tab order.
    * The parts carry `data-disabled` while it is set.
@@ -1106,10 +1410,10 @@ interface PointsEditorProps {
 /**
  * Multiple Point Controller
  */
-declare const PointsEditor: {
+export declare const PointsEditor: {
   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: import("react").ForwardRefExoticComponent<PointsEditorContainerProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & import("react").RefAttributes<HTMLDivElement>>;
+  Container: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Point: typeof Point;
   SelectionBox: typeof SelectionBox;
 };
@@ -1122,18 +1426,7 @@ interface SliderThumbProps {
    * 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;
-  'aria-label'?: AriaAttributes['aria-label'];
-  'aria-labelledby'?: AriaAttributes['aria-labelledby'];
-  'aria-describedby'?: AriaAttributes['aria-describedby'];
-  'aria-valuetext'?: AriaAttributes['aria-valuetext'];
+  style?: CSSProperties & CSSVariables<'color' | 'translate'>;
 }
 interface SliderThumbMethods {
   focus: () => void;
@@ -1153,25 +1446,9 @@ interface SliderTrackProps {
   active?: string;
   /** Colour of the rest of the track. Sets `--inactive`. */
   inactive?: string;
-  className?: string;
-  style?: CSSProperties;
-  /** `<Slider.Thumb />` goes here. */
-  children?: ReactNode;
+  style?: CSSProperties & CSSVariables<'length' | 'thickness' | 'active' | 'inactive' | '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 {
   /**
@@ -1188,11 +1465,7 @@ interface SliderMarksProps {
    * `'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;
+  style?: CSSProperties & CSSVariables<'gap'>;
 }
 declare function Marks({ gap, options, children, className, style, ...props }: SliderMarksProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SliderMarksProps>): import("react").JSX.Element;
 //#endregion
@@ -1216,8 +1489,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;
@@ -1228,8 +1499,9 @@ interface SliderMarksOptionProps {
     mark?: CSSProperties;
     label?: CSSProperties;
   };
+  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 = {
@@ -1258,8 +1530,8 @@ type SliderContextValue = {
  * 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;
+export declare function useSliderContext(): SliderContextValue;
+export declare function useSliderContext<T>(selector: (state: SliderContextValue) => T): T;
 //#endregion
 //#region src/components/Slider/index.d.ts
 interface SliderProps {
@@ -1364,8 +1636,6 @@ interface SliderProps {
    * 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. */
@@ -1392,7 +1662,7 @@ interface SliderMethods {
 /**
  * Customizable slider
  */
-declare const 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>>;
   Track: React.ForwardRefExoticComponent<SliderTrackProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderTrackProps> & React.RefAttributes<HTMLDivElement>>;
@@ -1400,34 +1670,6 @@ declare const Slider: {
   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.
- */
-declare function useXYPadContext(): XYPadContextValue;
-declare function useXYPadContext<T>(selector: (state: XYPadContextValue) => T): T;
-//#endregion
 //#region src/components/XYPad/Thumb.d.ts
 interface XYPadThumbProps {
   /**
@@ -1436,14 +1678,6 @@ interface XYPadThumbProps {
    * the matching room around the area.
    */
   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;
   /**
    * 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
@@ -1459,25 +1693,40 @@ interface XYPadThumbProps {
    * `[x, y]` or one for both.
    */
   'aria-valuetext'?: XYInput<AriaAttributes['aria-valuetext']>;
+  style?: CSSProperties & CSSVariables<'color' | 'translate'>;
 }
 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;
-}
+//#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
 /**
@@ -1610,20 +1859,24 @@ interface XYPadMethods {
 /**
  * Simple XYPad
  */
-declare const 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>>;
+  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
-declare function useAnimationFrame(callback?: () => void, deps?: DependencyList): void;
+export declare function useAnimationFrame(callback?: () => void, deps?: DependencyList): void;
 //#endregion
 //#region src/hooks/useDrag.d.ts
-interface UseDragProps {
+interface UseDragOptions {
   /**
-   * Threshold at which the onDrag event fires.
-   * Prevents onDrag events from firing, for example, when double-clicking.
+   * Pixels the pointer has to travel before the drag counts as one.
+   *
+   * A click moves the pointer by a pixel or two, so without a threshold a
+   * double click reports a drag between the two presses.
+   *
+   * @default 1
    */
   threshold?: number;
   /** CSS cursor to show while dragging. Applied to the element itself. */
@@ -1637,11 +1890,16 @@ interface UseDragProps {
    */
   pointerLock?: boolean;
   /**
+   * Called on every move once the drag has started, with the pointer position
+   * relative to the element and how far it moved since the last call.
+   *
    * @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;
+  /** Called once the pointer has moved past `threshold`, not on pointerdown. */
   onDragStart?: (state: DragState) => void;
+  /** Called when the pointer is released, only if the drag ever started. */
   onDragEnd?: (state: DragState) => void;
 }
 /**
@@ -1649,12 +1907,12 @@ interface UseDragProps {
  *
  * @returns a ref callback to attach to the element being dragged
  */
-declare function useDrag<T extends Element>({ threshold, cursor, pointerLock, onDrag, onDragStart, onDragEnd }: UseDragProps): (node: T | null) => void;
+export declare function useDrag<T extends Element>({ threshold, cursor, pointerLock, onDrag, onDragStart, onDragEnd }: UseDragOptions): (node: T | null) => void;
 //#endregion
 //#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.
@@ -1668,12 +1926,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
@@ -1687,9 +1945,19 @@ interface UseDragValueOptions {
    * @see elementMapping
    */
   sensitivity?: (state: DragState) => number;
-  /** @see DragValueOptions.updateOnPointerDown */
+  /**
+   * Move the value on pointerdown, before the pointer has moved at all. With
+   * `baseElementRef` that makes a press jump the value to where it landed.
+   *
+   * @see DragValueOptions.updateOnPointerDown
+   */
   updateOnPointerDown?: boolean;
-  /** @default 0 */
+  /**
+   * Pixels the pointer has to travel before the drag counts as one. The
+   * default is 0, so the value follows the very first move.
+   *
+   * @default 0
+   */
   threshold?: number;
   /** CSS cursor to show while dragging. Applied to the element itself. */
   cursor?: string;
@@ -1710,35 +1978,63 @@ interface UseDragValueOptions {
    */
   shouldStart?: (event: PointerEvent) => boolean;
   /**
+   * Called with the new value whenever the drag moves it. The hook holds no
+   * value of its own, so this is where it is stored.
+   *
    * @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;
+  onChange?: (value: XY<number>, state: DragState) => void;
+  /** Called once the drag starts, with the value it starts from. */
+  onDragStart?: (value: XY<number>, state: DragState) => void;
+  /** Called when the pointer is released, with the value it ends on. */
+  onDragEnd?: (value: XY<number>, state: DragState) => void;
 }
 /**
  * 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 useDragValue<T extends Element>(options: UseDragValueOptions): {
+export declare function useDragValue<T extends Element>(options: UseDragValueOptions): {
   refCallback: (node: T | null) => void;
   dragging: boolean;
 };
 //#endregion
+//#region src/hooks/useDropZone.d.ts
+interface UseDropZoneOptions extends Omit<DropZoneOptions, 'onStateChange'> {}
+/**
+ * Take files dropped onto an element.
+ *
+ * Any element can become a drop target this way — a waveform display, a track
+ * lane, a canvas — without wrapping it in anything.
+ *
+ * @returns a ref callback for the element, and whether a drag is over it
+ */
+export declare function useDropZone<T extends Element>({ accept, multiple, disabled, onDrop, onReject }?: UseDropZoneOptions): {
+  refCallback: (node: T | null) => void;
+  over: boolean;
+  invalid: boolean;
+};
+//#endregion
 //#region src/hooks/useEventListener.d.ts
 type Target = EventTarget | null | (() => EventTarget | null);
 type Options = boolean | AddEventListenerOptions;
-declare function useEventListener<K extends keyof DocumentEventMap>(target: Target, event: K, handler: (event: DocumentEventMap[K]) => void, options?: Options): VoidFunction;
-declare function useEventListener<K extends keyof WindowEventMap>(target: Target, event: K, handler: (event: WindowEventMap[K]) => void, options?: Options): VoidFunction;
-declare function useEventListener<K extends keyof GlobalEventHandlersEventMap>(target: Target, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void, options?: Options): VoidFunction;
+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
-declare function useInterval(callback: () => void, delay: number | null): void;
+export 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): (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
 /**
@@ -1751,8 +2047,8 @@ declare function useLongPress(callback: () => void, initialDelay?: number, inter
  * 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: (options?: MIDIAccessOptions$1) => void;
+export declare function useMIDIAccess(requestOnMount?: boolean): {
+  request: (options?: MIDIAccessOptions) => void;
   midiAccess: MIDIAccess | null;
   error: import("@tremolo-ui/dom").MIDIAccessError | null;
   inputs: readonly MIDIInput[];
@@ -1776,7 +2072,7 @@ declare function useMIDIAccess(requestOnMount?: boolean): {
  *   },
  * })
  */
-declare function useMIDIInput(midiAccess: MIDIAccess | null, handlers: MIDIInputHandlers): void;
+export declare function useMIDIInput(midiAccess: MIDIAccess | null, handlers: MIDIInputHandlers): void;
 //#endregion
 //#region src/hooks/useMIDIMessage.d.ts
 /**
@@ -1786,10 +2082,10 @@ declare function useMIDIInput(midiAccess: MIDIAccess | null, handlers: MIDIInput
  * 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;
+export declare function useMIDIMessage(midiAccess: MIDIAccess | null, onMIDIMessage: (event: MIDIMessageEvent) => void): void;
 //#endregion
 //#region src/hooks/useWheel.d.ts
-interface UseWheelOptions extends WheelOptions {
+interface UseWheelOptions extends Omit<WheelOptions, 'onWheel'> {
   /**
    * Listen on this element rather than on the one the returned ref callback is
    * attached to, and ignore that callback.
@@ -1811,31 +2107,7 @@ interface UseWheelOptions extends WheelOptions {
  *
  * @returns a ref callback to attach to the element, unused when `target` is given
  */
-declare function useWheel<T extends Element>(onWheel: (event: WheelEvent) => void, { requireFocus, target }?: UseWheelOptions): (node: T | null) => void;
-//#endregion
-//#region src/input-event.d.ts
-/**
- * The keyboard amount used by Knob, NumberInput, Slider, and XYPad by default:
- * 1 per press in the units of the value, and 0.1 with shift held. That is one
- * `step` only while `step` is 1; a coarser `step` rounds 1 straight back, which
- * `useCheckSteps` warns about.
- *
- * A modifier entry is not snapped to `step`, which is what lets the finer
- * amount move at all — see `applyDelta` in `@tremolo-ui/functions`.
- */
-declare const DEFAULT_KEYBOARD_OPTIONS: ModifierValue<InputEventOption>;
-/**
- * The wheel amount used by Knob, NumberInput, Slider, and XYPad by default.
- *
- * Browsers turn shift+wheel into horizontal scrolling, which empties `deltaY`
- * and fills `deltaX`, so no modifier is bound here.
- */
-declare const DEFAULT_WHEEL_OPTIONS: ModifierValue<InputEventOption>;
-/**
- * The drag sensitivity used by value controls by default. Shift makes the
- * same movement cover a tenth of the range, matching the arrow keys.
- */
-declare const DEFAULT_DRAG_SENSITIVITY: ModifierValue<number>;
+export declare function useWheel<T extends Element>(onWheel: (event: WheelEvent) => void, { requireFocus, target }?: UseWheelOptions): (node: T | null) => void;
 //#endregion
-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 };
+export type { AnimationCanvasCommonProps, AnimationCanvasFixedProps, AnimationCanvasProps, AnimationCanvasResizableProps, CSSVariables, DrawFunction, DropZoneProps, FileInputContextValue, FileInputProps, FileInputTriggerProps, InitFunction, KeyAttributes, KeyState, KnobContextValue, KnobMethods, KnobProps, KnobSVGRootProps, KnobThumbProps, NumberInputContextValue, NumberInputMethods, NumberInputProps, PianoMethods, PianoProps, PointsEditorContextValue, PointsEditorPointProps, PointsEditorProps, SliderContextValue, SliderMarksOptionProps, SliderMarksProps, SliderMethods, SliderProps, SliderThumbMethods, SliderThumbProps, SliderTrackProps, UseDragOptions, UseDragValueOptions, UseDropZoneOptions, UseWheelOptions, XYPadContextValue, XYPadMethods, XYPadProps, XYPadThumbMethods, XYPadThumbProps };
 //# sourceMappingURL=index.d.ts.map