@pascal-app/editor 0.7.0 → 0.9.1

package/src/components/tools/slab/move-slab-tool.tsx

@@ -1,182 +0,0 @@
-'use client'
-
-import {
-  type AnyNodeId,
-  emitter,
-  type FenceNode,
-  type GridEvent,
-  type LevelNode,
-  type SlabNode,
-  useScene,
-  type WallNode,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import useEditor from '../../../store/use-editor'
-import { snapFenceDraftPoint } from '../fence/fence-drafting'
-import { CursorSphere } from '../shared/cursor-sphere'
-
-function translatePolygon(
-  polygon: Array<[number, number]>,
-  deltaX: number,
-  deltaZ: number,
-): Array<[number, number]> {
-  return polygon.map(([x, z]) => [x + deltaX, z + deltaZ] as [number, number])
-}
-
-function getPolygonCenter(polygon: Array<[number, number]>): [number, number] {
-  if (polygon.length === 0) return [0, 0]
-  let sumX = 0
-  let sumZ = 0
-  for (const [x, z] of polygon) {
-    sumX += x
-    sumZ += z
-  }
-  return [sumX / polygon.length, sumZ / polygon.length]
-}
-
-export const MoveSlabTool: React.FC<{ node: SlabNode }> = ({ node }) => {
-  const activatedAtRef = useRef<number>(Date.now())
-  const originalPolygonRef = useRef(node.polygon.map(([x, z]) => [x, z] as [number, number]))
-  const originalHolesRef = useRef(
-    (node.holes ?? []).map((hole) => hole.map(([x, z]) => [x, z] as [number, number])),
-  )
-  const dragAnchorRef = useRef<[number, number] | null>(null)
-  const previousGridPosRef = useRef<[number, number] | null>(null)
-  const previewRef = useRef<{
-    polygon: Array<[number, number]>
-    holes: Array<Array<[number, number]>>
-  } | null>(null)
-
-  const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
-    const center = getPolygonCenter(node.polygon)
-    return [center[0], 0, center[1]]
-  })
-
-  const exitMoveMode = useCallback(() => {
-    useEditor.getState().setMovingNode(null)
-  }, [])
-
-  useEffect(() => {
-    const originalPolygon = originalPolygonRef.current
-    const originalHoles = originalHolesRef.current
-    const levelNode =
-      node.parentId && useScene.getState().nodes[node.parentId as AnyNodeId]?.type === 'level'
-        ? (useScene.getState().nodes[node.parentId as AnyNodeId] as LevelNode)
-        : null
-    const levelChildren = levelNode?.children ?? []
-    const levelWalls = levelChildren
-      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
-      .filter((child): child is WallNode => child?.type === 'wall')
-    const levelFences = levelChildren
-      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
-      .filter((child): child is FenceNode => child?.type === 'fence')
-
-    useScene.temporal.getState().pause()
-    let wasCommitted = false
-
-    const applyPreview = (
-      polygon: Array<[number, number]>,
-      holes: Array<Array<[number, number]>>,
-    ) => {
-      previewRef.current = { polygon, holes }
-      const center = getPolygonCenter(polygon)
-      setCursorLocalPos([center[0], 0, center[1]])
-      useScene.getState().updateNode(node.id, { polygon, holes })
-      useScene.getState().markDirty(node.id as AnyNodeId)
-    }
-
-    const restoreOriginal = () => {
-      useScene.getState().updateNode(node.id, {
-        holes: originalHoles,
-        polygon: originalPolygon,
-      })
-      useScene.getState().markDirty(node.id as AnyNodeId)
-    }
-
-    const onGridMove = (event: GridEvent) => {
-      const [localX, localZ] = snapFenceDraftPoint({
-        point: [event.localPosition[0], event.localPosition[2]],
-        walls: levelWalls,
-        fences: levelFences,
-      })
-
-      if (
-        previousGridPosRef.current &&
-        (localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
-      ) {
-        sfxEmitter.emit('sfx:grid-snap')
-      }
-      previousGridPosRef.current = [localX, localZ]
-
-      const anchor = dragAnchorRef.current ?? [localX, localZ]
-      dragAnchorRef.current = anchor
-
-      const deltaX = localX - anchor[0]
-      const deltaZ = localZ - anchor[1]
-
-      applyPreview(
-        translatePolygon(originalPolygon, deltaX, deltaZ),
-        originalHoles.map((hole) => translatePolygon(hole, deltaX, deltaZ)),
-      )
-    }
-
-    const onGridClick = (event: GridEvent) => {
-      if (Date.now() - activatedAtRef.current < 150) {
-        event.nativeEvent?.stopPropagation?.()
-        return
-      }
-
-      const preview = previewRef.current ?? { polygon: originalPolygon, holes: originalHoles }
-
-      wasCommitted = true
-
-      // Restore original baseline while paused so the next resume+update
-      // registers as a single tracked change (undo reverts to original).
-      useScene.getState().updateNode(node.id, {
-        polygon: originalPolygon,
-        holes: originalHoles,
-      })
-
-      useScene.temporal.getState().resume()
-      useScene.getState().updateNode(node.id, preview)
-      useScene.getState().markDirty(node.id as AnyNodeId)
-      useScene.temporal.getState().pause()
-
-      sfxEmitter.emit('sfx:item-place')
-      useViewer.getState().setSelection({ selectedIds: [node.id] })
-      exitMoveMode()
-      event.nativeEvent?.stopPropagation?.()
-    }
-
-    const onCancel = () => {
-      restoreOriginal()
-      useViewer.getState().setSelection({ selectedIds: [node.id] })
-      useScene.temporal.getState().resume()
-      markToolCancelConsumed()
-      exitMoveMode()
-    }
-
-    emitter.on('grid:move', onGridMove)
-    emitter.on('grid:click', onGridClick)
-    emitter.on('tool:cancel', onCancel)
-
-    return () => {
-      if (!wasCommitted) {
-        restoreOriginal()
-      }
-      useScene.temporal.getState().resume()
-      emitter.off('grid:move', onGridMove)
-      emitter.off('grid:click', onGridClick)
-      emitter.off('tool:cancel', onCancel)
-    }
-  }, [exitMoveMode, node.id])
-
-  return (
-    <group>
-      <CursorSphere position={cursorLocalPos} showTooltip={false} />
-    </group>
-  )
-}

