@pascal-app/editor 0.4.0 → 0.6.0

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

@@ -1,16 +1,19 @@
 import { emitter, type GridEvent, sceneRegistry } from '@pascal-app/core'
 import { createPortal } from '@react-three/fiber'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { BufferGeometry, Float32BufferAttribute, type Line } from 'three'
+import { BufferGeometry, Float32BufferAttribute, type Line, type Object3D } from 'three'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import { snapToHalf } from '../item/placement-math'
 
 const Y_OFFSET = 0.02
 
 type DragState = {
   isDragging: boolean
-  vertexIndex: number
+  mode: 'vertex' | 'polygon'
+  vertexIndex: number | null
   initialPosition: [number, number]
+  initialPolygon: Array<[number, number]>
   pointerId: number
 }
 
@@ -23,6 +26,8 @@ export interface PolygonEditorProps {
   levelId?: string
   /** Height of the surface being edited (e.g. slab elevation). Handles adapt to this. */
   surfaceHeight?: number
+  /** Whether to show the center handle that moves the entire polygon. */
+  allowPolygonMove?: boolean
 }
 
 /**
@@ -38,9 +43,42 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   minVertices = 3,
   levelId,
   surfaceHeight = 0,
+  allowPolygonMove = false,
 }) => {
-  // Get level node from registry if levelId is provided
-  const levelNode = levelId ? sceneRegistry.nodes.get(levelId) : null
+  const [levelNode, setLevelNode] = useState<Object3D | null>(() =>
+    levelId ? (sceneRegistry.nodes.get(levelId) ?? null) : null,
+  )
+
+  useEffect(() => {
+    if (!levelId) {
+      setLevelNode(null)
+      return
+    }
+
+    let frameId = 0
+
+    const resolveLevelNode = () => {
+      const nextLevelNode = sceneRegistry.nodes.get(levelId) ?? null
+      setLevelNode((currentLevelNode) => {
+        if (currentLevelNode === nextLevelNode) {
+          return currentLevelNode
+        }
+        return nextLevelNode
+      })
+
+      if (!nextLevelNode) {
+        frameId = window.requestAnimationFrame(resolveLevelNode)
+      }
+    }
+
+    resolveLevelNode()
+
+    return () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId)
+      }
+    }
+  }, [levelId])
 
   // When using portal, edit at Y_OFFSET (local to level)
   // When not using portal, edit at world origin
@@ -75,6 +113,17 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   // The polygon to display (preview during drag, or actual polygon)
   const displayPolygon = previewPolygon ?? polygon
 
+  const polygonCenter = useMemo(() => {
+    if (displayPolygon.length === 0) return [0, 0] as [number, number]
+    let sumX = 0
+    let sumZ = 0
+    for (const [x, z] of displayPolygon) {
+      sumX += x
+      sumZ += z
+    }
+    return [sumX / displayPolygon.length, sumZ / displayPolygon.length] as [number, number]
+  }, [displayPolygon])
+
   // Calculate midpoints for adding new vertices
   const midpoints = useMemo(() => {
     if (displayPolygon.length < 2) return []
@@ -139,8 +188,8 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   // Listen to grid:move events to track cursor position
   useEffect(() => {
     const onGridMove = (event: GridEvent) => {
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
+      const gridX = snapToHalf(event.localPosition[0])
+      const gridZ = snapToHalf(event.localPosition[2])
       const newPosition: [number, number] = [gridX, gridZ]
 
       // Play snap sound when cursor moves to a new grid cell during drag
@@ -158,7 +207,15 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
       // Update vertex position during drag
       if (dragState?.isDragging) {
-        handleVertexDrag(dragState.vertexIndex, newPosition)
+        if (dragState.mode === 'vertex' && dragState.vertexIndex !== null) {
+          handleVertexDrag(dragState.vertexIndex, newPosition)
+        } else if (dragState.mode === 'polygon') {
+          const deltaX = newPosition[0] - dragState.initialPosition[0]
+          const deltaZ = newPosition[1] - dragState.initialPosition[1]
+          setPreviewPolygon(
+            dragState.initialPolygon.map(([x, z]) => [x + deltaX, z + deltaZ] as [number, number]),
+          )
+        }
       }
     }
 
@@ -257,7 +314,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
       {/* Vertex handles - blue cylinders that match surface height */}
       {displayPolygon.map(([x, z], index) => {
         const isHovered = hoveredVertex === index
-        const isDragging = dragState?.vertexIndex === index
+        const isDragging = dragState?.mode === 'vertex' && dragState.vertexIndex === index
         const radius = 0.1
         const height = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02)
 
@@ -282,8 +339,10 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
               e.stopPropagation()
               setDragState({
                 isDragging: true,
+                mode: 'vertex',
                 vertexIndex: index,
                 initialPosition: [x!, z!],
+                initialPolygon: displayPolygon.map(([px, pz]) => [px, pz] as [number, number]),
                 pointerId: e.pointerId,
               })
             }}
