@tremolo-ui/react 0.6.0 → 0.8.0

package/src/components/Piano/index.tsx

@@ -3,7 +3,6 @@ import {
   CSSProperties,
   forwardRef,
   ReactNode,
-  useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -11,48 +10,20 @@ import {
   useState,
 } from 'react'
 
-import { createPianoInput, type PianoInputInstance } from '@tremolo-ui/dom'
 import {
   blackKeyWidth,
+  createPianoInput,
+  fitWhiteKeyWidth,
   getNoteRangeArray,
-  isWhiteKey,
-  noteKey,
+  type KeyboardShortcuts,
+  type KeyboardShortcutsScope,
   notePosition,
   pianoWidth,
   type NoteRange,
+  type PianoInputInstance,
   type PianoLayout,
-} from '@tremolo-ui/functions'
-
-import { useEventListener } from '../../hooks/useEventListener'
-import { cssLength } from '../_util/css-length'
-
-import { KeyboardShortcuts } from './keyboard-shortcuts'
-
-type KeyboardShortcutsScope = 'root' | 'window'
-
-function isEditableTarget(target: EventTarget | null) {
-  if (!(target instanceof HTMLElement)) return false
-  if (target.matches('input, textarea, select')) return true
-
-  for (let element: HTMLElement | null = target; element;) {
-    const contentEditable = element.getAttribute('contenteditable')
-    if (contentEditable !== null)
-      return contentEditable.toLowerCase() !== 'false'
-    element = element.parentElement
-  }
-
-  return false
-}
-
-function shortcutKey(event: KeyboardEvent) {
-  return event.code || event.key
-}
-
-/**
- * `style` that also takes CSS custom properties, which is how a key's colours
- * are set: see `index.css` for the ones each key type reads.
- */
-export type CSSVariables = Record<`--${string}`, string | number | undefined>
+} from '@tremolo-ui/dom'
+import { isWhiteKey, noteKey } from '@tremolo-ui/functions'
 
 /**
  * What {@link PianoProps.keyProps} may return for one key.
@@ -61,9 +32,8 @@ export type CSSVariables = Record<`--${string}`, string | number | undefined>
  * JSX syntax, not on an object type, and selecting on one is the usual way to
  * mark a key out.
  */