package/src/components/tools/slab/slab-boundary-editor.tsx

@@ -1,43 +0,0 @@
-import { resolveLevelId, type SlabNode, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useCallback } from 'react'
-import { PolygonEditor } from '../shared/polygon-editor'
-
-interface SlabBoundaryEditorProps {
-  slabId: SlabNode['id']
-}
-
-/**
- * Slab boundary editor - allows editing slab polygon vertices for a specific slab
- * Uses the generic PolygonEditor component
- */
-export const SlabBoundaryEditor: React.FC<SlabBoundaryEditorProps> = ({ slabId }) => {
-  const slabNode = useScene((state) => state.nodes[slabId])
-  const updateNode = useScene((state) => state.updateNode)
-  const setSelection = useViewer((state) => state.setSelection)
-
-  const slab = slabNode?.type === 'slab' ? (slabNode as SlabNode) : null
-
-  const handlePolygonChange = useCallback(
-    (newPolygon: Array<[number, number]>) => {
-      updateNode(slabId, { polygon: newPolygon })
-      // Re-assert selection so the slab stays selected after the edit
-      setSelection({ selectedIds: [slabId] })
-    },
-    [slabId, updateNode, setSelection],
-  )
-
-  if (!slab?.polygon || slab.polygon.length < 3) return null
-
-  return (
-    <PolygonEditor
-      allowEdgeMove
-      color="#a3a3a3"
-      levelId={resolveLevelId(slab, useScene.getState().nodes)}
-      minVertices={3}
-      onPolygonChange={handlePolygonChange}
-      polygon={slab.polygon}
-      surfaceHeight={slab.elevation ?? 0.05}
-    />
-  )
-}

package/src/components/tools/slab/slab-hole-editor.tsx

