Merge origin/main (#407 placement restructure) into opening-proximity-guides

#407 ("Always-visible placement ghosts + true-nearest 2D opening snap")
restructured the door/window placement tools: it split the old
create-in-resolve into a pure resolveWallPlacement() + side-effecting
applyWallTarget(), added an off-host floating ghost (fallbackPose / showGhostAt),
unified wall hover into onWallHover, and extracted commit{Door,Window}AtWall.

Conflict resolution (door/tool.tsx, window/tool.tsx):
- Re-homed the single publishOpeningGuidesForWallEvent() call into applyWallTarget
  (after the draft update + updateCursor), using that scope (wall,
  getSlabElevationForWall(wall)); door includeVertical:false, window true.
- Routed clearOpeningGuides3D() through showGhostAt so every off-host fallback
  path clears; kept clears in hideCursor, commit helpers, onRoofHover, teardown.
- Made the window sill snap (resolvePlacementY) event-free and call it from the
  pure resolveWallPlacement, so hover + click both get sill/centre/top snapping;
  Shift bypasses, the moving draft is excluded via ignoreId.
- Dropped the branch's inline onWallClick in favour of #407's onWallClick +
  commitWindowAtWall (no behavior lost).
- Reconstructed both files' import blocks, which the auto-merge had truncated to
  stubs (only tsc caught it).

All other conflicts auto-merged (registry types, floorplan-registry-layer,
both move-tools). Verified: typecheck 9/9, biome clean, nodes 169 + core 594
tests pass, editor `bun run build` 7/7. Merge resolution reviewed by Codex
(adversarial): no semantic regressions; all #407 behavior preserved.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

packages/nodes/src/door/floorplan-move.ts

@@ -3,15 +3,14 @@ import {
   type DoorNode,
   type FloorplanMoveTarget,
   type FloorplanMoveTargetSession,
+  useLiveTransforms,
   useScene,
   type WallNode,
+  WallNode as WallNodeSchema,
 } from '@pascal-app/core'
-import { snapToHalf } from '@pascal-app/editor'
+import { snapToHalf, usePlacementPreview } from '@pascal-app/editor'
 import { createFloorplanCursorResolver } from '../shared/floorplan-cursor'
-import {
-  getRoofHostedOpeningLevelId,
-  getRoofHostedOpeningPlanPoint,
-} from '../shared/roof-opening-host'
+import { getOpeningHostLevelId, getRoofHostedOpeningPlanPoint } from '../shared/roof-opening-host'
 import {
   findClosestWallInPlan,
   projectWallLocalPointToPlan,
@@ -38,16 +37,10 @@ import { clampToWall, hasWallChildOverlap } from './door-math'
 export const doorFloorplanMoveTarget: FloorplanMoveTarget<DoorNode> = ({ node }) => {
   // Snapshot of the door's "valid" state at move-start — used by
   // canCommit to decide whether the current snapped position is OK.
-  const startLevelId = (() => {
-    // Wall-hosted: the wall's parent is the level. Roof-hosted: walk
-    // segment → roof → level. Cached at start because the parent chain
-    // doesn't change during a move.
-    const nodes = useScene.getState().nodes
-    const roofLevelId = getRoofHostedOpeningLevelId(node, nodes)
-    if (roofLevelId) return roofLevelId
-    const wall = nodes[node.parentId as AnyNodeId]
-    return wall ? (wall.parentId as AnyNodeId | null) : null
-  })()
+  // The level that owns the wall-snap candidates — resolves the wall-hosted,
+  // roof-hosted, and fresh-placement parentings (see `getOpeningHostLevelId`).
+  // Cached at start because the parent chain doesn't change during a move.
+  const startLevelId = getOpeningHostLevelId(node, useScene.getState().nodes)
   const originalWall = node.parentId
     ? (useScene.getState().nodes[node.parentId as AnyNodeId] as WallNode | undefined)
     : undefined
@@ -57,6 +50,14 @@ export const doorFloorplanMoveTarget: FloorplanMoveTarget<DoorNode> = ({ node })
         ? projectWallLocalPointToPlan(originalWall, node.position[0])
         : (getRoofHostedOpeningPlanPoint(node, useScene.getState().nodes) ?? [node.position[0], 0]),
     metadata: node.metadata,
+    // Absolute: query the wall snap with the TRUE cursor, not the door's
+    // original wall position plus a grab delta. A wall-hosted opening always
+    // belongs to the wall nearest the cursor (the user's rule), and the 3D
+    // move snaps on the wall literally under the ray — relative mode would
+    // anchor the search to the old wall and resist hopping to a closer one
+    // across a thin gap, picking the "far" wall the user reported. It also
+    // makes the 2D Voronoi overlay (classified by cursor) predict the snap.
+    mode: 'absolute',
   })
 
   // Track the last successful placement so `commit()` can write it
@@ -72,13 +73,83 @@ export const doorFloorplanMoveTarget: FloorplanMoveTarget<DoorNode> = ({ node })
     roofFace: undefined
   } | null = null
 
