@tremolo-ui/vue 0.7.0

package/dist/index.d.cts

@@ -0,0 +1,1678 @@
+import { HTMLAttributes, MaybeRefOrGetter, PropType, SlotsType } from "vue";
+import { AnimationFrame, DragOptions, DragValueOptions, DropZoneOptions, DropZoneState, InputEventOption, KeyboardShortcuts, KeyboardShortcutsScope, KnobAngles, LongPressOptions, MIDIAccessOptions, MIDIAccessState, MIDIInputHandlers, MarksOptions, ModifierState, ModifierValue, NoteRange, PointPosition, PointsEditorInstance, SelectionBoxRect, WheelOptions, XY, XYInput, parseNumberText } from "@tremolo-ui/dom";
+import { Scale, ValueRange } from "@tremolo-ui/functions";
+//#region src/components/AnimationCanvas/AnimationCanvas.d.ts
+/** Called once the canvas is ready, and again whenever it is resized. */
+type InitFunction = (context: CanvasRenderingContext2D, size: {
+  width: number;
+  height: number;
+}) => void;
+/** Called on every frame while `animate` is on, and once otherwise. */
+type DrawFunction = (context: CanvasRenderingContext2D, frame: AnimationFrame) => void;
+/** A `<canvas>` drawn by `draw` on every animation frame. */
+export declare const AnimationCanvas: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Draws a frame. */
+  draw: {
+    type: PropType<DrawFunction>;
+    required: true;
+  };
+  /** Sets the canvas up before the first frame and after a resize. */
+  init: PropType<InitFunction>;
+  /** Draw on every animation frame. @default true */
+  animate: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Settings for the 2D context. Read once, when the canvas is created. */
+  options: PropType<CanvasRenderingContext2DSettings>;
+  /** Keep the drawing while the canvas is resized. @default true */
+  reduceFlickering: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Follow the size of the parent element; `width` and `height` are ignored. */
+  resizable: BooleanConstructor;
+  /** Width in CSS pixels, while not `resizable`. @default 100 */
+  width: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Height in CSS pixels, while not `resizable`. @default 100 */
+  height: {
+    type: NumberConstructor;
+    default: number;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** Draws a frame. */
+  draw: {
+    type: PropType<DrawFunction>;
+    required: true;
+  };
+  /** Sets the canvas up before the first frame and after a resize. */
+  init: PropType<InitFunction>;
+  /** Draw on every animation frame. @default true */
+  animate: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Settings for the 2D context. Read once, when the canvas is created. */
+  options: PropType<CanvasRenderingContext2DSettings>;
+  /** Keep the drawing while the canvas is resized. @default true */
+  reduceFlickering: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Follow the size of the parent element; `width` and `height` are ignored. */
+  resizable: BooleanConstructor;
+  /** Width in CSS pixels, while not `resizable`. @default 100 */
+  width: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Height in CSS pixels, while not `resizable`. @default 100 */
+  height: {
+    type: NumberConstructor;
+    default: number;
+  };
+}>> & Readonly<{}>, {
+  resizable: boolean;
+  animate: boolean;
+  reduceFlickering: boolean;
+  width: number;
+  height: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/DropZone/DropZone.d.ts
+/** A region that takes dropped files. */
+export declare const DropZone: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Which files to take, as the `accept` attribute of a file input. */
+  accept: StringConstructor;
+  /** Take every file dropped, rather than the first. */
+  multiple: BooleanConstructor;
+  /** Ignore drops. The zone carries `data-disabled`. */
+  disabled: BooleanConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  /** The dropped files that satisfy `accept`. */
+  drop: (files: File[], _event: DragEvent) => boolean;
+  /** The dropped files that do not satisfy `accept`, after `drop` for the same drop. */
+  reject: (files: File[], _event: DragEvent) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** Which files to take, as the `accept` attribute of a file input. */
+  accept: StringConstructor;
+  /** Take every file dropped, rather than the first. */
+  multiple: BooleanConstructor;
+  /** Ignore drops. The zone carries `data-disabled`. */
+  disabled: BooleanConstructor;
+}>> & Readonly<{
+  onDrop?: ((files: File[], _event: DragEvent) => any) | undefined;
+  onReject?: ((files: File[], _event: DragEvent) => any) | undefined;
+}>, {
+  multiple: boolean;
+  disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/FileInput/context.d.ts
+/** What `FileInput` shares with `FileInputTrigger`. */
+interface FileInputContextValue {
+  /** The id of the file input, for the trigger's `for`. */
+  readonly inputId: string;
+  readonly disabled: boolean;
+}
+/** The context of the enclosing `FileInput`, for a part of your own. */
+export declare function useFileInputContext(): FileInputContextValue;
+//#endregion
+//#region src/components/FileInput/FileInput.d.ts
+/**
+ * Picks files. The control is the native file input, out of sight but in the
+ * tab order, with `FileInputTrigger` as its label.
+ */
+export declare const FileInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /**
+   * Which files to take: extensions, MIME types and type groups. It is
+   * checked again when the files arrive, since the picker only takes it as
+   * a hint.
+   */
+  accept: StringConstructor;
+  /** Let several files be picked at once. */
+  multiple: BooleanConstructor;
+  /** Make the input unusable. The parts carry `data-disabled`. */
+  disabled: BooleanConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  /** The picked files that satisfy `accept`. */
+  change: (files: File[]) => boolean;
+  /** The picked files that do not satisfy `accept`, after `change` for the same selection. */
+  reject: (files: File[]) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /**
+   * Which files to take: extensions, MIME types and type groups. It is
+   * checked again when the files arrive, since the picker only takes it as
+   * a hint.
+   */
+  accept: StringConstructor;
+  /** Let several files be picked at once. */
+  multiple: BooleanConstructor;
+  /** Make the input unusable. The parts carry `data-disabled`. */
+  disabled: BooleanConstructor;
+}>> & Readonly<{
+  onChange?: ((files: File[]) => any) | undefined;
+  onReject?: ((files: File[]) => any) | undefined;
+}>, {
+  multiple: boolean;
+  disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/FileInput/FileInputTrigger.d.ts
+/**
+ * Opens the file picker and names the input. A `<label>` rather than a
+ * button: the browser forwards the click, the input stays the one thing in
+ * the tab order, and its name comes from this text.
+ */
+export declare const FileInputTrigger: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/Knob/context.d.ts
+/**
+ * What `Knob` shares with its parts. The fields are getters, so reading one in
+ * a render or a `computed` follows the value as it changes.
+ */
+interface KnobContextValue {
+  readonly value: number;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+  readonly scale: Scale;
+  readonly startValue: number;
+  /** How far the knob turns from `min` to `max`, in degrees. */
+  readonly angleRange: number;
+  /** The angles the parts are drawn with. See `knobAngles` in `@tremolo-ui/dom`. */
+  readonly angles: KnobAngles;
+}
+/** The context of the enclosing `Knob`, for a part of your own. */
+export declare function useKnobContext(): KnobContextValue;
+//#endregion
+//#region src/components/Knob/Knob.d.ts
+/**
+ * Interactive rotary knob, drawn in SVG by `KnobSVGRoot` and the parts inside
+ * it. Bind the value with `v-model`.
+ */
+export declare const Knob: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** The current value. Bind it with `v-model`. */
+  modelValue: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** The value with the knob turned all the way down. */
+  min: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** The value with the knob turned all the way up. */
+  max: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** Granularity of the value. @default 1 */
+  step: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** How the value is distributed across the travel. @default linearScale */
+  scale: {
+    type: PropType<Scale>;
+    default: () => Scale;
+  };
+  /** The value a double click restores. @default min */
+  defaultValue: NumberConstructor;
+  /** Where the active arc starts. @default min */
+  startValue: NumberConstructor;
+  /** Width and height of the knob. Sets `--knob-size`. */
+  size: (NumberConstructor | StringConstructor)[];
+  /** The cursor to show while dragging. @default { cursor: 'grabbing' } */
+  externalStyles: PropType<{
+    cursor?: string;
+  }>;
+  /** How much one notch of the wheel moves the value. `null` turns it off. */
+  wheel: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  /** How much one arrow key press moves the value. `null` turns it off. */
+  keyboard: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  /** How much a drag moves the value, per modifier key. */
+  dragSensitivity: {
+    type: PropType<ModifierValue<number>>;
+    default: () => ModifierValue<number>;
+  };
+  /** Hide the cursor while dragging and read the movement directly. */
+  pointerLock: BooleanConstructor;
+  /** Restore `defaultValue` on a double click. @default true */
+  enableDoubleClickDefault: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Make the knob unchangeable and remove it from the tab order. */
+  disabled: BooleanConstructor;
+  /** Make the knob unchangeable while leaving it focusable. */
+  readonly: BooleanConstructor;
+  /** How far the knob turns from `min` to `max`, in degrees. @default 270 */
+  angleRange: {
+    type: NumberConstructor;
+    default: number;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'update:modelValue': (value: number) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** The current value. Bind it with `v-model`. */
+  modelValue: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** The value with the knob turned all the way down. */
+  min: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** The value with the knob turned all the way up. */
+  max: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** Granularity of the value. @default 1 */
+  step: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** How the value is distributed across the travel. @default linearScale */
+  scale: {
+    type: PropType<Scale>;
+    default: () => Scale;
+  };
+  /** The value a double click restores. @default min */
+  defaultValue: NumberConstructor;
+  /** Where the active arc starts. @default min */
+  startValue: NumberConstructor;
+  /** Width and height of the knob. Sets `--knob-size`. */
+  size: (NumberConstructor | StringConstructor)[];
+  /** The cursor to show while dragging. @default { cursor: 'grabbing' } */
+  externalStyles: PropType<{
+    cursor?: string;
+  }>;
+  /** How much one notch of the wheel moves the value. `null` turns it off. */
+  wheel: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  /** How much one arrow key press moves the value. `null` turns it off. */
+  keyboard: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  /** How much a drag moves the value, per modifier key. */
+  dragSensitivity: {
+    type: PropType<ModifierValue<number>>;
+    default: () => ModifierValue<number>;
+  };
+  /** Hide the cursor while dragging and read the movement directly. */
+  pointerLock: BooleanConstructor;
+  /** Restore `defaultValue` on a double click. @default true */
+  enableDoubleClickDefault: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Make the knob unchangeable and remove it from the tab order. */
+  disabled: BooleanConstructor;
+  /** Make the knob unchangeable while leaving it focusable. */
+  readonly: BooleanConstructor;
+  /** How far the knob turns from `min` to `max`, in degrees. @default 270 */
+  angleRange: {
+    type: NumberConstructor;
+    default: number;
+  };
+}>> & Readonly<{
+  "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+  wheel: ModifierValue<InputEventOption> | null;
+  disabled: boolean;
+  step: number;
+  keyboard: ModifierValue<InputEventOption> | null;
+  dragSensitivity: ModifierValue<number>;
+  readonly: boolean;
+  scale: Scale;
+  pointerLock: boolean;
+  enableDoubleClickDefault: boolean;
+  angleRange: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/Knob/KnobActiveLine.d.ts
+/** The arc between `startValue` and the value, as an SVG `<path>`. */
+export declare const KnobActiveLine: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  stroke: {
+    type: StringConstructor;
+    default: string;
+  };
+  strokeWidth: {
+    type: (NumberConstructor | StringConstructor)[];
+    default: number;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  stroke: {
+    type: StringConstructor;
+    default: string;
+  };
+  strokeWidth: {
+    type: (NumberConstructor | StringConstructor)[];
+    default: number;
+  };
+}>> & Readonly<{}>, {
+  stroke: string;
+  strokeWidth: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/Knob/KnobInactiveLine.d.ts
+/**
+ * The travel outside the value, as SVG `<path>`s: one on each side of the
+ * active arc that has any length.
+ */
+export declare const KnobInactiveLine: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  stroke: {
+    type: StringConstructor;
+    default: string;
+  };
+  strokeWidth: {
+    type: (NumberConstructor | StringConstructor)[];
+    default: number;
+  };
+}>, () => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}> | null)[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  stroke: {
+    type: StringConstructor;
+    default: string;
+  };
+  strokeWidth: {
+    type: (NumberConstructor | StringConstructor)[];
+    default: number;
+  };
+}>> & Readonly<{}>, {
+  stroke: string;
+  strokeWidth: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/Knob/KnobSVGRoot.d.ts
+/**
+ * The `<svg>` the drawing parts go in, in the order you want them painted.
+ * It sets the view box they are drawn against.
+ */
+export declare const KnobSVGRoot: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/Knob/KnobThumb.d.ts
+/** The circle that turns with the value, and the line on it that points at it. */
+export declare const KnobThumb: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Fill colour of the circle. @default 'currentColor' */
+  thumb: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Colour of the line that points at the value. @default 'currentColor' */
+  thumbLine: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Diameter of the circle, as a percentage of the knob. @default 84 */
+  thumbSize: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Thickness of the line, as a percentage of the knob. @default 6 */
+  thumbLineWeight: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** How far down the line reaches, as a percentage. @default 35 */
+  thumbLineLength: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Classes for the line that points at the value. */
+  classes: PropType<{
+    thumbLine?: string;
+  }>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** Fill colour of the circle. @default 'currentColor' */
+  thumb: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Colour of the line that points at the value. @default 'currentColor' */
+  thumbLine: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Diameter of the circle, as a percentage of the knob. @default 84 */
+  thumbSize: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Thickness of the line, as a percentage of the knob. @default 6 */
+  thumbLineWeight: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** How far down the line reaches, as a percentage. @default 35 */
+  thumbLineLength: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Classes for the line that points at the value. */
+  classes: PropType<{
+    thumbLine?: string;
+  }>;
+}>> & Readonly<{}>, {
+  thumb: string;
+  thumbLine: string;
+  thumbSize: number;
+  thumbLineWeight: number;
+  thumbLineLength: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/NumberInput/context.d.ts
+/** What `NumberInput` shares with its parts. The fields are getters. */
+interface NumberInputContextValue {
+  readonly value: number;
+  readonly min: number | undefined;
+  readonly max: number | undefined;
+  readonly step: number;
+  readonly disabled: boolean;
+  readonly readonly: boolean;
+  readonly keyboard: ModifierValue<InputEventOption> | null;
+  readonly drag: number | null;
+  readonly dragSensitivity: ModifierValue<number>;
+  readonly pointerLock: boolean;
+  readonly selectOnFocus: 'all' | 'number' | 'none';
+  readonly unformatOnFocus: boolean;
+  readonly keepCaretOnStep: boolean;
+  readonly blurOnEnter: boolean;
+  /** The text the field shows: the draft while typing, else `format(value)`. */
+  readonly text: string;
+  /** Whether the user has typed since the value was last committed. */
+  readonly editing: boolean;
+  readonly outOfRange: boolean;
+  readonly atMin: boolean;
+  readonly atMax: boolean;
+  /** The range a raw amount moves across, for the stepper drag. */
+  readonly rawRange: ValueRange;
+  /** Keep typed text as the draft, reporting the number in it. */
+  setDraft: (text: string) => void;
+  /** Commit the draft, clamped, or drop it when it holds no number. */
+  commitDraft: () => void;
+  /** Set the value, dropping any draft. */
+  changeValue: (value: number) => void;
+  /** Move the value by one press of `option`. */
+  nudge: (direction: number, option: ModifierValue<InputEventOption>, modifiers?: ModifierState) => void;
+  /** @internal `NumberInputField` registers the element focus() moves to. */
+  setInput: (input: HTMLInputElement | null) => void;
+}
+/** The context of the enclosing `NumberInput`, for a part of your own. */
+export declare function useNumberInputContext(): NumberInputContextValue;
+//#endregion
+//#region src/components/NumberInput/NumberInput.d.ts
+/** Input with some useful functions for entering numbers. Bind it with `v-model`. */
+export declare const NumberInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** The current value. Bind it with `v-model`. */
+  modelValue: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** The lowest value. Leave it out for no lower end. */
+  min: NumberConstructor;
+  /** The highest value. Leave it out for no upper end. */
+  max: NumberConstructor;
+  /** Granularity of the value. @default 1 */
+  step: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** How the value is distributed, for a `normalized` amount. */
+  scale: {
+    type: PropType<Scale>;
+    default: () => Scale;
+  };
+  /** The text shown for a value. @default String */
+  format: {
+    type: PropType<(value: number) => string>;
+    default: StringConstructor;
+  };
+  /** Read a value back out of the text. Has to undo `format`. */
+  parse: {
+    type: PropType<(text: string) => number>;
+    default: typeof parseNumberText;
+  };
+  /** Keep the value within `min` and `max` when committed or stepped. */
+  clampValue: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  wheel: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption>;
+  };
+  keyboard: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption>;
+  };
+  dragSensitivity: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<number>>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<number>;
+  };
+  /** Pixels of vertical drag on the stepper per `step`. `null` turns it off. */
+  drag: {
+    type: PropType<number | null>;
+    default: number;
+  };
+  /** Hide the cursor while dragging the stepper. */
+  pointerLock: BooleanConstructor;
+  /** Select the text when the field takes focus. @default 'none' */
+  selectOnFocus: {
+    type: PropType<"all" | "number" | "none">;
+    default: string;
+  };
+  /** Show the plain value while the field has focus. */
+  unformatOnFocus: BooleanConstructor;
+  /** Put the caret back at the same digit after an arrow key step. */
+  keepCaretOnStep: BooleanConstructor;
+  /** Commit and leave the field on Enter. @default true */
+  blurOnEnter: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Make the input unchangeable and remove it from the tab order. */
+  disabled: BooleanConstructor;
+  /** Make the value unchangeable while leaving the field focusable. */
+  readonly: BooleanConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'update:modelValue': (value: number) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** The current value. Bind it with `v-model`. */
+  modelValue: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** The lowest value. Leave it out for no lower end. */
+  min: NumberConstructor;
+  /** The highest value. Leave it out for no upper end. */
+  max: NumberConstructor;
+  /** Granularity of the value. @default 1 */
+  step: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** How the value is distributed, for a `normalized` amount. */
+  scale: {
+    type: PropType<Scale>;
+    default: () => Scale;
+  };
+  /** The text shown for a value. @default String */
+  format: {
+    type: PropType<(value: number) => string>;
+    default: StringConstructor;
+  };
+  /** Read a value back out of the text. Has to undo `format`. */
+  parse: {
+    type: PropType<(text: string) => number>;
+    default: typeof parseNumberText;
+  };
+  /** Keep the value within `min` and `max` when committed or stepped. */
+  clampValue: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  wheel: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption>;
+  };
+  keyboard: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption>;
+  };
+  dragSensitivity: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<number>>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<number>;
+  };
+  /** Pixels of vertical drag on the stepper per `step`. `null` turns it off. */
+  drag: {
+    type: PropType<number | null>;
+    default: number;
+  };
+  /** Hide the cursor while dragging the stepper. */
+  pointerLock: BooleanConstructor;
+  /** Select the text when the field takes focus. @default 'none' */
+  selectOnFocus: {
+    type: PropType<"all" | "number" | "none">;
+    default: string;
+  };
+  /** Show the plain value while the field has focus. */
+  unformatOnFocus: BooleanConstructor;
+  /** Put the caret back at the same digit after an arrow key step. */
+  keepCaretOnStep: BooleanConstructor;
+  /** Commit and leave the field on Enter. @default true */
+  blurOnEnter: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Make the input unchangeable and remove it from the tab order. */
+  disabled: BooleanConstructor;
+  /** Make the value unchangeable while leaving the field focusable. */
+  readonly: BooleanConstructor;
+}>> & Readonly<{
+  "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+  drag: number | null;
+  wheel: import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null;
+  disabled: boolean;
+  step: number;
+  keyboard: import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null;
+  dragSensitivity: import("@tremolo-ui/dom").ModifierValue<number>;
+  readonly: boolean;
+  scale: Scale;
+  pointerLock: boolean;
+  unformatOnFocus: boolean;
+  keepCaretOnStep: boolean;
+  format: (value: number) => string;
+  parse: (text: string) => number;
+  clampValue: boolean;
+  selectOnFocus: "number" | "none" | "all";
+  blurOnEnter: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/NumberInput/NumberInputDecrementStepper.d.ts
+/** Lowers the value by one `step`, repeating while held. */
+export declare const NumberInputDecrementStepper: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/NumberInput/NumberInputField.d.ts
+/**
+ * The text field, and the only place the value can be typed. While the user
+ * types, their own text stands rather than `format(value)`.
+ */
+export declare const NumberInputField: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/NumberInput/NumberInputIncrementStepper.d.ts
+/** Raises the value by one `step`, repeating while held. */
+export declare const NumberInputIncrementStepper: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/NumberInput/NumberInputStepper.d.ts
+/**
+ * The area the steppers sit in, and a drag handle in its own right: dragging
+ * it up and down moves the value one `step` every `drag` pixels.
+ */
+export declare const NumberInputStepper: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/Piano/Piano.d.ts
+/** What a key is, when the `label` slot or `keyProps` is asked about it. */
+interface KeyState {
+  /** Position in the note range, counting from `noteRange.first`. */
+  index: number;
+  keyType: 'white' | 'black';
+  /** Whether the note is currently sounding. */
+  active: boolean;
+  /** Whether the note is above `midiMax` and cannot sound. */
+  disabled: boolean;
+}
+/** What `keyProps` may return for one key. */
+type KeyAttributes = HTMLAttributes & Record<`data-${string}`, string | number | boolean | undefined>;
+/**
+ * Customizable piano. The keys are drawn by the component; what goes inside
+ * one is the `label` slot, which receives the note and its state.
+ */
+export declare const Piano: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** The notes drawn, from `first` to `last`. */
+  noteRange: {
+    type: PropType<NoteRange>;
+    required: true;
+  };
+  /** Let a pointer slide from one key to the next. @default true */
+  glissando: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Highest note that can sound. @default 127 */
+  midiMax: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Play notes from the computer keyboard. See `SHORTCUTS` in `@tremolo-ui/dom`. */
+  keyboardShortcuts: PropType<KeyboardShortcuts>;
+  /** Where keyboard shortcuts listen. @default 'root' */
+  keyboardShortcutsScope: {
+    type: PropType<KeyboardShortcutsScope>;
+    default: string;
+  };
+  /** Follow the width of the parent element. */
+  resizable: BooleanConstructor;
+  /** Width of a white key in pixels. @default 40 */
+  whiteKeyWidth: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Space between two white keys, in pixels. @default 1 */
+  keyGap: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Width of a black key, as a fraction of a white one. @default 0.65 */
+  blackKeyWidthRatio: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Height of a black key, as a fraction of the keyboard. @default 0.6 */
+  blackKeyHeightRatio: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Classes for the label inside each key. */
+  classes: PropType<{
+    keyLabelWrapper?: string;
+    keyLabel?: string;
+  }>;
+  /**
+   * Extra attributes for one key, by note. The geometry of the key is
+   * applied after the returned style and cannot be overridden.
+   */
+  keyProps: PropType<(note: number, state: KeyState) => KeyAttributes>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  /** A note started sounding. */
+  playNote: (note: number, _velocity?: number) => boolean;
+  /** Everything holding a note let go of it. */
+  stopNote: (note: number) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** The notes drawn, from `first` to `last`. */
+  noteRange: {
+    type: PropType<NoteRange>;
+    required: true;
+  };
+  /** Let a pointer slide from one key to the next. @default true */
+  glissando: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /** Highest note that can sound. @default 127 */
+  midiMax: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Play notes from the computer keyboard. See `SHORTCUTS` in `@tremolo-ui/dom`. */
+  keyboardShortcuts: PropType<KeyboardShortcuts>;
+  /** Where keyboard shortcuts listen. @default 'root' */
+  keyboardShortcutsScope: {
+    type: PropType<KeyboardShortcutsScope>;
+    default: string;
+  };
+  /** Follow the width of the parent element. */
+  resizable: BooleanConstructor;
+  /** Width of a white key in pixels. @default 40 */
+  whiteKeyWidth: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Space between two white keys, in pixels. @default 1 */
+  keyGap: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Width of a black key, as a fraction of a white one. @default 0.65 */
+  blackKeyWidthRatio: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Height of a black key, as a fraction of the keyboard. @default 0.6 */
+  blackKeyHeightRatio: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Classes for the label inside each key. */
+  classes: PropType<{
+    keyLabelWrapper?: string;
+    keyLabel?: string;
+  }>;
+  /**
+   * Extra attributes for one key, by note. The geometry of the key is
+   * applied after the returned style and cannot be overridden.
+   */
+  keyProps: PropType<(note: number, state: KeyState) => KeyAttributes>;
+}>> & Readonly<{
+  onPlayNote?: ((note: number, _velocity?: number | undefined) => any) | undefined;
+  onStopNote?: ((note: number) => any) | undefined;
+}>, {
+  resizable: boolean;
+  glissando: boolean;
+  midiMax: number;
+  keyboardShortcutsScope: KeyboardShortcutsScope;
+  whiteKeyWidth: number;
+  keyGap: number;
+  blackKeyWidthRatio: number;
+  blackKeyHeightRatio: number;
+}, SlotsType<{
+  label: {
+    note: number;
+    state: KeyState;
+  };
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/PointsEditor/context.d.ts
+/** What `PointsEditor` shares with its parts. The fields are getters. */
+interface PointsEditorContextValue {
+  readonly disabled: boolean;
+  readonly readonly: boolean;
+  readonly wheel: ModifierValue<InputEventOption> | null;
+  readonly keyboard: ModifierValue<InputEventOption> | null;
+  readonly dragSensitivity: ModifierValue<number>;
+  readonly cursor: string;
+  readonly selectable: boolean;
+  /** Ids of the selected points. Always empty while `selectable` is off. */
+  readonly selection: readonly string[];
+  /** The selection box, while one is being dragged. */
+  readonly selectionBox: SelectionBoxRect | null;
+  /** The element points are placed in and measured against. */
+  readonly container: HTMLElement | null;
+  /** The selection and the moves, from `createPointsEditor` in `@tremolo-ui/dom`. */
+  readonly editor: PointsEditorInstance;
+  /** @internal `PointsEditorContainer` registers its element. */
+  setContainer: (element: HTMLElement | null) => void;
+}
+/** The context of the enclosing `PointsEditor`, for a part of your own. */
+export declare function usePointsEditorContext(): PointsEditorContextValue;
+//#endregion
+//#region src/components/PointsEditor/PointsEditor.d.ts
+/**
+ * Multiple point controller. Bind the selection with `v-model:selection` to
+ * hold it yourself; the editor keeps its own otherwise.
+ */
+export declare const PointsEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Make the points unchangeable and remove them from the tab order. */
+  disabled: BooleanConstructor;
+  /** Make the points unmovable. */
+  readonly: BooleanConstructor;
+  /** The cursor to show while dragging a point. @default { cursor: 'grabbing' } */
+  externalStyles: PropType<{
+    cursor?: string;
+  }>;
+  /** How much one wheel notch moves the focused point. */
+  wheel: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  /** How much one arrow key press moves a point. */
+  keyboard: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  /** How much a drag moves a point, per modifier key. */
+  dragSensitivity: {
+    type: PropType<ModifierValue<number>>;
+    default: () => ModifierValue<number>;
+  };
+  /**
+   * Let points be selected, and a selection be moved as one. A selection
+   * updates several points in the same tick.
+   */
+  selectable: BooleanConstructor;
+  /** Ids of the selected points. Bind it with `v-model:selection`. */
+  selection: PropType<string[]>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'update:selection': (selection: string[]) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** Make the points unchangeable and remove them from the tab order. */
+  disabled: BooleanConstructor;
+  /** Make the points unmovable. */
+  readonly: BooleanConstructor;
+  /** The cursor to show while dragging a point. @default { cursor: 'grabbing' } */
+  externalStyles: PropType<{
+    cursor?: string;
+  }>;
+  /** How much one wheel notch moves the focused point. */
+  wheel: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  /** How much one arrow key press moves a point. */
+  keyboard: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  /** How much a drag moves a point, per modifier key. */
+  dragSensitivity: {
+    type: PropType<ModifierValue<number>>;
+    default: () => ModifierValue<number>;
+  };
+  /**
+   * Let points be selected, and a selection be moved as one. A selection
+   * updates several points in the same tick.
+   */
+  selectable: BooleanConstructor;
+  /** Ids of the selected points. Bind it with `v-model:selection`. */
+  selection: PropType<string[]>;
+}>> & Readonly<{
+  "onUpdate:selection"?: ((selection: string[]) => any) | undefined;
+}>, {
+  wheel: ModifierValue<InputEventOption> | null;
+  disabled: boolean;
+  keyboard: ModifierValue<InputEventOption> | null;
+  dragSensitivity: ModifierValue<number>;
+  readonly: boolean;
+  selectable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/PointsEditor/PointsEditorBackground.d.ts
+/**
+ * Behind the points, filling the editor. The order of the layers holds
+ * whichever way they are written, so the z-index is part of the mechanics.
+ */
+export declare const PointsEditorBackground: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/PointsEditor/PointsEditorContainer.d.ts
+/** The layer the points are placed in, over the background. */
+export declare const PointsEditorContainer: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/PointsEditor/PointsEditorPoint.d.ts
+type PerAxis$1 = string | Partial<Record<'x' | 'y', string>>;
+/** One point, bound with `v-model` as `{ x, y }` from 0 to 1. */
+export declare const PointsEditorPoint: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Where the point is, with `y` growing downwards. Bind it with `v-model`. */
+  modelValue: {
+    type: PropType<PointPosition>;
+    required: true;
+  };
+  /** How the selection refers to this point. One is generated when left out. */
+  id: StringConstructor;
+  /** The lowest position the point can take, per axis. */
+  min: PropType<Partial<PointPosition>>;
+  /** The highest position the point can take, per axis. */
+  max: PropType<Partial<PointPosition>>;
+  /** Sets `--color`, for the theme to colour the point with. */
+  color: StringConstructor;
+  /** Overrides the `disabled` of `PointsEditor`. */
+  disabled: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  /** Overrides the `readonly` of `PointsEditor`. */
+  readonly: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  /** Overrides the `wheel` of `PointsEditor`; `null` turns it off. */
+  wheel: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: undefined;
+  };
+  /** Overrides the `keyboard` of `PointsEditor`; `null` turns it off. */
+  keyboard: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: undefined;
+  };
+  /** The accessible name of each axis, or one for both. */
+  ariaLabel: PropType<PerAxis$1>;
+  /** What the value of each axis means, or one for both. */
+  ariaValuetext: PropType<PerAxis$1>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'update:modelValue': (value: PointPosition) => boolean;
+  dragStart: (value: PointPosition) => boolean;
+  dragEnd: (value: PointPosition) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** Where the point is, with `y` growing downwards. Bind it with `v-model`. */
+  modelValue: {
+    type: PropType<PointPosition>;
+    required: true;
+  };
+  /** How the selection refers to this point. One is generated when left out. */
+  id: StringConstructor;
+  /** The lowest position the point can take, per axis. */
+  min: PropType<Partial<PointPosition>>;
+  /** The highest position the point can take, per axis. */
+  max: PropType<Partial<PointPosition>>;
+  /** Sets `--color`, for the theme to colour the point with. */
+  color: StringConstructor;
+  /** Overrides the `disabled` of `PointsEditor`. */
+  disabled: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  /** Overrides the `readonly` of `PointsEditor`. */
+  readonly: {
+    type: BooleanConstructor;
+    default: undefined;
+  };
+  /** Overrides the `wheel` of `PointsEditor`; `null` turns it off. */
+  wheel: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: undefined;
+  };
+  /** Overrides the `keyboard` of `PointsEditor`; `null` turns it off. */
+  keyboard: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: undefined;
+  };
+  /** The accessible name of each axis, or one for both. */
+  ariaLabel: PropType<PerAxis$1>;
+  /** What the value of each axis means, or one for both. */
+  ariaValuetext: PropType<PerAxis$1>;
+}>> & Readonly<{
+  "onUpdate:modelValue"?: ((value: PointPosition) => any) | undefined;
+  onDragStart?: ((value: PointPosition) => any) | undefined;
+  onDragEnd?: ((value: PointPosition) => any) | undefined;
+}>, {
+  wheel: ModifierValue<InputEventOption> | null;
+  disabled: boolean;
+  keyboard: ModifierValue<InputEventOption> | null;
+  readonly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/PointsEditor/PointsEditorSelectionBox.d.ts
+/**
+ * The box a drag on empty space draws. Nothing is rendered while no drag is
+ * running, and it takes none of the pointer.
+ */
+export declare const PointsEditorSelectionBox: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/Slider/context.d.ts
+/** What `Slider` shares with its parts. The fields are getters. */
+interface SliderContextValue {
+  readonly value: number;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+  readonly scale: Scale;
+  readonly vertical: boolean;
+  readonly reverse: boolean;
+  readonly disabled: boolean;
+  readonly readonly: boolean;
+  /** Where the value sits along the track, as a percentage from the top or left. */
+  readonly percent: number;
+  /** Set the value, as an input on the slider would. */
+  change: (value: number) => void;
+  /** @internal `SliderTrack` registers the element the pointer is measured against. */
+  setTrack: (element: HTMLElement | null) => void;
+  /** @internal `SliderThumb` registers the input the focus goes to. */
+  setThumb: (input: HTMLInputElement | null) => void;
+}
+/** The context of the enclosing `Slider`, for a part of your own. */
+export declare function useSliderContext(): SliderContextValue;
+//#endregion
+//#region src/components/Slider/Slider.d.ts
+/** Customizable slider. Bind the value with `v-model`. */
+export declare const Slider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** The current value. Bind it with `v-model`. */
+  modelValue: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** The value at the start of the travel. */
+  min: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** The value at the end of the travel. */
+  max: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** Granularity of the value. @default 1 */
+  step: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** How the value is distributed across the travel. @default linearScale */
+  scale: {
+    type: PropType<Scale>;
+    default: () => Scale;
+  };
+  /** Run the slider vertically, with the value growing upwards. */
+  vertical: BooleanConstructor;
+  /** Grow the value the other way. */
+  reverse: BooleanConstructor;
+  /** The cursor to show while dragging. @default { cursor: 'pointer' } */
+  externalStyles: PropType<{
+    cursor?: string;
+  }>;
+  wheel: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption>;
+  };
+  keyboard: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption>;
+  };
+  dragSensitivity: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<number>>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<number>;
+  };
+  /** Make the slider unchangeable and remove it from the tab order. */
+  disabled: BooleanConstructor;
+  /** Make the value unchangeable. */
+  readonly: BooleanConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'update:modelValue': (value: number) => boolean;
+  /** A drag started, with the value where the track was pressed. */
+  dragStart: (value: number) => boolean;
+  /** The drag ended, with the value it ended on. */
+  dragEnd: (value: number) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** The current value. Bind it with `v-model`. */
+  modelValue: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** The value at the start of the travel. */
+  min: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** The value at the end of the travel. */
+  max: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** Granularity of the value. @default 1 */
+  step: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** How the value is distributed across the travel. @default linearScale */
+  scale: {
+    type: PropType<Scale>;
+    default: () => Scale;
+  };
+  /** Run the slider vertically, with the value growing upwards. */
+  vertical: BooleanConstructor;
+  /** Grow the value the other way. */
+  reverse: BooleanConstructor;
+  /** The cursor to show while dragging. @default { cursor: 'pointer' } */
+  externalStyles: PropType<{
+    cursor?: string;
+  }>;
+  wheel: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption>;
+  };
+  keyboard: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption>;
+  };
+  dragSensitivity: {
+    type: PropType<import("@tremolo-ui/dom").ModifierValue<number>>;
+    default: () => import("@tremolo-ui/dom").ModifierValue<number>;
+  };
+  /** Make the slider unchangeable and remove it from the tab order. */
+  disabled: BooleanConstructor;
+  /** Make the value unchangeable. */
+  readonly: BooleanConstructor;
+}>> & Readonly<{
+  "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+  onDragStart?: ((value: number) => any) | undefined;
+  onDragEnd?: ((value: number) => any) | undefined;
+}>, {
+  reverse: boolean;
+  wheel: import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null;
+  disabled: boolean;
+  step: number;
+  vertical: boolean;
+  keyboard: import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null;
+  dragSensitivity: import("@tremolo-ui/dom").ModifierValue<number>;
+  readonly: boolean;
+  scale: Scale;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/Slider/SliderMarks.d.ts
+/** The marks along the slider: written out as options, or built from `options`. */
+export declare const SliderMarks: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Space between the marks and the track. Sets `--gap`. */
+  gap: (NumberConstructor | StringConstructor)[];
+  /**
+   * Build the marks instead of writing `SliderMarksOption` out: a number
+   * puts one every that many, `'step'` one every `step`. The default slot
+   * is ignored while it is set.
+   */
+  options: PropType<MarksOptions>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** Space between the marks and the track. Sets `--gap`. */
+  gap: (NumberConstructor | StringConstructor)[];
+  /**
+   * Build the marks instead of writing `SliderMarksOption` out: a number
+   * puts one every that many, `'step'` one every `step`. The default slot
+   * is ignored while it is set.
+   */
+  options: PropType<MarksOptions>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/Slider/SliderMarksOption.d.ts
+/** One mark along the slider, and its label. */
+export declare const SliderMarksOption: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Where the mark sits, on the same scale as the thumb. */
+  value: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** Draw the mark itself. @default true */
+  mark: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /**
+   * Text shown next to the mark. Leave it out to show the value; `null`
+   * leaves the label out.
+   */
+  label: {
+    type: PropType<number | string | null>;
+    default: undefined;
+  };
+  /** Thickness of the mark. Sets `--thickness`. */
+  thickness: (NumberConstructor | StringConstructor)[];
+  /** Length of the mark. Sets `--length`. */
+  length: (NumberConstructor | StringConstructor)[];
+  /** Space between the mark and the label. Sets `--gap`. */
+  gap: (NumberConstructor | StringConstructor)[];
+  /** Classes for the mark and the label inside the option. */
+  classes: PropType<{
+    mark?: string;
+    label?: string;
+  }>;
+  /** Styles for the mark and the label inside the option. */
+  styles: PropType<{
+    mark?: string;
+    label?: string;
+  }>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** Where the mark sits, on the same scale as the thumb. */
+  value: {
+    type: NumberConstructor;
+    required: true;
+  };
+  /** Draw the mark itself. @default true */
+  mark: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  /**
+   * Text shown next to the mark. Leave it out to show the value; `null`
+   * leaves the label out.
+   */
+  label: {
+    type: PropType<number | string | null>;
+    default: undefined;
+  };
+  /** Thickness of the mark. Sets `--thickness`. */
+  thickness: (NumberConstructor | StringConstructor)[];
+  /** Length of the mark. Sets `--length`. */
+  length: (NumberConstructor | StringConstructor)[];
+  /** Space between the mark and the label. Sets `--gap`. */
+  gap: (NumberConstructor | StringConstructor)[];
+  /** Classes for the mark and the label inside the option. */
+  classes: PropType<{
+    mark?: string;
+    label?: string;
+  }>;
+  /** Styles for the mark and the label inside the option. */
+  styles: PropType<{
+    mark?: string;
+    label?: string;
+  }>;
+}>> & Readonly<{}>, {
+  label: string | number | null;
+  mark: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/Slider/SliderThumb.d.ts
+/**
+ * The thumb, placed at the value. The ARIA (`aria-label` and friends) lands
+ * on the range input inside it, which is the control and takes the focus.
+ */
+export declare const SliderThumb: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Sets `--color`, for the theme to colour the thumb with. */
+  color: StringConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** Sets `--color`, for the theme to colour the thumb with. */
+  color: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/Slider/SliderTrack.d.ts
+/** The track the thumb runs along, and what the pointer is measured against. */
+export declare const SliderTrack: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** How long the track is along the axis the slider runs. Sets `--length`. */
+  length: (NumberConstructor | StringConstructor)[];
+  /** How thick the track is across that axis. Sets `--thickness`. */
+  thickness: (NumberConstructor | StringConstructor)[];
+  /** Colour of the part from `min` to the value. Sets `--active`. */
+  active: StringConstructor;
+  /** Colour of the rest of the track. Sets `--inactive`. */
+  inactive: StringConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** How long the track is along the axis the slider runs. Sets `--length`. */
+  length: (NumberConstructor | StringConstructor)[];
+  /** How thick the track is across that axis. Sets `--thickness`. */
+  thickness: (NumberConstructor | StringConstructor)[];
+  /** Colour of the part from `min` to the value. Sets `--active`. */
+  active: StringConstructor;
+  /** Colour of the rest of the track. Sets `--inactive`. */
+  inactive: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/XYPad/context.d.ts
+/** What `XYPad` shares with its parts. The fields are getters. */
+interface XYPadContextValue {
+  readonly value: XY<number>;
+  readonly min: XY<number>;
+  readonly max: XY<number>;
+  readonly step: XY<number>;
+  readonly scale: XY<Scale>;
+  readonly reverse: XY<boolean>;
+  readonly disabled: boolean;
+  readonly readonly: boolean;
+  /** Where the value sits in the area, as percentages from the left and top. */
+  readonly percent: XY<number>;
+  /** Set the value, as an input on the pad would. */
+  change: (value: XY<number>) => void;
+  /** @internal `XYPadArea` registers the element the pointer is measured against. */
+  setArea: (element: HTMLElement | null) => void;
+  /** @internal `XYPadThumb` registers the input the focus goes to. */
+  setThumb: (input: HTMLInputElement | null) => void;
+}
+/** The context of the enclosing `XYPad`, for a part of your own. */
+export declare function useXYPadContext(): XYPadContextValue;
+//#endregion
+//#region src/components/XYPad/XYPad.d.ts
+/**
+ * Two-dimensional slider. The per-axis settings are `[x, y]` tuples, and a
+ * plain value applies to both axes. Bind the value with `v-model`.
+ */
+export declare const XYPad: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** The current value as `[x, y]`. Bind it with `v-model`. */
+  modelValue: {
+    type: PropType<XY<number>>;
+    required: true;
+  };
+  /** The value at the start of the travel, per axis. */
+  min: {
+    type: PropType<XYInput<number>>;
+    required: true;
+  };
+  /** The value at the end of the travel, per axis. */
+  max: {
+    type: PropType<XYInput<number>>;
+    required: true;
+  };
+  /** Granularity of the value, per axis. @default 1 */
+  step: {
+    type: PropType<XYInput<number>>;
+    default: number;
+  };
+  /** How the value is distributed, per axis. @default linearScale */
+  scale: {
+    type: PropType<XYInput<Scale>>;
+    default: () => Scale;
+  };
+  /** Grow the value the other way, per axis. `y` grows downwards unless reversed. */
+  reverse: {
+    type: PropType<XYInput<boolean>>;
+    default: boolean;
+  };
+  /** The cursor to show while dragging. @default { cursor: 'pointer' } */
+  externalStyles: PropType<{
+    cursor?: string;
+  }>;
+  wheel: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  keyboard: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  dragSensitivity: {
+    type: PropType<ModifierValue<number>>;
+    default: () => ModifierValue<number>;
+  };
+  /** Make the pad unchangeable and remove it from the tab order. */
+  disabled: BooleanConstructor;
+  /** Make the value unchangeable. */
+  readonly: BooleanConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'update:modelValue': (value: XY<number>) => boolean;
+  dragStart: (value: XY<number>) => boolean;
+  dragEnd: (value: XY<number>) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** The current value as `[x, y]`. Bind it with `v-model`. */
+  modelValue: {
+    type: PropType<XY<number>>;
+    required: true;
+  };
+  /** The value at the start of the travel, per axis. */
+  min: {
+    type: PropType<XYInput<number>>;
+    required: true;
+  };
+  /** The value at the end of the travel, per axis. */
+  max: {
+    type: PropType<XYInput<number>>;
+    required: true;
+  };
+  /** Granularity of the value, per axis. @default 1 */
+  step: {
+    type: PropType<XYInput<number>>;
+    default: number;
+  };
+  /** How the value is distributed, per axis. @default linearScale */
+  scale: {
+    type: PropType<XYInput<Scale>>;
+    default: () => Scale;
+  };
+  /** Grow the value the other way, per axis. `y` grows downwards unless reversed. */
+  reverse: {
+    type: PropType<XYInput<boolean>>;
+    default: boolean;
+  };
+  /** The cursor to show while dragging. @default { cursor: 'pointer' } */
+  externalStyles: PropType<{
+    cursor?: string;
+  }>;
+  wheel: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  keyboard: {
+    type: PropType<ModifierValue<InputEventOption> | null>;
+    default: () => ModifierValue<InputEventOption>;
+  };
+  dragSensitivity: {
+    type: PropType<ModifierValue<number>>;
+    default: () => ModifierValue<number>;
+  };
+  /** Make the pad unchangeable and remove it from the tab order. */
+  disabled: BooleanConstructor;
+  /** Make the value unchangeable. */
+  readonly: BooleanConstructor;
+}>> & Readonly<{
+  "onUpdate:modelValue"?: ((value: XY<number>) => any) | undefined;
+  onDragStart?: ((value: XY<number>) => any) | undefined;
+  onDragEnd?: ((value: XY<number>) => any) | undefined;
+}>, {
+  reverse: boolean | readonly [x: boolean, y: boolean];
+  wheel: ModifierValue<InputEventOption> | null;
+  disabled: boolean;
+  step: number | readonly [x: number, y: number];
+  keyboard: ModifierValue<InputEventOption> | null;
+  dragSensitivity: ModifierValue<number>;
+  readonly: boolean;
+  scale: Scale | readonly [x: Scale, y: Scale];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/XYPad/XYPadArea.d.ts
+/** The area the thumb moves in, and what the pointer is measured against. */
+export declare const XYPadArea: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/components/XYPad/XYPadThumb.d.ts
+type PerAxis = XYInput<string | undefined>;
+/** The thumb, placed at the value, with one range input per axis inside. */
+export declare const XYPadThumb: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Sets `--color`, for the theme to colour the thumb with. */
+  color: StringConstructor;
+  /** The accessible name of each axis, as `[x, y]`. */
+  ariaLabel: PropType<PerAxis>;
+  /** The ids of what labels each axis, as `[x, y]` or one for both. */
+  ariaLabelledby: PropType<PerAxis>;
+  /** The ids of what describes each axis, as `[x, y]` or one for both. */
+  ariaDescribedby: PropType<PerAxis>;
+  /** What the value of each axis means, as `[x, y]` or one for both. */
+  ariaValuetext: PropType<PerAxis>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** Sets `--color`, for the theme to colour the thumb with. */
+  color: StringConstructor;
+  /** The accessible name of each axis, as `[x, y]`. */
+  ariaLabel: PropType<PerAxis>;
+  /** The ids of what labels each axis, as `[x, y]` or one for both. */
+  ariaLabelledby: PropType<PerAxis>;
+  /** The ids of what describes each axis, as `[x, y]` or one for both. */
+  ariaDescribedby: PropType<PerAxis>;
+  /** What the value of each axis means, as `[x, y]` or one for both. */
+  ariaValuetext: PropType<PerAxis>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/composables/useDrag.d.ts
+/**
+ * Track a pointer drag on an element. See `createDrag` in `@tremolo-ui/dom`
+ * for the options.
+ *
+ * @example
+ * const el = useTemplateRef('el')
+ * useDrag(el, { onDrag: (state) => (x.value += state.deltaX) })
+ */
+export declare function useDrag(target: MaybeRefOrGetter<Element | null | undefined>, options?: MaybeRefOrGetter<DragOptions>): void;
+//#endregion
+//#region src/composables/useDragValue.d.ts
+/**
+ * Drive a value with a pointer drag. See `createDragValue` in
+ * `@tremolo-ui/dom` for the options; `elementMapping` and `relativeMapping`
+ * from there choose how the pointer becomes a value. `mapping` is read when
+ * the element is attached.
+ */
+export declare function useDragValue(target: MaybeRefOrGetter<Element | null | undefined>, options: MaybeRefOrGetter<DragValueOptions>): void;
+//#endregion
+//#region src/composables/useDropZone.d.ts
+/**
+ * Take files dropped on an element. See `createDropZone` in
+ * `@tremolo-ui/dom`. Returns whether files are over it, and whether they
+ * would be refused, for styling it while they are.
+ */
+export declare function useDropZone(target: MaybeRefOrGetter<Element | null | undefined>, options?: MaybeRefOrGetter<DropZoneOptions>): import("vue").ShallowRef<DropZoneState, DropZoneState>;
+//#endregion
+//#region src/composables/useLongPress.d.ts
+/**
+ * Repeat `onPress` while a pointer is held down: once on the press, then
+ * every `interval` after `delay`. See `createLongPress` in `@tremolo-ui/dom`.
+ *
+ * Returns the function that starts a press, for `@pointerdown`.
+ */
+export declare function useLongPress(options: MaybeRefOrGetter<LongPressOptions>): (event?: Pick<PointerEvent, "button" | "pointerId">) => void;
+//#endregion
+//#region src/composables/useMIDIAccess.d.ts
+/**
+ * Request MIDI access in the browser. Call it during `setup`.
+ *
+ * `state` holds the access, the error and the connected inputs, and follows
+ * devices as they are plugged in and unplugged.
+ *
+ * @param requestOnMount ask for access once the component is mounted — never
+ * during server rendering, where there is no MIDI to ask for. Leave it off to
+ * ask from a click instead, so that opening a page does not bring up a
+ * permission prompt. A ref or a getter asks once it turns true.
+ */
+export declare function useMIDIAccess(requestOnMount?: MaybeRefOrGetter<boolean>): {
+  state: import("vue").ComputedRef<MIDIAccessState>;
+  /**
+   * Ask for access. Takes `{ sysex: true }` when the app needs system
+   * exclusive messages, which browsers treat as a separate permission.
+   */
+  request: (options?: MIDIAccessOptions) => void;
+};
+//#endregion
+//#region src/composables/useMIDIInput.d.ts
+/**
+ * Handle the channel voice messages of every connected input. Call it during
+ * `setup`. See `createMIDIInput` in `@tremolo-ui/dom` for the handlers.
+ *
+ * The listeners follow `midiAccess` as it is granted, and new handlers
+ * replace the old ones without re-subscribing.
+ */
+export declare function useMIDIInput(midiAccess: MaybeRefOrGetter<MIDIAccess | null>, handlers: MaybeRefOrGetter<MIDIInputHandlers>): void;
+//#endregion
+//#region src/composables/useMIDIMessage.d.ts
+/**
+ * Listen to raw `midimessage` events on every input. Call it during `setup`.
+ * For note and controller events, `useMIDIInput` decodes the message for you.
+ */
+export declare function useMIDIMessage(midiAccess: MaybeRefOrGetter<MIDIAccess | null>, onMIDIMessage: MaybeRefOrGetter<(event: MIDIMessageEvent) => void>): void;
+//#endregion
+//#region src/composables/useWheel.d.ts
+/**
+ * Listen to the wheel on an element, as a non-passive listener so that
+ * `preventDefault()` can keep the page from scrolling. See `createWheel` in
+ * `@tremolo-ui/dom`.
+ */
+export declare function useWheel(target: MaybeRefOrGetter<Element | null | undefined>, onWheel: (event: WheelEvent) => void, options?: MaybeRefOrGetter<WheelOptions>): void;
+//#endregion
+export type { DrawFunction, FileInputContextValue, InitFunction, KeyAttributes, KeyState, KnobContextValue, NumberInputContextValue, PointsEditorContextValue, SliderContextValue, XYPadContextValue };
+//# sourceMappingURL=index.d.cts.map