@pascal-app/editor 0.9.2 → 1.0.0-beta.1

package/src/components/editor/group-actions.ts

@@ -3,11 +3,13 @@ import {
   type AnyNodeId,
   bboxCornerAnchors,
   collectAlignmentAnchors,
+  emitter,
   pauseSceneHistory,
   pauseSpaceDetection,
   resolveAlignment,
   resumeSceneHistory,
   resumeSpaceDetection,
+  type SceneMaterialId,
   useLiveNodeOverrides,
   useLiveTransforms,
   useScene,
@@ -16,11 +18,18 @@ import { useViewer } from '@pascal-app/viewer'
 import { Plane, Vector2, Vector3 } from 'three'
 import { GROUP_MOVE_DRAG_LABEL } from '../../lib/contextual-help'
 import { clientToPlan } from '../../lib/floorplan/plan-coords'
-import { duplicateNodesToLevel } from '../../lib/scene-clipboard'
-import { sfxEmitter } from '../../lib/sfx-bus'
+import {
+  copySelectedNodesToEditorClipboard,
+  duplicateNodesToLevel,
+  getEditorClipboardSnapshot,
+  pasteSystemEditorClipboardToLevel,
+} from '../../lib/scene-clipboard'
+import { emitDeleteSFX, sfxEmitter } from '../../lib/sfx-bus'
 import useAlignmentGuides from '../../store/use-alignment-guides'
+import useDeleteConfirmation from '../../store/use-delete-confirmation'
 import useEditor, {
   isAlignmentGuideActive,
+  isBrushMode,
   isGridSnapActive,
   isMagneticSnapActive,
 } from '../../store/use-editor'
@@ -79,7 +88,7 @@ export function canGroupPickUp(): boolean {
  * and drag them along with the copies.
  */
 export function startGroupPickUp(
-  opts: { onCancel?: () => void; scopeToSelection?: boolean } = {},
+  opts: { onCancel?: () => void; positionAtCursor?: boolean; scopeToSelection?: boolean } = {},
 ): boolean {
   const { selectedIds, levelId } = useViewer.getState().selection
   const participantIds = groupParticipantIds()
@@ -202,16 +211,18 @@ export function startGroupPickUp(
   const applyMove = (e: PointerEvent) => {
     const plan = resolvePlanPoint(e)
     if (!plan) return
-    // Delta-relative to where tracking starts so the group never teleports
-    // to the cursor.
-    if (!startPlan) {
+    // Ordinary moves are delta-relative so the group never teleports. A
+    // pasted selection instead arrives centered under the cursor.
+    if (!opts.positionAtCursor && !startPlan) {
       startPlan = plan
       return
     }
     const step = useEditor.getState().gridSnapStep
     const snap = isGridSnapActive() && step > 0
-    let dx = snap ? Math.round((plan[0] - startPlan[0]) / step) * step : plan[0] - startPlan[0]
-    let dz = snap ? Math.round((plan[1] - startPlan[1]) / step) * step : plan[1] - startPlan[1]
+    const rawDx = opts.positionAtCursor ? plan[0] - restCenter[0] : plan[0] - startPlan![0]
+    const rawDz = opts.positionAtCursor ? plan[1] - restCenter[1] : plan[1] - startPlan![1]
+    let dx = snap ? Math.round(rawDx / step) * step : rawDx
+    let dz = snap ? Math.round(rawDz / step) * step : rawDz
 
     if (isAlignmentGuideActive() && candidates.length > 0 && restAnchors.length > 0) {
       const result = resolveAlignment({
@@ -361,6 +372,7 @@ export function startGroupPickUp(
     // Only a press over a tracked surface commits; a click on side panels or
     // the toolbar keeps the pick-up alive.
     if (!resolvePlanPoint(e)) return
+    if (opts.positionAtCursor && !lastDelta) applyMove(e)
     e.preventDefault()
     e.stopPropagation()
     commitPointerId = e.pointerId
@@ -380,6 +392,17 @@ export function startGroupPickUp(
 
   const onKeyDown = (e: KeyboardEvent) => {
     const key = e.key.toLowerCase()
+    if ((e.metaKey || e.ctrlKey) && (key === 'c' || key === 'v' || key === 'x')) {
+      // A clipboard chord replaces the current carry. Let the global keyboard
+      // arm receive the same event after this cancellation. Capture C/X first:
+      // pasted or duplicated carries delete their transient selection while
+      // cancelling, so the global arm would otherwise see nothing.
+      if (key === 'c' || key === 'x') {
+        copySelectedNodesToEditorClipboard()
+      }
+      cancel()
+      return
+    }
     if ((key === 'r' || key === 't') && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
       e.preventDefault()
       e.stopPropagation()
@@ -437,6 +460,112 @@ export function duplicateSelectionAndPickUp(): boolean {
   return true
 }
 
+function sceneReferencesMaterial(materialId: string) {
+  const reference = `scene:${materialId}`
+  const containsReference = (value: unknown): boolean => {
+    if (value === reference) return true
+    if (Array.isArray(value)) return value.some(containsReference)
+    if (value && typeof value === 'object') {
+      return Object.values(value).some(containsReference)
+    }
+    return false
+  }
+  return Object.values(useScene.getState().nodes).some(containsReference)
+}
+
+function removeUnusedPasteMaterials(materialIds: SceneMaterialId[]) {
+  for (const materialId of materialIds) {
+    if (!sceneReferencesMaterial(materialId)) {
+      useScene.getState().removeSceneMaterial(materialId)
+    }
+  }
+}
+
+/**
+ * Paste the Pascal scene payload from the browser clipboard onto the active
+ * level, then carry the clones under the cursor until click-to-place. Escape
+ * removes the uncommitted clones and any scene materials imported with them.
+ */
+export async function pasteSelectionAndPickUp(targetLevelId?: AnyNodeId): Promise<boolean> {
+  const activeScope = useInteractionScope.getState().scope
+  if (activeScope.kind === 'placing' || activeScope.kind === 'moving') {
+    emitter.emit('tool:cancel')
+  }
+  // Paint and sculpt hold their scope for the whole *mode*, so a pick-up would
+  // `begin({kind: 'handle-drag'})` over it — scopes are single-owner, so the brush
+  // would stay armed and painting while the editor believed a group move was
+  // running, and the mode's own release would then end someone else's scope.
+  // ⌘V is reachable from either mode (it reads the clipboard, not the selection,
+  // which is why clearing the selection on mode entry does not cover it), so drop
+  // the brush first: carrying clones is the newer intent, and unlike the cancels
+  // above there is nothing to abandon.
+  if (isBrushMode(useEditor.getState().mode)) useEditor.getState().setMode('select')
+
+  const result = await pasteSystemEditorClipboardToLevel(targetLevelId)
+  if (!result || result.pastedIds.length === 0) return false
+
+  const discardPaste = () => {
+    useScene.getState().deleteNodes(result.pastedIds)
+    removeUnusedPasteMaterials(result.createdMaterialIds)
+    useViewer.getState().setSelection({ selectedIds: [] })
+  }
+  if (result.pastedIds.length === 1) {
+    const rootId = result.pastedIds[0]!
+    const root = useScene.getState().nodes[rootId]
+    if (root?.type === 'door' || root?.type === 'window') {
+      const metadata =
+        root.metadata && typeof root.metadata === 'object' && !Array.isArray(root.metadata)
+          ? (root.metadata as Record<string, unknown>)
+          : {}
+      const draft = { ...root, metadata: { ...metadata, isNew: true } }
+      useScene.getState().updateNode(rootId, { metadata: draft.metadata })
+      useViewer.getState().setSelection({ selectedIds: [] })
+      const unsubscribe = useInteractionScope.subscribe((state, previous) => {
+        const previousOwnsDraft =
+          (previous.scope.kind === 'placing' || previous.scope.kind === 'moving') &&
+          previous.scope.nodeId === rootId
+        const currentOwnsDraft =
+          (state.scope.kind === 'placing' || state.scope.kind === 'moving') &&
+          state.scope.nodeId === rootId
+        if (!previousOwnsDraft || currentOwnsDraft) return
+        unsubscribe()
+        removeUnusedPasteMaterials(result.createdMaterialIds)
+      })
+      useEditor.getState().setMovingNode(draft)
+      sfxEmitter.emit('sfx:item-pick')
+      return true
+    }
+  }
+
+  const started = startGroupPickUp({
+    positionAtCursor: true,
+    scopeToSelection: true,
+    onCancel: discardPaste,
+  })
+  if (!started) sfxEmitter.emit('sfx:item-place')
+  return true
+}
+
+/**
+ * Cut uses the same cross-tab clipboard payload as Copy, then removes exactly
+ * the copied roots. Promoted subtree selections (such as all modules in one
+ * cabinet run) therefore remove the same root that Paste will recreate.
+ */
+export function cutSelectionToEditorClipboard(): boolean {
+  if (!copySelectedNodesToEditorClipboard()) return false
+  const payload = getEditorClipboardSnapshot()
+  if (!payload || payload.rootIds.length === 0) return false
+
+  if (payload.rootIds.length === 1) {
+    emitDeleteSFX(useScene.getState().nodes[payload.rootIds[0]!]?.type)
+  } else {
+    sfxEmitter.emit('sfx:structure-delete')
+  }
+  useScene.getState().deleteNodes(payload.rootIds)
+  useViewer.getState().setSelection({ selectedIds: [] })
+  return true
+}
+
 /**
  * Delete every selected node — same semantics as the keyboard Delete arm,
  * including the accidental-bulk-delete confirm.
@@ -444,14 +573,25 @@ export function duplicateSelectionAndPickUp(): boolean {
 export function deleteSelection(): boolean {
   const selectedIds = useViewer.getState().selection.selectedIds as AnyNodeId[]
   if (selectedIds.length === 0) return false
+
+  const commitDelete = () => {
+    if (selectedIds.length === 1) {
+      emitDeleteSFX(useScene.getState().nodes[selectedIds[0]!]?.type)
+    } else {
+      sfxEmitter.emit('sfx:structure-delete')
+    }
+    useScene.getState().deleteNodes(selectedIds)
+    useViewer.getState().setSelection({ selectedIds: [] })
+  }
+
   if (selectedIds.length >= BULK_DELETE_THRESHOLD) {
-    const confirmed = window.confirm(
-      `Delete ${selectedIds.length} selected elements? This cannot be undone if the undo history is exhausted.`,
-    )
-    if (!confirmed) return false
+    useDeleteConfirmation.getState().requestConfirmation({
+      count: selectedIds.length,
+      onConfirm: commitDelete,
+    })
+    return true
   }
-  sfxEmitter.emit('sfx:structure-delete')
-  useScene.getState().deleteNodes(selectedIds)
-  useViewer.getState().setSelection({ selectedIds: [] })
+
+  commitDelete()
   return true
 }

package/src/components/editor/group-floating-action-menu.tsx

@@ -60,6 +60,7 @@ export function GroupFloatingActionMenu() {
   // memo keyed on selection + nodes is enough, no per-frame box traversal.
   const meshEpoch = useMeshSettleEpoch(nodes)
   const anchor = useMemo(() => {
+    void meshEpoch
     if (participantIds.length === 0) return null
     const fullIds = expandToComponent(participantIds, nodes, levelId)
     const box = computeGroupBox(fullIds)
@@ -69,7 +70,6 @@ export function GroupFloatingActionMenu() {
       box.max.y + MENU_Y_OFFSET,
       (box.min.z + box.max.z) / 2,
     )
-    // biome-ignore lint/correctness/useExhaustiveDependencies: meshEpoch re-measures settled meshes
   }, [participantIds, nodes, levelId, meshEpoch])
 
   useFrame((state) => {

package/src/components/editor/group-rotate-handle.tsx

@@ -132,6 +132,7 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
   //   - `pivot`  = bbox center (XZ), Y at the group's base → the rotation origin
   //   - `corner` = front-right bbox corner at mid-height → where the gizmo sits
   const rest = useMemo(() => {
+    void meshEpoch
     const box = computeGroupBox(ids)
     if (!box) return null
     const pivot = new Vector3((box.min.x + box.max.x) / 2, box.min.y, (box.min.z + box.max.z) / 2)
@@ -141,7 +142,6 @@ function GroupRotateHandleInner({ ids, meshEpoch }: { ids: string[]; meshEpoch:
       box.max.z + CORNER_OFFSET,
     )
     return { pivot, corner }
-    // biome-ignore lint/correctness/useExhaustiveDependencies: meshEpoch re-measures settled meshes
   }, [ids, meshEpoch])
 
   if (!rest) return null

package/src/components/editor/group-selection-box-3d.tsx

@@ -53,6 +53,7 @@ export function GroupSelectionBox3D() {
   // Re-measure once the meshes settle after a scene change (undo included).
   const meshEpoch = useMeshSettleEpoch(nodes)
   const box = useMemo(() => {
+    void meshEpoch
     if (participantIds.length === 0) return null
     const fullIds = expandToComponent(participantIds, nodes, levelId)
     const world = computeGroupBox(fullIds)
@@ -69,7 +70,6 @@ export function GroupSelectionBox3D() {
       ],
       center,
     }
-    // biome-ignore lint/correctness/useExhaustiveDependencies: meshEpoch re-measures settled meshes
   }, [participantIds, nodes, levelId, meshEpoch])
 
   // Dashed wireframe. Built per box size (rare — selection / commit changes)

package/src/components/editor/handles/handle-drag-history.test.ts

@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, test } from 'bun:test'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  runAsSingleSceneHistoryStep,
+  useScene,
+} from '@pascal-app/core'
+import { commitHandleDragPatch } from './handle-drag-history'
+
+type RafFn = (callback: (time: number) => void) => number
+;(globalThis as { requestAnimationFrame?: RafFn }).requestAnimationFrame ??= (callback) => {
+  callback(0)
+  return 0
+}
+;(globalThis as { cancelAnimationFrame?: (id: number) => void }).cancelAnimationFrame ??= () => {}
+
+const NODE_ID = 'shelf_handle-drag-history' as AnyNodeId
+const COMPANION_NODE_ID = 'shelf_handle-drag-history-companion' as AnyNodeId
+
+function shelf(depth: number, id = NODE_ID): AnyNode {
+  return {
+    id,
+    type: 'shelf',
+    object: 'node',
+    parentId: null,
+    visible: true,
+    metadata: {},
+    children: [],
+    position: [0, 0, 0],
+    rotation: [0, 0, 0],
+    width: 1,
+    depth,
+    thickness: 0.04,
+    height: 0.9,
+    style: 'wall-shelf',
+    rows: 1,
+    columns: 1,
+    withBack: false,
+    withSides: true,
+    withBottom: false,
+    bracketStyle: 'minimal',
+  } as AnyNode
+}
+
+describe('commitHandleDragPatch', () => {
+  beforeEach(() => {
+    useScene.setState({ nodes: {}, rootNodeIds: [], dirtyNodes: new Set() } as never)
+    useScene.temporal.getState().clear()
+    useScene.temporal.getState().resume()
+  })
+
+  test('records the final patch as one undo step after preview history is resumed', () => {
+    useScene.getState().createNode(shelf(0.3))
+    const pastCount = useScene.temporal.getState().pastStates.length
+    useScene.temporal.getState().pause()
+
+    commitHandleDragPatch({
+      patch: { depth: 0.7 },
+      resumeHistory: () => useScene.temporal.getState().resume(),
+      runAsSingleHistoryStep: (run) => runAsSingleSceneHistoryStep(useScene, run),
+      commit: (patch) => useScene.getState().updateNode(NODE_ID, patch),
+    })
+
+    expect(useScene.temporal.getState().pastStates).toHaveLength(pastCount + 1)
+    expect((useScene.getState().nodes[NODE_ID] as { depth: number }).depth).toBe(0.7)
+
+    useScene.temporal.getState().undo()
+    expect(useScene.getState().nodes[NODE_ID]).toBeDefined()
+    expect((useScene.getState().nodes[NODE_ID] as { depth: number }).depth).toBe(0.3)
+  })
+
+  test('records a composite multi-node commit as one undo step', () => {
+    useScene.getState().createNode(shelf(0.3))
+    useScene.getState().createNode(shelf(0.4, COMPANION_NODE_ID))
+    useScene.temporal.getState().clear()
+    useScene.temporal.getState().pause()
+
+    commitHandleDragPatch({
+      patch: { selectedDepth: 0.7, companionDepth: 0.2 },
+      resumeHistory: () => useScene.temporal.getState().resume(),
+      runAsSingleHistoryStep: (run) => runAsSingleSceneHistoryStep(useScene, run),
+      commit: ({ selectedDepth, companionDepth }) => {
+        useScene.getState().updateNode(NODE_ID, { depth: selectedDepth })
+        useScene.getState().updateNode(COMPANION_NODE_ID, { depth: companionDepth })
+      },
+    })
+
+    expect(useScene.temporal.getState().pastStates).toHaveLength(1)
+    expect((useScene.getState().nodes[NODE_ID] as { depth: number }).depth).toBe(0.7)
+    expect((useScene.getState().nodes[COMPANION_NODE_ID] as { depth: number }).depth).toBe(0.2)
+
+    useScene.temporal.getState().undo()
+    expect((useScene.getState().nodes[NODE_ID] as { depth: number }).depth).toBe(0.3)
+    expect((useScene.getState().nodes[COMPANION_NODE_ID] as { depth: number }).depth).toBe(0.4)
+  })
+})

package/src/components/editor/handles/handle-drag-history.ts

@@ -0,0 +1,14 @@
+export function commitHandleDragPatch<T>({
+  commit,
+  patch,
+  resumeHistory,
+  runAsSingleHistoryStep,
+}: {
+  commit: (patch: T) => void
+  patch: T
+  resumeHistory: () => void
+  runAsSingleHistoryStep: (run: () => void) => void
+}) {
+  resumeHistory()
+  runAsSingleHistoryStep(() => commit(patch))
+}

package/src/components/editor/handles/preview-overrides.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, mock, test } from 'bun:test'
+import type { AnyNodeId } from '@pascal-app/core'
+import { replacePreviewOverrideIds } from './preview-overrides'
+
+const FIRST_ID = 'cabinet_first' as AnyNodeId
+const SECOND_ID = 'cabinet_second' as AnyNodeId
+const THIRD_ID = 'cabinet_third' as AnyNodeId
+
+describe('replacePreviewOverrideIds', () => {
+  test('clears companion overrides that leave the active preview', () => {
+    const clear = mock(() => {})
+
+    const nextIds = replacePreviewOverrideIds(
+      new Set([FIRST_ID, SECOND_ID]),
+      [
+        [SECOND_ID, { width: 0.7 }],
+        [THIRD_ID, { width: 0.5 }],
+      ],
+      clear,
+    )
+
+    expect(clear).toHaveBeenCalledTimes(1)
+    expect(clear).toHaveBeenCalledWith(FIRST_ID)
+    expect(nextIds).toEqual(new Set([SECOND_ID, THIRD_ID]))
+  })
+})

package/src/components/editor/handles/preview-overrides.ts

@@ -0,0 +1,13 @@
+import type { AnyNode, AnyNodeId } from '@pascal-app/core'
+
+export function replacePreviewOverrideIds(
+  activeIds: ReadonlySet<AnyNodeId>,
+  entries: ReadonlyArray<readonly [AnyNodeId, Partial<AnyNode>]>,
+  clear: (id: AnyNodeId) => void,
+): Set<AnyNodeId> {
+  const nextIds = new Set(entries.map(([id]) => id))
+  for (const id of activeIds) {
+    if (!nextIds.has(id)) clear(id)
+  }
+  return nextIds
+}

package/src/components/editor/handles/resize-snap.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it, mock } from 'bun:test'
+import { resolveResizeSnapValue } from './resize-snap'
+
+describe('resolveResizeSnapValue', () => {
+  it('applies only magnetic snapping in lines mode', () => {
+    const magneticSnap = mock(() => 0.6)
+
+    expect(
+      resolveResizeSnapValue({
+        rawValue: 0.59,
+        gridSnapEnabled: true,
+        gridSnapActive: false,
+        gridSnapStep: 0.1,
+        magneticSnapActive: true,
+        magneticSnap,
+      }),
+    ).toBe(0.6)
+    expect(magneticSnap).toHaveBeenCalledWith(0.59)
+  })
+
+  it('applies only grid snapping in grid mode', () => {
+    const magneticSnap = mock(() => 0.6)
+
+    expect(
+      resolveResizeSnapValue({
+        rawValue: 0.56,
+        gridSnapEnabled: true,
+        gridSnapActive: true,
+        gridSnapStep: 0.1,
+        magneticSnapActive: false,
+        magneticSnap,
+      }),
+    ).toBeCloseTo(0.6)
+    expect(magneticSnap).not.toHaveBeenCalled()
+  })
+
+  it('keeps the raw value in off mode', () => {
+    const magneticSnap = mock(() => 0.6)
+
+    expect(
+      resolveResizeSnapValue({
+        rawValue: 0.56,
+        gridSnapEnabled: true,
+        gridSnapActive: false,
+        gridSnapStep: 0.1,
+        magneticSnapActive: false,
+        magneticSnap,
+      }),
+    ).toBe(0.56)
+    expect(magneticSnap).not.toHaveBeenCalled()
+  })
+})

package/src/components/editor/handles/resize-snap.ts

@@ -0,0 +1,23 @@
+import { snapScalar } from '@pascal-app/core'
+
+export function resolveResizeSnapValue({
+  rawValue,
+  gridSnapEnabled,
+  gridSnapActive,
+  gridSnapStep,
+  magneticSnapActive,
+  magneticSnap,
+}: {
+  rawValue: number
+  gridSnapEnabled: boolean
+  gridSnapActive: boolean
+  gridSnapStep: number
+  magneticSnapActive: boolean
+  magneticSnap?: (value: number) => number
+}): number {
+  const gridValue =
+    gridSnapEnabled && gridSnapActive && gridSnapStep > 0
+      ? snapScalar(rawValue, gridSnapStep)
+      : rawValue
+  return magneticSnapActive && magneticSnap ? magneticSnap(gridValue) : gridValue
+}

package/src/components/editor/handles/use-handle-drag.ts

@@ -5,6 +5,7 @@ import {
   type AnyNodeId,
   type Cursor,
   createSceneApi,
+  runAsSingleSceneHistoryStep,
   useLiveNodeOverrides,
   useScene,
 } from '@pascal-app/core'
@@ -15,6 +16,7 @@ import { type Camera, type Object3D, type Plane, type Ray, Vector2, type Vector3
 import { isHistoryShortcut } from '../../../lib/history'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { suppressBoxSelectForPointer } from '../../tools/select/box-select-state'
+import { commitHandleDragPatch } from './handle-drag-history'
 
 export type HandleDragControls = {
   onStart: (index: number, snapshot: AnyNode) => void
@@ -174,6 +176,13 @@ export function useHandleDrag(args: UseHandleDragArgs) {
     session.onBegin?.()
 
     let lastPatch: Partial<AnyNode> | null = null
+    let historyPaused = true
+
+    const resumeHistory = () => {
+      if (!historyPaused) return
+      historyPaused = false
+      useScene.temporal.getState().resume()
+    }
 
     const onMove = (moveEvent: PointerEvent) => {
       const patch = session.move({ event: moveEvent, getPointerRay, intersectPlane })
@@ -193,7 +202,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       if (document.body.style.cursor === cursor) {
         document.body.style.cursor = ''
       }
-      useScene.temporal.getState().resume()
+      resumeHistory()
       useViewer.getState().setInputDragging(false)
       setIsDragging(false)
       session.onEnd?.()
@@ -212,11 +221,12 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       swallowNextClick()
       sfxEmitter.emit('sfx:item-place')
       if (lastPatch) {
-        if (session.commit) {
-          session.commit(lastPatch)
-        } else {
-          sceneApi.update(overrideId, lastPatch)
-        }
+        commitHandleDragPatch({
+          patch: lastPatch,
+          resumeHistory,
+          runAsSingleHistoryStep: (run) => runAsSingleSceneHistoryStep(useScene, run),
+          commit: session.commit ?? ((patch) => sceneApi.update(overrideId, patch)),
+        })
       }
       clearOverride()
       cleanup()
@@ -237,7 +247,7 @@ export function useHandleDrag(args: UseHandleDragArgs) {
       onCancel()
     }
 
-    dragCleanupRef.current = cleanup
+    dragCleanupRef.current = onCancel
     window.addEventListener('pointermove', onMove)
     window.addEventListener('pointerup', onUp)
     window.addEventListener('pointercancel', onCancel)