@pascal-app/editor 0.4.0 → 0.5.1

package/src/components/editor/thumbnail-generator.tsx

@@ -1,10 +1,28 @@
 'use client'
 
-import { emitter, sceneRegistry, useScene } from '@pascal-app/core'
-import { snapLevelsToTruePositions } from '@pascal-app/viewer'
+import { emitter, useScene } from '@pascal-app/core'
+import { SSGI_PARAMS, snapLevelsToTruePositions } from '@pascal-app/viewer'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
 import * as THREE from 'three'
+import { UnsignedByteType } from 'three'
+import { ssgi } from 'three/addons/tsl/display/SSGINode.js'
+import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js'
+import { fxaa } from 'three/examples/jsm/tsl/display/FXAANode.js'
+import {
+  colorToDirection,
+  convertToTexture,
+  diffuseColor,
+  directionToColor,
+  float,
+  mrt,
+  normalView,
+  output,
+  pass,
+  sample,
+  vec4,
+} from 'three/tsl'
+import { RenderPipeline, RenderTarget, type WebGPURenderer } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../lib/constants'
 
 const THUMBNAIL_WIDTH = 1920
@@ -18,15 +36,107 @@ interface ThumbnailGeneratorProps {
 export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorProps) => {
   const gl = useThree((state) => state.gl)
   const scene = useThree((state) => state.scene)
+  const mainCamera = useThree((state) => state.camera)
   const isGenerating = useRef(false)
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const pendingAutoRef = useRef(false)
   const onThumbnailCaptureRef = useRef(onThumbnailCapture)
 
+  const thumbnailCameraRef = useRef<THREE.PerspectiveCamera | null>(null)
+  const pipelineRef = useRef<RenderPipeline | null>(null)
+  const renderTargetRef = useRef<RenderTarget | null>(null)
+
   useEffect(() => {
     onThumbnailCaptureRef.current = onThumbnailCapture
   }, [onThumbnailCapture])
 
+  // Build the thumbnail camera, SSGI pipeline, and render target once — reused on every capture.
+  useEffect(() => {
+    const cam = new THREE.PerspectiveCamera(60, THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT, 0.1, 1000)
+    cam.layers.disable(EDITOR_LAYER)
+    thumbnailCameraRef.current = cam
+
+    let mounted = true
+
+    const buildPipeline = async () => {
+      try {
+        if ((gl as any).init) await (gl as any).init()
+        if (!mounted) return
+
+        // pass() handles MRT internally for all material types, including custom
+        // shaders — unlike renderer.setMRT() which crashes on non-NodeMaterials.
+        // pass() also respects camera.layers, so EDITOR_LAYER objects are filtered.
+        const scenePass = pass(scene, cam)
+        scenePass.setMRT(
+          mrt({
+            output,
+            diffuseColor,
+            normal: directionToColor(normalView),
+          }),
+        )
+
+        const scenePassColor = scenePass.getTextureNode('output')
+        const scenePassDepth = scenePass.getTextureNode('depth')
+        const scenePassNormal = scenePass.getTextureNode('normal')
+
+        scenePass.getTexture('diffuseColor').type = UnsignedByteType
+        scenePass.getTexture('normal').type = UnsignedByteType
+
+        const sceneNormal = sample((uv) => colorToDirection(scenePassNormal.sample(uv)))
+
+        const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, cam as any)
+        giPass.sliceCount.value = SSGI_PARAMS.sliceCount
+        giPass.stepCount.value = SSGI_PARAMS.stepCount
+        giPass.radius.value = SSGI_PARAMS.radius
+        giPass.expFactor.value = SSGI_PARAMS.expFactor
+        giPass.thickness.value = SSGI_PARAMS.thickness
+        giPass.backfaceLighting.value = SSGI_PARAMS.backfaceLighting
+        giPass.aoIntensity.value = SSGI_PARAMS.aoIntensity
+        giPass.giIntensity.value = SSGI_PARAMS.giIntensity
+        giPass.useLinearThickness.value = SSGI_PARAMS.useLinearThickness
+        giPass.useScreenSpaceSampling.value = SSGI_PARAMS.useScreenSpaceSampling
+        giPass.useTemporalFiltering = SSGI_PARAMS.useTemporalFiltering
+
+        const giTexture = (giPass as any).getTextureNode()
+        const aoAsRgb = vec4(giTexture.a, giTexture.a, giTexture.a, float(1))
+        const denoisePass = denoise(aoAsRgb, scenePassDepth, sceneNormal, cam)
+        denoisePass.index.value = 0
+        denoisePass.radius.value = 4
+
+        const ao = (denoisePass as any).r
+        const finalOutput = vec4(scenePassColor.rgb.mul(ao), scenePassColor.a)
+
+        // FXAA requires a texture node as input; convertToTexture renders finalOutput
+        // into an intermediate RT so FXAA can sample it with neighbour UV offsets.
+        const aaOutput = fxaa(convertToTexture(finalOutput))
+
+        const pipeline = new RenderPipeline(gl as unknown as WebGPURenderer)
+        pipeline.outputNode = aaOutput
+        pipelineRef.current = pipeline
+
+        // Dedicated render target — pipeline outputs here instead of the canvas,
+        // so R3F's main render loop can never overwrite our capture.
+        const { width, height } = gl.domElement
+        renderTargetRef.current = new RenderTarget(width, height, { depthBuffer: true })
+      } catch (error) {
+        console.error(
+          '[thumbnail] Failed to build post-processing pipeline, will use fallback render.',
+          error,
+        )
+      }
+    }
+
+    buildPipeline()
+
+    return () => {
+      mounted = false
+      pipelineRef.current?.dispose()
+      pipelineRef.current = null
+      renderTargetRef.current?.dispose()
+      renderTargetRef.current = null
+    }
+  }, [gl, scene])
+
   const generate = useCallback(async () => {
     if (isGenerating.current) return
     if (!onThumbnailCaptureRef.current) return
@@ -34,84 +144,155 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
     isGenerating.current = true
 
     try {
-      const thumbnailCamera = new THREE.PerspectiveCamera(
-        60,
-        THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT,
-        0.1,
-        1000,
-      )
-
-      const nodes = useScene.getState().nodes
-      const siteNode = Object.values(nodes).find((n) => n.type === 'site')
-
-      if (siteNode?.camera) {
-        const { position, target } = siteNode.camera
-        thumbnailCamera.position.set(position[0], position[1], position[2])
-        thumbnailCamera.lookAt(target[0], target[1], target[2])
-      } else {
-        thumbnailCamera.position.set(8, 8, 8)
-        thumbnailCamera.lookAt(0, 0, 0)
-      }
-      thumbnailCamera.layers.disable(EDITOR_LAYER)
+      const thumbnailCamera = thumbnailCameraRef.current
+      if (!thumbnailCamera) return
 
+      // Copy the main camera's transform and projection so the thumbnail
+      // matches exactly what the user sees in the viewport.
+      thumbnailCamera.position.copy(mainCamera.position)
+      thumbnailCamera.quaternion.copy(mainCamera.quaternion)
+      if (mainCamera instanceof THREE.PerspectiveCamera) {
+        thumbnailCamera.fov = mainCamera.fov
+        thumbnailCamera.near = mainCamera.near
+        thumbnailCamera.far = mainCamera.far
+      }
       const { width, height } = gl.domElement
       thumbnailCamera.aspect = width / height
       thumbnailCamera.updateProjectionMatrix()
 
       const restoreLevels = snapLevelsToTruePositions()
 
-      const visibilitySnapshot = new Map<string, boolean>()
-      for (const type of ['scan', 'guide'] as const) {
-        sceneRegistry.byType[type].forEach((id) => {
-          const obj = sceneRegistry.nodes.get(id)
-          if (obj) {
-            visibilitySnapshot.set(id, obj.visible)
-            obj.visible = false
-          }
-        })
-      }
+      let blob: Blob
 
-      gl.render(scene, thumbnailCamera)
-
-      restoreLevels()
-      visibilitySnapshot.forEach((wasVisible, id) => {
-        const obj = sceneRegistry.nodes.get(id)
-        if (obj) obj.visible = wasVisible
-      })
-
-      const srcAspect = width / height
-      const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
-      let sx = 0,
-        sy = 0,
-        sWidth = width,
-        sHeight = height
-      if (srcAspect > dstAspect) {
-        sWidth = Math.round(height * dstAspect)
-        sx = Math.round((width - sWidth) / 2)
-      } else if (srcAspect < dstAspect) {
-        sHeight = Math.round(width / dstAspect)
-        sy = Math.round((height - sHeight) / 2)
-      }
+      if (pipelineRef.current && renderTargetRef.current) {
+        const rt = renderTargetRef.current
+
+        // Resize RT if the canvas dimensions changed
+        if (rt.width !== width || rt.height !== height) {
+          rt.setSize(width, height)
+        }
 
-      const offscreen = document.createElement('canvas')
-      offscreen.width = THUMBNAIL_WIDTH
-      offscreen.height = THUMBNAIL_HEIGHT
-      const ctx = offscreen.getContext('2d')!
-      ctx.drawImage(gl.domElement, sx, sy, sWidth, sHeight, 0, 0, THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT)
+        const renderer = gl as unknown as WebGPURenderer
 
-      offscreen.toBlob((blob) => {
-        if (blob) {
-          onThumbnailCaptureRef.current?.(blob)
+        // Swap selected-item materials back to originals for the capture,
+        // then re-apply highlights immediately after.
+        emitter.emit('thumbnail:before-capture', undefined)
+        ;(renderer as any).setClearAlpha(0)
+        renderer.setRenderTarget(rt)
+        pipelineRef.current.render()
+        renderer.setRenderTarget(null)
+        emitter.emit('thumbnail:after-capture', undefined)
+
+        // Restore level positions immediately after the render — before the async GPU readback.
+        restoreLevels()
+
+        // Read pixels from the RT asynchronously.
+        // WebGPU copyTextureToBuffer aligns each row to 256 bytes, so we must
+        // depad the rows before constructing ImageData.
+        const pixels = (await (renderer as any).readRenderTargetPixelsAsync(
+          rt,
+          0,
+          0,
+          width,
+          height,
+        )) as Uint8Array
+
+        const actualBytesPerRow = width * 4
+        const paddedBytesPerRow = Math.ceil(actualBytesPerRow / 256) * 256
+        let tightPixels: Uint8ClampedArray
+        if (paddedBytesPerRow === actualBytesPerRow) {
+          // No padding — use the buffer directly
+          tightPixels = new Uint8ClampedArray(pixels.buffer, pixels.byteOffset, pixels.byteLength)
         } else {
-          console.error('❌ Failed to create blob from canvas')
+          // Depad rows
+          tightPixels = new Uint8ClampedArray(width * height * 4)
+          for (let row = 0; row < height; row++) {
+            tightPixels.set(
+              pixels.subarray(row * paddedBytesPerRow, row * paddedBytesPerRow + actualBytesPerRow),
+              row * actualBytesPerRow,
+            )
+          }
+        }
+
+        // Crop to thumbnail aspect ratio and draw to offscreen canvas
+        const srcAspect = width / height
+        const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
+        let sx = 0,
+          sy = 0,
+          sWidth = width,
+          sHeight = height
+        if (srcAspect > dstAspect) {
+          sWidth = Math.round(height * dstAspect)
+          sx = Math.round((width - sWidth) / 2)
+        } else if (srcAspect < dstAspect) {
+          sHeight = Math.round(width / dstAspect)
+          sy = Math.round((height - sHeight) / 2)
         }
-        isGenerating.current = false
-      }, 'image/png')
+
+        const imageData = new ImageData(
+          tightPixels as unknown as Uint8ClampedArray<ArrayBuffer>,
+          width,
+          height,
+        )
+        const srcCanvas = new OffscreenCanvas(width, height)
+        srcCanvas.getContext('2d')!.putImageData(imageData, 0, 0)
+
+        const offscreen = new OffscreenCanvas(THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT)
+        offscreen
+          .getContext('2d')!
+          .drawImage(srcCanvas, sx, sy, sWidth, sHeight, 0, 0, THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT)
+
+        blob = await offscreen.convertToBlob({ type: 'image/png' })
+      } else {
+        // Fallback: plain render directly to the canvas
+        gl.render(scene, thumbnailCamera)
+        restoreLevels()
+
+        const srcAspect = width / height
+        const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
+        let sx = 0,
+          sy = 0,
+          sWidth = width,
+          sHeight = height
+        if (srcAspect > dstAspect) {
+          sWidth = Math.round(height * dstAspect)
+          sx = Math.round((width - sWidth) / 2)
+        } else if (srcAspect < dstAspect) {
+          sHeight = Math.round(width / dstAspect)
+          sy = Math.round((height - sHeight) / 2)
+        }
+
+        const offscreen = document.createElement('canvas')
+        offscreen.width = THUMBNAIL_WIDTH
+        offscreen.height = THUMBNAIL_HEIGHT
+        const ctx = offscreen.getContext('2d')!
+        ctx.drawImage(
+          gl.domElement,
+          sx,
+          sy,
+          sWidth,
+          sHeight,
+          0,
+          0,
+          THUMBNAIL_WIDTH,
+          THUMBNAIL_HEIGHT,
+        )
+
+        blob = await new Promise<Blob>((resolve, reject) =>
+          offscreen.toBlob(
+            (b) => (b ? resolve(b) : reject(new Error('Canvas capture failed'))),
+            'image/png',
+          ),
+        )
+      }
+
+      onThumbnailCaptureRef.current?.(blob)
     } catch (error) {
       console.error('❌ Failed to generate thumbnail:', error)
+    } finally {
       isGenerating.current = false
     }
-  }, [gl, scene])
+  }, [gl, scene, mainCamera])
 
   // Manual trigger via emitter
   useEffect(() => {

package/src/components/systems/stair/stair-edit-system.tsx

@@ -1,6 +1,6 @@
 import { type AnyNodeId, type StairNode, sceneRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 
 /**
  * Imperatively toggles the Three.js visibility of stair objects based on the
@@ -17,6 +17,27 @@ import { useEffect, useRef } from 'react'
  */
 export const StairEditSystem = () => {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedStairSignature = useScene(
+    useCallback(
+      (state) =>
+        selectedIds
+          .map((id) => {
+            const node = state.nodes[id as AnyNodeId]
+            if (!node) return null
+            if (node.type === 'stair') {
+              return `${node.id}:${node.stairType}`
+            }
+            if (node.type === 'stair-segment' && node.parentId) {
+              const parent = state.nodes[node.parentId as AnyNodeId] as StairNode | undefined
+              return parent?.type === 'stair' ? `${parent.id}:${parent.stairType}` : null
+            }
+            return null
+          })
+          .filter(Boolean)
+          .join('|'),
+      [selectedIds],
+    ),
+  )
   const prevActiveStairIds = useRef(new Set<string>())
 
   useEffect(() => {
@@ -41,14 +62,15 @@ export const StairEditSystem = () => {
       const group = sceneRegistry.nodes.get(stairId)
       if (!group) continue
 
+      const stairNode = nodes[stairId as AnyNodeId] as StairNode | undefined
+      const isCurved = stairNode?.stairType === 'curved' || stairNode?.stairType === 'spiral'
       const mergedMesh = group.getObjectByName('merged-stair')
       const segmentsWrapper = group.getObjectByName('segments-wrapper')
       const isActive = activeStairIds.has(stairId)
 
-      if (mergedMesh) mergedMesh.visible = !isActive
-      if (segmentsWrapper) segmentsWrapper.visible = isActive
+      if (mergedMesh) mergedMesh.visible = !isActive && !isCurved
+      if (segmentsWrapper) segmentsWrapper.visible = isActive && !isCurved
 
-      const stairNode = nodes[stairId as AnyNodeId] as StairNode | undefined
       if (stairNode?.children?.length) {
         const wasActive = prevActiveStairIds.current.has(stairId)
         if (isActive !== wasActive) {
@@ -63,7 +85,7 @@ export const StairEditSystem = () => {
     }
 
     prevActiveStairIds.current = activeStairIds
-  }, [selectedIds])
+  }, [selectedIds, selectedStairSignature])
 
   return null
 }

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

@@ -0,0 +1,157 @@
+'use client'
+
+import {
+  type BuildingNode,
+  emitter,
+  type GridEvent,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useFrame } from '@react-three/fiber'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import * as THREE from 'three'
+import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+import { CursorSphere } from '../shared/cursor-sphere'
+
+export function MoveBuildingContent({ node }: { node: BuildingNode }) {
+  const previousGridPosRef = useRef<[number, number] | null>(null)
+
+  // Stable refs so the effect never needs node in its dependency array
+  const nodeIdRef = useRef(node.id)
+  const originalPositionRef = useRef<[number, number, number]>([...node.position] as [
+    number,
+    number,
+    number,
+  ])
+  const originalRotationRef = useRef<number>(node.rotation[1] ?? 0)
+  const pendingRotationRef = useRef<number>(node.rotation[1] ?? 0)
+
+  const [cursorWorldPos, setCursorWorldPos] = useState<[number, number, number]>(() => {
+    const obj = sceneRegistry.nodes.get(node.id)
+    if (obj) {
+      const pos = new THREE.Vector3()
+      obj.getWorldPosition(pos)
+      return [pos.x, pos.y, pos.z]
+    }
+    return [node.position[0], node.position[1], node.position[2]]
+  })
+
+  const exitMoveMode = useCallback(() => {
+    useEditor.getState().setMovingNode(null)
+  }, [])
+
+  useEffect(() => {
+    const nodeId = nodeIdRef.current
+    const originalPosition = originalPositionRef.current
+
+    useScene.temporal.getState().pause()
+
+    let wasCommitted = false
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+        return
+      }
+
+      const ROTATION_STEP = Math.PI / 2
+      let rotationDelta = 0
+      if (event.key === 'r' || event.key === 'R') rotationDelta = ROTATION_STEP
+      else if (event.key === 't' || event.key === 'T') rotationDelta = -ROTATION_STEP
+
+      if (rotationDelta !== 0) {
+        event.preventDefault()
+        sfxEmitter.emit('sfx:item-rotate')
+        pendingRotationRef.current += rotationDelta
+
+        const mesh = sceneRegistry.nodes.get(nodeId)
+        if (mesh) mesh.rotation.y = pendingRotationRef.current
+      }
+    }
+
+    const onGridMove = (event: GridEvent) => {
+      const gridX = Math.round(event.position[0] * 2) / 2
+      const gridZ = Math.round(event.position[2] * 2) / 2
+
+      if (
+        previousGridPosRef.current &&
+        (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])
+      ) {
+        sfxEmitter.emit('sfx:grid-snap')
+      }
+
+      previousGridPosRef.current = [gridX, gridZ]
+      setCursorWorldPos([gridX, 0, gridZ])
+
+      // Directly update the Three.js group — no store update during drag
+      const mesh = sceneRegistry.nodes.get(nodeId)
+      if (mesh) {
+        mesh.position.x = gridX
+        mesh.position.z = gridZ
+      }
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      const gridX = Math.round(event.position[0] * 2) / 2
+      const gridZ = Math.round(event.position[2] * 2) / 2
+
+      wasCommitted = true
+
+      useScene.temporal.getState().resume()
+      useScene.getState().updateNode(nodeId, {
+        position: [gridX, originalPosition[1], gridZ],
+        rotation: [0, pendingRotationRef.current, 0],
+      })
+      useScene.temporal.getState().pause()
+
+      sfxEmitter.emit('sfx:item-place')
+      useViewer.getState().setSelection({ buildingId: nodeId as BuildingNode['id'] })
+      exitMoveMode()
+      event.nativeEvent?.stopPropagation?.()
+    }
+
+    const onCancel = () => {
+      // Revert mesh position and rotation immediately
+      const mesh = sceneRegistry.nodes.get(nodeId)
+      if (mesh) {
+        mesh.position.x = originalPosition[0]
+        mesh.position.z = originalPosition[2]
+        mesh.rotation.y = originalRotationRef.current
+      }
+      pendingRotationRef.current = originalRotationRef.current
+      // Restore building selection
+      useViewer.getState().setSelection({ buildingId: nodeId as BuildingNode['id'] })
+      useScene.temporal.getState().resume()
+      // Tell the keyboard handler we handled this, so it doesn't also clear the selection
+      markToolCancelConsumed()
+      exitMoveMode()
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+    emitter.on('tool:cancel', onCancel)
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      if (!wasCommitted) {
+        useScene.getState().updateNode(nodeId, {
+          position: originalPosition,
+          rotation: [0, originalRotationRef.current, 0],
+        })
+      }
+      useScene.temporal.getState().resume()
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      emitter.off('tool:cancel', onCancel)
+      window.removeEventListener('keydown', onKeyDown)
+    }
+  }, [exitMoveMode]) // stable — node values captured via refs at mount
+
+  return (
+    <group>
+      <CursorSphere position={cursorWorldPos} showTooltip={false} />
+    </group>
+  )
+}

package/src/components/tools/door/door-math.ts

@@ -70,7 +70,7 @@ export function hasWallChildOverlap(
   const newLeft = clampedX - halfW
   const newRight = clampedX + halfW
 
-  for (const childId of wallNode.children) {
+  for (const childId of Array.isArray(wallNode.children) ? wallNode.children : []) {
     if (childId === ignoreId) continue
     const child = nodes[childId as AnyNodeId]
     if (!child) continue

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

@@ -143,13 +143,25 @@ export const DoorTool: React.FC = () => {
       const { clampedX, clampedY } = clampToWall(event.node, localX, width, height)
 
       if (draftRef.current) {
-        useScene.getState().updateNode(draftRef.current.id, {
-          position: [clampedX, clampedY, 0],
-          rotation: [0, itemRotation, 0],
-          side,
-          parentId: event.node.id,
-          wallId: event.node.id,
-        })
+        if (event.node.id !== draftRef.current.parentId) {
+          // Wall changed without enter/leave: must updateNode to reparent
+          useScene.getState().updateNode(draftRef.current.id, {
+            position: [clampedX, clampedY, 0],
+            rotation: [0, itemRotation, 0],
+            side,
+            parentId: event.node.id,
+            wallId: event.node.id,
+          })
+        } else {
+          // Same wall: update Three.js mesh directly to avoid store churn
+          const draftMesh = sceneRegistry.nodes.get(draftRef.current.id as AnyNodeId)
+          if (draftMesh) {
+            draftMesh.position.set(clampedX, clampedY, 0)
+            draftMesh.rotation.set(0, itemRotation, 0)
+            draftMesh.updateMatrixWorld(true)
+          }
+          markWallDirty(event.node.id)
+        }
       }
 
       const valid = !hasWallChildOverlap(

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

@@ -165,17 +165,26 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
         movingDoorNode.height,
       )
 
-      useScene.getState().updateNode(movingDoorNode.id, {
-        position: [clampedX, clampedY, 0],
-        rotation: [0, itemRotation, 0],
-        side,
-        parentId: event.node.id,
-        wallId: event.node.id,
-      })
-
       if (currentWallId !== event.node.id) {
+        // Wall changed mid-move: must updateNode to reparent
+        useScene.getState().updateNode(movingDoorNode.id, {
+          position: [clampedX, clampedY, 0],
+          rotation: [0, itemRotation, 0],
+          side,
+          parentId: event.node.id,
+          wallId: event.node.id,
+        })
         markWallDirty(currentWallId)
         currentWallId = event.node.id
+      } else {
+        // Same wall: update Three.js mesh directly to avoid store churn
+        // collectCutoutBrushes reads cutoutMesh.matrixWorld, not scene store positions
+        const doorMesh = sceneRegistry.nodes.get(movingDoorNode.id as AnyNodeId)
+        if (doorMesh) {
+          doorMesh.position.set(clampedX, clampedY, 0)
+          doorMesh.rotation.set(0, itemRotation, 0)
+          doorMesh.updateMatrixWorld(true)
+        }
       }
       markWallDirty(event.node.id)