@tremolo-ui/vue 0.8.0 → 0.9.0

package/src/components/NumberInput/NumberInput.ts

@@ -1,5 +1,15 @@
-import { computed, defineComponent, h, provide, ref, type PropType } from 'vue'
+import {
+  type ComponentObjectPropsOptions,
+  computed,
+  defineComponent,
+  type ExtractPublicPropTypes,
+  h,
+  type PropType,
+  provide,
+  ref,
+} from 'vue'
 
+import { type ChangeSource } from '@tremolo-ui/dom'
 import {
   commitNumberInputText,
   numberInputBounds,
@@ -7,66 +17,89 @@ import {
   nudgeNumberInput,
   parseNumberText,
   wheelDirection,
-} from '@tremolo-ui/dom'
+} from '@tremolo-ui/dom/internal'
 import { linearScale, type Scale } from '@tremolo-ui/functions'
 
 import { useWheel } from '../../composables/useWheel'
+import { useChangeGesture } from '../_util/change-gesture'
 import { dragSensitivityProp, keyboardProp, wheelProp } from '../_util/props'
 import { useCheckSteps } from '../_util/useCheckSteps'
 
-import { NumberInputKey } from './context'
+import { NumberInputGestureKey, NumberInputKey } from './context'
+
+const numberInputProps = {
+  /** The current value. Bind it with `v-model`. */
+  modelValue: { type: Number, required: true },
+  /** The lowest value. Leave it out for no lower end. */
+  min: Number,
+  /** The highest value. Leave it out for no upper end. */
+  max: Number,
+  /** Granularity of the value. @default 1 */
+  step: { type: Number, default: 1 },
+  /** How the value is distributed, for a `normalized` amount. */
+  scale: { type: Object as PropType<Scale>, default: () => linearScale },
+  /** The text shown for a value. @default String */
+  format: {
+    type: Function as PropType<(value: number) => string>,
+    default: String,
+  },
+  /** Read a value back out of the text. Has to undo `format`. */
+  parse: {
+    type: Function as PropType<(text: string) => number>,
+    default: parseNumberText,
+  },
+  /** Keep the value within `min` and `max` when committed or stepped. */
+  clampValue: { type: Boolean, default: true },
+  wheel: wheelProp,
+  keyboard: keyboardProp,
+  dragSensitivity: dragSensitivityProp,
+  /** Pixels of vertical drag on the stepper per `step`. `null` turns it off. */
+  drag: { type: Number as PropType<number | null>, default: 1 },
+  /** Hide the cursor while dragging the stepper. */
+  pointerLock: Boolean,
+  /** The cursor to show while dragging the stepper. @default 'ns-resize' */
+  dragCursor: { type: String, default: 'ns-resize' },
+  /** Select the text when the field takes focus. @default 'none' */
+  selectOnFocus: {
+    type: String as PropType<'all' | 'number' | 'none'>,
+    default: 'none',
+  },
+  /** Show the plain value while the field has focus. */
+  unformatOnFocus: Boolean,
+  /** Put the caret back at the same digit after an arrow key step. */
+  keepCaretOnStep: Boolean,
+  /** Commit and leave the field on Enter. @default true */
+  blurOnEnter: { type: Boolean, default: true },
+  /** Make the input unchangeable and remove it from the tab order. */
+  disabled: Boolean,
+  /** Make the value unchangeable while leaving the field focusable. */
+  readonly: Boolean,
+  /**
+   * 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: Number, default: 500 },
+} satisfies ComponentObjectPropsOptions
+
+export type NumberInputProps = ExtractPublicPropTypes<typeof numberInputProps>
 
 /** Input with some useful functions for entering numbers. Bind it with `v-model`. */
 export const NumberInput = /* @__PURE__ */ defineComponent({
   name: 'NumberInput',
-  props: {
-    /** The current value. Bind it with `v-model`. */
-    modelValue: { type: Number, required: true },
-    /** The lowest value. Leave it out for no lower end. */
-    min: Number,
-    /** The highest value. Leave it out for no upper end. */
-    max: Number,
-    /** Granularity of the value. @default 1 */
-    step: { type: Number, default: 1 },
-    /** How the value is distributed, for a `normalized` amount. */
-    scale: { type: Object as PropType<Scale>, default: () => linearScale },
-    /** The text shown for a value. @default String */
-    format: {
-      type: Function as PropType<(value: number) => string>,
-      default: String,
-    },
-    /** Read a value back out of the text. Has to undo `format`. */
-    parse: {
-      type: Function as PropType<(text: string) => number>,
-      default: parseNumberText,
-    },
-    /** Keep the value within `min` and `max` when committed or stepped. */
-    clampValue: { type: Boolean, default: true },
-    wheel: wheelProp,
-    keyboard: keyboardProp,
-    dragSensitivity: dragSensitivityProp,
-    /** Pixels of vertical drag on the stepper per `step`. `null` turns it off. */
-    drag: { type: Number as PropType<number | null>, default: 1 },
-    /** Hide the cursor while dragging the stepper. */
-    pointerLock: Boolean,
-    /** Select the text when the field takes focus. @default 'none' */
-    selectOnFocus: {
-      type: String as PropType<'all' | 'number' | 'none'>,
-      default: 'none',
-    },
-    /** Show the plain value while the field has focus. */
-    unformatOnFocus: Boolean,
-    /** Put the caret back at the same digit after an arrow key step. */
-    keepCaretOnStep: Boolean,
-    /** Commit and leave the field on Enter. @default true */
-    blurOnEnter: { type: Boolean, default: true },
-    /** Make the input unchangeable and remove it from the tab order. */
-    disabled: Boolean,
-    /** Make the value unchangeable while leaving the field focusable. */
-    readonly: Boolean,
-  },
+  props: numberInputProps,
   emits: {
     'update:modelValue': (value: number) => typeof value === 'number',
+    /**
+     * 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) =>
+      typeof value === 'number',
+    /** The change ended, with the value it ended on. */
+    changeEnd: (value: number, _source: ChangeSource) =>
+      typeof value === 'number',
   },
   setup(props, { slots, emit, expose }) {
     const root = ref<HTMLDivElement | null>(null)
@@ -115,12 +148,46 @@ export const NumberInput = /* @__PURE__ */ defineComponent({
       format: props.format,
     }))
 
+    const gesture = useChangeGesture({
+      value: () => props.modelValue,
+      inactive: () => inactive.value,
+      endDelay: () => props.changeEndDelay,
+      onStart: (value, source) => emit('changeStart', value, source),
+      onEnd: (value, source) => emit('changeEnd', value, source),
+    })
+
     function changeValue(next: number) {
       if (inactive.value) return
       draft.value = null
-      if (next !== props.modelValue) emit('update:modelValue', next)
+      if (next === props.modelValue) return
+      gesture.changed(next)
+      emit('update:modelValue', next)
     }
 
+    let pressed = false
+    provide(NumberInputGestureKey, {
+      press: () => {
+        if (inactive.value) return
+        gesture.hold('pointer')
+        // Called again by every repeat of a held stepper; one release will do.
+        if (pressed) return
+        pressed = true
+        // Released wherever the pointer ends up: the stepper drag captures
+        // it, and a press that wanders off the button still ends.
+        const release = () => {
+          pressed = false
+          gesture.end()
+          window.removeEventListener('pointerup', release)
+          window.removeEventListener('pointercancel', release)
+        }
+        window.addEventListener('pointerup', release)
+        window.addEventListener('pointercancel', release)
+      },
+      key: () => {
+        if (!inactive.value) gesture.pulse('keyboard')
+      },
+    })
+
     provide(NumberInputKey, {
       get value() {
         return props.modelValue
@@ -152,6 +219,9 @@ export const NumberInput = /* @__PURE__ */ defineComponent({
       get pointerLock() {
         return props.pointerLock
       },
+      get dragCursor() {
+        return props.dragCursor
+      },
       get selectOnFocus() {
         return props.selectOnFocus
       },
@@ -188,7 +258,12 @@ export const NumberInput = /* @__PURE__ */ defineComponent({
         // Deliberately unclamped: clamping here would make "1500" impossible
         // to type into an input whose max is 100.
         const parsed = props.parse(next)
-        if (Number.isFinite(parsed)) emit('update:modelValue', parsed)
+        if (!Number.isFinite(parsed)) return
+        if (parsed !== props.modelValue) {
+          gesture.pulse('keyboard')
+          gesture.changed(parsed)
+        }
+        emit('update:modelValue', parsed)
       },
       commitDraft: () => {
         if (draft.value === null || inactive.value) return
@@ -199,8 +274,15 @@ export const NumberInput = /* @__PURE__ */ defineComponent({
         })
         // Text with no number is not a value: the field goes back to what it
         // was showing.
-        if (committed === null) draft.value = null
-        else changeValue(committed)
+        if (committed === null) {
+          draft.value = null
+          return
+        }
+        // The typing was a gesture of its own, and committing is where it
+        // ends.
+        if (committed !== props.modelValue) gesture.pulse('keyboard')
+        changeValue(committed)
+        gesture.end()
       },
       changeValue,
       nudge: (direction, option, modifiers) =>
@@ -224,6 +306,7 @@ export const NumberInput = /* @__PURE__ */ defineComponent({
         const direction = wheelDirection(event)
         if (!props.wheel || inactive.value || direction === null) return
         event.preventDefault()
+        gesture.pulse('wheel')
         changeValue(
           nudgeNumberInput(
             props.modelValue,

package/src/components/NumberInput/NumberInputField.ts

@@ -2,6 +2,7 @@ import {
   computed,
   defineComponent,
   h,
+  inject,
   nextTick,
   onBeforeUnmount,
   ref,
@@ -12,9 +13,9 @@ import {
   caretAtDecimalOffset,
   caretDecimalOffset,
   numberSpan,
-} from '@tremolo-ui/dom'
+} from '@tremolo-ui/dom/internal'
 
-import { useNumberInputContext } from './context'
+import { NumberInputGestureKey, useNumberInputContext } from './context'
 
 /**
  * The text field, and the only place the value can be typed. While the user
@@ -24,6 +25,7 @@ export const NumberInputField = /* @__PURE__ */ defineComponent({
   name: 'NumberInputField',
   setup(_, { expose }) {
     const field = useNumberInputContext()
+    const gesture = inject(NumberInputGestureKey, null)
     const input = ref<HTMLInputElement | null>(null)
     const focused = ref(false)
     watchEffect(() => field.setInput(input.value))
@@ -58,6 +60,7 @@ export const NumberInputField = /* @__PURE__ */ defineComponent({
         field.keepCaretOnStep && element.selectionStart !== null
           ? caretDecimalOffset(from, element.selectionStart)
           : null
+      gesture?.key()
       field.nudge(direction, field.keyboard!, event)
       if (offset === null) return
       await nextTick()

package/src/components/NumberInput/NumberInputStepper.ts

@@ -1,8 +1,15 @@
-import { computed, defineComponent, h, provide, ref, watch } from 'vue'
+import { computed, defineComponent, h, inject, provide, ref, watch } from 'vue'
 
-import { createStepperDrag, type StepperDragInstance } from '@tremolo-ui/dom'
+import {
+  createStepperDrag,
+  type StepperDragInstance,
+} from '@tremolo-ui/dom/internal'
 
-import { StepperKey, useNumberInputContext } from './context'
+import {
+  NumberInputGestureKey,
+  StepperKey,
+  useNumberInputContext,
+} from './context'
 
 /**
  * The area the steppers sit in, and a drag handle in its own right: dragging
@@ -12,6 +19,7 @@ export const NumberInputStepper = /* @__PURE__ */ defineComponent({
   name: 'NumberInputStepper',
   setup(_, { slots }) {
     const field = useNumberInputContext()
+    const gesture = inject(NumberInputGestureKey, null)
     const el = ref<HTMLDivElement | null>(null)
     let instance: StepperDragInstance | null = null
 
@@ -26,6 +34,7 @@ export const NumberInputStepper = /* @__PURE__ */ defineComponent({
       pixels: field.drag ?? 1,
       sensitivity: field.dragSensitivity,
       pointerLock: field.pointerLock,
+      cursor: field.dragCursor,
     })
 
     watch(
@@ -49,6 +58,18 @@ export const NumberInputStepper = /* @__PURE__ */ defineComponent({
 
     provide(StepperKey, { moved: () => instance?.moved() ?? false })
 
-    return () => h('div', { ref: el }, slots.default?.())
+    return () =>
+      h(
+        'div',
+        {
+          ref: el,
+          // A drag on the stepper is a press like any other: held from here
+          // until the pointer is released.
+          onPointerdown: () => {
+            if (enabled.value) gesture?.press()
+          },
+        },
+        slots.default?.(),
+      )
   },
 })

package/src/components/NumberInput/context.ts

@@ -21,6 +21,7 @@ export 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
@@ -58,6 +59,17 @@ export function useNumberInputContext(): NumberInputContextValue {
   return injectContext(NumberInputKey, 'NumberInput')
 }
 
+/** @internal The change gesture of `NumberInput`, for the parts that change the value. */
+export interface NumberInputGestureValue {
+  /** A press on a stepper, held until the pointer is released anywhere. */
+  press: () => void
+  /** An arrow key in `NumberInputField`. */
+  key: () => void
+}
+
+export const NumberInputGestureKey: InjectionKey<NumberInputGestureValue> =
+  Symbol('NumberInputGesture')
+
 /** @internal Whether the drag on `NumberInputStepper` has moved the value. */
 export const StepperKey: InjectionKey<{ moved: () => boolean }> =
   Symbol('NumberInputStepper')

package/src/components/NumberInput/index.ts

@@ -1,5 +1,5 @@
 export { useNumberInputContext, type NumberInputContextValue } from './context'
-export { NumberInput } from './NumberInput'
+export { NumberInput, type NumberInputProps } from './NumberInput'
 export { NumberInputDecrementStepper } from './NumberInputDecrementStepper'
 export { NumberInputField } from './NumberInputField'
 export { NumberInputIncrementStepper } from './NumberInputIncrementStepper'

package/src/components/NumberInput/stepper-button.ts

@@ -2,7 +2,11 @@ import { computed, defineComponent, h, inject } from 'vue'
 
 import { useLongPress } from '../../composables/useLongPress'
 
-import { StepperKey, useNumberInputContext } from './context'
+import {
+  NumberInputGestureKey,
+  StepperKey,
+  useNumberInputContext,
+} from './context'
 
 /** The body of `NumberInputIncrementStepper` and `NumberInputDecrementStepper`. */
 export function stepperButton(name: string, direction: 1 | -1) {
@@ -11,12 +15,15 @@ export function stepperButton(name: string, direction: 1 | -1) {
     setup(_, { slots }) {
       const field = useNumberInputContext()
       const stepper = inject(StepperKey, null)
+      const gesture = inject(NumberInputGestureKey, null)
       const blocked = computed(
         () => field.disabled || (direction > 0 ? field.atMax : field.atMin),
       )
       const press = useLongPress({
         onPress: () => {
           if (field.disabled || field.readonly) return
+          // On every press and repeat; the gesture is held from the first.
+          gesture?.press()
           // Once the pointer has actually travelled, the drag on the stepper
           // owns the value; repeating on top of it would move it twice.
           if (stepper?.moved()) return

package/src/components/Piano/Piano.ts

@@ -1,27 +1,31 @@
 import {
+  type ComponentObjectPropsOptions,
   computed,
   defineComponent,
+  type ExtractPublicPropTypes,
   h,
-  ref,
-  watch,
   type HTMLAttributes,
   type PropType,
+  ref,
   type SlotsType,
+  watch,
 } from 'vue'
 
 import {
-  blackKeyWidth,
   createPianoInput,
-  fitWhiteKeyWidth,
-  getNoteRangeArray,
   notePosition,
-  pianoWidth,
   type KeyboardShortcuts,
   type KeyboardShortcutsScope,
   type NoteRange,
   type PianoInputInstance,
   type PianoLayout,
 } from '@tremolo-ui/dom'
+import {
+  blackKeyWidth,
+  fitWhiteKeyWidth,
+  getNoteRangeArray,
+  pianoWidth,
+} from '@tremolo-ui/dom/internal'
 import { isWhiteKey, noteKey } from '@tremolo-ui/functions'
 
 /** What a key is, when the `label` slot or `keyProps` is asked about it. */
@@ -39,49 +43,53 @@ export interface KeyState {
 export type KeyAttributes = HTMLAttributes &
   Record<`data-${string}`, string | number | boolean | undefined>
 
+const pianoProps = {
+  /** The notes drawn, from `first` to `last`. */
+  noteRange: { type: Object as PropType<NoteRange>, required: true },
+  /** Let a pointer slide from one key to the next. @default true */
+  glissando: { type: Boolean, default: true },
+  /** Highest note that can sound. @default 127 */
+  midiMax: { type: Number, default: 127 },
+  /** Play notes from the computer keyboard. See `SHORTCUTS` in `@tremolo-ui/dom`. */
+  keyboardShortcuts: Object as PropType<KeyboardShortcuts>,
+  /** Where keyboard shortcuts listen. @default 'root' */
+  keyboardShortcutsScope: {
+    type: String as PropType<KeyboardShortcutsScope>,
+    default: 'root',
+  },
+  /** Follow the width of the parent element. */
+  resizable: Boolean,
+  /** Width of a white key in pixels. @default 40 */
+  whiteKeyWidth: { type: Number, default: 40 },
+  /** Space between two white keys, in pixels. @default 1 */
+  keyGap: { type: Number, default: 1 },
+  /** Width of a black key, as a fraction of a white one. @default 0.65 */
+  blackKeyWidthRatio: { type: Number, default: 0.65 },
+  /** Height of a black key, as a fraction of the keyboard. @default 0.6 */
+  blackKeyHeightRatio: { type: Number, default: 0.6 },
+  /** Classes for the label inside each key. */
+  classes: Object as 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: Function as PropType<
+    (note: number, state: KeyState) => KeyAttributes
+  >,
+} satisfies ComponentObjectPropsOptions
+
+export 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.
  */
 export const Piano = /* @__PURE__ */ defineComponent({
   name: 'Piano',
-  props: {
-    /** The notes drawn, from `first` to `last`. */
-    noteRange: { type: Object as PropType<NoteRange>, required: true },
-    /** Let a pointer slide from one key to the next. @default true */
-    glissando: { type: Boolean, default: true },
-    /** Highest note that can sound. @default 127 */
-    midiMax: { type: Number, default: 127 },
-    /** Play notes from the computer keyboard. See `SHORTCUTS` in `@tremolo-ui/dom`. */
-    keyboardShortcuts: Object as PropType<KeyboardShortcuts>,
-    /** Where keyboard shortcuts listen. @default 'root' */
-    keyboardShortcutsScope: {
-      type: String as PropType<KeyboardShortcutsScope>,
-      default: 'root',
-    },
-    /** Follow the width of the parent element. */
-    resizable: Boolean,
-    /** Width of a white key in pixels. @default 40 */
-    whiteKeyWidth: { type: Number, default: 40 },
-    /** Space between two white keys, in pixels. @default 1 */
-    keyGap: { type: Number, default: 1 },
-    /** Width of a black key, as a fraction of a white one. @default 0.65 */
-    blackKeyWidthRatio: { type: Number, default: 0.65 },
-    /** Height of a black key, as a fraction of the keyboard. @default 0.6 */
-    blackKeyHeightRatio: { type: Number, default: 0.6 },
-    /** Classes for the label inside each key. */
-    classes: Object as 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: Function as PropType<
-      (note: number, state: KeyState) => KeyAttributes
-    >,
-  },
+  props: pianoProps,
   emits: {
     /** A note started sounding. */
     playNote: (note: number, _velocity?: number) => typeof note === 'number',

package/src/components/Piano/index.ts

@@ -1 +1,6 @@
-export { Piano, type KeyAttributes, type KeyState } from './Piano'
+export {
+  Piano,
+  type KeyAttributes,
+  type KeyState,
+  type PianoProps,
+} from './Piano'

package/src/components/PointsEditor/PointsEditor.ts

@@ -1,64 +1,72 @@
 import {
+  type ComponentObjectPropsOptions,
   computed,
   defineComponent,
+  type ExtractPublicPropTypes,
   h,
   onScopeDispose,
+  type PropType,
   provide,
   shallowRef,
   watchEffect,
-  type PropType,
 } from 'vue'
 
 import {
   createPointsEditor,
   DEFAULT_DRAG_SENSITIVITY,
-  POINTS_EDITOR_DEFAULT_KEYBOARD,
-  POINTS_EDITOR_DEFAULT_WHEEL,
   type InputEventOption,
   type ModifierValue,
   type SelectionBoxRect,
 } from '@tremolo-ui/dom'
+import {
+  POINTS_EDITOR_DEFAULT_KEYBOARD,
+  POINTS_EDITOR_DEFAULT_WHEEL,
+} from '@tremolo-ui/dom/internal'
 
 import { PointsEditorKey } from './context'
 
 const EMPTY: readonly string[] = []
 
+const pointsEditorProps = {
+  /** Make the points unchangeable and remove them from the tab order. */
+  disabled: Boolean,
+  /** Make the points unmovable. */
+  readonly: Boolean,
+  /** The cursor to show while dragging a point. @default 'grabbing' */
+  dragCursor: { type: String, default: 'grabbing' },
+  /** How much one wheel notch moves the focused point. */
+  wheel: {
+    type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
+    default: () => POINTS_EDITOR_DEFAULT_WHEEL,
+  },
+  /** How much one arrow key press moves a point. */
+  keyboard: {
+    type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
+    default: () => POINTS_EDITOR_DEFAULT_KEYBOARD,
+  },
+  /** How much a drag moves a point, per modifier key. */
+  dragSensitivity: {
+    type: [Number, Object] as PropType<ModifierValue<number>>,
+    default: () => DEFAULT_DRAG_SENSITIVITY,
+  },
+  /**
+   * Let points be selected, and a selection be moved as one. A selection
+   * updates several points in the same tick.
+   */
+  selectable: Boolean,
+  /** Ids of the selected points. Bind it with `v-model:selection`. */
+  selection: Array as PropType<string[]>,
+} satisfies ComponentObjectPropsOptions
+
+export 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.
  */
 export const PointsEditor = /* @__PURE__ */ defineComponent({
   name: 'PointsEditor',
-  props: {
-    /** Make the points unchangeable and remove them from the tab order. */
-    disabled: Boolean,
-    /** Make the points unmovable. */
-    readonly: Boolean,
-    /** The cursor to show while dragging a point. @default { cursor: 'grabbing' } */
-    externalStyles: Object as PropType<{ cursor?: string }>,
-    /** How much one wheel notch moves the focused point. */
-    wheel: {
-      type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
-      default: () => POINTS_EDITOR_DEFAULT_WHEEL,
-    },
-    /** How much one arrow key press moves a point. */
-    keyboard: {
-      type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
-      default: () => POINTS_EDITOR_DEFAULT_KEYBOARD,
-    },
-    /** How much a drag moves a point, per modifier key. */
-    dragSensitivity: {
-      type: [Number, Object] as PropType<ModifierValue<number>>,
-      default: () => DEFAULT_DRAG_SENSITIVITY,
-    },
-    /**
-     * Let points be selected, and a selection be moved as one. A selection
-     * updates several points in the same tick.
-     */
-    selectable: Boolean,
-    /** Ids of the selected points. Bind it with `v-model:selection`. */
-    selection: Array as PropType<string[]>,
-  },
+  props: pointsEditorProps,
   emits: {
     'update:selection': (selection: string[]) => Array.isArray(selection),
   },
@@ -110,8 +118,8 @@ export const PointsEditor = /* @__PURE__ */ defineComponent({
       get dragSensitivity() {
         return props.dragSensitivity
       },
-      get cursor() {
-        return props.externalStyles?.cursor ?? 'grabbing'
+      get dragCursor() {
+        return props.dragCursor
       },
       get selectable() {
         return props.selectable

package/src/components/PointsEditor/PointsEditorContainer.ts

@@ -1,11 +1,7 @@
 import { computed, defineComponent, h, ref, watch, watchEffect } from 'vue'
 
-import {
-  createDragValue,
-  elementMapping,
-  POINT_AXIS,
-  wheelMove,
-} from '@tremolo-ui/dom'
+import { createDragValue, elementMapping } from '@tremolo-ui/dom'
+import { POINT_AXIS, wheelMove } from '@tremolo-ui/dom/internal'
 
 import { useWheel } from '../../composables/useWheel'
 import { providePlacement } from '../_util/placement'