fix(editor): improve guided manipulation and snap affordances

packages/nodes/src/skylight/move-tool.tsx

@@ -10,7 +10,12 @@ import {
   sceneRegistry,
   useScene,
 } from '@pascal-app/core'
-import { markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/editor'
+import {
+  consumePlacementDragRelease,
+  markToolCancelConsumed,
+  triggerSFX,
+  useEditor,
+} from '@pascal-app/editor'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
 import {
@@ -65,8 +70,14 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) {
     let lastSnapX = 0
     let lastSnapZ = 0
     let lastTarget: RelativeRoofDragTarget | null = null
+    let committed = false
     const roofDrag = createRelativeRoofDrag(original)
 
+    const clearTarget = () => {
+      lastTarget = null
+      setHasHit(false)
+    }
+
     // Resolve which segment the cursor is over, then derive the same
     // preview transform stack the placement tool uses (`skylight/tool.tsx`):
     // analytical surface normal in segment-local frame → outer yaw =
@@ -77,7 +88,7 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) {
       const roof = event.node as RoofNode
       const target = roofDrag.resolve(event)
       if (!target) {
-        setHasHit(false)
+        clearTarget()
         return false
       }
       lastTarget = target
@@ -113,10 +124,12 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) {
     }
 
     const onRoofClick = (event: RoofEvent) => {
+      if (committed) return
       const st = useScene.getState()
 
       const target = lastTarget ?? roofDrag.resolve(event)
       if (!target) return
+      committed = true
 
       const targetSegmentId = target.segment.id as AnyNodeId
       const finalRotation = original.rotation
@@ -206,16 +219,29 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) {
       exitMoveMode()
     }
 
+    const onPlacementDragPointerUp = (event: PointerEvent) => {
+      if (!consumePlacementDragRelease(event)) return
+      if (!lastTarget) return
+      onRoofClick({
+        nativeEvent: event,
+        stopPropagation: () => event.stopPropagation(),
+      } as unknown as RoofEvent)
+    }
+
     emitter.on('roof:move', onRoofMove)
     emitter.on('roof:enter', onRoofEnter)
     emitter.on('roof:click', onRoofClick)
+    emitter.on('roof:leave', clearTarget)
     emitter.on('tool:cancel', onCancel)
+    window.addEventListener('pointerup', onPlacementDragPointerUp)
 
     return () => {
       emitter.off('roof:move', onRoofMove)
       emitter.off('roof:enter', onRoofEnter)
       emitter.off('roof:click', onRoofClick)
+      emitter.off('roof:leave', clearTarget)
       emitter.off('tool:cancel', onCancel)
+      window.removeEventListener('pointerup', onPlacementDragPointerUp)
 
       const obj = sceneRegistry.nodes.get(node.id)
       if (obj) obj.visible = true