-export type KeyAttributes = Omit<ComponentPropsWithoutRef<'div'>, 'style'> & {
-  style?: CSSProperties & CSSVariables
-} & Record<`data-${string}`, string | number | boolean | undefined>
+export type KeyAttributes = ComponentPropsWithoutRef<'div'> &
+  Record<`data-${string}`, string | number | boolean | undefined>
 
 /** What a key is, when {@link PianoProps.label} or `keyProps` is asked about it. */
 export interface KeyState {
@@ -154,18 +124,9 @@ export interface PianoProps {
    */
   blackKeyHeightRatio?: number
 
-  /**
-   * Height of the keyboard. Sets `--height`; when it is omitted, the height
-   * the theme gives stands, and the theme can tell `resizable` apart through
-   * `data-resizable`.
-   */
-  height?: number | string
-
-  style?: CSSProperties & CSSVariables
-
   /**
    * What to draw inside a key. `''`, `null` and `undefined` leave it bare, so
-   * a layout with gaps — {@link SHORTCUTS.HOME_ROW_NATURAL}, say — needs no
+   * a layout with gaps — `SHORTCUTS.HOME_ROW_NATURAL`, say — needs no
    * special casing.
    */
   label?: (note: number, state: KeyState) => ReactNode
@@ -217,7 +178,6 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
       keyGap = 1,
       blackKeyWidthRatio = 0.65,
       blackKeyHeightRatio = 0.6,
-      height,
       style,
       className,
       label,
@@ -237,10 +197,6 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
     const [resizedKeyWidth, setResizedKeyWidth] = useState(whiteKeyWidth)
 
     const notes = useMemo(() => getNoteRangeArray(noteRange), [noteRange])
-    const whiteKeyCount = useMemo(
-      () => notes.filter(isWhiteKey).length,
-      [notes],
-    )
 
     const layout: PianoLayout = useMemo(
       () => ({
@@ -267,21 +223,12 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
       layout,
       glissando,
       midiMax,
+      keyboardShortcuts,
+      keyboardShortcutsScope,
       onPlayNote,
       onStopNote,
     })
     const instanceRef = useRef<PianoInputInstance | null>(null)
-    const shortcutNotes = useRef(
-      new Map<string, { note: number; source: string }>(),
-    )
-
-    const releaseShortcutNotes = useCallback(() => {
-      for (const { note, source } of shortcutNotes.current.values()) {
-        instanceRef.current?.noteOff(note, { source })
-      }
-      shortcutNotes.current.clear()
-    }, [])
-
     useEffect(() => {
       if (!node) return
 
@@ -289,6 +236,8 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
         layout: latest.current.layout,
         glissando: latest.current.glissando,
         midiMax: latest.current.midiMax,
+        keyboardShortcuts: latest.current.keyboardShortcuts,
+        keyboardShortcutsScope: latest.current.keyboardShortcutsScope,
         onPlayNote: (note, velocity) =>
           latest.current.onPlayNote?.(note, velocity),
         onStopNote: (note) => latest.current.onStopNote?.(note),
@@ -307,10 +256,27 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
 
     // Runs after every render.
     useEffect(() => {
-      latest.current = { layout, glissando, midiMax, onPlayNote, onStopNote }
-      instanceRef.current?.update({ layout, glissando, midiMax })
+      latest.current = {
+        layout,
+        glissando,
+        midiMax,
+        keyboardShortcuts,
+        keyboardShortcutsScope,
+        onPlayNote,
+        onStopNote,
+      }
+      instanceRef.current?.update({
+        layout,
+        glissando,
+        midiMax,
+        keyboardShortcuts,
+        keyboardShortcutsScope,
+      })
     })
 
+    // By value, so that a range written inline does not reconnect the
+    // observer on every render.
+    const { first, last } = noteRange
     useEffect(() => {
       if (!resizable || !node) return
       const parent = node.parentElement
@@ -318,89 +284,16 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
 
       const resizeObserver = new ResizeObserver(() => {
         setResizedKeyWidth(
-          node.clientWidth / Math.max(whiteKeyCount, 1) - keyGap,
+          fitWhiteKeyWidth(node.clientWidth, {
+            noteRange: { first, last },
+            keyGap,
+            blackKeyWidthRatio,
+          }),
         )
       })
       resizeObserver.observe(parent)
       return () => resizeObserver.disconnect()
-    }, [resizable, node, whiteKeyCount, keyGap])
-
-    const shortcutKeys = keyboardShortcuts?.keys
-    const hasShortcuts = shortcutKeys !== undefined
-    // What the held keys were started against, as a value rather than the
-    // identity of the array: a caller who writes the keys inline hands over a
-    // new array on every render, and releasing on that would stop a note as
-    // soon as anything else re-renders — including the state change that
-    // playing the note caused.
-    const shortcutMapping = shortcutKeys?.join('\u0000')
-
-    useEffect(
-      () => releaseShortcutNotes,
-      [
-        releaseShortcutNotes,
-        shortcutMapping,
-        keyboardShortcutsScope,
-        noteRange.first,
-        noteRange.last,
-      ],
-    )
-
-    /** The note a shortcut key plays, or null when it has none. */
-    function shortcutNote(key: string) {
-      if (!shortcutKeys || key === '') return null
-      const index = shortcutKeys.indexOf(key)
-      const note = noteRange.first + index
-      return index === -1 || note > noteRange.last ? null : note
-    }
-
-    const shortcutTarget = useMemo(
-      () => () => {
-        if (!hasShortcuts) return null
-        return keyboardShortcutsScope === 'window' ? globalThis.window : node
-      },
-      [hasShortcuts, keyboardShortcutsScope, node],
-    )
-
-    const focusOutTarget = useMemo(
-      () => () =>
-        hasShortcuts && keyboardShortcutsScope === 'root' ? node : null,
-      [hasShortcuts, keyboardShortcutsScope, node],
-    )
-
-    const windowBlurTarget = useMemo(
-      () => () => (hasShortcuts ? globalThis.window : null),
-      [hasShortcuts],
-    )
-
-    useEventListener(shortcutTarget, 'keydown', (e) => {
-      const key = shortcutKey(e)
-      if (e.repeat || shortcutNotes.current.has(key)) return
-      if (isEditableTarget(e.target)) return
-
-      const note = shortcutNote(e.key)
-      if (note === null) return
-
-      const source = `keyboard:${key}`
-      shortcutNotes.current.set(key, { note, source })
-      instanceRef.current?.noteOn(note, { source })
-    })
-
-    useEventListener(shortcutTarget, 'keyup', (e) => {
-      const key = shortcutKey(e)
-      const shortcut = shortcutNotes.current.get(key)
-      if (!shortcut) return
-
-      shortcutNotes.current.delete(key)
-      instanceRef.current?.noteOff(shortcut.note, { source: shortcut.source })
-    })
-
-    useEventListener(focusOutTarget, 'focusout', (e) => {
-      if (e.relatedTarget instanceof Node && node?.contains(e.relatedTarget))
-        return
-      releaseShortcutNotes()
-    })
-
-    useEventListener(windowBlurTarget, 'blur', releaseShortcutNotes)
+    }, [resizable, node, first, last, keyGap, blackKeyWidthRatio])
 
     useImperativeHandle(
       forwardedRef,
@@ -426,7 +319,6 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
           {
             // Computed from the layout rather than chosen, so it stays inline.
             width: resizable ? '100%' : pianoWidth(layout),
-            '--height': cssLength(height),
             // The keys inside are placed against this box.
             position: 'relative',
             ...style,
@@ -495,5 +387,3 @@ export const Root = /* @__PURE__ */ forwardRef<PianoMethods, Props>(
  * Customizable piano component.
  */
 export const Piano = { Root }
-
-export { type KeyboardShortcuts, SHORTCUTS } from './keyboard-shortcuts'

package/src/components/PointsEditor/Background.tsx

@@ -1,17 +1,11 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react'
-
-export interface PointsEditorBackgroundProps {
-  /** Whatever the points are placed over: a graph, a canvas, an image. */
-  children?: ReactNode
-}
+import { ComponentPropsWithoutRef } from 'react'
 
 export function Background({
   className,
   children,
   style,
   ...props
-}: PointsEditorBackgroundProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorBackgroundProps>) {
+}: ComponentPropsWithoutRef<'div'>) {
   return (
     <div
       className={className}

package/src/components/PointsEditor/Container.tsx

@@ -1,4 +1,6 @@
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+
+import { POINT_AXIS, wheelMove } from '@tremolo-ui/dom'
 
 import { useComposedRefs } from '../../compose-refs'
 import { useDragValue } from '../../hooks/useDragValue'
@@ -6,41 +8,26 @@ import { useWheel } from '../../hooks/useWheel'
 import { Placement } from '../_util/Placement'
 
 import { usePointsEditorContext } from './context'
-import { AXIS } from './Point'
-
-export interface PointsEditorContainerProps {
-  /** `<PointsEditor.Point />` goes here. */
-  children?: ReactNode
-}
 
-type Props = PointsEditorContainerProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorContainerProps>
+type Props = ComponentPropsWithoutRef<'div'>
 
 export const Container = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
   function Container({ children, className, style, ...props }, forwardedRef) {
-    const {
-      containerRef,
-      disabled,
-      selectable,
-      isPointElement,
-      nudgeFocusedPoint,
-      beginSelectionBox,
-      moveSelectionBox,
-      endSelectionBox,
-    } = usePointsEditorContext()
+    const { containerRef, disabled, selectable, editor } =
+      usePointsEditorContext()
     const { refCallback: dragRefCallback } = useDragValue<HTMLDivElement>({
-      axis: AXIS,
+      axis: POINT_AXIS,
       baseElementRef: containerRef,
       // A press that landed on a point belongs to that point. Declining here
       // rather than in onDragStart matters: by then the container would already
       // have taken the pointer capture away from the point.
       shouldStart: (event) =>
-        !disabled && !isPointElement(event.target as Element | null),
+        !disabled && !editor.isPointElement(event.target as Element | null),
       onDragStart: ([x, y], state) => {
-        beginSelectionBox({ x, y }, state.event)
+        editor.beginSelectionBox({ x, y }, state.event)
       },
-      onChange: ([x, y]) => moveSelectionBox({ x, y }),
-      onDragEnd: endSelectionBox,
+      onChange: ([x, y]) => editor.moveSelectionBox({ x, y }),
+      onDragEnd: () => editor.endSelectionBox(),
     })
 
     // One listener for the whole editor rather than one per point: a wheel
@@ -50,16 +37,12 @@ export const Container = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
     useWheel(
       (event) => {
         // Scrolling up moves the point towards y = 0; shift switches to x.
-        // Browsers turn shift+wheel into horizontal scrolling: `deltaY` comes
-        // out empty and `deltaX` carries the movement. Reading whichever axis
-        // moved keeps shift working as the x-axis modifier — and picks up a
-        // trackpad's own horizontal gesture, which never had a modifier.
-        const horizontal = event.deltaX !== 0
-        const delta = horizontal ? event.deltaX : event.deltaY
-        if (delta === 0) return
-        const axis = horizontal || event.shiftKey ? 'x' : 'y'
-        const direction = delta < 0 ? -1 : 1
-        if (nudgeFocusedPoint(axis, direction, event)) event.preventDefault()
+        const move = wheelMove(event)
+        if (!move) return
+        const axis = move.axis === 0 ? 'x' : 'y'
+        if (editor.nudgeFocusedPoint(axis, move.direction, event)) {
+          event.preventDefault()
+        }
       },
       { target: containerRef },
     )

package/src/components/PointsEditor/Point.tsx

@@ -1,8 +1,6 @@
 import {
   ComponentPropsWithoutRef,
   CSSProperties,
-  ReactNode,
-  useCallback,
   useEffect,
   useId,
   useRef,
@@ -10,43 +8,31 @@ import {
 } from 'react'
 
 import {
-  applyDelta,
-  clamp,
+  arrowKeyMove,
+  clampPoint,
   type InputEventOption,
-  type ModifierState,
   type ModifierValue,
+  POINT_AXIS,
+  type PointPosition,
+  type PointsEditorPoint,
   selectModifier,
-} from '@tremolo-ui/functions'
+} from '@tremolo-ui/dom'
 
 import { useComposedRefs } from '../../compose-refs'
 import { useDragValue } from '../../hooks/useDragValue'
-import { cssLength } from '../_util/css-length'
 import { useCheckPlacement } from '../_util/Placement'
 import { VisuallyHiddenRangeInput } from '../_util/VisuallyHiddenRangeInput'
 
-import { type PointRegistration, usePointsEditorContext } from './context'
+import { usePointsEditorContext } from './context'
 
-export type PointBaseType = { x: number; y: number }
+import type { CSSVariables } from '../../css-variables'
 
-export function clampPoint(
-  point: PointBaseType,
-  min?: Partial<PointBaseType>,
-  max?: Partial<PointBaseType>,
-) {
-  const { x, y } = point
-  const newX = clamp(x, min?.x ?? 0, max?.x ?? 1)
-  const newY = clamp(y, min?.y ?? 0, max?.y ?? 1)
-  return { x: newX, y: newY }
-}
-
-export interface PointsEditorPointProps<T extends PointBaseType> {
+export interface PointsEditorPointProps<T extends PointPosition> {
   /**
    * Where the point is, as `{ x, y }` from 0 to 1 on each axis, with `y`
    * growing downwards.
    */
   value: T
-  /** Drawn inside the point: the theme's own dot stands when it is left out. */
-  children?: ReactNode
   /**
    * How the selection refers to this point. One is generated when it is left
    * out, which lasts as long as the point is mounted — give your own if the
@@ -54,16 +40,10 @@ export interface PointsEditorPointProps<T extends PointBaseType> {
    */
   id?: string
   /** The lowest position the point can take, per axis. An axis left out is 0. */
-  min?: Partial<PointBaseType>
+  min?: Partial<PointPosition>
   /** The highest position the point can take, per axis. An axis left out is 1. */
-  max?: Partial<PointBaseType>
+  max?: Partial<PointPosition>
 
-  /** Width and height at once. Sets both `--width` and `--height`. */
-  size?: number | string
-  /** Sets `--width`; the size the theme gives it stands when omitted. */
-  width?: number | string
-  /** Sets `--height`; the size the theme gives it stands when omitted. */
-  height?: number | string
   /** Sets `--color`, for the theme to colour the point with. */
   color?: string
 
@@ -89,18 +69,14 @@ export interface PointsEditorPointProps<T extends PointBaseType> {
    * Called with the new position when the point is dragged or moved by the
    * arrow keys or the wheel, including when it moves along with a selection.
    */
-  onChange?: (value: PointBaseType) => void
+  onChange?: (value: PointPosition) => void
   /** Called when a drag on this point starts, with where the point is. */
-  onDragStart?: (value: PointBaseType) => void
+  onDragStart?: (value: PointPosition) => void
   /** Called when that drag ends, with where the point is. */
-  onDragEnd?: (value: PointBaseType) => void
-}
+  onDragEnd?: (value: PointPosition) => void
 
-/**
- * A point is placed by its position within the container, so its value is a
- * position: 0..1 on each axis, with y growing downwards.
- */
-export const AXIS = { min: 0, max: 1 }
+  style?: CSSProperties & CSSVariables<'color' | 'translate'>
+}
 
 /**
  * One setting for both axes, or one per axis. The point holds a range input
@@ -113,15 +89,12 @@ function perAxis(
   return typeof value === 'string' ? value : value?.[axis]
 }
 
-export function Point<T extends PointBaseType>({
+export function Point<T extends PointPosition>({
   value,
   children,
   id: idProp,
   min,
   max,
-  size,
-  width,
-  height,
   color,
 
   disabled: _disabled,
@@ -152,10 +125,7 @@ export function Point<T extends PointBaseType>({
     keyboard: rootKeyboard,
     dragSensitivity,
     selection,
-    registerPoint,
-    beginPointDrag,
-    movePointDrag,
-    nudgeSelection,
+    editor,
   } = usePointsEditorContext()
 
   const generatedId = useId()
@@ -180,7 +150,7 @@ export function Point<T extends PointBaseType>({
   // What the editor needs to move this point along with the rest of a
   // selection. Rewritten after every render rather than kept in the registry
   // itself: the value changes on every frame of a drag.
-  const registration = useRef<PointRegistration>({
+  const registration = useRef<PointsEditorPoint>({
     value,
     min,
     max,
@@ -201,15 +171,18 @@ export function Point<T extends PointBaseType>({
     }
   })
 
-  useEffect(() => registerPoint(id, registration), [id, registerPoint])
+  useEffect(
+    () => editor.registerPoint(id, () => registration.current),
+    [id, editor],
+  )
 
   /** Where the pointer was when the drag started, to measure the move from. */
-  const pointerOrigin = useRef<PointBaseType | null>(null)
+  const pointerOrigin = useRef<PointPosition | null>(null)
 
   // The value is the position itself: no scaling, and no rounding to a step.
   const { refCallback: dragRefCallback, dragging } =
     useDragValue<HTMLDivElement>({
-      axis: AXIS,
+      axis: POINT_AXIS,
       baseElementRef: containerRef,
       sensitivity: (state) =>
         selectModifier(dragSensitivity, state.event).value,
@@ -221,13 +194,13 @@ export function Point<T extends PointBaseType>({
       onChange: ([x, y]) => {
         const origin = pointerOrigin.current
         if (!origin) return
-        movePointDrag({ x: x - origin.x, y: y - origin.y })
+        editor.movePointDrag({ x: x - origin.x, y: y - origin.y })
       },
       onDragStart: ([x, y], state) => {
         // The press decides the selection before the snapshot is taken, so it
         // happens here rather than in an onPointerDown: a native listener on
         // the element runs before React's, and the two would disagree.
-        beginPointDrag(id, state.event)
+        editor.beginPointDrag(id, state.event)
         pointerOrigin.current = { x, y }
         xInputRef.current?.focus()
 
@@ -242,43 +215,27 @@ export function Point<T extends PointBaseType>({
       },
     })
 
-  const nudge = useCallback(
-    (
-      axis: 'x' | 'y',
-      direction: number,
-      option: ModifierValue<InputEventOption>,
-      modifiers: ModifierState,
-    ) => {
-      const next = applyDelta(value[axis], direction, option, AXIS, modifiers)
-      // As a move, so that the rest of the selection comes along and the whole
-      // group stops together at the edge.
-      nudgeSelection(id, {
-        x: axis === 'x' ? next - value.x : 0,
-        y: axis === 'y' ? next - value.y : 0,
-      })
-    },
-    [value, id, nudgeSelection],
-  )
-
   const refCallback = useComposedRefs<HTMLDivElement>(
     dragRefCallback,
     setElement,
   )
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    const key = event.key
-    if (!['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key))
-      return
-    // The key picks the axis, whichever of the two inputs holds the focus: a
-    // point is one control to the person moving it, and the focus lands on the
-    // x input, so reading the axis off the input would leave the y axis with
-    // no keys at all.
-    const axis = key === 'ArrowRight' || key === 'ArrowLeft' ? 'x' : 'y'
+    // The key picks the axis, whichever of the two inputs holds the focus:
+    // the focus lands on the x input, so reading the axis off the input would
+    // leave the y axis with no keys at all. y grows downwards, so ArrowUp
+    // moves the point towards 0.
+    const move = arrowKeyMove(event.key)
+    if (!move) return
     event.preventDefault()
     if (!onChange || inactive || !keyboard) return
-    // y grows downwards, so ArrowUp moves the point towards 0.
-    const direction = key === 'ArrowLeft' || key === 'ArrowUp' ? -1 : 1
-    nudge(axis, direction, keyboard, event)
+    editor.nudgePoint(
+      id,
+      move.axis === 0 ? 'x' : 'y',
+      move.direction,
+      keyboard,
+      event,
+    )
   }
 
   const current = clampPoint(value, min, max)
@@ -302,8 +259,6 @@ export function Point<T extends PointBaseType>({
       style={
         {
           '--color': color,
-          '--width': cssLength(size ?? width),
-          '--height': cssLength(size ?? height),
           // The mechanics of the position below: a point is placed by its
           // position in the container, measured from its own centre.
           position: 'absolute',
@@ -349,7 +304,7 @@ export function Point<T extends PointBaseType>({
               return
             }
             const delta = event.currentTarget.valueAsNumber - value[axis]
-            nudgeSelection(id, {
+            editor.nudgeSelection(id, {
               x: axis === 'x' ? delta : 0,
               y: axis === 'y' ? delta : 0,
             })

package/src/components/PointsEditor/SelectionBox.tsx

@@ -1,14 +1,9 @@
-import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'
+import { ComponentPropsWithoutRef, CSSProperties } from 'react'
 
 import { useCheckPlacement } from '../_util/Placement'
 
 import { usePointsEditorContext } from './context'
 
-export interface PointsEditorSelectionBoxProps {
-  /** Drawn inside the box, which is only there while a drag is running. */
-  children?: ReactNode
-}
-
 /**
  * The box a drag on empty space draws, and what it covers is selected.
  *
@@ -20,8 +15,7 @@ export function SelectionBox({
   className,
   style,
   ...props
-}: PointsEditorSelectionBoxProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorSelectionBoxProps>) {
+}: ComponentPropsWithoutRef<'div'>) {
   useCheckPlacement('PointsEditor.SelectionBox', 'PointsEditor.Container')
 
   const selectionBox = usePointsEditorContext((s) => s.selectionBox)