+  // R flips the door's facing (front ↔ back) mid-placement. `apply` re-derives
+  // the wall-facing side every move, so the flip is a persistent XOR applied on
+  // top of the wall hit, plus a π rotation offset (matching the committed R).
+  let flipped = false
+  // Remember the last apply args so the overlay's R keydown can re-run `apply`
+  // (which has no event of its own) to show the flip immediately.
+  let lastApply: {
+    planPoint: readonly [number, number]
+    modifiers: { shiftKey: boolean; altKey: boolean; ctrlKey: boolean; metaKey: boolean }
+  } | null = null
+  // Whether the cursor is currently over a wall. Off-wall the door free-follows
+  // the cursor as a ghost (like the 3D move) and is NOT committable — a door
+  // needs a wall. Starts true so a click before any move keeps the door put.
+  let onWall = true
+
+  // Off-wall: float the faithful door symbol at the cursor (via a synthetic
+  // wall fed to the placement-preview layer) and hide the real node, so the
+  // ghost follows the cursor in 2D instead of the door staying frozen on its
+  // old wall. Mirrors the fresh-placement free-follow.
+  const freeFollow = (planPoint: readonly [number, number]) => {
+    onWall = false
+    lastValid = null
+    if ((useScene.getState().nodes[node.id as AnyNodeId] as DoorNode | undefined)?.visible) {
+      useScene.getState().updateNode(node.id as AnyNodeId, { visible: false })
+    }
+    const half = node.width / 2 + 0.5
+    const wall = WallNodeSchema.parse({
+      start: [planPoint[0] - half, planPoint[1]],
+      end: [planPoint[0] + half, planPoint[1]],
+      thickness: 0.1,
+    })
+    const ghost = {
+      ...node,
+      parentId: wall.id,
+      wallId: wall.id,
+      roofSegmentId: undefined,
+      roofFace: undefined,
+      position: [half, node.position[1], 0] as [number, number, number],
+      rotation: [0, 0, 0] as [number, number, number],
+      visible: true,
+    } as DoorNode
+    usePlacementPreview.getState().set(ghost, wall)
+  }
+
   const session: FloorplanMoveTargetSession = {
     affectedIds: [node.id as AnyNodeId],
+    flipSide() {
+      flipped = !flipped
+      if (lastApply) this.apply(lastApply)
+    },
     apply({ planPoint, modifiers }) {
+      lastApply = { planPoint, modifiers }
+      // Drop any stale live transform left by the 3D `MoveDoorTool` (it
+      // publishes one on every wall hover). The 2D registry layer renders
+      // door/window from `useLiveTransforms` IN PREFERENCE to the scene node,
+      // but this 2D move writes the scene node — so a leftover 3D entry would
+      // freeze the symbol on its wall and the slide wouldn't show. Only the
+      // 2D path runs during an opening move (the panel gates the 3D tool's
+      // events off via `!isOpeningMoveActive`), so nothing re-adds it. Guarded
+      // on existence: `clear` always allocates a new Map + re-renders.
+      if (useLiveTransforms.getState().transforms.has(node.id as AnyNodeId)) {
+        useLiveTransforms.getState().clear(node.id as AnyNodeId)
+      }
       const nodes = useScene.getState().nodes
       const resolvedPlanPoint = resolveCursor(planPoint)
       const hit = findClosestWallInPlan(resolvedPlanPoint, nodes, startLevelId)
-      if (!hit) return // pointer off any wall — keep door at last valid position
+      if (!hit) {
+        // Off any wall — free-follow the cursor (not committable).
+        freeFollow(resolvedPlanPoint)
+        return
+      }
+      // Back on a wall — drop the free-follow ghost + reveal the real node.
+      onWall = true
+      usePlacementPreview.getState().clear()
+      if ((nodes[node.id as AnyNodeId] as DoorNode | undefined)?.visible === false) {
+        useScene.getState().updateNode(node.id as AnyNodeId, { visible: true })
+      }
 
       // Figma-style along-wall alignment first (edge-to-edge with other
       // openings / wall ends); it competes with — and wins over — the 0.5m
@@ -97,10 +168,14 @@ export const doorFloorplanMoveTarget: FloorplanMoveTarget<DoorNode> = ({ node })
       const snappedLocalX = neighborX ?? (modifiers.shiftKey ? hit.localX : snapToHalf(hit.localX))
       const { clampedX, clampedY } = clampToWall(hit.wall, snappedLocalX, node.width, node.height)
 
+      // Apply the R-flip on top of the wall-derived side.
+      const side: DoorNode['side'] = flipped ? (hit.side === 'front' ? 'back' : 'front') : hit.side
+      const itemRotation = hit.itemRotation + (flipped ? Math.PI : 0)
+
       lastValid = {
         position: [clampedX, clampedY, 0],
-        rotation: [0, hit.itemRotation, 0],
-        side: hit.side,
+        rotation: [0, itemRotation, 0],
+        side,
         parentId: hit.wall.id,
         wallId: hit.wall.id,
         // Re-anchoring to a wall ends any roof-segment hosting; the
@@ -122,6 +197,11 @@ export const doorFloorplanMoveTarget: FloorplanMoveTarget<DoorNode> = ({ node })
       ])
     },
     canCommit() {
+      // Off-wall the door is free-following in mid-air — not placeable. The
+      // overlay then reverts to the pre-move snapshot (door returns to its
+      // original wall), matching the 3D move where an open-floor click commits
+      // nothing.
+      if (!onWall) return false
       const live = useScene.getState().nodes[node.id as AnyNodeId] as DoorNode | undefined
       if (!live || live.type !== 'door') return false
       // Block commit if the door overlaps any other wall child at its

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

@@ -3,6 +3,7 @@ import {
   collectAlignmentAnchors,
   DoorNode,
   emitter,
+  type GridEvent,
   isCurvedWall,
   type RoofEvent,
   type RoofNode,
@@ -86,6 +87,18 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
     let currentHostId: string | null = movingDoorNode.parentId
     let dragAnchor: { wallId: string; rawX: number; startX: number } | null = null
     let committed = false
+    // Off-wall free-follow: when the cursor is over empty floor (no wall under
+    // the ray) the door is parented to the level and tracks the cursor like an
+    // item node. `freeFollowing` distinguishes that state so the placement
+    // commit no-ops in open space (a door needs a wall). `lastMeshEventTime`
+    // defers the floor handler whenever a wall/roof mesh event owns the same
+    // pointermove (shared DOM timeStamp) — that's the only thing that snaps.
+    let freeFollowing = false
+    let lastMeshEventTime = -1
+    // The door's chosen facing side. R flips it mid-placement (front ↔ back,
+    // same as the committed-selected R flip) so the user can reorient before
+    // committing. Initialised from the moving node's side.
+    let sideOverride: DoorNode['side'] = movingDoorNode.side
     let lastTarget: {
       wallNode: WallEvent['node']
       wallId: string
@@ -154,7 +167,7 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
 
     const getPlacementOrientation = (event: WallEvent) => {
       const faceSide = getSideFromNormal(event.normal)
-      const side = movingDoorNode.side ?? faceSide
+      const side = sideOverride ?? faceSide
       const rotationOffset = side !== faceSide ? Math.PI : 0
       return {
         side,
@@ -274,11 +287,13 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
     }
 
     const onWallEnter = (event: WallEvent) => {
+      lastMeshEventTime = event.nativeEvent?.timeStamp ?? -1
       const target = resolveMoveTarget(event)
       if (!target) {
         onWallLeave()
         return
       }
+      freeFollowing = false
       lastTarget = target
       lastRoofEvent = null
       applyPreview(target)
@@ -286,6 +301,7 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
     }
 
     const onWallMove = (event: WallEvent) => {
+      lastMeshEventTime = event.nativeEvent?.timeStamp ?? -1
       if (!isValidWallSideFace(event.normal)) {
         onWallLeave()
         return
@@ -304,20 +320,17 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
         onWallLeave()
         return
       }
+      freeFollowing = false
       lastTarget = target
       lastRoofEvent = null
       applyPreview(target)
       event.stopPropagation()
     }
 
-    const onWallClick = (event: WallEvent) => {
+    // Promote the moving door into its committed wall placement. Shared by the
+    // direct wall-mesh click and the floor proximity click.
+    const commitToWall = (target: NonNullable<typeof lastTarget>) => {
       if (committed) return
-      if (!isValidWallSideFace(event.normal)) return
-      if (isCurvedWall(event.node)) return
-      if (event.node.parentId !== getLevelId()) return
-
-      const target = lastTarget?.wallId === event.node.id ? lastTarget : resolveMoveTarget(event)
-      if (!target?.valid) return
       committed = true
 
       let placedId: string
@@ -378,30 +391,84 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
       hideCursor()
       useViewer.getState().setSelection({ selectedIds: [placedId] })
       exitMoveMode()
+    }
+
+    const onWallClick = (event: WallEvent) => {
+      if (committed) return
+      if (!isValidWallSideFace(event.normal)) return
+      if (isCurvedWall(event.node)) return
+      if (event.node.parentId !== getLevelId()) return
+
+      const target = lastTarget?.wallId === event.node.id ? lastTarget : resolveMoveTarget(event)
+      if (!target?.valid) return
+      commitToWall(target)
       event.stopPropagation()
     }
 
     const onWallLeave = () => {
+      // The cursor left the wall mesh. Don't snap back to the origin/original
+      // here — the floor proximity handler (onGridMove) takes over on the same
+      // pointermove: it either snaps to a nearby wall or free-follows the
+      // cursor. The wireframe outline + live transform are cleared so the
+      // free-follow path can re-establish them. Reverting the node is left to
+      // onGridMove's free-follow / cancel / commit, so the door never blinks
+      // back to the building origin between a wall and open floor.
       hideCursor()
       useLiveTransforms.getState().clear(movingDoorNode.id)
       dragAnchor = null
       lastTarget = null
       lastRoofEvent = null
-      if (isNew) return
-      if (currentHostId && currentHostId !== original.parentId) {
-        markHostDirty(currentHostId)
+    }
+
+    // Free-follow: the door rides the cursor over empty floor, parented to the
+    // level like an item node (lifted so it stands on the floor). No wall to
+    // attach to, so it is not committable here.
+    const freeFollowAt = (localX: number, localZ: number) => {
+      freeFollowing = true
+      lastTarget = null
+      lastRoofEvent = null
+      hideCursor()
+      useLiveTransforms.getState().clear(movingDoorNode.id)
+      const levelId = getLevelId()
+      const y = movingDoorNode.height / 2
+      // Keep the R-flip visible while free-following: face the chosen side
+      // (back = rotated π) instead of forcing 0, so an R press isn't undone on
+      // the next mousemove.
+      const yaw = sideOverride === 'back' ? Math.PI : 0
+      if (currentHostId !== levelId) {
+        if (currentHostId && currentHostId !== levelId) markHostDirty(currentHostId)
+        useScene.getState().updateNode(movingDoorNode.id, {
+          position: [localX, y, localZ],
+          rotation: [0, yaw, 0],
+          side: sideOverride,
+          parentId: levelId ?? undefined,
+          wallId: undefined,
+          roofSegmentId: undefined,
+          roofFace: undefined,
+        })
+        currentHostId = levelId
+      } else {
+        useScene.getState().updateNode(movingDoorNode.id, {
+          position: [localX, y, localZ],
+          rotation: [0, yaw, 0],
+          side: sideOverride,
+        })
       }
-      currentHostId = original.parentId
-      useScene.getState().updateNode(movingDoorNode.id, {
-        position: original.position,
-        rotation: original.rotation,
-        side: original.side,
-        parentId: original.parentId,
-        wallId: original.wallId,
-        roofSegmentId: original.roofSegmentId,
-        roofFace: original.roofFace,
-      })
-      if (original.parentId) markHostDirty(original.parentId)
+    }
+
+    const onGridMove = (event: GridEvent) => {
+      if (committed) return
+      if (useViewer.getState().cameraDragging) return
+      // A wall/roof mesh handler owns this exact pointermove (shared DOM
+      // timeStamp): the cursor ray is on a wall/roof, so it snaps. Otherwise
+      // the cursor is over open floor — free-follow it.
+      if (event.nativeEvent?.timeStamp === lastMeshEventTime) return
+
+      // No proximity magnet: in 3D the wall side faces are big raycast targets,
+      // so snapping engages only when the cursor ray actually hovers a wall
+      // (`onWallMove`). Over open floor the door just follows the cursor.
+      const [x, , z] = event.localPosition
+      freeFollowAt(x, z)
     }
 
     // ── Roof-segment wall faces ─────────────────────────────────────
@@ -424,12 +491,14 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
     }
 
     const onRoofHover = (event: RoofEvent) => {
+      lastMeshEventTime = event.nativeEvent?.timeStamp ?? -1
       const target = resolveRoofMoveTarget(event)
       if (!target) {
         onRoofLeave()
         return
       }
       // Wall-frame drag anchor / live transform don't apply on a roof face.
+      freeFollowing = false
       dragAnchor = null
       lastTarget = null
       lastRoofEvent = event
@@ -529,26 +598,13 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
     }
 
     const onRoofLeave = () => {
+      // Mirror onWallLeave: don't revert to origin here — onGridMove takes
+      // over on the same pointermove (snap to a nearby wall or free-follow).
       hideCursor()
       useLiveTransforms.getState().clear(movingDoorNode.id)
       dragAnchor = null
       lastTarget = null
       lastRoofEvent = null
-      if (isNew) return
-      if (currentHostId && currentHostId !== original.parentId) {
-        markHostDirty(currentHostId)
-      }
-      currentHostId = original.parentId
-      useScene.getState().updateNode(movingDoorNode.id, {
-        position: original.position,
-        rotation: original.rotation,
-        side: original.side,
-        parentId: original.parentId,
-        wallId: original.wallId,
-        roofSegmentId: original.roofSegmentId,
-        roofFace: original.roofFace,
-      })
-      if (original.parentId) markHostDirty(original.parentId)
     }
 
     const onCancel = () => {
@@ -576,13 +632,53 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
 
     const onPlacementDragPointerUp = (event: PointerEvent) => {
       if (!consumePlacementDragRelease(event)) return
-      if (lastTarget) {
-        onWallClick(lastTarget.event)
+      // Free-following over open floor can't commit (no wall). A wall hover
+      // target commits via commitToWall; a roof face via onRoofClick.
+      if (lastTarget?.valid && !freeFollowing) {
+        commitToWall(lastTarget)
         return
       }
       if (lastRoofEvent) onRoofClick(lastRoofEvent)
     }
 
+    // R flips the door's facing side mid-placement (front ↔ back), like the
+    // committed-selected R flip — usable before commit, whether snapped to a
+    // wall or free-following. Re-applies the preview so the flip shows live.
+    // No-op on a roof-segment face (those host front-only; nothing to flip).
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (committed) return
+      if (e.key !== 'r' && e.key !== 'R') return
+      const target = e.target as HTMLElement | null
+      if (
+        target &&
+        (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)
+      ) {
+        return
+      }
+      // Only act where a flip is meaningful — on a wall hover or while
+      // free-following. On a roof face leave it to the default R (no flip, no
+      // sfx) so the cue never fires without a visible effect.
+      const onWall = lastTarget !== null
+      if (!(onWall || freeFollowing)) return
+      e.preventDefault()
+      sideOverride = sideOverride === 'front' ? 'back' : 'front'
+      triggerSFX('sfx:item-rotate')
+      if (onWall) {
+        // On a wall: re-resolve with the flipped side and re-preview.
+        const next = resolveMoveTarget(lastTarget!.event)
+        if (next) {
+          lastTarget = next
+          applyPreview(next)
+        }
+      } else {
+        // Free-following on the level: flip the draft's facing in place.
+        useScene.getState().updateNode(movingDoorNode.id, {
+          side: sideOverride,
+          rotation: [0, sideOverride === 'back' ? Math.PI : 0, 0],
+        })
+      }
+    }
+
     emitter.on('wall:enter', onWallEnter)
     emitter.on('wall:move', onWallMove)
     emitter.on('wall:click', onWallClick)
@@ -591,8 +687,10 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
     emitter.on('roof:move', onRoofHover)
     emitter.on('roof:click', onRoofClick)
     emitter.on('roof:leave', onRoofLeave)
+    emitter.on('grid:move', onGridMove)
     emitter.on('tool:cancel', onCancel)
     window.addEventListener('pointerup', onPlacementDragPointerUp)
+    window.addEventListener('keydown', onKeyDown)
 
     return () => {
       const current = useScene.getState().nodes[movingDoorNode.id as AnyNodeId] as
@@ -629,8 +727,10 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
       emitter.off('roof:move', onRoofHover)
       emitter.off('roof:click', onRoofClick)
       emitter.off('roof:leave', onRoofLeave)
+      emitter.off('grid:move', onGridMove)
       emitter.off('tool:cancel', onCancel)
       window.removeEventListener('pointerup', onPlacementDragPointerUp)
+      window.removeEventListener('keydown', onKeyDown)
     }
   }, [movingDoorNode, exitMoveMode])
 

packages/nodes/src/door/preview.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { EDITOR_LAYER } from '@pascal-app/editor'
+import { buildDoorPreviewMesh } from '@pascal-app/viewer'
+import { useEffect, useMemo } from 'react'
+import { applyGhost } from '../shared/ghost-materials'
+import type { DoorNode } from './schema'
+
+/**
+ * Translucent preview of a door — used by the placement tool's floating ghost.
+ *
+ * Builds the door mesh via buildDoorPreviewMesh (so the preview shape stays in
+ * lockstep with committed doors), then applies ghost treatment (translucent,
+ * raycast-off, tinted red if invalid).
+ *
+ * The root mesh's layer is set to EDITOR_LAYER because the invisible hitbox
+ * material on SCENE_LAYER would poison the WebGPU MRT pass (project gotcha).
+ */
+const DoorPreview = ({ node, invalid }: { node: DoorNode; invalid?: boolean }) => {
+  const mesh = useMemo(() => {
+    const m = buildDoorPreviewMesh(node)
+    m.layers.set(EDITOR_LAYER)
+    return m
+  }, [node.width, node.height, node.frameDepth, node.openingShape, node.doorType, node.leafCount])
+
+  // Ghost treatment (clone + tint + raycast-off) re-applies if `invalid`
+  // flips; its cleanup only disposes the clones it made.
+  useEffect(() => applyGhost(mesh, { invalid }), [mesh, invalid])
+
+  // Geometry is freshly built per `mesh` and owned here — dispose it only
+  // when the mesh itself is replaced/unmounted, never on an `invalid` toggle.
+  useEffect(
+    () => () => {
+      mesh.traverse((obj) => {
+        const m = obj as { geometry?: { dispose: () => void } }
+        m.geometry?.dispose()
+      })
+    },
+    [mesh],
+  )
+
+  return <primitive object={mesh} />
+}
+
+export default DoorPreview

packages/nodes/src/door/tool.tsx

@@ -11,6 +11,7 @@ import {
   spatialGridManager,
   useScene,
   type WallEvent,
+  type WallNode,
 } from '@pascal-app/core'
 import {
   calculateCursorRotation,
@@ -22,7 +23,7 @@ import {
   useAlignmentGuides,
 } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { BoxGeometry, EdgesGeometry, type Group, type LineSegments, Vector3 } from 'three'
 import { LineBasicNodeMaterial } from 'three/webgpu'
 import {
@@ -37,6 +38,7 @@ import {
 } from '../shared/roof-wall-opening-placement'
 import { resolveWallSlideAlignment } from '../shared/wall-opening-alignment'
 import { clampToWall, hasWallChildOverlap, wallLocalToWorld } from './door-math'
+import DoorPreview from './preview'
 
 const edgeMaterial = new LineBasicNodeMaterial({
   color: 0xef_44_44,
@@ -49,31 +51,61 @@ const FALLBACK_WIDTH = 0.9
 const FALLBACK_HEIGHT = 2.1
 const roofFallbackPoint = new Vector3()
 
+// What currently owns the cursor frame: a wall/roof mesh hover, or null when
+// the cursor is over open floor (the grid handler then free-follows).
+type HostKind = 'wall' | 'roof' | null
+
 /**
  * Door tool — places DoorNodes on walls and on roof-segment wall faces
  * (the generated base walls under a roof, including coplanar gable ends).
  * Doors always sit at floor level (clampedY = height/2 — segment base for
  * roof-hosted doors).
+ *
+ * The ghost follows the cursor everywhere (like moving an item): over open
+ * floor it floats as an invalid (unplaceable) ghost; the moment the cursor
+ * ray hovers a wall (or roof-segment face) the real draft snaps onto it.
+ * Snapping engages only on an actual mesh hover — no proximity magnet — since
+ * the wall side faces are big raycast targets.
  */
 const DoorTool: React.FC = () => {
   const draftRef = useRef<DoorNode | null>(null)
   const cursorGroupRef = useRef<Group>(null!)
   const edgesRef = useRef<LineSegments>(null!)
 
+  // Off-host floating ghost: the real door geometry follows the cursor over
+  // the grid (tinted invalid). Mutually exclusive with the on-host draft —
+  // when a draft + wireframe is shown this is null and vice-versa.
+  const [fallbackPose, setFallbackPose] = useState<{
+    position: [number, number, number]
+    rotationY: number
+  } | null>(null)
+
+  const ghostStub = useMemo(() => DoorNode.parse({ position: [0, 0, 0], rotation: [0, 0, 0] }), [])
+
   useEffect(() => {
     useScene.temporal.getState().pause()
 
+    let hostKind: HostKind = null
+    // timeStamp of the most recent wall/roof mesh event. A wall/roof hover and
+    // the grid raycast from the SAME pointermove share the source DOM event's
+    // timeStamp, so the grid handler can detect "a mesh handler already owns
+    // this frame" without depending on event order or on a leave firing (node
+    // events are suppressed during a camera drag, so a sticky boolean would
+    // strand the draft after an orbit; a per-frame timestamp self-heals).
+    let lastMeshEventTime = -1
+    // R flips the door's facing side mid-placement (front ↔ back). On a wall
+    // the chosen side is `getSideFromNormal(normal)` flipped by `sideFlip`;
+    // re-applied to the last wall hover so the flip shows live before commit.
+    let sideFlip = false
+    let lastWallEvent: WallEvent | null = null
+
     const getLevelId = () => useViewer.getState().selection.levelId
     const getLevelYOffset = () => {
       const id = getLevelId()
       return id ? (sceneRegistry.nodes.get(id as AnyNodeId)?.position.y ?? 0) : 0
     }
-    const getSlabElevation = (wallEvent: WallEvent) =>
-      spatialGridManager.getSlabElevationForWall(
-        wallEvent.node.parentId ?? '',
-        wallEvent.node.start,
-        wallEvent.node.end,
-      )
+    const getSlabElevationForWall = (wall: WallNode) =>
+      spatialGridManager.getSlabElevationForWall(wall.parentId ?? '', wall.start, wall.end)
 
     const markHostDirty = (hostId: string) => {
       useScene.getState().dirtyNodes.add(hostId as AnyNodeId)
@@ -91,17 +123,22 @@ const DoorTool: React.FC = () => {
       if (cursorGroupRef.current) cursorGroupRef.current.visible = false
       useAlignmentGuides.getState().clear()
       clearOpeningGuides3D()
+      setFallbackPose(null)
     }
 
     // Alignment candidates — anchors of every alignable object; refreshed
     // after each placement. A door aligns by the plan position of its centre.
     let alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, '')
 
+    // On-host cursor: the green/red wireframe outline tracks a live draft.
+    // Showing it always clears the off-host floating ghost (they never
+    // coexist — a draft means the cursor is on a valid host).
     const updateCursor = (
       worldPosition: [number, number, number],
       cursorRotationY: number,
       valid: boolean,
     ) => {
+      setFallbackPose(null)
       const group = cursorGroupRef.current
       if (!group) return
       group.visible = true
@@ -110,218 +147,123 @@ const DoorTool: React.FC = () => {
       edgeMaterial.color.setHex(valid ? 0x22_c5_5e : 0xef_44_44)
     }
 
-    const showFallbackCursor = (event: GridEvent) => {
-      if (draftRef.current) return
-      const [x, y, z] = event.localPosition
-      updateCursor([x, y + FALLBACK_HEIGHT / 2, z], 0, false)
+    // Off-host fallback: hide the wireframe outline and float the real door
+    // geometry (tinted invalid) at the cursor so the armed tool is visible.
+    const showGhostAt = (position: [number, number, number]) => {
+      if (cursorGroupRef.current) cursorGroupRef.current.visible = false
+      setFallbackPose({ position, rotationY: 0 })
       useAlignmentGuides.getState().clear()
       clearOpeningGuides3D()
     }
 
     const showRoofFallbackCursor = (event: RoofEvent) => {
       const [x, , z] = worldToSelectedBuildingLocal(roofFallbackPoint.set(...event.position))
-      updateCursor([x, getLevelYOffset() + FALLBACK_HEIGHT / 2, z], 0, false)
-      useAlignmentGuides.getState().clear()
-      clearOpeningGuides3D()
+      showGhostAt([x, getLevelYOffset() + FALLBACK_HEIGHT / 2, z])
     }
 
     const showWallFallbackCursor = (event: WallEvent) => {
       const [x, , z] = worldToSelectedBuildingLocal(roofFallbackPoint.set(...event.position))
-      updateCursor([x, getLevelYOffset() + FALLBACK_HEIGHT / 2, z], 0, false)
-      useAlignmentGuides.getState().clear()
-      clearOpeningGuides3D()
+      showGhostAt([x, getLevelYOffset() + FALLBACK_HEIGHT / 2, z])
     }
 
-    const onWallEnter = (event: WallEvent) => {
-      if (!isValidWallSideFace(event.normal)) {
-        destroyDraft()
-        showWallFallbackCursor(event)
-        return
-      }
-      if (isCurvedWall(event.node)) {
-        destroyDraft()
-        showWallFallbackCursor(event)
-        return
-      }
-      const levelId = getLevelId()
-      if (!levelId) {
-        destroyDraft()
-        showWallFallbackCursor(event)
-        return
-      }
-      if (event.node.parentId !== levelId) {
-        destroyDraft()
-        showWallFallbackCursor(event)
-        return
-      }
-
-      destroyDraft()
-
-      const side = getSideFromNormal(event.normal)
-      const itemRotation = calculateItemRotation(event.normal)
-      const cursorRotation = calculateCursorRotation(event.normal, event.node.start, event.node.end)
-
-      const width = 0.9
-      const height = 2.1
+    // Settle a wall target: alignment snap → clamp → overlap check. Pure read.
+    const resolveWallPlacement = (
+      wall: WallNode,
+      rawLocalX: number,
+      width: number,
+      height: number,
+      bypass: boolean,
+      bypassSnap: boolean,
+      ignoreId?: string,
+    ) => {
       const localX = resolveWallSlideAlignment({
-        wallNode: event.node,
-        rawLocalX: event.localPosition[0],
+        wallNode: wall,
+        rawLocalX,
         width,
         candidates: alignmentCandidates,
-        bypass: event.nativeEvent?.altKey === true || event.nativeEvent?.shiftKey === true,
-        bypassSnap: event.nativeEvent?.shiftKey === true,
+        bypass,
+        bypassSnap,
       })
-
-      const { clampedX, clampedY } = clampToWall(event.node, localX, width, height)
-
-      const node = DoorNode.parse({
-        position: [clampedX, clampedY, 0],
-        rotation: [0, itemRotation, 0],
-        side,
-        wallId: event.node.id,
-        parentId: event.node.id,
-        metadata: { isTransient: true },
-      })
-
-      useScene.getState().createNode(node, event.node.id as AnyNodeId)
-      draftRef.current = node
-
-      const valid = !hasWallChildOverlap(event.node.id, clampedX, clampedY, width, height, node.id)
-
-      updateCursor(
-        wallLocalToWorld(
-          event.node,
-          clampedX,
-          clampedY,
-          getLevelYOffset(),
-          getSlabElevation(event),
-        ),
-        cursorRotation,
-        valid,
-      )
-
-      publishOpeningGuidesForWallEvent({
-        wall: event.node,
-        movingId: node.id,
-        centerS: clampedX,
-        centerY: clampedY,
-        width,
-        height,
-        includeVertical: false,
-        levelYOffset: getLevelYOffset(),
-        slabElevation: getSlabElevation(event),
-      })
-      event.stopPropagation()
+      const { clampedX, clampedY } = clampToWall(wall, localX, width, height)
+      const valid = !hasWallChildOverlap(wall.id, clampedX, clampedY, width, height, ignoreId)
+      return { clampedX, clampedY, valid }
     }
 
-    const onWallMove = (event: WallEvent) => {
-      if (!isValidWallSideFace(event.normal)) {
-        destroyDraft()
-        showWallFallbackCursor(event)
-        return
-      }
-      if (isCurvedWall(event.node)) {
-        destroyDraft()
-        showWallFallbackCursor(event)
-        return
-      }
-      if (event.node.parentId !== getLevelId()) {
-        destroyDraft()
-        showWallFallbackCursor(event)
-        return
-      }
-
-      const side = getSideFromNormal(event.normal)
-      const itemRotation = calculateItemRotation(event.normal)
-      const cursorRotation = calculateCursorRotation(event.normal, event.node.start, event.node.end)
-
+    // Shared create/update path for the wall draft — used by the direct
+    // wall-mesh hover and the floor proximity snap. Reuses the existing draft
+    // (reparenting only on an actual wall change to avoid churning the host's
+    // children array, which flashes 0-vertex wall geometry in WebGPU).
+    const applyWallTarget = (args: {
+      wall: WallNode
+      rawLocalX: number
+      side: 'front' | 'back'
+      itemRotation: number
+      cursorRotationY: number
+      bypass: boolean
+      bypassSnap: boolean
+    }) => {
+      const { wall, rawLocalX, side, itemRotation, cursorRotationY, bypass, bypassSnap } = args
       const width = draftRef.current?.width ?? 0.9
       const height = draftRef.current?.height ?? 2.1
-      const localX = resolveWallSlideAlignment({
-        wallNode: event.node,
-        rawLocalX: event.localPosition[0],
-        width,
-        candidates: alignmentCandidates,
-        bypass: event.nativeEvent?.altKey === true || event.nativeEvent?.shiftKey === true,
-        bypassSnap: event.nativeEvent?.shiftKey === true,
-      })
 
-      const { clampedX, clampedY } = clampToWall(event.node, localX, width, height)
-
-      // Draft may be null after a successful placement (the click handler
-      // deletes it and relies on the wall rebuild → pointer-enter cascade to
-      // recreate it). Recreate it here on the first subsequent move so the
-      // preview is ready for the next click without requiring a leave/enter.
       if (!draftRef.current) {
-        const levelId = getLevelId()
-        if (levelId && event.node.parentId === levelId) {
-          const node = DoorNode.parse({
-            position: [clampedX, clampedY, 0],
-            rotation: [0, itemRotation, 0],
-            side,
-            wallId: event.node.id,
-            parentId: event.node.id,
-            metadata: { isTransient: true },
-          })
-          useScene.getState().createNode(node, event.node.id as AnyNodeId)
-          draftRef.current = node
-        }
+        const node = DoorNode.parse({
+          position: [0, height / 2, 0],
+          rotation: [0, itemRotation, 0],
+          side,
+          wallId: wall.id,
+          parentId: wall.id,
+          metadata: { isTransient: true },
+        })
+        useScene.getState().createNode(node, wall.id as AnyNodeId)
+        draftRef.current = node
       }
 
-      if (draftRef.current) {
-        // Update the scene store on every move so the 2D floor plan
-        // stays in sync (it re-renders from `node.position`). Only
-        // forward `parentId` / `wallId` when the wall actually changed
-        // — otherwise the reparent path churns the host wall's
-        // `children` array every tick, which re-renders the wall and
-        // briefly draws its 0-vertex placeholder geometry (WebGPU then
-        // flags "Vertex buffer slot 0 ... was not set").
-        const isSameWall = event.node.id === draftRef.current.parentId
-        if (isSameWall) {
-          useScene.getState().updateNode(draftRef.current.id, {
-            position: [clampedX, clampedY, 0],
-            rotation: [0, itemRotation, 0],
-            side,
-          })
-          markHostDirty(event.node.id)
-        } else {
-          useScene.getState().updateNode(draftRef.current.id, {
-            position: [clampedX, clampedY, 0],
-            rotation: [0, itemRotation, 0],
-            side,
-            parentId: event.node.id,
-            wallId: event.node.id,
-            // The draft may arrive from a roof-segment face hover.
-            roofSegmentId: undefined,
-            roofFace: undefined,
-          })
-        }
-      }
-
-      const valid = !hasWallChildOverlap(
-        event.node.id,
-        clampedX,
-        clampedY,
+      const { clampedX, clampedY, valid } = resolveWallPlacement(
+        wall,
+        rawLocalX,
         width,
         height,
-        draftRef.current?.id,
+        bypass,
+        bypassSnap,
+        draftRef.current.id,
       )
 
+      if (wall.id === draftRef.current.parentId) {
+        useScene.getState().updateNode(draftRef.current.id, {
+          position: [clampedX, clampedY, 0],
+          rotation: [0, itemRotation, 0],
+          side,
+        })
+        markHostDirty(wall.id)
+      } else {
+        useScene.getState().updateNode(draftRef.current.id, {
+          position: [clampedX, clampedY, 0],
+          rotation: [0, itemRotation, 0],
+          side,
+          parentId: wall.id,
+          wallId: wall.id,
+          // The draft may arrive from a roof-segment face hover.
+          roofSegmentId: undefined,
+          roofFace: undefined,
+        })
+      }
+
       updateCursor(
         wallLocalToWorld(
-          event.node,
+          wall,
           clampedX,
           clampedY,
           getLevelYOffset(),
-          getSlabElevation(event),
+          getSlabElevationForWall(wall),
         ),
-        cursorRotation,
+        cursorRotationY,
         valid,
       )
 
       if (draftRef.current) {
         publishOpeningGuidesForWallEvent({
-          wall: event.node,
+          wall,
           movingId: draftRef.current.id,
           centerS: clampedX,
           centerY: clampedY,
@@ -329,47 +271,25 @@ const DoorTool: React.FC = () => {
           height,
           includeVertical: false,
           levelYOffset: getLevelYOffset(),
-          slabElevation: getSlabElevation(event),
+          slabElevation: getSlabElevationForWall(wall),
         })
       }
-      event.stopPropagation()
+      return { clampedX, clampedY, valid }
     }
 
-    const onWallClick = (event: WallEvent) => {
-      if (!draftRef.current) return
-      if (!isValidWallSideFace(event.normal)) return
-      if (isCurvedWall(event.node)) return
-      if (event.node.parentId !== getLevelId()) return
-
-      const side = getSideFromNormal(event.normal)
-      const itemRotation = calculateItemRotation(event.normal)
-
-      const localX = resolveWallSlideAlignment({
-        wallNode: event.node,
-        rawLocalX: event.localPosition[0],
-        width: draftRef.current.width,
-        candidates: alignmentCandidates,
-        bypass: event.nativeEvent?.altKey === true || event.nativeEvent?.shiftKey === true,
-        bypassSnap: event.nativeEvent?.shiftKey === true,
-      })
-      const { clampedX, clampedY } = clampToWall(
-        event.node,
-        localX,
-        draftRef.current.width,
-        draftRef.current.height,
-      )
-      const valid = !hasWallChildOverlap(
-        event.node.id,
-        clampedX,
-        clampedY,
-        draftRef.current.width,
-        draftRef.current.height,
-        draftRef.current.id,
-      )
-      if (!valid) return
-
+    // Promote the draft into a permanent door. Shared by the wall-mesh click
+    // and the floor proximity click.
+    const commitDoorAtWall = (
+      wall: WallNode,
+      clampedX: number,
+      clampedY: number,
+      side: 'front' | 'back',
+      itemRotation: number,
+    ) => {
       const draft = draftRef.current
+      if (!draft) return
       draftRef.current = null
+      hostKind = null
 
       useScene.getState().deleteNode(draft.id)
       useScene.temporal.getState().resume()
@@ -378,18 +298,17 @@ const DoorTool: React.FC = () => {
       const state = useScene.getState()
       const doorCount = Object.values(state.nodes).filter((n) => {
         if (n.type !== 'door') return false
-        const wall = n.parentId ? state.nodes[n.parentId as AnyNodeId] : undefined
-        return wall?.parentId === levelId
+        const w = n.parentId ? state.nodes[n.parentId as AnyNodeId] : undefined
+        return w?.parentId === levelId
       }).length
-      const name = `Door ${doorCount + 1}`
 
       const node = DoorNode.parse({
-        name,
+        name: `Door ${doorCount + 1}`,
         position: [clampedX, clampedY, 0],
         rotation: [0, itemRotation, 0],
         side,
-        wallId: event.node.id,
-        parentId: event.node.id,
+        wallId: wall.id,
+        parentId: wall.id,
         width: draft.width,
         height: draft.height,
         doorCategory: draft.doorCategory,
@@ -414,20 +333,108 @@ const DoorTool: React.FC = () => {
         panicBarHeight: draft.panicBarHeight,
       })
 
-      useScene.getState().createNode(node, event.node.id as AnyNodeId)
+      useScene.getState().createNode(node, wall.id as AnyNodeId)
       useViewer.getState().setSelection({ selectedIds: [node.id] })
       useScene.temporal.getState().pause()
       triggerSFX('sfx:structure-build')
       alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, '')
       useAlignmentGuides.getState().clear()
       clearOpeningGuides3D()
+    }
 
+    // ── Direct wall-mesh hover ──────────────────────────────────────
+    const onWallHover = (event: WallEvent) => {
+      hostKind = 'wall'
+      lastMeshEventTime = event.nativeEvent?.timeStamp ?? -1
+      if (
+        !isValidWallSideFace(event.normal) ||
+        isCurvedWall(event.node) ||
+        event.node.parentId !== getLevelId()
+      ) {
+        destroyDraft()
+        showWallFallbackCursor(event)
+        return
+      }
+      lastWallEvent = event
+
+      const faceSide = getSideFromNormal(event.normal)
+      const side = sideFlip ? (faceSide === 'front' ? 'back' : 'front') : faceSide
+      const flipOffset = sideFlip ? Math.PI : 0
+      const itemRotation = calculateItemRotation(event.normal) + flipOffset
+      const cursorRotation =
+        calculateCursorRotation(event.normal, event.node.start, event.node.end) + flipOffset
+      const bypassSnap = event.nativeEvent?.shiftKey === true
+      const bypass = event.nativeEvent?.altKey === true || bypassSnap
+
+      applyWallTarget({
+        wall: event.node,
+        rawLocalX: event.localPosition[0],
+        side,
+        itemRotation,
+        cursorRotationY: cursorRotation,
+        bypass,
+        bypassSnap,
+      })
+      event.stopPropagation()
+    }
+
+    const onWallClick = (event: WallEvent) => {
+      if (!draftRef.current) return
+      if (
+        !isValidWallSideFace(event.normal) ||
+        isCurvedWall(event.node) ||
+        event.node.parentId !== getLevelId()
+      ) {
+        return
+      }
+
+      const faceSide = getSideFromNormal(event.normal)
+      const side = sideFlip ? (faceSide === 'front' ? 'back' : 'front') : faceSide
+      const itemRotation = calculateItemRotation(event.normal) + (sideFlip ? Math.PI : 0)
+      const bypassSnap = event.nativeEvent?.shiftKey === true
+      const bypass = event.nativeEvent?.altKey === true || bypassSnap
+
+      const { clampedX, clampedY, valid } = resolveWallPlacement(
+        event.node,
+        event.localPosition[0],
+        draftRef.current.width,
+        draftRef.current.height,
+        bypass,
+        bypassSnap,
+        draftRef.current.id,
+      )
+      if (!valid) return
+
+      commitDoorAtWall(event.node, clampedX, clampedY, side, itemRotation)
       event.stopPropagation()
     }
 
     const onWallLeave = () => {
+      if (hostKind !== 'wall') return
+      lastWallEvent = null
       destroyDraft()
       hideCursor()
+      hostKind = null
+    }
+
+    // ── Floor free-follow ───────────────────────────────────────────
+    // Over open floor the ghost follows the cursor like a moving item. It does
+    // NOT snap from proximity — snapping engages only when the cursor ray
+    // actually hovers a wall (onWallHover) or roof face (onRoofHover).
+    const onGridFreeFollow = (event: GridEvent) => {
+      if (useViewer.getState().cameraDragging) return
+      // A wall/roof mesh handler processed this exact pointermove (R3F + the
+      // grid raycast share the source DOM event's timeStamp) — it owns the
+      // frame and has snapped the draft, so skip the floor follow this tick.
+      const ts = event.nativeEvent?.timeStamp ?? -1
+      if (ts === lastMeshEventTime) return
+      // Fresh floor-only frame: the cursor is off any wall/roof. Drop any draft
+      // and free-follow the cursor with the invalid (unplaceable) ghost.
+      hostKind = null
+      lastWallEvent = null
+      const [x, y, z] = event.localPosition
+      destroyDraft()
+      showGhostAt([x, y + FALLBACK_HEIGHT / 2, z])
     }
 
     // ── Roof-segment wall faces ─────────────────────────────────────
@@ -449,6 +456,8 @@ const DoorTool: React.FC = () => {
     }
 
     const onRoofHover = (event: RoofEvent) => {
+      hostKind = 'roof'
+      lastMeshEventTime = event.nativeEvent?.timeStamp ?? -1
       const target = resolveRoofTarget(event)
       if (!target) {
         // On the roof but not over a placeable wall face (slope, soffit,
@@ -493,6 +502,7 @@ const DoorTool: React.FC = () => {
 
       const draft = draftRef.current
       draftRef.current = null
+      hostKind = null
 
       useScene.getState().deleteNode(draft.id)
       useScene.temporal.getState().resume()
@@ -545,26 +555,44 @@ const DoorTool: React.FC = () => {
     }
 
     const onRoofLeave = () => {
-      if (!draftRef.current?.roofSegmentId) return
+      if (hostKind !== 'roof') return
       destroyDraft()
       hideCursor()
+      hostKind = null
     }
 
     const onCancel = () => {
       destroyDraft()
       hideCursor()
+      hostKind = null
     }
 
-    emitter.on('wall:enter', onWallEnter)
-    emitter.on('wall:move', onWallMove)
+    // R flips the door's facing side mid-placement (front ↔ back), like the
+    // committed-selected R flip. Only meaningful while snapped to a wall (the
+    // off-wall ghost has no orientation), so it acts only then — re-applying
+    // the last wall hover so the snapped preview flips live.
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'r' && e.key !== 'R') return
+      if (!lastWallEvent) return
+      const t = e.target as HTMLElement | null
+      if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return
+      e.preventDefault()
+      sideFlip = !sideFlip
+      triggerSFX('sfx:item-rotate')
+      onWallHover(lastWallEvent)
+    }
+
+    emitter.on('wall:enter', onWallHover)
+    emitter.on('wall:move', onWallHover)
     emitter.on('wall:click', onWallClick)
     emitter.on('wall:leave', onWallLeave)
     emitter.on('roof:enter', onRoofHover)
     emitter.on('roof:move', onRoofHover)
     emitter.on('roof:click', onRoofClick)
     emitter.on('roof:leave', onRoofLeave)
-    emitter.on('grid:move', showFallbackCursor)
+    emitter.on('grid:move', onGridFreeFollow)
     emitter.on('tool:cancel', onCancel)
+    window.addEventListener('keydown', onKeyDown)
 
     return () => {
       destroyDraft()
@@ -572,16 +600,17 @@ const DoorTool: React.FC = () => {
       useAlignmentGuides.getState().clear()
       clearOpeningGuides3D()
       useScene.temporal.getState().resume()
-      emitter.off('wall:enter', onWallEnter)
-      emitter.off('wall:move', onWallMove)
+      emitter.off('wall:enter', onWallHover)
+      emitter.off('wall:move', onWallHover)
       emitter.off('wall:click', onWallClick)
       emitter.off('wall:leave', onWallLeave)
       emitter.off('roof:enter', onRoofHover)
       emitter.off('roof:move', onRoofHover)
       emitter.off('roof:click', onRoofClick)
       emitter.off('roof:leave', onRoofLeave)
-      emitter.off('grid:move', showFallbackCursor)
+      emitter.off('grid:move', onGridFreeFollow)
       emitter.off('tool:cancel', onCancel)
+      window.removeEventListener('keydown', onKeyDown)
     }
   }, [])
 
@@ -597,14 +626,21 @@ const DoorTool: React.FC = () => {
   useEffect(() => () => edgesGeo.dispose(), [edgesGeo])
 
   return (
-    <group ref={cursorGroupRef} visible={false}>
-      <lineSegments
-        geometry={edgesGeo}
-        layers={EDITOR_LAYER}
-        material={edgeMaterial}
-        ref={edgesRef}
-      />
-    </group>
+    <>
+      <group ref={cursorGroupRef} visible={false}>
+        <lineSegments
+          geometry={edgesGeo}
+          layers={EDITOR_LAYER}
+          material={edgeMaterial}
+          ref={edgesRef}
+        />
+      </group>
+      {fallbackPose && (
+        <group position={fallbackPose.position} rotation-y={fallbackPose.rotationY}>
+          <DoorPreview invalid node={ghostStub} />
+        </group>
+      )}
+    </>
   )
 }