@@ -1,49 +0,0 @@
-import { resolveLevelId, type SlabNode, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useCallback } from 'react'
-import { PolygonEditor } from '../shared/polygon-editor'
-
-interface SlabHoleEditorProps {
-  slabId: SlabNode['id']
-  holeIndex: number
-}
-
-/**
- * Slab hole editor - allows editing a specific hole polygon within a slab
- * Uses the generic PolygonEditor component
- */
-export const SlabHoleEditor: React.FC<SlabHoleEditorProps> = ({ slabId, holeIndex }) => {
-  const slabNode = useScene((state) => state.nodes[slabId])
-  const updateNode = useScene((state) => state.updateNode)
-  const setSelection = useViewer((state) => state.setSelection)
-
-  const slab = slabNode?.type === 'slab' ? (slabNode as SlabNode) : null
-  const holes = slab?.holes || []
-  const hole = holes[holeIndex]
-
-  const handlePolygonChange = useCallback(
-    (newPolygon: Array<[number, number]>) => {
-      const updatedHoles = [...holes]
-      updatedHoles[holeIndex] = newPolygon
-      updateNode(slabId, { holes: updatedHoles })
-      // Re-assert selection so the slab stays selected after the edit
-      setSelection({ selectedIds: [slabId] })
-    },
-    [slabId, holeIndex, holes, updateNode, setSelection],
-  )
-
-  if (!(slab && hole) || hole.length < 3) return null
-
-  return (
-    <PolygonEditor
-      allowEdgeMove
-      allowPolygonMove
-      color="#ef4444"
-      levelId={resolveLevelId(slab, useScene.getState().nodes)} // red for holes
-      minVertices={3}
-      onPolygonChange={handlePolygonChange}
-      polygon={hole}
-      surfaceHeight={slab.elevation ?? 0.05}
-    />
-  )
-}

package/src/components/tools/slab/slab-tool.tsx

