@pascal-app/editor 0.6.0 → 0.7.0

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

@@ -16,6 +16,7 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
+import { clearRoofDuplicateMetadata } from '../../../lib/roof-duplication'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { snapFenceDraftPoint } from '../fence/fence-drafting'
@@ -100,6 +101,7 @@ export const MoveRoofTool: React.FC<{
     // resetting the mesh position (it resets on dirty) and from triggering
     // expensive merged-mesh CSG rebuilds on every frame.
     let wasCommitted = false
+    let wasCancelled = false
 
     // Track pending rotation — no store updates during drag
     let pendingRotation: number = movingNode.rotation as number
@@ -251,11 +253,19 @@ export const MoveRoofTool: React.FC<{
       // Resume temporal and apply the final state as a single undoable step.
       useScene.temporal.getState().resume()
 
-      useScene.getState().updateNode(movingNode.id, {
-        position: [localX, movingNode.position[1], localZ],
-        rotation: pendingRotation,
-        metadata: committedMeta,
-      })
+      if (isNew && movingNode.type === 'roof') {
+        clearRoofDuplicateMetadata(movingNode.id as AnyNodeId, {
+          position: [localX, movingNode.position[1], localZ],
+          rotation: pendingRotation,
+          metadata: committedMeta,
+        })
+      } else {
+        useScene.getState().updateNode(movingNode.id, {
+          position: [localX, movingNode.position[1], localZ],
+          rotation: pendingRotation,
+          metadata: committedMeta,
+        })
+      }
 
       useScene.temporal.getState().pause()
 
@@ -267,6 +277,7 @@ export const MoveRoofTool: React.FC<{
     }
 
     const onCancel = () => {
+      wasCancelled = true
       useLiveTransforms.getState().clear(movingNode.id)
       if (isNew) {
         useScene.getState().deleteNode(movingNode.id)
@@ -325,16 +336,12 @@ export const MoveRoofTool: React.FC<{
       // Clear ephemeral live transform
       useLiveTransforms.getState().clear(movingNode.id)
 
-      if (!wasCommitted) {
-        if (isNew) {
-          useScene.getState().deleteNode(movingNode.id)
-        } else {
-          useScene.getState().updateNode(movingNode.id, {
-            position: original.position,
-            rotation: original.rotation,
-            metadata: original.metadata,
-          })
-        }
+      if (!(wasCommitted || wasCancelled || isNew)) {
+        useScene.getState().updateNode(movingNode.id, {
+          position: original.position,
+          rotation: original.rotation,
+          metadata: original.metadata,
+        })
       }
       useScene.temporal.getState().resume()
       emitter.off('grid:move', onGridMove)

package/src/components/tools/shared/polygon-editor.tsx

@@ -10,8 +10,10 @@ const Y_OFFSET = 0.02
 
 type DragState = {
   isDragging: boolean
-  mode: 'vertex' | 'polygon'
+  mode: 'vertex' | 'polygon' | 'edge'
   vertexIndex: number | null
+  edgeIndex?: number
+  edgeNormal?: [number, number]
   initialPosition: [number, number]
   initialPolygon: Array<[number, number]>
   pointerId: number
@@ -28,6 +30,8 @@ export interface PolygonEditorProps {
   surfaceHeight?: number
   /** Whether to show the center handle that moves the entire polygon. */
   allowPolygonMove?: boolean
+  /** Whether polygon edges can be dragged along their perpendicular normal. */
+  allowEdgeMove?: boolean
 }
 
 /**
@@ -35,6 +39,17 @@ export interface PolygonEditorProps {
  * Used by zone and site boundary editors
  */
 const MIN_HANDLE_HEIGHT = 0.15
+const EDGE_HANDLE_HEIGHT = 0.06
+const EDGE_HANDLE_THICKNESS = 0.12
+
+function getEdgeNormal(start: [number, number], end: [number, number]): [number, number] | null {
+  const dx = end[0] - start[0]
+  const dz = end[1] - start[1]
+  const length = Math.hypot(dx, dz)
+  if (length < 1e-6) return null
+
+  return [-dz / length, dx / length]
+}
 
 export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   polygon,
@@ -44,6 +59,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   levelId,
   surfaceHeight = 0,
   allowPolygonMove = false,
+  allowEdgeMove = false,
 }) => {
   const [levelNode, setLevelNode] = useState<Object3D | null>(() =>
     levelId ? (sceneRegistry.nodes.get(levelId) ?? null) : null,
@@ -89,6 +105,11 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]> | null>(null)
   const previewPolygonRef = useRef<Array<[number, number]> | null>(null)
 
+  const updatePreviewPolygon = useCallback((nextPolygon: Array<[number, number]> | null) => {
+    previewPolygonRef.current = nextPolygon
+    setPreviewPolygon(nextPolygon)
+  }, [])
+
   // Keep ref in sync
   useEffect(() => {
     previewPolygonRef.current = previewPolygon
@@ -96,6 +117,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
   const [hoveredVertex, setHoveredVertex] = useState<number | null>(null)
   const [hoveredMidpoint, setHoveredMidpoint] = useState<number | null>(null)
+  const [hoveredEdge, setHoveredEdge] = useState<number | null>(null)
   const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0])
 
   const lineRef = useRef<Line>(null!)
@@ -106,7 +128,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   if (polygon !== lastPolygonRef.current) {
     lastPolygonRef.current = polygon
     // External change (e.g. undo/redo) — clear any stale preview/drag state
-    if (previewPolygon) setPreviewPolygon(null)
+    if (previewPolygon) updatePreviewPolygon(null)
     if (dragState) setDragState(null)
   }
 
@@ -134,17 +156,37 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
     })
   }, [displayPolygon])
 
+  const edgeHandles = useMemo(() => {
+    if (displayPolygon.length < 2) return []
+
+    return displayPolygon.flatMap(([x1, z1], index) => {
+      const nextIndex = (index + 1) % displayPolygon.length
+      const [x2, z2] = displayPolygon[nextIndex]!
+      const dx = x2 - x1
+      const dz = z2 - z1
+      const length = Math.hypot(dx, dz)
+      if (length < 1e-6) return []
+
+      return [
+        {
+          index,
+          length,
+          midpoint: [(x1 + x2) / 2, (z1 + z2) / 2] as [number, number],
+          rotationY: -Math.atan2(dz, dx),
+        },
+      ]
+    })
+  }, [displayPolygon])
+
   // Update vertex position using grid cursor position
   const handleVertexDrag = useCallback(
     (vertexIndex: number, position: [number, number]) => {
-      setPreviewPolygon((prev) => {
-        const basePolygon = prev ?? polygon
-        const newPolygon = [...basePolygon]
-        newPolygon[vertexIndex] = position
-        return newPolygon
-      })
+      const basePolygon = previewPolygonRef.current ?? polygon
+      const newPolygon = [...basePolygon]
+      newPolygon[vertexIndex] = position
+      updatePreviewPolygon(newPolygon)
     },
-    [polygon],
+    [polygon, updatePreviewPolygon],
   )
 
   // Commit polygon changes
@@ -152,9 +194,9 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
     if (previewPolygonRef.current) {
       onPolygonChange(previewPolygonRef.current)
     }
-    setPreviewPolygon(null)
+    updatePreviewPolygon(null)
     setDragState(null)
-  }, [onPolygonChange])
+  }, [onPolygonChange, updatePreviewPolygon])
 
   // Handle adding a new vertex at midpoint
   const handleAddVertex = useCallback(
@@ -166,10 +208,13 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
         ...basePolygon.slice(afterIndex + 1),
       ]
 