@@ -305,6 +364,37 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
         )
       })}
 
+      {allowPolygonMove && (
+        <mesh
+          castShadow
+          layers={EDITOR_LAYER}
+          onClick={(e) => {
+            if (e.button !== 0) return
+            e.stopPropagation()
+          }}
+          onPointerDown={(e) => {
+            if (e.button !== 0) return
+            e.stopPropagation()
+            setDragState({
+              isDragging: true,
+              mode: 'polygon',
+              vertexIndex: null,
+              initialPosition: polygonCenter,
+              initialPolygon: displayPolygon.map(([px, pz]) => [px, pz] as [number, number]),
+              pointerId: e.pointerId,
+            })
+          }}
+          position={[
+            polygonCenter[0],
+            editY + Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02) + 0.08,
+            polygonCenter[1],
+          ]}
+        >
+          <sphereGeometry args={[0.09, 20, 20]} />
+          <meshStandardMaterial color={dragState?.mode === 'polygon' ? '#22c55e' : '#f59e0b'} />
+        </mesh>
+      )}
+
       {/* Midpoint handles - smaller green cylinders for adding vertices (hidden while dragging) */}
       {!dragState &&
         midpoints.map(([x, z], index) => {

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

@@ -0,0 +1,182 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  emitter,
+  type FenceNode,
+  type GridEvent,
+  type LevelNode,
+  type SlabNode,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+import { snapFenceDraftPoint } from '../fence/fence-drafting'
+import { CursorSphere } from '../shared/cursor-sphere'
+
+function translatePolygon(
+  polygon: Array<[number, number]>,
+  deltaX: number,
+  deltaZ: number,
+): Array<[number, number]> {
+  return polygon.map(([x, z]) => [x + deltaX, z + deltaZ] as [number, number])
+}
+
+function getPolygonCenter(polygon: Array<[number, number]>): [number, number] {
+  if (polygon.length === 0) return [0, 0]
+  let sumX = 0
+  let sumZ = 0
+  for (const [x, z] of polygon) {
+    sumX += x
+    sumZ += z
+  }
+  return [sumX / polygon.length, sumZ / polygon.length]
+}
+
+export const MoveSlabTool: React.FC<{ node: SlabNode }> = ({ node }) => {
+  const activatedAtRef = useRef<number>(Date.now())
+  const originalPolygonRef = useRef(node.polygon.map(([x, z]) => [x, z] as [number, number]))
+  const originalHolesRef = useRef(
+    (node.holes ?? []).map((hole) => hole.map(([x, z]) => [x, z] as [number, number])),
+  )
+  const dragAnchorRef = useRef<[number, number] | null>(null)
+  const previousGridPosRef = useRef<[number, number] | null>(null)
+  const previewRef = useRef<{
+    polygon: Array<[number, number]>
+    holes: Array<Array<[number, number]>>
+  } | null>(null)
+
+  const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
+    const center = getPolygonCenter(node.polygon)
+    return [center[0], 0, center[1]]
+  })
+
+  const exitMoveMode = useCallback(() => {
+    useEditor.getState().setMovingNode(null)
+  }, [])
+
+  useEffect(() => {
+    const originalPolygon = originalPolygonRef.current
+    const originalHoles = originalHolesRef.current
+    const levelNode =
+      node.parentId && useScene.getState().nodes[node.parentId as AnyNodeId]?.type === 'level'
+        ? (useScene.getState().nodes[node.parentId as AnyNodeId] as LevelNode)
+        : null
+    const levelChildren = levelNode?.children ?? []
+    const levelWalls = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((child): child is WallNode => child?.type === 'wall')
+    const levelFences = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((child): child is FenceNode => child?.type === 'fence')
+
+    useScene.temporal.getState().pause()
+    let wasCommitted = false
+
+    const applyPreview = (
+      polygon: Array<[number, number]>,
+      holes: Array<Array<[number, number]>>,
+    ) => {
+      previewRef.current = { polygon, holes }
+      const center = getPolygonCenter(polygon)
+      setCursorLocalPos([center[0], 0, center[1]])
+      useScene.getState().updateNode(node.id, { polygon, holes })
+      useScene.getState().markDirty(node.id as AnyNodeId)
+    }
+
+    const restoreOriginal = () => {
+      useScene.getState().updateNode(node.id, {
+        holes: originalHoles,
+        polygon: originalPolygon,
+      })
+      useScene.getState().markDirty(node.id as AnyNodeId)
+    }
+
+    const onGridMove = (event: GridEvent) => {
+      const [localX, localZ] = snapFenceDraftPoint({
+        point: [event.localPosition[0], event.localPosition[2]],
+        walls: levelWalls,
+        fences: levelFences,
+      })
+
+      if (
+        previousGridPosRef.current &&
+        (localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
+      ) {
+        sfxEmitter.emit('sfx:grid-snap')
+      }
+      previousGridPosRef.current = [localX, localZ]
+
+      const anchor = dragAnchorRef.current ?? [localX, localZ]
+      dragAnchorRef.current = anchor
+
+      const deltaX = localX - anchor[0]
+      const deltaZ = localZ - anchor[1]
+
+      applyPreview(
+        translatePolygon(originalPolygon, deltaX, deltaZ),
+        originalHoles.map((hole) => translatePolygon(hole, deltaX, deltaZ)),
+      )
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      if (Date.now() - activatedAtRef.current < 150) {
+        event.nativeEvent?.stopPropagation?.()
+        return
+      }
+
+      const preview = previewRef.current ?? { polygon: originalPolygon, holes: originalHoles }
+
+      wasCommitted = true
+
+      // Restore original baseline while paused so the next resume+update
+      // registers as a single tracked change (undo reverts to original).
+      useScene.getState().updateNode(node.id, {
+        polygon: originalPolygon,
+        holes: originalHoles,
+      })
+
+      useScene.temporal.getState().resume()
+      useScene.getState().updateNode(node.id, preview)
+      useScene.getState().markDirty(node.id as AnyNodeId)
+      useScene.temporal.getState().pause()
+
+      sfxEmitter.emit('sfx:item-place')
+      useViewer.getState().setSelection({ selectedIds: [node.id] })
+      exitMoveMode()
+      event.nativeEvent?.stopPropagation?.()
+    }
+
+    const onCancel = () => {
+      restoreOriginal()
+      useViewer.getState().setSelection({ selectedIds: [node.id] })
+      useScene.temporal.getState().resume()
+      markToolCancelConsumed()
+      exitMoveMode()
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+    emitter.on('tool:cancel', onCancel)
+
+    return () => {
+      if (!wasCommitted) {
+        restoreOriginal()
+      }
+      useScene.temporal.getState().resume()
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      emitter.off('tool:cancel', onCancel)
+    }
+  }, [exitMoveMode, node.id])
+
+  return (
+    <group>
+      <CursorSphere position={cursorLocalPos} showTooltip={false} />
+    </group>
+  )
+}

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

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

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

@@ -86,12 +86,12 @@ export const SlabTool: 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 gridX = Math.round(event.localPosition[0] * 2) / 2
+      const gridZ = Math.round(event.localPosition[2] * 2) / 2
       const gridPosition: [number, number] = [gridX, gridZ]
 
       setCursorPosition(gridPosition)
-      setLevelY(event.position[1])
+      setLevelY(event.localPosition[1])
 
       // Calculate snapped display position (bypass snap when Shift is held)
       const lastPoint = points[points.length - 1]
@@ -112,7 +112,7 @@ export const SlabTool: React.FC = () => {
       }
 
       previousSnappedPointRef.current = displayPoint
-      cursorRef.current.position.set(displayPoint[0], event.position[1], displayPoint[1])
+      cursorRef.current.position.set(displayPoint[0], event.localPosition[1], displayPoint[1])
     }
 
     const onGridClick = (_event: GridEvent) => {

package/src/components/tools/stair/stair-defaults.ts

@@ -1,3 +1,4 @@
+export const DEFAULT_STAIR_TYPE = 'straight' as const
 export const DEFAULT_STAIR_WIDTH = 1.0
 export const DEFAULT_STAIR_LENGTH = 3.0
 export const DEFAULT_STAIR_HEIGHT = 2.5
@@ -5,3 +6,12 @@ export const DEFAULT_STAIR_STEP_COUNT = 10
 export const DEFAULT_STAIR_ATTACHMENT_SIDE = 'front' as const
 export const DEFAULT_STAIR_FILL_TO_FLOOR = true
 export const DEFAULT_STAIR_THICKNESS = 0.25
+export const DEFAULT_CURVED_STAIR_INNER_RADIUS = 0.9
+export const DEFAULT_CURVED_STAIR_SWEEP_ANGLE = Math.PI / 2
+export const DEFAULT_SPIRAL_STAIR_SWEEP_ANGLE = (400 * Math.PI) / 180
+export const DEFAULT_SPIRAL_TOP_LANDING_MODE = 'none' as const
+export const DEFAULT_SPIRAL_TOP_LANDING_DEPTH = 0.9
+export const DEFAULT_SPIRAL_SHOW_CENTER_COLUMN = true
+export const DEFAULT_SPIRAL_SHOW_STEP_SUPPORTS = true
+export const DEFAULT_STAIR_RAILING_MODE = 'right' as const
+export const DEFAULT_STAIR_RAILING_HEIGHT = 0.92

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

@@ -13,12 +13,21 @@ import * as THREE from 'three'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { CursorSphere } from '../shared/cursor-sphere'
 import {
+  DEFAULT_CURVED_STAIR_INNER_RADIUS,
+  DEFAULT_CURVED_STAIR_SWEEP_ANGLE,
+  DEFAULT_SPIRAL_SHOW_CENTER_COLUMN,
+  DEFAULT_SPIRAL_SHOW_STEP_SUPPORTS,
+  DEFAULT_SPIRAL_TOP_LANDING_DEPTH,
+  DEFAULT_SPIRAL_TOP_LANDING_MODE,
   DEFAULT_STAIR_ATTACHMENT_SIDE,
   DEFAULT_STAIR_FILL_TO_FLOOR,
   DEFAULT_STAIR_HEIGHT,
   DEFAULT_STAIR_LENGTH,
+  DEFAULT_STAIR_RAILING_HEIGHT,
+  DEFAULT_STAIR_RAILING_MODE,
   DEFAULT_STAIR_STEP_COUNT,
   DEFAULT_STAIR_THICKNESS,
+  DEFAULT_STAIR_TYPE,
   DEFAULT_STAIR_WIDTH,
 } from './stair-defaults'
 
@@ -84,10 +93,34 @@ function commitStairPlacement(
     position: [0, 0, 0],
   })
 
+  const sortedLevels = Object.values(nodes)
+    .filter((node): node is LevelNode => node.type === 'level')
+    .sort((left, right) => left.level - right.level)
+  const currentLevelIndex = sortedLevels.findIndex((level) => level.id === levelId)
+  const nextLevelId = sortedLevels[currentLevelIndex + 1]?.id ?? levelId
+
   const stair = StairNode.parse({
     name,
     position,
     rotation,
+    stairType: DEFAULT_STAIR_TYPE,
+    fromLevelId: levelId,
+    toLevelId: nextLevelId,
+    slabOpeningMode: 'destination',
+    openingOffset: 0.08,
+    width: DEFAULT_STAIR_WIDTH,
+    totalRise: DEFAULT_STAIR_HEIGHT,
+    stepCount: DEFAULT_STAIR_STEP_COUNT,
+    thickness: DEFAULT_STAIR_THICKNESS,
+    fillToFloor: DEFAULT_STAIR_FILL_TO_FLOOR,
+    innerRadius: DEFAULT_CURVED_STAIR_INNER_RADIUS,
+    sweepAngle: DEFAULT_CURVED_STAIR_SWEEP_ANGLE,
+    topLandingMode: DEFAULT_SPIRAL_TOP_LANDING_MODE,
+    topLandingDepth: DEFAULT_SPIRAL_TOP_LANDING_DEPTH,
+    showCenterColumn: DEFAULT_SPIRAL_SHOW_CENTER_COLUMN,
+    showStepSupports: DEFAULT_SPIRAL_SHOW_STEP_SUPPORTS,
+    railingHeight: DEFAULT_STAIR_RAILING_HEIGHT,
+    railingMode: DEFAULT_STAIR_RAILING_MODE,
     children: [segment.id],
   })
 
@@ -116,9 +149,9 @@ export const StairTool: React.FC = () => {
     if (previewRef.current) previewRef.current.rotation.y = 0
 
     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]
+      const gridX = Math.round(event.localPosition[0] * 2) / 2
+      const gridZ = Math.round(event.localPosition[2] * 2) / 2
+      const y = event.localPosition[1]
 
       if (cursorRef.current) {
         cursorRef.current.position.set(gridX, y + GRID_OFFSET, gridZ)
@@ -141,11 +174,9 @@ export const StairTool: 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]
-
-      commitStairPlacement(currentLevelId, [gridX, y, gridZ], rotationRef.current)
+      const gridX = Math.round(event.localPosition[0] * 2) / 2
+      const gridZ = Math.round(event.localPosition[2] * 2) / 2
+      commitStairPlacement(currentLevelId, [gridX, 0, gridZ], rotationRef.current)
     }
 
     const onKeyDown = (event: KeyboardEvent) => {

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

@@ -1,10 +1,19 @@
-import { type AnyNodeId, type CeilingNode, type SlabNode, useScene } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  type BuildingNode,
+  type CeilingNode,
+  type SlabNode,
+  useScene,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import useEditor, { type Phase, type Tool } from '../../store/use-editor'
 import { CeilingBoundaryEditor } from './ceiling/ceiling-boundary-editor'
 import { CeilingHoleEditor } from './ceiling/ceiling-hole-editor'
 import { CeilingTool } from './ceiling/ceiling-tool'
 import { DoorTool } from './door/door-tool'
+import { CurveFenceTool } from './fence/curve-fence-tool'
+import { FenceTool } from './fence/fence-tool'
+import { MoveFenceEndpointTool } from './fence/move-fence-endpoint-tool'
 import { ItemTool } from './item/item-tool'
 import { MoveTool } from './item/move-tool'
 import { RoofTool } from './roof/roof-tool'
@@ -13,6 +22,8 @@ import { SlabBoundaryEditor } from './slab/slab-boundary-editor'
 import { SlabHoleEditor } from './slab/slab-hole-editor'
 import { SlabTool } from './slab/slab-tool'
 import { StairTool } from './stair/stair-tool'
+import { CurveWallTool } from './wall/curve-wall-tool'
+import { MoveWallEndpointTool } from './wall/move-wall-endpoint-tool'
 import { WallTool } from './wall/wall-tool'
 import { WindowTool } from './window/window-tool'
 import { ZoneBoundaryEditor } from './zone/zone-boundary-editor'
@@ -24,6 +35,7 @@ const tools: Record<Phase, Partial<Record<Tool, React.FC>>> = {
   },
   structure: {
     wall: WallTool,
+    fence: FenceTool,
     slab: SlabTool,
     ceiling: CeilingTool,
     roof: RoofTool,
@@ -43,11 +55,24 @@ export const ToolManager: React.FC = () => {
   const mode = useEditor((state) => state.mode)
   const tool = useEditor((state) => state.tool)
   const movingNode = useEditor((state) => state.movingNode)
+  const movingWallEndpoint = useEditor((state) => state.movingWallEndpoint)
+  const movingFenceEndpoint = useEditor((state) => state.movingFenceEndpoint)
+  const curvingWall = useEditor((state) => state.curvingWall)
+  const curvingFence = useEditor((state) => state.curvingFence)
   const editingHole = useEditor((state) => state.editingHole)
   const selectedZoneId = useViewer((state) => state.selection.zoneId)
+  const buildingId = useViewer((state) => state.selection.buildingId)
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const nodes = useScene((state) => state.nodes)
 
+  // Building transform for the local group — all building-relative tools live inside this group
+  // so their cursor positions and committed data are naturally in building-local space.
+  const building = buildingId
+    ? (nodes[buildingId as AnyNodeId] as BuildingNode | undefined)
+    : undefined
+  const buildingPosition = building?.position ?? [0, 0, 0]
+  const buildingRotation = building?.rotation ?? [0, 0, 0]
+
   // Check if a slab is selected
   const selectedSlabId = selectedIds.find((id) => nodes[id as AnyNodeId]?.type === 'slab') as
     | SlabNode['id']
@@ -102,19 +127,34 @@ export const ToolManager: React.FC = () => {
   return (
     <>
       {showSiteBoundaryEditor && <SiteBoundaryEditor />}
-      {showZoneBoundaryEditor && selectedZoneId && <ZoneBoundaryEditor zoneId={selectedZoneId} />}
-      {showSlabBoundaryEditor && selectedSlabId && <SlabBoundaryEditor slabId={selectedSlabId} />}
-      {showSlabHoleEditor && selectedSlabId && editingHole && (
-        <SlabHoleEditor holeIndex={editingHole.holeIndex} slabId={selectedSlabId} />
-      )}
-      {showCeilingBoundaryEditor && selectedCeilingId && (
-        <CeilingBoundaryEditor ceilingId={selectedCeilingId} />
-      )}
-      {showCeilingHoleEditor && selectedCeilingId && editingHole && (
-        <CeilingHoleEditor ceilingId={selectedCeilingId} holeIndex={editingHole.holeIndex} />
-      )}
-      {movingNode && <MoveTool />}
-      {!movingNode && BuildToolComponent && <BuildToolComponent />}
+      {/* World-space tools: site boundary and building movement operate in world coordinates */}
+      {movingNode?.type === 'building' && <MoveTool />}
+
+      {/* Building-local group: all other tools are relative to the selected building.
+          Cursor visuals set positions in building-local space; this group applies the
+          building's world transform so they render at the correct world position. */}
+      <group
+        position={buildingPosition as [number, number, number]}
+        rotation={buildingRotation as [number, number, number]}
+      >
+        {showZoneBoundaryEditor && selectedZoneId && <ZoneBoundaryEditor zoneId={selectedZoneId} />}
+        {showSlabBoundaryEditor && selectedSlabId && <SlabBoundaryEditor slabId={selectedSlabId} />}
+        {showSlabHoleEditor && selectedSlabId && editingHole && (
+          <SlabHoleEditor holeIndex={editingHole.holeIndex} slabId={selectedSlabId} />
+        )}
+        {showCeilingBoundaryEditor && selectedCeilingId && (
+          <CeilingBoundaryEditor ceilingId={selectedCeilingId} />
+        )}
+        {showCeilingHoleEditor && selectedCeilingId && editingHole && (
+          <CeilingHoleEditor ceilingId={selectedCeilingId} holeIndex={editingHole.holeIndex} />
+        )}
+        {movingWallEndpoint && <MoveWallEndpointTool target={movingWallEndpoint} />}
+        {movingFenceEndpoint && <MoveFenceEndpointTool target={movingFenceEndpoint} />}
+        {curvingWall && <CurveWallTool node={curvingWall} />}
+        {curvingFence && <CurveFenceTool node={curvingFence} />}
+        {movingNode && movingNode.type !== 'building' && <MoveTool />}
+        {!movingNode && BuildToolComponent && <BuildToolComponent />}
+      </group>
     </>
   )
 }