@@ -1,322 +0,0 @@
-import { emitter, type GridEvent, type LevelNode, SlabNode, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { BufferGeometry, DoubleSide, type Group, type Line, Shape, Vector3 } from 'three'
-import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
-import { EDITOR_LAYER } from '../../../lib/constants'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import { CursorSphere } from '../shared/cursor-sphere'
-
-const Y_OFFSET = 0.02
-
-/**
- * Snaps a point to the nearest axis-aligned or 45-degree diagonal from the last point
- */
-const calculateSnapPoint = (
-  lastPoint: [number, number],
-  currentPoint: [number, number],
-): [number, number] => {
-  const [x1, y1] = lastPoint
-  const [x, y] = currentPoint
-
-  const dx = x - x1
-  const dy = y - y1
-  const absDx = Math.abs(dx)
-  const absDy = Math.abs(dy)
-
-  // Calculate distances to horizontal, vertical, and diagonal lines
-  const horizontalDist = absDy
-  const verticalDist = absDx
-  const diagonalDist = Math.abs(absDx - absDy)
-
-  // Find the minimum distance to determine which axis to snap to
-  const minDist = Math.min(horizontalDist, verticalDist, diagonalDist)
-
-  if (minDist === diagonalDist) {
-    // Snap to 45° diagonal
-    const diagonalLength = Math.min(absDx, absDy)
-    return [x1 + Math.sign(dx) * diagonalLength, y1 + Math.sign(dy) * diagonalLength]
-  }
-  if (minDist === horizontalDist) {
-    // Snap to horizontal
-    return [x, y1]
-  }
-  // Snap to vertical
-  return [x1, y]
-}
-
-/**
- * Creates a slab with the given polygon points and returns its ID
- */
-const commitSlabDrawing = (levelId: LevelNode['id'], points: Array<[number, number]>): string => {
-  const { createNode, nodes } = useScene.getState()
-
-  // Count existing slabs for naming
-  const slabCount = Object.values(nodes).filter((n) => n.type === 'slab').length
-  const name = `Slab ${slabCount + 1}`
-
-  const slab = SlabNode.parse({
-    name,
-    polygon: points,
-  })
-
-  createNode(slab, levelId)
-  sfxEmitter.emit('sfx:structure-build')
-  return slab.id
-}
-
-export const SlabTool: React.FC = () => {
-  const cursorRef = useRef<Group>(null)
-  const mainLineRef = useRef<Line>(null!)
-  const closingLineRef = useRef<Line>(null!)
-  const currentLevelId = useViewer((state) => state.selection.levelId)
-  const setSelection = useViewer((state) => state.setSelection)
-
-  const [points, setPoints] = useState<Array<[number, number]>>([])
-  const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0])
-  const [snappedCursorPosition, setSnappedCursorPosition] = useState<[number, number]>([0, 0])
-  const [levelY, setLevelY] = useState(0)
-  const previousSnappedPointRef = useRef<[number, number] | null>(null)
-  const shiftPressed = useRef(false)
-
-  // Update cursor position and lines on grid move
-  useEffect(() => {
-    if (!currentLevelId) return
-
-    const onGridMove = (event: GridEvent) => {
-      if (!cursorRef.current) return
-
-      const gridX = Math.round(event.localPosition[0] * 2) / 2
-      const gridZ = Math.round(event.localPosition[2] * 2) / 2
-      const gridPosition: [number, number] = [gridX, gridZ]
-
-      setCursorPosition(gridPosition)
-      setLevelY(event.localPosition[1])
-
-      // Calculate snapped display position (bypass snap when Shift is held)
-      const lastPoint = points[points.length - 1]
-      const displayPoint =
-        shiftPressed.current || !lastPoint
-          ? gridPosition
-          : calculateSnapPoint(lastPoint, gridPosition)
-      setSnappedCursorPosition(displayPoint)
-
-      // Play snap sound when the snapped position actually changes (only when drawing)
-      if (
-        points.length > 0 &&
-        previousSnappedPointRef.current &&
-        (displayPoint[0] !== previousSnappedPointRef.current[0] ||
-          displayPoint[1] !== previousSnappedPointRef.current[1])
-      ) {
-        sfxEmitter.emit('sfx:grid-snap')
-      }
-
-      previousSnappedPointRef.current = displayPoint
-      cursorRef.current.position.set(displayPoint[0], event.localPosition[1], displayPoint[1])
-    }
-
-    const onGridClick = (_event: GridEvent) => {
-      if (!currentLevelId) return
-
-      // Use the last displayed snapped position (respects Shift state from onGridMove)
-      const clickPoint = previousSnappedPointRef.current ?? cursorPosition
-
-      // Check if clicking on the first point to close the shape
-      const firstPoint = points[0]
-      if (
-        points.length >= 3 &&
-        firstPoint &&
-        Math.abs(clickPoint[0] - firstPoint[0]) < 0.25 &&
-        Math.abs(clickPoint[1] - firstPoint[1]) < 0.25
-      ) {
-        // Create the slab and select it
-        const slabId = commitSlabDrawing(currentLevelId, points)
-        setSelection({ selectedIds: [slabId] })
-        setPoints([])
-      } else {
-        // Add point to polygon
-        setPoints([...points, clickPoint])
-      }
-    }
-
-    const onGridDoubleClick = (_event: GridEvent) => {
-      if (!currentLevelId) return
-
-      // Need at least 3 points to form a polygon
-      if (points.length >= 3) {
-        const slabId = commitSlabDrawing(currentLevelId, points)
-        setSelection({ selectedIds: [slabId] })
-        setPoints([])
-      }
-    }
-
-    const onCancel = () => {
-      if (points.length > 0) markToolCancelConsumed()
-      setPoints([])
-    }
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Shift') shiftPressed.current = true
-    }
-    const onKeyUp = (e: KeyboardEvent) => {
-      if (e.key === 'Shift') shiftPressed.current = false
-    }
-    document.addEventListener('keydown', onKeyDown)
-    document.addEventListener('keyup', onKeyUp)
-
-    emitter.on('grid:move', onGridMove)
-    emitter.on('grid:click', onGridClick)
-    emitter.on('grid:double-click', onGridDoubleClick)
-    emitter.on('tool:cancel', onCancel)
-
-    return () => {
-      document.removeEventListener('keydown', onKeyDown)
-      document.removeEventListener('keyup', onKeyUp)
-      emitter.off('grid:move', onGridMove)
-      emitter.off('grid:click', onGridClick)
-      emitter.off('grid:double-click', onGridDoubleClick)
-      emitter.off('tool:cancel', onCancel)
-    }
-  }, [currentLevelId, points, cursorPosition, setSelection])
-
-  // Update line geometries when points change
-  useEffect(() => {
-    if (!(mainLineRef.current && closingLineRef.current)) return
-
-    if (points.length === 0) {
-      mainLineRef.current.visible = false
-      closingLineRef.current.visible = false
-      return
-    }
-
-    const y = levelY + Y_OFFSET
-    const snappedCursor = snappedCursorPosition
-
-    // Build main line points
-    const linePoints: Vector3[] = points.map(([x, z]) => new Vector3(x, y, z))
-    linePoints.push(new Vector3(snappedCursor[0], y, snappedCursor[1]))
-
-    // Update main line
-    if (linePoints.length >= 2) {
-      mainLineRef.current.geometry.dispose()
-      mainLineRef.current.geometry = new BufferGeometry().setFromPoints(linePoints)
-      mainLineRef.current.visible = true
-    } else {
-      mainLineRef.current.visible = false
-    }
-
-    // Update closing line (from cursor back to first point)
-    const firstPoint = points[0]
-    if (points.length >= 2 && firstPoint) {
-      const closingPoints = [
-        new Vector3(snappedCursor[0], y, snappedCursor[1]),
-        new Vector3(firstPoint[0], y, firstPoint[1]),
-      ]
-      closingLineRef.current.geometry.dispose()
-      closingLineRef.current.geometry = new BufferGeometry().setFromPoints(closingPoints)
-      closingLineRef.current.visible = true
-    } else {
-      closingLineRef.current.visible = false
-    }
-  }, [points, snappedCursorPosition, levelY])
-
-  // Create preview shape when we have 3+ points
-  const previewShape = useMemo(() => {
-    if (points.length < 3) return null
-
-    const snappedCursor = snappedCursorPosition
-
-    const allPoints = [...points, snappedCursor]
-
-    // THREE.Shape is in X-Y plane. After rotation of -PI/2 around X:
-    // - Shape X -> World X
-    // - Shape Y -> World -Z (so we negate Z to get correct orientation)
-    const firstPt = allPoints[0]
-    if (!firstPt) return null
-
-    const shape = new Shape()
-    shape.moveTo(firstPt[0], -firstPt[1])
-
-    for (let i = 1; i < allPoints.length; i++) {
-      const pt = allPoints[i]
-      if (pt) {
-        shape.lineTo(pt[0], -pt[1])
-      }
-    }
-    shape.closePath()
-
-    return shape
-  }, [points, snappedCursorPosition])
-
-  return (
-    <group>
-      {/* Cursor */}
-      <CursorSphere ref={cursorRef} />
-
-      {/* Preview fill */}
-      {previewShape && (
-        <mesh
-          frustumCulled={false}
-          layers={EDITOR_LAYER}
-          position={[0, levelY + Y_OFFSET, 0]}
-          rotation={[-Math.PI / 2, 0, 0]}
-        >
-          <shapeGeometry args={[previewShape]} />
-          <meshBasicMaterial
-            color="#818cf8"
-            depthTest={false}
-            opacity={0.15}
-            side={DoubleSide}
-            transparent
-          />
-        </mesh>
-      )}
-
-      {/* Main line */}
-      {/* @ts-ignore */}
-      <line
-        frustumCulled={false}
-        layers={EDITOR_LAYER}
-        // @ts-expect-error
-        ref={mainLineRef}
-        renderOrder={1}
-        visible={false}
-      >
-        <bufferGeometry />
-        <lineBasicNodeMaterial color="#818cf8" depthTest={false} depthWrite={false} linewidth={3} />
-      </line>
-
-      {/* Closing line */}
-      {/* @ts-ignore */}
-      <line
-        frustumCulled={false}
-        layers={EDITOR_LAYER}
-        // @ts-expect-error
-        ref={closingLineRef}
-        renderOrder={1}
-        visible={false}
-      >
-        <bufferGeometry />
-        <lineBasicNodeMaterial
-          color="#818cf8"
-          depthTest={false}
-          depthWrite={false}
-          linewidth={2}
-          opacity={0.5}
-          transparent
-        />
-      </line>
-
-      {/* Point markers */}
-      {points.map(([x, z], index) => (
-        <CursorSphere
-          color="#818cf8"
-          height={0}
-          key={index}
-          position={[x, levelY + Y_OFFSET + 0.01, z]}
-          showTooltip={false}
-        />
-      ))}
-    </group>
-  )
-}