-      setPreviewPolygon(newPolygon)
-      return afterIndex + 1 // Return new vertex index
+      updatePreviewPolygon(newPolygon)
+      return {
+        polygon: newPolygon,
+        vertexIndex: afterIndex + 1,
+      }
     },
-    [polygon, previewPolygon],
+    [polygon, previewPolygon, updatePreviewPolygon],
   )
 
   // Handle deleting a vertex
@@ -180,9 +225,9 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
       const newPolygon = basePolygon.filter((_, i) => i !== index)
       onPolygonChange(newPolygon)
-      setPreviewPolygon(null)
+      updatePreviewPolygon(null)
     },
-    [polygon, previewPolygon, onPolygonChange, minVertices],
+    [polygon, previewPolygon, onPolygonChange, minVertices, updatePreviewPolygon],
   )
 
   // Listen to grid:move events to track cursor position
@@ -212,9 +257,31 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
         } else if (dragState.mode === 'polygon') {
           const deltaX = newPosition[0] - dragState.initialPosition[0]
           const deltaZ = newPosition[1] - dragState.initialPosition[1]
-          setPreviewPolygon(
+          updatePreviewPolygon(
             dragState.initialPolygon.map(([x, z]) => [x + deltaX, z + deltaZ] as [number, number]),
           )
+        } else if (
+          dragState.mode === 'edge' &&
+          dragState.edgeIndex !== undefined &&
+          dragState.edgeNormal
+        ) {
+          const [normalX, normalZ] = dragState.edgeNormal
+          const pointerDeltaX = newPosition[0] - dragState.initialPosition[0]
+          const pointerDeltaZ = newPosition[1] - dragState.initialPosition[1]
+          const normalDistance = pointerDeltaX * normalX + pointerDeltaZ * normalZ
+          const edgeStartIndex = dragState.edgeIndex
+          const edgeEndIndex = (edgeStartIndex + 1) % dragState.initialPolygon.length
+          const nextPolygon = dragState.initialPolygon.map((point, index) => {
+            if (index !== edgeStartIndex && index !== edgeEndIndex) {
+              return point
+            }
+
+            return [point[0] + normalX * normalDistance, point[1] + normalZ * normalDistance] as [
+              number,
+              number,
+            ]
+          })
+          updatePreviewPolygon(nextPolygon)
         }
       }
     }
