@pascal-app/editor 0.4.0 → 0.6.0

package/src/components/tools/item/placement-strategies.ts

@@ -47,12 +47,16 @@ export const floorStrategy = {
       ? getScaledDimensions(ctx.draftItem)
       : (ctx.asset.dimensions ?? DEFAULT_DIMENSIONS)
     const [dimX, , dimZ] = dims
-    const x = snapToGrid(event.position[0], dimX)
-    const z = snapToGrid(event.position[2], dimZ)
+    const rotY = ctx.draftItem?.rotation?.[1] ?? 0
+    const swapDims = Math.abs(Math.sin(rotY)) > 0.9
+    // event.localPosition is building-local; the coordinator cursor group is inside the
+    // building-local ToolManager group, so local coords are correct for both data and visuals.
+    const x = snapToGrid(event.localPosition[0], swapDims ? dimZ : dimX)
+    const z = snapToGrid(event.localPosition[2], swapDims ? dimX : dimZ)
 
     return {
       gridPosition: [x, 0, z],
-      cursorPosition: [x, event.position[1], z],
+      cursorPosition: [x, event.localPosition[1], z],
       cursorRotationY: 0,
       nodeUpdate: { position: [x, 0, z] },
       stopPropagation: false,
@@ -77,7 +81,7 @@ export const floorStrategy = {
       ctx.levelId,
       pos,
       getScaledDimensions(ctx.draftItem),
-      [0, 0, 0],
+      ctx.draftItem.rotation,
       [ctx.draftItem.id],
     ).valid
 
@@ -302,9 +306,11 @@ export const ceilingStrategy = {
       : (ctx.asset.dimensions ?? DEFAULT_DIMENSIONS)
     const [dimX, , dimZ] = dims
     const itemHeight = dims[1]
+    const rotY = ctx.draftItem?.rotation?.[1] ?? 0
+    const swapDims = Math.abs(Math.sin(rotY)) > 0.9
 
-    const x = snapToGrid(event.position[0], dimX)
-    const z = snapToGrid(event.position[2], dimZ)
+    const x = snapToGrid(event.position[0], swapDims ? dimZ : dimX)
+    const z = snapToGrid(event.position[2], swapDims ? dimX : dimZ)
 
     return {
       stateUpdate: { surface: 'ceiling', ceilingId: event.node.id },
@@ -329,9 +335,11 @@ export const ceilingStrategy = {
     const dims = getScaledDimensions(ctx.draftItem)
     const [dimX, , dimZ] = dims
     const itemHeight = dims[1]
+    const rotY = ctx.draftItem.rotation?.[1] ?? 0
+    const swapDims = Math.abs(Math.sin(rotY)) > 0.9
 
-    const x = snapToGrid(event.position[0], dimX)
-    const z = snapToGrid(event.position[2], dimZ)
+    const x = snapToGrid(event.position[0], swapDims ? dimZ : dimX)
+    const z = snapToGrid(event.position[2], swapDims ? dimX : dimZ)
 
     return {
       gridPosition: [x, -itemHeight, z],
@@ -550,7 +558,7 @@ export function checkCanPlace(ctx: PlacementContext, validators: SpatialValidato
     ctx.levelId,
     [ctx.gridPosition.x, 0, ctx.gridPosition.z],
     getScaledDimensions(ctx.draftItem),
-    [0, 0, 0],
+    ctx.draftItem.rotation,
     [ctx.draftItem.id],
   ).valid
 }

package/src/components/tools/item/use-placement-coordinator.tsx

@@ -33,6 +33,7 @@ import { distance, smoothstep, uv, vec2 } from 'three/tsl'
 import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import { snapToGrid } from './placement-math'
 import {
   ceilingStrategy,
   checkCanPlace,
@@ -68,7 +69,7 @@ const radialOpacity = smoothstep(0, 0.7, dist).mul(0.6)
 basePlaneMaterial.opacityNode = radialOpacity
 
 export interface PlacementCoordinatorConfig {
-  asset: AssetInput
+  asset: AssetInput | null
   draftNode: DraftNodeHandle
   initDraft: (gridPosition: Vector3) => void
   onCommitted: () => boolean
@@ -83,6 +84,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
   const edgesRef = useRef<LineSegments>(null!)
   const basePlaneRef = useRef<Mesh>(null!)
   const gridPosition = useRef(new Vector3(0, 0, 0))
+  const lastRawPos = useRef(new Vector3(0, 0, 0))
   const placementState = useRef<PlacementState>(
     config.initialState ?? { surface: 'floor', wallId: null, ceilingId: null, surfaceItemId: null },
   )
@@ -96,6 +98,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
   const { asset, draftNode } = config
 
   useEffect(() => {
+    if (!asset) return
     useScene.temporal.getState().pause()
 
     const validators = { canPlaceOnFloor, canPlaceOnWall, canPlaceOnCeiling }
@@ -135,11 +138,21 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       return placeable
     }
 
+    // Tool visuals are rendered inside the building-local ToolManager group, so all cursor
+    // positions must be in building-local space. Wall/ceiling/item-surface strategies return
+    // world-space cursor positions (from their event.position); convert them here.
+    const worldToBuildingLocal = (x: number, y: number, z: number): Vector3 => {
+      const buildingId = useViewer.getState().selection.buildingId
+      const buildingMesh = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
+      return buildingMesh ? buildingMesh.worldToLocal(new Vector3(x, y, z)) : new Vector3(x, y, z)
+    }
+
     const applyTransition = (result: TransitionResult) => {
       Object.assign(placementState.current, result.stateUpdate)
       gridPosition.current.set(...result.gridPosition)
 
-      cursorGroupRef.current.position.set(...result.cursorPosition)
+      const c = worldToBuildingLocal(...result.cursorPosition)
+      cursorGroupRef.current.position.set(c.x, c.y, c.z)
       cursorGroupRef.current.rotation.y = result.cursorRotationY
 
       const draft = draftNode.current
@@ -152,7 +165,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
     const ensureDraft = (result: TransitionResult) => {
       gridPosition.current.set(...result.gridPosition)
-      cursorGroupRef.current.position.set(...result.cursorPosition)
+      const c = worldToBuildingLocal(...result.cursorPosition)
+      cursorGroupRef.current.position.set(c.x, c.y, c.z)
       cursorGroupRef.current.rotation.y = result.cursorRotationY
 
       draftNode.create(
@@ -181,7 +195,10 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     if (draftNode.current) {
       const mesh = sceneRegistry.nodes.get(draftNode.current.id)
       if (mesh) {
-        mesh.getWorldPosition(cursorGroupRef.current.position)
+        const worldPos = new Vector3()
+        mesh.getWorldPosition(worldPos)
+        const localPos = worldToBuildingLocal(worldPos.x, worldPos.y, worldPos.z)
+        cursorGroupRef.current.position.copy(localPos)
         // Extract world Y rotation (handles wall-parented items correctly)
         const q = new Quaternion()
         mesh.getWorldQuaternion(q)
@@ -199,6 +216,12 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     let previousGridPos: [number, number, number] | null = null
 
     const onGridMove = (event: GridEvent) => {
+      // Lazy draft creation: if no draft yet (e.g. level wasn't ready during init), create now
+      if (draftNode.current === null && asset.attachTo === undefined) {
+        configRef.current.initDraft(gridPosition.current)
+      }
+
+      lastRawPos.current.set(event.localPosition[0], event.localPosition[1], event.localPosition[2])
       const result = floorStrategy.move(getContext(), event)
       if (!result) return
 
@@ -334,7 +357,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       }
 
       gridPosition.current.set(...result.gridPosition)
-      cursorGroupRef.current.position.set(...result.cursorPosition)
+      const wc = worldToBuildingLocal(...result.cursorPosition)
+      cursorGroupRef.current.position.set(wc.x, wc.y, wc.z)
       cursorGroupRef.current.rotation.y = result.cursorRotationY
 
       const draft = draftNode.current
@@ -480,13 +504,15 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         return
       }
 
+      lastRawPos.current.set(event.position[0], event.position[1], event.position[2])
       const result = itemSurfaceStrategy.move(ctx, event)
       if (!result) return
 
       event.stopPropagation()
 
       gridPosition.current.set(...result.gridPosition)
-      cursorGroupRef.current.position.set(...result.cursorPosition)
+      const ic = worldToBuildingLocal(...result.cursorPosition)
+      cursorGroupRef.current.position.set(ic.x, ic.y, ic.z)
       cursorGroupRef.current.rotation.y = result.cursorRotationY
 
       const draft = draftNode.current
@@ -511,14 +537,15 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
       event.stopPropagation()
 
-      // Transition back to floor using event world position
-      const wx = Math.round(event.position[0] * 2) / 2
-      const wz = Math.round(event.position[2] * 2) / 2
+      // Transition back to floor using building-local position
+      const wx = Math.round(event.localPosition[0] * 2) / 2
+      const wz = Math.round(event.localPosition[2] * 2) / 2
       const floorPos: [number, number, number] = [wx, 0, wz]
 
       Object.assign(placementState.current, { surface: 'floor', surfaceItemId: null })
       gridPosition.current.set(wx, 0, wz)
-      cursorGroupRef.current.position.set(wx, event.position[1], wz)
+      cursorGroupRef.current.position.x = wx
+      cursorGroupRef.current.position.z = wz
 
       const draft = draftNode.current
       if (draft) {
@@ -587,6 +614,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         return
       }
 
+      lastRawPos.current.set(event.position[0], event.position[1], event.position[2])
       const result = ceilingStrategy.move(getContext(), event)
       if (!result) return
 
@@ -603,7 +631,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
       }
 
       gridPosition.current.set(...result.gridPosition)
-      cursorGroupRef.current.position.set(...result.cursorPosition)
+      const cc = worldToBuildingLocal(...result.cursorPosition)
+      cursorGroupRef.current.position.set(cc.x, cc.y, cc.z)
 
       revalidate()
 
@@ -683,12 +712,19 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         return
       }
 
+      // Don't intercept keys when focus is inside a text input
+      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+        return
+      }
+
       const draft = draftNode.current
       if (!draft) return
 
       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 ((event.key === 'r' || event.key === 'R') && !event.metaKey && !event.ctrlKey)
+        rotationDelta = ROTATION_STEP
+      else if ((event.key === 't' || event.key === 'T') && !event.metaKey && !event.ctrlKey)
+        rotationDelta = -ROTATION_STEP
 
       if (rotationDelta !== 0) {
         event.preventDefault()
@@ -702,11 +738,55 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
         const mesh = sceneRegistry.nodes.get(draft.id)
         if (mesh) mesh.rotation.y = newRotationY
 
-        // Update live transform rotation for 2D floorplan
+        // Re-snap position immediately with updated rotation (dimX/dimZ may swap at 90°)
+        const surface = placementState.current.surface
+        if (surface === 'floor' || surface === 'ceiling') {
+          const dims = getScaledDimensions(draft)
+          const [dimX, , dimZ] = dims
+          const swapDims = Math.abs(Math.sin(newRotationY)) > 0.9
+          const x = snapToGrid(lastRawPos.current.x, swapDims ? dimZ : dimX)
+          const z = snapToGrid(lastRawPos.current.z, swapDims ? dimX : dimZ)
+          gridPosition.current.set(x, gridPosition.current.y, z)
+          draft.position = [x, gridPosition.current.y, z]
+          cursorGroupRef.current.position.x = x
+          cursorGroupRef.current.position.z = z
+          if (mesh) {
+            mesh.position.x = x
+            mesh.position.z = z
+          }
+        } else if (surface === 'item-surface' && placementState.current.surfaceItemId) {
+          const surfaceMesh = sceneRegistry.nodes.get(placementState.current.surfaceItemId)
+          if (surfaceMesh) {
+            const localPos = surfaceMesh.worldToLocal(lastRawPos.current.clone())
+            const dims = getScaledDimensions(draft)
+            const [dimX, , dimZ] = dims
+            const swapDims = Math.abs(Math.sin(newRotationY)) > 0.9
+            const x = snapToGrid(localPos.x, swapDims ? dimZ : dimX)
+            const z = snapToGrid(localPos.z, swapDims ? dimX : dimZ)
+            const y = gridPosition.current.y
+            gridPosition.current.set(x, y, z)
+            draft.position = [x, y, z]
+            const worldSnapped = surfaceMesh.localToWorld(new Vector3(x, y, z))
+            const localSnapped = worldToBuildingLocal(
+              worldSnapped.x,
+              worldSnapped.y,
+              worldSnapped.z,
+            )
+            cursorGroupRef.current.position.set(localSnapped.x, localSnapped.y, localSnapped.z)
+            if (mesh) mesh.position.set(x, y, z)
+          }
+        }
+
+        // Update live transform for 2D floorplan with post-snap position
         const currentLive = useLiveTransforms.getState().get(draft.id)
         if (currentLive) {
           useLiveTransforms.getState().set(draft.id, {
             ...currentLive,
+            position: [
+              cursorGroupRef.current.position.x,
+              cursorGroupRef.current.position.y,
+              cursorGroupRef.current.position.z,
+            ] as [number, number, number],
             rotation: newRotationY,
           })
         }
@@ -752,6 +832,29 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     const edgesGeometry = new EdgesGeometry(boxGeometry)
     edgesRef.current.geometry = edgesGeometry
 
+    // ---- Undo protection ----
+    // Undo replaces the entire `nodes` object with a previous snapshot, which doesn't
+    // include the draft (created while temporal was paused). Re-insert it so the mesh
+    // doesn't disappear mid-placement.
+    // We defer via queueMicrotask to avoid nested setState during the undo callback.
+    // Temporal is already paused during placement, so createNode won't enter the undo stack.
+    let tearingDown = false
+    const unsubDraftWatch = useScene.subscribe((state) => {
+      if (tearingDown) return
+      const draft = draftNode.current
+      if (draft === null) return
+      if (draft.id in state.nodes) return
+
+      queueMicrotask(() => {
+        if (tearingDown) return
+        const draft = draftNode.current
+        if (draft === null) return
+        if (draft.id in useScene.getState().nodes) return
+        // Temporal is paused during placement, createNode won't be tracked
+        useScene.getState().createNode(draft, draft.parentId as AnyNodeId)
+      })
+    })
+
     // ---- Subscribe ----
 
     emitter.on('grid:move', onGridMove)
@@ -770,6 +873,8 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     emitter.on('ceiling:leave', onCeilingLeave)
 
     return () => {
+      tearingDown = true
+      unsubDraftWatch()
       // Clear live transform for any remaining draft
       if (draftNode.current) {
         useLiveTransforms.getState().clear(draftNode.current.id)
@@ -801,6 +906,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
   // Wall/ceiling items are managed by their own surface entry events (ensureDraft / reparent).
   const viewerLevelId = useViewer((s) => s.selection.levelId)
   useEffect(() => {
+    if (!asset) return
     const draft = draftNode.current
     if (!(draft && viewerLevelId) || asset.attachTo) return
     if (draft.parentId === viewerLevelId) return
@@ -809,6 +915,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
   }, [viewerLevelId, draftNode, asset])
 
   useFrame((_, delta) => {
+    if (!asset) return
     if (!draftNode.current) return
     const mesh = sceneRegistry.nodes.get(draftNode.current.id)
     if (!mesh) return
@@ -850,9 +957,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
   const initialDraft = draftNode.current
   const dims = initialDraft
     ? getScaledDimensions(initialDraft)
-    : (config.asset.dimensions ?? DEFAULT_DIMENSIONS)
+    : (config.asset?.dimensions ?? DEFAULT_DIMENSIONS)
   const initialBoxGeometry = new BoxGeometry(dims[0], dims[1], dims[2])
-  const wallSideZOffset = config.asset.attachTo === 'wall-side' ? -dims[2] / 2 : 0
+  const wallSideZOffset = config.asset?.attachTo === 'wall-side' ? -dims[2] / 2 : 0
   initialBoxGeometry.translate(0, dims[1] / 2, wallSideZOffset)
 
   // Base plane geometry (colored rectangle on the ground)

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

@@ -1,7 +1,9 @@
 import {
   type AnyNodeId,
   emitter,
+  type FenceNode,
   type GridEvent,
+  type LevelNode,
   type RoofNode,
   type RoofSegmentNode,
   type StairNode,
@@ -9,13 +11,16 @@ import {
   sceneRegistry,
   useLiveTransforms,
   useScene,
+  type WallNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
+import { snapFenceDraftPoint } from '../fence/fence-drafting'
 import { CursorSphere } from '../shared/cursor-sphere'
+import type { WallPlanPoint } from '../wall/wall-drafting'
 
 export const MoveRoofTool: React.FC<{
   node: RoofNode | RoofSegmentNode | StairNode | StairSegmentNode
@@ -29,9 +34,13 @@ export const MoveRoofTool: React.FC<{
   const [cursorWorldPos, setCursorWorldPos] = useState<[number, number, number]>(() => {
     const obj = sceneRegistry.nodes.get(movingNode.id)
     if (obj) {
-      const pos = new THREE.Vector3()
-      obj.getWorldPosition(pos)
-      return [pos.x, pos.y, pos.z]
+      const worldPos = obj.getWorldPosition(new THREE.Vector3())
+      // Cursor renders inside the building-local ToolManager group, so convert
+      // world → building-local to honor any building rotation.
+      const buildingId = useViewer.getState().selection.buildingId
+      const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
+      if (buildingObj) buildingObj.worldToLocal(worldPos)
+      return [worldPos.x, worldPos.y, worldPos.z]
     }
     // Fallback if not registered (e.g. newly created duplicate without mesh yet)
     if (
@@ -114,10 +123,55 @@ export const MoveRoofTool: React.FC<{
       }
     }
 
-    const computeLocal = (gridX: number, gridZ: number, y: number): [number, number] => {
-      let localX = gridX
-      let localZ = gridZ
+    const resolveLevelId = () => {
+      if (movingNode.type === 'roof' || movingNode.type === 'stair') {
+        return movingNode.parentId ?? null
+      }
 
+      if (
+        (movingNode.type === 'roof-segment' || movingNode.type === 'stair-segment') &&
+        movingNode.parentId
+      ) {
+        const parentNode = useScene.getState().nodes[movingNode.parentId as AnyNodeId]
+        return parentNode && 'parentId' in parentNode ? (parentNode.parentId ?? null) : null
+      }
+
+      return null
+    }
+
+    const levelId = resolveLevelId()
+    const levelNode =
+      levelId && useScene.getState().nodes[levelId as AnyNodeId]?.type === 'level'
+        ? (useScene.getState().nodes[levelId as AnyNodeId] as LevelNode)
+        : null
+    const levelChildren = levelNode?.children ?? []
+    const levelWalls = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((node): node is WallNode => node?.type === 'wall')
+    const levelFences = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((node): node is FenceNode => node?.type === 'fence')
+    const buildingId = useViewer.getState().selection.buildingId
+    const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
+
+    const localToWorldPoint = (localPoint: WallPlanPoint, y: number): [number, number, number] => {
+      if (buildingObj) {
+        const worldPoint = buildingObj.localToWorld(new THREE.Vector3(localPoint[0], y, localPoint[1]))
+        return [worldPoint.x, worldPoint.y, worldPoint.z]
+      }
+
+      return [localPoint[0], y, localPoint[1]]
+    }
+
+    const computeLocal = (
+      gridX: number,
+      gridZ: number,
+      y: number,
+      buildingLocalX: number,
+      buildingLocalZ: number,
+    ): [number, number] => {
+      // Segments have a transformed parent (stair/roof). Convert world → parent-local
+      // via Three.js hierarchy so the segment's stored position stays parent-relative.
       if (
         (movingNode.type === 'roof-segment' || movingNode.type === 'stair-segment') &&
         movingNode.parentId
@@ -128,37 +182,42 @@ export const MoveRoofTool: React.FC<{
           if (parentObj) {
             const worldVec = new THREE.Vector3(gridX, y, gridZ)
             parentObj.worldToLocal(worldVec)
-            localX = worldVec.x
-            localZ = worldVec.z
-          } else {
-            const dx = gridX - (parentNode.position[0] as number)
-            const dz = gridZ - (parentNode.position[2] as number)
-            const angle = -(parentNode.rotation as number)
-            localX = dx * Math.cos(angle) - dz * Math.sin(angle)
-            localZ = dx * Math.sin(angle) + dz * Math.cos(angle)
+            return [worldVec.x, worldVec.z]
           }
+          const dx = gridX - (parentNode.position[0] as number)
+          const dz = gridZ - (parentNode.position[2] as number)
+          const angle = -(parentNode.rotation as number)
+          return [
+            dx * Math.cos(angle) - dz * Math.sin(angle),
+            dx * Math.sin(angle) + dz * Math.cos(angle),
+          ]
         }
       }
 
-      return [localX, localZ]
+      // Stair/roof live directly in the level — their stored position is building-local.
+      // event.localPosition is already building-local, so using it handles building rotation.
+      return [buildingLocalX, buildingLocalZ]
     }
 
     const onGridMove = (event: GridEvent) => {
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
       const y = event.position[1]
 
-      if (
-        previousGridPosRef.current &&
-        (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])
-      ) {
+      const snappedLocal = snapFenceDraftPoint({
+        point: [event.localPosition[0], event.localPosition[2]],
+        walls: levelWalls,
+        fences: levelFences,
+      })
+      const [gridX, , gridZ] = localToWorldPoint(snappedLocal, y)
+
+      if (previousGridPosRef.current && (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])) {
         sfxEmitter.emit('sfx:grid-snap')
       }
 
       previousGridPosRef.current = [gridX, gridZ]
-      setCursorWorldPos([gridX, y, gridZ])
+      const [lx, lz] = snappedLocal
+      setCursorWorldPos([lx, event.localPosition[1], lz])
 
-      const [localX, localZ] = computeLocal(gridX, gridZ, y)
+      const [localX, localZ] = computeLocal(gridX, gridZ, y, lx, lz)
 
       // Directly update the Three.js mesh — no store update during drag
       const mesh = sceneRegistry.nodes.get(movingNode.id)
@@ -175,11 +234,16 @@ export const MoveRoofTool: React.FC<{
     }
 
     const onGridClick = (event: GridEvent) => {
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
       const y = event.position[1]
+      const snappedLocal = snapFenceDraftPoint({
+        point: [event.localPosition[0], event.localPosition[2]],
+        walls: levelWalls,
+        fences: levelFences,
+      })
+      const [gridX, , gridZ] = localToWorldPoint(snappedLocal, y)
+      const [lx, lz] = snappedLocal
 
-      const [localX, localZ] = computeLocal(gridX, gridZ, y)
+      const [localX, localZ] = computeLocal(gridX, gridZ, y, lx, lz)
 
       wasCommitted = true
 

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

@@ -173,9 +173,9 @@ export const RoofTool: React.FC = () => {
     const onGridMove = (event: GridEvent) => {
       if (!cursorRef.current) return
 
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
-      const y = event.position[1]
+      const gridX = Math.round(event.localPosition[0] * 2) / 2
+      const gridZ = Math.round(event.localPosition[2] * 2) / 2
+      const y = event.localPosition[1]
 
       const cursorPosition: [number, number, number] = [gridX, y, gridZ]
       const gridY = y + GRID_OFFSET
@@ -206,9 +206,9 @@ export const RoofTool: React.FC = () => {
     const onGridClick = (event: GridEvent) => {
       if (!currentLevelId) return
 
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
-      const y = event.position[1]
+      const gridX = Math.round(event.localPosition[0] * 2) / 2
+      const gridZ = Math.round(event.localPosition[2] * 2) / 2
+      const y = event.localPosition[1]
 
       if (corner1Ref.current) {
         const roofId = commitRoofPlacement(

package/src/components/tools/select/box-select-tool.tsx

@@ -197,7 +197,7 @@ function collectNodeIdsInBounds(bounds: Bounds): string[] {
       const node = nodes[childId as AnyNodeId]
       if (!node) continue
 
-      if (node.type === 'wall') {
+      if (node.type === 'wall' || node.type === 'fence') {
         const wall = node as WallNode
         if (
           segmentIntersectsBounds(wall.start[0], wall.start[1], wall.end[0], wall.end[1], bounds)
@@ -205,7 +205,7 @@ function collectNodeIdsInBounds(bounds: Bounds): string[] {
           result.push(wall.id)
         }
         // Check wall children (doors/windows)
-        for (const itemId of wall.children) {
+        for (const itemId of Array.isArray(wall.children) ? wall.children : []) {
           const child = nodes[itemId as AnyNodeId]
           if (!child) continue
           if (