package/src/components/tools/spawn/move-spawn-tool.tsx

@@ -1,101 +0,0 @@
-import '../../../three-types'
-
-import {
-  emitter,
-  type GridEvent,
-  type SpawnNode,
-  sceneRegistry,
-  useLiveTransforms,
-  useScene,
-} from '@pascal-app/core'
-import { useCallback, useEffect, useState } from 'react'
-import { Vector3 } from 'three'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import useEditor from '../../../store/use-editor'
-import { CursorSphere } from '../shared/cursor-sphere'
-
-const roundToHalf = (value: number) => Math.round(value * 2) / 2
-const worldVector = new Vector3()
-
-function getLevelLocalSpawnPosition(node: SpawnNode, event: GridEvent): [number, number, number] {
-  const levelObject = node.parentId ? sceneRegistry.nodes.get(node.parentId) : null
-  if (!levelObject) {
-    return [
-      roundToHalf(event.localPosition[0]),
-      event.localPosition[1],
-      roundToHalf(event.localPosition[2]),
-    ]
-  }
-
-  worldVector.set(event.position[0], event.position[1], event.position[2])
-  levelObject.updateWorldMatrix(true, false)
-  levelObject.worldToLocal(worldVector)
-
-  return [roundToHalf(worldVector.x), worldVector.y, roundToHalf(worldVector.z)]
-}
-
-export const MoveSpawnTool: React.FC<{
-  node: SpawnNode
-  onCommitted?: (nodeId: SpawnNode['id']) => void
-}> = ({ node, onCommitted }) => {
-  const [previewPosition, setPreviewPosition] = useState<[number, number, number]>(node.position)
-
-  const exitMoveMode = useCallback(() => {
-    useEditor.getState().setMovingNode(null)
-  }, [])
-
-  useEffect(() => {
-    useScene.temporal.getState().pause()
-
-    let committed = false
-
-    const onGridMove = (event: GridEvent) => {
-      const nextPosition: [number, number, number] = [
-        roundToHalf(event.localPosition[0]),
-        event.localPosition[1],
-        roundToHalf(event.localPosition[2]),
-      ]
-      setPreviewPosition(nextPosition)
-      useLiveTransforms.getState().set(node.id, {
-        position: [...nextPosition],
-        rotation: node.rotation,
-      })
-    }
-
-    const onGridClick = (event: GridEvent) => {
-      const nextPosition = getLevelLocalSpawnPosition(node, event)
-
-      committed = true
-      useScene.temporal.getState().resume()
-      useScene.getState().updateNode(node.id, { position: nextPosition })
-      onCommitted?.(node.id)
-      useLiveTransforms.getState().clear(node.id)
-      sfxEmitter.emit('sfx:item-place')
-      exitMoveMode()
-    }
-
-    const onCancel = () => {
-      useLiveTransforms.getState().clear(node.id)
-      useScene.temporal.getState().resume()
-      exitMoveMode()
-    }
-
-    emitter.on('grid:move', onGridMove)
-    emitter.on('grid:click', onGridClick)
-    emitter.on('tool:cancel', onCancel)
-
-    return () => {
-      emitter.off('grid:move', onGridMove)
-      emitter.off('grid:click', onGridClick)
-      emitter.off('tool:cancel', onCancel)
-      useLiveTransforms.getState().clear(node.id)
-      if (!committed) {
-        useScene.temporal.getState().resume()
-      }
-    }
-  }, [exitMoveMode, node, onCommitted])
-
-  return (
-    <CursorSphere color="#60a5fa" height={2.2} position={previewPosition} showTooltip={false} />
-  )
-}