@tremolo-ui/vue 0.7.0 → 0.9.0

package/dist/index.d.ts

@@ -1,23 +1,51 @@
-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 { ExtractPublicPropTypes, HTMLAttributes, MaybeRefOrGetter, PropType, SlotsType } from "vue";
+import { CanvasDrawFunction, CanvasInitFunction, ChangeSource, DragOptions, DragValueOptions, DropZoneOptions, DropZoneState, InputEventOption, KeyboardShortcuts, KeyboardShortcutsScope, KnobAngles, LongPressOptions, MIDIAccessOptions, MIDIAccessState, MIDIInputHandlers, MarksOptions, ModifierState, ModifierValue, NoteRange, PointPosition, PointsEditorInstance, SelectionBoxRect, WheelOptions, XY, XYInput } from "@tremolo-ui/dom";
+import { parseNumberText } from "@tremolo-ui/dom/internal";
 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;
+declare const animationCanvasProps: {
+  /** Draws a frame. */
+  draw: {
+    type: PropType<CanvasDrawFunction>;
+    required: true;
+  };
+  /** Sets the canvas up, once, before the first frame. */
+  init: PropType<CanvasInitFunction>;
+  /** 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;
+  };
+};
+type AnimationCanvasProps = ExtractPublicPropTypes<typeof animationCanvasProps>;
 /** 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>;
+    type: PropType<CanvasDrawFunction>;
     required: true;
   };
-  /** Sets the canvas up before the first frame and after a resize. */
-  init: PropType<InitFunction>;
+  /** Sets the canvas up, once, before the first frame. */
+  init: PropType<CanvasInitFunction>;
   /** Draw on every animation frame. @default true */
   animate: {
     type: BooleanConstructor;
@@ -47,11 +75,11 @@ export declare const AnimationCanvas: import("vue").DefineComponent<import("vue"
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   /** Draws a frame. */
   draw: {
-    type: PropType<DrawFunction>;
+    type: PropType<CanvasDrawFunction>;
     required: true;
   };
-  /** Sets the canvas up before the first frame and after a resize. */
-  init: PropType<InitFunction>;
+  /** Sets the canvas up, once, before the first frame. */
+  init: PropType<CanvasInitFunction>;
   /** Draw on every animation frame. @default true */
   animate: {
     type: BooleanConstructor;
@@ -77,14 +105,23 @@ export declare const AnimationCanvas: import("vue").DefineComponent<import("vue"
     default: number;
   };
 }>> & Readonly<{}>, {
-  resizable: boolean;
   animate: boolean;
   reduceFlickering: boolean;
+  resizable: boolean;
   width: number;
   height: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 //#region src/components/DropZone/DropZone.d.ts
+declare const dropZoneProps: {
+  /** 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;
+};
+type DropZoneProps = ExtractPublicPropTypes<typeof dropZoneProps>;
 /** 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. */
@@ -126,6 +163,19 @@ interface FileInputContextValue {
 export declare function useFileInputContext(): FileInputContextValue;
 //#endregion
 //#region src/components/FileInput/FileInput.d.ts
+declare const fileInputProps: {
+  /**
+   * 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;
+};
+type FileInputProps = ExtractPublicPropTypes<typeof fileInputProps>;
 /**
  * Picks files. The control is the native file input, out of sight but in the
  * tab order, with `FileInputTrigger` as its label.
@@ -198,6 +248,86 @@ interface KnobContextValue {
 export declare function useKnobContext(): KnobContextValue;
 //#endregion
 //#region src/components/Knob/Knob.d.ts
+declare const knobProps: {
+  /** 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. `null` turns the double click off.
+   * @default startValue
+   */
+  resetValue: {
+    type: PropType<number | null>;
+    default: undefined;
+  };
+  /** 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 'grabbing' */
+  dragCursor: {
+    type: StringConstructor;
+    default: 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;
+  /** Make the knob unchangeable and remove it from the tab order. */
+  disabled: BooleanConstructor;
+  /** Make the knob unchangeable while leaving it focusable. */
+  readonly: BooleanConstructor;
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** How far the knob turns from `min` to `max`, in degrees. @default 270 */
+  angleRange: {
+    type: NumberConstructor;
+    default: number;
+  };
+};
+type KnobProps = ExtractPublicPropTypes<typeof knobProps>;
 /**
  * Interactive rotary knob, drawn in SVG by `KnobSVGRoot` and the parts inside
  * it. Bind the value with `v-model`.
@@ -228,16 +358,23 @@ export declare const Knob: import("vue").DefineComponent<import("vue").ExtractPr
     type: PropType<Scale>;
     default: () => Scale;
   };
-  /** The value a double click restores. @default min */
-  defaultValue: NumberConstructor;
+  /**
+   * The value a double click restores. `null` turns the double click off.
+   * @default startValue
+   */
+  resetValue: {
+    type: PropType<number | null>;
+    default: undefined;
+  };
   /** 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;
-  }>;
+  /** The cursor to show while dragging. @default 'grabbing' */
+  dragCursor: {
+    type: StringConstructor;
+    default: string;
+  };
   /** How much one notch of the wheel moves the value. `null` turns it off. */
   wheel: {
     type: PropType<ModifierValue<InputEventOption> | null>;
@@ -255,15 +392,19 @@ export declare const Knob: import("vue").DefineComponent<import("vue").ExtractPr
   };
   /** 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 long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
   /** How far the knob turns from `min` to `max`, in degrees. @default 270 */
   angleRange: {
     type: NumberConstructor;
@@ -273,6 +414,13 @@ export declare const Knob: import("vue").DefineComponent<import("vue").ExtractPr
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
   'update:modelValue': (value: number) => boolean;
+  /**
+   * A change of the value started, with the value before it and what it is
+   * made with.
+   */
+  changeStart: (value: number, _source: ChangeSource) => boolean;
+  /** The change ended, with the value it ended on. */
+  changeEnd: (value: number, _source: ChangeSource) => boolean;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   /** The current value. Bind it with `v-model`. */
   modelValue: {
@@ -299,16 +447,23 @@ export declare const Knob: import("vue").DefineComponent<import("vue").ExtractPr
     type: PropType<Scale>;
     default: () => Scale;
   };
-  /** The value a double click restores. @default min */
-  defaultValue: NumberConstructor;
+  /**
+   * The value a double click restores. `null` turns the double click off.
+   * @default startValue
+   */
+  resetValue: {
+    type: PropType<number | null>;
+    default: undefined;
+  };
   /** 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;
-  }>;
+  /** The cursor to show while dragging. @default 'grabbing' */
+  dragCursor: {
+    type: StringConstructor;
+    default: string;
+  };
   /** How much one notch of the wheel moves the value. `null` turns it off. */
   wheel: {
     type: PropType<ModifierValue<InputEventOption> | null>;
@@ -326,15 +481,19 @@ export declare const Knob: import("vue").DefineComponent<import("vue").ExtractPr
   };
   /** 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 long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
   /** How far the knob turns from `min` to `max`, in degrees. @default 270 */
   angleRange: {
     type: NumberConstructor;
@@ -342,16 +501,20 @@ export declare const Knob: import("vue").DefineComponent<import("vue").ExtractPr
   };
 }>> & Readonly<{
   "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+  onChangeStart?: ((value: number, _source: ChangeSource) => any) | undefined;
+  onChangeEnd?: ((value: number, _source: ChangeSource) => any) | undefined;
 }>, {
   wheel: ModifierValue<InputEventOption> | null;
-  disabled: boolean;
   step: number;
+  disabled: boolean;
+  scale: Scale;
+  dragCursor: string;
   keyboard: ModifierValue<InputEventOption> | null;
   dragSensitivity: ModifierValue<number>;
   readonly: boolean;
-  scale: Scale;
+  changeEndDelay: number;
   pointerLock: boolean;
-  enableDoubleClickDefault: boolean;
+  resetValue: number | null;
   angleRange: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
@@ -422,75 +585,107 @@ export declare const KnobSVGRoot: import("vue").DefineComponent<{}, () => import
 }>, {}, {}, {}, 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
+declare const knobThumbProps: {
+  /** Fill colour of the circle. @default 'currentColor' */
+  color: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Colour of the line that points at the value. @default 'currentColor' */
+  lineColor: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** Diameter of the circle, as a percentage of the knob. @default 84 */
+  size: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Thickness of the line, as a percentage of the knob. @default 6 */
+  lineWeight: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** How far down the line reaches, as a percentage. @default 35 */
+  lineLength: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** Classes for the line that points at the value. */
+  classes: PropType<{
+    line?: string;
+  }>;
+};
+type KnobThumbProps = ExtractPublicPropTypes<typeof knobThumbProps>;
 /** 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: {
+  color: {
     type: StringConstructor;
     default: string;
   };
   /** Colour of the line that points at the value. @default 'currentColor' */
-  thumbLine: {
+  lineColor: {
     type: StringConstructor;
     default: string;
   };
   /** Diameter of the circle, as a percentage of the knob. @default 84 */
-  thumbSize: {
+  size: {
     type: NumberConstructor;
     default: number;
   };
   /** Thickness of the line, as a percentage of the knob. @default 6 */
-  thumbLineWeight: {
+  lineWeight: {
     type: NumberConstructor;
     default: number;
   };
   /** How far down the line reaches, as a percentage. @default 35 */
-  thumbLineLength: {
+  lineLength: {
     type: NumberConstructor;
     default: number;
   };
   /** Classes for the line that points at the value. */
   classes: PropType<{
-    thumbLine?: string;
+    line?: 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: {
+  color: {
     type: StringConstructor;
     default: string;
   };
   /** Colour of the line that points at the value. @default 'currentColor' */
-  thumbLine: {
+  lineColor: {
     type: StringConstructor;
     default: string;
   };
   /** Diameter of the circle, as a percentage of the knob. @default 84 */
-  thumbSize: {
+  size: {
     type: NumberConstructor;
     default: number;
   };
   /** Thickness of the line, as a percentage of the knob. @default 6 */
-  thumbLineWeight: {
+  lineWeight: {
     type: NumberConstructor;
     default: number;
   };
   /** How far down the line reaches, as a percentage. @default 35 */
-  thumbLineLength: {
+  lineLength: {
     type: NumberConstructor;
     default: number;
   };
   /** Classes for the line that points at the value. */
   classes: PropType<{
-    thumbLine?: string;
+    line?: string;
   }>;
 }>> & Readonly<{}>, {
-  thumb: string;
-  thumbLine: string;
-  thumbSize: number;
-  thumbLineWeight: number;
-  thumbLineLength: number;
+  color: string;
+  size: number;
+  lineColor: string;
+  lineWeight: number;
+  lineLength: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 //#region src/components/NumberInput/context.d.ts
@@ -506,6 +701,7 @@ interface NumberInputContextValue {
   readonly drag: number | null;
   readonly dragSensitivity: ModifierValue<number>;
   readonly pointerLock: boolean;
+  readonly dragCursor: string;
   readonly selectOnFocus: 'all' | 'number' | 'none';
   readonly unformatOnFocus: boolean;
   readonly keepCaretOnStep: boolean;
@@ -534,8 +730,7 @@ interface NumberInputContextValue {
 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<{
+declare const numberInputProps: {
   /** The current value. Bind it with `v-model`. */
   modelValue: {
     type: NumberConstructor;
@@ -589,6 +784,11 @@ export declare const NumberInput: import("vue").DefineComponent<import("vue").Ex
   };
   /** Hide the cursor while dragging the stepper. */
   pointerLock: BooleanConstructor;
+  /** The cursor to show while dragging the stepper. @default 'ns-resize' */
+  dragCursor: {
+    type: StringConstructor;
+    default: string;
+  };
   /** Select the text when the field takes focus. @default 'none' */
   selectOnFocus: {
     type: PropType<"all" | "number" | "none">;
@@ -607,11 +807,19 @@ export declare const NumberInput: import("vue").DefineComponent<import("vue").Ex
   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<{
+  /**
+   * How long after the last wheel notch, arrow key or typed character a change
+   * counts as over, in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
+};
+type NumberInputProps = ExtractPublicPropTypes<typeof numberInputProps>;
+/** 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;
@@ -665,6 +873,11 @@ export declare const NumberInput: import("vue").DefineComponent<import("vue").Ex
   };
   /** Hide the cursor while dragging the stepper. */
   pointerLock: BooleanConstructor;
+  /** The cursor to show while dragging the stepper. @default 'ns-resize' */
+  dragCursor: {
+    type: StringConstructor;
+    default: string;
+  };
   /** Select the text when the field takes focus. @default 'none' */
   selectOnFocus: {
     type: PropType<"all" | "number" | "none">;
@@ -683,52 +896,163 @@ export declare const NumberInput: import("vue").DefineComponent<import("vue").Ex
   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, {
+  /**
+   * How long after the last wheel notch, arrow key or typed character a change
+   * counts as over, in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    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<{}> & 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.
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  'update:modelValue': (value: number) => boolean;
+  /**
+   * A change of the value started — a press on a stepper, the first wheel
+   * notch, arrow key or typed character — with the value before it and what
+   * it is made with.
+   */
+  changeStart: (value: number, _source: ChangeSource) => boolean;
+  /** The change ended, with the value it ended on. */
+  changeEnd: (value: number, _source: ChangeSource) => 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;
+  /** The cursor to show while dragging the stepper. @default 'ns-resize' */
+  dragCursor: {
+    type: StringConstructor;
+    default: string;
+  };
+  /** 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;
+  /**
+   * How long after the last wheel notch, arrow key or typed character a change
+   * counts as over, in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
+}>> & Readonly<{
+  "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+  onChangeStart?: ((value: number, _source: ChangeSource) => any) | undefined;
+  onChangeEnd?: ((value: number, _source: ChangeSource) => any) | undefined;
+}>, {
+  drag: number | null;
+  wheel: import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null;
+  step: number;
+  disabled: boolean;
+  scale: Scale;
+  dragCursor: string;
+  keyboard: import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null;
+  dragSensitivity: import("@tremolo-ui/dom").ModifierValue<number>;
+  readonly: boolean;
+  changeEndDelay: number;
+  format: (value: number) => string;
+  parse: (text: string) => number;
+  clampValue: boolean;
+  pointerLock: boolean;
+  selectOnFocus: "number" | "none" | "all";
+  unformatOnFocus: boolean;
+  keepCaretOnStep: boolean;
+  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;
@@ -747,6 +1071,63 @@ interface KeyState {
 }
 /** What `keyProps` may return for one key. */
 type KeyAttributes = HTMLAttributes & Record<`data-${string}`, string | number | boolean | undefined>;
+declare const pianoProps: {
+  /** 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>;
+};
+type PianoProps = ExtractPublicPropTypes<typeof pianoProps>;
 /**
  * Customizable piano. The keys are drawn by the component; what goes inside
  * one is the `label` slot, which receives the note and its state.
@@ -895,7 +1276,7 @@ interface PointsEditorContextValue {
   readonly wheel: ModifierValue<InputEventOption> | null;
   readonly keyboard: ModifierValue<InputEventOption> | null;
   readonly dragSensitivity: ModifierValue<number>;
-  readonly cursor: string;
+  readonly dragCursor: string;
   readonly selectable: boolean;
   /** Ids of the selected points. Always empty while `selectable` is off. */
   readonly selection: readonly string[];
@@ -912,6 +1293,40 @@ interface PointsEditorContextValue {
 export declare function usePointsEditorContext(): PointsEditorContextValue;
 //#endregion
 //#region src/components/PointsEditor/PointsEditor.d.ts
+declare const pointsEditorProps: {
+  /** 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 'grabbing' */
+  dragCursor: {
+    type: StringConstructor;
+    default: 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[]>;
+};
+type PointsEditorProps = ExtractPublicPropTypes<typeof pointsEditorProps>;
 /**
  * Multiple point controller. Bind the selection with `v-model:selection` to
  * hold it yourself; the editor keeps its own otherwise.
@@ -921,10 +1336,11 @@ export declare const PointsEditor: import("vue").DefineComponent<import("vue").E
   disabled: BooleanConstructor;
   /** Make the points unmovable. */
   readonly: BooleanConstructor;
-  /** The cursor to show while dragging a point. @default { cursor: 'grabbing' } */
-  externalStyles: PropType<{
-    cursor?: string;
-  }>;
+  /** The cursor to show while dragging a point. @default 'grabbing' */
+  dragCursor: {
+    type: StringConstructor;
+    default: string;
+  };
   /** How much one wheel notch moves the focused point. */
   wheel: {
     type: PropType<ModifierValue<InputEventOption> | null>;
@@ -956,10 +1372,11 @@ export declare const PointsEditor: import("vue").DefineComponent<import("vue").E
   disabled: BooleanConstructor;
   /** Make the points unmovable. */
   readonly: BooleanConstructor;
-  /** The cursor to show while dragging a point. @default { cursor: 'grabbing' } */
-  externalStyles: PropType<{
-    cursor?: string;
-  }>;
+  /** The cursor to show while dragging a point. @default 'grabbing' */
+  dragCursor: {
+    type: StringConstructor;
+    default: string;
+  };
   /** How much one wheel notch moves the focused point. */
   wheel: {
     type: PropType<ModifierValue<InputEventOption> | null>;
@@ -987,6 +1404,7 @@ export declare const PointsEditor: import("vue").DefineComponent<import("vue").E
 }>, {
   wheel: ModifierValue<InputEventOption> | null;
   disabled: boolean;
+  dragCursor: string;
   keyboard: ModifierValue<InputEventOption> | null;
   dragSensitivity: ModifierValue<number>;
   readonly: boolean;
@@ -1010,6 +1428,55 @@ export declare const PointsEditorContainer: import("vue").DefineComponent<{}, ()
 //#endregion
 //#region src/components/PointsEditor/PointsEditorPoint.d.ts
 type PerAxis$1 = string | Partial<Record<'x' | 'y', string>>;
+declare const pointsEditorPointProps: {
+  /** 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;
+  };
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
+  /** 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>;
+};
+type PointsEditorPointProps = ExtractPublicPropTypes<typeof pointsEditorPointProps>;
 /** 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`. */
@@ -1035,6 +1502,15 @@ export declare const PointsEditorPoint: import("vue").DefineComponent<import("vu
     type: BooleanConstructor;
     default: undefined;
   };
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
   /** Overrides the `wheel` of `PointsEditor`; `null` turns it off. */
   wheel: {
     type: PropType<ModifierValue<InputEventOption> | null>;
@@ -1053,8 +1529,15 @@ export declare const PointsEditorPoint: import("vue").DefineComponent<import("vu
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
   'update:modelValue': (value: PointPosition) => boolean;
-  dragStart: (value: PointPosition) => boolean;
-  dragEnd: (value: PointPosition) => boolean;
+  /**
+   * A change of this point started — a drag on it, the first wheel notch or
+   * arrow key while it has the focus — with where it is and what the change
+   * is made with. The points that move along with a selection report
+   * through `update:modelValue` only.
+   */
+  changeStart: (value: PointPosition, _source: ChangeSource) => boolean;
+  /** The change ended, with where the point is. */
+  changeEnd: (value: PointPosition, _source: ChangeSource) => boolean;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   /** Where the point is, with `y` growing downwards. Bind it with `v-model`. */
   modelValue: {
@@ -1079,6 +1562,15 @@ export declare const PointsEditorPoint: import("vue").DefineComponent<import("vu
     type: BooleanConstructor;
     default: undefined;
   };
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
   /** Overrides the `wheel` of `PointsEditor`; `null` turns it off. */
   wheel: {
     type: PropType<ModifierValue<InputEventOption> | null>;
@@ -1095,13 +1587,14 @@ export declare const PointsEditorPoint: import("vue").DefineComponent<import("vu
   ariaValuetext: PropType<PerAxis$1>;
 }>> & Readonly<{
   "onUpdate:modelValue"?: ((value: PointPosition) => any) | undefined;
-  onDragStart?: ((value: PointPosition) => any) | undefined;
-  onDragEnd?: ((value: PointPosition) => any) | undefined;
+  onChangeStart?: ((value: PointPosition, _source: ChangeSource) => any) | undefined;
+  onChangeEnd?: ((value: PointPosition, _source: ChangeSource) => any) | undefined;
 }>, {
   wheel: ModifierValue<InputEventOption> | null;
   disabled: boolean;
   keyboard: ModifierValue<InputEventOption> | null;
   readonly: boolean;
+  changeEndDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 //#region src/components/PointsEditor/PointsEditorSelectionBox.d.ts
@@ -1121,7 +1614,7 @@ interface SliderContextValue {
   readonly max: number;
   readonly step: number;
   readonly scale: Scale;
-  readonly vertical: boolean;
+  readonly orientation: 'horizontal' | 'vertical';
   readonly reverse: boolean;
   readonly disabled: boolean;
   readonly readonly: boolean;
@@ -1138,6 +1631,74 @@ interface SliderContextValue {
 export declare function useSliderContext(): SliderContextValue;
 //#endregion
 //#region src/components/Slider/Slider.d.ts
+declare const sliderProps: {
+  /** 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;
+  };
+  /**
+   * Which way the slider runs. A vertical slider grows upwards.
+   * @default 'horizontal'
+   */
+  orientation: {
+    type: PropType<"horizontal" | "vertical">;
+    default: string;
+  };
+  /** Grow the value the other way. */
+  reverse: BooleanConstructor;
+  /** The cursor to show while dragging. @default 'pointer' */
+  dragCursor: {
+    type: StringConstructor;
+    default: 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;
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
+};
+type SliderProps = ExtractPublicPropTypes<typeof sliderProps>;
 /** 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`. */
@@ -1165,14 +1726,21 @@ export declare const Slider: import("vue").DefineComponent<import("vue").Extract
     type: PropType<Scale>;
     default: () => Scale;
   };
-  /** Run the slider vertically, with the value growing upwards. */
-  vertical: BooleanConstructor;
+  /**
+   * Which way the slider runs. A vertical slider grows upwards.
+   * @default 'horizontal'
+   */
+  orientation: {
+    type: PropType<"horizontal" | "vertical">;
+    default: string;
+  };
   /** Grow the value the other way. */
   reverse: BooleanConstructor;
-  /** The cursor to show while dragging. @default { cursor: 'pointer' } */
-  externalStyles: PropType<{
-    cursor?: string;
-  }>;
+  /** The cursor to show while dragging. @default 'pointer' */
+  dragCursor: {
+    type: StringConstructor;
+    default: 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>;
@@ -1189,14 +1757,26 @@ export declare const Slider: import("vue").DefineComponent<import("vue").Extract
   disabled: BooleanConstructor;
   /** Make the value unchangeable. */
   readonly: BooleanConstructor;
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    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;
-  /** 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;
+  /**
+   * A change of the value started, with the value before it and what it is
+   * made with.
+   */
+  changeStart: (value: number, _source: ChangeSource) => boolean;
+  /** The change ended, with the value it ended on. */
+  changeEnd: (value: number, _source: ChangeSource) => boolean;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   /** The current value. Bind it with `v-model`. */
   modelValue: {
@@ -1223,14 +1803,21 @@ export declare const Slider: import("vue").DefineComponent<import("vue").Extract
     type: PropType<Scale>;
     default: () => Scale;
   };
-  /** Run the slider vertically, with the value growing upwards. */
-  vertical: BooleanConstructor;
+  /**
+   * Which way the slider runs. A vertical slider grows upwards.
+   * @default 'horizontal'
+   */
+  orientation: {
+    type: PropType<"horizontal" | "vertical">;
+    default: string;
+  };
   /** Grow the value the other way. */
   reverse: BooleanConstructor;
-  /** The cursor to show while dragging. @default { cursor: 'pointer' } */
-  externalStyles: PropType<{
-    cursor?: string;
-  }>;
+  /** The cursor to show while dragging. @default 'pointer' */
+  dragCursor: {
+    type: StringConstructor;
+    default: 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>;
@@ -1247,23 +1834,45 @@ export declare const Slider: import("vue").DefineComponent<import("vue").Extract
   disabled: BooleanConstructor;
   /** Make the value unchangeable. */
   readonly: BooleanConstructor;
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
 }>> & Readonly<{
   "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-  onDragStart?: ((value: number) => any) | undefined;
-  onDragEnd?: ((value: number) => any) | undefined;
+  onChangeStart?: ((value: number, _source: ChangeSource) => any) | undefined;
+  onChangeEnd?: ((value: number, _source: ChangeSource) => any) | undefined;
 }>, {
   reverse: boolean;
   wheel: import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null;
-  disabled: boolean;
   step: number;
-  vertical: boolean;
+  disabled: boolean;
+  scale: Scale;
+  dragCursor: string;
   keyboard: import("@tremolo-ui/dom").ModifierValue<import("@tremolo-ui/dom").InputEventOption> | null;
   dragSensitivity: import("@tremolo-ui/dom").ModifierValue<number>;
   readonly: boolean;
-  scale: Scale;
+  changeEndDelay: number;
+  orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 //#region src/components/Slider/SliderMarks.d.ts
+declare const sliderMarksProps: {
+  /** 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>;
+};
+type SliderMarksProps = ExtractPublicPropTypes<typeof sliderMarksProps>;
 /** 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`. */
@@ -1288,6 +1897,43 @@ export declare const SliderMarks: import("vue").DefineComponent<import("vue").Ex
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 //#region src/components/Slider/SliderMarksOption.d.ts
+declare const sliderMarksOptionProps: {
+  /** 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;
+  }>;
+};
+type SliderMarksOptionProps = ExtractPublicPropTypes<typeof sliderMarksOptionProps>;
 /** 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. */
@@ -1367,6 +2013,11 @@ export declare const SliderMarksOption: import("vue").DefineComponent<import("vu
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 //#region src/components/Slider/SliderThumb.d.ts
+declare const sliderThumbProps: {
+  /** Sets `--color`, for the theme to colour the thumb with. */
+  color: StringConstructor;
+};
+type SliderThumbProps = ExtractPublicPropTypes<typeof sliderThumbProps>;
 /**
  * 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.
@@ -1382,16 +2033,27 @@ export declare const SliderThumb: import("vue").DefineComponent<import("vue").Ex
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 //#region src/components/Slider/SliderTrack.d.ts
+declare const sliderTrackProps: {
+  /** 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-color`. */
+  activeColor: StringConstructor;
+  /** Colour of the rest of the track. Sets `--inactive-color`. */
+  inactiveColor: StringConstructor;
+};
+type SliderTrackProps = ExtractPublicPropTypes<typeof sliderTrackProps>;
 /** 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;
+  /** Colour of the part from `min` to the value. Sets `--active-color`. */
+  activeColor: StringConstructor;
+  /** Colour of the rest of the track. Sets `--inactive-color`. */
+  inactiveColor: 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<{
@@ -1399,10 +2061,10 @@ export declare const SliderTrack: import("vue").DefineComponent<import("vue").Ex
   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;
+  /** Colour of the part from `min` to the value. Sets `--active-color`. */
+  activeColor: StringConstructor;
+  /** Colour of the rest of the track. Sets `--inactive-color`. */
+  inactiveColor: StringConstructor;
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 //#region src/components/XYPad/context.d.ts
@@ -1429,6 +2091,69 @@ interface XYPadContextValue {
 export declare function useXYPadContext(): XYPadContextValue;
 //#endregion
 //#region src/components/XYPad/XYPad.d.ts
+declare const xyPadProps: {
+  /** 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 'pointer' */
+  dragCursor: {
+    type: StringConstructor;
+    default: 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;
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
+};
+type XYPadProps = ExtractPublicPropTypes<typeof xyPadProps>;
 /**
  * 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`.
@@ -1464,10 +2189,11 @@ export declare const XYPad: import("vue").DefineComponent<import("vue").ExtractP
     type: PropType<XYInput<boolean>>;
     default: boolean;
   };
-  /** The cursor to show while dragging. @default { cursor: 'pointer' } */
-  externalStyles: PropType<{
-    cursor?: string;
-  }>;
+  /** The cursor to show while dragging. @default 'pointer' */
+  dragCursor: {
+    type: StringConstructor;
+    default: string;
+  };
   wheel: {
     type: PropType<ModifierValue<InputEventOption> | null>;
     default: () => ModifierValue<InputEventOption>;
@@ -1484,12 +2210,26 @@ export declare const XYPad: import("vue").DefineComponent<import("vue").ExtractP
   disabled: BooleanConstructor;
   /** Make the value unchangeable. */
   readonly: BooleanConstructor;
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    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: XY<number>) => boolean;
-  dragStart: (value: XY<number>) => boolean;
-  dragEnd: (value: XY<number>) => boolean;
+  /**
+   * A change of the value started, with the value before it and what it is
+   * made with.
+   */
+  changeStart: (value: XY<number>, _source: ChangeSource) => boolean;
+  /** The change ended, with the value it ended on. */
+  changeEnd: (value: XY<number>, _source: ChangeSource) => boolean;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   /** The current value as `[x, y]`. Bind it with `v-model`. */
   modelValue: {
@@ -1521,10 +2261,11 @@ export declare const XYPad: import("vue").DefineComponent<import("vue").ExtractP
     type: PropType<XYInput<boolean>>;
     default: boolean;
   };
-  /** The cursor to show while dragging. @default { cursor: 'pointer' } */
-  externalStyles: PropType<{
-    cursor?: string;
-  }>;
+  /** The cursor to show while dragging. @default 'pointer' */
+  dragCursor: {
+    type: StringConstructor;
+    default: string;
+  };
   wheel: {
     type: PropType<ModifierValue<InputEventOption> | null>;
     default: () => ModifierValue<InputEventOption>;
@@ -1541,19 +2282,30 @@ export declare const XYPad: import("vue").DefineComponent<import("vue").ExtractP
   disabled: BooleanConstructor;
   /** Make the value unchangeable. */
   readonly: BooleanConstructor;
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: {
+    type: NumberConstructor;
+    default: number;
+  };
 }>> & Readonly<{
   "onUpdate:modelValue"?: ((value: XY<number>) => any) | undefined;
-  onDragStart?: ((value: XY<number>) => any) | undefined;
-  onDragEnd?: ((value: XY<number>) => any) | undefined;
+  onChangeStart?: ((value: XY<number>, _source: ChangeSource) => any) | undefined;
+  onChangeEnd?: ((value: XY<number>, _source: ChangeSource) => any) | undefined;
 }>, {
   reverse: boolean | readonly [x: boolean, y: boolean];
   wheel: ModifierValue<InputEventOption> | null;
-  disabled: boolean;
   step: number | readonly [x: number, y: number];
+  disabled: boolean;
+  scale: Scale | readonly [x: Scale, y: Scale];
+  dragCursor: string;
   keyboard: ModifierValue<InputEventOption> | null;
   dragSensitivity: ModifierValue<number>;
   readonly: boolean;
-  scale: Scale | readonly [x: Scale, y: Scale];
+  changeEndDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 //#region src/components/XYPad/XYPadArea.d.ts
@@ -1564,6 +2316,19 @@ export declare const XYPadArea: import("vue").DefineComponent<{}, () => import("
 //#endregion
 //#region src/components/XYPad/XYPadThumb.d.ts
 type PerAxis = XYInput<string | undefined>;
+declare const xyPadThumbProps: {
+  /** 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>;
+};
+type XYPadThumbProps = ExtractPublicPropTypes<typeof xyPadThumbProps>;
 /** 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. */
@@ -1672,7 +2437,7 @@ export declare function useMIDIMessage(midiAccess: MaybeRefOrGetter<MIDIAccess |
  * `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;
+export declare function useWheel(target: MaybeRefOrGetter<Element | null | undefined>, onWheel: (event: WheelEvent) => void, options?: MaybeRefOrGetter<Omit<WheelOptions, 'onWheel'>>): void;
 //#endregion
-export type { DrawFunction, FileInputContextValue, InitFunction, KeyAttributes, KeyState, KnobContextValue, NumberInputContextValue, PointsEditorContextValue, SliderContextValue, XYPadContextValue };
+export type { AnimationCanvasProps, DropZoneProps, FileInputContextValue, FileInputProps, KeyAttributes, KeyState, KnobContextValue, KnobProps, KnobThumbProps, NumberInputContextValue, NumberInputProps, PianoProps, PointsEditorContextValue, PointsEditorPointProps, PointsEditorProps, SliderContextValue, SliderMarksOptionProps, SliderMarksProps, SliderProps, SliderThumbProps, SliderTrackProps, XYPadContextValue, XYPadProps, XYPadThumbProps };
 //# sourceMappingURL=index.d.ts.map