@@ -223,7 +290,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
     return () => {
       emitter.off('grid:move', onGridMove)
     }
-  }, [dragState, handleVertexDrag])
+  }, [dragState, handleVertexDrag, updatePreviewPolygon])
 
   // Set up pointer up listener for ending drag
   useEffect(() => {
@@ -288,6 +355,8 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   if (displayPolygon.length < minVertices) return null
 
   const canDelete = displayPolygon.length > minVertices
+  const handleHeight = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02)
+  const edgeHandleY = editY + handleHeight - EDGE_HANDLE_HEIGHT / 2
 
   const editorContent = (
     <group>
@@ -316,7 +385,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
         const isHovered = hoveredVertex === index
         const isDragging = dragState?.mode === 'vertex' && dragState.vertexIndex === index
         const radius = 0.1
-        const height = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02)
+        const height = handleHeight
 
         return (
           <mesh
@@ -337,6 +406,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
             onPointerDown={(e) => {
               if (e.button !== 0) return
               e.stopPropagation()
+              setHoveredEdge(null)
               setDragState({
                 isDragging: true,
                 mode: 'vertex',
@@ -375,6 +445,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
           onPointerDown={(e) => {
             if (e.button !== 0) return
             e.stopPropagation()
+            setHoveredEdge(null)
             setDragState({
               isDragging: true,
               mode: 'polygon',
@@ -384,23 +455,75 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
               pointerId: e.pointerId,
             })
           }}
-          position={[
-            polygonCenter[0],
-            editY + Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02) + 0.08,
-            polygonCenter[1],
-          ]}
+          position={[polygonCenter[0], editY + handleHeight + 0.08, polygonCenter[1]]}
         >
           <sphereGeometry args={[0.09, 20, 20]} />
           <meshStandardMaterial color={dragState?.mode === 'polygon' ? '#22c55e' : '#f59e0b'} />
         </mesh>
       )}
 
+      {allowEdgeMove &&
+        edgeHandles.map(({ index, length, midpoint, rotationY }) => {
+          const isHovered = hoveredEdge === index
+          const isDragging = dragState?.mode === 'edge' && dragState.edgeIndex === index
+
+          return (
+            <mesh
+              key={`edge-${index}`}
+              layers={EDITOR_LAYER}
+              onClick={(e) => {
+                if (e.button !== 0) return
+                e.stopPropagation()
+              }}
+              onPointerDown={(e) => {
+                if (e.button !== 0) return
+                e.stopPropagation()
+                const start = displayPolygon[index]
+                const end = displayPolygon[(index + 1) % displayPolygon.length]
+                if (!(start && end)) return
+
+                const edgeNormal = getEdgeNormal(start, end)
+                if (!edgeNormal) return
+
+                setHoveredEdge(null)
+                setDragState({
+                  isDragging: true,
+                  mode: 'edge',
+                  vertexIndex: null,
+                  edgeIndex: index,
+                  edgeNormal,
+                  initialPosition: cursorPosition,
+                  initialPolygon: displayPolygon.map(([px, pz]) => [px, pz] as [number, number]),
+                  pointerId: e.pointerId,
+                })
+              }}
+              onPointerEnter={(e) => {
+                e.stopPropagation()
+                setHoveredEdge(index)
+              }}
+              onPointerLeave={(e) => {
+                e.stopPropagation()
+                setHoveredEdge(null)
+              }}
+              position={[midpoint[0], edgeHandleY, midpoint[1]]}
+              rotation={[0, rotationY, 0]}
+            >
+              <boxGeometry args={[length, EDGE_HANDLE_HEIGHT, EDGE_HANDLE_THICKNESS]} />
+              <meshStandardMaterial
+                color={isDragging ? '#22c55e' : '#94a3b8'}
+                opacity={isDragging ? 0.5 : isHovered ? 0.38 : 0.14}
+                transparent
+              />
+            </mesh>
+          )
+        })}
+
       {/* Midpoint handles - smaller green cylinders for adding vertices (hidden while dragging) */}
       {!dragState &&
         midpoints.map(([x, z], index) => {
           const isHovered = hoveredMidpoint === index
           const radius = 0.06
-          const height = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02)
+          const height = handleHeight
 
           return (
             <mesh
@@ -413,12 +536,14 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
               onPointerDown={(e) => {
                 if (e.button !== 0) return
                 e.stopPropagation()
-                const newVertexIndex = handleAddVertex(index, [x!, z!])
-                if (newVertexIndex >= 0) {
+                const insertedVertex = handleAddVertex(index, [x!, z!])
+                if (insertedVertex.vertexIndex >= 0) {
                   setDragState({
                     isDragging: true,
-                    vertexIndex: newVertexIndex,
+                    mode: 'vertex',
+                    vertexIndex: insertedVertex.vertexIndex,
                     initialPosition: [x!, z!],
+                    initialPolygon: insertedVertex.polygon,
                     pointerId: e.pointerId,
                   })
                   setHoveredMidpoint(null)

package/src/components/tools/shared/segment-angle.ts

@@ -0,0 +1,156 @@
+import {
+  type FenceNode,
+  getWallCurveFrameAt,
+  getWallCurveLength,
+  isCurvedWall,
+  type WallNode,
+} from '@pascal-app/core'
+
+export type PlanPoint = [number, number]
+
+export type SegmentAngleLike = Pick<WallNode | FenceNode, 'start' | 'end' | 'curveOffset'>
+
+export type SegmentAngleReference = {
+  vector: PlanPoint
+  orientation: 'directed' | 'axis'
+}
+
+const POINT_MATCH_TOLERANCE = 1e-5
+const SEGMENT_POINT_TOLERANCE = 0.15
+const CURVE_TANGENT_SAMPLE_SPACING = 0.08
+
+function distanceSquared(a: PlanPoint, b: PlanPoint) {
+  const dx = a[0] - b[0]
+  const dz = a[1] - b[1]
+
+  return dx * dx + dz * dz
+}
+
+function pointsMatch(a: PlanPoint, b: PlanPoint, tolerance = POINT_MATCH_TOLERANCE) {
+  return distanceSquared(a, b) <= tolerance * tolerance
+}
+
+function getProjectedPointOnSegment(point: PlanPoint, segment: SegmentAngleLike): PlanPoint | null {
+  const [x1, z1] = segment.start
+  const [x2, z2] = segment.end
+  const dx = x2 - x1
+  const dz = z2 - z1
+  const lengthSquared = dx * dx + dz * dz
+
+  if (lengthSquared < 1e-9) {
+    return null
+  }
+
+  const t = ((point[0] - x1) * dx + (point[1] - z1) * dz) / lengthSquared
+  if (t <= 0 || t >= 1) {
+    return null
+  }
+
+  return [x1 + dx * t, z1 + dz * t]
+}
+
+function getCurveTangentAtPoint(point: PlanPoint, segment: SegmentAngleLike): PlanPoint | null {
+  const curveLength = getWallCurveLength(segment)
+  const sampleCount = Math.max(24, Math.ceil(curveLength / CURVE_TANGENT_SAMPLE_SPACING))
+  let best: { distance: number; tangent: PlanPoint } | null = null
+
+  for (let index = 0; index <= sampleCount; index += 1) {
+    const frame = getWallCurveFrameAt(segment, index / sampleCount)
+    const candidate: PlanPoint = [frame.point.x, frame.point.y]
+    const distance = distanceSquared(point, candidate)
+
+    if (best && distance >= best.distance) {
+      continue
+    }
+
+    best = {
+      distance,
+      tangent: [frame.tangent.x, frame.tangent.y],
+    }
+  }
+
+  if (!best || best.distance > SEGMENT_POINT_TOLERANCE * SEGMENT_POINT_TOLERANCE) {
+    return null
+  }
+
+  return best.tangent
+}
+
+export function formatAngleRadians(angle: number) {
+  return `${Math.round((angle * 180) / Math.PI)}°`
+}
+
+export function getAngleBetweenVectors(first: PlanPoint, second: PlanPoint): number | null {
+  const firstLength = Math.hypot(first[0], first[1])
+  const secondLength = Math.hypot(second[0], second[1])
+
+  if (firstLength < 1e-6 || secondLength < 1e-6) return null
+
+  const dot = first[0] * second[0] + first[1] * second[1]
+  const cosine = Math.min(1, Math.max(-1, dot / (firstLength * secondLength)))
+
+  return Math.acos(cosine)
+}
+
+export function getAngleToSegmentReference(
+  vector: PlanPoint,
+  reference: SegmentAngleReference,
+): number | null {
+  const angle = getAngleBetweenVectors(vector, reference.vector)
+
+  if (angle === null || reference.orientation === 'directed') {
+    return angle
+  }
+
+  const reverseAngle = getAngleBetweenVectors(vector, [-reference.vector[0], -reference.vector[1]])
+
+  if (reverseAngle === null) {
+    return angle
+  }
+
+  return Math.min(angle, reverseAngle)
+}
+
+export function getSegmentAngleReferenceAtPoint(
+  point: PlanPoint,
+  segment: SegmentAngleLike,
+): SegmentAngleReference | null {
+  if (pointsMatch(point, segment.start)) {
+    const frame = getWallCurveFrameAt(segment, 0)
+
+    return {
+      vector: [frame.tangent.x, frame.tangent.y],
+      orientation: 'directed',
+    }
+  }
+
+  if (pointsMatch(point, segment.end)) {
+    const frame = getWallCurveFrameAt(segment, 1)
+
+    return {
+      vector: [-frame.tangent.x, -frame.tangent.y],
+      orientation: 'directed',
+    }
+  }
+
+  if (isCurvedWall(segment)) {
+    const tangent = getCurveTangentAtPoint(point, segment)
+
+    return tangent
+      ? {
+          vector: tangent,
+          orientation: 'axis',
+        }
+      : null
+  }
+
+  const projected = getProjectedPointOnSegment(point, segment)
+  if (!projected || !pointsMatch(point, projected, SEGMENT_POINT_TOLERANCE)) {
+    return null
+  }
+
+  return {
+    vector: [segment.end[0] - segment.start[0], segment.end[1] - segment.start[1]],
+    orientation: 'axis',
+  }
+}

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

@@ -31,6 +31,7 @@ export const SlabBoundaryEditor: React.FC<SlabBoundaryEditorProps> = ({ slabId }
 
   return (
     <PolygonEditor
+      allowEdgeMove
       color="#a3a3a3"
       levelId={resolveLevelId(slab, useScene.getState().nodes)}
       minVertices={3}

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

@@ -36,6 +36,7 @@ export const SlabHoleEditor: React.FC<SlabHoleEditorProps> = ({ slabId, holeInde
 
   return (
     <PolygonEditor
+      allowEdgeMove
       allowPolygonMove
       color="#ef4444"
       levelId={resolveLevelId(slab, useScene.getState().nodes)} // red for holes

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

@@ -0,0 +1,101 @@
+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} />
+  )
+}