diff --git a/packages/core/src/hooks/spatial-grid/spatial-grid-manager.ts b/packages/core/src/hooks/spatial-grid/spatial-grid-manager.ts
index b9ba288b7..4b8ea127d 100644
--- a/packages/core/src/hooks/spatial-grid/spatial-grid-manager.ts
+++ b/packages/core/src/hooks/spatial-grid/spatial-grid-manager.ts
@@ -1,5 +1,6 @@
 import type { AnyNode, CeilingNode, ItemNode, SlabNode, WallNode } from '../../schema'
 import { getScaledDimensions } from '../../schema'
+import useScene from '../../store/use-scene'
 import { SpatialGrid } from './spatial-grid'
 import { WallSpatialGrid } from './wall-spatial-grid'
 
@@ -51,6 +52,121 @@ function getItemFootprint(
   ]
 }
 
+type ItemLocalBounds = {
+  min: [number, number, number]
+  max: [number, number, number]
+}
+
+type ItemParentAabb = {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+  minZ: number
+  maxZ: number
+}
+
+function getFallbackItemLocalBounds(item: ItemNode): ItemLocalBounds {
+  const [width, height, depth] = getScaledDimensions(item)
+  const minZ = item.asset.attachTo === 'wall-side' ? -depth : -depth / 2
+  const maxZ = item.asset.attachTo === 'wall-side' ? 0 : depth / 2
+  return {
+    min: [-width / 2, 0, minZ],
+    max: [width / 2, height, maxZ],
+  }
+}
+
+function getItemLocalBounds(item: ItemNode): ItemLocalBounds {
+  const metadata =
+    typeof item.metadata === 'object' && item.metadata !== null && !Array.isArray(item.metadata)
+      ? (item.metadata as Record<string, unknown>)
+      : null
+  const rawBounds =
+    typeof metadata?.meshLocalBounds === 'object' &&
+    metadata.meshLocalBounds !== null &&
+    !Array.isArray(metadata.meshLocalBounds)
+      ? (metadata.meshLocalBounds as Record<string, unknown>)
+      : null
+  const min = rawBounds?.min
+  const max = rawBounds?.max
+
+  if (
+    Array.isArray(min) &&
+    min.length >= 3 &&
+    Array.isArray(max) &&
+    max.length >= 3 &&
+    typeof min[0] === 'number' &&
+    typeof min[1] === 'number' &&
+    typeof min[2] === 'number' &&
+    typeof max[0] === 'number' &&
+    typeof max[1] === 'number' &&
+    typeof max[2] === 'number'
+  ) {
+    return {
+      min: [min[0], min[1], min[2]],
+      max: [max[0], max[1], max[2]],
+    }
+  }
+
+  return getFallbackItemLocalBounds(item)
+}
+
+function getItemParentAabb(item: ItemNode): ItemParentAabb {
+  const bounds = getItemLocalBounds(item)
+  const corners: Array<[number, number, number]> = [
+    [bounds.min[0], bounds.min[1], bounds.min[2]],
+    [bounds.min[0], bounds.min[1], bounds.max[2]],
+    [bounds.min[0], bounds.max[1], bounds.min[2]],
+    [bounds.min[0], bounds.max[1], bounds.max[2]],
+    [bounds.max[0], bounds.min[1], bounds.min[2]],
+    [bounds.max[0], bounds.min[1], bounds.max[2]],
+    [bounds.max[0], bounds.max[1], bounds.min[2]],
+    [bounds.max[0], bounds.max[1], bounds.max[2]],
+  ]
+  const yRot = item.rotation[1] ?? 0
+  const cos = Math.cos(yRot)
+  const sin = Math.sin(yRot)
+
+  let minX = Number.POSITIVE_INFINITY
+  let minY = Number.POSITIVE_INFINITY
+  let minZ = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let maxY = Number.NEGATIVE_INFINITY
+  let maxZ = Number.NEGATIVE_INFINITY
+
+  for (const [cx, cy, cz] of corners) {
+    const rotatedX = cx * cos + cz * sin
+    const rotatedZ = -cx * sin + cz * cos
+    const worldX = rotatedX + item.position[0]
+    const worldY = cy + item.position[1]
+    const worldZ = rotatedZ + item.position[2]
+    minX = Math.min(minX, worldX)
+    minY = Math.min(minY, worldY)
+    minZ = Math.min(minZ, worldZ)
+    maxX = Math.max(maxX, worldX)
+    maxY = Math.max(maxY, worldY)
+    maxZ = Math.max(maxZ, worldZ)
+  }
+
+  return { minX, maxX, minY, maxY, minZ, maxZ }
+}
+
+function intervalsOverlap(minA: number, maxA: number, minB: number, maxB: number, epsilon = 1e-4) {
+  return minA < maxB - epsilon && maxA > minB + epsilon
+}
+
+function resolveNodeLevelId(node: AnyNode, nodes: Record<string, AnyNode>): string {
+  if (node.type === 'level') return node.id
+
+  let current: AnyNode | undefined = node
+  while (current) {
+    if (current.type === 'level') return current.id
+    current = current.parentId ? nodes[current.parentId] : undefined
+  }
+
+  return 'default'
+}
+
 /**
  * Test if two line segments (a1->a2) and (b1->b2) intersect.
  */
@@ -481,8 +597,39 @@ export class SpatialGridManager {
     rotation: [number, number, number],
     ignoreIds?: string[],
   ) {
-    const grid = this.getFloorGrid(levelId)
-    return grid.canPlace(position, dimensions, rotation, ignoreIds)
+    const nodes = useScene.getState().nodes
+    const ignoreSet = new Set(ignoreIds ?? [])
+    const [width, , depth] = dimensions
+    const yRot = rotation[1]
+    const cos = Math.abs(Math.cos(yRot))
+    const sin = Math.abs(Math.sin(yRot))
+    const rotatedW = width * cos + depth * sin
+    const rotatedD = width * sin + depth * cos
+    const draftBounds = {
+      minX: position[0] - rotatedW / 2,
+      maxX: position[0] + rotatedW / 2,
+      minZ: position[2] - rotatedD / 2,
+      maxZ: position[2] + rotatedD / 2,
+    }
+
+    const conflicts: string[] = []
+    for (const node of Object.values(nodes)) {
+      if (node.type !== 'item') continue
+      const item = node as ItemNode
+      if (item.asset.attachTo) continue
+      if (ignoreSet.has(item.id)) continue
+      if (resolveNodeLevelId(item, nodes) !== levelId) continue
+
+      const bounds = getItemParentAabb(item)
+      if (
+        intervalsOverlap(draftBounds.minX, draftBounds.maxX, bounds.minX, bounds.maxX) &&
+        intervalsOverlap(draftBounds.minZ, draftBounds.maxZ, bounds.minZ, bounds.maxZ)
+      ) {
+        conflicts.push(item.id)
+      }
+    }
+
+    return { valid: conflicts.length === 0, conflictIds: conflicts }
   }
 
   /**
@@ -514,7 +661,7 @@ export class SpatialGridManager {
     // Convert local X position to parametric t (0-1)
     const tCenter = localX / wallLength
     const [itemWidth, itemHeight] = dimensions
-    return this.getWallGrid(levelId).canPlaceOnWall(
+    const baseResult = this.getWallGrid(levelId).canPlaceOnWall(
       wallId,
       wallLength,
       wallHeight,
@@ -526,6 +673,44 @@ export class SpatialGridManager {
       side,
       ignoreIds,
     )
+
+    if (!baseResult.valid) return baseResult
+
+    const nodes = useScene.getState().nodes
+    const ignoreSet = new Set(ignoreIds ?? [])
+    const draftBounds = {
+      minX: localX - itemWidth / 2,
+      maxX: localX + itemWidth / 2,
+      minY: baseResult.adjustedY,
+      maxY: baseResult.adjustedY + itemHeight,
+    }
+
+    const conflicts: string[] = []
+    for (const node of Object.values(nodes)) {
+      if (node.type !== 'item') continue
+      const item = node as ItemNode
+      if (!(item.asset.attachTo === 'wall' || item.asset.attachTo === 'wall-side')) continue
+      if (ignoreSet.has(item.id)) continue
+      if (item.parentId !== wallId) continue
+
+      if (attachType === 'wall-side' && item.asset.attachTo === 'wall-side' && side && item.side) {
+        if (side !== item.side) continue
+      }
+
+      const bounds = getItemParentAabb(item)
+      if (
+        intervalsOverlap(draftBounds.minX, draftBounds.maxX, bounds.minX, bounds.maxX) &&
+        intervalsOverlap(draftBounds.minY, draftBounds.maxY, bounds.minY, bounds.maxY)
+      ) {
+        conflicts.push(item.id)
+      }
+    }
+
+    return {
+      ...baseResult,
+      valid: conflicts.length === 0,
+      conflictIds: conflicts,
+    }
   }
 
   getWallForItem(levelId: string, itemId: string): string | undefined {
@@ -692,8 +877,39 @@ export class SpatialGridManager {
       }
     }
 
-    // Check for overlaps with other ceiling items
-    return this.getCeilingGrid(ceilingId).canPlace(position, dimensions, rotation, ignoreIds)
+    const nodes = useScene.getState().nodes
+    const ignoreSet = new Set(ignoreIds ?? [])
+    const [width, , depth] = dimensions
+    const yRot = rotation[1]
+    const cos = Math.abs(Math.cos(yRot))
+    const sin = Math.abs(Math.sin(yRot))
+    const rotatedW = width * cos + depth * sin
+    const rotatedD = width * sin + depth * cos
+    const draftBounds = {
+      minX: position[0] - rotatedW / 2,
+      maxX: position[0] + rotatedW / 2,
+      minZ: position[2] - rotatedD / 2,
+      maxZ: position[2] + rotatedD / 2,
+    }
+
+    const conflicts: string[] = []
+    for (const node of Object.values(nodes)) {
+      if (node.type !== 'item') continue
+      const item = node as ItemNode
+      if (item.asset.attachTo !== 'ceiling') continue
+      if (ignoreSet.has(item.id)) continue
+      if (item.parentId !== ceilingId) continue
+
+      const bounds = getItemParentAabb(item)
+      if (
+        intervalsOverlap(draftBounds.minX, draftBounds.maxX, bounds.minX, bounds.maxX) &&
+        intervalsOverlap(draftBounds.minZ, draftBounds.maxZ, bounds.minZ, bounds.maxZ)
+      ) {
+        conflicts.push(item.id)
+      }
+    }
+
+    return { valid: conflicts.length === 0, conflictIds: conflicts }
   }
 
   clearLevel(levelId: string) {
diff --git a/packages/core/src/systems/stair/stair-system.tsx b/packages/core/src/systems/stair/stair-system.tsx
index 3d0964e6f..77e400296 100644
--- a/packages/core/src/systems/stair/stair-system.tsx
+++ b/packages/core/src/systems/stair/stair-system.tsx
@@ -216,7 +216,7 @@ function generateStairSegmentGeometry(
   extrudedGeometry.applyMatrix4(matrix)
   extrudedGeometry.computeVertexNormals()
 
-  const geometry = extrudedGeometry.toNonIndexed() ?? extrudedGeometry
+  const geometry = extrudedGeometry.index ? extrudedGeometry.toNonIndexed() : extrudedGeometry
   if (geometry !== extrudedGeometry) {
     extrudedGeometry.dispose()
   }
diff --git a/packages/editor/src/components/editor-2d/floorplan-action-menu-layer.tsx b/packages/editor/src/components/editor-2d/floorplan-action-menu-layer.tsx
new file mode 100644
index 000000000..1fdc5c816
--- /dev/null
+++ b/packages/editor/src/components/editor-2d/floorplan-action-menu-layer.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import { memo, type MouseEvent as ReactMouseEvent } from 'react'
+import useEditor from '../../store/use-editor'
+import { NodeActionMenu } from '../editor/node-action-menu'
+
+type SvgPoint = {
+  x: number
+  y: number
+}
+
+export type FloorplanActionMenuHandler = (event: ReactMouseEvent<HTMLButtonElement>) => void
+
+export type FloorplanActionMenuEntry = {
+  position: SvgPoint | null
+  onDelete: FloorplanActionMenuHandler
+  onMove: FloorplanActionMenuHandler
+  onDuplicate?: FloorplanActionMenuHandler
+}
+
+type FloorplanActionMenuLayerProps = {
+  item: FloorplanActionMenuEntry
+  wall: FloorplanActionMenuEntry
+  fence: FloorplanActionMenuEntry
+  slab: FloorplanActionMenuEntry
+  ceiling: FloorplanActionMenuEntry
+  opening: FloorplanActionMenuEntry
+  stair: FloorplanActionMenuEntry
+  roof: FloorplanActionMenuEntry
+  offsetY?: number
+}
+
+export const FloorplanActionMenuLayer = memo(function FloorplanActionMenuLayer({
+  item,
+  wall,
+  fence,
+  slab,
+  ceiling,
+  opening,
+  stair,
+  roof,
+  offsetY = 10,
+}: FloorplanActionMenuLayerProps) {
+  const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
+  const movingNode = useEditor((state) => state.movingNode)
+  const movingFenceEndpoint = useEditor((state) => state.movingFenceEndpoint)
+  const curvingWall = useEditor((state) => state.curvingWall)
+  const curvingFence = useEditor((state) => state.curvingFence)
+
+  if (!isFloorplanHovered || movingNode || movingFenceEndpoint || curvingWall || curvingFence) {
+    return null
+  }
+
+  const entries: FloorplanActionMenuEntry[] = [
+    item,
+    wall,
+    fence,
+    slab,
+    ceiling,
+    opening,
+    stair,
+    roof,
+  ]
+
+  return (
+    <>
+      {entries.map((entry, index) =>
+        entry.position ? (
+          <div
+            className="absolute z-30"
+            key={index}
+            style={{
+              left: entry.position.x,
+              top: entry.position.y,
+              transform: `translate(-50%, calc(-100% - ${offsetY}px))`,
+            }}
+          >
+            <NodeActionMenu
+              onDelete={entry.onDelete}
+              onDuplicate={entry.onDuplicate}
+              onMove={entry.onMove}
+              onPointerDown={(event) => event.stopPropagation()}
+              onPointerUp={(event) => event.stopPropagation()}
+            />
+          </div>
+        ) : null,
+      )}
+    </>
+  )
+})
diff --git a/packages/editor/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx b/packages/editor/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx
new file mode 100644
index 000000000..152eca79f
--- /dev/null
+++ b/packages/editor/src/components/editor-2d/floorplan-cursor-indicator-overlay.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+import { Icon } from '@iconify/react'
+import { memo, useMemo } from 'react'
+import useEditor, { type FloorplanSelectionTool } from '../../store/use-editor'
+import { furnishTools } from '../ui/action-menu/furnish-tools'
+import { tools as structureTools } from '../ui/action-menu/structure-tools'
+
+type SvgPoint = {
+  x: number
+  y: number
+}
+
+type FloorplanCursorIndicator =
+  | {
+      kind: 'asset'
+      iconSrc: string
+    }
+  | {
+      kind: 'icon'
+      icon: string
+    }
+
+type FloorplanCursorIndicatorOverlayProps = {
+  cursorPosition: SvgPoint | null
+  cursorAnchorPosition: SvgPoint | null
+  floorplanSelectionTool: FloorplanSelectionTool
+  movingOpeningType: 'door' | 'window' | null
+  isPanning: boolean
+  cursorColor: string
+  indicatorLineHeight?: number
+  indicatorBadgeOffsetX?: number
+  indicatorBadgeOffsetY?: number
+}
+
+export const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndicatorOverlay({
+  cursorPosition,
+  cursorAnchorPosition,
+  floorplanSelectionTool,
+  movingOpeningType,
+  isPanning,
+  cursorColor,
+  indicatorLineHeight = 18,
+  indicatorBadgeOffsetX = 14,
+  indicatorBadgeOffsetY = 14,
+}: FloorplanCursorIndicatorOverlayProps) {
+  const mode = useEditor((state) => state.mode)
+  const tool = useEditor((state) => state.tool)
+  const structureLayer = useEditor((state) => state.structureLayer)
+  const catalogCategory = useEditor((state) => state.catalogCategory)
+
+  const activeFloorplanToolConfig = useMemo(() => {
+    if (movingOpeningType) {
+      return structureTools.find((entry) => entry.id === movingOpeningType) ?? null
+    }
+
+    if (mode !== 'build' || !tool) {
+      return null
+    }
+
+    if (tool === 'item' && catalogCategory) {
+      return furnishTools.find((entry) => entry.catalogCategory === catalogCategory) ?? null
+    }
+
+    return structureTools.find((entry) => entry.id === tool) ?? null
+  }, [catalogCategory, mode, movingOpeningType, tool])
+
+  const indicator = useMemo<FloorplanCursorIndicator | null>(() => {
+    if (activeFloorplanToolConfig) {
+      return { kind: 'asset', iconSrc: activeFloorplanToolConfig.iconSrc }
+    }
+
+    if (mode === 'select' && floorplanSelectionTool === 'marquee' && structureLayer !== 'zones') {
+      return { kind: 'icon', icon: 'mdi:select-drag' }
+    }
+
+    if (mode === 'delete') {
+      return { kind: 'icon', icon: 'mdi:trash-can-outline' }
+    }
+
+    return null
+  }, [activeFloorplanToolConfig, floorplanSelectionTool, mode, structureLayer])
+
+  const position = mode === 'delete' ? cursorPosition : cursorAnchorPosition
+
+  if (!(indicator && position) || isPanning) {
+    return null
+  }
+
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute z-20"
+      style={{ left: position.x, top: position.y }}
+    >
+      {mode === 'delete' ? (
+        <div
+          className="flex h-8 w-8 items-center justify-center rounded-xl border border-white/5 bg-zinc-900/95 shadow-[0_8px_16px_-4px_rgba(0,0,0,0.3),0_4px_8px_-4px_rgba(0,0,0,0.2)]"
+          style={{
+            boxShadow: `0 8px 16px -4px rgba(0,0,0,0.3), 0 4px 8px -4px rgba(0,0,0,0.2), 0 0 18px ${cursorColor}22`,
+            transform: `translate(${indicatorBadgeOffsetX}px, ${indicatorBadgeOffsetY}px)`,
+          }}
+        >
+          {indicator.kind === 'asset' ? (
+            <img
+              alt=""
+              aria-hidden="true"
+              className="h-5 w-5 object-contain drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
+              src={indicator.iconSrc}
+            />
+          ) : (
+            <Icon
+              aria-hidden="true"
+              className="drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
+              color={cursorColor}
+              height={18}
+              icon={indicator.icon}
+              width={18}
+            />
+          )}
+        </div>
+      ) : (
+        <>
+          <div
+            className="absolute top-0 left-1/2 w-px -translate-x-1/2 -translate-y-full"
+            style={{
+              backgroundColor: cursorColor,
+              boxShadow: `0 0 12px ${cursorColor}55`,
+              height: indicatorLineHeight,
+            }}
+          />
+          <div
+            className="absolute top-0 left-1/2 flex h-8 w-8 items-center justify-center rounded-xl border border-white/5 bg-zinc-900/95 shadow-[0_8px_16px_-4px_rgba(0,0,0,0.3),0_4px_8px_-4px_rgba(0,0,0,0.2)]"
+            style={{
+              transform: `translate(-50%, calc(-100% - ${indicatorLineHeight}px))`,
+            }}
+          >
+            {indicator.kind === 'asset' ? (
+              <img
+                alt=""
+                aria-hidden="true"
+                className="h-5 w-5 object-contain drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
+                src={indicator.iconSrc}
+              />
+            ) : (
+              <Icon
+                aria-hidden="true"
+                className="drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
+                color="white"
+                height={18}
+                icon={indicator.icon}
+                width={18}
+              />
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+})
diff --git a/packages/editor/src/components/editor-2d/floorplan-hotkey-handlers.tsx b/packages/editor/src/components/editor-2d/floorplan-hotkey-handlers.tsx
new file mode 100644
index 000000000..42de33cec
--- /dev/null
+++ b/packages/editor/src/components/editor-2d/floorplan-hotkey-handlers.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { memo, useEffect } from 'react'
+import useEditor from '../../store/use-editor'
+
+type FloorplanSiteKeyHandlerProps = {
+  onRestoreGroundLevel: () => void
+}
+
+export const FloorplanSiteKeyHandler = memo(function FloorplanSiteKeyHandler({
+  onRestoreGroundLevel,
+}: FloorplanSiteKeyHandlerProps) {
+  const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
+  const phase = useEditor((state) => state.phase)
+  const setFloorplanSelectionTool = useEditor((state) => state.setFloorplanSelectionTool)
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement | null
+      const isEditableTarget =
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        Boolean(target?.isContentEditable)
+
+      if (
+        isEditableTarget ||
+        !isFloorplanHovered ||
+        phase !== 'site' ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.altKey ||
+        event.key.toLowerCase() !== 'v'
+      ) {
+        return
+      }
+
+      setFloorplanSelectionTool('click')
+      onRestoreGroundLevel()
+    }
+
+    window.addEventListener('keydown', handleKeyDown, true)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [isFloorplanHovered, onRestoreGroundLevel, phase, setFloorplanSelectionTool])
+
+  return null
+})
+
+type FloorplanDuplicateHotkeyProps = {
+  hasDuplicatable: boolean
+  onDuplicateSelected: () => void
+}
+
+export const FloorplanDuplicateHotkey = memo(function FloorplanDuplicateHotkey({
+  hasDuplicatable,
+  onDuplicateSelected,
+}: FloorplanDuplicateHotkeyProps) {
+  const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'c') {
+        return
+      }
+
+      if (!(isFloorplanHovered && hasDuplicatable)) {
+        return
+      }
+
+      const target = event.target as HTMLElement | null
+      const isEditableTarget =
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        Boolean(target?.isContentEditable)
+
+      if (isEditableTarget) {
+        return
+      }
+
+      event.preventDefault()
+      onDuplicateSelected()
+    }
+
+    window.addEventListener('keydown', handleKeyDown, true)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [hasDuplicatable, isFloorplanHovered, onDuplicateSelected])
+
+  return null
+})
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-draft-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-draft-layer.tsx
new file mode 100644
index 000000000..c2a4df91e
--- /dev/null
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-draft-layer.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import { memo } from 'react'
+
+type SvgLine = {
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+type FloorplanDraftLayerProps = {
+  draftPolygonPoints: string | null
+  linearDraftSegment: SvgLine | null
+  polygonDraftPolygonPoints: string | null
+  polygonDraftPolylinePoints: string | null
+  polygonDraftClosingSegment: SvgLine | null
+  draftAnchorPoints: Array<{ x: number; y: number; isPrimary: boolean }>
+  draftFill: string
+  draftStroke: string
+  anchorFill: string
+}
+
+export const FloorplanDraftLayer = memo(function FloorplanDraftLayer({
+  draftPolygonPoints,
+  linearDraftSegment,
+  polygonDraftPolygonPoints,
+  polygonDraftPolylinePoints,
+  polygonDraftClosingSegment,
+  draftAnchorPoints,
+  draftFill,
+  draftStroke,
+  anchorFill,
+}: FloorplanDraftLayerProps) {
+  return (
+    <>
+      {draftPolygonPoints && (
+        <polygon
+          fill={draftFill}
+          fillOpacity={0.35}
+          points={draftPolygonPoints}
+          stroke={draftStroke}
+          strokeDasharray="0.24 0.12"
+          strokeWidth="0.07"
+          vectorEffect="non-scaling-stroke"
+        />
+      )}
+
+      {linearDraftSegment && (
+        <line
+          stroke={draftStroke}
+          strokeDasharray="0.2 0.12"
+          strokeLinecap="round"
+          strokeOpacity={0.95}
+          strokeWidth="0.08"
+          vectorEffect="non-scaling-stroke"
+          x1={linearDraftSegment.x1}
+          x2={linearDraftSegment.x2}
+          y1={linearDraftSegment.y1}
+          y2={linearDraftSegment.y2}
+        />
+      )}
+
+      {polygonDraftPolygonPoints && (
+        <polygon fill={draftFill} fillOpacity={0.2} points={polygonDraftPolygonPoints} stroke="none" />
+      )}
+
+      {polygonDraftPolylinePoints && (
+        <polyline
+          fill="none"
+          points={polygonDraftPolylinePoints}
+          stroke={draftStroke}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="0.08"
+          vectorEffect="non-scaling-stroke"
+        />
+      )}
+
+      {polygonDraftClosingSegment && (
+        <line
+          stroke={draftStroke}
+          strokeDasharray="0.16 0.1"
+          strokeLinecap="round"
+          strokeOpacity={0.75}
+          strokeWidth="0.05"
+          vectorEffect="non-scaling-stroke"
+          x1={polygonDraftClosingSegment.x1}
+          x2={polygonDraftClosingSegment.x2}
+          y1={polygonDraftClosingSegment.y1}
+          y2={polygonDraftClosingSegment.y2}
+        />
+      )}
+
+      {draftAnchorPoints.map((point, index) => (
+        <circle
+          cx={point.x}
+          cy={point.y}
+          fill={point.isPrimary ? anchorFill : draftStroke}
+          fillOpacity={0.95}
+          key={`polygon-draft-${index}`}
+          pointerEvents="none"
+          r={point.isPrimary ? 0.12 : 0.1}
+          vectorEffect="non-scaling-stroke"
+        />
+      ))}
+    </>
+  )
+})
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-marquee-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-marquee-layer.tsx
new file mode 100644
index 000000000..d3d6c4bd8
--- /dev/null
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-marquee-layer.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import { memo } from 'react'
+
+type SvgSelectionBounds = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+type FloorplanMarqueeLayerProps = {
+  bounds: SvgSelectionBounds | null
+  cursorColor: string
+  outlineWidth: number
+  glowWidth: number
+}
+
+export const FloorplanMarqueeLayer = memo(function FloorplanMarqueeLayer({
+  bounds,
+  cursorColor,
+  outlineWidth,
+  glowWidth,
+}: FloorplanMarqueeLayerProps) {
+  if (!bounds) {
+    return null
+  }
+
+  return (
+    <>
+      <rect
+        fill={cursorColor}
+        fillOpacity={0.12}
+        height={bounds.height}
+        pointerEvents="none"
+        stroke={cursorColor}
+        strokeOpacity={0.26}
+        strokeWidth={glowWidth}
+        vectorEffect="non-scaling-stroke"
+        width={bounds.width}
+        x={bounds.x}
+        y={bounds.y}
+      />
+      <rect
+        fill="none"
+        height={bounds.height}
+        pointerEvents="none"
+        stroke={cursorColor}
+        strokeOpacity={0.96}
+        strokeWidth={outlineWidth}
+        vectorEffect="non-scaling-stroke"
+        width={bounds.width}
+        x={bounds.x}
+        y={bounds.y}
+      />
+    </>
+  )
+})
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-measurements-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-measurements-layer.tsx
new file mode 100644
index 000000000..8c5663baf
--- /dev/null
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-measurements-layer.tsx
@@ -0,0 +1,197 @@
+'use client'
+
+import { memo } from 'react'
+
+const FLOORPLAN_MEASUREMENT_LINE_WIDTH = 1.35
+const FLOORPLAN_MEASUREMENT_LINE_OPACITY = 0.95
+const FLOORPLAN_MEASUREMENT_LABEL_FONT_SIZE = 0.15
+const FLOORPLAN_MEASUREMENT_LABEL_OPACITY = 0.98
+const FLOORPLAN_MEASUREMENT_EXTENSION_DASH = '0.08 0.12'
+const FLOORPLAN_MEASUREMENT_END_TICK = 0.18
+
+export type LinearMeasurementOverlay = {
+  dashedExtensions?: boolean
+  id: string
+  dimensionLineEnd: { x1: number; y1: number; x2: number; y2: number }
+  dimensionLineStart: { x1: number; y1: number; x2: number; y2: number }
+  extensionStart: { x1: number; y1: number; x2: number; y2: number }
+  extensionEnd: { x1: number; y1: number; x2: number; y2: number }
+  label: string
+  labelX: number
+  labelY: number
+  labelAngleDeg: number
+  extensionStroke?: string
+  isSelected?: boolean
+  labelFill?: string
+  showTicks?: boolean
+  stroke?: string
+}
+
+type FloorplanMeasurementPalette = {
+  measurementStroke: string
+}
+
+type FloorplanMeasurementLineProps = {
+  palette: FloorplanMeasurementPalette
+  segment: { x1: number; y1: number; x2: number; y2: number }
+  isSelected?: boolean
+  dashed?: boolean
+  stroke?: string
+}
+
+function FloorplanMeasurementLine({
+  palette,
+  segment,
+  isSelected,
+  dashed = false,
+  stroke,
+}: FloorplanMeasurementLineProps) {
+  const lineOpacity = isSelected
+    ? FLOORPLAN_MEASUREMENT_LINE_OPACITY
+    : FLOORPLAN_MEASUREMENT_LINE_OPACITY * 0.4
+
+  return (
+    <line
+      shapeRendering="geometricPrecision"
+      stroke={stroke ?? palette.measurementStroke}
+      strokeDasharray={dashed ? FLOORPLAN_MEASUREMENT_EXTENSION_DASH : undefined}
+      strokeLinecap="round"
+      strokeOpacity={lineOpacity}
+      strokeWidth={FLOORPLAN_MEASUREMENT_LINE_WIDTH}
+      vectorEffect="non-scaling-stroke"
+      x1={segment.x1}
+      x2={segment.x2}
+      y1={segment.y1}
+      y2={segment.y2}
+    />
+  )
+}
+
+type FloorplanMeasurementTickProps = {
+  palette: FloorplanMeasurementPalette
+  x: number
+  y: number
+  angleDeg: number
+  isSelected?: boolean
+  stroke?: string
+}
+
+function FloorplanMeasurementTick({
+  palette,
+  x,
+  y,
+  angleDeg,
+  isSelected,
+  stroke,
+}: FloorplanMeasurementTickProps) {
+  const radians = (angleDeg * Math.PI) / 180
+  const nx = -Math.sin(radians)
+  const ny = Math.cos(radians)
+  const half = FLOORPLAN_MEASUREMENT_END_TICK / 2
+
+  return (
+    <line
+      shapeRendering="geometricPrecision"
+      stroke={stroke ?? palette.measurementStroke}
+      strokeLinecap="round"
+      strokeOpacity={
+        isSelected ? FLOORPLAN_MEASUREMENT_LINE_OPACITY : FLOORPLAN_MEASUREMENT_LINE_OPACITY * 0.4
+      }
+      strokeWidth={FLOORPLAN_MEASUREMENT_LINE_WIDTH}
+      vectorEffect="non-scaling-stroke"
+      x1={x - nx * half}
+      x2={x + nx * half}
+      y1={y - ny * half}
+      y2={y + ny * half}
+    />
+  )
+}
+
+type FloorplanMeasurementsLayerProps = {
+  className: string
+  measurements: LinearMeasurementOverlay[]
+  palette: FloorplanMeasurementPalette
+}
+
+export const FloorplanMeasurementsLayer = memo(function FloorplanMeasurementsLayer({
+  className,
+  measurements,
+  palette,
+}: FloorplanMeasurementsLayerProps) {
+  if (measurements.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      {measurements.map((measurement) => (
+        <g className={className} key={measurement.id} pointerEvents="none" style={{ userSelect: 'none' }}>
+          <FloorplanMeasurementLine
+            dashed={measurement.dashedExtensions ?? true}
+            isSelected={measurement.isSelected}
+            palette={palette}
+            segment={measurement.extensionStart}
+            stroke={measurement.extensionStroke}
+          />
+          <FloorplanMeasurementLine
+            isSelected={measurement.isSelected}
+            palette={palette}
+            segment={measurement.dimensionLineStart}
+            stroke={measurement.stroke}
+          />
+          <FloorplanMeasurementLine
+            isSelected={measurement.isSelected}
+            palette={palette}
+            segment={measurement.dimensionLineEnd}
+            stroke={measurement.stroke}
+          />
+          <FloorplanMeasurementLine
+            dashed={measurement.dashedExtensions ?? true}
+            isSelected={measurement.isSelected}
+            palette={palette}
+            segment={measurement.extensionEnd}
+            stroke={measurement.extensionStroke}
+          />
+          {measurement.showTicks !== false ? (
+            <>
+              <FloorplanMeasurementTick
+                angleDeg={measurement.labelAngleDeg}
+                isSelected={measurement.isSelected}
+                palette={palette}
+                stroke={measurement.stroke}
+                x={measurement.dimensionLineStart.x1}
+                y={measurement.dimensionLineStart.y1}
+              />
+              <FloorplanMeasurementTick
+                angleDeg={measurement.labelAngleDeg}
+                isSelected={measurement.isSelected}
+                palette={palette}
+                stroke={measurement.stroke}
+                x={measurement.dimensionLineEnd.x2}
+                y={measurement.dimensionLineEnd.y2}
+              />
+            </>
+          ) : null}
+          <text
+            dominantBaseline="central"
+            fill={measurement.labelFill ?? palette.measurementStroke}
+            fillOpacity={
+              measurement.isSelected
+                ? FLOORPLAN_MEASUREMENT_LABEL_OPACITY
+                : FLOORPLAN_MEASUREMENT_LABEL_OPACITY * 0.4
+            }
+            fontFamily="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+            fontSize={FLOORPLAN_MEASUREMENT_LABEL_FONT_SIZE}
+            fontWeight="600"
+            textAnchor="middle"
+            transform={`rotate(${measurement.labelAngleDeg} ${measurement.labelX} ${measurement.labelY}) translate(0, -0.04)`}
+            x={measurement.labelX}
+            y={measurement.labelY}
+          >
+            {measurement.label}
+          </text>
+        </g>
+      ))}
+    </>
+  )
+})
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-roof-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-roof-layer.tsx
new file mode 100644
index 000000000..447cd7342
--- /dev/null
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-roof-layer.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+import { memo } from 'react'
+import type { Point2D, RoofNode, RoofSegmentNode } from '@pascal-app/core'
+import { toSvgX, toSvgY } from '../svg-paths'
+
+type FloorplanLineSegment = {
+  start: Point2D
+  end: Point2D
+}
+
+type FloorplanRoofSegmentEntry = {
+  segment: RoofSegmentNode
+  points: string
+  ridgeLine: FloorplanLineSegment | null
+}
+
+type FloorplanRoofEntry = {
+  roof: RoofNode
+  segments: FloorplanRoofSegmentEntry[]
+}
+
+type FloorplanRoofLayerProps = {
+  highlightedIdSet: ReadonlySet<string>
+  roofEntries: FloorplanRoofEntry[]
+  selectedIdSet: ReadonlySet<string>
+}
+
+export const FloorplanRoofLayer = memo(function FloorplanRoofLayer({
+  highlightedIdSet,
+  roofEntries,
+  selectedIdSet,
+}: FloorplanRoofLayerProps) {
+  if (roofEntries.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      {roofEntries.map(({ roof, segments }) => {
+        const roofSelected = selectedIdSet.has(roof.id)
+        const roofHighlighted = highlightedIdSet.has(roof.id)
+        const hasSelectedSegment = segments.some(({ segment }) => selectedIdSet.has(segment.id))
+        const hasHighlightedSegment = segments.some(({ segment }) =>
+          highlightedIdSet.has(segment.id),
+        )
+        const isRoofActive =
+          roofSelected || roofHighlighted || hasSelectedSegment || hasHighlightedSegment
+
+        return (
+          <g key={roof.id} pointerEvents="none">
+            {segments.map(({ points, ridgeLine, segment }) => {
+              const isSegmentSelected = selectedIdSet.has(segment.id)
+              const isSegmentHighlighted = highlightedIdSet.has(segment.id)
+              const isSegmentActive = isSegmentSelected || isSegmentHighlighted
+
+              return (
+                <g key={segment.id}>
+                  <polygon
+                    fill={
+                      isSegmentActive
+                        ? 'rgba(14, 165, 233, 0.2)'
+                        : isRoofActive
+                          ? 'rgba(14, 165, 233, 0.14)'
+                          : 'rgba(14, 165, 233, 0.08)'
+                    }
+                    points={points}
+                    stroke={
+                      isSegmentActive
+                        ? '#0369a1'
+                        : isRoofActive
+                          ? '#0ea5e9'
+                          : 'rgba(14, 165, 233, 0.65)'
+                    }
+                    strokeWidth={isSegmentActive ? '2.25' : isRoofActive ? '1.75' : '1.1'}
+                    vectorEffect="non-scaling-stroke"
+                  />
+                  {ridgeLine ? (
+                    <line
+                      fill="none"
+                      stroke={isSegmentActive ? '#0f172a' : 'rgba(3, 105, 161, 0.75)'}
+                      strokeWidth={isSegmentActive ? '2' : '1.4'}
+                      vectorEffect="non-scaling-stroke"
+                      x1={toSvgX(ridgeLine.start.x)}
+                      x2={toSvgX(ridgeLine.end.x)}
+                      y1={toSvgY(ridgeLine.start.y)}
+                      y2={toSvgY(ridgeLine.end.y)}
+                    />
+                  ) : null}
+                </g>
+              )
+            })}
+          </g>
+        )
+      })}
+    </>
+  )
+})
diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-stair-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-stair-layer.tsx
new file mode 100644
index 000000000..b73b8887c
--- /dev/null
+++ b/packages/editor/src/components/editor-2d/renderers/floorplan-stair-layer.tsx
@@ -0,0 +1,430 @@
+'use client'
+
+import type { Point2D, StairNode, StairSegmentNode } from '@pascal-app/core'
+import { memo, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent } from 'react'
+import {
+  buildSvgAnnularSectorPath,
+  buildSvgArcPath,
+  buildSvgArrowHeadPoints,
+  formatSvgPolygonPoints,
+  getArcPlanPoint,
+  toSvgX,
+  toSvgY,
+} from '../svg-paths'
+
+type FloorplanPolygonEntry = {
+  points: string
+  polygon: Point2D[]
+}
+
+type FloorplanStairSegmentEntry = {
+  segment: StairSegmentNode
+  points: string
+  treadBars: FloorplanPolygonEntry[]
+}
+
+type FloorplanStairArrowEntry = {
+  head: Point2D[]
+  polyline: Point2D[]
+}
+
+type FloorplanStairEntry = {
+  arrow: FloorplanStairArrowEntry | null
+  hitPolygons: Point2D[][]
+  stair: StairNode
+  segments: FloorplanStairSegmentEntry[]
+}
+
+type FloorplanPalette = {
+  deleteFill: string
+  deleteStroke: string
+}
+
+type FloorplanStairLayerProps = {
+  canFocusStairs: boolean
+  canSelectStairs: boolean
+  cursor: string
+  highlightedIdSet: ReadonlySet<string>
+  hitStrokeWidth: number
+  hoveredStairId: StairNode['id'] | null
+  isDeleteMode: boolean
+  onStairDoubleClick: (stair: StairNode, event: ReactMouseEvent<SVGElement>) => void
+  onStairHoverChange: (stairId: StairNode['id'] | null) => void
+  onStairHoverEnter: (stairId: StairNode['id']) => void
+  onStairPointerDown: (stairId: StairNode['id'], event: ReactPointerEvent<SVGElement>) => void
+  onStairSelect: (stairId: StairNode['id'], event: ReactMouseEvent<SVGElement>) => void
+  palette: FloorplanPalette
+  selectedIdSet: ReadonlySet<string>
+  stairEntries: FloorplanStairEntry[]
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function getNormalizedFloorplanStairSweepAngle(stair: StairNode) {
+  const stairType = stair.stairType ?? 'straight'
+  const baseSweepAngle =
+    stair.sweepAngle ?? (stairType === 'spiral' ? Math.PI * 2 : Math.PI / 2)
+
+  if (Math.abs(baseSweepAngle) >= Math.PI * 2) {
+    return Math.sign(baseSweepAngle || 1) * (Math.PI * 2 - 0.001)
+  }
+
+  return baseSweepAngle
+}
+
+export const FloorplanStairLayer = memo(function FloorplanStairLayer({
+  canFocusStairs,
+  canSelectStairs,
+  cursor,
+  highlightedIdSet,
+  hitStrokeWidth,
+  hoveredStairId,
+  isDeleteMode,
+  onStairDoubleClick,
+  onStairHoverChange,
+  onStairHoverEnter,
+  onStairPointerDown,
+  onStairSelect,
+  palette,
+  selectedIdSet,
+  stairEntries,
+}: FloorplanStairLayerProps) {
+  if (stairEntries.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      {stairEntries.map(({ arrow, hitPolygons, stair, segments }) => {
+        const stairSelected = selectedIdSet.has(stair.id)
+        const stairHighlighted = highlightedIdSet.has(stair.id)
+        const segmentSelected = segments.some(({ segment }) => selectedIdSet.has(segment.id))
+        const segmentHighlighted = segments.some(({ segment }) => highlightedIdSet.has(segment.id))
+        const isHovered = hoveredStairId === stair.id
+        const isDeleteHovered = isDeleteMode && isHovered
+        const isSelectionActive =
+          stairSelected || stairHighlighted || segmentSelected || segmentHighlighted
+        const stairType = stair.stairType ?? 'straight'
+        const normalizedSweepAngle = getNormalizedFloorplanStairSweepAngle(stair)
+        const sectorStartAngle = stair.rotation - normalizedSweepAngle / 2
+        const sectorEndAngle = sectorStartAngle + normalizedSweepAngle
+        const stairCenter = {
+          x: stair.position[0],
+          y: stair.position[2],
+        }
+        const innerRadius = Math.max(
+          stairType === 'spiral' ? 0.05 : 0.2,
+          stair.innerRadius ?? (stairType === 'spiral' ? 0.2 : 0.9),
+        )
+        const outerRadius = innerRadius + stair.width
+        const centerlineRadius = innerRadius + stair.width / 2
+        const curvedStroke = isDeleteHovered
+          ? palette.deleteStroke
+          : isSelectionActive
+            ? '#2563eb'
+            : 'rgba(31, 41, 55, 0.9)'
+        const curvedAccent = isDeleteHovered
+          ? palette.deleteStroke
+          : isSelectionActive
+            ? '#1d4ed8'
+            : 'rgba(23, 23, 23, 0.96)'
+        const curvedFill = isDeleteHovered
+          ? palette.deleteFill
+          : isSelectionActive
+            ? 'rgba(59, 130, 246, 0.16)'
+            : '#ffffff'
+        const straightAccent = isDeleteHovered
+          ? palette.deleteStroke
+          : isSelectionActive
+            ? '#1d4ed8'
+            : 'rgba(23, 23, 23, 0.96)'
+        const straightStroke = isDeleteHovered
+          ? palette.deleteStroke
+          : isSelectionActive
+            ? '#1d4ed8'
+            : 'rgba(23, 23, 23, 0.88)'
+        const straightTread = isDeleteHovered
+          ? palette.deleteStroke
+          : isSelectionActive
+            ? 'rgba(37, 99, 235, 0.78)'
+            : 'rgba(38, 38, 38, 0.62)'
+        const straightFill = isDeleteHovered
+          ? palette.deleteFill
+          : isSelectionActive
+            ? 'rgba(59, 130, 246, 0.08)'
+            : 'rgba(255, 255, 255, 0.02)'
+        const curvedOuterLineWidth = isSelectionActive ? '2' : '1.4'
+        const curvedInnerLineWidth = isSelectionActive ? '1.7' : '1.2'
+        const stairSymbol =
+          stairType === 'spiral' ? (
+            <>
+              <path
+                d={buildSvgAnnularSectorPath(
+                  stairCenter,
+                  innerRadius,
+                  outerRadius,
+                  sectorStartAngle,
+                  sectorEndAngle,
+                )}
+                fill={curvedFill}
+                pointerEvents="none"
+              />
+              <path
+                d={buildSvgArcPath(stairCenter, outerRadius, sectorStartAngle, sectorEndAngle)}
+                fill="none"
+                pointerEvents="none"
+                stroke={curvedStroke}
+                strokeWidth={curvedOuterLineWidth}
+                vectorEffect="non-scaling-stroke"
+              />
+              <path
+                d={buildSvgArcPath(stairCenter, innerRadius, sectorStartAngle, sectorEndAngle)}
+                fill="none"
+                pointerEvents="none"
+                stroke={curvedStroke}
+                strokeWidth={curvedInnerLineWidth}
+                vectorEffect="non-scaling-stroke"
+              />
+              {Array.from({ length: Math.max(6, stair.stepCount) }, (_, index) => {
+                const stepCount = Math.max(6, stair.stepCount)
+                const stepSweep = normalizedSweepAngle / stepCount
+                const angle = sectorStartAngle + stepSweep * index
+                const innerPoint = getArcPlanPoint(stairCenter, innerRadius, angle)
+                const outerPoint = getArcPlanPoint(stairCenter, outerRadius, angle)
+                const dashedFromIndex = Math.floor(stepCount * 0.68)
+
+                return (
+                  <line
+                    key={`${stair.id}:spiral-step:${index}`}
+                    pointerEvents="none"
+                    stroke={index === stepCount - 1 ? curvedAccent : curvedStroke}
+                    strokeDasharray={index >= dashedFromIndex ? '0.1 0.08' : undefined}
+                    strokeWidth={index === stepCount - 1 ? '1.8' : '1.15'}
+                    vectorEffect="non-scaling-stroke"
+                    x1={toSvgX(innerPoint.x)}
+                    x2={toSvgX(outerPoint.x)}
+                    y1={toSvgY(innerPoint.y)}
+                    y2={toSvgY(outerPoint.y)}
+                  />
+                )
+              })}
+              <circle
+                cx={toSvgX(stairCenter.x)}
+                cy={toSvgY(stairCenter.y)}
+                fill="#ffffff"
+                pointerEvents="none"
+                r={Math.max(innerRadius * 0.18, 0.06)}
+                stroke={curvedAccent}
+                strokeWidth="1.2"
+                vectorEffect="non-scaling-stroke"
+              />
+              {(() => {
+                const directionAngle = sectorStartAngle + normalizedSweepAngle * 0.86
+                const arrowPoint = getArcPlanPoint(stairCenter, centerlineRadius, directionAngle)
+                const tangentAngle =
+                  directionAngle + (normalizedSweepAngle >= 0 ? Math.PI / 2 : -Math.PI / 2)
+
+                return (
+                  <polygon
+                    fill={curvedAccent}
+                    key={`${stair.id}:spiral-arrow`}
+                    pointerEvents="none"
+                    points={buildSvgArrowHeadPoints(
+                      arrowPoint,
+                      tangentAngle,
+                      clamp(stair.width * 0.18, 0.12, 0.18),
+                    )}
+                  />
+                )
+              })()}
+            </>
+          ) : stairType === 'curved' ? (
+            <>
+              <path
+                d={buildSvgAnnularSectorPath(
+                  stairCenter,
+                  innerRadius,
+                  outerRadius,
+                  sectorStartAngle,
+                  sectorEndAngle,
+                )}
+                fill={curvedFill}
+                pointerEvents="none"
+              />
+              <path
+                d={buildSvgArcPath(stairCenter, outerRadius, sectorStartAngle, sectorEndAngle)}
+                fill="none"
+                pointerEvents="none"
+                stroke={curvedStroke}
+                strokeWidth={curvedOuterLineWidth}
+                vectorEffect="non-scaling-stroke"
+              />
+              <path
+                d={buildSvgArcPath(stairCenter, innerRadius, sectorStartAngle, sectorEndAngle)}
+                fill="none"
+                pointerEvents="none"
+                stroke={curvedStroke}
+                strokeWidth={curvedInnerLineWidth}
+                vectorEffect="non-scaling-stroke"
+              />
+              {Array.from({ length: Math.max(4, stair.stepCount) + 1 }, (_, index) => {
+                const stepCount = Math.max(4, stair.stepCount)
+                const stepSweep = normalizedSweepAngle / stepCount
+                const angle = sectorStartAngle + stepSweep * index
+                const innerPoint = getArcPlanPoint(stairCenter, innerRadius, angle)
+                const outerPoint = getArcPlanPoint(stairCenter, outerRadius, angle)
+
+                return (
+                  <line
+                    key={`${stair.id}:curved-step:${index}`}
+                    pointerEvents="none"
+                    stroke={curvedStroke}
+                    strokeWidth={index === 0 || index === stepCount ? '1.5' : '1.1'}
+                    vectorEffect="non-scaling-stroke"
+                    x1={toSvgX(innerPoint.x)}
+                    x2={toSvgX(outerPoint.x)}
+                    y1={toSvgY(innerPoint.y)}
+                    y2={toSvgY(outerPoint.y)}
+                  />
+                )
+              })}
+              <path
+                d={buildSvgArcPath(
+                  stairCenter,
+                  centerlineRadius,
+                  sectorStartAngle + (normalizedSweepAngle / Math.max(4, stair.stepCount)) * 0.55,
+                  sectorEndAngle - (normalizedSweepAngle / Math.max(4, stair.stepCount)) * 0.55,
+                )}
+                fill="none"
+                pointerEvents="none"
+                stroke={curvedAccent}
+                strokeDasharray="0.08 0.11"
+                strokeWidth="1.1"
+                vectorEffect="non-scaling-stroke"
+              />
+              {(() => {
+                const stepCount = Math.max(4, stair.stepCount)
+                const stepSweep = normalizedSweepAngle / stepCount
+                const arrowAngle = sectorEndAngle - stepSweep * 0.8
+                const arrowPoint = getArcPlanPoint(stairCenter, centerlineRadius, arrowAngle)
+                const tangentAngle =
+                  arrowAngle + (normalizedSweepAngle >= 0 ? Math.PI / 2 : -Math.PI / 2)
+
+                return (
+                  <polygon
+                    fill={curvedAccent}
+                    key={`${stair.id}:curved-arrow`}
+                    pointerEvents="none"
+                    points={buildSvgArrowHeadPoints(
+                      arrowPoint,
+                      tangentAngle,
+                      clamp(stair.width * 0.16, 0.1, 0.16),
+                    )}
+                  />
+                )
+              })()}
+            </>
+          ) : (
+            <>
+              {segments.map(({ points, segment, treadBars }) => (
+                <g key={segment.id}>
+                  <polygon
+                    fill={straightFill}
+                    pointerEvents="none"
+                    points={points}
+                    stroke={straightStroke}
+                    strokeWidth={isSelectionActive ? '2' : '1.35'}
+                    vectorEffect="non-scaling-stroke"
+                  />
+                  {treadBars.map((treadBar, treadIndex) => (
+                    <polygon
+                      fill={straightTread}
+                      key={`${segment.id}:tread:${treadIndex}`}
+                      pointerEvents="none"
+                      points={segment.segmentType === 'landing' ? '' : treadBar.points}
+                    />
+                  ))}
+                </g>
+              ))}
+              {arrow?.polyline && arrow.polyline.length >= 2 ? (
+                <>
+                  <polyline
+                    fill="none"
+                    points={formatSvgPolygonPoints(arrow.polyline)}
+                    pointerEvents="none"
+                    stroke={straightAccent}
+                    strokeWidth="1.15"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                  <circle
+                    cx={toSvgX(arrow.polyline[0]!.x)}
+                    cy={toSvgY(arrow.polyline[0]!.y)}
+                    fill={straightAccent}
+                    pointerEvents="none"
+                    r="0.045"
+                  />
+                  <polygon
+                    fill={straightAccent}
+                    points={formatSvgPolygonPoints(arrow.head)}
+                    pointerEvents="none"
+                  />
+                </>
+              ) : null}
+            </>
+          )
+
+        return (
+          <g
+            key={stair.id}
+            onClick={
+              canSelectStairs
+                ? (event) => {
+                    event.stopPropagation()
+                    onStairSelect(stair.id, event)
+                  }
+                : undefined
+            }
+            onDoubleClick={
+              canFocusStairs
+                ? (event) => {
+                    event.stopPropagation()
+                    onStairDoubleClick(stair, event)
+                  }
+                : undefined
+            }
+            onPointerEnter={canSelectStairs ? () => onStairHoverEnter(stair.id) : undefined}
+            onPointerLeave={canSelectStairs ? () => onStairHoverChange(null) : undefined}
+            onPointerDown={
+              canFocusStairs && stairSelected
+                ? (event) => {
+                    if (event.button === 0) {
+                      onStairPointerDown(stair.id, event)
+                    }
+                  }
+                : undefined
+            }
+            pointerEvents={canSelectStairs ? undefined : 'none'}
+            style={canSelectStairs ? { cursor } : undefined}
+          >
+            {hitPolygons.map((polygon, polygonIndex) => (
+              <polygon
+                fill="transparent"
+                key={`${stair.id}:hit:${polygonIndex}`}
+                points={formatSvgPolygonPoints(polygon)}
+                pointerEvents={canSelectStairs ? 'all' : 'none'}
+                stroke="transparent"
+                strokeLinejoin="round"
+                strokeWidth={hitStrokeWidth}
+                vectorEffect="non-scaling-stroke"
+              />
+            ))}
+            <title>{stair.name || 'Staircase'}</title>
+            {stairSymbol}
+          </g>
+        )
+      })}
+    </>
+  )
+})
diff --git a/packages/editor/src/components/editor-2d/svg-paths.ts b/packages/editor/src/components/editor-2d/svg-paths.ts
new file mode 100644
index 000000000..e9e30a179
--- /dev/null
+++ b/packages/editor/src/components/editor-2d/svg-paths.ts
@@ -0,0 +1,121 @@
+'use client'
+
+import type { Point2D } from '@pascal-app/core'
+
+function toSvgX(value: number) {
+  return -value
+}
+
+function toSvgY(value: number) {
+  return -value
+}
+
+function toSvgPoint(point: Point2D) {
+  return {
+    x: toSvgX(point.x),
+    y: toSvgY(point.y),
+  }
+}
+
+export function formatPolygonPath(points: Point2D[], holes: Point2D[][] = []) {
+  const formatSubpath = (subpathPoints: Point2D[]) => {
+    const [firstPoint, ...restPoints] = subpathPoints
+    if (!firstPoint) {
+      return null
+    }
+
+    const firstSvgPoint = toSvgPoint(firstPoint)
+
+    return [
+      `M ${firstSvgPoint.x} ${firstSvgPoint.y}`,
+      ...restPoints.map((point) => {
+        const svgPoint = toSvgPoint(point)
+        return `L ${svgPoint.x} ${svgPoint.y}`
+      }),
+      'Z',
+    ].join(' ')
+  }
+
+  return [points, ...holes].map(formatSubpath).filter(Boolean).join(' ')
+}
+
+export function buildSvgPolylinePath(points: Point2D[]) {
+  if (points.length < 2) {
+    return null
+  }
+
+  return points
+    .map((point, index) => {
+      const svgPoint = toSvgPoint(point)
+      return `${index === 0 ? 'M' : 'L'} ${svgPoint.x} ${svgPoint.y}`
+    })
+    .join(' ')
+}
+
+export function getArcPlanPoint(center: Point2D, radius: number, angle: number): Point2D {
+  return {
+    x: center.x + Math.cos(angle) * radius,
+    y: center.y + Math.sin(angle) * radius,
+  }
+}
+
+export function buildSvgArcPath(
+  center: Point2D,
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+) {
+  const start = getArcPlanPoint(center, radius, startAngle)
+  const end = getArcPlanPoint(center, radius, endAngle)
+  const delta = endAngle - startAngle
+  const largeArcFlag = Math.abs(delta) > Math.PI ? 1 : 0
+  const sweepFlag = delta >= 0 ? 1 : 0
+
+  return `M ${toSvgX(start.x)} ${toSvgY(start.y)} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${toSvgX(end.x)} ${toSvgY(end.y)}`
+}
+
+export function buildSvgAnnularSectorPath(
+  center: Point2D,
+  innerRadius: number,
+  outerRadius: number,
+  startAngle: number,
+  endAngle: number,
+) {
+  const outerStart = getArcPlanPoint(center, outerRadius, startAngle)
+  const outerEnd = getArcPlanPoint(center, outerRadius, endAngle)
+  const innerEnd = getArcPlanPoint(center, innerRadius, endAngle)
+  const innerStart = getArcPlanPoint(center, innerRadius, startAngle)
+  const delta = endAngle - startAngle
+  const largeArcFlag = Math.abs(delta) > Math.PI ? 1 : 0
+  const sweepFlag = delta >= 0 ? 1 : 0
+  const reverseSweepFlag = sweepFlag ? 0 : 1
+
+  return [
+    `M ${toSvgX(outerStart.x)} ${toSvgY(outerStart.y)}`,
+    `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} ${sweepFlag} ${toSvgX(outerEnd.x)} ${toSvgY(outerEnd.y)}`,
+    `L ${toSvgX(innerEnd.x)} ${toSvgY(innerEnd.y)}`,
+    `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} ${reverseSweepFlag} ${toSvgX(innerStart.x)} ${toSvgY(innerStart.y)}`,
+    'Z',
+  ].join(' ')
+}
+
+export function formatSvgPolygonPoints(points: Point2D[]) {
+  return points
+    .map((point) => `${toSvgX(point.x)},${toSvgY(point.y)}`)
+    .join(' ')
+}
+
+export function buildSvgArrowHeadPoints(point: Point2D, angle: number, size: number) {
+  const left = {
+    x: point.x - size * Math.cos(angle - Math.PI / 6),
+    y: point.y - size * Math.sin(angle - Math.PI / 6),
+  }
+  const right = {
+    x: point.x - size * Math.cos(angle + Math.PI / 6),
+    y: point.y - size * Math.sin(angle + Math.PI / 6),
+  }
+
+  return formatSvgPolygonPoints([point, left, right])
+}
+
+export { toSvgPoint, toSvgX, toSvgY }
diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx
index a3ab3da86..6d5d36ed4 100755
--- a/packages/editor/src/components/editor/floating-action-menu.tsx
+++ b/packages/editor/src/components/editor/floating-action-menu.tsx
@@ -6,8 +6,8 @@ import {
   type CeilingNode,
   DoorNode,
   FenceNode,
+  generateId,
   ItemNode,
-  RoofNode,
   RoofSegmentNode,
   type SlabNode,
   StairNode,
@@ -23,6 +23,8 @@ import { useFrame } from '@react-three/fiber'
 import { Move } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
+import { duplicateRoofSubtree } from '../../lib/roof-duplication'
+import { duplicateStairSubtree } from '../../lib/stair-duplication'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import useEditor from '../../store/use-editor'
 import { NodeActionMenu } from './node-action-menu'
@@ -234,6 +236,16 @@ export function FloatingActionMenu() {
       e.stopPropagation()
       if (!node?.parentId) return
       sfxEmitter.emit('sfx:item-pick')
+
+      if (node.type === 'roof') {
+        try {
+          duplicateRoofSubtree(node.id as AnyNodeId, { mode: 'move' })
+        } catch (error) {
+          console.error('Failed to duplicate roof', error)
+        }
+        return
+      }
+
       useScene.temporal.getState().pause()
 
       let duplicateInfo = structuredClone(node) as any
@@ -254,10 +266,8 @@ export function FloatingActionMenu() {
           duplicate = FenceNode.parse(duplicateInfo)
           duplicate.start = [duplicate.start[0] + 1, duplicate.start[1] + 1]
           duplicate.end = [duplicate.end[0] + 1, duplicate.end[1] + 1]
-        } else if (node.type === 'roof') {
-          duplicateInfo.children = []
-          duplicate = RoofNode.parse(duplicateInfo)
         } else if (node.type === 'roof-segment') {
+          duplicateInfo.id = generateId('rseg')
           duplicate = RoofSegmentNode.parse(duplicateInfo)
         } else if (node.type === 'stair') {
           duplicateInfo.children = []
@@ -286,7 +296,6 @@ export function FloatingActionMenu() {
         } else if (duplicate.type === 'fence') {
           useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
         } else if (
-          duplicate.type === 'roof' ||
           duplicate.type === 'roof-segment' ||
           duplicate.type === 'stair' ||
           duplicate.type === 'stair-segment'
@@ -300,54 +309,11 @@ export function FloatingActionMenu() {
             ]
           }
           if (node.type === 'stair' && duplicate.type === 'stair') {
-            const nodesState = useScene.getState().nodes
-            const createOps: { node: AnyNode; parentId?: AnyNodeId }[] = [
-              { node: duplicate, parentId: duplicate.parentId as AnyNodeId },
-            ]
-
-            for (const childId of node.children ?? []) {
-              const childNode = nodesState[childId]
-              if (childNode?.type !== 'stair-segment') {
-                continue
-              }
-
-              let childDuplicateInfo = structuredClone(childNode) as any
-              delete childDuplicateInfo.id
-              childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata }
-              delete childDuplicateInfo.metadata?.isNew
-
-              try {
-                const childDuplicate = StairSegmentNode.parse(childDuplicateInfo)
-                createOps.push({ node: childDuplicate, parentId: duplicate.id as AnyNodeId })
-              } catch (e) {
-                console.error('Failed to duplicate stair segment', e)
-              }
-            }
-
-            useScene.getState().createNodes(createOps)
+            duplicateStairSubtree(node.id as AnyNodeId, { mode: 'move' })
           } else {
             useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
           }
 
-          // Duplicate children for roof nodes
-          if (node.type === 'roof' && node.children) {
-            const nodesState = useScene.getState().nodes
-            for (const childId of node.children) {
-              const childNode = nodesState[childId]
-              if (childNode && childNode.type === 'roof-segment') {
-                let childDuplicateInfo = structuredClone(childNode) as any
-                delete childDuplicateInfo.id
-                childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata, isNew: true }
-                try {
-                  const childDuplicate = RoofSegmentNode.parse(childDuplicateInfo)
-                  useScene.getState().createNode(childDuplicate, duplicate.id as AnyNodeId)
-                } catch (e) {
-                  console.error('Failed to duplicate roof segment', e)
-                }
-              }
-            }
-          }
-
           // Duplicate children for stair nodes
         }
         if (
@@ -356,7 +322,6 @@ export function FloatingActionMenu() {
           duplicate.type === 'fence' ||
           duplicate.type === 'window' ||
           duplicate.type === 'door' ||
-          duplicate.type === 'roof' ||
           duplicate.type === 'roof-segment' ||
           duplicate.type === 'stair-segment'
         ) {
@@ -364,7 +329,7 @@ export function FloatingActionMenu() {
         } else if (duplicate.type === 'stair') {
           setSelection({ selectedIds: [duplicate.id as AnyNodeId] })
         }
-        if (duplicate.type !== 'stair') {
+        if (duplicate.type !== 'stair' && duplicate.type !== 'roof') {
           setSelection({ selectedIds: [] })
         }
       }
diff --git a/packages/editor/src/components/editor/floorplan-background-selection.ts b/packages/editor/src/components/editor/floorplan-background-selection.ts
new file mode 100644
index 000000000..ce190f808
--- /dev/null
+++ b/packages/editor/src/components/editor/floorplan-background-selection.ts
@@ -0,0 +1,113 @@
+'use client'
+
+import type { Point2D, ZoneNode as ZoneNodeType } from '@pascal-app/core'
+import { isPointInsidePolygon } from '../../lib/floorplan'
+import type { WallPlanPoint } from '../tools/wall/wall-drafting'
+
+type ModifierKeys = {
+  meta: boolean
+  ctrl: boolean
+}
+
+type ZoneHitEntry = {
+  zone: {
+    id: ZoneNodeType['id']
+  }
+  polygon: Point2D[]
+}
+
+type ResolveFloorplanBackgroundSelectionArgs = {
+  canSelectElementFloorplanGeometry: boolean
+  canSelectFloorplanZones: boolean
+  currentSelectedIds: string[]
+  getFloorplanHitIdAtPoint: (planPoint: WallPlanPoint) => string | null
+  isWallBuildActive: boolean
+  modifierKeys: ModifierKeys
+  planPoint: WallPlanPoint
+  structureLayer: string
+  toPoint2D: (point: WallPlanPoint) => Point2D
+  visibleZonePolygons: ZoneHitEntry[]
+}
+
+export type FloorplanBackgroundSelectionResult =
+  | {
+      handled: true
+      kind: 'select-zone'
+      zoneId: ZoneNodeType['id']
+    }
+  | {
+      handled: true
+      kind: 'select-elements'
+      selectedIds: string[]
+    }
+  | {
+      handled: true
+      kind: 'clear-zones'
+    }
+  | {
+      handled: true
+      kind: 'clear-elements'
+      preserveSelection: boolean
+    }
+  | {
+      handled: false
+    }
+
+export function resolveFloorplanBackgroundSelection({
+  canSelectElementFloorplanGeometry,
+  canSelectFloorplanZones,
+  currentSelectedIds,
+  getFloorplanHitIdAtPoint,
+  isWallBuildActive,
+  modifierKeys,
+  planPoint,
+  structureLayer,
+  toPoint2D,
+  visibleZonePolygons,
+}: ResolveFloorplanBackgroundSelectionArgs): FloorplanBackgroundSelectionResult {
+  if (canSelectFloorplanZones) {
+    const zoneHit = visibleZonePolygons.find(({ polygon }) =>
+      isPointInsidePolygon(toPoint2D(planPoint), polygon),
+    )
+    if (zoneHit) {
+      return {
+        handled: true,
+        kind: 'select-zone',
+        zoneId: zoneHit.zone.id,
+      }
+    }
+  }
+
+  if (canSelectElementFloorplanGeometry) {
+    const hitId = getFloorplanHitIdAtPoint(planPoint)
+    if (hitId) {
+      return {
+        handled: true,
+        kind: 'select-elements',
+        selectedIds:
+          modifierKeys.meta || modifierKeys.ctrl
+            ? currentSelectedIds.includes(hitId)
+              ? currentSelectedIds.filter((selectedId) => selectedId !== hitId)
+              : [...currentSelectedIds, hitId]
+            : [hitId],
+      }
+    }
+  }
+
+  if (!isWallBuildActive) {
+    if (structureLayer === 'zones') {
+      return {
+        handled: true,
+        kind: 'clear-zones',
+      }
+    }
+
+    return {
+      handled: true,
+      kind: 'clear-elements',
+      preserveSelection: modifierKeys.meta || modifierKeys.ctrl,
+    }
+  }
+
+  return { handled: false }
+}
diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx
index e33d856ae..c897e01a5 100644
--- a/packages/editor/src/components/editor/floorplan-panel.tsx
+++ b/packages/editor/src/components/editor/floorplan-panel.tsx
@@ -9,10 +9,11 @@ import {
   calculateLevelMiters,
   DoorNode,
   emitter,
+  type FenceNode,
   type GridEvent,
   type GuideNode,
-  getScaledDimensions,
   getWallChordFrame,
+  getWallCurveFrameAt,
   getWallCurveLength,
   getWallMidpointHandlePoint,
   getWallPlanFootprint,
@@ -23,12 +24,16 @@ import {
   loadAssetUrl,
   normalizeWallCurveOffset,
   type Point2D,
+  type RoofNode,
+  type RoofSegmentNode,
+  sceneRegistry,
   type SiteNode,
   SlabNode,
   type StairNode,
   StairNode as StairNodeSchema,
   type StairSegmentNode,
   StairSegmentNode as StairSegmentNodeSchema,
+  sampleWallCenterline,
   useLiveTransforms,
   useScene,
   type WallNode,
@@ -49,10 +54,37 @@ import {
   useState,
 } from 'react'
 import { createPortal } from 'react-dom'
-import { useShallow } from 'zustand/react/shallow'
+import { FloorplanActionMenuLayer as Editor2dFloorplanActionMenuLayer } from '../editor-2d/floorplan-action-menu-layer'
+import { FloorplanCursorIndicatorOverlay as Editor2dFloorplanCursorIndicatorOverlay } from '../editor-2d/floorplan-cursor-indicator-overlay'
+import {
+  FloorplanDuplicateHotkey,
+  FloorplanSiteKeyHandler,
+} from '../editor-2d/floorplan-hotkey-handlers'
+import { FloorplanDraftLayer } from '../editor-2d/renderers/floorplan-draft-layer'
+import {
+  FloorplanMeasurementsLayer,
+  type LinearMeasurementOverlay,
+} from '../editor-2d/renderers/floorplan-measurements-layer'
+import { FloorplanMarqueeLayer } from '../editor-2d/renderers/floorplan-marquee-layer'
+import { FloorplanRoofLayer } from '../editor-2d/renderers/floorplan-roof-layer'
+import { FloorplanStairLayer } from '../editor-2d/renderers/floorplan-stair-layer'
+import {
+  buildSvgPolylinePath,
+  formatPolygonPath,
+  getArcPlanPoint,
+} from '../editor-2d/svg-paths'
+import {
+  buildFloorplanItemEntry,
+  buildFloorplanStairEntry as buildSharedFloorplanStairEntry,
+  getFloorplanWall as getSharedFloorplanWall,
+  type FloorplanNodeTransform as SharedFloorplanNodeTransform,
+  rotatePlanVector as rotateSharedPlanVector,
+} from '../../lib/floorplan'
+import { duplicateRoofSubtree } from '../../lib/roof-duplication'
+import { duplicateStairSubtree } from '../../lib/stair-duplication'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import { cn } from '../../lib/utils'
-import useEditor, { type FloorplanSelectionTool } from '../../store/use-editor'
+import useEditor from '../../store/use-editor'
 import { snapToHalf } from '../tools/item/placement-math'
 import {
   DEFAULT_STAIR_ATTACHMENT_SIDE,
@@ -63,6 +95,7 @@ import {
   DEFAULT_STAIR_THICKNESS,
   DEFAULT_STAIR_WIDTH,
 } from '../tools/stair/stair-defaults'
+import { snapFenceDraftPoint } from '../tools/fence/fence-drafting'
 import {
   createWallOnCurrentLevel,
   isWallLongEnough,
@@ -70,13 +103,12 @@ import {
   WALL_GRID_STEP,
   type WallPlanPoint,
 } from '../tools/wall/wall-drafting'
-import { furnishTools } from '../ui/action-menu/furnish-tools'
-import { tools as structureTools } from '../ui/action-menu/structure-tools'
 
 import { PALETTE_COLORS } from '../ui/primitives/color-dot'
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/primitives/popover'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/primitives/tooltip'
-import { NodeActionMenu } from './node-action-menu'
+import { resolveFloorplanBackgroundSelection } from './floorplan-background-selection'
+import { useFloorplanBackgroundPlacement } from './use-floorplan-background-placement'
+import { useFloorplanHitTesting } from './use-floorplan-hit-testing'
+import { useFloorplanSceneData } from './use-floorplan-scene-data'
 
 const FALLBACK_VIEW_SIZE = 12
 const FLOORPLAN_PADDING = 2
@@ -118,15 +150,27 @@ const FLOORPLAN_ENDPOINT_HOVER_RING_STROKE_WIDTH = 7
 const FLOORPLAN_MARQUEE_DRAG_THRESHOLD_PX = 4
 const FLOORPLAN_MEASUREMENT_OFFSET = 0.46
 const FLOORPLAN_MEASUREMENT_EXTENSION_OVERSHOOT = 0.08
-const FLOORPLAN_MEASUREMENT_LINE_WIDTH = 1.2
-const FLOORPLAN_MEASUREMENT_LINE_OUTLINE_WIDTH = 2.8
-const FLOORPLAN_MEASUREMENT_LINE_OPACITY = 0.72
-const FLOORPLAN_MEASUREMENT_LINE_OUTLINE_OPACITY = 0.9
+const FLOORPLAN_MEASUREMENT_LINE_OUTLINE_WIDTH = 0
+const FLOORPLAN_MEASUREMENT_LINE_OUTLINE_OPACITY = 0
 const FLOORPLAN_MEASUREMENT_LABEL_FONT_SIZE = 0.15
-const FLOORPLAN_MEASUREMENT_LABEL_OPACITY = 0.82
-const FLOORPLAN_MEASUREMENT_LABEL_STROKE_WIDTH = 0.05
+const FLOORPLAN_MEASUREMENT_LABEL_STROKE_WIDTH = 0
 const FLOORPLAN_MEASUREMENT_LABEL_GAP = 0.56
 const FLOORPLAN_MEASUREMENT_LABEL_LINE_PADDING = 0.14
+const FLOORPLAN_WALL_OUTER_MEASUREMENT_OFFSET = 0.34
+const FLOORPLAN_WALL_INNER_MEASUREMENT_OFFSET = 0.24
+const FLOORPLAN_WALL_OUTER_MEASUREMENT_STROKE = 'rgba(59, 130, 246, 0.95)'
+const FLOORPLAN_WALL_OUTER_MEASUREMENT_TEXT = 'rgba(37, 99, 235, 0.98)'
+const FLOORPLAN_WALL_OUTER_MEASUREMENT_EXTENSION = 'rgba(96, 165, 250, 0.9)'
+const FLOORPLAN_WALL_INNER_MEASUREMENT_STROKE = 'rgba(96, 165, 250, 0.95)'
+const FLOORPLAN_WALL_INNER_MEASUREMENT_TEXT = 'rgba(59, 130, 246, 0.98)'
+const FLOORPLAN_WALL_INNER_MEASUREMENT_EXTENSION = 'rgba(147, 197, 253, 0.9)'
+const FLOORPLAN_OPENING_MEASUREMENT_STROKE = 'rgba(249, 115, 22, 0.98)'
+const FLOORPLAN_OPENING_MEASUREMENT_TEXT = 'rgba(234, 88, 12, 0.98)'
+const FLOORPLAN_OPENING_MEASUREMENT_EXTENSION = 'rgba(251, 146, 60, 0.9)'
+const FLOORPLAN_ITEM_DIMENSION_OFFSET = 0.24
+const FLOORPLAN_ITEM_CLEARANCE_MAX_DISTANCE = 12
+const FLOORPLAN_ITEM_CLEARANCE_MIN_DISTANCE = 0.05
+const FLOORPLAN_ITEM_CLEARANCE_EDGE_PARALLEL_THRESHOLD = 0.65
 const FLOORPLAN_ACTION_MENU_HORIZONTAL_PADDING = 60
 const FLOORPLAN_ACTION_MENU_MIN_ANCHOR_Y = 56
 const FLOORPLAN_ACTION_MENU_OFFSET_Y = 10
@@ -146,13 +190,6 @@ const FLOORPLAN_GUIDE_ROTATION_FINE_SNAP_DEGREES = 1
 const FLOORPLAN_SITE_COLOR = '#10b981'
 const FLOORPLAN_NODE_FOOTPRINT_STROKE_WIDTH = FLOORPLAN_OPENING_STROKE_WIDTH / 2
 const FLOORPLAN_NODE_FOOTPRINT_CROSS_STROKE_WIDTH = FLOORPLAN_NODE_FOOTPRINT_STROKE_WIDTH * 0.7
-const FLOORPLAN_STAIR_OUTLINE_BAND_THICKNESS = FLOORPLAN_OPENING_STROKE_WIDTH
-const FLOORPLAN_STAIR_OUTLINE_MAX_FRACTION = 0.18
-const FLOORPLAN_STAIR_TREAD_BAND_THICKNESS = FLOORPLAN_OPENING_STROKE_WIDTH * 0.82
-const FLOORPLAN_STAIR_TREAD_MIN_THICKNESS = FLOORPLAN_OPENING_DETAIL_STROKE_WIDTH * 1.5
-const FLOORPLAN_STAIR_ARROW_BAND_THICKNESS = FLOORPLAN_STAIR_TREAD_BAND_THICKNESS
-const FLOORPLAN_STAIR_ARROW_HEAD_MIN_SIZE = 0.14
-const FLOORPLAN_STAIR_ARROW_HEAD_MAX_SIZE = 0.24
 type FloorplanViewport = {
   centerX: number
   centerY: number
@@ -239,12 +276,21 @@ type FloorplanMarqueeState = {
   currentPlanPoint: WallPlanPoint
 }
 
+type LinkedWallSnapshot = {
+  id: WallNode['id']
+  start: WallPlanPoint
+  end: WallPlanPoint
+}
+
 type WallEndpointDragState = {
   pointerId: number
   wallId: WallNode['id']
   endpoint: WallEndpoint
   fixedPoint: WallPlanPoint
   currentPoint: WallPlanPoint
+  originalStart: WallPlanPoint
+  originalEnd: WallPlanPoint
+  linkedWalls: LinkedWallSnapshot[]
 }
 
 type WallCurveDragState = {
@@ -253,6 +299,13 @@ type WallCurveDragState = {
   currentCurveOffset: number
 }
 
+type PendingFenceDragState = {
+  pointerId: number
+  fenceId: FenceNode['id']
+  startClientX: number
+  startClientY: number
+}
+
 const GUIDE_CORNERS = ['nw', 'ne', 'se', 'sw'] as const
 
 type GuideCorner = (typeof GUIDE_CORNERS)[number]
@@ -292,6 +345,7 @@ type WallEndpointDraft = {
   endpoint: WallEndpoint
   start: WallPlanPoint
   end: WallPlanPoint
+  linkedWalls: LinkedWallSnapshot[]
 }
 
 type WallCurveDraft = {
@@ -338,6 +392,16 @@ type WallPolygonEntry = {
   points: string
 }
 
+type FloorplanFenceEntry = {
+  fence: FenceNode
+  centerline: Point2D[]
+  markerFrames: Array<{
+    angleDeg: number
+    point: Point2D
+  }>
+  path: string
+}
+
 type OpeningPolygonEntry = {
   opening: OpeningNode
   polygon: Point2D[]
@@ -351,6 +415,13 @@ type SlabPolygonEntry = {
   path: string
 }
 
+type CeilingPolygonEntry = {
+  ceiling: CeilingNode
+  polygon: Point2D[]
+  holes: Point2D[][]
+  path: string
+}
+
 type SitePolygonEntry = {
   site: SiteNode
   polygon: Point2D[]
@@ -363,11 +434,6 @@ type ZonePolygonEntry = {
   points: string
 }
 
-type FloorplanNodeTransform = {
-  position: Point2D
-  rotation: number
-}
-
 type FloorplanLineSegment = {
   start: Point2D
   end: Point2D
@@ -379,9 +445,11 @@ type FloorplanPolygonEntry = {
 }
 
 type FloorplanItemEntry = {
+  dimensionPolygon: Point2D[]
   item: ItemNode
   points: string
   polygon: Point2D[]
+  usesRealMesh: boolean
 }
 
 type FloorplanStairSegmentEntry = {
@@ -402,10 +470,24 @@ type FloorplanStairArrowEntry = {
 
 type FloorplanStairEntry = {
   arrow: FloorplanStairArrowEntry | null
+  hitPolygons: Point2D[][]
   stair: StairNode
   segments: FloorplanStairSegmentEntry[]
 }
 
+type FloorplanRoofSegmentEntry = {
+  segment: RoofSegmentNode
+  polygon: Point2D[]
+  points: string
+  ridgeLine: FloorplanLineSegment | null
+}
+
+type FloorplanRoofEntry = {
+  roof: RoofNode
+  center: Point2D
+  segments: FloorplanRoofSegmentEntry[]
+}
+
 type FloorplanPalette = {
   surface: string
   minorGrid: string
@@ -415,8 +497,15 @@ type FloorplanPalette = {
   slabFill: string
   slabStroke: string
   selectedSlabFill: string
+  selectedSlabStroke: string
+  ceilingFill: string
+  ceilingStroke: string
+  selectedCeilingFill: string
+  selectedCeilingStroke: string
   wallFill: string
   wallStroke: string
+  wallInnerStroke: string
+  wallShadow: string
   wallHoverStroke: string
   deleteFill: string
   deleteStroke: string
@@ -437,6 +526,9 @@ type FloorplanPalette = {
   endpointHandleHoverStroke: string
   endpointHandleActiveFill: string
   endpointHandleActiveStroke: string
+  curveHandleFill: string
+  curveHandleStroke: string
+  curveHandleHoverStroke: string
 }
 
 const resizeCursorByDirection: Record<ResizeDirection, string> = {
@@ -956,6 +1048,62 @@ function getDistanceToWallSegment(point: Point2D, start: WallPlanPoint, end: Wal
   return Math.hypot(point.x - projectedX, point.y - projectedY)
 }
 
+function normalizePlanVector(vector: Point2D): Point2D | null {
+  const length = Math.hypot(vector.x, vector.y)
+  if (length <= 1e-9) {
+    return null
+  }
+
+  return {
+    x: vector.x / length,
+    y: vector.y / length,
+  }
+}
+
+function dotPlanVectors(a: Point2D, b: Point2D) {
+  return a.x * b.x + a.y * b.y
+}
+
+function crossPlanVectors(a: Point2D, b: Point2D) {
+  return a.x * b.y - a.y * b.x
+}
+
+function getRaySegmentIntersection(
+  origin: Point2D,
+  direction: Point2D,
+  segmentStart: Point2D,
+  segmentEnd: Point2D,
+) {
+  const segmentVector = {
+    x: segmentEnd.x - segmentStart.x,
+    y: segmentEnd.y - segmentStart.y,
+  }
+  const denominator = crossPlanVectors(direction, segmentVector)
+
+  if (Math.abs(denominator) <= 1e-9) {
+    return null
+  }
+
+  const delta = {
+    x: segmentStart.x - origin.x,
+    y: segmentStart.y - origin.y,
+  }
+  const rayDistance = crossPlanVectors(delta, segmentVector) / denominator
+  const segmentT = crossPlanVectors(delta, direction) / denominator
+
+  if (rayDistance < 0 || segmentT < 0 || segmentT > 1) {
+    return null
+  }
+
+  return {
+    point: {
+      x: origin.x + direction.x * rayDistance,
+      y: origin.y + direction.y * rayDistance,
+    },
+    rayDistance,
+  }
+}
+
 function getViewportBounds(): ViewportBounds {
   if (typeof window === 'undefined') {
     return {
@@ -1171,36 +1319,12 @@ function formatPolygonPoints(points: Point2D[]): string {
     .join(' ')
 }
 
-function formatPolygonPath(points: Point2D[], holes: Point2D[][] = []): string {
-  const formatSubpath = (subpathPoints: Point2D[]) => {
-    const [firstPoint, ...restPoints] = subpathPoints
-    if (!firstPoint) {
-      return null
-    }
-
-    const firstSvgPoint = toSvgPoint(firstPoint)
-
-    return [
-      `M ${firstSvgPoint.x} ${firstSvgPoint.y}`,
-      ...restPoints.map((point) => {
-        const svgPoint = toSvgPoint(point)
-        return `L ${svgPoint.x} ${svgPoint.y}`
-      }),
-      'Z',
-    ].join(' ')
-  }
-
-  return [points, ...holes].map(formatSubpath).filter(Boolean).join(' ')
-}
-
 function toFloorplanPolygon(points: Array<[number, number]>): Point2D[] {
   return points.map(([x, y]) => ({ x, y }))
 }
 
 function rotatePlanVector(x: number, y: number, rotation: number): [number, number] {
-  const cos = Math.cos(rotation)
-  const sin = Math.sin(rotation)
-  return [x * cos + y * sin, -x * sin + y * cos]
+  return rotateSharedPlanVector(x, y, rotation)
 }
 
 function getPolygonBounds(points: Point2D[]) {
@@ -1324,726 +1448,320 @@ function movePlanPointTowards(start: Point2D, end: Point2D, distance: number): P
   return interpolatePlanPoint(start, end, Math.min(1, distance / totalDistance))
 }
 
-function getFloorplanStairSegmentCenterLine(polygon: Point2D[]): FloorplanLineSegment | null {
-  if (polygon.length < 4) {
-    return null
-  }
-
-  const [backLeft, backRight, frontRight, frontLeft] = polygon
+function getNormalizedFloorplanStairSweepAngle(stair: StairNode) {
+  const stairType = stair.stairType ?? 'straight'
+  const baseSweepAngle =
+    stair.sweepAngle ?? (stairType === 'spiral' ? Math.PI * 2 : Math.PI / 2)
 
-  return {
-    start: interpolatePlanPoint(backLeft!, backRight!, 0.5),
-    end: interpolatePlanPoint(frontLeft!, frontRight!, 0.5),
+  if (Math.abs(baseSweepAngle) >= Math.PI * 2) {
+    return Math.sign(baseSweepAngle || 1) * (Math.PI * 2 - 0.001)
   }
+
+  return baseSweepAngle
 }
 
-function getFloorplanStairInnerPolygon(polygon: Point2D[]): Point2D[] {
-  if (polygon.length < 4) {
-    return polygon
+function getFloorplanCurvedStairHitPolygon(stair: StairNode): Point2D[] {
+  const stairType = stair.stairType ?? 'straight'
+  const sweepAngle = getNormalizedFloorplanStairSweepAngle(stair)
+  const startAngle = stair.rotation - sweepAngle / 2
+  const endAngle = startAngle + sweepAngle
+  const center = {
+    x: stair.position[0],
+    y: stair.position[2],
+  }
+  const innerRadius = Math.max(
+    stairType === 'spiral' ? 0.05 : 0.2,
+    stair.innerRadius ?? (stairType === 'spiral' ? 0.2 : 0.9),
+  )
+  const outerRadius = innerRadius + stair.width
+  const outerArcLength = Math.abs(sweepAngle) * outerRadius
+  const segmentCount = Math.max(
+    24,
+    Math.ceil(Math.abs(sweepAngle) / (Math.PI / 24)),
+    Math.ceil(outerArcLength / 0.14),
+  )
+  const outerPoints: Point2D[] = []
+  const innerPoints: Point2D[] = []
+
+  for (let index = 0; index <= segmentCount; index += 1) {
+    const t = index / segmentCount
+    const angle = startAngle + (endAngle - startAngle) * t
+    outerPoints.push(getArcPlanPoint(center, outerRadius, angle))
+    innerPoints.push(getArcPlanPoint(center, innerRadius, angle))
   }
 
-  const [backLeft, backRight, frontRight, frontLeft] = polygon
-  const outerWidth = getPlanPointDistance(backLeft!, backRight!)
-  const outerLength = getPlanPointDistance(backLeft!, frontLeft!)
-  const widthInset = Math.min(
-    FLOORPLAN_STAIR_OUTLINE_BAND_THICKNESS,
-    outerWidth * FLOORPLAN_STAIR_OUTLINE_MAX_FRACTION,
-  )
-  const lengthInset = Math.min(
-    FLOORPLAN_STAIR_OUTLINE_BAND_THICKNESS,
-    outerLength * FLOORPLAN_STAIR_OUTLINE_MAX_FRACTION,
-  )
-
-  const insetBackLeft = movePlanPointTowards(backLeft!, frontLeft!, lengthInset)
-  const insetBackRight = movePlanPointTowards(backRight!, frontRight!, lengthInset)
-  const insetFrontLeft = movePlanPointTowards(frontLeft!, backLeft!, lengthInset)
-  const insetFrontRight = movePlanPointTowards(frontRight!, backRight!, lengthInset)
-
-  const innerPolygon = [
-    movePlanPointTowards(insetBackLeft, insetBackRight, widthInset),
-    movePlanPointTowards(insetBackRight, insetBackLeft, widthInset),
-    movePlanPointTowards(insetFrontRight, insetFrontLeft, widthInset),
-    movePlanPointTowards(insetFrontLeft, insetFrontRight, widthInset),
-  ]
+  return [...outerPoints, ...innerPoints.reverse()]
+}
 
-  const innerWidth = getPlanPointDistance(innerPolygon[0]!, innerPolygon[1]!)
-  const innerLength = getPlanPointDistance(innerPolygon[0]!, innerPolygon[3]!)
+function isPointInsidePolygonWithHoles(
+  point: Point2D,
+  polygon: Point2D[],
+  holes: Point2D[][] = [],
+) {
+  return (
+    isPointInsidePolygon(point, polygon) && !holes.some((hole) => isPointInsidePolygon(point, hole))
+  )
+}
 
-  return innerWidth > 0.06 && innerLength > 0.06 ? innerPolygon : polygon
+function isPointNearPlanPoint(a: WallPlanPoint, b: WallPlanPoint, threshold = 0.25) {
+  return Math.abs(a[0] - b[0]) < threshold && Math.abs(a[1] - b[1]) < threshold
 }
 
-function getFloorplanStairTreadLines(
-  segment: StairSegmentNode,
-  innerPolygon: Point2D[],
-): FloorplanLineSegment[] {
-  if (segment.segmentType !== 'stair' || segment.stepCount <= 1 || innerPolygon.length < 4) {
-    return []
-  }
+function calculatePolygonSnapPoint(
+  lastPoint: WallPlanPoint,
+  currentPoint: WallPlanPoint,
+): WallPlanPoint {
+  const [x1, y1] = lastPoint
+  const [x, y] = currentPoint
+  const dx = x - x1
+  const dy = y - y1
+  const absDx = Math.abs(dx)
+  const absDy = Math.abs(dy)
+  const horizontalDist = absDy
+  const verticalDist = absDx
+  const diagonalDist = Math.abs(absDx - absDy)
+  const minDist = Math.min(horizontalDist, verticalDist, diagonalDist)
 
-  const [backLeft, backRight, frontRight, frontLeft] = innerPolygon
-  const treadLines: FloorplanLineSegment[] = []
+  if (minDist === diagonalDist) {
+    const diagonalLength = Math.min(absDx, absDy)
+    return [x1 + Math.sign(dx) * diagonalLength, y1 + Math.sign(dy) * diagonalLength]
+  }
 
-  for (let stepIndex = 1; stepIndex < segment.stepCount; stepIndex += 1) {
-    const t = stepIndex / segment.stepCount
-    treadLines.push({
-      start: interpolatePlanPoint(backLeft!, frontLeft!, t),
-      end: interpolatePlanPoint(backRight!, frontRight!, t),
-    })
+  if (minDist === horizontalDist) {
+    return [x, y1]
   }
 
-  return treadLines
+  return [x1, y]
 }
 
-function getThickPlanLinePolygon(line: FloorplanLineSegment, thickness: number): Point2D[] {
-  const dx = line.end.x - line.start.x
-  const dy = line.end.y - line.start.y
-  const length = Math.hypot(dx, dy)
+function snapPolygonDraftPoint({
+  point,
+  start,
+  angleSnap,
+}: {
+  point: WallPlanPoint
+  start?: WallPlanPoint
+  angleSnap: boolean
+}): WallPlanPoint {
+  const snappedPoint: WallPlanPoint = [snapToHalf(point[0]), snapToHalf(point[1])]
 
-  if (length <= Number.EPSILON || thickness <= 0) {
-    return [line.start, line.end, line.end, line.start]
+  if (!(start && angleSnap)) {
+    return snappedPoint
   }
 
-  const halfThickness = thickness / 2
-  const normalX = (-dy / length) * halfThickness
-  const normalY = (dx / length) * halfThickness
-
-  return [
-    { x: line.start.x + normalX, y: line.start.y + normalY },
-    { x: line.end.x + normalX, y: line.end.y + normalY },
-    { x: line.end.x - normalX, y: line.end.y - normalY },
-    { x: line.start.x - normalX, y: line.start.y - normalY },
-  ]
+  return calculatePolygonSnapPoint(start, snappedPoint)
 }
 
-function getPolylineBandPolygons(points: Point2D[], thickness: number): FloorplanPolygonEntry[] {
-  if (points.length < 2 || thickness <= 0) {
-    return []
+function pointMatchesWallPlanPoint(
+  point: Point2D | undefined,
+  planPoint: WallPlanPoint,
+  epsilon = 1e-6,
+): boolean {
+  if (!point) {
+    return false
   }
 
-  const polygons: FloorplanPolygonEntry[] = []
-
-  for (let pointIndex = 1; pointIndex < points.length; pointIndex += 1) {
-    const start = points[pointIndex - 1]!
-    const end = points[pointIndex]!
+  return Math.abs(point.x - planPoint[0]) <= epsilon && Math.abs(point.y - planPoint[1]) <= epsilon
+}
 
-    if (getPlanPointDistance(start, end) <= Number.EPSILON) {
-      continue
-    }
+function getFloorplanFenceLength(fence: FenceNode) {
+  return isCurvedWall(fence)
+    ? getWallCurveLength(fence)
+    : Math.hypot(fence.end[0] - fence.start[0], fence.end[1] - fence.start[1])
+}
 
-    const polygon = getThickPlanLinePolygon({ start, end }, thickness)
-    polygons.push({
-      points: formatPolygonPoints(polygon),
-      polygon,
-    })
+function getFloorplanFenceMarkerTs(fence: FenceNode) {
+  const fenceLength = getFloorplanFenceLength(fence)
+  if (fenceLength <= 0.24) {
+    return [0.5]
   }
 
-  return polygons
-}
+  const spacing = clamp(
+    fence.style === 'privacy' ? fence.postSpacing * 0.72 : fence.postSpacing,
+    0.34,
+    1.5,
+  )
+  const inset = clamp(
+    Math.max(fence.postSize * 1.25, fence.edgeInset * 10),
+    0.18,
+    Math.min(0.48, fenceLength * 0.22),
+  )
+  const usableLength = Math.max(fenceLength - inset * 2, 0)
 
-function getFloorplanStairTreadThickness(segment: StairSegmentNode, innerPolygon: Point2D[]) {
-  if (segment.segmentType !== 'stair' || segment.stepCount <= 1 || innerPolygon.length < 4) {
-    return 0
+  if (usableLength <= 0.001) {
+    return [0.5]
+  }
+
+  const markerCount = Math.max(1, Math.min(24, Math.floor(usableLength / spacing) + 1))
+  if (markerCount === 1) {
+    return [0.5]
   }
 
-  const innerWidth = getPlanPointDistance(innerPolygon[0]!, innerPolygon[1]!)
-  const innerLength = getPlanPointDistance(innerPolygon[0]!, innerPolygon[3]!)
-  const treadRun = innerLength / Math.max(segment.stepCount, 1)
-  return clamp(
-    Math.min(FLOORPLAN_STAIR_TREAD_BAND_THICKNESS, innerWidth * 0.12, treadRun * 0.44),
-    FLOORPLAN_STAIR_TREAD_MIN_THICKNESS,
-    FLOORPLAN_STAIR_TREAD_BAND_THICKNESS,
+  return Array.from({ length: markerCount }, (_, index) =>
+    clamp((inset + (usableLength * index) / (markerCount - 1)) / fenceLength, 0.08, 0.92),
   )
 }
 
-function getFloorplanStairTreadBars(
-  segment: StairSegmentNode,
-  innerPolygon: Point2D[],
-  treadThickness = getFloorplanStairTreadThickness(segment, innerPolygon),
-): FloorplanPolygonEntry[] {
-  const treadLines = getFloorplanStairTreadLines(segment, innerPolygon)
-  if (treadLines.length === 0 || treadThickness <= 0) {
-    return []
+function getWallHoverSidePaths(polygon: Point2D[], wall: WallNode): [string, string] | null {
+  if (polygon.length < 4) {
+    return null
   }
 
-  return treadLines.map((line) => {
-    const polygon = getThickPlanLinePolygon(line, treadThickness)
-    return {
-      points: formatPolygonPoints(polygon),
-      polygon,
-    }
-  })
-}
+  if (isCurvedWall(wall) && polygon.length >= 6 && polygon.length % 2 === 0) {
+    const sidePointCount = polygon.length / 2
+    const rightSidePath = buildSvgPolylinePath(polygon.slice(0, sidePointCount))
+    const leftSidePath = buildSvgPolylinePath(polygon.slice(sidePointCount).reverse())
 
-type FloorplanStairArrowSide = 'back' | 'front' | 'left' | 'right'
+    if (!(rightSidePath && leftSidePath)) {
+      return null
+    }
 
-function getFloorplanStairSegmentCenterPoint(segment: FloorplanStairSegmentEntry): Point2D | null {
-  if (segment.centerLine) {
-    return interpolatePlanPoint(segment.centerLine.start, segment.centerLine.end, 0.5)
+    return [rightSidePath, leftSidePath]
   }
 
-  if (segment.polygon.length < 4) {
+  const startRight = polygon[0]
+  const endRight = polygon[1]
+  const hasEndCenterPoint = pointMatchesWallPlanPoint(polygon[2], wall.end)
+  const endLeft = polygon[hasEndCenterPoint ? 3 : 2]
+  const lastPoint = polygon[polygon.length - 1]
+  const hasStartCenterPoint = pointMatchesWallPlanPoint(lastPoint, wall.start)
+  const startLeft = polygon[hasStartCenterPoint ? polygon.length - 2 : polygon.length - 1]
+
+  if (!(startRight && endRight && endLeft && startLeft)) {
     return null
   }
 
-  const [backLeft, backRight, frontRight, frontLeft] = segment.polygon
+  const svgStartRight = toSvgPoint(startRight)
+  const svgEndRight = toSvgPoint(endRight)
+  const svgStartLeft = toSvgPoint(startLeft)
+  const svgEndLeft = toSvgPoint(endLeft)
+
+  const rightSidePath = `M ${svgStartRight.x} ${svgStartRight.y} L ${svgEndRight.x} ${svgEndRight.y}`
+  const leftSidePath = `M ${svgStartLeft.x} ${svgStartLeft.y} L ${svgEndLeft.x} ${svgEndLeft.y}`
 
-  return {
-    x: (backLeft!.x + backRight!.x + frontRight!.x + frontLeft!.x) / 4,
-    y: (backLeft!.y + backRight!.y + frontRight!.y + frontLeft!.y) / 4,
-  }
+  return [rightSidePath, leftSidePath]
 }
 
-function getFloorplanStairSegmentSidePoint(
-  segment: FloorplanStairSegmentEntry,
-  side: FloorplanStairArrowSide,
-): Point2D | null {
-  if (segment.polygon.length < 4) {
-    return null
+function buildDraftWall(levelId: string, start: WallPlanPoint, end: WallPlanPoint): WallNode {
+  return {
+    object: 'node',
+    id: 'wall_draft' as WallNode['id'],
+    type: 'wall',
+    name: 'Draft wall',
+    parentId: levelId,
+    visible: true,
+    metadata: {},
+    children: [],
+    start,
+    end,
+    frontSide: 'unknown',
+    backSide: 'unknown',
   }
+}
 
-  const [backLeft, backRight, frontRight, frontLeft] = segment.polygon
-
-  switch (side) {
-    case 'back':
-      return interpolatePlanPoint(backLeft!, backRight!, 0.5)
-    case 'front':
-      return interpolatePlanPoint(frontLeft!, frontRight!, 0.5)
-    case 'left':
-      return interpolatePlanPoint(backLeft!, frontLeft!, 0.5)
-    case 'right':
-      return interpolatePlanPoint(backRight!, frontRight!, 0.5)
-  }
+function pointsEqual(a: WallPlanPoint, b: WallPlanPoint): boolean {
+  return a[0] === b[0] && a[1] === b[1]
 }
 
-function getFloorplanStairExitSide(
-  nextSegment: StairSegmentNode | undefined,
-): FloorplanStairArrowSide {
-  if (!nextSegment) {
-    return 'front'
-  }
+function haveSameIds(currentIds: string[], nextIds: string[]): boolean {
+  return (
+    currentIds.length === nextIds.length &&
+    currentIds.every((currentId, index) => currentId === nextIds[index])
+  )
+}
 
-  // `attachmentSide` describes the next segment's turn direction. The floorplan transform
-  // attaches `left` turns to the previous segment's positive local X edge and `right` turns
-  // to the negative local X edge, so the arrow needs to mirror that convention here.
-  if (nextSegment.attachmentSide === 'left') {
-    return 'right'
-  }
-  if (nextSegment.attachmentSide === 'right') {
-    return 'left'
-  }
+function polygonsEqual(a: WallPlanPoint[], b: Array<[number, number]>): boolean {
+  return (
+    a.length === b.length &&
+    a.every((point, index) => {
+      const otherPoint = b[index]
+      if (!otherPoint) {
+        return false
+      }
 
-  return 'front'
+      return pointsEqual(point, otherPoint)
+    })
+  )
 }
 
-function appendUniquePlanPoint(points: Point2D[], point: Point2D | null) {
-  if (!point) {
-    return
+function buildWallEndpointDraft(
+  wallId: WallNode['id'],
+  endpoint: WallEndpoint,
+  fixedPoint: WallPlanPoint,
+  movingPoint: WallPlanPoint,
+  linkedWalls: LinkedWallSnapshot[] = [],
+): WallEndpointDraft {
+  return {
+    wallId,
+    endpoint,
+    start: endpoint === 'start' ? movingPoint : fixedPoint,
+    end: endpoint === 'end' ? movingPoint : fixedPoint,
+    linkedWalls,
   }
+}
 
-  const lastPoint = points[points.length - 1]
-  if (lastPoint && getPlanPointDistance(lastPoint, point) <= 0.001) {
-    return
+function buildWallWithUpdatedEndpoints(
+  wall: WallNode,
+  start: WallPlanPoint,
+  end: WallPlanPoint,
+): WallNode {
+  return {
+    ...wall,
+    start,
+    end,
   }
-
-  points.push(point)
 }
 
-function buildFloorplanStairArrow(
-  segments: FloorplanStairSegmentEntry[],
-): FloorplanStairArrowEntry | null {
-  const rawPoints: Point2D[] = []
-
-  for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex += 1) {
-    const segment = segments[segmentIndex]!
-    const nextSegment = segments[segmentIndex + 1]?.segment
-    const entryPoint = getFloorplanStairSegmentSidePoint(segment, 'back')
-    const exitPoint = getFloorplanStairSegmentSidePoint(
-      segment,
-      getFloorplanStairExitSide(nextSegment),
-    )
-
-    if (!(entryPoint && exitPoint)) {
-      continue
-    }
-
-    appendUniquePlanPoint(rawPoints, entryPoint)
-
-    const isStraightSegment = getPlanPointDistance(entryPoint, exitPoint) <= 0.001
-    if (isStraightSegment) {
-      continue
-    }
-
-    const exitSide = getFloorplanStairExitSide(nextSegment)
-    if (exitSide === 'front') {
-      appendUniquePlanPoint(rawPoints, exitPoint)
-      continue
-    }
-
-    appendUniquePlanPoint(rawPoints, getFloorplanStairSegmentCenterPoint(segment))
-    appendUniquePlanPoint(rawPoints, exitPoint)
-  }
-
-  if (rawPoints.length < 2) {
-    return null
-  }
-
-  const firstPoint = rawPoints[0]!
-  const secondPoint = rawPoints[1]!
-  const beforeLastPoint = rawPoints[rawPoints.length - 2]!
-  const lastPoint = rawPoints[rawPoints.length - 1]!
-  const firstLength = getPlanPointDistance(firstPoint, secondPoint)
-  const lastLength = getPlanPointDistance(beforeLastPoint, lastPoint)
-
-  if (firstLength <= Number.EPSILON || lastLength <= Number.EPSILON) {
-    return null
-  }
-
-  const polyline = [
-    movePlanPointTowards(firstPoint, secondPoint, Math.min(0.24, firstLength * 0.18)),
-    ...rawPoints.slice(1, -1),
-    movePlanPointTowards(lastPoint, beforeLastPoint, Math.min(0.3, lastLength * 0.22)),
-  ]
-  const arrowTailPoint = polyline[polyline.length - 2]
-  const arrowTip = polyline[polyline.length - 1]
-
-  if (!(arrowTailPoint && arrowTip)) {
-    return null
-  }
-
-  const arrowBodyLength = getPlanPointDistance(arrowTailPoint, arrowTip)
-  if (arrowBodyLength <= Number.EPSILON) {
-    return null
-  }
-
-  const arrowHeadLength = clamp(
-    arrowBodyLength * 0.72,
-    FLOORPLAN_STAIR_ARROW_HEAD_MIN_SIZE,
-    FLOORPLAN_STAIR_ARROW_HEAD_MAX_SIZE,
-  )
-  const arrowHeadBase = movePlanPointTowards(arrowTip, arrowTailPoint, arrowHeadLength)
-  const directionX = arrowTip.x - arrowHeadBase.x
-  const directionY = arrowTip.y - arrowHeadBase.y
-  const directionLength = Math.hypot(directionX, directionY)
-
-  if (directionLength <= Number.EPSILON) {
-    return null
-  }
-
-  const normalX = -directionY / directionLength
-  const normalY = directionX / directionLength
-  const arrowHeadHalfWidth = arrowHeadLength * 0.34
-
-  return {
-    head: [
-      arrowTip,
-      {
-        x: arrowHeadBase.x + normalX * arrowHeadHalfWidth,
-        y: arrowHeadBase.y + normalY * arrowHeadHalfWidth,
-      },
-      {
-        x: arrowHeadBase.x - normalX * arrowHeadHalfWidth,
-        y: arrowHeadBase.y - normalY * arrowHeadHalfWidth,
-      },
-    ],
-    polyline,
-  }
-}
-
-function collectLevelDescendants(levelNode: LevelNode, nodes: Record<string, AnyNode>): AnyNode[] {
-  const descendants: AnyNode[] = []
-  const stack = [...levelNode.children].reverse() as AnyNodeId[]
-
-  while (stack.length > 0) {
-    const nodeId = stack.pop()
-    if (!nodeId) {
-      continue
-    }
-
-    const node = nodes[nodeId]
-    if (!node) {
-      continue
-    }
-
-    descendants.push(node)
-
-    if ('children' in node && Array.isArray(node.children) && node.children.length > 0) {
-      for (let index = node.children.length - 1; index >= 0; index -= 1) {
-        stack.push(node.children[index] as AnyNodeId)
-      }
-    }
-  }
-
-  return descendants
-}
-
-function getItemFloorplanTransform(
-  item: ItemNode,
-  nodeById: ReadonlyMap<string, AnyNode>,
-  cache: Map<string, FloorplanNodeTransform | null>,
-): FloorplanNodeTransform | null {
-  const cached = cache.get(item.id)
-  if (cached !== undefined) {
-    return cached
-  }
-
-  const localRotation = item.rotation[1] ?? 0
-  let result: FloorplanNodeTransform | null = null
-  const itemMetadata =
-    typeof item.metadata === 'object' && item.metadata !== null && !Array.isArray(item.metadata)
-      ? (item.metadata as Record<string, unknown>)
-      : null
-
-  if (itemMetadata?.isTransient === true) {
-    const live = useLiveTransforms.getState().get(item.id)
-    if (live) {
-      result = {
-        position: {
-          x: live.position[0],
-          y: live.position[2],
-        },
-        rotation: live.rotation,
-      }
-
-      cache.set(item.id, result)
-      return result
-    }
-  }
-
-  if (item.parentId) {
-    const parentNode = nodeById.get(item.parentId as AnyNodeId)
-
-    if (parentNode?.type === 'wall') {
-      const wallRotation = -Math.atan2(
-        parentNode.end[1] - parentNode.start[1],
-        parentNode.end[0] - parentNode.start[0],
-      )
-      const wallLocalZ =
-        item.asset.attachTo === 'wall-side'
-          ? ((parentNode.thickness ?? 0.1) / 2) * (item.side === 'back' ? -1 : 1)
-          : item.position[2]
-      const [offsetX, offsetY] = rotatePlanVector(item.position[0], wallLocalZ, wallRotation)
-
-      result = {
-        position: {
-          x: parentNode.start[0] + offsetX,
-          y: parentNode.start[1] + offsetY,
-        },
-        rotation: wallRotation + localRotation,
-      }
-    } else if (parentNode?.type === 'item') {
-      const parentTransform = getItemFloorplanTransform(parentNode, nodeById, cache)
-      if (parentTransform) {
-        const [offsetX, offsetY] = rotatePlanVector(
-          item.position[0],
-          item.position[2],
-          parentTransform.rotation,
-        )
-        result = {
-          position: {
-            x: parentTransform.position.x + offsetX,
-            y: parentTransform.position.y + offsetY,
-          },
-          rotation: parentTransform.rotation + localRotation,
-        }
-      }
-    } else {
-      result = {
-        position: { x: item.position[0], y: item.position[2] },
-        rotation: localRotation,
-      }
-    }
-  } else {
-    result = {
-      position: { x: item.position[0], y: item.position[2] },
-      rotation: localRotation,
-    }
-  }
-
-  cache.set(item.id, result)
-  return result
-}
-
-type StairSegmentTransform = {
-  position: [number, number, number]
-  rotation: number
-}
-
-function computeFloorplanStairSegmentTransforms(
-  segments: StairSegmentNode[],
-): StairSegmentTransform[] {
-  const transforms: StairSegmentTransform[] = []
-  let currentX = 0
-  let currentY = 0
-  let currentZ = 0
-  let currentRotation = 0
-
-  for (let index = 0; index < segments.length; index += 1) {
-    const segment = segments[index]!
-
-    if (index === 0) {
-      transforms.push({
-        position: [currentX, currentY, currentZ],
-        rotation: currentRotation,
-      })
-      continue
-    }
-
-    const previousSegment = segments[index - 1]!
-    let attachX = 0
-    let attachY = previousSegment.height
-    let attachZ = previousSegment.length
-    let rotationDelta = 0
-
-    if (segment.attachmentSide === 'left') {
-      attachX = previousSegment.width / 2
-      attachZ = previousSegment.length / 2
-      rotationDelta = Math.PI / 2
-    } else if (segment.attachmentSide === 'right') {
-      attachX = -previousSegment.width / 2
-      attachZ = previousSegment.length / 2
-      rotationDelta = -Math.PI / 2
-    }
-
-    const [rotatedAttachX, rotatedAttachZ] = rotatePlanVector(attachX, attachZ, currentRotation)
-    currentX += rotatedAttachX
-    currentY += attachY
-    currentZ += rotatedAttachZ
-    currentRotation += rotationDelta
-
-    transforms.push({
-      position: [currentX, currentY, currentZ],
-      rotation: currentRotation,
-    })
-  }
-
-  return transforms
-}
-
-function getFloorplanStairSegmentPolygon(
-  stair: StairNode,
-  segment: StairSegmentNode,
-  transform: StairSegmentTransform,
-): Point2D[] {
-  const halfWidth = segment.width / 2
-  const localCorners: Array<[number, number]> = [
-    [-halfWidth, 0],
-    [halfWidth, 0],
-    [halfWidth, segment.length],
-    [-halfWidth, segment.length],
-  ]
-
-  return localCorners.map(([localX, localY]) => {
-    const [segmentX, segmentY] = rotatePlanVector(localX, localY, transform.rotation)
-    const groupX = transform.position[0] + segmentX
-    const groupY = transform.position[2] + segmentY
-    const [worldOffsetX, worldOffsetY] = rotatePlanVector(groupX, groupY, stair.rotation)
-
-    return {
-      x: stair.position[0] + worldOffsetX,
-      y: stair.position[2] + worldOffsetY,
-    }
-  })
-}
-
-function buildFloorplanStairEntry(
-  stair: StairNode,
-  segments: StairSegmentNode[],
-): FloorplanStairEntry | null {
-  if (segments.length === 0) {
-    return null
-  }
-
-  const transforms = computeFloorplanStairSegmentTransforms(segments)
-  const segmentEntries = segments.map((segment, index) => {
-    const polygon = getFloorplanStairSegmentPolygon(stair, segment, transforms[index]!)
-    const centerLine = getFloorplanStairSegmentCenterLine(polygon)
-    const innerPolygon = getFloorplanStairInnerPolygon(polygon)
-    const treadThickness = getFloorplanStairTreadThickness(segment, innerPolygon)
-
-    return {
-      centerLine,
-      innerPoints: formatPolygonPoints(innerPolygon),
-      innerPolygon,
-      segment,
-      points: formatPolygonPoints(polygon),
-      polygon,
-      treadBars: getFloorplanStairTreadBars(segment, innerPolygon, treadThickness),
-      treadThickness,
-    }
-  })
-
-  return {
-    arrow: buildFloorplanStairArrow(segmentEntries),
-    stair,
-    segments: segmentEntries,
-  }
-}
-
-function isPointInsidePolygonWithHoles(
-  point: Point2D,
-  polygon: Point2D[],
-  holes: Point2D[][] = [],
-) {
-  return (
-    isPointInsidePolygon(point, polygon) && !holes.some((hole) => isPointInsidePolygon(point, hole))
-  )
-}
-
-function isPointNearPlanPoint(a: WallPlanPoint, b: WallPlanPoint, threshold = 0.25) {
-  return Math.abs(a[0] - b[0]) < threshold && Math.abs(a[1] - b[1]) < threshold
-}
-
-function calculatePolygonSnapPoint(
-  lastPoint: WallPlanPoint,
-  currentPoint: WallPlanPoint,
-): WallPlanPoint {
-  const [x1, y1] = lastPoint
-  const [x, y] = currentPoint
-  const dx = x - x1
-  const dy = y - y1
-  const absDx = Math.abs(dx)
-  const absDy = Math.abs(dy)
-  const horizontalDist = absDy
-  const verticalDist = absDx
-  const diagonalDist = Math.abs(absDx - absDy)
-  const minDist = Math.min(horizontalDist, verticalDist, diagonalDist)
-
-  if (minDist === diagonalDist) {
-    const diagonalLength = Math.min(absDx, absDy)
-    return [x1 + Math.sign(dx) * diagonalLength, y1 + Math.sign(dy) * diagonalLength]
-  }
-
-  if (minDist === horizontalDist) {
-    return [x, y1]
-  }
-
-  return [x1, y]
-}
-
-function snapPolygonDraftPoint({
-  point,
-  start,
-  angleSnap,
-}: {
-  point: WallPlanPoint
-  start?: WallPlanPoint
-  angleSnap: boolean
-}): WallPlanPoint {
-  const snappedPoint: WallPlanPoint = [snapToHalf(point[0]), snapToHalf(point[1])]
-
-  if (!(start && angleSnap)) {
-    return snappedPoint
-  }
-
-  return calculatePolygonSnapPoint(start, snappedPoint)
-}
-
-function pointMatchesWallPlanPoint(
-  point: Point2D | undefined,
-  planPoint: WallPlanPoint,
-  epsilon = 1e-6,
-): boolean {
-  if (!point) {
-    return false
-  }
-
-  return Math.abs(point.x - planPoint[0]) <= epsilon && Math.abs(point.y - planPoint[1]) <= epsilon
-}
-
-function getWallHoverSidePaths(polygon: Point2D[], wall: WallNode): [string, string] | null {
-  if (polygon.length < 4) {
-    return null
-  }
-
-  const startRight = polygon[0]
-  const endRight = polygon[1]
-  const hasEndCenterPoint = pointMatchesWallPlanPoint(polygon[2], wall.end)
-  const endLeft = polygon[hasEndCenterPoint ? 3 : 2]
-  const lastPoint = polygon[polygon.length - 1]
-  const hasStartCenterPoint = pointMatchesWallPlanPoint(lastPoint, wall.start)
-  const startLeft = polygon[hasStartCenterPoint ? polygon.length - 2 : polygon.length - 1]
-
-  if (!(startRight && endRight && endLeft && startLeft)) {
-    return null
-  }
-
-  const svgStartRight = toSvgPoint(startRight)
-  const svgEndRight = toSvgPoint(endRight)
-  const svgStartLeft = toSvgPoint(startLeft)
-  const svgEndLeft = toSvgPoint(endLeft)
-
-  return [
-    `M ${svgStartRight.x} ${svgStartRight.y} L ${svgEndRight.x} ${svgEndRight.y}`,
-    `M ${svgStartLeft.x} ${svgStartLeft.y} L ${svgEndLeft.x} ${svgEndLeft.y}`,
-  ]
-}
-
-function buildDraftWall(levelId: string, start: WallPlanPoint, end: WallPlanPoint): WallNode {
-  return {
-    object: 'node',
-    id: 'wall_draft' as WallNode['id'],
-    type: 'wall',
-    name: 'Draft wall',
-    parentId: levelId,
-    visible: true,
-    metadata: {},
-    children: [],
-    start,
-    end,
-    frontSide: 'unknown',
-    backSide: 'unknown',
-  }
-}
-
-function pointsEqual(a: WallPlanPoint, b: WallPlanPoint): boolean {
-  return a[0] === b[0] && a[1] === b[1]
-}
-
-function haveSameIds(currentIds: string[], nextIds: string[]): boolean {
-  return (
-    currentIds.length === nextIds.length &&
-    currentIds.every((currentId, index) => currentId === nextIds[index])
-  )
-}
-
-function polygonsEqual(a: WallPlanPoint[], b: Array<[number, number]>): boolean {
-  return (
-    a.length === b.length &&
-    a.every((point, index) => {
-      const otherPoint = b[index]
-      if (!otherPoint) {
+function getLinkedWallSnapshots(
+  walls: WallNode[],
+  wallId: WallNode['id'],
+  originalStart: WallPlanPoint,
+  originalEnd: WallPlanPoint,
+): LinkedWallSnapshot[] {
+  return walls
+    .filter((wall) => {
+      if (wall.id === wallId) {
         return false
       }
 
-      return pointsEqual(point, otherPoint)
+      return (
+        pointsEqual(wall.start, originalStart) ||
+        pointsEqual(wall.start, originalEnd) ||
+        pointsEqual(wall.end, originalStart) ||
+        pointsEqual(wall.end, originalEnd)
+      )
     })
-  )
-}
-
-function buildWallEndpointDraft(
-  wallId: WallNode['id'],
-  endpoint: WallEndpoint,
-  fixedPoint: WallPlanPoint,
-  movingPoint: WallPlanPoint,
-): WallEndpointDraft {
-  return {
-    wallId,
-    endpoint,
-    start: endpoint === 'start' ? movingPoint : fixedPoint,
-    end: endpoint === 'end' ? movingPoint : fixedPoint,
-  }
+    .map((wall) => ({
+      id: wall.id,
+      start: [...wall.start] as WallPlanPoint,
+      end: [...wall.end] as WallPlanPoint,
+    }))
 }
 
-function buildWallWithUpdatedEndpoints(
-  wall: WallNode,
-  start: WallPlanPoint,
-  end: WallPlanPoint,
-): WallNode {
-  return {
-    ...wall,
-    start,
-    end,
-  }
+function getLinkedWallUpdates(
+  linkedWalls: LinkedWallSnapshot[],
+  originalStart: WallPlanPoint,
+  originalEnd: WallPlanPoint,
+  nextStart: WallPlanPoint,
+  nextEnd: WallPlanPoint,
+): LinkedWallSnapshot[] {
+  return linkedWalls.map((wall) => ({
+    id: wall.id,
+    start: pointsEqual(wall.start, originalStart)
+      ? nextStart
+      : pointsEqual(wall.start, originalEnd)
+        ? nextEnd
+        : wall.start,
+    end: pointsEqual(wall.end, originalStart)
+      ? nextStart
+      : pointsEqual(wall.end, originalEnd)
+        ? nextEnd
+        : wall.end,
+  }))
+}
+
+function getWallEndpointDraftUpdates(draft: WallEndpointDraft): LinkedWallSnapshot[] {
+  return [{ id: draft.wallId, start: draft.start, end: draft.end }, ...draft.linkedWalls]
 }
 
 function getFloorplanWallThickness(wall: WallNode): number {
@@ -2064,19 +1782,6 @@ function getFloorplanWall(wall: WallNode): WallNode {
   }
 }
 
-type WallMeasurementOverlay = {
-  wallId: WallNode['id']
-  dimensionLineEnd: { x1: number; y1: number; x2: number; y2: number }
-  dimensionLineStart: { x1: number; y1: number; x2: number; y2: number }
-  extensionStart: { x1: number; y1: number; x2: number; y2: number }
-  extensionEnd: { x1: number; y1: number; x2: number; y2: number }
-  label: string
-  labelX: number
-  labelY: number
-  labelAngleDeg: number
-  isSelected?: boolean
-}
-
 function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
   if (unit === 'imperial') {
     const feet = value * 3.280_84
@@ -2145,58 +1850,13 @@ function formatArea(areaSqM: number, unit: 'metric' | 'imperial') {
   )
 }
 
-function FloorplanMeasurementLine({
-  palette,
-  segment,
-  isSelected,
-}: {
-  palette: FloorplanPalette
-  segment: { x1: number; y1: number; x2: number; y2: number }
-  isSelected?: boolean
-}) {
-  const lineOpacity = isSelected
-    ? FLOORPLAN_MEASUREMENT_LINE_OPACITY
-    : FLOORPLAN_MEASUREMENT_LINE_OPACITY * 0.4
-  const outlineOpacity = isSelected
-    ? FLOORPLAN_MEASUREMENT_LINE_OUTLINE_OPACITY
-    : FLOORPLAN_MEASUREMENT_LINE_OUTLINE_OPACITY * 0.4
-
-  return (
-    <>
-      <line
-        shapeRendering="geometricPrecision"
-        stroke={palette.surface}
-        strokeLinecap="round"
-        strokeOpacity={outlineOpacity}
-        strokeWidth={FLOORPLAN_MEASUREMENT_LINE_OUTLINE_WIDTH}
-        vectorEffect="non-scaling-stroke"
-        x1={segment.x1}
-        x2={segment.x2}
-        y1={segment.y1}
-        y2={segment.y2}
-      />
-      <line
-        shapeRendering="geometricPrecision"
-        stroke={palette.measurementStroke}
-        strokeLinecap="round"
-        strokeOpacity={lineOpacity}
-        strokeWidth={FLOORPLAN_MEASUREMENT_LINE_WIDTH}
-        vectorEffect="non-scaling-stroke"
-        x1={segment.x1}
-        x2={segment.x2}
-        y1={segment.y1}
-        y2={segment.y2}
-      />
-    </>
-  )
-}
 
 function getWallMeasurementOverlay(
   wall: WallNode,
   centerX: number,
   centerZ: number,
   unit: 'metric' | 'imperial',
-): WallMeasurementOverlay | null {
+): LinearMeasurementOverlay | null {
   const dx = wall.end[0] - wall.start[0]
   const dz = wall.end[1] - wall.start[1]
   const length = getWallCurveLength(wall)
@@ -2271,30 +1931,500 @@ function getWallMeasurementOverlay(
   )
   const labelX = (dimensionLine.x1 + dimensionLine.x2) / 2
   const labelY = (dimensionLine.y1 + dimensionLine.y2) / 2
-  const dimensionLineStart = {
-    x1: dimensionLine.x1,
-    y1: dimensionLine.y1,
-    x2: labelX - dirSvgX * labelGapHalf,
-    y2: labelY - dirSvgY * labelGapHalf,
-  }
-  const dimensionLineEnd = {
-    x1: labelX + dirSvgX * labelGapHalf,
-    y1: labelY + dirSvgY * labelGapHalf,
-    x2: dimensionLine.x2,
-    y2: dimensionLine.y2,
-  }
+  const dimensionLineStart = {
+    x1: dimensionLine.x1,
+    y1: dimensionLine.y1,
+    x2: labelX - dirSvgX * labelGapHalf,
+    y2: labelY - dirSvgY * labelGapHalf,
+  }
+  const dimensionLineEnd = {
+    x1: labelX + dirSvgX * labelGapHalf,
+    y1: labelY + dirSvgY * labelGapHalf,
+    x2: dimensionLine.x2,
+    y2: dimensionLine.y2,
+  }
+
+  return {
+    id: `${wall.id}:centerline`,
+    dimensionLineEnd,
+    dimensionLineStart,
+    extensionStart,
+    extensionEnd,
+    label,
+    labelX,
+    labelY,
+    labelAngleDeg,
+  }
+}
+
+function getLinearMeasurementOverlay(
+  id: string,
+  start: Point2D,
+  end: Point2D,
+  label: string,
+  options?: {
+    extensionOvershoot?: number
+    offsetDistance?: number
+    offsetVector?: Point2D
+  },
+): LinearMeasurementOverlay | null {
+  const extensionOvershoot =
+    options?.extensionOvershoot ?? FLOORPLAN_MEASUREMENT_EXTENSION_OVERSHOOT
+  const offsetDistance = options?.offsetDistance ?? 0
+  const offsetVector = options?.offsetVector
+  const offsetStart =
+    offsetVector && offsetDistance !== 0
+      ? {
+          x: start.x + offsetVector.x * offsetDistance,
+          y: start.y + offsetVector.y * offsetDistance,
+        }
+      : start
+  const offsetEnd =
+    offsetVector && offsetDistance !== 0
+      ? {
+          x: end.x + offsetVector.x * offsetDistance,
+          y: end.y + offsetVector.y * offsetDistance,
+        }
+      : end
+  const dimensionLine = {
+    x1: toSvgX(offsetStart.x),
+    y1: toSvgY(offsetStart.y),
+    x2: toSvgX(offsetEnd.x),
+    y2: toSvgY(offsetEnd.y),
+  }
+
+  const svgDx = dimensionLine.x2 - dimensionLine.x1
+  const svgDy = dimensionLine.y2 - dimensionLine.y1
+  const svgLength = Math.hypot(svgDx, svgDy)
+  let labelAngleDeg = (Math.atan2(svgDy, svgDx) * 180) / Math.PI
+
+  if (labelAngleDeg > 90) {
+    labelAngleDeg -= 180
+  } else if (labelAngleDeg <= -90) {
+    labelAngleDeg += 180
+  }
+
+  if (svgLength < 1e-6) {
+    return null
+  }
+
+  const dirSvgX = svgDx / svgLength
+  const dirSvgY = svgDy / svgLength
+  const labelGapHalf = Math.min(
+    FLOORPLAN_MEASUREMENT_LABEL_GAP / 2,
+    Math.max(0, svgLength / 2 - FLOORPLAN_MEASUREMENT_LABEL_LINE_PADDING),
+  )
+  const labelX = (dimensionLine.x1 + dimensionLine.x2) / 2
+  const labelY = (dimensionLine.y1 + dimensionLine.y2) / 2
 
   return {
-    wallId: wall.id,
-    dimensionLineEnd,
-    dimensionLineStart,
-    extensionStart,
-    extensionEnd,
+    id,
+    dimensionLineStart: {
+      x1: dimensionLine.x1,
+      y1: dimensionLine.y1,
+      x2: labelX - dirSvgX * labelGapHalf,
+      y2: labelY - dirSvgY * labelGapHalf,
+    },
+    dimensionLineEnd: {
+      x1: labelX + dirSvgX * labelGapHalf,
+      y1: labelY + dirSvgY * labelGapHalf,
+      x2: dimensionLine.x2,
+      y2: dimensionLine.y2,
+    },
+    extensionStart: {
+      x1: toSvgX(start.x),
+      y1: toSvgY(start.y),
+      x2: toSvgX(
+        offsetVector
+          ? start.x +
+              offsetVector.x *
+                (offsetDistance + extensionOvershoot)
+          : start.x,
+      ),
+      y2: toSvgY(
+        offsetVector
+          ? start.y +
+              offsetVector.y *
+                (offsetDistance + extensionOvershoot)
+          : start.y,
+      ),
+    },
+    extensionEnd: {
+      x1: toSvgX(end.x),
+      y1: toSvgY(end.y),
+      x2: toSvgX(
+        offsetVector
+          ? end.x + offsetVector.x * (offsetDistance + extensionOvershoot)
+          : end.x,
+      ),
+      y2: toSvgY(
+        offsetVector
+          ? end.y + offsetVector.y * (offsetDistance + extensionOvershoot)
+          : end.y,
+      ),
+    },
     label,
     labelX,
     labelY,
     labelAngleDeg,
+    isSelected: true,
+  }
+}
+
+type WallFaceLine = {
+  start: Point2D
+  end: Point2D
+}
+
+type WallMeasurementFaceContext = {
+  outerFace: WallFaceLine
+  innerFace: WallFaceLine
+  outwardNormal: Point2D
+  inwardNormal: Point2D
+}
+
+function getWallFaceLines(polygon: Point2D[], wall: WallNode): { left: WallFaceLine; right: WallFaceLine } | null {
+  if (polygon.length < 4 || isCurvedWall(wall)) {
+    return null
+  }
+
+  const startRight = polygon[0]
+  const endRight = polygon[1]
+  const hasEndCenterPoint = pointMatchesWallPlanPoint(polygon[2], wall.end)
+  const endLeft = polygon[hasEndCenterPoint ? 3 : 2]
+  const lastPoint = polygon[polygon.length - 1]
+  const hasStartCenterPoint = pointMatchesWallPlanPoint(lastPoint, wall.start)
+  const startLeft = polygon[hasStartCenterPoint ? polygon.length - 2 : polygon.length - 1]
+
+  if (!(startRight && endRight && endLeft && startLeft)) {
+    return null
+  }
+
+  return {
+    left: {
+      start: startLeft,
+      end: endLeft,
+    },
+    right: {
+      start: startRight,
+      end: endRight,
+    },
+  }
+}
+
+function getLineMidpoint(line: WallFaceLine): Point2D {
+  return {
+    x: (line.start.x + line.end.x) / 2,
+    y: (line.start.y + line.end.y) / 2,
+  }
+}
+
+function getWallMeasurementFaceContext(
+  selectedWallEntry: WallPolygonEntry,
+  wallPolygons: WallPolygonEntry[],
+): WallMeasurementFaceContext | null {
+  let minX = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let minY = Number.POSITIVE_INFINITY
+  let maxY = Number.NEGATIVE_INFINITY
+
+  for (const { wall } of wallPolygons) {
+    minX = Math.min(minX, wall.start[0], wall.end[0])
+    maxX = Math.max(maxX, wall.start[0], wall.end[0])
+    minY = Math.min(minY, wall.start[1], wall.end[1])
+    maxY = Math.max(maxY, wall.start[1], wall.end[1])
+  }
+
+  const centerX = minX === Number.POSITIVE_INFINITY ? 0 : (minX + maxX) / 2
+  const centerY = minY === Number.POSITIVE_INFINITY ? 0 : (minY + maxY) / 2
+  const { wall, polygon } = selectedWallEntry
+  const faceLines = getWallFaceLines(polygon, wall)
+
+  if (!faceLines) {
+    return null
+  }
+
+  const dx = wall.end[0] - wall.start[0]
+  const dy = wall.end[1] - wall.start[1]
+  const length = Math.hypot(dx, dy)
+
+  if (length < 1e-6) {
+    return null
+  }
+
+  const wallMidpoint = {
+    x: (wall.start[0] + wall.end[0]) / 2,
+    y: (wall.start[1] + wall.end[1]) / 2,
+  }
+  const normal = { x: -dy / length, y: dx / length }
+  const fromCenter = {
+    x: wallMidpoint.x - centerX,
+    y: wallMidpoint.y - centerY,
+  }
+  const outwardNormal =
+    fromCenter.x * normal.x + fromCenter.y * normal.y >= 0
+      ? normal
+      : { x: -normal.x, y: -normal.y }
+  const rightMidpoint = getLineMidpoint(faceLines.right)
+  const leftMidpoint = getLineMidpoint(faceLines.left)
+  const rightScore =
+    (rightMidpoint.x - wallMidpoint.x) * outwardNormal.x +
+    (rightMidpoint.y - wallMidpoint.y) * outwardNormal.y
+  const leftScore =
+    (leftMidpoint.x - wallMidpoint.x) * outwardNormal.x +
+    (leftMidpoint.y - wallMidpoint.y) * outwardNormal.y
+  const outerFace = rightScore >= leftScore ? faceLines.right : faceLines.left
+  const innerFace = outerFace === faceLines.right ? faceLines.left : faceLines.right
+
+  return {
+    outerFace,
+    innerFace,
+    outwardNormal,
+    inwardNormal: { x: -outwardNormal.x, y: -outwardNormal.y },
+  }
+}
+
+function getAdjacentOpeningBounds(
+  current: {
+    id: OpeningNode['id']
+    wallId: WallNode['id']
+    startDistance: number
+    endDistance: number
+  },
+  openings: OpeningPolygonEntry[],
+) {
+  let leftBoundary: number | null = null
+  let rightBoundary: number | null = null
+
+  for (const { opening } of openings) {
+    if (opening.parentId !== current.wallId || opening.id === current.id) {
+      continue
+    }
+
+    const startDistance = opening.position[0] - opening.width / 2
+    const endDistance = opening.position[0] + opening.width / 2
+
+    if (endDistance <= current.startDistance && (leftBoundary === null || endDistance > leftBoundary)) {
+      leftBoundary = endDistance
+    }
+
+    if (
+      startDistance >= current.endDistance &&
+      (rightBoundary === null || startDistance < rightBoundary)
+    ) {
+      rightBoundary = startDistance
+    }
+  }
+
+  return {
+    leftBoundary,
+    rightBoundary,
+  }
+}
+
+function getSelectedWallMeasurementOverlays(
+  selectedWallEntry: WallPolygonEntry,
+  wallPolygons: WallPolygonEntry[],
+  unit: 'metric' | 'imperial',
+): LinearMeasurementOverlay[] {
+  const { wall } = selectedWallEntry
+
+  if (isCurvedWall(wall)) {
+    let minX = Number.POSITIVE_INFINITY
+    let maxX = Number.NEGATIVE_INFINITY
+    let minY = Number.POSITIVE_INFINITY
+    let maxY = Number.NEGATIVE_INFINITY
+
+    for (const { wall: candidateWall } of wallPolygons) {
+      minX = Math.min(minX, candidateWall.start[0], candidateWall.end[0])
+      maxX = Math.max(maxX, candidateWall.start[0], candidateWall.end[0])
+      minY = Math.min(minY, candidateWall.start[1], candidateWall.end[1])
+      maxY = Math.max(maxY, candidateWall.start[1], candidateWall.end[1])
+    }
+
+    const centerX = minX === Number.POSITIVE_INFINITY ? 0 : (minX + maxX) / 2
+    const centerY = minY === Number.POSITIVE_INFINITY ? 0 : (minY + maxY) / 2
+    const overlay = getWallMeasurementOverlay(wall, centerX, centerY, unit)
+    return overlay ? [overlay] : []
+  }
+
+  const faceContext = getWallMeasurementFaceContext(selectedWallEntry, wallPolygons)
+  if (!faceContext) {
+    let minX = Number.POSITIVE_INFINITY
+    let maxX = Number.NEGATIVE_INFINITY
+    let minY = Number.POSITIVE_INFINITY
+    let maxY = Number.NEGATIVE_INFINITY
+
+    for (const { wall: candidateWall } of wallPolygons) {
+      minX = Math.min(minX, candidateWall.start[0], candidateWall.end[0])
+      maxX = Math.max(maxX, candidateWall.start[0], candidateWall.end[0])
+      minY = Math.min(minY, candidateWall.start[1], candidateWall.end[1])
+      maxY = Math.max(maxY, candidateWall.start[1], candidateWall.end[1])
+    }
+
+    const centerX = minX === Number.POSITIVE_INFINITY ? 0 : (minX + maxX) / 2
+    const centerY = minY === Number.POSITIVE_INFINITY ? 0 : (minY + maxY) / 2
+    const overlay = getWallMeasurementOverlay(wall, centerX, centerY, unit)
+    return overlay ? [overlay] : []
+  }
+
+  const { outerFace, innerFace, outwardNormal, inwardNormal } = faceContext
+  const outerLength = Math.hypot(outerFace.end.x - outerFace.start.x, outerFace.end.y - outerFace.start.y)
+  const innerLength = Math.hypot(innerFace.end.x - innerFace.start.x, innerFace.end.y - innerFace.start.y)
+  const overlays: LinearMeasurementOverlay[] = []
+
+  if (outerLength >= 0.1) {
+    const overlay = getLinearMeasurementOverlay(
+      `${wall.id}:outer-face`,
+      outerFace.start,
+      outerFace.end,
+      formatMeasurement(outerLength, unit),
+      {
+        offsetDistance: FLOORPLAN_WALL_OUTER_MEASUREMENT_OFFSET,
+        offsetVector: outwardNormal,
+      },
+    )
+
+    if (overlay) {
+      overlays.push({
+        ...overlay,
+        extensionStroke: FLOORPLAN_WALL_OUTER_MEASUREMENT_EXTENSION,
+        labelFill: FLOORPLAN_WALL_OUTER_MEASUREMENT_TEXT,
+        stroke: FLOORPLAN_WALL_OUTER_MEASUREMENT_STROKE,
+      })
+    }
+  }
+
+  if (innerLength >= 0.1) {
+    const overlay = getLinearMeasurementOverlay(
+      `${wall.id}:inner-face`,
+      innerFace.start,
+      innerFace.end,
+      formatMeasurement(innerLength, unit),
+      {
+        offsetDistance: FLOORPLAN_WALL_INNER_MEASUREMENT_OFFSET,
+        offsetVector: inwardNormal,
+      },
+    )
+
+    if (overlay) {
+      overlays.push({
+        ...overlay,
+        extensionStroke: FLOORPLAN_WALL_INNER_MEASUREMENT_EXTENSION,
+        labelFill: FLOORPLAN_WALL_INNER_MEASUREMENT_TEXT,
+        stroke: FLOORPLAN_WALL_INNER_MEASUREMENT_STROKE,
+      })
+    }
+  }
+
+  return overlays
+}
+
+function getItemDimensionMeasurementOverlays(
+  itemEntry: FloorplanItemEntry,
+  unit: 'metric' | 'imperial',
+): LinearMeasurementOverlay[] {
+  const itemMetadata =
+    typeof itemEntry.item.metadata === 'object' &&
+    itemEntry.item.metadata !== null &&
+    !Array.isArray(itemEntry.item.metadata)
+      ? (itemEntry.item.metadata as Record<string, unknown>)
+      : null
+
+  if (itemMetadata?.isTransient !== true) {
+    return []
+  }
+
+  const polygon = itemEntry.polygon
+  if (polygon.length < 4) {
+    return []
+  }
+
+  const centroid = polygonCentroid(polygon)
+  const configuredWidth = formatMeasurement(itemEntry.item.scale[0] * itemEntry.item.asset.dimensions[0], unit)
+  const configuredDepth = formatMeasurement(itemEntry.item.scale[2] * itemEntry.item.asset.dimensions[2], unit)
+  const buildSideOverlay = (id: string, start: Point2D, end: Point2D) => {
+    const edgeVector = {
+      x: end.x - start.x,
+      y: end.y - start.y,
+    }
+    const tangent = normalizePlanVector(edgeVector)
+    if (!tangent) {
+      return null
+    }
+
+    let outwardNormal: Point2D = {
+      x: -tangent.y,
+      y: tangent.x,
+    }
+    const midpoint = {
+      x: (start.x + end.x) / 2,
+      y: (start.y + end.y) / 2,
+    }
+    const centroidVector = {
+      x: midpoint.x - centroid.x,
+      y: midpoint.y - centroid.y,
+    }
+
+    if (dotPlanVectors(outwardNormal, centroidVector) < 0) {
+      outwardNormal = {
+        x: -outwardNormal.x,
+        y: -outwardNormal.y,
+      }
+    }
+
+    const overlay = getLinearMeasurementOverlay(
+      id,
+      start,
+      end,
+      id.includes(':width') ? configuredWidth : configuredDepth,
+      {
+        extensionOvershoot: 0,
+        offsetDistance: FLOORPLAN_ITEM_DIMENSION_OFFSET,
+        offsetVector: outwardNormal,
+      },
+    )
+
+    return overlay
+      ? {
+          dashedExtensions: false,
+          ...overlay,
+          isSelected: true,
+          showTicks: false,
+        }
+      : null
   }
+
+  const widthCandidates = [
+    polygon[0] && polygon[1]
+      ? buildSideOverlay(`${itemEntry.item.id}:width-a`, polygon[0], polygon[1])
+      : null,
+    polygon[2] && polygon[3]
+      ? buildSideOverlay(`${itemEntry.item.id}:width-b`, polygon[3], polygon[2])
+      : null,
+  ].filter((overlay): overlay is LinearMeasurementOverlay => overlay !== null)
+
+  const depthCandidates = [
+    polygon[1] && polygon[2]
+      ? buildSideOverlay(`${itemEntry.item.id}:depth-a`, polygon[1], polygon[2])
+      : null,
+    polygon[0] && polygon[3]
+      ? buildSideOverlay(`${itemEntry.item.id}:depth-b`, polygon[0], polygon[3])
+      : null,
+  ].filter((overlay): overlay is LinearMeasurementOverlay => overlay !== null)
+
+  const widthOverlay =
+    widthCandidates.length > 0
+      ? widthCandidates.reduce((best, current) => (current.labelY > best.labelY ? current : best))
+      : null
+  const depthOverlay =
+    depthCandidates.length > 0
+      ? depthCandidates.reduce((best, current) => (current.labelX < best.labelX ? current : best))
+      : null
+
+  return [widthOverlay, depthOverlay].filter(
+    (overlay): overlay is LinearMeasurementOverlay => overlay !== null,
+  )
 }
 
 function getOpeningFootprint(wall: WallNode, node: WindowNode | DoorNode): Point2D[] {
@@ -2650,6 +2780,107 @@ function FloorplanGuideImage({
   )
 }
 
+function worldToBuildingLocalPlanPoint(
+  worldPosition: [number, number, number],
+  buildingOrigin: [number, number, number],
+  buildingRotationY: number,
+): Point2D {
+  const dx = worldPosition[0] - buildingOrigin[0]
+  const dz = worldPosition[2] - buildingOrigin[2]
+  const cos = Math.cos(buildingRotationY)
+  const sin = Math.sin(buildingRotationY)
+
+  return {
+    x: dx * cos + dz * sin,
+    y: -dx * sin + dz * cos,
+  }
+}
+
+function getRoofSegmentCenter(
+  roof: RoofNode,
+  segment: RoofSegmentNode,
+  worldPositionOverride?: Point2D,
+): Point2D {
+  if (worldPositionOverride) {
+    return worldPositionOverride
+  }
+
+  const cos = Math.cos(roof.rotation)
+  const sin = Math.sin(roof.rotation)
+  const localX = segment.position[0]
+  const localZ = segment.position[2]
+
+  return {
+    x: roof.position[0] + localX * cos - localZ * sin,
+    y: roof.position[2] + localX * sin + localZ * cos,
+  }
+}
+
+function getRoofSegmentPolygon(
+  roof: RoofNode,
+  segment: RoofSegmentNode,
+  options?: {
+    localRotation?: number
+    worldPositionOverride?: Point2D
+  },
+): Point2D[] {
+  const center = getRoofSegmentCenter(roof, segment, options?.worldPositionOverride)
+  const rotation = roof.rotation + (options?.localRotation ?? segment.rotation)
+  const cos = Math.cos(rotation)
+  const sin = Math.sin(rotation)
+  const halfWidth = segment.width / 2
+  const halfDepth = segment.depth / 2
+
+  const corners: Array<[number, number]> = [
+    [-halfWidth, -halfDepth],
+    [halfWidth, -halfDepth],
+    [halfWidth, halfDepth],
+    [-halfWidth, halfDepth],
+  ]
+
+  return corners.map(([x, y]) => ({
+    x: center.x + x * cos - y * sin,
+    y: center.y + x * sin + y * cos,
+  }))
+}
+
+function getRoofSegmentRidgeLine(
+  roof: RoofNode,
+  segment: RoofSegmentNode,
+  options?: {
+    localRotation?: number
+    worldPositionOverride?: Point2D
+  },
+): FloorplanLineSegment | null {
+  if (segment.roofType === 'flat') {
+    return null
+  }
+
+  const center = getRoofSegmentCenter(roof, segment, options?.worldPositionOverride)
+  const rotation = roof.rotation + (options?.localRotation ?? segment.rotation)
+  const ridgeAxis =
+    segment.roofType === 'gable' || segment.roofType === 'gambrel'
+      ? 'x'
+      : segment.roofType === 'dutch'
+        ? segment.width >= segment.depth
+          ? 'x'
+          : 'z'
+        : 'z'
+  const axisAngle = ridgeAxis === 'x' ? rotation : rotation + Math.PI / 2
+  const halfSpan = ridgeAxis === 'x' ? segment.width / 2 : segment.depth / 2
+
+  return {
+    start: {
+      x: center.x - halfSpan * Math.cos(axisAngle),
+      y: center.y - halfSpan * Math.sin(axisAngle),
+    },
+    end: {
+      x: center.x + halfSpan * Math.cos(axisAngle),
+      y: center.y + halfSpan * Math.sin(axisAngle),
+    },
+  }
+}
+
 const FloorplanGridLayer = memo(function FloorplanGridLayer({
   majorGridPath,
   minorGridPath,
@@ -2913,11 +3144,17 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
   canFocusGeometry,
   canSelectGeometry,
   canSelectSlabs,
+  canSelectCeilings,
+  ceilingPolygons,
   highlightedIdSet,
+  hoveredCeilingId,
   hoveredSlabId,
   hoveredOpeningId,
   hoveredWallId,
   isDeleteMode,
+  onCeilingDoubleClick,
+  onCeilingHoverChange,
+  onCeilingSelect,
   onSlabDoubleClick,
   onSlabHoverChange,
   onSlabSelect,
@@ -2933,15 +3170,22 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
   selectedIdSet,
   slabPolygons,
   wallPolygons,
+  wallSelectionHatchId,
   unit,
 }: {
   canFocusGeometry: boolean
   canSelectSlabs: boolean
+  canSelectCeilings: boolean
   canSelectGeometry: boolean
+  ceilingPolygons: CeilingPolygonEntry[]
   highlightedIdSet: ReadonlySet<string>
+  hoveredCeilingId: CeilingNode['id'] | null
   hoveredSlabId: SlabNode['id'] | null
   hoveredOpeningId: OpeningNode['id'] | null
   isDeleteMode: boolean
+  onCeilingDoubleClick: (ceiling: CeilingNode) => void
+  onCeilingHoverChange: (ceilingId: CeilingNode['id'] | null) => void
+  onCeilingSelect: (ceilingId: CeilingNode['id'], event: ReactMouseEvent<SVGElement>) => void
   onSlabDoubleClick: (slab: SlabNode) => void
   onSlabHoverChange: (slabId: SlabNode['id'] | null) => void
   onSlabSelect: (slabId: SlabNode['id'], event: ReactMouseEvent<SVGElement>) => void
@@ -2958,27 +3202,14 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
   selectedIdSet: ReadonlySet<string>
   slabPolygons: SlabPolygonEntry[]
   wallPolygons: WallPolygonEntry[]
+  wallSelectionHatchId: string
   unit: 'metric' | 'imperial'
 }) {
-  let minX = Number.POSITIVE_INFINITY,
-    maxX = Number.NEGATIVE_INFINITY,
-    minZ = Number.POSITIVE_INFINITY,
-    maxZ = Number.NEGATIVE_INFINITY
-  for (const { wall } of wallPolygons) {
-    minX = Math.min(minX, wall.start[0], wall.end[0])
-    maxX = Math.max(maxX, wall.start[0], wall.end[0])
-    minZ = Math.min(minZ, wall.start[1], wall.end[1])
-    maxZ = Math.max(maxZ, wall.start[1], wall.end[1])
-  }
-  const centerX = minX === Number.POSITIVE_INFINITY ? 0 : (minX + maxX) / 2
-  const centerZ = minZ === Number.POSITIVE_INFINITY ? 0 : (minZ + maxZ) / 2
-  const wallMeasurements = wallPolygons.flatMap(({ wall }) => {
-    const measurement = getWallMeasurementOverlay(wall, centerX, centerZ, unit)
-    if (measurement) {
-      measurement.isSelected = selectedIdSet.has(wall.id)
-    }
-    return measurement ? [measurement] : []
-  })
+  const selectedWallEntries = wallPolygons.filter(({ wall }) => selectedIdSet.has(wall.id))
+  const wallMeasurements =
+    selectedIdSet.size === 1 && selectedWallEntries.length === 1
+      ? getSelectedWallMeasurementOverlays(selectedWallEntries[0]!, wallPolygons, unit)
+      : []
 
   return (
     <>
@@ -2986,6 +3217,13 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
         const isSelected = selectedIdSet.has(slab.id)
         const isHighlighted = highlightedIdSet.has(slab.id)
         const isDeleteHovered = isDeleteMode && hoveredSlabId === slab.id
+        const showSelectedSlabStyle = isSelected || isHighlighted
+        const slabBorderStroke = isDeleteHovered
+          ? palette.deleteStroke
+          : showSelectedSlabStyle
+            ? palette.selectedSlabStroke
+            : palette.slabStroke
+        const slabBorderWidth = showSelectedSlabStyle ? '0.065' : '0.05'
         let slabLabel = null
 
         if (isSelected) {
@@ -3016,23 +3254,87 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
         }
 
         return (
-          <g key={slab.id}>
+          <g key={slab.id}>
+            <path
+              clipRule="evenodd"
+              d={path}
+              fill={
+                isDeleteHovered
+                  ? palette.deleteFill
+                  : showSelectedSlabStyle
+                    ? palette.selectedSlabFill
+                    : palette.slabFill
+              }
+              fillRule="evenodd"
+              onClick={
+                canSelectSlabs
+                  ? (event) => {
+                      event.stopPropagation()
+                      onSlabSelect(slab.id, event)
+                    }
+                  : undefined
+              }
+              onDoubleClick={
+                canFocusGeometry
+                  ? (event) => {
+                      event.stopPropagation()
+                      onSlabDoubleClick(slab)
+                    }
+                  : undefined
+              }
+              onPointerEnter={canSelectSlabs ? () => onSlabHoverChange(slab.id) : undefined}
+              onPointerLeave={canSelectSlabs ? () => onSlabHoverChange(null) : undefined}
+              pointerEvents={canSelectSlabs ? undefined : 'none'}
+              style={canSelectSlabs ? { cursor: EDITOR_CURSOR } : undefined}
+              stroke="none"
+            />
+            <path
+              clipRule="evenodd"
+              d={path}
+              fill="none"
+              fillRule="evenodd"
+              pointerEvents="none"
+              stroke={slabBorderStroke}
+              strokeLinejoin="round"
+              strokeOpacity={isDeleteHovered || isHighlighted ? 0.96 : 0.88}
+              strokeWidth={slabBorderWidth}
+              vectorEffect="non-scaling-stroke"
+            />
+            {slabLabel}
+          </g>
+        )
+      })}
+
+      {ceilingPolygons.map(({ ceiling, path }) => {
+        const isSelected = selectedIdSet.has(ceiling.id)
+        const isHighlighted = highlightedIdSet.has(ceiling.id)
+        const isDeleteHovered = isDeleteMode && hoveredCeilingId === ceiling.id
+        const showSelectedCeilingStyle = isSelected || isHighlighted
+        const ceilingBorderStroke = isDeleteHovered
+          ? palette.deleteStroke
+          : showSelectedCeilingStyle
+            ? palette.selectedCeilingStroke
+            : palette.ceilingStroke
+        const ceilingBorderWidth = showSelectedCeilingStyle ? '0.065' : '0.05'
+
+        return (
+          <g key={ceiling.id}>
             <path
               clipRule="evenodd"
               d={path}
               fill={
                 isDeleteHovered
                   ? palette.deleteFill
-                  : isHighlighted
-                    ? palette.selectedSlabFill
-                    : palette.slabFill
+                  : showSelectedCeilingStyle
+                    ? palette.selectedCeilingFill
+                    : palette.ceilingFill
               }
               fillRule="evenodd"
               onClick={
-                canSelectSlabs
+                canSelectCeilings
                   ? (event) => {
                       event.stopPropagation()
-                      onSlabSelect(slab.id, event)
+                      onCeilingSelect(ceiling.id, event)
                     }
                   : undefined
               }
@@ -3040,26 +3342,29 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
                 canFocusGeometry
                   ? (event) => {
                       event.stopPropagation()
-                      onSlabDoubleClick(slab)
+                      onCeilingDoubleClick(ceiling)
                     }
                   : undefined
               }
-              onPointerEnter={canSelectSlabs ? () => onSlabHoverChange(slab.id) : undefined}
-              onPointerLeave={canSelectSlabs ? () => onSlabHoverChange(null) : undefined}
-              pointerEvents={canSelectSlabs ? undefined : 'none'}
-              stroke={
-                isDeleteHovered
-                  ? palette.deleteStroke
-                  : isHighlighted
-                    ? palette.selectedStroke
-                    : palette.slabStroke
-              }
-              strokeOpacity={isDeleteHovered || isHighlighted ? 0.92 : 0.84}
-              strokeWidth="0.05"
-              style={canSelectSlabs ? { cursor: EDITOR_CURSOR } : undefined}
+              onPointerEnter={canSelectCeilings ? () => onCeilingHoverChange(ceiling.id) : undefined}
+              onPointerLeave={canSelectCeilings ? () => onCeilingHoverChange(null) : undefined}
+              pointerEvents={canSelectCeilings ? undefined : 'none'}
+              style={canSelectCeilings ? { cursor: EDITOR_CURSOR } : undefined}
+              stroke="none"
+            />
+            <path
+              clipRule="evenodd"
+              d={path}
+              fill="none"
+              fillRule="evenodd"
+              pointerEvents="none"
+              stroke={ceilingBorderStroke}
+              strokeDasharray="0.16 0.12"
+              strokeLinejoin="round"
+              strokeOpacity={isDeleteHovered || isHighlighted ? 0.96 : 0.88}
+              strokeWidth={ceilingBorderWidth}
               vectorEffect="non-scaling-stroke"
             />
-            {slabLabel}
           </g>
         )
       })}
@@ -3069,14 +3374,12 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
         const isHighlighted = highlightedIdSet.has(wall.id)
         const isHovered = canSelectGeometry && hoveredWallId === wall.id
         const isDeleteHovered = isDeleteMode && isHovered
-        const hoverStroke = isDeleteHovered
-          ? palette.deleteWallHoverStroke
-          : isHighlighted
+        const showSelectedWallChrome = isSelected || isHighlighted
+        const wallStroke = isDeleteHovered
+          ? palette.deleteStroke
+          : showSelectedWallChrome
             ? palette.selectedStroke
-            : palette.wallHoverStroke
-        const hoverGlowOpacity = isDeleteHovered ? 0.14 : isHighlighted ? 0.22 : 0.16
-        const hoverRingOpacity = isDeleteHovered ? 0.38 : isHighlighted ? 0.6 : 0.48
-        const hoverSidePaths = getWallHoverSidePaths(polygon, wall)
+            : palette.wallStroke
 
         return (
           <g
@@ -3084,42 +3387,6 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
             onPointerEnter={canSelectGeometry ? () => onWallHoverChange(wall.id) : undefined}
             onPointerLeave={canSelectGeometry ? () => onWallHoverChange(null) : undefined}
           >
-            {hoverSidePaths?.map((pathData, index) => (
-              <path
-                d={pathData}
-                fill="none"
-                key={`glow-${index}`}
-                pointerEvents="none"
-                stroke={hoverStroke}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeOpacity={hoverGlowOpacity}
-                strokeWidth={FLOORPLAN_WALL_HOVER_GLOW_STROKE_WIDTH}
-                style={{
-                  opacity: isHovered ? 1 : 0,
-                  transition: FLOORPLAN_HOVER_TRANSITION,
-                }}
-                vectorEffect="non-scaling-stroke"
-              />
-            ))}
-            {hoverSidePaths?.map((pathData, index) => (
-              <path
-                d={pathData}
-                fill="none"
-                key={`ring-${index}`}
-                pointerEvents="none"
-                stroke={hoverStroke}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeOpacity={hoverRingOpacity}
-                strokeWidth={FLOORPLAN_WALL_HOVER_RING_STROKE_WIDTH}
-                style={{
-                  opacity: isHovered ? 1 : 0,
-                  transition: FLOORPLAN_HOVER_TRANSITION,
-                }}
-                vectorEffect="non-scaling-stroke"
-              />
-            ))}
             {canSelectGeometry && (
               <line
                 onClick={(event) => {
@@ -3146,9 +3413,7 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
               fill={
                 isDeleteHovered
                   ? palette.deleteWallFill
-                  : isHighlighted
-                    ? palette.selectedFill
-                    : palette.wallFill
+                  : palette.wallFill
               }
               onClick={
                 canSelectGeometry
@@ -3167,14 +3432,20 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
                   : undefined
               }
               points={points}
-              stroke={
-                isDeleteHovered ? palette.deleteStroke : isHighlighted ? 'none' : palette.wallStroke
-              }
+              stroke={wallStroke}
               strokeOpacity={1}
-              strokeWidth="0.06"
+              strokeWidth={showSelectedWallChrome ? '1.5' : '1'}
               style={{ cursor: EDITOR_CURSOR }}
               vectorEffect="non-scaling-stroke"
             />
+            {isSelected && !isDeleteHovered ? (
+              <polygon
+                fill={`url(#${wallSelectionHatchId})`}
+                opacity={1}
+                points={points}
+                pointerEvents="none"
+              />
+            ) : null}
           </g>
         )
       })}
@@ -3184,26 +3455,59 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
         const isSelectionHighlighted = highlightedIdSet.has(opening.id)
         const isHovered = canSelectGeometry && hoveredOpeningId === opening.id
         const isDeleteHovered = isDeleteMode && isHovered
-        const isHighlighted = isHovered || isSelectionHighlighted
-        const highlightStroke = isDeleteHovered
-          ? palette.deleteStroke
-          : isSelectionHighlighted
-            ? palette.selectedStroke
-            : palette.wallHoverStroke
-        const detailStroke = isDeleteHovered
-          ? palette.deleteStroke
-          : isSelectionHighlighted
-            ? palette.surface
-            : palette.openingStroke
         const centerLine = getOpeningCenterLine(polygon)
 
         if (opening.type === 'window') {
           if (polygon.length < 4) return null
           if (!centerLine) return null
-          const windowLineStartX = toSvgX(centerLine.start.x)
-          const windowLineStartY = toSvgY(centerLine.start.y)
-          const windowLineEndX = toSvgX(centerLine.end.x)
-          const windowLineEndY = toSvgY(centerLine.end.y)
+          const [p1, p2, p3, p4] = polygon
+          const tangentDx = p2!.x - p1!.x
+          const tangentDy = p2!.y - p1!.y
+          const tangentLength = Math.hypot(tangentDx, tangentDy)
+          const normalDx = p4!.x - p1!.x
+          const normalDy = p4!.y - p1!.y
+          const normalLength = Math.hypot(normalDx, normalDy)
+
+          if (tangentLength < 1e-6 || normalLength < 1e-6) return null
+
+          const tangentX = tangentDx / tangentLength
+          const tangentY = tangentDy / tangentLength
+          const normalX = normalDx / normalLength
+          const normalY = normalDy / normalLength
+          const tangentInset = Math.min(tangentLength * 0.08, 0.12)
+          const normalInset = Math.min(normalLength * 0.22, 0.07)
+          const insetInnerStart = {
+            x: p1!.x + tangentX * tangentInset + normalX * normalInset,
+            y: p1!.y + tangentY * tangentInset + normalY * normalInset,
+          }
+          const insetInnerEnd = {
+            x: p2!.x - tangentX * tangentInset + normalX * normalInset,
+            y: p2!.y - tangentY * tangentInset + normalY * normalInset,
+          }
+          const insetOuterEnd = {
+            x: p3!.x - tangentX * tangentInset - normalX * normalInset,
+            y: p3!.y - tangentY * tangentInset - normalY * normalInset,
+          }
+          const insetOuterStart = {
+            x: p4!.x + tangentX * tangentInset - normalX * normalInset,
+            y: p4!.y + tangentY * tangentInset - normalY * normalInset,
+          }
+          const centerStart = {
+            x: (insetInnerStart.x + insetOuterStart.x) / 2,
+            y: (insetInnerStart.y + insetOuterStart.y) / 2,
+          }
+          const centerEnd = {
+            x: (insetInnerEnd.x + insetOuterEnd.x) / 2,
+            y: (insetInnerEnd.y + insetOuterEnd.y) / 2,
+          }
+          const symbolStroke =
+            isSelected || isSelectionHighlighted ? '#f97316' : 'rgba(31, 41, 55, 0.92)'
+          const symbolFill = 'rgba(255, 255, 255, 0.96)'
+          const symbolStrokeWidth = isSelected || isSelectionHighlighted ? '1.9' : '1.25'
+          const innerStrokeWidth = isSelected || isSelectionHighlighted ? '1.3' : '0.9'
+          const detailStrokeWidth = isSelected || isSelectionHighlighted ? '1.05' : '0.75'
+          const markerX = (p1!.x + p2!.x + p3!.x + p4!.x) / 4
+          const markerY = (p1!.y + p2!.y + p3!.y + p4!.y) / 4
 
           return (
             <g
@@ -3245,73 +3549,109 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
               style={{ cursor: EDITOR_CURSOR }}
             >
               {canSelectGeometry && (
-                <line
-                  pointerEvents="stroke"
+                <polygon
+                  fill="transparent"
+                  points={points}
+                  pointerEvents="all"
                   stroke="transparent"
-                  strokeLinecap="round"
                   strokeWidth={FLOORPLAN_OPENING_HIT_STROKE_WIDTH}
                   vectorEffect="non-scaling-stroke"
-                  x1={windowLineStartX}
-                  x2={windowLineEndX}
-                  y1={windowLineStartY}
-                  y2={windowLineEndY}
                 />
               )}
               <polygon
-                fill="none"
-                pointerEvents="none"
-                points={points}
-                stroke={highlightStroke}
-                strokeLinejoin="round"
-                strokeOpacity={isDeleteHovered || isSelectionHighlighted ? 0.22 : 0.16}
-                strokeWidth={FLOORPLAN_WALL_HOVER_GLOW_STROKE_WIDTH}
-                style={{
-                  opacity: isHighlighted ? 1 : 0,
-                  transition: FLOORPLAN_HOVER_TRANSITION,
-                }}
-                vectorEffect="non-scaling-stroke"
-              />
-              <polygon
-                fill="none"
-                pointerEvents="none"
-                points={points}
-                stroke={highlightStroke}
-                strokeLinejoin="round"
-                strokeOpacity={isDeleteHovered || isSelectionHighlighted ? 0.6 : 0.48}
-                strokeWidth={FLOORPLAN_WALL_HOVER_RING_STROKE_WIDTH}
-                style={{
-                  opacity: isHighlighted ? 1 : 0,
-                  transition: FLOORPLAN_HOVER_TRANSITION,
-                }}
-                vectorEffect="non-scaling-stroke"
-              />
-              <polygon
-                fill={palette.openingFill}
+                fill={isDeleteHovered ? palette.deleteFill : symbolFill}
                 points={points}
                 stroke={
                   isDeleteHovered
                     ? palette.deleteStroke
-                    : isSelectionHighlighted
-                      ? palette.selectedStroke
-                      : palette.openingStroke
+                    : symbolStroke
                 }
                 strokeOpacity={1}
-                strokeWidth={FLOORPLAN_OPENING_STROKE_WIDTH}
+                strokeWidth={symbolStrokeWidth}
+                vectorEffect="non-scaling-stroke"
               />
-              <line
+              <polygon
+                fill="none"
+                points={formatPolygonPoints([
+                  insetInnerStart,
+                  insetInnerEnd,
+                  insetOuterEnd,
+                  insetOuterStart,
+                ])}
                 stroke={
                   isDeleteHovered
                     ? palette.deleteStroke
-                    : isSelectionHighlighted
-                      ? palette.selectedStroke
-                      : detailStroke
+                    : symbolStroke
                 }
-                strokeWidth={FLOORPLAN_OPENING_DETAIL_STROKE_WIDTH}
-                x1={windowLineStartX}
-                x2={windowLineEndX}
-                y1={windowLineStartY}
-                y2={windowLineEndY}
+                strokeWidth={innerStrokeWidth}
+                vectorEffect="non-scaling-stroke"
               />
+              <line
+                stroke={isDeleteHovered ? palette.deleteStroke : symbolStroke}
+                strokeWidth={detailStrokeWidth}
+                vectorEffect="non-scaling-stroke"
+                x1={toSvgX(centerStart.x)}
+                x2={toSvgX(centerEnd.x)}
+                y1={toSvgY(centerStart.y)}
+                y2={toSvgY(centerEnd.y)}
+              />
+              {[0.25, 0.5, 0.75].map((ratio) => {
+                const topPoint = {
+                  x: insetInnerStart.x + (insetInnerEnd.x - insetInnerStart.x) * ratio,
+                  y: insetInnerStart.y + (insetInnerEnd.y - insetInnerStart.y) * ratio,
+                }
+                const bottomPoint = {
+                  x: insetOuterStart.x + (insetOuterEnd.x - insetOuterStart.x) * ratio,
+                  y: insetOuterStart.y + (insetOuterEnd.y - insetOuterStart.y) * ratio,
+                }
+                const midPoint = {
+                  x: (topPoint.x + bottomPoint.x) / 2,
+                  y: (topPoint.y + bottomPoint.y) / 2,
+                }
+                const mullionHalf = normalLength * 0.18
+
+                return (
+                  <line
+                    key={`${opening.id}-mullion-${ratio}`}
+                    stroke={isDeleteHovered ? palette.deleteStroke : symbolStroke}
+                    strokeWidth={detailStrokeWidth}
+                    vectorEffect="non-scaling-stroke"
+                    x1={toSvgX(midPoint.x - normalX * mullionHalf)}
+                    x2={toSvgX(midPoint.x + normalX * mullionHalf)}
+                    y1={toSvgY(midPoint.y - normalY * mullionHalf)}
+                    y2={toSvgY(midPoint.y + normalY * mullionHalf)}
+                  />
+                )
+              })}
+              {isSelected ? (
+                <>
+                  <circle
+                    cx={toSvgX(markerX)}
+                    cy={toSvgY(markerY)}
+                    fill="#f97316"
+                    r="0.1"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                  <circle
+                    cx={toSvgX(markerX)}
+                    cy={toSvgY(markerY)}
+                    fill="none"
+                    r="0.17"
+                    stroke="rgba(249, 115, 22, 0.4)"
+                    strokeWidth="2"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                  <circle
+                    cx={toSvgX(markerX)}
+                    cy={toSvgY(markerY)}
+                    fill="none"
+                    r="0.17"
+                    stroke="#ffffff"
+                    strokeWidth="1.5"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                </>
+              ) : null}
             </g>
           )
         }
@@ -3324,8 +3664,10 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
           const svgP2 = toSvgPoint(p2!)
           const svgP3 = toSvgPoint(p3!)
           const svgP4 = toSvgPoint(p4!)
-          const cx = (svgP1.x + svgP2.x + svgP3.x + svgP4.x) / 4
-          const cy = (svgP1.y + svgP2.y + svgP3.y + svgP4.y) / 4
+          const centerX = (p1!.x + p2!.x + p3!.x + p4!.x) / 4
+          const centerY = (p1!.y + p2!.y + p3!.y + p4!.y) / 4
+          const cx = toSvgX(centerX)
+          const cy = toSvgY(centerY)
 
           const dirX = svgP2.x - svgP1.x
           const dirY = svgP2.y - svgP1.y
@@ -3339,6 +3681,16 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
           const hingesSide = opening.hingesSide ?? 'left'
           const swingDirection = opening.swingDirection ?? 'inward'
           const width = opening.width
+          const doorColor =
+            isSelected || isSelectionHighlighted ? '#f97316' : '#3f3f46'
+          const swingColor =
+            isSelected || isSelectionHighlighted
+              ? 'rgba(249, 115, 22, 0.78)'
+              : 'rgba(63, 63, 70, 0.35)'
+          const openingFill =
+            isSelected || isSelectionHighlighted
+              ? 'rgba(249, 115, 22, 0.12)'
+              : 'rgba(255, 255, 255, 0.96)'
           const sweepFlag =
             hingesSide === 'left'
               ? swingDirection === 'inward'
@@ -3397,68 +3749,47 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
               style={{ cursor: EDITOR_CURSOR }}
             >
               {canSelectGeometry && (
-                <line
-                  pointerEvents="stroke"
+                <polygon
+                  fill="transparent"
+                  points={points}
+                  pointerEvents="all"
                   stroke="transparent"
-                  strokeLinecap="round"
                   strokeWidth={FLOORPLAN_OPENING_HIT_STROKE_WIDTH}
                   vectorEffect="non-scaling-stroke"
-                  x1={toSvgX(centerLine.start.x)}
-                  x2={toSvgX(centerLine.end.x)}
-                  y1={toSvgY(centerLine.start.y)}
-                  y2={toSvgY(centerLine.end.y)}
                 />
               )}
               <polygon
-                fill="none"
-                pointerEvents="none"
-                points={points}
-                stroke={highlightStroke}
-                strokeLinejoin="round"
-                strokeOpacity={isDeleteHovered || isSelectionHighlighted ? 0.22 : 0.16}
-                strokeWidth={FLOORPLAN_WALL_HOVER_GLOW_STROKE_WIDTH}
-                style={{
-                  opacity: isHighlighted ? 1 : 0,
-                  transition: FLOORPLAN_HOVER_TRANSITION,
-                }}
-                vectorEffect="non-scaling-stroke"
-              />
-              <polygon
-                fill="none"
-                pointerEvents="none"
-                points={points}
-                stroke={highlightStroke}
-                strokeLinejoin="round"
-                strokeOpacity={isDeleteHovered || isSelectionHighlighted ? 0.6 : 0.48}
-                strokeWidth={FLOORPLAN_WALL_HOVER_RING_STROKE_WIDTH}
-                style={{
-                  opacity: isHighlighted ? 1 : 0,
-                  transition: FLOORPLAN_HOVER_TRANSITION,
-                }}
-                vectorEffect="non-scaling-stroke"
-              />
-              <polygon
-                fill={palette.openingFill}
+                fill={isDeleteHovered ? palette.deleteFill : openingFill}
                 points={points}
                 stroke={
                   isDeleteHovered
                     ? palette.deleteStroke
-                    : isSelectionHighlighted
-                      ? palette.selectedStroke
-                      : palette.openingStroke
+                    : doorColor
                 }
                 strokeOpacity={1}
-                strokeWidth={FLOORPLAN_OPENING_STROKE_WIDTH}
+                strokeWidth={isSelected || isSelectionHighlighted ? '2.25' : '1.25'}
+                vectorEffect="non-scaling-stroke"
               />
+              {[centerLine.start, centerLine.end].map((point, index) => {
+                const svgPoint = toSvgPoint(point)
+                const jambSize = 0.18
+                return (
+                  <line
+                    key={`${opening.id}-jamb-${index}`}
+                    stroke={isDeleteHovered ? palette.deleteStroke : doorColor}
+                    strokeWidth={isSelected || isSelectionHighlighted ? '2.5' : '1.5'}
+                    vectorEffect="non-scaling-stroke"
+                    x1={svgPoint.x - px * jambSize * 0.5}
+                    x2={svgPoint.x + px * jambSize * 0.5}
+                    y1={svgPoint.y - py * jambSize * 0.5}
+                    y2={svgPoint.y + py * jambSize * 0.5}
+                  />
+                )
+              })}
               <line
-                stroke={
-                  isDeleteHovered
-                    ? palette.deleteStroke
-                    : isSelectionHighlighted
-                      ? palette.selectedStroke
-                      : detailStroke
-                }
-                strokeWidth={FLOORPLAN_OPENING_DETAIL_STROKE_WIDTH}
+                stroke={isDeleteHovered ? palette.deleteStroke : doorColor}
+                strokeWidth={isSelected || isSelectionHighlighted ? '2.5' : '1.75'}
+                vectorEffect="non-scaling-stroke"
                 x1={hx}
                 x2={ox}
                 y1={hy}
@@ -3467,76 +3798,315 @@ const FloorplanGeometryLayer = memo(function FloorplanGeometryLayer({
               <path
                 d={`M ${ox} ${oy} A ${width} ${width} 0 0 ${sweepFlag} ${ox2} ${oy2}`}
                 fill="none"
-                stroke={
-                  isDeleteHovered
-                    ? palette.deleteStroke
-                    : isSelectionHighlighted
-                      ? palette.selectedStroke
-                      : detailStroke
-                }
-                strokeDasharray="0.1 0.1"
-                strokeWidth={FLOORPLAN_OPENING_DASHED_STROKE_WIDTH}
+                stroke={isDeleteHovered ? palette.deleteStroke : swingColor}
+                strokeWidth={isSelected || isSelectionHighlighted ? '2' : '1.25'}
+                vectorEffect="non-scaling-stroke"
+              />
+              <circle
+                cx={hx}
+                cy={hy}
+                fill={isDeleteHovered ? palette.deleteStroke : doorColor}
+                r="0.055"
+                vectorEffect="non-scaling-stroke"
               />
+              {isSelected ? (
+                <>
+                  <circle
+                    cx={cx}
+                    cy={cy}
+                    fill="#f97316"
+                    r="0.1"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                  <circle
+                    cx={cx}
+                    cy={cy}
+                    fill="none"
+                    r="0.17"
+                    stroke="rgba(249, 115, 22, 0.4)"
+                    strokeWidth="2"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                  <circle
+                    cx={cx}
+                    cy={cy}
+                    fill="none"
+                    r="0.17"
+                    stroke="#ffffff"
+                    strokeWidth="1.5"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                </>
+              ) : null}
             </g>
           )
         }
 
         return null
       })}
-
-      {wallMeasurements.map((measurement) => (
-        <g
-          className="wall-dimension"
-          key={`measurement-${measurement.wallId}`}
-          pointerEvents="none"
-          style={{ userSelect: 'none' }}
-        >
-          <FloorplanMeasurementLine
-            isSelected={measurement.isSelected}
-            palette={palette}
-            segment={measurement.extensionStart}
-          />
-          <FloorplanMeasurementLine
-            isSelected={measurement.isSelected}
-            palette={palette}
-            segment={measurement.dimensionLineStart}
-          />
-          <FloorplanMeasurementLine
-            isSelected={measurement.isSelected}
-            palette={palette}
-            segment={measurement.dimensionLineEnd}
-          />
-          <FloorplanMeasurementLine
-            isSelected={measurement.isSelected}
-            palette={palette}
-            segment={measurement.extensionEnd}
-          />
-          <text
-            dominantBaseline="central"
-            fill={palette.measurementStroke}
-            fillOpacity={
-              measurement.isSelected
-                ? FLOORPLAN_MEASUREMENT_LABEL_OPACITY
-                : FLOORPLAN_MEASUREMENT_LABEL_OPACITY * 0.4
-            }
-            fontFamily="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
-            fontSize={FLOORPLAN_MEASUREMENT_LABEL_FONT_SIZE}
-            fontWeight="600"
-            paintOrder="stroke"
-            stroke={palette.surface}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeOpacity={measurement.isSelected ? 1 : 0.4}
-            strokeWidth={FLOORPLAN_MEASUREMENT_LABEL_STROKE_WIDTH}
-            textAnchor="middle"
-            transform={`rotate(${measurement.labelAngleDeg} ${measurement.labelX} ${measurement.labelY}) translate(0, -0.04)`}
-            x={measurement.labelX}
-            y={measurement.labelY}
-          >
-            {measurement.label}
-          </text>
-        </g>
-      ))}
+
+      <FloorplanMeasurementsLayer
+        className="wall-dimension"
+        measurements={wallMeasurements}
+        palette={palette}
+      />
+    </>
+  )
+})
+
+const FloorplanFenceLayer = memo(function FloorplanFenceLayer({
+  canFocusGeometry,
+  canSelectGeometry,
+  fenceEntries,
+  highlightedIdSet,
+  hoveredFenceId,
+  isDeleteMode,
+  onFenceDoubleClick,
+  onFenceHoverChange,
+  onFenceHoverEnter,
+  onFencePointerDown,
+  onFenceSelect,
+  palette,
+  selectedIdSet,
+}: {
+  canFocusGeometry: boolean
+  canSelectGeometry: boolean
+  fenceEntries: FloorplanFenceEntry[]
+  highlightedIdSet: ReadonlySet<string>
+  hoveredFenceId: FenceNode['id'] | null
+  isDeleteMode: boolean
+  onFenceDoubleClick: (fence: FenceNode, event: ReactMouseEvent<SVGElement>) => void
+  onFenceHoverChange: (fenceId: FenceNode['id'] | null) => void
+  onFenceHoverEnter: (fenceId: FenceNode['id']) => void
+  onFencePointerDown: (fenceId: FenceNode['id'], event: ReactPointerEvent<SVGElement>) => void
+  onFenceSelect: (fence: FenceNode, event: ReactMouseEvent<SVGElement>) => void
+  palette: FloorplanPalette
+  selectedIdSet: ReadonlySet<string>
+}) {
+  if (fenceEntries.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      {fenceEntries.map(({ fence, markerFrames, path }) => {
+        const isSelected = selectedIdSet.has(fence.id)
+        const isHighlighted = highlightedIdSet.has(fence.id)
+        const isHovered = hoveredFenceId === fence.id
+        const isDeleteHovered = isDeleteMode && isHovered
+        const isActive = isSelected || isHighlighted
+        const showInteractiveChrome = isActive || isHovered
+        const fenceStroke = isDeleteHovered
+          ? palette.deleteStroke
+          : isActive
+            ? palette.selectedStroke
+            : isHovered
+              ? palette.wallHoverStroke
+              : '#111827'
+        const fenceAccent = fenceStroke
+        const fenceUnderlayStroke = isDeleteHovered ? palette.surface : 'rgba(255, 255, 255, 0.98)'
+        const fenceGlowStroke = isDeleteHovered
+          ? palette.deleteStroke
+          : isActive
+            ? palette.selectedStroke
+            : palette.wallHoverStroke
+        const fenceGlowOpacity = isDeleteHovered ? 0.18 : isActive ? 0.22 : isHovered ? 0.14 : 0
+        const fenceUnderlayWidth = isActive ? '6.5' : isHovered ? '6' : '5.2'
+        const fenceStrokeWidth = isActive ? '2.6' : isHovered ? '2.35' : '2.05'
+        const privacyMarkerWidth = clamp(fence.postSize * 0.58, 0.038, 0.068)
+        const privacyMarkerHeight = clamp(Math.max(fence.baseHeight * 0.5, fence.postSize * 1.4), 0.1, 0.17)
+        const railMarkerRadius = clamp(fence.postSize * 0.52, 0.048, 0.078)
+        const slatMarkerHalf = clamp(fence.postSize * 0.42, 0.03, 0.055)
+        const markerStrokeWidth = isActive ? '1.65' : '1.35'
+
+        return (
+          <g
+            key={fence.id}
+            onPointerEnter={canSelectGeometry ? () => onFenceHoverEnter(fence.id) : undefined}
+            onPointerLeave={canSelectGeometry ? () => onFenceHoverChange(null) : undefined}
+          >
+            {showInteractiveChrome ? (
+              <path
+                d={path}
+                fill="none"
+                pointerEvents="none"
+                stroke={fenceGlowStroke}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeOpacity={fenceGlowOpacity}
+                strokeWidth={isActive ? '9.5' : '8.2'}
+                vectorEffect="non-scaling-stroke"
+              />
+            ) : null}
+            <path
+              d={path}
+              fill="none"
+              pointerEvents="none"
+              stroke={fenceUnderlayStroke}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeOpacity={0.98}
+              strokeWidth={fenceUnderlayWidth}
+              vectorEffect="non-scaling-stroke"
+            />
+            <path
+              d={path}
+              fill="none"
+              pointerEvents="none"
+              stroke={fenceStroke}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={fenceStrokeWidth}
+              vectorEffect="non-scaling-stroke"
+            />
+            {markerFrames.map(({ angleDeg, point }, markerIndex) => {
+              const svgPoint = toSvgPoint(point)
+
+              if (fence.style === 'privacy') {
+                return (
+                  <g
+                    key={`${fence.id}:marker:${markerIndex}`}
+                    pointerEvents="none"
+                    transform={`translate(${svgPoint.x} ${svgPoint.y}) rotate(${angleDeg})`}
+                  >
+                    <rect
+                      fill={palette.surface}
+                      height={privacyMarkerHeight + 0.038}
+                      rx="0.014"
+                      width={privacyMarkerWidth + 0.032}
+                      x={-(privacyMarkerWidth + 0.032) / 2}
+                      y={-(privacyMarkerHeight + 0.038) / 2}
+                    />
+                    <rect
+                      fill={fenceAccent}
+                      height={privacyMarkerHeight}
+                      rx="0.01"
+                      width={privacyMarkerWidth}
+                      x={-privacyMarkerWidth / 2}
+                      y={-privacyMarkerHeight / 2}
+                    />
+                  </g>
+                )
+              }
+
+              if (fence.style === 'rail') {
+                return (
+                  <g key={`${fence.id}:marker:${markerIndex}`} pointerEvents="none">
+                    <circle
+                      cx={svgPoint.x}
+                      cy={svgPoint.y}
+                      fill={palette.surface}
+                      r={railMarkerRadius + 0.018}
+                    />
+                    <circle
+                      cx={svgPoint.x}
+                      cy={svgPoint.y}
+                      fill={palette.surface}
+                      r={railMarkerRadius}
+                      stroke={fenceAccent}
+                      strokeWidth={markerStrokeWidth}
+                      vectorEffect="non-scaling-stroke"
+                    />
+                    <circle
+                      cx={svgPoint.x}
+                      cy={svgPoint.y}
+                      fill={fenceAccent}
+                      fillOpacity={isActive ? 0.24 : 0.18}
+                      r={railMarkerRadius * 0.34}
+                      vectorEffect="non-scaling-stroke"
+                    />
+                  </g>
+                )
+              }
+
+              return (
+                <g
+                  key={`${fence.id}:marker:${markerIndex}`}
+                  pointerEvents="none"
+                  transform={`translate(${svgPoint.x} ${svgPoint.y}) rotate(${angleDeg})`}
+                >
+                  <line
+                    stroke={palette.surface}
+                    strokeLinecap="round"
+                    strokeWidth="2.8"
+                    vectorEffect="non-scaling-stroke"
+                    x1={-slatMarkerHalf}
+                    x2={slatMarkerHalf}
+                    y1={-slatMarkerHalf}
+                    y2={slatMarkerHalf}
+                  />
+                  <line
+                    stroke={palette.surface}
+                    strokeLinecap="round"
+                    strokeWidth="2.8"
+                    vectorEffect="non-scaling-stroke"
+                    x1={slatMarkerHalf}
+                    x2={-slatMarkerHalf}
+                    y1={-slatMarkerHalf}
+                    y2={slatMarkerHalf}
+                  />
+                  <line
+                    stroke={fenceAccent}
+                    strokeLinecap="round"
+                    strokeWidth={markerStrokeWidth}
+                    vectorEffect="non-scaling-stroke"
+                    x1={-slatMarkerHalf}
+                    x2={slatMarkerHalf}
+                    y1={-slatMarkerHalf}
+                    y2={slatMarkerHalf}
+                  />
+                  <line
+                    stroke={fenceAccent}
+                    strokeLinecap="round"
+                    strokeWidth={markerStrokeWidth}
+                    vectorEffect="non-scaling-stroke"
+                    x1={slatMarkerHalf}
+                    x2={-slatMarkerHalf}
+                    y1={-slatMarkerHalf}
+                    y2={slatMarkerHalf}
+                  />
+                </g>
+              )
+            })}
+            <path
+              d={path}
+              fill="none"
+              onClick={
+                canSelectGeometry
+                  ? (event) => {
+                      event.stopPropagation()
+                      onFenceSelect(fence, event)
+                    }
+                  : undefined
+              }
+              onDoubleClick={
+                canFocusGeometry
+                  ? (event) => {
+                      event.stopPropagation()
+                      onFenceDoubleClick(fence, event)
+                    }
+                  : undefined
+              }
+              onPointerDown={
+                canSelectGeometry && isSelected
+                  ? (event) => {
+                      if (event.button === 0) {
+                        onFencePointerDown(fence.id, event)
+                      }
+                    }
+                  : undefined
+              }
+              pointerEvents={canSelectGeometry ? 'stroke' : 'none'}
+              stroke="transparent"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={FLOORPLAN_OPENING_HIT_STROKE_WIDTH}
+              style={canSelectGeometry ? { cursor: EDITOR_CURSOR } : undefined}
+              vectorEffect="non-scaling-stroke"
+            />
+          </g>
+        )
+      })}
     </>
   )
 })
@@ -3560,10 +4130,12 @@ const FloorplanNodeLayer = memo(function FloorplanNodeLayer({
   onStairDoubleClick,
   onStairHoverChange,
   onStairHoverEnter,
+  onStairPointerDown,
   onStairSelect,
   palette,
   selectedIdSet,
   stairEntries,
+  unit,
 }: {
   canFocusItems: boolean
   canFocusStairs: boolean
@@ -3583,169 +4155,20 @@ const FloorplanNodeLayer = memo(function FloorplanNodeLayer({
   onStairDoubleClick: (stair: StairNode, event: ReactMouseEvent<SVGElement>) => void
   onStairHoverChange: (stairId: StairNode['id'] | null) => void
   onStairHoverEnter: (stairId: StairNode['id']) => void
+  onStairPointerDown: (stairId: StairNode['id'], event: ReactPointerEvent<SVGElement>) => void
   onStairSelect: (stairId: StairNode['id'], event: ReactMouseEvent<SVGElement>) => void
   palette: FloorplanPalette
   selectedIdSet: ReadonlySet<string>
   stairEntries: FloorplanStairEntry[]
+  unit: 'metric' | 'imperial'
 }) {
   if (itemEntries.length === 0 && stairEntries.length === 0) {
     return null
   }
 
-  const stairNodes = stairEntries.map(({ arrow, stair, segments }) => {
-    const stairSelected = selectedIdSet.has(stair.id)
-    const stairHighlighted = highlightedIdSet.has(stair.id)
-    const segmentSelected = segments.some(({ segment }) => selectedIdSet.has(segment.id))
-    const segmentHighlighted = segments.some(({ segment }) => highlightedIdSet.has(segment.id))
-    const isHovered = hoveredStairId === stair.id
-    const isDeleteHovered = isDeleteMode && isHovered
-    const isSelectionActive =
-      stairSelected || stairHighlighted || segmentSelected || segmentHighlighted
-    const showHighlight = isHovered || isDeleteHovered || isSelectionActive
-    const outlineStroke = isDeleteHovered
-      ? palette.deleteStroke
-      : isSelectionActive
-        ? palette.selectedStroke
-        : palette.openingStroke
-    const highlightStroke = isDeleteHovered
-      ? palette.deleteStroke
-      : isSelectionActive
-        ? palette.selectedStroke
-        : palette.wallHoverStroke
-    const overlayFill = isDeleteHovered
-      ? palette.deleteFill
-      : isSelectionActive
-        ? palette.selectedFill
-        : null
-    const arrowThickness = segments.reduce(
-      (maxThickness, segmentEntry) => Math.max(maxThickness, segmentEntry.treadThickness),
-      FLOORPLAN_STAIR_ARROW_BAND_THICKNESS,
-    )
-    const arrowBodyBands = arrow ? getPolylineBandPolygons(arrow.polyline, arrowThickness) : []
-
-    return (
-      <g
-        key={stair.id}
-        onClick={
-          canSelectStairs
-            ? (event) => {
-                event.stopPropagation()
-                onStairSelect(stair.id, event)
-              }
-            : undefined
-        }
-        onDoubleClick={
-          canFocusStairs
-            ? (event) => {
-                event.stopPropagation()
-                onStairDoubleClick(stair, event)
-              }
-            : undefined
-        }
-        onPointerEnter={canSelectStairs ? () => onStairHoverEnter(stair.id) : undefined}
-        onPointerLeave={canSelectStairs ? () => onStairHoverChange(null) : undefined}
-        pointerEvents={canSelectStairs ? undefined : 'none'}
-        style={canSelectStairs ? { cursor: EDITOR_CURSOR } : undefined}
-      >
-        <title>{stair.name || 'Staircase'}</title>
-        {segments.map(({ innerPoints, points, segment, treadBars }) => {
-          return (
-            <g key={segment.id}>
-              <polygon
-                fill="none"
-                pointerEvents="none"
-                points={points}
-                stroke={highlightStroke}
-                strokeLinejoin="round"
-                strokeOpacity={isDeleteHovered || isSelectionActive ? 0.22 : 0.16}
-                strokeWidth={FLOORPLAN_WALL_HOVER_GLOW_STROKE_WIDTH}
-                style={{
-                  opacity: showHighlight ? 1 : 0,
-                  transition: FLOORPLAN_HOVER_TRANSITION,
-                }}
-                vectorEffect="non-scaling-stroke"
-              />
-              <polygon
-                fill="none"
-                pointerEvents="none"
-                points={points}
-                stroke={highlightStroke}
-                strokeLinejoin="round"
-                strokeOpacity={isDeleteHovered || isSelectionActive ? 0.6 : 0.48}
-                strokeWidth={FLOORPLAN_WALL_HOVER_RING_STROKE_WIDTH}
-                style={{
-                  opacity: showHighlight ? 1 : 0,
-                  transition: FLOORPLAN_HOVER_TRANSITION,
-                }}
-                vectorEffect="non-scaling-stroke"
-              />
-              <polygon fill={outlineStroke} points={points} />
-              <polygon
-                fill={palette.openingFill}
-                fillOpacity={1}
-                pointerEvents="none"
-                points={innerPoints}
-              />
-              {overlayFill && innerPoints && (
-                <polygon
-                  fill={overlayFill}
-                  fillOpacity={isDeleteHovered ? 0.14 : 0.08}
-                  pointerEvents="none"
-                  points={innerPoints}
-                />
-              )}
-              {treadBars.map((treadBar, treadIndex) => (
-                <polygon
-                  fill={outlineStroke}
-                  key={`${segment.id}:tread:${treadIndex}`}
-                  pointerEvents="none"
-                  points={segment.segmentType === 'landing' ? '' : treadBar.points}
-                />
-              ))}
-            </g>
-          )
-        })}
-        {arrow && (
-          <>
-            {arrowBodyBands.map((band, bandIndex) => (
-              <polygon
-                fill={outlineStroke}
-                key={`${stair.id}:arrow-body:${bandIndex}`}
-                pointerEvents="none"
-                points={band.points}
-              />
-            ))}
-            <line
-              key={`${stair.id}:arrow-head:left`}
-              pointerEvents="none"
-              stroke={outlineStroke}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={arrowThickness}
-              x1={toSvgX(arrow.head[0]!.x)}
-              x2={toSvgX(arrow.head[1]!.x)}
-              y1={toSvgY(arrow.head[0]!.y)}
-              y2={toSvgY(arrow.head[1]!.y)}
-            />
-            <line
-              key={`${stair.id}:arrow-head:right`}
-              pointerEvents="none"
-              stroke={outlineStroke}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={arrowThickness}
-              x1={toSvgX(arrow.head[0]!.x)}
-              x2={toSvgX(arrow.head[2]!.x)}
-              y1={toSvgY(arrow.head[0]!.y)}
-              y2={toSvgY(arrow.head[2]!.y)}
-            />
-          </>
-        )}
-      </g>
-    )
-  })
-
-  const itemNodes = itemEntries.map(({ item, points, polygon }) => {
+  const itemNodes = itemEntries.map((itemEntry) => {
+    const { item, points, polygon } = itemEntry
+    const itemDimensionMeasurements = getItemDimensionMeasurementOverlays(itemEntry, unit)
     const isSelected = selectedIdSet.has(item.id)
     const isHighlighted = highlightedIdSet.has(item.id)
     const isHovered = hoveredItemId === item.id
@@ -3888,12 +4311,63 @@ const FloorplanNodeLayer = memo(function FloorplanNodeLayer({
             y2={toSvgY(diagonalBEnd.y)}
           />
         )}
+        {itemDimensionMeasurements.length > 0 ? (
+          <FloorplanMeasurementsLayer
+            className="item-dimension-measurement"
+            measurements={itemDimensionMeasurements}
+            palette={palette}
+          />
+        ) : null}
       </g>
     )
   })
 
   return (
-    <>{isFurnishContextActive ? [...stairNodes, ...itemNodes] : [...itemNodes, ...stairNodes]}</>
+    <>
+      {isFurnishContextActive ? (
+        <>
+          <FloorplanStairLayer
+            canFocusStairs={canFocusStairs}
+            canSelectStairs={canSelectStairs}
+            cursor={EDITOR_CURSOR}
+            highlightedIdSet={highlightedIdSet}
+            hitStrokeWidth={FLOORPLAN_OPENING_HIT_STROKE_WIDTH}
+            hoveredStairId={hoveredStairId}
+            isDeleteMode={isDeleteMode}
+            onStairDoubleClick={onStairDoubleClick}
+            onStairHoverChange={onStairHoverChange}
+            onStairHoverEnter={onStairHoverEnter}
+            onStairPointerDown={onStairPointerDown}
+            onStairSelect={onStairSelect}
+            palette={palette}
+            selectedIdSet={selectedIdSet}
+            stairEntries={stairEntries}
+          />
+          {itemNodes}
+        </>
+      ) : (
+        <>
+          {itemNodes}
+          <FloorplanStairLayer
+            canFocusStairs={canFocusStairs}
+            canSelectStairs={canSelectStairs}
+            cursor={EDITOR_CURSOR}
+            highlightedIdSet={highlightedIdSet}
+            hitStrokeWidth={FLOORPLAN_OPENING_HIT_STROKE_WIDTH}
+            hoveredStairId={hoveredStairId}
+            isDeleteMode={isDeleteMode}
+            onStairDoubleClick={onStairDoubleClick}
+            onStairHoverChange={onStairHoverChange}
+            onStairHoverEnter={onStairHoverEnter}
+            onStairPointerDown={onStairPointerDown}
+            onStairSelect={onStairSelect}
+            palette={palette}
+            selectedIdSet={selectedIdSet}
+            stairEntries={stairEntries}
+          />
+        </>
+      )}
+    </>
   )
 })
 
@@ -4253,50 +4727,164 @@ const FloorplanZoneLabelLayer = memo(function FloorplanZoneLabelLayer({
               viewBox={viewBox}
               zone={zone}
             />
-          )
-        }
-
-        return (
-          <FloorplanZoneLabel
-            centroid={centroid}
-            key={zone.id}
-            onHoverChange={onLabelHoverChange}
-            onLabelClick={onZoneLabelClick}
-            zone={zone}
-          />
+          )
+        }
+
+        return (
+          <FloorplanZoneLabel
+            centroid={centroid}
+            key={zone.id}
+            onHoverChange={onLabelHoverChange}
+            onLabelClick={onZoneLabelClick}
+            zone={zone}
+          />
+        )
+      })}
+    </>
+  )
+})
+
+const FloorplanWallEndpointLayer = memo(function FloorplanWallEndpointLayer({
+  endpointHandles,
+  hoveredEndpointId,
+  onWallEndpointPointerDown,
+  onEndpointHoverChange,
+  palette,
+}: {
+  endpointHandles: Array<{
+    wall: WallNode
+    endpoint: WallEndpoint
+    point: WallPlanPoint
+    isSelected: boolean
+    isActive: boolean
+  }>
+  onWallEndpointPointerDown: (
+    wall: WallNode,
+    endpoint: WallEndpoint,
+    event: ReactPointerEvent<SVGCircleElement>,
+  ) => void
+  hoveredEndpointId: string | null
+  onEndpointHoverChange: (endpointId: string | null) => void
+  palette: FloorplanPalette
+}) {
+  return (
+    <>
+      {endpointHandles.map(({ wall, endpoint, point, isSelected, isActive }) => {
+        const endpointId = `${wall.id}:${endpoint}`
+        const isHovered = hoveredEndpointId === endpointId
+        const stroke =
+          isSelected || isActive ? palette.endpointHandleActiveStroke : palette.endpointHandleStroke
+        const hoverStroke =
+          isSelected || isActive
+            ? palette.endpointHandleActiveStroke
+            : palette.endpointHandleHoverStroke
+        const outerRadius = isActive ? 0.18 : isSelected ? 0.16 : 0.14
+        const svgPoint = toSvgPlanPoint(point)
+
+        return (
+          <g
+            key={endpointId}
+            onClick={(event) => {
+              event.stopPropagation()
+            }}
+            onPointerEnter={() => onEndpointHoverChange(endpointId)}
+            onPointerLeave={() => onEndpointHoverChange(null)}
+          >
+            <circle
+              cx={svgPoint.x}
+              cy={svgPoint.y}
+              fill="none"
+              pointerEvents="none"
+              r={outerRadius}
+              stroke={hoverStroke}
+              strokeOpacity={isActive ? 0.24 : 0.16}
+              strokeWidth={FLOORPLAN_ENDPOINT_HOVER_GLOW_STROKE_WIDTH}
+              style={{
+                opacity: isHovered ? 1 : 0,
+                transition: FLOORPLAN_HOVER_TRANSITION,
+              }}
+              vectorEffect="non-scaling-stroke"
+            />
+            <circle
+              cx={svgPoint.x}
+              cy={svgPoint.y}
+              fill="none"
+              pointerEvents="none"
+              r={outerRadius}
+              stroke={hoverStroke}
+              strokeOpacity={isActive ? 0.72 : 0.52}
+              strokeWidth={FLOORPLAN_ENDPOINT_HOVER_RING_STROKE_WIDTH}
+              style={{
+                opacity: isHovered ? 1 : 0,
+                transition: FLOORPLAN_HOVER_TRANSITION,
+              }}
+              vectorEffect="non-scaling-stroke"
+            />
+            <circle
+              cx={svgPoint.x}
+              cy={svgPoint.y}
+              fill={isActive ? palette.endpointHandleActiveFill : palette.endpointHandleFill}
+              fillOpacity={0.96}
+              pointerEvents="none"
+              r={outerRadius}
+              stroke={stroke}
+              strokeWidth="0.05"
+              vectorEffect="non-scaling-stroke"
+            />
+            <circle
+              cx={svgPoint.x}
+              cy={svgPoint.y}
+              fill={stroke}
+              pointerEvents="none"
+              r={isActive ? 0.08 : 0.06}
+              vectorEffect="non-scaling-stroke"
+            />
+            <circle
+              cx={svgPoint.x}
+              cy={svgPoint.y}
+              fill="transparent"
+              onPointerDown={(event) => onWallEndpointPointerDown(wall, endpoint, event)}
+              pointerEvents="all"
+              r={outerRadius}
+              stroke="transparent"
+              strokeWidth={FLOORPLAN_ENDPOINT_HIT_STROKE_WIDTH}
+              style={{ cursor: EDITOR_CURSOR }}
+              vectorEffect="non-scaling-stroke"
+            />
+          </g>
         )
       })}
     </>
   )
 })
 
-const FloorplanWallEndpointLayer = memo(function FloorplanWallEndpointLayer({
+const FloorplanFenceEndpointLayer = memo(function FloorplanFenceEndpointLayer({
   endpointHandles,
   hoveredEndpointId,
-  onWallEndpointPointerDown,
   onEndpointHoverChange,
+  onFenceEndpointPointerDown,
   palette,
 }: {
   endpointHandles: Array<{
-    wall: WallNode
+    fence: FenceNode
     endpoint: WallEndpoint
     point: WallPlanPoint
-    isSelected: boolean
     isActive: boolean
+    isSelected: boolean
   }>
-  onWallEndpointPointerDown: (
-    wall: WallNode,
+  hoveredEndpointId: string | null
+  onEndpointHoverChange: (endpointId: string | null) => void
+  onFenceEndpointPointerDown: (
+    fence: FenceNode,
     endpoint: WallEndpoint,
     event: ReactPointerEvent<SVGCircleElement>,
   ) => void
-  hoveredEndpointId: string | null
-  onEndpointHoverChange: (endpointId: string | null) => void
   palette: FloorplanPalette
 }) {
   return (
     <>
-      {endpointHandles.map(({ wall, endpoint, point, isSelected, isActive }) => {
-        const endpointId = `${wall.id}:${endpoint}`
+      {endpointHandles.map(({ fence, endpoint, point, isSelected, isActive }) => {
+        const endpointId = `${fence.id}:${endpoint}`
         const isHovered = hoveredEndpointId === endpointId
         const stroke =
           isSelected || isActive ? palette.endpointHandleActiveStroke : palette.endpointHandleStroke
@@ -4369,7 +4957,7 @@ const FloorplanWallEndpointLayer = memo(function FloorplanWallEndpointLayer({
               cx={svgPoint.x}
               cy={svgPoint.y}
               fill="transparent"
-              onPointerDown={(event) => onWallEndpointPointerDown(wall, endpoint, event)}
+              onPointerDown={(event) => onFenceEndpointPointerDown(fence, endpoint, event)}
               pointerEvents="all"
               r={outerRadius}
               stroke="transparent"
@@ -4406,10 +4994,8 @@ const FloorplanWallCurveHandleLayer = memo(function FloorplanWallCurveHandleLaye
       {curveHandles.map(({ wall, point, isActive }) => {
         const handleId = `curve:${wall.id}`
         const isHovered = hoveredHandleId === handleId
-        const stroke = isActive ? palette.endpointHandleActiveStroke : palette.endpointHandleStroke
-        const hoverStroke = isActive
-          ? palette.endpointHandleActiveStroke
-          : palette.endpointHandleHoverStroke
+        const stroke = palette.curveHandleStroke
+        const hoverStroke = palette.curveHandleHoverStroke
         const svgPoint = toSvgPlanPoint(point)
         const radius = isActive ? 0.16 : 0.14
 
@@ -4440,7 +5026,7 @@ const FloorplanWallCurveHandleLayer = memo(function FloorplanWallCurveHandleLaye
             <circle
               cx={svgPoint.x}
               cy={svgPoint.y}
-              fill={isActive ? palette.endpointHandleActiveFill : palette.endpointHandleFill}
+              fill={palette.curveHandleFill}
               fillOpacity={0.96}
               pointerEvents="none"
               r={radius}
@@ -4453,7 +5039,7 @@ const FloorplanWallCurveHandleLayer = memo(function FloorplanWallCurveHandleLaye
               cy={svgPoint.y}
               fill={stroke}
               pointerEvents="none"
-              r={0.045}
+              r={0.05}
               vectorEffect="non-scaling-stroke"
             />
             <circle
@@ -4661,296 +5247,14 @@ const FloorplanPolygonHandleLayer = memo(function FloorplanPolygonHandleLayer({
   )
 })
 
-type FloorplanSiteKeyHandlerProps = {
-  onRestoreGroundLevel: () => void
-}
-
-const FloorplanSiteKeyHandler = memo(function FloorplanSiteKeyHandler({
-  onRestoreGroundLevel,
-}: FloorplanSiteKeyHandlerProps) {
-  const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
-  const phase = useEditor((state) => state.phase)
-  const setFloorplanSelectionTool = useEditor((state) => state.setFloorplanSelectionTool)
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const target = event.target as HTMLElement | null
-      const isEditableTarget =
-        target instanceof HTMLInputElement ||
-        target instanceof HTMLTextAreaElement ||
-        Boolean(target?.isContentEditable)
-
-      if (
-        isEditableTarget ||
-        !isFloorplanHovered ||
-        phase !== 'site' ||
-        event.metaKey ||
-        event.ctrlKey ||
-        event.altKey ||
-        event.key.toLowerCase() !== 'v'
-      ) {
-        return
-      }
-
-      setFloorplanSelectionTool('click')
-      onRestoreGroundLevel()
-    }
-
-    window.addEventListener('keydown', handleKeyDown, true)
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown, true)
-    }
-  }, [isFloorplanHovered, onRestoreGroundLevel, phase, setFloorplanSelectionTool])
-
-  return null
-})
-
-type FloorplanDuplicateHotkeyProps = {
-  hasDuplicatable: boolean
-  onDuplicateSelected: () => void
-}
-
-const FloorplanDuplicateHotkey = memo(function FloorplanDuplicateHotkey({
-  hasDuplicatable,
-  onDuplicateSelected,
-}: FloorplanDuplicateHotkeyProps) {
-  const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'c') {
-        return
-      }
-
-      if (!(isFloorplanHovered && hasDuplicatable)) {
-        return
-      }
-
-      const target = event.target as HTMLElement | null
-      const isEditableTarget =
-        target instanceof HTMLInputElement ||
-        target instanceof HTMLTextAreaElement ||
-        Boolean(target?.isContentEditable)
-
-      if (isEditableTarget) {
-        return
-      }
-
-      event.preventDefault()
-      onDuplicateSelected()
-    }
-
-    window.addEventListener('keydown', handleKeyDown, true)
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown, true)
-    }
-  }, [hasDuplicatable, isFloorplanHovered, onDuplicateSelected])
-
-  return null
-})
-
-type FloorplanActionMenuHandler = (event: ReactMouseEvent<HTMLButtonElement>) => void
-
-type FloorplanActionMenuEntry = {
-  position: SvgPoint | null
-  onDelete: FloorplanActionMenuHandler
-  onMove: FloorplanActionMenuHandler
-  onDuplicate?: FloorplanActionMenuHandler
-}
-
-type FloorplanActionMenuLayerProps = {
-  item: FloorplanActionMenuEntry
-  wall: FloorplanActionMenuEntry
-  slab: FloorplanActionMenuEntry
-  ceiling: FloorplanActionMenuEntry
-  opening: FloorplanActionMenuEntry
-  stair: FloorplanActionMenuEntry
-}
-
-const FloorplanActionMenuLayer = memo(function FloorplanActionMenuLayer({
-  item,
-  wall,
-  slab,
-  ceiling,
-  opening,
-  stair,
-}: FloorplanActionMenuLayerProps) {
-  const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
-  const movingNode = useEditor((state) => state.movingNode)
-  const curvingWall = useEditor((state) => state.curvingWall)
-  const curvingFence = useEditor((state) => state.curvingFence)
-
-  if (!isFloorplanHovered || movingNode || curvingWall || curvingFence) {
-    return null
-  }
-
-  const entries: FloorplanActionMenuEntry[] = [item, wall, slab, ceiling, opening, stair]
-
-  return (
-    <>
-      {entries.map((entry, index) =>
-        entry.position ? (
-          <div
-            className="absolute z-30"
-            key={index}
-            style={{
-              left: entry.position.x,
-              top: entry.position.y,
-              transform: `translate(-50%, calc(-100% - ${FLOORPLAN_ACTION_MENU_OFFSET_Y}px))`,
-            }}
-          >
-            <NodeActionMenu
-              onDelete={entry.onDelete}
-              onDuplicate={entry.onDuplicate}
-              onMove={entry.onMove}
-              onPointerDown={(event) => event.stopPropagation()}
-              onPointerUp={(event) => event.stopPropagation()}
-            />
-          </div>
-        ) : null,
-      )}
-    </>
-  )
-})
-
-type FloorplanCursorIndicatorOverlayProps = {
-  cursorPosition: SvgPoint | null
-  cursorAnchorPosition: SvgPoint | null
-  floorplanSelectionTool: FloorplanSelectionTool
-  movingOpeningType: 'door' | 'window' | null
-  isPanning: boolean
-  cursorColor: string
-}
-
-const FloorplanCursorIndicatorOverlay = memo(function FloorplanCursorIndicatorOverlay({
-  cursorPosition,
-  cursorAnchorPosition,
-  floorplanSelectionTool,
-  movingOpeningType,
-  isPanning,
-  cursorColor,
-}: FloorplanCursorIndicatorOverlayProps) {
-  const mode = useEditor((state) => state.mode)
-  const tool = useEditor((state) => state.tool)
-  const structureLayer = useEditor((state) => state.structureLayer)
-  const catalogCategory = useEditor((state) => state.catalogCategory)
-
-  const activeFloorplanToolConfig = useMemo(() => {
-    if (movingOpeningType) {
-      return structureTools.find((entry) => entry.id === movingOpeningType) ?? null
-    }
-
-    if (mode !== 'build' || !tool) {
-      return null
-    }
-
-    if (tool === 'item' && catalogCategory) {
-      return furnishTools.find((entry) => entry.catalogCategory === catalogCategory) ?? null
-    }
-
-    return structureTools.find((entry) => entry.id === tool) ?? null
-  }, [catalogCategory, mode, movingOpeningType, tool])
-
-  const indicator = useMemo<FloorplanCursorIndicator | null>(() => {
-    if (activeFloorplanToolConfig) {
-      return { kind: 'asset', iconSrc: activeFloorplanToolConfig.iconSrc }
-    }
-
-    if (mode === 'select' && floorplanSelectionTool === 'marquee' && structureLayer !== 'zones') {
-      return { kind: 'icon', icon: 'mdi:select-drag' }
-    }
-
-    if (mode === 'delete') {
-      return { kind: 'icon', icon: 'mdi:trash-can-outline' }
-    }
-
-    return null
-  }, [activeFloorplanToolConfig, floorplanSelectionTool, mode, structureLayer])
-
-  const position = mode === 'delete' ? cursorPosition : cursorAnchorPosition
-
-  if (!(indicator && position) || isPanning) {
-    return null
-  }
-
-  return (
-    <div
-      aria-hidden="true"
-      className="pointer-events-none absolute z-20"
-      style={{ left: position.x, top: position.y }}
-    >
-      {mode === 'delete' ? (
-        <div
-          className="flex h-8 w-8 items-center justify-center rounded-xl border border-white/5 bg-zinc-900/95 shadow-[0_8px_16px_-4px_rgba(0,0,0,0.3),0_4px_8px_-4px_rgba(0,0,0,0.2)]"
-          style={{
-            boxShadow: `0 8px 16px -4px rgba(0,0,0,0.3), 0 4px 8px -4px rgba(0,0,0,0.2), 0 0 18px ${cursorColor}22`,
-            transform: `translate(${FLOORPLAN_CURSOR_BADGE_OFFSET_X}px, ${FLOORPLAN_CURSOR_BADGE_OFFSET_Y}px)`,
-          }}
-        >
-          {indicator.kind === 'asset' ? (
-            <img
-              alt=""
-              aria-hidden="true"
-              className="h-5 w-5 object-contain drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
-              src={indicator.iconSrc}
-            />
-          ) : (
-            <Icon
-              aria-hidden="true"
-              className="drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
-              color={cursorColor}
-              height={18}
-              icon={indicator.icon}
-              width={18}
-            />
-          )}
-        </div>
-      ) : (
-        <>
-          <div
-            className="absolute top-0 left-1/2 w-px -translate-x-1/2 -translate-y-full"
-            style={{
-              backgroundColor: cursorColor,
-              boxShadow: `0 0 12px ${cursorColor}55`,
-              height: FLOORPLAN_CURSOR_INDICATOR_LINE_HEIGHT,
-            }}
-          />
-          <div
-            className="absolute top-0 left-1/2 flex h-8 w-8 items-center justify-center rounded-xl border border-white/5 bg-zinc-900/95 shadow-[0_8px_16px_-4px_rgba(0,0,0,0.3),0_4px_8px_-4px_rgba(0,0,0,0.2)]"
-            style={{
-              transform: `translate(-50%, calc(-100% - ${FLOORPLAN_CURSOR_INDICATOR_LINE_HEIGHT}px))`,
-            }}
-          >
-            {indicator.kind === 'asset' ? (
-              <img
-                alt=""
-                aria-hidden="true"
-                className="h-5 w-5 object-contain drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
-                src={indicator.iconSrc}
-              />
-            ) : (
-              <Icon
-                aria-hidden="true"
-                className="drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
-                color="white"
-                height={18}
-                icon={indicator.icon}
-                width={18}
-              />
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  )
-})
-
 export function FloorplanPanel() {
   const viewportHostRef = useRef<HTMLDivElement>(null)
   const svgRef = useRef<SVGSVGElement>(null)
+  const floorplanSceneRef = useRef<SVGGElement>(null)
   const panStateRef = useRef<PanState | null>(null)
   const guideInteractionRef = useRef<GuideInteractionState | null>(null)
   const guideTransformDraftRef = useRef<GuideTransformDraft | null>(null)
+  const pendingFenceDragRef = useRef<PendingFenceDragState | null>(null)
   const wallEndpointDragRef = useRef<WallEndpointDragState | null>(null)
   const wallCurveDragRef = useRef<WallCurveDragState | null>(null)
   const siteBoundaryDraftRef = useRef<SiteBoundaryDraft | null>(null)
@@ -4987,172 +5291,41 @@ export function FloorplanPanel() {
   const phase = useEditor((state) => state.phase)
   const mode = useEditor((state) => state.mode)
   const setPhase = useEditor((state) => state.setPhase)
+  const setMovingFenceEndpoint = useEditor((state) => state.setMovingFenceEndpoint)
   const setMovingNode = useEditor((state) => state.setMovingNode)
+  const movingFenceEndpoint = useEditor((state) => state.movingFenceEndpoint)
   const structureLayer = useEditor((state) => state.structureLayer)
   const setStructureLayer = useEditor((state) => state.setStructureLayer)
   const setTool = useEditor((state) => state.setTool)
   const tool = useEditor((state) => state.tool)
   const deleteNode = useScene((state) => state.deleteNode)
   const updateNode = useScene((state) => state.updateNode)
-  const levelNode = useScene((state) =>
-    levelId ? (state.nodes[levelId] as LevelNode | undefined) : undefined,
-  )
-  const currentBuildingId =
-    levelNode?.type === 'level' && levelNode.parentId
-      ? (levelNode.parentId as BuildingNode['id'])
-      : (buildingId as BuildingNode['id'] | null)
-  const buildingRotationY = useScene((state) => {
-    if (!currentBuildingId) return 0
-    const node = state.nodes[currentBuildingId]
-    return node?.type === 'building' ? (node.rotation[1] ?? 0) : 0
-  })
+  const {
+    buildingPosition,
+    buildingRotationY,
+    ceilings,
+    currentBuildingId,
+    fences,
+    floorplanLevels,
+    levelDescendantNodes,
+    levelGuides,
+    levelNode,
+    openings,
+    roofs,
+    site,
+    slabs,
+    walls,
+    zones,
+  } = useFloorplanSceneData({ buildingId, levelId })
   const buildingRotationDeg = (buildingRotationY * 180) / Math.PI
-  const site = useScene((state) => {
-    for (const rootNodeId of state.rootNodeIds) {
-      const node = state.nodes[rootNodeId]
-      if (node?.type === 'site') {
-        return node as SiteNode
-      }
-    }
-
-    return null
-  })
-  const floorplanLevels = useScene(
-    useShallow((state) => {
-      if (!currentBuildingId) {
-        return [] as LevelNode[]
-      }
-
-      const buildingNode = state.nodes[currentBuildingId]
-      if (!buildingNode || buildingNode.type !== 'building') {
-        return [] as LevelNode[]
-      }
-
-      return buildingNode.children
-        .map((childId) => state.nodes[childId])
-        .filter((node): node is LevelNode => node?.type === 'level')
-        .sort((a, b) => a.level - b.level)
-    }),
-  )
-  const walls = useScene(
-    useShallow((state) => {
-      if (!levelId) {
-        return [] as WallNode[]
-      }
-
-      const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
-        return [] as WallNode[]
-      }
-
-      return nextLevelNode.children
-        .map((childId) => state.nodes[childId])
-        .filter((node): node is WallNode => node?.type === 'wall')
-    }),
-  )
-  const openings = useScene(
-    useShallow((state) => {
-      if (!levelId) {
-        return [] as OpeningNode[]
-      }
-
-      const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
-        return [] as OpeningNode[]
-      }
-
-      const nextWalls = nextLevelNode.children
-        .map((childId) => state.nodes[childId])
-        .filter((node): node is WallNode => node?.type === 'wall')
-
-      return nextWalls.flatMap((wall) =>
-        wall.children
-          .map((childId) => state.nodes[childId])
-          .filter((node): node is OpeningNode => node?.type === 'window' || node?.type === 'door'),
-      )
-    }),
-  )
-  const slabs = useScene(
-    useShallow((state) => {
-      if (!levelId) {
-        return [] as SlabNode[]
-      }
-
-      const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
-        return [] as SlabNode[]
-      }
-
-      return nextLevelNode.children
-        .map((childId) => state.nodes[childId])
-        .filter((node): node is SlabNode => node?.type === 'slab')
-    }),
-  )
-  const ceilings = useScene(
-    useShallow((state) => {
-      if (!levelId) {
-        return [] as CeilingNode[]
-      }
-
-      const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
-        return [] as CeilingNode[]
-      }
-
-      return nextLevelNode.children
-        .map((childId) => state.nodes[childId])
-        .filter((node): node is CeilingNode => node?.type === 'ceiling')
-    }),
-  )
-  const levelGuides = useScene(
-    useShallow((state) => {
-      if (!levelId) {
-        return [] as GuideNode[]
-      }
-
-      const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
-        return [] as GuideNode[]
-      }
-
-      return nextLevelNode.children
-        .map((childId) => state.nodes[childId])
-        .filter((node): node is GuideNode => node?.type === 'guide')
-    }),
-  )
-  const zones = useScene(
-    useShallow((state) => {
-      if (!levelId) {
-        return [] as ZoneNodeType[]
-      }
-
-      const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
-        return [] as ZoneNodeType[]
-      }
-
-      return nextLevelNode.children
-        .map((childId) => state.nodes[childId])
-        .filter((node): node is ZoneNodeType => node?.type === 'zone')
-    }),
-  )
-  const levelDescendantNodes = useScene(
-    useShallow((state) => {
-      if (!levelId) {
-        return [] as AnyNode[]
-      }
-
-      const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
-        return [] as AnyNode[]
-      }
-
-      return collectLevelDescendants(nextLevelNode, state.nodes as Record<string, AnyNode>)
-    }),
-  )
 
   const [draftStart, setDraftStart] = useState<WallPlanPoint | null>(null)
   const [draftEnd, setDraftEnd] = useState<WallPlanPoint | null>(null)
+  const [fenceDraftStart, setFenceDraftStart] = useState<WallPlanPoint | null>(null)
+  const [fenceDraftEnd, setFenceDraftEnd] = useState<WallPlanPoint | null>(null)
+  const [roofDraftStart, setRoofDraftStart] = useState<WallPlanPoint | null>(null)
+  const [roofDraftEnd, setRoofDraftEnd] = useState<WallPlanPoint | null>(null)
+  const [ceilingDraftPoints, setCeilingDraftPoints] = useState<WallPlanPoint[]>([])
   const [slabDraftPoints, setSlabDraftPoints] = useState<WallPlanPoint[]>([])
   const [zoneDraftPoints, setZoneDraftPoints] = useState<WallPlanPoint[]>([])
   const [siteBoundaryDraft, setSiteBoundaryDraft] = useState<SiteBoundaryDraft | null>(null)
@@ -5168,7 +5341,9 @@ export function FloorplanPanel() {
   const [wallCurveDraft, setWallCurveDraft] = useState<WallCurveDraft | null>(null)
   const [hoveredOpeningId, setHoveredOpeningId] = useState<OpeningNode['id'] | null>(null)
   const [hoveredWallId, setHoveredWallId] = useState<WallNode['id'] | null>(null)
+  const [hoveredFenceId, setHoveredFenceId] = useState<FenceNode['id'] | null>(null)
   const [hoveredSlabId, setHoveredSlabId] = useState<SlabNode['id'] | null>(null)
+  const [hoveredCeilingId, setHoveredCeilingId] = useState<CeilingNode['id'] | null>(null)
   const [hoveredItemId, setHoveredItemId] = useState<ItemNode['id'] | null>(null)
   const [hoveredStairId, setHoveredStairId] = useState<StairNode['id'] | null>(null)
   const [hoveredZoneId, setHoveredZoneId] = useState<ZoneNodeType['id'] | null>(null)
@@ -5186,6 +5361,7 @@ export function FloorplanPanel() {
   const [shiftPressed, setShiftPressed] = useState(false)
   const [rotationModifierPressed, setRotationModifierPressed] = useState(false)
   const [movingFloorplanNodeRevision, setMovingFloorplanNodeRevision] = useState(0)
+  const movingFloorplanNodeRefreshFrameRef = useRef<number | null>(null)
   const [stairBuildPreviewPoint, setStairBuildPreviewPoint] = useState<WallPlanPoint | null>(null)
   const [stairBuildPreviewRotation, setStairBuildPreviewRotation] = useState(0)
   const [isPanning, setIsPanning] = useState(false)
@@ -5207,12 +5383,33 @@ export function FloorplanPanel() {
     if (structureLayer === 'zones' && floorplanSelectionTool === 'marquee') {
       setFloorplanSelectionTool('click')
     }
-  }, [floorplanSelectionTool, structureLayer])
+  }, [floorplanSelectionTool, setFloorplanSelectionTool, structureLayer])
 
   useEffect(() => {
     setIsMacPlatform(navigator.platform.toUpperCase().includes('MAC'))
   }, [])
 
+  const scheduleMovingFloorplanNodeRefresh = useCallback(() => {
+    if (movingFloorplanNodeRefreshFrameRef.current !== null) {
+      return
+    }
+
+    movingFloorplanNodeRefreshFrameRef.current = window.requestAnimationFrame(() => {
+      movingFloorplanNodeRefreshFrameRef.current = null
+      setMovingFloorplanNodeRevision((current) => current + 1)
+    })
+  }, [])
+
+  useEffect(
+    () => () => {
+      if (movingFloorplanNodeRefreshFrameRef.current !== null) {
+        window.cancelAnimationFrame(movingFloorplanNodeRefreshFrameRef.current)
+        movingFloorplanNodeRefreshFrameRef.current = null
+      }
+    },
+    [],
+  )
+
   const sitePolygonEntry = useMemo(() => {
     const polygonPoints = site?.polygon?.points
     if (!(site && polygonPoints)) {
@@ -5316,11 +5513,15 @@ export function FloorplanPanel() {
     const nextWallById = new Map(wallById)
 
     if (wallEndpointDraft) {
-      const wall = nextWallById.get(wallEndpointDraft.wallId)
-      if (wall) {
+      for (const draftUpdate of getWallEndpointDraftUpdates(wallEndpointDraft)) {
+        const wall = nextWallById.get(draftUpdate.id)
+        if (!wall) {
+          continue
+        }
+
         nextWallById.set(
           wall.id,
-          buildWallWithUpdatedEndpoints(wall, wallEndpointDraft.start, wallEndpointDraft.end),
+          buildWallWithUpdatedEndpoints(wall, draftUpdate.start, draftUpdate.end),
         )
       }
     }
@@ -5339,20 +5540,75 @@ export function FloorplanPanel() {
       return floorplanWallById
     }
 
-    const previewWallId = wallEndpointDraft?.wallId ?? wallCurveDraft?.wallId
-    if (!previewWallId) {
-      return floorplanWallById
+    const nextFloorplanWallById = new Map(floorplanWallById)
+    let hasPreviewWalls = false
+
+    if (wallEndpointDraft) {
+      for (const draftUpdate of getWallEndpointDraftUpdates(wallEndpointDraft)) {
+        const previewWall = displayWallById.get(draftUpdate.id)
+        if (!previewWall) {
+          continue
+        }
+
+        nextFloorplanWallById.set(previewWall.id, getFloorplanWall(previewWall))
+        hasPreviewWalls = true
+      }
     }
 
-    const previewWall = displayWallById.get(previewWallId)
-    if (!previewWall) {
-      return floorplanWallById
+    if (wallCurveDraft) {
+      const previewWall = displayWallById.get(wallCurveDraft.wallId)
+      if (previewWall) {
+        nextFloorplanWallById.set(previewWall.id, getFloorplanWall(previewWall))
+        hasPreviewWalls = true
+      }
     }
 
-    const nextFloorplanWallById = new Map(floorplanWallById)
-    nextFloorplanWallById.set(previewWall.id, getFloorplanWall(previewWall))
-    return nextFloorplanWallById
+    return hasPreviewWalls ? nextFloorplanWallById : floorplanWallById
   }, [displayWallById, floorplanWallById, wallCurveDraft, wallEndpointDraft])
+  const floorplanFenceEntries = useMemo(
+    () =>
+      fences.flatMap((fence) => {
+        const live = useLiveTransforms.getState().get(fence.id)
+        const fenceCenterX = (fence.start[0] + fence.end[0]) / 2
+        const fenceCenterZ = (fence.start[1] + fence.end[1]) / 2
+        const displayFence =
+          live
+            ? {
+                ...fence,
+                start: [
+                  fence.start[0] + (live.position[0] - fenceCenterX),
+                  fence.start[1] + (live.position[2] - fenceCenterZ),
+                ] as typeof fence.start,
+                end: [
+                  fence.end[0] + (live.position[0] - fenceCenterX),
+                  fence.end[1] + (live.position[2] - fenceCenterZ),
+                ] as typeof fence.end,
+              }
+            : fence
+        const centerline = isCurvedWall(displayFence)
+          ? sampleWallCenterline(displayFence, 24)
+          : [
+              { x: displayFence.start[0], y: displayFence.start[1] },
+              { x: displayFence.end[0], y: displayFence.end[1] },
+            ]
+        const path = buildSvgPolylinePath(centerline)
+        if (!path) {
+          return []
+        }
+
+        const markerFrames = getFloorplanFenceMarkerTs(displayFence).map((t) => {
+          const frame = getWallCurveFrameAt(displayFence, t)
+
+          return {
+            angleDeg: (Math.atan2(frame.tangent.y, frame.tangent.x) * 180) / Math.PI,
+            point: frame.point,
+          }
+        })
+
+        return [{ fence: displayFence, centerline, markerFrames, path }]
+      }),
+    [fences, movingFloorplanNodeRevision],
+  )
   const wallPolygons = useMemo(
     () =>
       walls.map((wall) => {
@@ -5371,29 +5627,46 @@ export function FloorplanPanel() {
       return wallPolygons
     }
 
-    const previewWallId = wallEndpointDraft?.wallId ?? wallCurveDraft?.wallId
-    if (!previewWallId) {
-      return wallPolygons
+    const previewWalls = new Map<WallNode['id'], WallNode>()
+
+    if (wallEndpointDraft) {
+      for (const draftUpdate of getWallEndpointDraftUpdates(wallEndpointDraft)) {
+        const previewWall = displayWallById.get(draftUpdate.id)
+        if (previewWall) {
+          previewWalls.set(previewWall.id, previewWall)
+        }
+      }
     }
 
-    const previewWall = displayWallById.get(previewWallId)
-    if (!previewWall) {
-      return wallPolygons
+    if (wallCurveDraft) {
+      const previewWall = displayWallById.get(wallCurveDraft.wallId)
+      if (previewWall) {
+        previewWalls.set(previewWall.id, previewWall)
+      }
     }
 
-    const previewPolygon = getWallPlanFootprint(
-      getFloorplanWall(previewWall),
-      EMPTY_WALL_MITER_DATA,
-    )
+    if (previewWalls.size === 0) {
+      return wallPolygons
+    }
 
     return wallPolygons.map((entry) =>
-      entry.wall.id === previewWall.id
-        ? {
-            wall: previewWall,
-            polygon: previewPolygon,
-            points: formatPolygonPoints(previewPolygon),
-          }
-        : entry,
+      (() => {
+        const previewWall = previewWalls.get(entry.wall.id)
+        if (!previewWall) {
+          return entry
+        }
+
+        const previewPolygon = getWallPlanFootprint(
+          getFloorplanWall(previewWall),
+          EMPTY_WALL_MITER_DATA,
+        )
+
+        return {
+          wall: previewWall,
+          polygon: previewPolygon,
+          points: formatPolygonPoints(previewPolygon),
+        }
+      })(),
     )
   }, [displayWallById, wallCurveDraft, wallEndpointDraft, wallPolygons])
 
@@ -5402,16 +5675,29 @@ export function FloorplanPanel() {
       openings.flatMap((opening) => {
         const wall = displayFloorplanWallById.get(opening.parentId as WallNode['id'])
         if (!wall) return []
-        const polygon = getOpeningFootprint(wall, opening)
+        const live = useLiveTransforms.getState().get(opening.id)
+        const displayOpening =
+          live && (movingNode?.type === 'door' || movingNode?.type === 'window') && movingNode.id === opening.id
+            ? ({
+                ...opening,
+                position: [
+                  live.position[0],
+                  opening.position[1],
+                  live.position[2],
+                ] as typeof opening.position,
+                rotation: [opening.rotation[0], live.rotation, opening.rotation[2]] as typeof opening.rotation,
+              })
+            : opening
+        const polygon = getOpeningFootprint(wall, displayOpening)
         return [
           {
-            opening,
+            opening: displayOpening,
             points: formatPolygonPoints(polygon),
             polygon,
           },
         ]
       }),
-    [displayFloorplanWallById, openings],
+    [displayFloorplanWallById, movingFloorplanNodeRevision, movingNode, openings],
   )
   const slabPolygons = useMemo(
     () =>
@@ -5530,31 +5816,26 @@ export function FloorplanPanel() {
     [levelDescendantNodes],
   )
   const floorplanItemEntries = useMemo(() => {
-    const transformCache = new Map<string, FloorplanNodeTransform | null>()
+    const transformCache = new Map<string, SharedFloorplanNodeTransform | null>()
 
     return floorplanItems.flatMap((item) => {
-      const transform = getItemFloorplanTransform(item, levelDescendantNodeById, transformCache)
-      if (!transform) {
+      const entry = buildFloorplanItemEntry(item, levelDescendantNodeById, transformCache)
+      if (!entry) {
         return []
       }
 
-      const [width, , depth] = getScaledDimensions(item)
-      const polygon = getRotatedRectanglePolygon(
-        transform.position,
-        width,
-        depth,
-        transform.rotation,
-      )
-
       return [
         {
-          item,
-          points: formatPolygonPoints(polygon),
-          polygon,
+          dimensionPolygon: entry.dimensionPolygon,
+          item: entry.item,
+          points: formatPolygonPoints(entry.polygon),
+          polygon: entry.polygon,
+          usesRealMesh: entry.usesRealMesh,
         },
       ]
     })
   }, [cursorPoint, floorplanItems, levelDescendantNodeById, movingFloorplanNodeRevision])
+  const hasPendingItemMeshFootprints = floorplanItemEntries.some((entry) => !entry.usesRealMesh)
   const floorplanStairEntries = useMemo(
     () =>
       floorplanStairs.flatMap((stair) => {
@@ -5579,8 +5860,30 @@ export function FloorplanPanel() {
             (node): node is StairSegmentNode =>
               node?.type === 'stair-segment' && node.visible !== false,
           )
-        const entry = buildFloorplanStairEntry(displayStair, segments)
-        return entry ? [entry] : []
+        const entry = buildSharedFloorplanStairEntry(displayStair, segments)
+        if (!entry) {
+          return []
+        }
+        const hitPolygons =
+          (displayStair.stairType ?? 'straight') === 'straight'
+            ? entry.segments.map((segmentEntry) => segmentEntry.polygon)
+            : [getFloorplanCurvedStairHitPolygon(displayStair)]
+
+        return [
+          {
+            ...entry,
+            hitPolygons,
+            segments: entry.segments.map((segmentEntry) => ({
+              ...segmentEntry,
+              innerPoints: formatPolygonPoints(segmentEntry.innerPolygon),
+              points: formatPolygonPoints(segmentEntry.polygon),
+              treadBars: segmentEntry.treadBars.map((polygon) => ({
+                points: formatPolygonPoints(polygon),
+                polygon,
+              })),
+            })),
+          },
+        ]
       }),
     [
       cursorPoint,
@@ -5590,6 +5893,93 @@ export function FloorplanPanel() {
       movingNode,
     ],
   )
+  const floorplanRoofEntries = useMemo(
+    () =>
+      roofs.flatMap((roof) => {
+        const liveRoofTransform =
+          movingNode?.type === 'roof' && movingNode.id === roof.id
+            ? useLiveTransforms.getState().get(roof.id)
+            : null
+        const liveRoofPosition = liveRoofTransform
+          ? worldToBuildingLocalPlanPoint(
+              liveRoofTransform.position,
+              buildingPosition,
+              buildingRotationY,
+            )
+          : null
+        const displayRoof =
+          liveRoofTransform
+            ? {
+                ...roof,
+                position: [
+                  liveRoofPosition?.x ?? roof.position[0],
+                  roof.position[1],
+                  liveRoofPosition?.y ?? roof.position[2],
+                ] as RoofNode['position'],
+                rotation: liveRoofTransform.rotation,
+              }
+            : roof
+        const segments = (displayRoof.children ?? [])
+          .map((childId) => levelDescendantNodeById.get(childId as AnyNodeId))
+          .filter(
+            (node): node is RoofSegmentNode =>
+              node?.type === 'roof-segment' && node.visible !== false,
+          )
+          .flatMap((segment) => {
+            const liveSegmentTransform =
+              movingNode?.type === 'roof-segment' && movingNode.id === segment.id
+                ? useLiveTransforms.getState().get(segment.id)
+                : null
+            const worldPositionOverride = liveSegmentTransform
+              ? worldToBuildingLocalPlanPoint(
+                  liveSegmentTransform.position,
+                  buildingPosition,
+                  buildingRotationY,
+                )
+              : undefined
+            const polygon = getRoofSegmentPolygon(displayRoof, segment, {
+              localRotation: liveSegmentTransform?.rotation,
+              worldPositionOverride,
+            })
+
+            if (polygon.length < 3) {
+              return []
+            }
+
+            return [
+              {
+                segment,
+                polygon,
+                points: formatPolygonPoints(polygon),
+                ridgeLine: getRoofSegmentRidgeLine(displayRoof, segment, {
+                  localRotation: liveSegmentTransform?.rotation,
+                  worldPositionOverride,
+                }),
+              },
+            ]
+          })
+
+        if (segments.length === 0) {
+          return []
+        }
+
+        return [
+          {
+            roof: displayRoof,
+            center: { x: displayRoof.position[0], y: displayRoof.position[2] },
+            segments,
+          },
+        ]
+      }),
+    [
+      buildingPosition,
+      buildingRotationY,
+      levelDescendantNodeById,
+      movingFloorplanNodeRevision,
+      movingNode,
+      roofs,
+    ],
+  )
   const selectedOpeningEntry = useMemo(() => {
     if (selectedIds.length !== 1) {
       return null
@@ -5604,6 +5994,245 @@ export function FloorplanPanel() {
 
     return floorplanItemEntries.find(({ item }) => item.id === selectedIds[0]) ?? null
   }, [floorplanItemEntries, selectedIds])
+  const selectedItemClearanceMeasurements = useMemo(() => {
+    if (!selectedItemEntry) {
+      return [] as LinearMeasurementOverlay[]
+    }
+
+    const attachTo = selectedItemEntry.item.asset.attachTo
+    if (attachTo === 'wall' || attachTo === 'wall-side') {
+      return [] as LinearMeasurementOverlay[]
+    }
+
+    const polygon = selectedItemEntry.polygon
+    if (polygon.length < 4 || displayWallPolygons.length === 0) {
+      return [] as LinearMeasurementOverlay[]
+    }
+
+    const centroid = polygonCentroid(polygon)
+
+    return polygon.flatMap((startPoint, index) => {
+      const endPoint = polygon[(index + 1) % polygon.length]
+      if (!endPoint) {
+        return []
+      }
+
+      const edgeVector = {
+        x: endPoint.x - startPoint.x,
+        y: endPoint.y - startPoint.y,
+      }
+      const tangent = normalizePlanVector(edgeVector)
+      if (!tangent) {
+        return []
+      }
+
+      let outwardNormal: Point2D = {
+        x: -tangent.y,
+        y: tangent.x,
+      }
+      const midpoint = {
+        x: (startPoint.x + endPoint.x) / 2,
+        y: (startPoint.y + endPoint.y) / 2,
+      }
+      const centroidVector = {
+        x: midpoint.x - centroid.x,
+        y: midpoint.y - centroid.y,
+      }
+
+      if (dotPlanVectors(outwardNormal, centroidVector) < 0) {
+        outwardNormal = {
+          x: -outwardNormal.x,
+          y: -outwardNormal.y,
+        }
+      }
+
+      let bestHit:
+        | {
+            point: Point2D
+            distance: number
+          }
+        | null = null
+
+      for (const { polygon: wallPolygon } of displayWallPolygons) {
+        for (let wallIndex = 0; wallIndex < wallPolygon.length; wallIndex += 1) {
+          const wallStart = wallPolygon[wallIndex]
+          const wallEnd = wallPolygon[(wallIndex + 1) % wallPolygon.length]
+          if (!(wallStart && wallEnd)) {
+            continue
+          }
+
+          const wallEdgeVector = {
+            x: wallEnd.x - wallStart.x,
+            y: wallEnd.y - wallStart.y,
+          }
+          const wallTangent = normalizePlanVector(wallEdgeVector)
+          if (!wallTangent) {
+            continue
+          }
+
+          if (
+            Math.abs(dotPlanVectors(tangent, wallTangent)) <
+            FLOORPLAN_ITEM_CLEARANCE_EDGE_PARALLEL_THRESHOLD
+          ) {
+            continue
+          }
+
+          const hit = getRaySegmentIntersection(midpoint, outwardNormal, wallStart, wallEnd)
+          if (
+            !hit ||
+            hit.rayDistance < FLOORPLAN_ITEM_CLEARANCE_MIN_DISTANCE ||
+            hit.rayDistance > FLOORPLAN_ITEM_CLEARANCE_MAX_DISTANCE
+          ) {
+            continue
+          }
+
+          if (!bestHit || hit.rayDistance < bestHit.distance) {
+            bestHit = {
+              point: hit.point,
+              distance: hit.rayDistance,
+            }
+          }
+        }
+      }
+
+      if (!bestHit) {
+        return []
+      }
+
+      const overlay = getLinearMeasurementOverlay(
+        `${selectedItemEntry.item.id}:clearance:${index}`,
+        midpoint,
+        bestHit.point,
+        formatMeasurement(bestHit.distance, unit),
+        {
+          offsetDistance: FLOORPLAN_MEASUREMENT_OFFSET,
+          offsetVector: tangent,
+        },
+      )
+
+      return overlay ? [overlay] : []
+    })
+  }, [displayWallPolygons, selectedItemEntry, unit])
+  const movingOpeningPlacementMeasurements = useMemo(() => {
+    if (!(movingNode?.type === 'door' || movingNode?.type === 'window')) {
+      return [] as LinearMeasurementOverlay[]
+    }
+
+    const openingEntry = openingsPolygons.find(({ opening }) => opening.id === movingNode.id)
+    if (!openingEntry) {
+      return [] as LinearMeasurementOverlay[]
+    }
+
+    const wallEntry = displayWallPolygons.find(({ wall }) => wall.id === openingEntry.opening.parentId)
+    if (!wallEntry || isCurvedWall(wallEntry.wall)) {
+      return [] as LinearMeasurementOverlay[]
+    }
+
+    const faceContext = getWallMeasurementFaceContext(wallEntry, displayWallPolygons)
+    if (!faceContext) {
+      return [] as LinearMeasurementOverlay[]
+    }
+
+    const wall = wallEntry.wall
+    const wallLength = Math.hypot(wall.end[0] - wall.start[0], wall.end[1] - wall.start[1])
+    if (wallLength < 1e-6) {
+      return [] as LinearMeasurementOverlay[]
+    }
+
+    const tangent = normalizePlanVector({
+      x: wall.end[0] - wall.start[0],
+      y: wall.end[1] - wall.start[1],
+    })
+    if (!tangent) {
+      return [] as LinearMeasurementOverlay[]
+    }
+
+    const opening = openingEntry.opening
+    const startDistance = opening.position[0] - opening.width / 2
+    const endDistance = opening.position[0] + opening.width / 2
+    const { leftBoundary, rightBoundary } = getAdjacentOpeningBounds(
+      {
+        id: opening.id,
+        wallId: wall.id,
+        startDistance,
+        endDistance,
+      },
+      openingsPolygons,
+    )
+    const faceOffsetDistance = (wall.thickness ?? 0.1) / 2
+    const openingFaceStart = {
+      x: wall.start[0] + tangent.x * startDistance + faceContext.outwardNormal.x * faceOffsetDistance,
+      y: wall.start[1] + tangent.y * startDistance + faceContext.outwardNormal.y * faceOffsetDistance,
+    }
+    const openingFaceEnd = {
+      x: wall.start[0] + tangent.x * endDistance + faceContext.outwardNormal.x * faceOffsetDistance,
+      y: wall.start[1] + tangent.y * endDistance + faceContext.outwardNormal.y * faceOffsetDistance,
+    }
+    const leftBoundaryPoint =
+      leftBoundary === null
+        ? faceContext.outerFace.start
+        : {
+            x: wall.start[0] + tangent.x * leftBoundary + faceContext.outwardNormal.x * faceOffsetDistance,
+            y: wall.start[1] + tangent.y * leftBoundary + faceContext.outwardNormal.y * faceOffsetDistance,
+          }
+    const rightBoundaryPoint =
+      rightBoundary === null
+        ? faceContext.outerFace.end
+        : {
+            x: wall.start[0] + tangent.x * rightBoundary + faceContext.outwardNormal.x * faceOffsetDistance,
+            y: wall.start[1] + tangent.y * rightBoundary + faceContext.outwardNormal.y * faceOffsetDistance,
+          }
+    const overlays: LinearMeasurementOverlay[] = []
+    const leftDistance = getPlanPointDistance(leftBoundaryPoint, openingFaceStart)
+
+    if (leftDistance >= 0.01) {
+      const overlay = getLinearMeasurementOverlay(
+        `${opening.id}:placement-left`,
+        leftBoundaryPoint,
+        openingFaceStart,
+        formatMeasurement(leftDistance, unit),
+        {
+          offsetDistance: FLOORPLAN_WALL_OUTER_MEASUREMENT_OFFSET,
+          offsetVector: faceContext.outwardNormal,
+        },
+      )
+
+      if (overlay) {
+        overlays.push({
+          ...overlay,
+          extensionStroke: FLOORPLAN_OPENING_MEASUREMENT_EXTENSION,
+          labelFill: FLOORPLAN_OPENING_MEASUREMENT_TEXT,
+          stroke: FLOORPLAN_OPENING_MEASUREMENT_STROKE,
+        })
+      }
+    }
+
+    const rightDistance = getPlanPointDistance(openingFaceEnd, rightBoundaryPoint)
+
+    if (rightDistance >= 0.01) {
+      const overlay = getLinearMeasurementOverlay(
+        `${opening.id}:placement-right`,
+        openingFaceEnd,
+        rightBoundaryPoint,
+        formatMeasurement(rightDistance, unit),
+        {
+          offsetDistance: FLOORPLAN_WALL_OUTER_MEASUREMENT_OFFSET,
+          offsetVector: faceContext.outwardNormal,
+        },
+      )
+
+      if (overlay) {
+        overlays.push({
+          ...overlay,
+          extensionStroke: FLOORPLAN_OPENING_MEASUREMENT_EXTENSION,
+          labelFill: FLOORPLAN_OPENING_MEASUREMENT_TEXT,
+          stroke: FLOORPLAN_OPENING_MEASUREMENT_STROKE,
+        })
+      }
+    }
+
+    return overlays
+  }, [displayWallPolygons, movingNode, openingsPolygons, unit])
   const selectedWallEntry = useMemo(() => {
     if (selectedIds.length !== 1) {
       return null
@@ -5611,6 +6240,13 @@ export function FloorplanPanel() {
 
     return displayWallPolygons.find(({ wall }) => wall.id === selectedIds[0]) ?? null
   }, [displayWallPolygons, selectedIds])
+  const selectedFenceEntry = useMemo(() => {
+    if (selectedIds.length !== 1) {
+      return null
+    }
+
+    return floorplanFenceEntries.find(({ fence }) => fence.id === selectedIds[0]) ?? null
+  }, [floorplanFenceEntries, selectedIds])
   const selectedStairEntry = useMemo(() => {
     if (selectedIds.length !== 1) {
       return null
@@ -5618,6 +6254,13 @@ export function FloorplanPanel() {
 
     return floorplanStairEntries.find(({ stair }) => stair.id === selectedIds[0]) ?? null
   }, [floorplanStairEntries, selectedIds])
+  const selectedRoofEntry = useMemo(() => {
+    if (selectedIds.length !== 1) {
+      return null
+    }
+
+    return floorplanRoofEntries.find(({ roof }) => roof.id === selectedIds[0]) ?? null
+  }, [floorplanRoofEntries, selectedIds])
   const slabById = useMemo(() => new Map(slabs.map((slab) => [slab.id, slab] as const)), [slabs])
   const zoneById = useMemo(() => new Map(zones.map((zone) => [zone.id, zone] as const)), [zones])
   const selectedSlabEntry = useMemo(() => {
@@ -5645,32 +6288,45 @@ export function FloorplanPanel() {
   const isSiteEditActive = phase === 'site'
   const isWallBuildActive = phase === 'structure' && mode === 'build' && tool === 'wall'
   const isSlabBuildActive = phase === 'structure' && mode === 'build' && tool === 'slab'
+  const isCeilingBuildActive = phase === 'structure' && mode === 'build' && tool === 'ceiling'
   const isZoneBuildActive = phase === 'structure' && mode === 'build' && tool === 'zone'
   const isDoorBuildActive = phase === 'structure' && mode === 'build' && tool === 'door'
   const isWindowBuildActive = phase === 'structure' && mode === 'build' && tool === 'window'
   const isPolygonBuildActive = isSlabBuildActive || isZoneBuildActive
+  const isPolygonDraftBuildActive = isPolygonBuildActive || isCeilingBuildActive
   const isOpeningBuildActive = isDoorBuildActive || isWindowBuildActive
   const isOpeningMoveActive = movingOpeningType !== null
   const isOpeningPlacementActive = isOpeningBuildActive || isOpeningMoveActive
+  const isFenceBuildActive = phase === 'structure' && mode === 'build' && tool === 'fence'
+  const isRoofBuildActive = phase === 'structure' && mode === 'build' && tool === 'roof'
   const isStairBuildActive = phase === 'structure' && mode === 'build' && tool === 'stair'
   const isStairMoveActive = movingNode?.type === 'stair'
+  const isRoofMoveActive = movingNode?.type === 'roof' || movingNode?.type === 'roof-segment'
   const isSlabMoveActive = movingNode?.type === 'slab'
   const isCeilingMoveActive = movingNode?.type === 'ceiling'
+  const isFenceMoveActive = movingNode?.type === 'fence'
   const isWallMoveActive = movingNode?.type === 'wall'
   const isWallCurveActive = curvingWall?.type === 'wall'
   const isFenceCurveActive = curvingFence?.type === 'fence'
+  const isFenceEndpointMoveActive = movingFenceEndpoint !== null
   const isItemPlacementPreviewActive =
     (mode === 'build' && tool === 'item') || movingNode?.type === 'item'
   const isFloorItemBuildActive = mode === 'build' && tool === 'item' && !selectedItem?.attachTo
   const isFloorItemMoveActive = movingNode?.type === 'item' && !movingNode.asset.attachTo
   const isFloorplanGridInteractionActive =
+    isFenceBuildActive ||
+    isRoofBuildActive ||
+    isCeilingBuildActive ||
     isStairBuildActive ||
     isStairMoveActive ||
+    isRoofMoveActive ||
     isSlabMoveActive ||
     isCeilingMoveActive ||
+    isFenceMoveActive ||
     isWallMoveActive ||
     isWallCurveActive ||
     isFenceCurveActive ||
+    isFenceEndpointMoveActive ||
     isFloorItemBuildActive ||
     isFloorItemMoveActive
   const floorplanPreviewStairSegment = useMemo(
@@ -5704,7 +6360,28 @@ export function FloorplanPanel() {
       metadata: { isTransient: true, isFloorplanPreview: true },
     })
 
-    return buildFloorplanStairEntry(previewStair, [floorplanPreviewStairSegment])
+    const entry = buildSharedFloorplanStairEntry(previewStair, [floorplanPreviewStairSegment])
+    if (!entry) {
+      return null
+    }
+    const hitPolygons =
+      (previewStair.stairType ?? 'straight') === 'straight'
+        ? entry.segments.map((segmentEntry) => segmentEntry.polygon)
+        : [getFloorplanCurvedStairHitPolygon(previewStair)]
+
+    return {
+      ...entry,
+      hitPolygons,
+      segments: entry.segments.map((segmentEntry) => ({
+        ...segmentEntry,
+        innerPoints: formatPolygonPoints(segmentEntry.innerPolygon),
+        points: formatPolygonPoints(segmentEntry.polygon),
+        treadBars: segmentEntry.treadBars.map((polygon) => ({
+          points: formatPolygonPoints(polygon),
+          polygon,
+        })),
+      })),
+    }
   }, [
     floorplanPreviewStairSegment,
     isStairBuildActive,
@@ -5734,12 +6411,14 @@ export function FloorplanPanel() {
     mode === 'select' &&
     floorplanSelectionTool === 'marquee' &&
     !movingNode &&
+    !movingFenceEndpoint &&
     structureLayer !== 'zones'
   const isDeleteMode = mode === 'delete' && !movingNode
   const canSelectElementFloorplanGeometry =
     mode === 'select' &&
     floorplanSelectionTool === 'click' &&
     !movingNode &&
+    !movingFenceEndpoint &&
     structureLayer !== 'zones'
   const canInteractElementFloorplanGeometry = isDeleteMode || canSelectElementFloorplanGeometry
   const canInteractFloorplanSlabs = isDeleteMode || canSelectElementFloorplanGeometry
@@ -5748,6 +6427,7 @@ export function FloorplanPanel() {
     mode === 'select' &&
     floorplanSelectionTool === 'click' &&
     !movingNode &&
+    !movingFenceEndpoint &&
     structureLayer === 'zones'
   const canInteractFloorplanZones = isDeleteMode || canSelectFloorplanZones
   const isFloorplanStructureContextActive = phase === 'structure' && structureLayer !== 'zones'
@@ -5758,27 +6438,32 @@ export function FloorplanPanel() {
     (mode === 'select' &&
       floorplanSelectionTool === 'click' &&
       !movingNode &&
+      !movingFenceEndpoint &&
       isFloorplanStructureContextActive) ||
     isDeleteMode
   const canSelectFloorplanItems =
     (mode === 'select' &&
       floorplanSelectionTool === 'click' &&
       !movingNode &&
+      !movingFenceEndpoint &&
       isFloorplanItemContextActive) ||
     isDeleteMode
   const canFocusFloorplanStairs =
     mode === 'select' &&
     floorplanSelectionTool === 'click' &&
     !movingNode &&
+    !movingFenceEndpoint &&
     isFloorplanStructureContextActive
   const canFocusFloorplanItems =
     mode === 'select' &&
     floorplanSelectionTool === 'click' &&
     !movingNode &&
+    !movingFenceEndpoint &&
     isFloorplanItemContextActive
   const visibleSitePolygon = phase === 'site' ? displaySitePolygon : null
   const shouldShowSiteBoundaryHandles = isSiteEditActive && visibleSitePolygon !== null
-  const shouldShowPersistentWallEndpointHandles = mode === 'select' && !movingNode
+  const shouldShowPersistentWallEndpointHandles =
+    mode === 'select' && !movingNode && !movingFenceEndpoint
   const shouldShowSlabBoundaryHandles =
     mode === 'select' &&
     !movingNode &&
@@ -5854,6 +6539,36 @@ export function FloorplanPanel() {
     shouldShowPersistentWallEndpointHandles,
     wallEndpointDraft,
   ])
+  const fenceEndpointHandles = useMemo(() => {
+    if (
+      isOpeningPlacementActive ||
+      movingNode ||
+      isFenceCurveActive ||
+      mode !== 'select' ||
+      floorplanSelectionTool !== 'click' ||
+      !selectedFenceEntry
+    ) {
+      return []
+    }
+
+    return (['start', 'end'] as const).map((endpoint) => ({
+      fence: selectedFenceEntry.fence,
+      endpoint,
+      point: endpoint === 'start' ? selectedFenceEntry.fence.start : selectedFenceEntry.fence.end,
+      isSelected: true,
+      isActive:
+        movingFenceEndpoint?.fence.id === selectedFenceEntry.fence.id &&
+        movingFenceEndpoint.endpoint === endpoint,
+    }))
+  }, [
+    floorplanSelectionTool,
+    isFenceCurveActive,
+    isOpeningPlacementActive,
+    mode,
+    movingFenceEndpoint,
+    movingNode,
+    selectedFenceEntry,
+  ])
   const wallCurveHandles = useMemo(() => {
     if (
       isOpeningPlacementActive ||
@@ -6003,15 +6718,53 @@ export function FloorplanPanel() {
       return null
     }
 
-    const draftWall = getFloorplanWall(buildDraftWall(levelId, draftStart, draftEnd))
+    const draftWall = getSharedFloorplanWall(buildDraftWall(levelId, draftStart, draftEnd))
     // Keep the live draft preview cheap; full level-wide mitering here runs on every mouse move.
     return getWallPlanFootprint(draftWall, EMPTY_WALL_MITER_DATA)
   }, [draftEnd, draftStart, levelId])
   const draftPolygonPoints = useMemo(
-    () => (draftPolygon ? formatPolygonPoints(draftPolygon) : null),
-    [draftPolygon],
+    () => {
+      if (isRoofBuildActive && roofDraftStart && roofDraftEnd) {
+        const minX = Math.min(roofDraftStart[0], roofDraftEnd[0])
+        const maxX = Math.max(roofDraftStart[0], roofDraftEnd[0])
+        const minY = Math.min(roofDraftStart[1], roofDraftEnd[1])
+        const maxY = Math.max(roofDraftStart[1], roofDraftEnd[1])
+
+        if (Math.abs(maxX - minX) >= 1e-6 || Math.abs(maxY - minY) >= 1e-6) {
+          return formatPolygonPoints([
+            { x: minX, y: minY },
+            { x: maxX, y: minY },
+            { x: maxX, y: maxY },
+            { x: minX, y: maxY },
+          ])
+        }
+      }
+
+      return draftPolygon ? formatPolygonPoints(draftPolygon) : null
+    },
+    [draftPolygon, isRoofBuildActive, roofDraftEnd, roofDraftStart],
   )
+  const fenceDraftSegment = useMemo(() => {
+    if (!(isFenceBuildActive && fenceDraftStart && fenceDraftEnd)) {
+      return null
+    }
+
+    if (getPlanPointDistance(toPoint2D(fenceDraftStart), toPoint2D(fenceDraftEnd)) < 1e-6) {
+      return null
+    }
+
+    return {
+      x1: toSvgX(fenceDraftStart[0]),
+      y1: toSvgY(fenceDraftStart[1]),
+      x2: toSvgX(fenceDraftEnd[0]),
+      y2: toSvgY(fenceDraftEnd[1]),
+    }
+  }, [fenceDraftEnd, fenceDraftStart, isFenceBuildActive])
   const activePolygonDraftPoints = useMemo(() => {
+    if (isCeilingBuildActive) {
+      return ceilingDraftPoints
+    }
+
     if (isZoneBuildActive) {
       return zoneDraftPoints
     }
@@ -6021,23 +6774,30 @@ export function FloorplanPanel() {
     }
 
     return [] as WallPlanPoint[]
-  }, [isSlabBuildActive, isZoneBuildActive, slabDraftPoints, zoneDraftPoints])
+  }, [
+    ceilingDraftPoints,
+    isCeilingBuildActive,
+    isSlabBuildActive,
+    isZoneBuildActive,
+    slabDraftPoints,
+    zoneDraftPoints,
+  ])
   const polygonDraftPolylinePoints = useMemo(() => {
-    if (!(isPolygonBuildActive && cursorPoint && activePolygonDraftPoints.length > 0)) {
+    if (!(isPolygonDraftBuildActive && cursorPoint && activePolygonDraftPoints.length > 0)) {
       return null
     }
 
     return formatPolygonPoints([...activePolygonDraftPoints.map(toPoint2D), toPoint2D(cursorPoint)])
-  }, [activePolygonDraftPoints, cursorPoint, isPolygonBuildActive])
+  }, [activePolygonDraftPoints, cursorPoint, isPolygonDraftBuildActive])
   const polygonDraftPolygonPoints = useMemo(() => {
-    if (!(isPolygonBuildActive && cursorPoint && activePolygonDraftPoints.length >= 2)) {
+    if (!(isPolygonDraftBuildActive && cursorPoint && activePolygonDraftPoints.length >= 2)) {
       return null
     }
 
     return formatPolygonPoints([...activePolygonDraftPoints.map(toPoint2D), toPoint2D(cursorPoint)])
-  }, [activePolygonDraftPoints, cursorPoint, isPolygonBuildActive])
+  }, [activePolygonDraftPoints, cursorPoint, isPolygonDraftBuildActive])
   const polygonDraftClosingSegment = useMemo(() => {
-    if (!(isPolygonBuildActive && cursorPoint && activePolygonDraftPoints.length >= 2)) {
+    if (!(isPolygonDraftBuildActive && cursorPoint && activePolygonDraftPoints.length >= 2)) {
       return null
     }
 
@@ -6052,18 +6812,21 @@ export function FloorplanPanel() {
       x2: toSvgX(firstPoint[0]),
       y2: toSvgY(firstPoint[1]),
     }
-  }, [activePolygonDraftPoints, cursorPoint, isPolygonBuildActive])
+  }, [activePolygonDraftPoints, cursorPoint, isPolygonDraftBuildActive])
 
   const svgAspectRatio = surfaceSize.width / surfaceSize.height || 1
 
   const fittedViewport = useMemo(() => {
     const allPoints = [
       ...(visibleSitePolygon ? visibleSitePolygon.polygon : []),
+      ...ceilingPolygons.flatMap((entry) => entry.polygon),
       ...displaySlabPolygons.flatMap((entry) => entry.polygon),
+      ...floorplanFenceEntries.flatMap((entry) => entry.centerline),
       ...floorplanItemEntries.flatMap((entry) => entry.polygon),
-      ...floorplanStairEntries.flatMap((entry) =>
+      ...floorplanRoofEntries.flatMap((entry) =>
         entry.segments.flatMap((segmentEntry) => segmentEntry.polygon),
       ),
+      ...floorplanStairEntries.flatMap((entry) => entry.hitPolygons.flat()),
       ...visibleZonePolygons.flatMap((entry) => entry.polygon),
       ...wallPolygons.flatMap((entry) => entry.polygon),
     ]
@@ -6103,8 +6866,11 @@ export function FloorplanPanel() {
       width,
     }
   }, [
+    ceilingPolygons,
     displaySlabPolygons,
+    floorplanFenceEntries,
     floorplanItemEntries,
+    floorplanRoofEntries,
     floorplanStairEntries,
     svgAspectRatio,
     visibleSitePolygon,
@@ -6169,10 +6935,35 @@ export function FloorplanPanel() {
       return
     }
 
-    if (!hasUserAdjustedViewportRef.current) {
+    // While the cursor drives live geometry (items, drafts, moves), `fittedViewport` changes every
+    // pointermove. Syncing `viewport` here would call setState in a tight loop (max update depth).
+    const transientFloorplanFit =
+      cursorPoint != null ||
+      movingNode != null ||
+      movingFenceEndpoint != null ||
+      curvingWall != null ||
+      curvingFence != null ||
+      slabVertexDragState != null ||
+      siteVertexDragState != null ||
+      zoneVertexDragState != null ||
+      isPolygonDraftBuildActive
+
+    if (!hasUserAdjustedViewportRef.current && !transientFloorplanFit) {
       setViewport((current) => (floorplanViewportEquals(current, fittedViewport) ? current : fittedViewport))
     }
-  }, [fittedViewport, levelId])
+  }, [
+    curvingFence,
+    curvingWall,
+    cursorPoint,
+    fittedViewport,
+    isPolygonDraftBuildActive,
+    levelId,
+    movingFenceEndpoint,
+    movingNode,
+    siteVertexDragState,
+    slabVertexDragState,
+    zoneVertexDragState,
+  ])
 
   const viewBox = useMemo(() => {
     const currentViewport = viewport ?? fittedViewport
@@ -6200,6 +6991,14 @@ export function FloorplanPanel() {
     () => floorplanWorldUnitsPerPixel * (FLOORPLAN_OPENING_HIT_STROKE_WIDTH / 2),
     [floorplanWorldUnitsPerPixel],
   )
+  const wallSelectionHatchSpacing = useMemo(
+    () => Math.max(floorplanWorldUnitsPerPixel * 12, 0.0001),
+    [floorplanWorldUnitsPerPixel],
+  )
+  const wallSelectionHatchStrokeWidth = useMemo(
+    () => Math.max(floorplanWorldUnitsPerPixel, 0.0001),
+    [floorplanWorldUnitsPerPixel],
+  )
   const selectedOpeningActionMenuPosition = useMemo(
     () =>
       selectedOpeningEntry
@@ -6235,16 +7034,30 @@ export function FloorplanPanel() {
         : null,
     [selectedWallEntry, surfaceSize, viewBox],
   )
+  const selectedFenceActionMenuPosition = useMemo(
+    () =>
+      selectedFenceEntry
+        ? getFloorplanActionMenuPosition(selectedFenceEntry.centerline, viewBox, surfaceSize)
+        : null,
+    [selectedFenceEntry, surfaceSize, viewBox],
+  )
   const selectedStairActionMenuPosition = useMemo(
     () =>
       selectedStairEntry
+        ? getFloorplanActionMenuPosition(selectedStairEntry.hitPolygons.flat(), viewBox, surfaceSize)
+        : null,
+    [selectedStairEntry, surfaceSize, viewBox],
+  )
+  const selectedRoofActionMenuPosition = useMemo(
+    () =>
+      selectedRoofEntry
         ? getFloorplanActionMenuPosition(
-            selectedStairEntry.segments.flatMap((segmentEntry) => segmentEntry.polygon),
+            selectedRoofEntry.segments.flatMap(({ polygon }) => polygon),
             viewBox,
             surfaceSize,
           )
         : null,
-    [selectedStairEntry, surfaceSize, viewBox],
+    [selectedRoofEntry, surfaceSize, viewBox],
   )
   const floorplanCursorAnchorPosition = useMemo(() => {
     if (
@@ -6371,18 +7184,25 @@ export function FloorplanPanel() {
             majorGrid: '#94a3b8',
             minorGridOpacity: 0.7,
             majorGridOpacity: 0.9,
-            slabFill: '#5f6483',
-            slabStroke: '#71717a',
-            selectedSlabFill: '#b7b5f7',
-            wallFill: '#fafafa',
-            wallStroke: '#38bdf8',
-            wallHoverStroke: '#a1a1aa',
+            slabFill: 'rgba(100, 116, 139, 0.16)',
+            slabStroke: 'rgba(148, 163, 184, 0.45)',
+            selectedSlabFill: 'rgba(167, 139, 250, 0.14)',
+            selectedSlabStroke: '#a78bfa',
+            ceilingFill: 'rgba(56, 189, 248, 0.12)',
+            ceilingStroke: '#38bdf8',
+            selectedCeilingFill: 'rgba(59, 130, 246, 0.16)',
+            selectedCeilingStroke: '#2563eb',
+            wallFill: '#ffffff',
+            wallStroke: 'rgba(31, 41, 55, 0.9)',
+            wallInnerStroke: 'rgba(51, 65, 85, 0.72)',
+            wallShadow: 'rgba(15, 23, 42, 0.12)',
+            wallHoverStroke: '#60a5fa',
             deleteFill: '#f87171',
             deleteStroke: '#ef4444',
             deleteWallFill: '#ef4444',
             deleteWallHoverStroke: '#fca5a5',
-            selectedFill: '#8381ed',
-            selectedStroke: '#8381ed',
+            selectedFill: '#fafafa',
+            selectedStroke: '#3b82f6',
             draftFill: '#818cf8',
             draftStroke: '#c7d2fe',
             measurementStroke: '#cbd5e1',
@@ -6391,11 +7211,14 @@ export function FloorplanPanel() {
             anchor: '#818cf8',
             openingFill: '#0a0e1b',
             openingStroke: '#fafafa',
-            endpointHandleFill: '#09090b',
-            endpointHandleStroke: '#a1a1aa',
-            endpointHandleHoverStroke: '#d4d4d8',
-            endpointHandleActiveFill: '#8381ed',
-            endpointHandleActiveStroke: '#8381ed',
+            endpointHandleFill: '#fff7ed',
+            endpointHandleStroke: '#c2410c',
+            endpointHandleHoverStroke: '#fb923c',
+            endpointHandleActiveFill: '#fff7ed',
+            endpointHandleActiveStroke: '#f97316',
+            curveHandleFill: '#ccfbf1',
+            curveHandleStroke: '#0f766e',
+            curveHandleHoverStroke: '#14b8a6',
           }
         : {
             surface: '#ffffff',
@@ -6403,18 +7226,25 @@ export function FloorplanPanel() {
             majorGrid: '#475569',
             minorGridOpacity: 0.7,
             majorGridOpacity: 0.9,
-            slabFill: '#c4c4cc',
-            slabStroke: '#52525b',
-            selectedSlabFill: '#b7b5f7',
-            wallFill: '#171717',
-            wallStroke: '#0284c7',
-            wallHoverStroke: '#71717a',
+            slabFill: 'rgba(148, 163, 184, 0.22)',
+            slabStroke: 'rgba(100, 116, 139, 0.55)',
+            selectedSlabFill: 'rgba(167, 139, 250, 0.14)',
+            selectedSlabStroke: '#a78bfa',
+            ceilingFill: 'rgba(14, 165, 233, 0.12)',
+            ceilingStroke: '#0ea5e9',
+            selectedCeilingFill: 'rgba(59, 130, 246, 0.16)',
+            selectedCeilingStroke: '#2563eb',
+            wallFill: '#ffffff',
+            wallStroke: 'rgba(31, 41, 55, 0.9)',
+            wallInnerStroke: 'rgba(71, 85, 105, 0.58)',
+            wallShadow: 'rgba(15, 23, 42, 0.1)',
+            wallHoverStroke: '#60a5fa',
             deleteFill: '#fca5a5',
             deleteStroke: '#dc2626',
             deleteWallFill: '#ef4444',
             deleteWallHoverStroke: '#f87171',
-            selectedFill: '#8381ed',
-            selectedStroke: '#8381ed',
+            selectedFill: '#ffffff',
+            selectedStroke: '#3b82f6',
             draftFill: '#6366f1',
             draftStroke: '#4338ca',
             measurementStroke: '#334155',
@@ -6423,14 +7253,18 @@ export function FloorplanPanel() {
             anchor: '#4338ca',
             openingFill: '#ffffff',
             openingStroke: '#171717',
-            endpointHandleFill: '#ffffff',
-            endpointHandleStroke: '#71717a',
-            endpointHandleHoverStroke: '#52525b',
-            endpointHandleActiveFill: '#8381ed',
-            endpointHandleActiveStroke: '#8381ed',
+            endpointHandleFill: '#fff7ed',
+            endpointHandleStroke: '#c2410c',
+            endpointHandleHoverStroke: '#fb923c',
+            endpointHandleActiveFill: '#fff7ed',
+            endpointHandleActiveStroke: '#f97316',
+            curveHandleFill: '#ccfbf1',
+            curveHandleStroke: '#0f766e',
+            curveHandleHoverStroke: '#14b8a6',
           },
     [theme],
   )
+  const wallSelectionHatchId = useMemo(() => `floorplan-wall-selection-hatch-${theme}`, [theme])
   const gridSteps = useMemo(
     () => getVisibleGridSteps(viewBox.width, surfaceSize.width),
     [surfaceSize.width, viewBox.width],
@@ -6465,7 +7299,8 @@ export function FloorplanPanel() {
   const getSvgPointFromClientPoint = useCallback(
     (clientX: number, clientY: number): SvgPoint | null => {
       const svg = svgRef.current
-      const ctm = svg?.getScreenCTM()
+      const target = floorplanSceneRef.current ?? svg
+      const ctm = target?.getScreenCTM()
       if (!(svg && ctm)) {
         return null
       }
@@ -6487,8 +7322,8 @@ export function FloorplanPanel() {
         return null
       }
 
-      if (buildingRotationY !== 0) {
-        const [unrotX, unrotY] = rotatePlanVector(svgPoint.x, svgPoint.y, buildingRotationY)
+      if (!floorplanSceneRef.current && buildingRotationY !== 0) {
+        const [unrotX, unrotY] = rotatePlanVector(svgPoint.x, svgPoint.y, -buildingRotationY)
         return toPlanPointFromSvgPoint({ x: unrotX, y: unrotY })
       }
 
@@ -6704,6 +7539,17 @@ export function FloorplanPanel() {
     setDraftStart(null)
     setDraftEnd(null)
   }, [])
+  const clearFencePlacementDraft = useCallback(() => {
+    setFenceDraftStart(null)
+    setFenceDraftEnd(null)
+  }, [])
+  const clearRoofPlacementDraft = useCallback(() => {
+    setRoofDraftStart(null)
+    setRoofDraftEnd(null)
+  }, [])
+  const clearCeilingPlacementDraft = useCallback(() => {
+    setCeilingDraftPoints([])
+  }, [])
   const clearSlabPlacementDraft = useCallback(() => {
     setSlabDraftPoints([])
   }, [])
@@ -6739,6 +7585,9 @@ export function FloorplanPanel() {
 
   const clearDraft = useCallback(() => {
     clearWallPlacementDraft()
+    clearFencePlacementDraft()
+    clearRoofPlacementDraft()
+    clearCeilingPlacementDraft()
     clearSlabPlacementDraft()
     clearZonePlacementDraft()
     clearWallEndpointDrag()
@@ -6748,6 +7597,9 @@ export function FloorplanPanel() {
     clearZoneBoundaryInteraction()
     setCursorPoint(null)
   }, [
+    clearFencePlacementDraft,
+    clearCeilingPlacementDraft,
+    clearRoofPlacementDraft,
     clearWallCurveDrag,
     clearSiteBoundaryInteraction,
     clearSlabBoundaryInteraction,
@@ -6759,12 +7611,23 @@ export function FloorplanPanel() {
   ])
 
   useEffect(() => {
-    if (isWallBuildActive || isPolygonBuildActive) {
+    if (
+      isWallBuildActive ||
+      isFenceBuildActive ||
+      isRoofBuildActive ||
+      isPolygonDraftBuildActive
+    ) {
       return
     }
 
     clearDraft()
-  }, [clearDraft, isPolygonBuildActive, isWallBuildActive])
+  }, [
+    clearDraft,
+    isFenceBuildActive,
+    isPolygonDraftBuildActive,
+    isRoofBuildActive,
+    isWallBuildActive,
+  ])
 
   useEffect(() => {
     const handleCancel = () => {
@@ -6827,7 +7690,9 @@ export function FloorplanPanel() {
     }
 
     const handleGridMove = (event: GridEvent) => {
-      setStairBuildPreviewPoint(getSnappedFloorplanPoint([event.position[0], event.position[2]]))
+      setStairBuildPreviewPoint(
+        getSnappedFloorplanPoint([event.localPosition[0], event.localPosition[2]]),
+      )
     }
 
     emitter.on('grid:move', handleGridMove)
@@ -6843,7 +7708,7 @@ export function FloorplanPanel() {
     }
 
     const refreshFloorplanItemPreview = () => {
-      setMovingFloorplanNodeRevision((current) => current + 1)
+      scheduleMovingFloorplanNodeRefresh()
     }
 
     emitter.on('grid:move', refreshFloorplanItemPreview)
@@ -6869,7 +7734,106 @@ export function FloorplanPanel() {
       emitter.off('item:move', refreshFloorplanItemPreview as any)
       emitter.off('item:leave', refreshFloorplanItemPreview as any)
     }
-  }, [isItemPlacementPreviewActive])
+  }, [isItemPlacementPreviewActive, scheduleMovingFloorplanNodeRefresh])
+
+  useEffect(() => {
+    if (!hasPendingItemMeshFootprints) {
+      return
+    }
+
+    scheduleMovingFloorplanNodeRefresh()
+  }, [hasPendingItemMeshFootprints, scheduleMovingFloorplanNodeRefresh])
+
+  useEffect(() => {
+    if (!(movingNode?.type === 'door' || movingNode?.type === 'window')) {
+      return
+    }
+
+    const movingOpeningId = movingNode.id
+    const refreshOpeningPreview = () => {
+      scheduleMovingFloorplanNodeRefresh()
+    }
+
+    refreshOpeningPreview()
+
+    const unsubscribe = useLiveTransforms.subscribe((state, previousState) => {
+      const nextTransform = state.transforms.get(movingOpeningId)
+      const previousTransform = previousState.transforms.get(movingOpeningId)
+
+      if (nextTransform !== previousTransform) {
+        refreshOpeningPreview()
+      }
+    })
+
+    return unsubscribe
+  }, [movingNode, scheduleMovingFloorplanNodeRefresh])
+
+  useEffect(() => {
+    if (movingNode?.type !== 'fence') {
+      return
+    }
+
+    const movingFence = fences.find((fence) => fence.id === movingNode.id)
+    const watchedFenceIds = new Set<FenceNode['id']>([movingNode.id])
+
+    if (movingFence) {
+      for (const fence of fences) {
+        if (fence.id === movingFence.id) {
+          continue
+        }
+
+        if (
+          pointsEqual(fence.start, movingFence.start) ||
+          pointsEqual(fence.start, movingFence.end) ||
+          pointsEqual(fence.end, movingFence.start) ||
+          pointsEqual(fence.end, movingFence.end)
+        ) {
+          watchedFenceIds.add(fence.id)
+        }
+      }
+    }
+
+    const refreshFencePreview = () => {
+      scheduleMovingFloorplanNodeRefresh()
+    }
+
+    refreshFencePreview()
+
+    const unsubscribe = useLiveTransforms.subscribe((state, previousState) => {
+      for (const fenceId of watchedFenceIds) {
+        if (state.transforms.get(fenceId) !== previousState.transforms.get(fenceId)) {
+          refreshFencePreview()
+          break
+        }
+      }
+    })
+
+    return unsubscribe
+  }, [fences, movingNode, scheduleMovingFloorplanNodeRefresh])
+
+  useEffect(() => {
+    if (!(movingNode?.type === 'roof' || movingNode?.type === 'roof-segment')) {
+      return
+    }
+
+    const movingRoofNodeId = movingNode.id
+    const refreshRoofPreview = () => {
+      scheduleMovingFloorplanNodeRefresh()
+    }
+
+    refreshRoofPreview()
+
+    const unsubscribe = useLiveTransforms.subscribe((state, previousState) => {
+      const nextTransform = state.transforms.get(movingRoofNodeId)
+      const previousTransform = previousState.transforms.get(movingRoofNodeId)
+
+      if (nextTransform !== previousTransform) {
+        refreshRoofPreview()
+      }
+    })
+
+    return unsubscribe
+  }, [movingNode, scheduleMovingFloorplanNodeRefresh])
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -6954,6 +7918,40 @@ export function FloorplanPanel() {
         return
       }
 
+      const pendingFenceDrag = pendingFenceDragRef.current
+      if (pendingFenceDrag && event.pointerId === pendingFenceDrag.pointerId) {
+        const dragDistance = Math.hypot(
+          event.clientX - pendingFenceDrag.startClientX,
+          event.clientY - pendingFenceDrag.startClientY,
+        )
+
+        if (dragDistance < FLOORPLAN_MARQUEE_DRAG_THRESHOLD_PX) {
+          return
+        }
+
+        pendingFenceDragRef.current = null
+
+        const fenceNode = useScene.getState().nodes[pendingFenceDrag.fenceId as AnyNodeId]
+        if (!(fenceNode && fenceNode.type === 'fence')) {
+          return
+        }
+
+        const suppressClick = (clickEvent: MouseEvent) => {
+          clickEvent.stopImmediatePropagation()
+          clickEvent.preventDefault()
+          window.removeEventListener('click', suppressClick, true)
+        }
+        window.addEventListener('click', suppressClick, true)
+        requestAnimationFrame(() => {
+          window.removeEventListener('click', suppressClick, true)
+        })
+
+        sfxEmitter.emit('sfx:item-pick')
+        setMovingNode(fenceNode)
+        setSelection({ selectedIds: [] })
+        return
+      }
+
       const dragState = wallEndpointDragRef.current
       if (dragState && event.pointerId === dragState.pointerId) {
         event.preventDefault()
@@ -6978,11 +7976,25 @@ export function FloorplanPanel() {
         dragState.currentPoint = snappedPoint
         setCursorPoint(snappedPoint)
         setWallEndpointDraft((previousDraft) => {
+          const primaryDraft = buildWallEndpointDraft(
+            dragState.wallId,
+            dragState.endpoint,
+            dragState.fixedPoint,
+            snappedPoint,
+          )
+          const linkedWallUpdates = getLinkedWallUpdates(
+            dragState.linkedWalls,
+            dragState.originalStart,
+            dragState.originalEnd,
+            primaryDraft.start,
+            primaryDraft.end,
+          )
           const nextDraft = buildWallEndpointDraft(
             dragState.wallId,
             dragState.endpoint,
             dragState.fixedPoint,
             snappedPoint,
+            linkedWallUpdates,
           )
 
           if (
@@ -7095,21 +8107,43 @@ export function FloorplanPanel() {
 
       const wall = wallById.get(dragState.wallId)
       if (wall) {
-        const nextDraft = buildWallEndpointDraft(
+        const primaryDraft = buildWallEndpointDraft(
           dragState.wallId,
           dragState.endpoint,
           dragState.fixedPoint,
           dragState.currentPoint,
         )
-        const hasChanged = !(
-          pointsEqual(nextDraft.start, wall.start) && pointsEqual(nextDraft.end, wall.end)
+        const nextDraft = buildWallEndpointDraft(
+          dragState.wallId,
+          dragState.endpoint,
+          dragState.fixedPoint,
+          dragState.currentPoint,
+          getLinkedWallUpdates(
+            dragState.linkedWalls,
+            dragState.originalStart,
+            dragState.originalEnd,
+            primaryDraft.start,
+            primaryDraft.end,
+          ),
         )
+        const commitUpdates = getWallEndpointDraftUpdates(nextDraft).filter((update) => {
+          const currentWall = wallById.get(update.id)
+          return (
+            currentWall &&
+            !(pointsEqual(update.start, currentWall.start) && pointsEqual(update.end, currentWall.end))
+          )
+        })
 
-        if (hasChanged && isWallLongEnough(nextDraft.start, nextDraft.end)) {
-          updateNode(wall.id, {
-            start: nextDraft.start,
-            end: nextDraft.end,
-          })
+        if (commitUpdates.length > 0 && isWallLongEnough(nextDraft.start, nextDraft.end)) {
+          useScene.getState().updateNodes(
+            commitUpdates.map((update) => ({
+              id: update.id as AnyNodeId,
+              data: {
+                start: update.start,
+                end: update.end,
+              },
+            })),
+          )
           sfxEmitter.emit('sfx:structure-build')
         }
       }
@@ -7158,7 +8192,18 @@ export function FloorplanPanel() {
       setCursorPoint(null)
     }
 
+    const clearPendingFenceDrag = (event: PointerEvent) => {
+      const pendingFenceDrag = pendingFenceDragRef.current
+      if (!pendingFenceDrag || event.pointerId !== pendingFenceDrag.pointerId) {
+        return
+      }
+
+      pendingFenceDragRef.current = null
+    }
+
     window.addEventListener('pointermove', handleWindowPointerMove)
+    window.addEventListener('pointerup', clearPendingFenceDrag)
+    window.addEventListener('pointercancel', clearPendingFenceDrag)
     window.addEventListener('pointerup', commitGuideInteraction)
     window.addEventListener('pointercancel', cancelGuideInteraction)
     window.addEventListener('pointerup', commitWallEndpointDrag)
@@ -7168,6 +8213,8 @@ export function FloorplanPanel() {
 
     return () => {
       window.removeEventListener('pointermove', handleWindowPointerMove)
+      window.removeEventListener('pointerup', clearPendingFenceDrag)
+      window.removeEventListener('pointercancel', clearPendingFenceDrag)
       window.removeEventListener('pointerup', commitGuideInteraction)
       window.removeEventListener('pointercancel', cancelGuideInteraction)
       window.removeEventListener('pointerup', commitWallEndpointDrag)
@@ -7182,6 +8229,8 @@ export function FloorplanPanel() {
     getSvgPointFromClientPoint,
     guideById,
     getPlanPointFromClientPoint,
+    setMovingNode,
+    setSelection,
     shiftPressed,
     updateNode,
     wallById,
@@ -7189,6 +8238,7 @@ export function FloorplanPanel() {
   ])
 
   useEffect(() => {
+    pendingFenceDragRef.current = null
     clearWallEndpointDrag()
     clearWallCurveDrag()
   }, [clearWallCurveDrag, clearWallEndpointDrag, levelId])
@@ -7549,6 +8599,18 @@ export function FloorplanPanel() {
   }, [])
 
   const hoveredWallIdRef = useRef<string | null>(null)
+  const floorplanGridLocalY = useMemo(() => {
+    if (movingNode?.type === 'item') {
+      return movingNode.position[1]
+    }
+
+    if (levelId) {
+      return sceneRegistry.nodes.get(levelId as AnyNodeId)?.position.y ?? 0
+    }
+
+    return 0
+  }, [levelId, movingNode])
+  const floorplanGridWorldY = buildingPosition[1] + floorplanGridLocalY
   const emitFloorplanWallLeave = useCallback((wallId: string | null) => {
     if (!wallId) {
       return
@@ -7568,23 +8630,25 @@ export function FloorplanPanel() {
   }, [])
   const emitFloorplanGridEvent = useCallback(
     (
-      eventType: 'move' | 'click',
+      eventType: 'move' | 'click' | 'double-click',
       planPoint: WallPlanPoint,
       nativeEvent: ReactMouseEvent<SVGSVGElement> | ReactPointerEvent<SVGSVGElement>,
     ) => {
       const snappedPoint = getSnappedFloorplanPoint(planPoint)
-      const worldY =
-        movingNode?.type === 'stair' || movingNode?.type === 'item' ? movingNode.position[1] : 0
+      const cos = Math.cos(buildingRotationY)
+      const sin = Math.sin(buildingRotationY)
+      const worldX = buildingPosition[0] + snappedPoint[0] * cos - snappedPoint[1] * sin
+      const worldZ = buildingPosition[2] + snappedPoint[0] * sin + snappedPoint[1] * cos
 
       emitter.emit(`grid:${eventType}` as any, {
         nativeEvent: nativeEvent.nativeEvent as any,
-        position: [snappedPoint[0], worldY, snappedPoint[1]],
-        localPosition: [snappedPoint[0], worldY, snappedPoint[1]],
+        position: [worldX, floorplanGridWorldY, worldZ],
+        localPosition: [snappedPoint[0], floorplanGridLocalY, snappedPoint[1]],
       })
 
       return snappedPoint
     },
-    [movingNode],
+    [buildingPosition, buildingRotationY, floorplanGridLocalY, floorplanGridWorldY],
   )
 
   const handlePointerMove = useCallback(
@@ -7635,6 +8699,59 @@ export function FloorplanPanel() {
         return
       }
 
+      if (isCeilingBuildActive) {
+        emitFloorplanGridEvent('move', planPoint, event)
+
+        const snappedPoint = snapPolygonDraftPoint({
+          point: planPoint,
+          start: ceilingDraftPoints[ceilingDraftPoints.length - 1],
+          angleSnap: ceilingDraftPoints.length > 0 && !shiftPressed,
+        })
+
+        setCursorPoint((previousPoint) =>
+          previousPoint && pointsEqual(previousPoint, snappedPoint) ? previousPoint : snappedPoint,
+        )
+        return
+      }
+
+      if (isRoofBuildActive) {
+        const snappedPoint = getSnappedFloorplanPoint(planPoint)
+        emitFloorplanGridEvent('move', snappedPoint, event)
+        setCursorPoint((previousPoint) =>
+          previousPoint && pointsEqual(previousPoint, snappedPoint) ? previousPoint : snappedPoint,
+        )
+
+        if (roofDraftStart) {
+          setRoofDraftEnd((previousPoint) =>
+            previousPoint && pointsEqual(previousPoint, snappedPoint) ? previousPoint : snappedPoint,
+          )
+        }
+        return
+      }
+
+      if (isFenceBuildActive) {
+        emitFloorplanGridEvent('move', planPoint, event)
+
+        const snappedPoint = snapFenceDraftPoint({
+          point: planPoint,
+          walls,
+          fences,
+          start: fenceDraftStart ?? undefined,
+          angleSnap: Boolean(fenceDraftStart) && !shiftPressed,
+        })
+
+        setCursorPoint((previousPoint) =>
+          previousPoint && pointsEqual(previousPoint, snappedPoint) ? previousPoint : snappedPoint,
+        )
+
+        if (fenceDraftStart) {
+          setFenceDraftEnd((previousEnd) =>
+            previousEnd && pointsEqual(previousEnd, snappedPoint) ? previousEnd : snappedPoint,
+          )
+        }
+        return
+      }
+
       if (isFloorplanGridInteractionActive) {
         const snappedPoint = emitFloorplanGridEvent('move', planPoint, event)
         setCursorPoint((previousPoint) =>
@@ -7736,17 +8853,24 @@ export function FloorplanPanel() {
     },
     [
       draftStart,
+      ceilingDraftPoints,
       emitFloorplanWallLeave,
       emitFloorplanGridEvent,
+      fences,
+      fenceDraftStart,
       floorplanOpeningLocalY,
       fittedViewport,
       getPlanPointFromClientPoint,
       activePolygonDraftPoints,
+      isCeilingBuildActive,
+      isFenceBuildActive,
       isFloorplanGridInteractionActive,
       isMarqueeSelectionToolActive,
       isOpeningPlacementActive,
       isPolygonBuildActive,
+      isRoofBuildActive,
       isWallBuildActive,
+      roofDraftStart,
       siteVertexDragState,
       slabVertexDragState,
       shiftPressed,
@@ -7806,6 +8930,53 @@ export function FloorplanPanel() {
     },
     [clearDraft, createSlabOnCurrentLevel, slabDraftPoints],
   )
+  const handleCeilingPlacementPoint = useCallback(
+    (point: WallPlanPoint) => {
+      const lastPoint = ceilingDraftPoints[ceilingDraftPoints.length - 1]
+      if (lastPoint && pointsEqual(lastPoint, point)) {
+        return
+      }
+
+      const firstPoint = ceilingDraftPoints[0]
+      if (
+        firstPoint &&
+        ceilingDraftPoints.length >= 3 &&
+        isPointNearPlanPoint(point, firstPoint)
+      ) {
+        clearCeilingPlacementDraft()
+        return
+      }
+
+      setCeilingDraftPoints((currentPoints) => [...currentPoints, point])
+      setCursorPoint(point)
+    },
+    [ceilingDraftPoints, clearCeilingPlacementDraft],
+  )
+  const handleCeilingPlacementConfirm = useCallback(
+    (point?: WallPlanPoint) => {
+      const firstPoint = ceilingDraftPoints[0]
+      const lastPoint = ceilingDraftPoints[ceilingDraftPoints.length - 1]
+
+      let nextPoints = ceilingDraftPoints
+      if (point) {
+        const isClosingExistingPolygon = Boolean(
+          firstPoint && ceilingDraftPoints.length >= 3 && isPointNearPlanPoint(point, firstPoint),
+        )
+        const isDuplicatePoint = Boolean(lastPoint && pointsEqual(lastPoint, point))
+
+        if (!(isClosingExistingPolygon || isDuplicatePoint)) {
+          nextPoints = [...ceilingDraftPoints, point]
+        }
+      }
+
+      if (nextPoints.length < 3) {
+        return
+      }
+
+      clearCeilingPlacementDraft()
+    },
+    [ceilingDraftPoints, clearCeilingPlacementDraft],
+  )
   const handleZonePlacementPoint = useCallback(
     (point: WallPlanPoint) => {
       const lastPoint = zoneDraftPoints[zoneDraftPoints.length - 1]
@@ -7870,6 +9041,56 @@ export function FloorplanPanel() {
     },
     [clearDraft, draftStart],
   )
+  const { getFloorplanHitIdAtPoint, getFloorplanSelectionIdsInBounds } = useFloorplanHitTesting({
+    ceilingPolygons,
+    displaySlabPolygons,
+    displayWallPolygons,
+    floorplanItemEntries,
+    floorplanOpeningHitTolerance,
+    floorplanRoofEntries,
+    floorplanStairEntries,
+    floorplanWallHitTolerance,
+    getOpeningCenterLine,
+    isFloorplanItemContextActive,
+    openingsPolygons,
+    phase,
+    toPoint2D,
+  })
+  const { handleBackgroundPlacementClick } = useFloorplanBackgroundPlacement({
+    activePolygonDraftPoints,
+    ceilingDraftPoints,
+    clearFencePlacementDraft,
+    clearRoofPlacementDraft,
+    emitFloorplanGridEvent,
+    fenceDraftStart,
+    fences,
+    findClosestWallPoint,
+    floorplanOpeningLocalY,
+    getSnappedFloorplanPoint,
+    handleCeilingPlacementPoint,
+    handleSlabPlacementPoint,
+    handleWallPlacementPoint,
+    handleZonePlacementPoint,
+    isCeilingBuildActive,
+    isFenceBuildActive,
+    isFloorplanGridInteractionActive,
+    isOpeningPlacementActive,
+    isPolygonBuildActive,
+    isRoofBuildActive,
+    isWallBuildActive,
+    isZoneBuildActive,
+    roofDraftStart,
+    setCursorPoint,
+    setFenceDraftEnd,
+    setFenceDraftStart,
+    setRoofDraftEnd,
+    setRoofDraftStart,
+    shiftPressed,
+    snapPolygonDraftPoint,
+    snapWallDraftPoint,
+    toPoint2D,
+    walls,
+  })
 
   const handleBackgroundClick = useCallback(
     (event: ReactMouseEvent<SVGSVGElement>) => {
@@ -7882,110 +9103,93 @@ export function FloorplanPanel() {
         return
       }
 
-      if (isOpeningPlacementActive) {
-        const closest = findClosestWallPoint(planPoint, walls, {
-          canUseWall: (wall) => !isCurvedWall(wall),
-        })
-        if (closest) {
-          const dx = closest.wall.end[0] - closest.wall.start[0]
-          const dz = closest.wall.end[1] - closest.wall.start[1]
-          const length = Math.sqrt(dx * dx + dz * dz)
-          const distance = closest.t * length
-
-          emitter.emit('wall:click', {
-            node: closest.wall,
-            point: { x: closest.point[0], y: 0, z: closest.point[1] },
-            localPosition: [distance, floorplanOpeningLocalY, 0],
-            normal: closest.normal,
-            stopPropagation: () => {},
-          } as any)
-        }
+      if (handleBackgroundPlacementClick(planPoint, event, draftStart)) {
         return
       }
 
-      if (isFloorplanGridInteractionActive) {
-        const snappedPoint = emitFloorplanGridEvent('click', planPoint, event)
-        setCursorPoint(snappedPoint)
-        return
-      }
+      const modifierKeys = getSelectionModifierKeys(event)
 
-      if (isPolygonBuildActive) {
-        const snappedPoint = snapPolygonDraftPoint({
-          point: planPoint,
-          start: activePolygonDraftPoints[activePolygonDraftPoints.length - 1],
-          angleSnap: activePolygonDraftPoints.length > 0 && !shiftPressed,
-        })
+      const backgroundSelection = resolveFloorplanBackgroundSelection({
+        canSelectElementFloorplanGeometry,
+        canSelectFloorplanZones,
+        currentSelectedIds: useViewer.getState().selection.selectedIds,
+        getFloorplanHitIdAtPoint,
+        isWallBuildActive,
+        modifierKeys,
+        planPoint,
+        structureLayer,
+        toPoint2D,
+        visibleZonePolygons,
+      })
+
+      if (backgroundSelection.handled) {
+        setSelectedReferenceId(null)
 
-        if (isZoneBuildActive) {
-          handleZonePlacementPoint(snappedPoint)
-        } else {
-          handleSlabPlacementPoint(snappedPoint)
+        if (backgroundSelection.kind === 'select-zone') {
+          setSelection({ zoneId: backgroundSelection.zoneId })
+          return
         }
-        return
-      }
 
-      if (canSelectFloorplanZones) {
-        const zoneHit = visibleZonePolygons.find(({ polygon }) =>
-          isPointInsidePolygon(toPoint2D(planPoint), polygon),
-        )
-        if (zoneHit) {
-          setSelectedReferenceId(null)
-          setSelection({ zoneId: zoneHit.zone.id })
+        if (backgroundSelection.kind === 'select-elements') {
+          if (!(levelId && levelNode) || levelNode.type !== 'level') {
+            setSelection({ selectedIds: backgroundSelection.selectedIds })
+          } else {
+            const { selection } = useViewer.getState()
+            const nodes = useScene.getState().nodes
+            const updates: Parameters<typeof setSelection>[0] = {
+              selectedIds: backgroundSelection.selectedIds,
+            }
+
+            if (levelId !== selection.levelId) {
+              updates.levelId = levelId
+            }
+
+            const parentNode = levelNode.parentId ? nodes[levelNode.parentId as AnyNodeId] : null
+            if (parentNode?.type === 'building' && parentNode.id !== selection.buildingId) {
+              updates.buildingId = parentNode.id
+            }
+
+            setSelection(updates)
+          }
           return
         }
-      }
 
-      if (!isWallBuildActive) {
-        if (structureLayer === 'zones') {
-          setSelectedReferenceId(null)
+        if (backgroundSelection.kind === 'clear-zones') {
           setSelection({ zoneId: null })
           // Return to structure select (same as 3D grid click)
           useEditor.getState().setStructureLayer('elements')
           useEditor.getState().setMode('select')
-        } else {
-          setSelectedReferenceId(null)
+          return
+        }
+
+        if (!backgroundSelection.preserveSelection) {
           setSelection({ selectedIds: [] })
         }
         return
       }
 
-      const snappedPoint = snapWallDraftPoint({
-        point: planPoint,
-        walls,
-        start: draftStart ?? undefined,
-        angleSnap: Boolean(draftStart) && !shiftPressed,
-      })
-
-      handleWallPlacementPoint(snappedPoint)
     },
     [
       draftStart,
-      emitFloorplanGridEvent,
-      floorplanOpeningLocalY,
       getPlanPointFromClientPoint,
-      activePolygonDraftPoints,
+      handleBackgroundPlacementClick,
+      canSelectElementFloorplanGeometry,
       canSelectFloorplanZones,
-      handleSlabPlacementPoint,
-      handleZonePlacementPoint,
-      handleWallPlacementPoint,
-      isFloorplanGridInteractionActive,
-      isOpeningPlacementActive,
       isPolygonBuildActive,
       isWallBuildActive,
-      isWindowBuildActive,
-      isZoneBuildActive,
-      movingOpeningType,
+      levelId,
+      levelNode,
       setSelectedReferenceId,
       setSelection,
-      shiftPressed,
       structureLayer,
+      getFloorplanHitIdAtPoint,
+      toPoint2D,
       visibleZonePolygons,
-      walls,
     ],
   )
   const handleBackgroundDoubleClick = useCallback(
     (event: ReactMouseEvent<SVGSVGElement>) => {
-      if (!isPolygonBuildActive) {
+      if (!(isPolygonDraftBuildActive && !isRoofBuildActive)) {
         return
       }
 
@@ -8000,6 +9204,12 @@ export function FloorplanPanel() {
         angleSnap: activePolygonDraftPoints.length > 0 && !shiftPressed,
       })
 
+      if (isCeilingBuildActive) {
+        emitFloorplanGridEvent('double-click', planPoint, event)
+        handleCeilingPlacementConfirm(snappedPoint)
+        return
+      }
+
       if (isZoneBuildActive) {
         handleZonePlacementConfirm(snappedPoint)
       } else {
@@ -8008,10 +9218,14 @@ export function FloorplanPanel() {
     },
     [
       activePolygonDraftPoints,
+      emitFloorplanGridEvent,
+      handleCeilingPlacementConfirm,
       getPlanPointFromClientPoint,
       handleSlabPlacementConfirm,
       handleZonePlacementConfirm,
-      isPolygonBuildActive,
+      isCeilingBuildActive,
+      isPolygonDraftBuildActive,
+      isRoofBuildActive,
       isZoneBuildActive,
       shiftPressed,
     ],
@@ -8065,140 +9279,23 @@ export function FloorplanPanel() {
     [commitFloorplanSelection],
   )
 
-  const toggleFloorplanSelection = useCallback(
-    (nodeId: string, modifierKeys?: { meta: boolean; ctrl: boolean }) => {
-      const shouldToggle = Boolean(modifierKeys?.meta || modifierKeys?.ctrl)
-
-      if (shouldToggle) {
-        const currentSelectedIds = useViewer.getState().selection.selectedIds
-        commitFloorplanSelection(
-          currentSelectedIds.includes(nodeId)
-            ? currentSelectedIds.filter((selectedId) => selectedId !== nodeId)
-            : [...currentSelectedIds, nodeId],
-        )
-        return
-      }
-
-      commitFloorplanSelection([nodeId])
-    },
-    [commitFloorplanSelection],
-  )
-
-  const getFloorplanHitIdAtPoint = useCallback(
-    (planPoint: WallPlanPoint) => {
-      const point = toPoint2D(planPoint)
-
-      const getItemHitId = () => {
-        if (!isFloorplanItemContextActive) {
-          return null
-        }
-
-        const itemHit = floorplanItemEntries.find(({ polygon }) =>
-          isPointInsidePolygon(point, polygon),
-        )
-        return itemHit?.item.id ?? null
-      }
-
-      if (phase === 'structure') {
-        const openingHit = openingsPolygons.find(({ polygon }) => {
-          if (isPointInsidePolygon(point, polygon)) {
-            return true
-          }
-
-          const centerLine = getOpeningCenterLine(polygon)
-          if (!centerLine) {
-            return false
-          }
-
-          return (
-            getDistanceToWallSegment(
-              point,
-              [centerLine.start.x, centerLine.start.y],
-              [centerLine.end.x, centerLine.end.y],
-            ) <= floorplanOpeningHitTolerance
-          )
-        })
-        if (openingHit) {
-          return openingHit.opening.id
-        }
-
-        const stairHit = floorplanStairEntries.find(({ segments }) =>
-          segments.some(({ polygon }) => isPointInsidePolygon(point, polygon)),
-        )
-        if (stairHit) {
-          return stairHit.stair.id
-        }
-
-        const wallHit = displayWallPolygons.find(
-          ({ wall, polygon }) =>
-            isPointInsidePolygon(point, polygon) ||
-            getDistanceToWallSegment(point, wall.start, wall.end) <= floorplanWallHitTolerance,
-        )
-        if (wallHit) {
-          return wallHit.wall.id
-        }
-
-        const slabHit = displaySlabPolygons.find(({ polygon, holes }) =>
-          isPointInsidePolygonWithHoles(point, polygon, holes),
-        )
-        if (slabHit) {
-          return slabHit.slab.id
-        }
-      }
-
-      return getItemHitId()
-    },
-    [
-      displaySlabPolygons,
-      displayWallPolygons,
-      floorplanItemEntries,
-      floorplanOpeningHitTolerance,
-      floorplanStairEntries,
-      floorplanWallHitTolerance,
-      openingsPolygons,
-      phase,
-      isFloorplanItemContextActive,
-    ],
-  )
+  const toggleFloorplanSelection = useCallback(
+    (nodeId: string, modifierKeys?: { meta: boolean; ctrl: boolean }) => {
+      const shouldToggle = Boolean(modifierKeys?.meta || modifierKeys?.ctrl)
 
-  const getFloorplanSelectionIdsInBounds = useCallback(
-    (bounds: FloorplanSelectionBounds) => {
-      const itemIds = isFloorplanItemContextActive
-        ? floorplanItemEntries
-            .filter(({ polygon }) => doesPolygonIntersectSelectionBounds(polygon, bounds))
-            .map(({ item }) => item.id)
-        : []
-
-      if (phase !== 'structure') {
-        return itemIds
-      }
-
-      const wallIds = displayWallPolygons
-        .filter(({ polygon }) => doesPolygonIntersectSelectionBounds(polygon, bounds))
-        .map(({ wall }) => wall.id)
-      const openingIds = openingsPolygons
-        .filter(({ polygon }) => doesPolygonIntersectSelectionBounds(polygon, bounds))
-        .map(({ opening }) => opening.id)
-      const slabIds = displaySlabPolygons
-        .filter(({ polygon }) => doesPolygonIntersectSelectionBounds(polygon, bounds))
-        .map(({ slab }) => slab.id)
-      const stairIds = floorplanStairEntries
-        .filter(({ segments }) =>
-          segments.some(({ polygon }) => doesPolygonIntersectSelectionBounds(polygon, bounds)),
+      if (shouldToggle) {
+        const currentSelectedIds = useViewer.getState().selection.selectedIds
+        commitFloorplanSelection(
+          currentSelectedIds.includes(nodeId)
+            ? currentSelectedIds.filter((selectedId) => selectedId !== nodeId)
+            : [...currentSelectedIds, nodeId],
         )
-        .map(({ stair }) => stair.id)
+        return
+      }
 
-      return Array.from(new Set([...itemIds, ...wallIds, ...openingIds, ...slabIds, ...stairIds]))
+      commitFloorplanSelection([nodeId])
     },
-    [
-      displaySlabPolygons,
-      displayWallPolygons,
-      floorplanItemEntries,
-      floorplanStairEntries,
-      isFloorplanItemContextActive,
-      openingsPolygons,
-      phase,
-    ],
+    [commitFloorplanSelection],
   )
 
   const syncPreviewSelectedIds = useCallback(
@@ -8231,6 +9328,13 @@ export function FloorplanPanel() {
     },
     [syncDeleteHoveredId],
   )
+  const handleFenceHoverChange = useCallback(
+    (fenceId: FenceNode['id'] | null) => {
+      setHoveredFenceId(fenceId)
+      syncDeleteHoveredId(fenceId)
+    },
+    [syncDeleteHoveredId],
+  )
 
   const handleOpeningHoverChange = useCallback(
     (openingId: OpeningNode['id'] | null) => {
@@ -8248,6 +9352,14 @@ export function FloorplanPanel() {
     [syncDeleteHoveredId],
   )
 
+  const handleCeilingHoverChange = useCallback(
+    (ceilingId: CeilingNode['id'] | null) => {
+      setHoveredCeilingId(ceilingId)
+      syncDeleteHoveredId(ceilingId)
+    },
+    [syncDeleteHoveredId],
+  )
+
   const handleItemHoverChange = useCallback(
     (itemId: ItemNode['id'] | null) => {
       setHoveredItemId(itemId)
@@ -8273,16 +9385,42 @@ export function FloorplanPanel() {
   )
   const handleFloorplanItemHoverEnter = useCallback(
     (itemId: ItemNode['id']) => {
+      handleFenceHoverChange(null)
       handleOpeningHoverChange(null)
       handleWallHoverChange(null)
       handleSlabHoverChange(null)
+      handleCeilingHoverChange(null)
       handleStairHoverChange(null)
       handleZoneHoverChange(null)
       handleItemHoverChange(itemId)
     },
     [
+      handleFenceHoverChange,
+      handleItemHoverChange,
+      handleOpeningHoverChange,
+      handleCeilingHoverChange,
+      handleSlabHoverChange,
+      handleStairHoverChange,
+      handleWallHoverChange,
+      handleZoneHoverChange,
+    ],
+  )
+  const handleFloorplanFenceHoverEnter = useCallback(
+    (fenceId: FenceNode['id']) => {
+      handleItemHoverChange(null)
+      handleOpeningHoverChange(null)
+      handleWallHoverChange(null)
+      handleSlabHoverChange(null)
+      handleCeilingHoverChange(null)
+      handleStairHoverChange(null)
+      handleZoneHoverChange(null)
+      handleFenceHoverChange(fenceId)
+    },
+    [
+      handleFenceHoverChange,
       handleItemHoverChange,
       handleOpeningHoverChange,
+      handleCeilingHoverChange,
       handleSlabHoverChange,
       handleStairHoverChange,
       handleWallHoverChange,
@@ -8292,15 +9430,19 @@ export function FloorplanPanel() {
   const handleFloorplanStairHoverEnter = useCallback(
     (stairId: StairNode['id']) => {
       handleItemHoverChange(null)
+      handleFenceHoverChange(null)
       handleOpeningHoverChange(null)
       handleSlabHoverChange(null)
+      handleCeilingHoverChange(null)
       handleWallHoverChange(null)
       handleZoneHoverChange(null)
       handleStairHoverChange(stairId)
     },
     [
+      handleFenceHoverChange,
       handleItemHoverChange,
       handleOpeningHoverChange,
+      handleCeilingHoverChange,
       handleSlabHoverChange,
       handleStairHoverChange,
       handleWallHoverChange,
@@ -8351,12 +9493,46 @@ export function FloorplanPanel() {
     },
     [],
   )
+  const handleFenceClick = useCallback(
+    (fence: FenceNode, event: ReactMouseEvent<SVGElement>) => {
+      const centerX = (fence.start[0] + fence.end[0]) / 2
+      const centerZ = (fence.start[1] + fence.end[1]) / 2
+      const halfLength =
+        Math.hypot(fence.end[0] - fence.start[0], fence.end[1] - fence.start[1]) / 2
+
+      setSelectedReferenceId(null)
+      emitter.emit('fence:click', {
+        node: fence,
+        position: [centerX, 0, centerZ],
+        localPosition: [halfLength, 0, 0],
+        stopPropagation: () => event.stopPropagation(),
+        nativeEvent: event.nativeEvent as any,
+      } as any)
+    },
+    [setSelectedReferenceId],
+  )
+  const handleFenceDoubleClick = useCallback((fence: FenceNode, event: ReactMouseEvent<SVGElement>) => {
+    const centerX = (fence.start[0] + fence.end[0]) / 2
+    const centerZ = (fence.start[1] + fence.end[1]) / 2
+    const halfLength =
+      Math.hypot(fence.end[0] - fence.start[0], fence.end[1] - fence.start[1]) / 2
+
+    emitter.emit('fence:double-click', {
+      node: fence,
+      position: [centerX, 0, centerZ],
+      localPosition: [halfLength, 0, 0],
+      stopPropagation: () => event.stopPropagation(),
+      nativeEvent: event.nativeEvent as any,
+    } as any)
+    emitter.emit('camera-controls:focus', { nodeId: fence.id })
+  }, [])
   const emitFloorplanNodeClick = useCallback(
     (
       nodeId:
         | ItemNode['id']
         | OpeningNode['id']
         | SlabNode['id']
+        | CeilingNode['id']
         | StairNode['id']
         | ZoneNodeType['id'],
       eventType: 'click' | 'double-click',
@@ -8367,6 +9543,7 @@ export function FloorplanPanel() {
         !(
           node &&
           (node.type === 'slab' ||
+            node.type === 'ceiling' ||
             node.type === 'door' ||
             node.type === 'window' ||
             node.type === 'item' ||
@@ -8556,6 +9733,12 @@ export function FloorplanPanel() {
     },
     [emitFloorplanNodeClick],
   )
+  const handleCeilingSelect = useCallback(
+    (ceilingId: CeilingNode['id'], event: ReactMouseEvent<SVGElement>) => {
+      emitFloorplanNodeClick(ceilingId, 'click', event)
+    },
+    [emitFloorplanNodeClick],
+  )
   const handleZoneSelect = useCallback(
     (zoneId: ZoneNodeType['id'], event: ReactMouseEvent<SVGElement>) => {
       emitFloorplanNodeClick(zoneId, 'click', event)
@@ -8593,6 +9776,9 @@ export function FloorplanPanel() {
   const handleSlabDoubleClick = useCallback((slab: SlabNode) => {
     emitter.emit('camera-controls:focus', { nodeId: slab.id })
   }, [])
+  const handleCeilingDoubleClick = useCallback((ceiling: CeilingNode) => {
+    emitter.emit('camera-controls:focus', { nodeId: ceiling.id })
+  }, [])
   const handleOpeningDoubleClick = useCallback((opening: OpeningNode) => {
     emitter.emit('camera-controls:focus', { nodeId: opening.id })
   }, [])
@@ -8786,6 +9972,79 @@ export function FloorplanPanel() {
     },
     [deleteNode, selectedCeilingEntry, setSelection],
   )
+  const handleSelectedFenceMove = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation()
+
+      const fence = selectedFenceEntry?.fence
+      if (!fence) {
+        return
+      }
+
+      sfxEmitter.emit('sfx:item-pick')
+      setMovingNode(fence)
+      setSelection({ selectedIds: [] })
+    },
+    [selectedFenceEntry, setMovingNode, setSelection],
+  )
+  const handleSelectedFenceDelete = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation()
+
+      const fence = selectedFenceEntry?.fence
+      if (!fence) {
+        return
+      }
+
+      sfxEmitter.emit('sfx:item-delete')
+      deleteNode(fence.id as AnyNodeId)
+      setSelection({ selectedIds: [] })
+    },
+    [deleteNode, selectedFenceEntry, setSelection],
+  )
+  const handleFencePointerDown = useCallback(
+    (fenceId: FenceNode['id'], event: ReactPointerEvent<SVGElement>) => {
+      if (event.button !== 0) {
+        return
+      }
+
+      const fence = selectedFenceEntry?.fence
+      if (!fence || fence.id !== fenceId) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      pendingFenceDragRef.current = {
+        pointerId: event.pointerId,
+        fenceId,
+        startClientX: event.clientX,
+        startClientY: event.clientY,
+      }
+    },
+    [selectedFenceEntry],
+  )
+  const handleFenceEndpointPointerDown = useCallback(
+    (fence: FenceNode, endpoint: WallEndpoint, event: ReactPointerEvent<SVGCircleElement>) => {
+      if (event.button !== 0) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      pendingFenceDragRef.current = null
+      setHoveredEndpointId(null)
+
+      if (mode !== 'select') {
+        return
+      }
+
+      sfxEmitter.emit('sfx:item-pick')
+      setMovingFenceEndpoint({ fence, endpoint })
+    },
+    [mode, setMovingFenceEndpoint],
+  )
   const handleStairDoubleClick = useCallback(
     (stair: StairNode, event: ReactMouseEvent<SVGElement>) => {
       emitFloorplanNodeClick(stair.id, 'double-click', event)
@@ -8793,6 +10052,36 @@ export function FloorplanPanel() {
     },
     [emitFloorplanNodeClick],
   )
+  const handleStairPointerDown = useCallback(
+    (stairId: StairNode['id'], event: ReactPointerEvent<SVGElement>) => {
+      if (event.button !== 0) {
+        return
+      }
+
+      const stair = selectedStairEntry?.stair
+      if (!stair || stair.id !== stairId) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      const suppressClick = (clickEvent: MouseEvent) => {
+        clickEvent.stopImmediatePropagation()
+        clickEvent.preventDefault()
+        window.removeEventListener('click', suppressClick, true)
+      }
+      window.addEventListener('click', suppressClick, true)
+      requestAnimationFrame(() => {
+        window.removeEventListener('click', suppressClick, true)
+      })
+
+      sfxEmitter.emit('sfx:item-pick')
+      setMovingNode(stair)
+      setSelection({ selectedIds: [] })
+    },
+    [selectedStairEntry, setMovingNode, setSelection],
+  )
   const handleSelectedOpeningMove = useCallback(
     (event: ReactMouseEvent<HTMLButtonElement>) => {
       event.stopPropagation()
@@ -8872,60 +10161,15 @@ export function FloorplanPanel() {
   )
   const duplicateSelectedStair = useCallback(() => {
     const stair = selectedStairEntry?.stair
-    if (!stair?.parentId) {
+    if (!stair) {
       return
     }
 
     sfxEmitter.emit('sfx:item-pick')
     useScene.temporal.getState().pause()
 
-    const cloned = structuredClone(stair) as Record<string, unknown>
-    delete cloned.id
-    cloned.metadata = {
-      ...(typeof cloned.metadata === 'object' && cloned.metadata !== null ? cloned.metadata : {}),
-    }
-    delete (cloned.metadata as Record<string, unknown>).isNew
-
-    const nextPosition =
-      Array.isArray(cloned.position) && cloned.position.length >= 3
-        ? [
-            Number(cloned.position[0]) + 1,
-            Number(cloned.position[1]),
-            Number(cloned.position[2]) + 1,
-          ]
-        : [stair.position[0] + 1, stair.position[1], stair.position[2] + 1]
-
-    cloned.position = nextPosition
-
     try {
-      const duplicate = StairNodeSchema.parse(cloned)
-      const nodesState = useScene.getState().nodes
-      const createOps: { node: AnyNode; parentId?: AnyNodeId }[] = [
-        { node: duplicate, parentId: stair.parentId as AnyNodeId },
-      ]
-
-      for (const childId of stair.children ?? []) {
-        const childNode = nodesState[childId]
-        if (childNode?.type !== 'stair-segment') {
-          continue
-        }
-
-        const childClone = structuredClone(childNode) as Record<string, unknown>
-        delete childClone.id
-        childClone.metadata = {
-          ...(typeof childClone.metadata === 'object' && childClone.metadata !== null
-            ? childClone.metadata
-            : {}),
-        }
-        delete (childClone.metadata as Record<string, unknown>).isNew
-
-        const childDuplicate = StairSegmentNodeSchema.parse(childClone)
-        createOps.push({ node: childDuplicate, parentId: duplicate.id as AnyNodeId })
-      }
-
-      useScene.getState().createNodes(createOps)
-
-      setSelection({ selectedIds: [duplicate.id as AnyNodeId] })
+      duplicateStairSubtree(stair.id as AnyNodeId, { mode: 'move' })
     } catch (error) {
       console.error('Failed to duplicate stair', error)
     }
@@ -8955,6 +10199,57 @@ export function FloorplanPanel() {
     },
     [deleteNode, selectedStairEntry, setSelection],
   )
+  const handleSelectedRoofMove = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation()
+
+      const roof = selectedRoofEntry?.roof
+      if (!roof) {
+        return
+      }
+
+      sfxEmitter.emit('sfx:item-pick')
+      setMovingNode(roof)
+      setSelection({ selectedIds: [] })
+    },
+    [selectedRoofEntry, setMovingNode, setSelection],
+  )
+  const duplicateSelectedRoof = useCallback(() => {
+    const roof = selectedRoofEntry?.roof
+    if (!roof) {
+      return
+    }
+
+    sfxEmitter.emit('sfx:item-pick')
+
+    try {
+      duplicateRoofSubtree(roof.id as AnyNodeId, { mode: 'move' })
+    } catch (error) {
+      console.error('Failed to duplicate roof', error)
+    }
+  }, [selectedRoofEntry])
+  const handleSelectedRoofDuplicate = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation()
+      duplicateSelectedRoof()
+    },
+    [duplicateSelectedRoof],
+  )
+  const handleSelectedRoofDelete = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation()
+
+      const roof = selectedRoofEntry?.roof
+      if (!roof) {
+        return
+      }
+
+      sfxEmitter.emit('sfx:item-delete')
+      deleteNode(roof.id as AnyNodeId)
+      setSelection({ selectedIds: [] })
+    },
+    [deleteNode, selectedRoofEntry, setSelection],
+  )
 
   const handleWallEndpointPointerDown = useCallback(
     (wall: WallNode, endpoint: WallEndpoint, event: ReactPointerEvent<SVGCircleElement>) => {
@@ -8981,6 +10276,9 @@ export function FloorplanPanel() {
       handleWallSelect(wall)
 
       const fixedPoint = endpoint === 'start' ? wall.end : wall.start
+      const originalStart = [...wall.start] as WallPlanPoint
+      const originalEnd = [...wall.end] as WallPlanPoint
+      const linkedWalls = getLinkedWallSnapshots(walls, wall.id, originalStart, originalEnd)
 
       wallEndpointDragRef.current = {
         pointerId: event.pointerId,
@@ -8988,12 +10286,24 @@ export function FloorplanPanel() {
         endpoint,
         fixedPoint,
         currentPoint: movingPoint,
+        originalStart,
+        originalEnd,
+        linkedWalls,
       }
 
-      setWallEndpointDraft(buildWallEndpointDraft(wall.id, endpoint, fixedPoint, movingPoint))
+      setWallEndpointDraft(
+        buildWallEndpointDraft(wall.id, endpoint, fixedPoint, movingPoint, linkedWalls),
+      )
       setCursorPoint(movingPoint)
     },
-    [clearWallPlacementDraft, handleWallPlacementPoint, handleWallSelect, isWallBuildActive, mode],
+    [
+      clearWallPlacementDraft,
+      handleWallPlacementPoint,
+      handleWallSelect,
+      isWallBuildActive,
+      mode,
+      walls,
+    ],
   )
   const handleWallCurvePointerDown = useCallback(
     (wall: WallNode, event: ReactPointerEvent<SVGCircleElement>) => {
@@ -9351,6 +10661,7 @@ export function FloorplanPanel() {
     handleItemHoverChange(null)
     handleWallHoverChange(null)
     handleSlabHoverChange(null)
+    handleCeilingHoverChange(null)
     handleStairHoverChange(null)
     handleZoneHoverChange(null)
     setHoveredEndpointId(null)
@@ -9363,6 +10674,7 @@ export function FloorplanPanel() {
     }
   }, [
     emitFloorplanWallLeave,
+    handleCeilingHoverChange,
     handleItemHoverChange,
     handleOpeningHoverChange,
     handleSlabHoverChange,
@@ -9788,7 +11100,7 @@ export function FloorplanPanel() {
     site,
   ])
   const hasDuplicatableFloorplanSelection = Boolean(
-    selectedItemEntry || selectedOpeningEntry || selectedStairEntry,
+    selectedItemEntry || selectedOpeningEntry || selectedStairEntry || selectedRoofEntry,
   )
   const handleDuplicateFloorplanSelection = useCallback(() => {
     if (selectedOpeningEntry) {
@@ -9801,16 +11113,23 @@ export function FloorplanPanel() {
     }
     if (selectedStairEntry) {
       duplicateSelectedStair()
+      return
+    }
+    if (selectedRoofEntry) {
+      duplicateSelectedRoof()
     }
   }, [
     duplicateSelectedItem,
     duplicateSelectedOpening,
+    duplicateSelectedRoof,
     duplicateSelectedStair,
     selectedItemEntry,
     selectedOpeningEntry,
+    selectedRoofEntry,
     selectedStairEntry,
   ])
-  const activeDraftAnchorPoint = draftStart ?? activePolygonDraftPoints[0] ?? null
+  const activeDraftAnchorPoint =
+    draftStart ?? fenceDraftStart ?? roofDraftStart ?? activePolygonDraftPoints[0] ?? null
   const floorplanCursorColor =
     mode === 'delete'
       ? palette.deleteStroke
@@ -9835,11 +11154,14 @@ export function FloorplanPanel() {
         onDuplicateSelected={handleDuplicateFloorplanSelection}
       />
       <div className="relative min-h-0 flex-1" ref={viewportHostRef}>
-        <FloorplanCursorIndicatorOverlay
+        <Editor2dFloorplanCursorIndicatorOverlay
           cursorAnchorPosition={floorplanCursorAnchorPosition}
           cursorColor={floorplanCursorColor}
           cursorPosition={floorplanCursorPosition}
           floorplanSelectionTool={floorplanSelectionTool}
+          indicatorBadgeOffsetX={FLOORPLAN_CURSOR_BADGE_OFFSET_X}
+          indicatorBadgeOffsetY={FLOORPLAN_CURSOR_BADGE_OFFSET_Y}
+          indicatorLineHeight={FLOORPLAN_CURSOR_INDICATOR_LINE_HEIGHT}
           isPanning={isPanning}
           movingOpeningType={movingOpeningType}
         />
@@ -9851,12 +11173,17 @@ export function FloorplanPanel() {
             rotationModifierPressed={rotationModifierPressed}
           />
         )}
-        <FloorplanActionMenuLayer
+        <Editor2dFloorplanActionMenuLayer
           ceiling={{
             position: selectedCeilingActionMenuPosition,
             onDelete: handleSelectedCeilingDelete,
             onMove: handleSelectedCeilingMove,
           }}
+          fence={{
+            position: selectedFenceActionMenuPosition,
+            onDelete: handleSelectedFenceDelete,
+            onMove: handleSelectedFenceMove,
+          }}
           item={{
             position: selectedItemActionMenuPosition,
             onDelete: handleSelectedItemDelete,
@@ -9869,6 +11196,12 @@ export function FloorplanPanel() {
             onDuplicate: handleSelectedOpeningDuplicate,
             onMove: handleSelectedOpeningMove,
           }}
+          roof={{
+            position: selectedRoofActionMenuPosition,
+            onDelete: handleSelectedRoofDelete,
+            onDuplicate: handleSelectedRoofDuplicate,
+            onMove: handleSelectedRoofMove,
+          }}
           slab={{
             position: selectedSlabActionMenuPosition,
             onDelete: handleSelectedSlabDelete,
@@ -9885,6 +11218,7 @@ export function FloorplanPanel() {
             onDelete: handleSelectedWallDelete,
             onMove: handleSelectedWallMove,
           }}
+          offsetY={FLOORPLAN_ACTION_MENU_OFFSET_Y}
         />
 
         {!levelNode || levelNode.type !== 'level' ? (
@@ -9906,6 +11240,24 @@ export function FloorplanPanel() {
             style={{ cursor: EDITOR_CURSOR }}
             viewBox={`${viewBox.minX} ${viewBox.minY} ${viewBox.width} ${viewBox.height}`}
           >
+            <defs>
+              <pattern
+                height={wallSelectionHatchSpacing}
+                id={wallSelectionHatchId}
+                patternUnits="userSpaceOnUse"
+                width={wallSelectionHatchSpacing}
+              >
+                <line
+                  stroke={palette.selectedStroke}
+                  strokeOpacity={1}
+                  strokeWidth={wallSelectionHatchStrokeWidth}
+                  x1="0"
+                  x2={wallSelectionHatchSpacing}
+                  y1="0"
+                  y2={wallSelectionHatchSpacing}
+                />
+              </pattern>
+            </defs>
             <rect
               fill={palette.surface}
               height={viewBox.height}
@@ -9914,7 +11266,10 @@ export function FloorplanPanel() {
               y={viewBox.minY}
             />
 
-            <g transform={buildingRotationDeg !== 0 ? `rotate(${buildingRotationDeg})` : undefined}>
+            <g
+              ref={floorplanSceneRef}
+              transform={buildingRotationDeg !== 0 ? `rotate(${buildingRotationDeg})` : undefined}
+            >
               <FloorplanGridLayer
                 majorGridPath={majorGridPath}
                 minorGridPath={minorGridPath}
@@ -9936,13 +11291,19 @@ export function FloorplanPanel() {
 
               <FloorplanGeometryLayer
                 canFocusGeometry={canSelectElementFloorplanGeometry}
+                canSelectCeilings={canInteractFloorplanSlabs}
                 canSelectGeometry={canInteractElementFloorplanGeometry}
                 canSelectSlabs={canInteractFloorplanSlabs}
+                ceilingPolygons={ceilingPolygons}
                 highlightedIdSet={highlightedFloorplanIdSet}
+                hoveredCeilingId={hoveredCeilingId}
                 hoveredOpeningId={hoveredOpeningId}
                 hoveredSlabId={hoveredSlabId}
                 hoveredWallId={hoveredWallId}
                 isDeleteMode={isDeleteMode}
+                onCeilingDoubleClick={handleCeilingDoubleClick}
+                onCeilingHoverChange={handleCeilingHoverChange}
+                onCeilingSelect={handleCeilingSelect}
                 onOpeningDoubleClick={handleOpeningDoubleClick}
                 onOpeningHoverChange={handleOpeningHoverChange}
                 onOpeningPointerDown={handleOpeningPointerDown}
@@ -9959,6 +11320,23 @@ export function FloorplanPanel() {
                 slabPolygons={displaySlabPolygons}
                 unit={unit}
                 wallPolygons={displayWallPolygons}
+                wallSelectionHatchId={wallSelectionHatchId}
+              />
+
+              <FloorplanFenceLayer
+                canFocusGeometry={canSelectElementFloorplanGeometry}
+                canSelectGeometry={canInteractElementFloorplanGeometry}
+                fenceEntries={floorplanFenceEntries}
+                highlightedIdSet={highlightedFloorplanIdSet}
+                hoveredFenceId={hoveredFenceId}
+                isDeleteMode={isDeleteMode}
+                onFenceDoubleClick={handleFenceDoubleClick}
+                onFenceHoverChange={handleFenceHoverChange}
+                onFenceHoverEnter={handleFloorplanFenceHoverEnter}
+                onFencePointerDown={handleFencePointerDown}
+                onFenceSelect={handleFenceClick}
+                palette={palette}
+                selectedIdSet={selectedIdSet}
               />
 
               <FloorplanZoneLayer
@@ -9991,10 +11369,30 @@ export function FloorplanPanel() {
                 onStairDoubleClick={handleStairDoubleClick}
                 onStairHoverChange={handleStairHoverChange}
                 onStairHoverEnter={handleFloorplanStairHoverEnter}
+                onStairPointerDown={handleStairPointerDown}
                 onStairSelect={handleStairSelect}
                 palette={palette}
                 selectedIdSet={selectedIdSet}
                 stairEntries={renderedFloorplanStairEntries}
+                unit={unit}
+              />
+
+              <FloorplanRoofLayer
+                highlightedIdSet={highlightedFloorplanIdSet}
+                roofEntries={floorplanRoofEntries}
+                selectedIdSet={selectedIdSet}
+              />
+
+              <FloorplanMeasurementsLayer
+                className="opening-placement-dimension"
+                measurements={movingOpeningPlacementMeasurements}
+                palette={palette}
+              />
+
+              <FloorplanMeasurementsLayer
+                className="item-clearance-dimension"
+                measurements={selectedItemClearanceMeasurements}
+                palette={palette}
               />
 
               {/* Zone labels: always visible so users can click to select zones from any mode */}
@@ -10047,96 +11445,28 @@ export function FloorplanPanel() {
                 />
               )}
 
-              {visibleSvgMarqueeBounds && (
-                <>
-                  <rect
-                    fill={palette.cursor}
-                    fillOpacity={0.12}
-                    height={visibleSvgMarqueeBounds.height}
-                    pointerEvents="none"
-                    stroke={palette.cursor}
-                    strokeOpacity={0.26}
-                    strokeWidth={FLOORPLAN_MARQUEE_GLOW_WIDTH}
-                    vectorEffect="non-scaling-stroke"
-                    width={visibleSvgMarqueeBounds.width}
-                    x={visibleSvgMarqueeBounds.x}
-                    y={visibleSvgMarqueeBounds.y}
-                  />
-                  <rect
-                    fill="none"
-                    height={visibleSvgMarqueeBounds.height}
-                    pointerEvents="none"
-                    stroke={palette.cursor}
-                    strokeOpacity={0.96}
-                    strokeWidth={FLOORPLAN_MARQUEE_OUTLINE_WIDTH}
-                    vectorEffect="non-scaling-stroke"
-                    width={visibleSvgMarqueeBounds.width}
-                    x={visibleSvgMarqueeBounds.x}
-                    y={visibleSvgMarqueeBounds.y}
-                  />
-                </>
-              )}
-
-              {draftPolygon && (
-                <polygon
-                  fill={palette.draftFill}
-                  fillOpacity={0.35}
-                  points={draftPolygonPoints ?? undefined}
-                  stroke={palette.draftStroke}
-                  strokeDasharray="0.24 0.12"
-                  strokeWidth="0.07"
-                  vectorEffect="non-scaling-stroke"
-                />
-              )}
-
-              {polygonDraftPolygonPoints && (
-                <polygon
-                  fill={palette.draftFill}
-                  fillOpacity={0.2}
-                  points={polygonDraftPolygonPoints}
-                  stroke="none"
-                />
-              )}
-
-              {polygonDraftPolylinePoints && (
-                <polyline
-                  fill="none"
-                  points={polygonDraftPolylinePoints}
-                  stroke={palette.draftStroke}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="0.08"
-                  vectorEffect="non-scaling-stroke"
-                />
-              )}
-
-              {polygonDraftClosingSegment && (
-                <line
-                  stroke={palette.draftStroke}
-                  strokeDasharray="0.16 0.1"
-                  strokeLinecap="round"
-                  strokeOpacity={0.75}
-                  strokeWidth="0.05"
-                  vectorEffect="non-scaling-stroke"
-                  x1={polygonDraftClosingSegment.x1}
-                  x2={polygonDraftClosingSegment.x2}
-                  y1={polygonDraftClosingSegment.y1}
-                  y2={polygonDraftClosingSegment.y2}
-                />
-              )}
+              <FloorplanMarqueeLayer
+                bounds={visibleSvgMarqueeBounds}
+                cursorColor={palette.cursor}
+                glowWidth={FLOORPLAN_MARQUEE_GLOW_WIDTH}
+                outlineWidth={FLOORPLAN_MARQUEE_OUTLINE_WIDTH}
+              />
 
-              {activePolygonDraftPoints.map((point, index) => (
-                <circle
-                  cx={toSvgX(point[0])}
-                  cy={toSvgY(point[1])}
-                  fill={index === 0 ? palette.anchor : palette.draftStroke}
-                  fillOpacity={0.95}
-                  key={`polygon-draft-${index}`}
-                  pointerEvents="none"
-                  r={index === 0 ? 0.12 : 0.1}
-                  vectorEffect="non-scaling-stroke"
-                />
-              ))}
+              <FloorplanDraftLayer
+                anchorFill={palette.anchor}
+                draftAnchorPoints={activePolygonDraftPoints.map((point, index) => ({
+                  x: toSvgX(point[0]),
+                  y: toSvgY(point[1]),
+                  isPrimary: index === 0,
+                }))}
+                draftFill={palette.draftFill}
+                draftPolygonPoints={draftPolygonPoints}
+                draftStroke={palette.draftStroke}
+                linearDraftSegment={fenceDraftSegment}
+                polygonDraftClosingSegment={polygonDraftClosingSegment}
+                polygonDraftPolygonPoints={polygonDraftPolygonPoints}
+                polygonDraftPolylinePoints={polygonDraftPolylinePoints}
+              />
 
               <FloorplanWallEndpointLayer
                 endpointHandles={wallEndpointHandles}
@@ -10146,6 +11476,14 @@ export function FloorplanPanel() {
                 palette={palette}
               />
 
+              <FloorplanFenceEndpointLayer
+                endpointHandles={fenceEndpointHandles}
+                hoveredEndpointId={hoveredEndpointId}
+                onEndpointHoverChange={setHoveredEndpointId}
+                onFenceEndpointPointerDown={handleFenceEndpointPointerDown}
+                palette={palette}
+              />
+
               <FloorplanWallCurveHandleLayer
                 curveHandles={wallCurveHandles}
                 hoveredHandleId={hoveredWallCurveHandleId}
diff --git a/packages/editor/src/components/editor/use-floorplan-background-placement.ts b/packages/editor/src/components/editor/use-floorplan-background-placement.ts
new file mode 100644
index 000000000..a96db8220
--- /dev/null
+++ b/packages/editor/src/components/editor/use-floorplan-background-placement.ts
@@ -0,0 +1,257 @@
+'use client'
+
+import { emitter, type FenceNode, isCurvedWall, type WallNode } from '@pascal-app/core'
+import { type MouseEvent as ReactMouseEvent, useCallback } from 'react'
+import { getPlanPointDistance } from '../../lib/floorplan'
+import { snapFenceDraftPoint } from '../tools/fence/fence-drafting'
+import type { WallPlanPoint } from '../tools/wall/wall-drafting'
+
+type UseFloorplanBackgroundPlacementArgs = {
+  activePolygonDraftPoints: WallPlanPoint[]
+  ceilingDraftPoints: WallPlanPoint[]
+  clearFencePlacementDraft: () => void
+  clearRoofPlacementDraft: () => void
+  emitFloorplanGridEvent: (
+    type: 'click' | 'double-click' | 'move',
+    planPoint: WallPlanPoint,
+    event: ReactMouseEvent<SVGSVGElement>,
+  ) => WallPlanPoint
+  fenceDraftStart: WallPlanPoint | null
+  fences: FenceNode[]
+  findClosestWallPoint: (
+    point: WallPlanPoint,
+    walls: WallNode[],
+    options?: { canUseWall?: (wall: WallNode) => boolean },
+  ) => {
+    normal: [number, number, number]
+    point: WallPlanPoint
+    t: number
+    wall: WallNode
+  } | null
+  floorplanOpeningLocalY: number
+  getSnappedFloorplanPoint: (point: WallPlanPoint) => WallPlanPoint
+  handleCeilingPlacementPoint: (point: WallPlanPoint) => void
+  handleSlabPlacementPoint: (point: WallPlanPoint) => void
+  handleWallPlacementPoint: (point: WallPlanPoint) => void
+  handleZonePlacementPoint: (point: WallPlanPoint) => void
+  isCeilingBuildActive: boolean
+  isFenceBuildActive: boolean
+  isFloorplanGridInteractionActive: boolean
+  isOpeningPlacementActive: boolean
+  isPolygonBuildActive: boolean
+  isRoofBuildActive: boolean
+  isWallBuildActive: boolean
+  isZoneBuildActive: boolean
+  roofDraftStart: WallPlanPoint | null
+  setCursorPoint: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
+  setFenceDraftEnd: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
+  setFenceDraftStart: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
+  setRoofDraftEnd: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
+  setRoofDraftStart: React.Dispatch<React.SetStateAction<WallPlanPoint | null>>
+  shiftPressed: boolean
+  snapWallDraftPoint: (args: {
+    point: WallPlanPoint
+    walls: WallNode[]
+    start?: WallPlanPoint
+    angleSnap: boolean
+  }) => WallPlanPoint
+  snapPolygonDraftPoint: (args: {
+    point: WallPlanPoint
+    start?: WallPlanPoint
+    angleSnap: boolean
+  }) => WallPlanPoint
+  toPoint2D: (point: WallPlanPoint) => { x: number; y: number }
+  walls: WallNode[]
+}
+
+export function useFloorplanBackgroundPlacement({
+  activePolygonDraftPoints,
+  ceilingDraftPoints,
+  clearFencePlacementDraft,
+  clearRoofPlacementDraft,
+  emitFloorplanGridEvent,
+  fenceDraftStart,
+  fences,
+  findClosestWallPoint,
+  floorplanOpeningLocalY,
+  getSnappedFloorplanPoint,
+  handleCeilingPlacementPoint,
+  handleSlabPlacementPoint,
+  handleWallPlacementPoint,
+  handleZonePlacementPoint,
+  isCeilingBuildActive,
+  isFenceBuildActive,
+  isFloorplanGridInteractionActive,
+  isOpeningPlacementActive,
+  isPolygonBuildActive,
+  isRoofBuildActive,
+  isWallBuildActive,
+  isZoneBuildActive,
+  roofDraftStart,
+  setCursorPoint,
+  setFenceDraftEnd,
+  setFenceDraftStart,
+  setRoofDraftEnd,
+  setRoofDraftStart,
+  shiftPressed,
+  snapWallDraftPoint,
+  snapPolygonDraftPoint,
+  toPoint2D,
+  walls,
+}: UseFloorplanBackgroundPlacementArgs) {
+  const handleBackgroundPlacementClick = useCallback(
+    (
+      planPoint: WallPlanPoint,
+      event: ReactMouseEvent<SVGSVGElement>,
+      draftStart: WallPlanPoint | null,
+    ) => {
+      if (isOpeningPlacementActive) {
+        const closest = findClosestWallPoint(planPoint, walls, {
+          canUseWall: (wall) => !isCurvedWall(wall),
+        })
+        if (closest) {
+          const dx = closest.wall.end[0] - closest.wall.start[0]
+          const dz = closest.wall.end[1] - closest.wall.start[1]
+          const length = Math.sqrt(dx * dx + dz * dz)
+          const distance = closest.t * length
+
+          emitter.emit('wall:click', {
+            node: closest.wall,
+            point: { x: closest.point[0], y: 0, z: closest.point[1] },
+            localPosition: [distance, floorplanOpeningLocalY, 0],
+            normal: closest.normal,
+            stopPropagation: () => {},
+          } as any)
+        }
+        return true
+      }
+
+      if (isCeilingBuildActive) {
+        emitFloorplanGridEvent('click', planPoint, event)
+
+        const snappedPoint = snapPolygonDraftPoint({
+          point: planPoint,
+          start: ceilingDraftPoints[ceilingDraftPoints.length - 1],
+          angleSnap: ceilingDraftPoints.length > 0 && !shiftPressed,
+        })
+
+        handleCeilingPlacementPoint(snappedPoint)
+        return true
+      }
+
+      if (isRoofBuildActive) {
+        const snappedPoint = getSnappedFloorplanPoint(planPoint)
+        emitFloorplanGridEvent('click', snappedPoint, event)
+        setCursorPoint(snappedPoint)
+
+        if (!roofDraftStart) {
+          setRoofDraftStart(snappedPoint)
+          setRoofDraftEnd(snappedPoint)
+        } else {
+          clearRoofPlacementDraft()
+        }
+        return true
+      }
+
+      if (isFenceBuildActive) {
+        emitFloorplanGridEvent('click', planPoint, event)
+
+        const snappedPoint = snapFenceDraftPoint({
+          point: planPoint,
+          walls,
+          fences,
+          start: fenceDraftStart ?? undefined,
+          angleSnap: Boolean(fenceDraftStart) && !shiftPressed,
+        })
+
+        setCursorPoint(snappedPoint)
+
+        if (!fenceDraftStart) {
+          setFenceDraftStart(snappedPoint)
+          setFenceDraftEnd(snappedPoint)
+        } else if (
+          getPlanPointDistance(toPoint2D(fenceDraftStart), toPoint2D(snappedPoint)) >= 0.01
+        ) {
+          clearFencePlacementDraft()
+        } else {
+          setFenceDraftEnd(snappedPoint)
+        }
+        return true
+      }
+
+      if (isFloorplanGridInteractionActive) {
+        const snappedPoint = emitFloorplanGridEvent('click', planPoint, event)
+        setCursorPoint(snappedPoint)
+        return true
+      }
+
+      if (isPolygonBuildActive) {
+        const snappedPoint = snapPolygonDraftPoint({
+          point: planPoint,
+          start: activePolygonDraftPoints[activePolygonDraftPoints.length - 1],
+          angleSnap: activePolygonDraftPoints.length > 0 && !shiftPressed,
+        })
+
+        if (isZoneBuildActive) {
+          handleZonePlacementPoint(snappedPoint)
+        } else {
+          handleSlabPlacementPoint(snappedPoint)
+        }
+        return true
+      }
+
+      if (!isWallBuildActive) {
+        return false
+      }
+
+      const snappedPoint = snapWallDraftPoint({
+        point: planPoint,
+        walls,
+        start: draftStart ?? undefined,
+        angleSnap: Boolean(draftStart) && !shiftPressed,
+      })
+
+      handleWallPlacementPoint(snappedPoint)
+      return true
+    },
+    [
+      activePolygonDraftPoints,
+      ceilingDraftPoints,
+      clearFencePlacementDraft,
+      clearRoofPlacementDraft,
+      emitFloorplanGridEvent,
+      fenceDraftStart,
+      fences,
+      findClosestWallPoint,
+      floorplanOpeningLocalY,
+      getSnappedFloorplanPoint,
+      handleCeilingPlacementPoint,
+      handleSlabPlacementPoint,
+      handleZonePlacementPoint,
+      isCeilingBuildActive,
+      isFenceBuildActive,
+      isFloorplanGridInteractionActive,
+      isOpeningPlacementActive,
+      isPolygonBuildActive,
+      isRoofBuildActive,
+      isWallBuildActive,
+      isZoneBuildActive,
+      roofDraftStart,
+      setCursorPoint,
+      setFenceDraftEnd,
+      setFenceDraftStart,
+      setRoofDraftEnd,
+      setRoofDraftStart,
+      shiftPressed,
+      snapWallDraftPoint,
+      snapPolygonDraftPoint,
+      toPoint2D,
+      walls,
+      handleWallPlacementPoint,
+    ],
+  )
+
+  return {
+    handleBackgroundPlacementClick,
+  }
+}
diff --git a/packages/editor/src/components/editor/use-floorplan-hit-testing.ts b/packages/editor/src/components/editor/use-floorplan-hit-testing.ts
new file mode 100644
index 000000000..397223054
--- /dev/null
+++ b/packages/editor/src/components/editor/use-floorplan-hit-testing.ts
@@ -0,0 +1,171 @@
+'use client'
+
+import type {
+  AnyNode,
+  CeilingNode,
+  DoorNode,
+  ItemNode,
+  Point2D,
+  RoofNode,
+  RoofSegmentNode,
+  SlabNode,
+  StairNode,
+  StairSegmentNode,
+  WallNode,
+  WindowNode,
+} from '@pascal-app/core'
+import { useCallback } from 'react'
+import {
+  getFloorplanHitNodeId,
+  getFloorplanSelectionIdsInBounds,
+} from '../../lib/floorplan/selection-tool'
+import type { FloorplanSelectionBounds } from '../../lib/floorplan/types'
+import type { WallPlanPoint } from '../tools/wall/wall-drafting'
+
+type OpeningNode = WindowNode | DoorNode
+
+type WallPolygonEntry = {
+  wall: WallNode
+  polygon: Point2D[]
+}
+
+type OpeningPolygonEntry = {
+  opening: OpeningNode
+  polygon: Point2D[]
+}
+
+type SlabPolygonEntry = {
+  slab: SlabNode
+  polygon: Point2D[]
+  holes: Point2D[][]
+}
+
+type CeilingPolygonEntry = {
+  ceiling: CeilingNode
+  polygon: Point2D[]
+  holes: Point2D[][]
+}
+
+type FloorplanRoofEntry = {
+  roof: RoofNode
+  segments: Array<{
+    polygon: Point2D[]
+    segment: RoofSegmentNode
+  }>
+}
+
+type FloorplanItemEntry = {
+  item: ItemNode
+  polygon: Point2D[]
+}
+
+type FloorplanStairSegmentEntry = {
+  polygon: Point2D[]
+  segment: StairSegmentNode | AnyNode
+}
+
+type FloorplanStairEntry = {
+  hitPolygons: Point2D[][]
+  stair: StairNode
+  segments: FloorplanStairSegmentEntry[]
+}
+
+type UseFloorplanHitTestingArgs = {
+  ceilingPolygons: CeilingPolygonEntry[]
+  displaySlabPolygons: SlabPolygonEntry[]
+  displayWallPolygons: WallPolygonEntry[]
+  floorplanItemEntries: FloorplanItemEntry[]
+  floorplanOpeningHitTolerance: number
+  floorplanRoofEntries: FloorplanRoofEntry[]
+  floorplanStairEntries: FloorplanStairEntry[]
+  floorplanWallHitTolerance: number
+  getOpeningCenterLine: (polygon: Point2D[]) => { start: Point2D; end: Point2D } | null
+  isFloorplanItemContextActive: boolean
+  openingsPolygons: OpeningPolygonEntry[]
+  phase: 'site' | 'structure' | 'furnish'
+  toPoint2D: (point: WallPlanPoint) => Point2D
+}
+
+export function useFloorplanHitTesting({
+  ceilingPolygons,
+  displaySlabPolygons,
+  displayWallPolygons,
+  floorplanItemEntries,
+  floorplanOpeningHitTolerance,
+  floorplanRoofEntries,
+  floorplanStairEntries,
+  floorplanWallHitTolerance,
+  getOpeningCenterLine,
+  isFloorplanItemContextActive,
+  openingsPolygons,
+  phase,
+  toPoint2D,
+}: UseFloorplanHitTestingArgs) {
+  const getFloorplanHitIdAtPoint = useCallback(
+    (planPoint: WallPlanPoint) => {
+      const point = toPoint2D(planPoint)
+      return getFloorplanHitNodeId({
+        point,
+        ceilings: ceilingPolygons,
+        phase,
+        isItemContextActive: isFloorplanItemContextActive,
+        items: floorplanItemEntries,
+        openings: openingsPolygons,
+        roofs: floorplanRoofEntries,
+        stairs: floorplanStairEntries,
+        walls: displayWallPolygons,
+        slabs: displaySlabPolygons,
+        openingHitTolerance: floorplanOpeningHitTolerance,
+        wallHitTolerance: floorplanWallHitTolerance,
+        getOpeningCenterLine,
+      })
+    },
+    [
+      ceilingPolygons,
+      displaySlabPolygons,
+      displayWallPolygons,
+      floorplanItemEntries,
+      floorplanOpeningHitTolerance,
+      floorplanRoofEntries,
+      floorplanStairEntries,
+      floorplanWallHitTolerance,
+      getOpeningCenterLine,
+      isFloorplanItemContextActive,
+      openingsPolygons,
+      phase,
+      toPoint2D,
+    ],
+  )
+
+  const getFloorplanSelectionIdsInBoundsForArea = useCallback(
+    (bounds: FloorplanSelectionBounds) =>
+      getFloorplanSelectionIdsInBounds({
+        bounds,
+        ceilings: ceilingPolygons,
+        phase,
+        isItemContextActive: isFloorplanItemContextActive,
+        items: floorplanItemEntries,
+        walls: displayWallPolygons,
+        openings: openingsPolygons,
+        roofs: floorplanRoofEntries,
+        slabs: displaySlabPolygons,
+        stairs: floorplanStairEntries,
+      }),
+    [
+      ceilingPolygons,
+      displaySlabPolygons,
+      displayWallPolygons,
+      floorplanItemEntries,
+      floorplanRoofEntries,
+      floorplanStairEntries,
+      isFloorplanItemContextActive,
+      openingsPolygons,
+      phase,
+    ],
+  )
+
+  return {
+    getFloorplanHitIdAtPoint,
+    getFloorplanSelectionIdsInBounds: getFloorplanSelectionIdsInBoundsForArea,
+  }
+}
diff --git a/packages/editor/src/components/editor/use-floorplan-scene-data.ts b/packages/editor/src/components/editor/use-floorplan-scene-data.ts
new file mode 100644
index 000000000..934fb2ed5
--- /dev/null
+++ b/packages/editor/src/components/editor/use-floorplan-scene-data.ts
@@ -0,0 +1,186 @@
+'use client'
+
+import {
+  type AnyNode,
+  type BuildingNode,
+  type CeilingNode,
+  type DoorNode,
+  type FenceNode,
+  type GuideNode,
+  type LevelNode,
+  type RoofNode,
+  type SiteNode,
+  type SlabNode,
+  useScene,
+  type WallNode,
+  type WindowNode,
+  type ZoneNode as ZoneNodeType,
+} from '@pascal-app/core'
+import { useShallow } from 'zustand/react/shallow'
+import { collectLevelDescendants } from '../../lib/floorplan'
+
+type OpeningNode = WindowNode | DoorNode
+
+const DEFAULT_BUILDING_POSITION = [0, 0, 0] as const satisfies [number, number, number]
+
+function useLevelChildren<TNode extends AnyNode>(
+  levelId: LevelNode['id'] | null,
+  typeGuard: (node: AnyNode | undefined) => node is TNode,
+) {
+  return useScene(
+    useShallow((state) => {
+      if (!levelId) {
+        return [] as TNode[]
+      }
+
+      const levelNode = state.nodes[levelId]
+      if (!levelNode || levelNode.type !== 'level') {
+        return [] as TNode[]
+      }
+
+      return levelNode.children.map((childId) => state.nodes[childId]).filter(typeGuard)
+    }),
+  )
+}
+
+export function useFloorplanSceneData({
+  buildingId,
+  levelId,
+}: {
+  buildingId: BuildingNode['id'] | null
+  levelId: LevelNode['id'] | null
+}) {
+  const levelNode = useScene((state) =>
+    levelId ? (state.nodes[levelId] as LevelNode | undefined) : undefined,
+  )
+  const currentBuildingId =
+    levelNode?.type === 'level' && levelNode.parentId
+      ? (levelNode.parentId as BuildingNode['id'])
+      : buildingId
+
+  const buildingRotationY = useScene((state) => {
+    if (!currentBuildingId) return 0
+    const node = state.nodes[currentBuildingId]
+    return node?.type === 'building' ? (node.rotation[1] ?? 0) : 0
+  })
+
+  const buildingPosition = useScene((state) => {
+    if (!currentBuildingId) {
+      return DEFAULT_BUILDING_POSITION
+    }
+
+    const node = state.nodes[currentBuildingId]
+    return node?.type === 'building'
+      ? (node.position as [number, number, number])
+      : DEFAULT_BUILDING_POSITION
+  })
+
+  const site = useScene((state) => {
+    for (const rootNodeId of state.rootNodeIds) {
+      const node = state.nodes[rootNodeId]
+      if (node?.type === 'site') {
+        return node as SiteNode
+      }
+    }
+
+    return null
+  })
+
+  const floorplanLevels = useScene(
+    useShallow((state) => {
+      if (!currentBuildingId) {
+        return [] as LevelNode[]
+      }
+
+      const buildingNode = state.nodes[currentBuildingId]
+      if (!buildingNode || buildingNode.type !== 'building') {
+        return [] as LevelNode[]
+      }
+
+      return buildingNode.children
+        .map((childId) => state.nodes[childId])
+        .filter((node): node is LevelNode => node?.type === 'level')
+        .sort((a, b) => a.level - b.level)
+    }),
+  )
+
+  const walls = useLevelChildren(levelId, (node): node is WallNode => node?.type === 'wall')
+  const fences = useLevelChildren(levelId, (node): node is FenceNode => node?.type === 'fence')
+  const slabs = useLevelChildren(levelId, (node): node is SlabNode => node?.type === 'slab')
+  const ceilings = useLevelChildren(
+    levelId,
+    (node): node is CeilingNode => node?.type === 'ceiling',
+  )
+  const levelGuides = useLevelChildren(levelId, (node): node is GuideNode => node?.type === 'guide')
+  const zones = useLevelChildren(levelId, (node): node is ZoneNodeType => node?.type === 'zone')
+  const roofs = useScene(
+    useShallow((state) => {
+      if (!levelId) {
+        return [] as RoofNode[]
+      }
+
+      const nextLevelNode = state.nodes[levelId]
+      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+        return [] as RoofNode[]
+      }
+
+      return nextLevelNode.children
+        .map((childId) => state.nodes[childId])
+        .filter((node): node is RoofNode => node?.type === 'roof' && node.visible !== false)
+    }),
+  )
+  const openings = useScene(
+    useShallow((state) => {
+      if (!levelId) {
+        return [] as OpeningNode[]
+      }
+
+      const nextLevelNode = state.nodes[levelId]
+      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+        return [] as OpeningNode[]
+      }
+
+      const nextWalls = nextLevelNode.children
+        .map((childId) => state.nodes[childId])
+        .filter((node): node is WallNode => node?.type === 'wall')
+
+      return nextWalls.flatMap((wall) =>
+        wall.children
+          .map((childId) => state.nodes[childId])
+          .filter((node): node is OpeningNode => node?.type === 'window' || node?.type === 'door'),
+      )
+    }),
+  )
+  const levelDescendantNodes = useScene(
+    useShallow((state) => {
+      if (!levelId) {
+        return [] as AnyNode[]
+      }
+
+      const nextLevelNode = state.nodes[levelId]
+      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+        return [] as AnyNode[]
+      }
+
+      return collectLevelDescendants(nextLevelNode, state.nodes as Record<string, AnyNode>)
+    }),
+  )
+
+  return {
+    buildingPosition,
+    buildingRotationY,
+    currentBuildingId,
+    ceilings,
+    fences,
+    floorplanLevels,
+    levelDescendantNodes,
+    levelGuides,
+    levelNode,
+    openings,
+    roofs,
+    site,
+    slabs,
+    walls,
+    zones,
+  }
+}
diff --git a/packages/editor/src/components/tools/ceiling/ceiling-tool.tsx b/packages/editor/src/components/tools/ceiling/ceiling-tool.tsx
index 3cfb1c8b4..59baa4c4d 100644
--- a/packages/editor/src/components/tools/ceiling/ceiling-tool.tsx
+++ b/packages/editor/src/components/tools/ceiling/ceiling-tool.tsx
@@ -111,15 +111,15 @@ export const CeilingTool: React.FC = () => {
     const onGridMove = (event: GridEvent) => {
       if (!(cursorRef.current && gridCursorRef.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])
 
-      const ceilingY = event.position[1] + CEILING_HEIGHT
-      const gridY = event.position[1] + GRID_OFFSET
+      const ceilingY = event.localPosition[1] + CEILING_HEIGHT
+      const gridY = event.localPosition[1] + GRID_OFFSET
 
       // Calculate snapped display position (bypass snap when Shift is held)
       const lastPoint = points[points.length - 1]
diff --git a/packages/editor/src/components/tools/door/move-door-tool.tsx b/packages/editor/src/components/tools/door/move-door-tool.tsx
index 8da68be53..799723690 100644
--- a/packages/editor/src/components/tools/door/move-door-tool.tsx
+++ b/packages/editor/src/components/tools/door/move-door-tool.tsx
@@ -5,6 +5,7 @@ import {
   isCurvedWall,
   sceneRegistry,
   spatialGridManager,
+  useLiveTransforms,
   useScene,
   type WallEvent,
 } from '@pascal-app/core'
@@ -127,6 +128,10 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
         parentId: event.node.id,
         wallId: event.node.id,
       })
+      useLiveTransforms.getState().set(movingDoorNode.id, {
+        position: [clampedX, clampedY, 0],
+        rotation: itemRotation,
+      })
 
       if (prevWallId && prevWallId !== event.node.id) markWallDirty(prevWallId)
       markWallDirty(event.node.id)
@@ -195,6 +200,10 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
           doorMesh.updateMatrixWorld(true)
         }
       }
+      useLiveTransforms.getState().set(movingDoorNode.id, {
+        position: [clampedX, clampedY, 0],
+        rotation: itemRotation,
+      })
       markWallDirty(event.node.id)
 
       const valid = !hasWallChildOverlap(
@@ -291,6 +300,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
       }
 
       markWallDirty(event.node.id)
+      useLiveTransforms.getState().clear(movingDoorNode.id)
       useScene.temporal.getState().pause()
 
       sfxEmitter.emit('sfx:item-place')
@@ -302,6 +312,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
 
     const onWallLeave = () => {
       hideCursor()
+      useLiveTransforms.getState().clear(movingDoorNode.id)
       if (isNew) return
       if (currentWallId && currentWallId !== original.parentId) {
         markWallDirty(currentWallId)
@@ -318,6 +329,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
     }
 
     const onCancel = () => {
+      useLiveTransforms.getState().clear(movingDoorNode.id)
       if (isNew) {
         useScene.getState().deleteNode(movingDoorNode.id)
         if (currentWallId) markWallDirty(currentWallId)
@@ -364,6 +376,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
           if (original.parentId) markWallDirty(original.parentId)
         }
       }
+      useLiveTransforms.getState().clear(movingDoorNode.id)
       useScene.temporal.getState().resume()
       emitter.off('wall:enter', onWallEnter)
       emitter.off('wall:move', onWallMove)
diff --git a/packages/editor/src/components/tools/fence/move-fence-tool.tsx b/packages/editor/src/components/tools/fence/move-fence-tool.tsx
index 10dd688b9..a5146efb3 100644
--- a/packages/editor/src/components/tools/fence/move-fence-tool.tsx
+++ b/packages/editor/src/components/tools/fence/move-fence-tool.tsx
@@ -1,17 +1,25 @@
 'use client'
 
-import { type AnyNodeId, type FenceNode, emitter, type GridEvent, useScene } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  emitter,
+  type FenceNode,
+  type GridEvent,
+  type LevelNode,
+  sceneRegistry,
+  useLiveTransforms,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import type * as THREE from 'three'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
+import { snapFenceDraftPoint } from './fence-drafting'
 import { CursorSphere } from '../shared/cursor-sphere'
 
-function snap(value: number) {
-  return Math.round(value * 2) / 2
-}
-
 function samePoint(a: [number, number], b: [number, number]) {
   return a[0] === b[0] && a[1] === b[1]
 }
@@ -24,10 +32,11 @@ type LinkedFenceSnapshot = {
 
 function getLinkedFenceSnapshots(args: {
   fenceId: FenceNode['id']
+  fenceParentId: string | null
   originalStart: [number, number]
   originalEnd: [number, number]
 }) {
-  const { fenceId, originalStart, originalEnd } = args
+  const { fenceId, fenceParentId, originalStart, originalEnd } = args
   const { nodes } = useScene.getState()
   const snapshots: LinkedFenceSnapshot[] = []
 
@@ -36,6 +45,10 @@ function getLinkedFenceSnapshots(args: {
       continue
     }
 
+    if ((node.parentId ?? null) !== fenceParentId) {
+      continue
+    }
+
     if (
       !samePoint(node.start, originalStart) &&
       !samePoint(node.start, originalEnd) &&
@@ -78,12 +91,14 @@ function getLinkedFenceUpdates(
 }
 
 export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
+  const activatedAtRef = useRef<number>(Date.now())
   const previousGridPosRef = useRef<[number, number] | null>(null)
   const originalStartRef = useRef<[number, number]>([...node.start] as [number, number])
   const originalEndRef = useRef<[number, number]>([...node.end] as [number, number])
   const linkedOriginalsRef = useRef(
     getLinkedFenceSnapshots({
       fenceId: node.id,
+      fenceParentId: node.parentId ?? null,
       originalStart: node.start,
       originalEnd: node.end,
     }),
@@ -106,10 +121,49 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
     const nodeId = nodeIdRef.current
     const originalStart = originalStartRef.current
     const originalEnd = originalEndRef.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 setMeshOffset = (fenceId: FenceNode['id'], deltaX: number, deltaZ: number) => {
+      const mesh = sceneRegistry.nodes.get(fenceId) as THREE.Object3D | undefined
+      if (!mesh) {
+        return
+      }
+
+      mesh.position.set(deltaX, 0, deltaZ)
+    }
+
+    const setFenceLiveTransform = (fence: FenceNode, deltaX: number, deltaZ: number) => {
+      const originalCenterX = (fence.start[0] + fence.end[0]) / 2
+      const originalCenterZ = (fence.start[1] + fence.end[1]) / 2
+      useLiveTransforms.getState().set(fence.id, {
+        position: [originalCenterX + deltaX, 0, originalCenterZ + deltaZ],
+        rotation: 0,
+      })
+    }
+
+    const clearPreviewState = () => {
+      setMeshOffset(nodeId, 0, 0)
+      useLiveTransforms.getState().clear(nodeId)
+
+      for (const linkedFence of linkedOriginalsRef.current) {
+        setMeshOffset(linkedFence.id, 0, 0)
+        useLiveTransforms.getState().clear(linkedFence.id)
+      }
+    }
+
     const applyNodePreview = (updates: Array<{ id: FenceNode['id']; start: [number, number]; end: [number, number] }>) => {
       useScene.getState().updateNodes(
         updates.map((entry) => ({
@@ -127,21 +181,33 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
       const centerX = (nextStart[0] + nextEnd[0]) / 2
       const centerZ = (nextStart[1] + nextEnd[1]) / 2
       setCursorLocalPos([centerX, 0, centerZ])
-      applyNodePreview([
-        { id: nodeId, start: nextStart, end: nextEnd },
-        ...getLinkedFenceUpdates(
-          linkedOriginalsRef.current,
-          originalStart,
-          originalEnd,
-          nextStart,
-          nextEnd,
-        ),
-      ])
+      const deltaX = nextStart[0] - originalStart[0]
+      const deltaZ = nextStart[1] - originalStart[1]
+      setMeshOffset(nodeId, deltaX, deltaZ)
+      setFenceLiveTransform(node, deltaX, deltaZ)
+
+      for (const linkedFence of linkedOriginalsRef.current) {
+        setMeshOffset(linkedFence.id, deltaX, deltaZ)
+        setFenceLiveTransform(
+          {
+            ...node,
+            id: linkedFence.id,
+            start: linkedFence.start,
+            end: linkedFence.end,
+          },
+          deltaX,
+          deltaZ,
+        )
+      }
     }
 
     const onGridMove = (event: GridEvent) => {
-      const localX = snap(event.localPosition[0])
-      const localZ = snap(event.localPosition[2])
+      const [localX, localZ] = snapFenceDraftPoint({
+        point: [event.localPosition[0], event.localPosition[2]],
+        walls: levelWalls,
+        fences: levelFences,
+        ignoreFenceIds: [nodeId],
+      })
 
       if (
         previousGridPosRef.current &&
@@ -164,17 +230,15 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
     }
 
     const onGridClick = (event: GridEvent) => {
+      if (Date.now() - activatedAtRef.current < 150) {
+        event.nativeEvent?.stopPropagation?.()
+        return
+      }
+
       const preview = previewRef.current ?? { start: originalStart, end: originalEnd }
 
       wasCommitted = true
 
-      // Restore original baseline while paused so the next resume+update
-      // registers as a single tracked change (undo reverts to original).
-      applyNodePreview([
-        { id: nodeId, start: originalStart, end: originalEnd },
-        ...linkedOriginalsRef.current,
-      ])
-
       useScene.temporal.getState().resume()
       applyNodePreview([
         { id: nodeId, start: preview.start, end: preview.end },
@@ -186,6 +250,10 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
           preview.end,
         ),
       ])
+      useLiveTransforms.getState().clear(nodeId)
+      for (const linkedFence of linkedOriginalsRef.current) {
+        useLiveTransforms.getState().clear(linkedFence.id)
+      }
       useScene.temporal.getState().pause()
 
       sfxEmitter.emit('sfx:item-place')
@@ -195,10 +263,7 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
     }
 
     const onCancel = () => {
-      applyNodePreview([
-        { id: nodeId, start: originalStart, end: originalEnd },
-        ...linkedOriginalsRef.current,
-      ])
+      clearPreviewState()
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       useScene.temporal.getState().resume()
       markToolCancelConsumed()
@@ -211,17 +276,19 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
 
     return () => {
       if (!wasCommitted) {
-        applyNodePreview([
-          { id: nodeId, start: originalStart, end: originalEnd },
-          ...linkedOriginalsRef.current,
-        ])
+        clearPreviewState()
+      } else {
+        useLiveTransforms.getState().clear(nodeId)
+        for (const linkedFence of linkedOriginalsRef.current) {
+          useLiveTransforms.getState().clear(linkedFence.id)
+        }
       }
       useScene.temporal.getState().resume()
       emitter.off('grid:move', onGridMove)
       emitter.off('grid:click', onGridClick)
       emitter.off('tool:cancel', onCancel)
     }
-  }, [exitMoveMode])
+  }, [exitMoveMode, node])
 
   return (
     <group>
diff --git a/packages/editor/src/components/tools/item/use-placement-coordinator.tsx b/packages/editor/src/components/tools/item/use-placement-coordinator.tsx
index e1fb7442e..1fb6fe665 100644
--- a/packages/editor/src/components/tools/item/use-placement-coordinator.tsx
+++ b/packages/editor/src/components/tools/item/use-placement-coordinator.tsx
@@ -16,15 +16,21 @@ import {
   type WallNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useFrame } from '@react-three/fiber'
-import { useEffect, useRef } from 'react'
+import { Html } from '@react-three/drei'
+import { createPortal, useFrame } from '@react-three/fiber'
+import { useEffect, useRef, useState } from 'react'
 import {
   BoxGeometry,
+  Box3,
+  BufferGeometry,
   EdgesGeometry,
   Euler,
+  Float32BufferAttribute,
   type Group,
   type LineSegments,
+  Matrix4,
   type Mesh,
+  type Object3D,
   PlaneGeometry,
   Quaternion,
   Vector3,
@@ -46,6 +52,119 @@ import type { DraftNodeHandle } from './use-draft-node'
 
 const DEFAULT_DIMENSIONS: [number, number, number] = [1, 1, 1]
 
+function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
+  if (unit === 'imperial') {
+    const feet = value * 3.280_84
+    const wholeFeet = Math.floor(feet)
+    const inches = Math.round((feet - wholeFeet) * 12)
+    if (inches === 12) return `${wholeFeet + 1}'0"`
+    return `${wholeFeet}'${inches}"`
+  }
+  return `${Number.parseFloat(value.toFixed(2))}m`
+}
+
+type PreviewBounds = {
+  min: [number, number, number]
+  max: [number, number, number]
+  dimensions: [number, number, number]
+  center: [number, number, number]
+}
+
+function getPreviewBoundsFromObject(object: Object3D | null): PreviewBounds | null {
+  if (!object) return null
+
+  object.updateWorldMatrix(true, true)
+
+  const inverseRootMatrix = new Matrix4().copy(object.matrixWorld).invert()
+  const localMatrix = new Matrix4()
+  const localBounds = new Box3()
+  const scratchBounds = new Box3()
+  const hasBounds = { current: false }
+  const registeredNodeObjects = new Set(sceneRegistry.nodes.values())
+
+  const expandBounds = (child: Object3D) => {
+    if (child !== object && registeredNodeObjects.has(child)) {
+      return
+    }
+
+    const mesh = child as Object3D & {
+      isMesh?: boolean
+      name?: string
+      geometry?: {
+        boundingBox: Box3 | null
+        computeBoundingBox?: () => void
+      }
+    }
+
+    if (mesh.isMesh && mesh.name !== 'cutout' && mesh.geometry) {
+      if (!mesh.geometry.boundingBox && mesh.geometry.computeBoundingBox) {
+        mesh.geometry.computeBoundingBox()
+      }
+
+      if (mesh.geometry.boundingBox) {
+        localMatrix.copy(inverseRootMatrix).multiply(mesh.matrixWorld)
+        scratchBounds.copy(mesh.geometry.boundingBox).applyMatrix4(localMatrix)
+        if (Number.isFinite(scratchBounds.min.x) && Number.isFinite(scratchBounds.max.x)) {
+          if (!hasBounds.current) {
+            localBounds.copy(scratchBounds)
+            hasBounds.current = true
+          } else {
+            localBounds.union(scratchBounds)
+          }
+        }
+      }
+    }
+
+    for (const grandchild of child.children) {
+      expandBounds(grandchild)
+    }
+  }
+
+  for (const child of object.children) {
+    expandBounds(child)
+  }
+
+  if (!hasBounds.current) return null
+
+  const size = new Vector3()
+  const center = new Vector3()
+  localBounds.getSize(size)
+  localBounds.getCenter(center)
+
+  if (size.x <= 0 || size.y <= 0 || size.z <= 0) {
+    return null
+  }
+
+  return {
+    min: [localBounds.min.x, localBounds.min.y, localBounds.min.z],
+    max: [localBounds.max.x, localBounds.max.y, localBounds.max.z],
+    dimensions: [size.x, size.y, size.z],
+    center: [center.x, center.y, center.z],
+  }
+}
+
+function getFallbackPreviewBounds(
+  item: import('@pascal-app/core').ItemNode | null,
+  asset: AssetInput,
+  attachTo: AssetInput['attachTo'],
+): PreviewBounds {
+  const dims = item ? getScaledDimensions(item) : (asset.dimensions ?? DEFAULT_DIMENSIONS)
+  return {
+    min: [
+      -dims[0] / 2,
+      0,
+      attachTo === 'wall-side' ? -dims[2] : -dims[2] / 2,
+    ],
+    max: [
+      dims[0] / 2,
+      dims[1],
+      attachTo === 'wall-side' ? 0 : dims[2] / 2,
+    ],
+    dimensions: dims,
+    center: [0, dims[1] / 2, attachTo === 'wall-side' ? -dims[2] / 2 : 0],
+  }
+}
+
 // Shared materials for placement cursor - we just change colors, not swap materials
 // Note: EdgesGeometry doesn't work with dashed lines, so using solid lines
 const edgeMaterial = new LineBasicNodeMaterial({
@@ -55,6 +174,13 @@ const edgeMaterial = new LineBasicNodeMaterial({
   depthWrite: false,
 })
 
+const measurementMaterial = new LineBasicNodeMaterial({
+  color: 0x0f_17_2a,
+  linewidth: 2,
+  depthTest: false,
+  depthWrite: false,
+})
+
 const basePlaneMaterial = new MeshBasicNodeMaterial({
   color: 0xef_44_44, // red-500 (invalid)
   transparent: true,
@@ -82,6 +208,9 @@ export interface PlacementCoordinatorConfig {
 export function usePlacementCoordinator(config: PlacementCoordinatorConfig): React.ReactNode {
   const cursorGroupRef = useRef<Group>(null!)
   const edgesRef = useRef<LineSegments>(null!)
+  const measurementWidthRef = useRef<LineSegments>(null!)
+  const measurementDepthRef = useRef<LineSegments>(null!)
+  const measurementHeightRef = useRef<LineSegments>(null!)
   const basePlaneRef = useRef<Mesh>(null!)
   const gridPosition = useRef(new Vector3(0, 0, 0))
   const lastRawPos = useRef(new Vector3(0, 0, 0))
@@ -89,6 +218,13 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     config.initialState ?? { surface: 'floor', wallId: null, ceilingId: null, surfaceItemId: null },
   )
   const shiftFreeRef = useRef(false)
+  const previewBoundsSignatureRef = useRef<string | null>(null)
+  const meshPreviewAppliedRef = useRef(false)
+  const dimensionBoundsRef = useRef<PreviewBounds | null>(null)
+  const [measurementTargetState, setMeasurementTargetState] = useState<{
+    id: string
+    object: Object3D
+  } | null>(null)
 
   // Store config callbacks in refs to avoid re-running effect when they change
   const configRef = useRef(config)
@@ -96,10 +232,128 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
   const { canPlaceOnFloor, canPlaceOnWall, canPlaceOnCeiling } = useSpatialQuery()
   const { asset, draftNode } = config
+  const unit = useViewer((state) => state.unit)
+
+  const updatePreviewGeometry = (bounds: PreviewBounds) => {
+    const [width, height, depth] = bounds.dimensions
+    const [centerX, centerY, centerZ] = bounds.center
+    const signature = `${width.toFixed(4)}:${height.toFixed(4)}:${depth.toFixed(4)}:${centerX.toFixed(4)}:${centerY.toFixed(4)}:${centerZ.toFixed(4)}`
+
+    if (previewBoundsSignatureRef.current === signature) return
+    previewBoundsSignatureRef.current = signature
+
+    const nextBoxGeometry = new BoxGeometry(width, height, depth)
+    nextBoxGeometry.translate(centerX, centerY, centerZ)
+    const nextEdgesGeometry = new EdgesGeometry(nextBoxGeometry)
+
+    const nextBasePlaneGeometry = new PlaneGeometry(width, depth)
+    nextBasePlaneGeometry.rotateX(-Math.PI / 2)
+    nextBasePlaneGeometry.translate(centerX, 0.01, centerZ)
+
+    edgesRef.current.geometry.dispose()
+    edgesRef.current.geometry = nextEdgesGeometry
+    basePlaneRef.current.geometry.dispose()
+    basePlaneRef.current.geometry = nextBasePlaneGeometry
+    nextBoxGeometry.dispose()
+  }
+
+  const updateDimensionGuides = (bounds: PreviewBounds) => {
+    dimensionBoundsRef.current = bounds
+    const [width, , depth] = bounds.dimensions
+    const [centerX, , centerZ] = bounds.center
+    const minX = centerX - width / 2
+    const maxX = centerX + width / 2
+    const minZ = centerZ - depth / 2
+    const maxZ = centerZ + depth / 2
+    const guideOffset = 0.18
+    const tick = 0.08
+    const y = 0.02
+
+    const widthPoints = [
+      minX,
+      y,
+      maxZ + guideOffset,
+      maxX,
+      y,
+      maxZ + guideOffset,
+
+      minX,
+      y,
+      maxZ + guideOffset - tick,
+      minX,
+      y,
+      maxZ + guideOffset + tick,
+
+      maxX,
+      y,
+      maxZ + guideOffset - tick,
+      maxX,
+      y,
+      maxZ + guideOffset + tick,
+    ]
+
+    const depthPoints = [
+      maxX + guideOffset,
+      y,
+      minZ,
+      maxX + guideOffset,
+      y,
+      maxZ,
+
+      maxX + guideOffset - tick,
+      y,
+      minZ,
+      maxX + guideOffset + tick,
+      y,
+      minZ,
+
+      maxX + guideOffset - tick,
+      y,
+      maxZ,
+      maxX + guideOffset + tick,
+      y,
+      maxZ,
+    ]
+
+    const heightPoints = [
+      minX - guideOffset,
+      0,
+      minZ,
+      minX - guideOffset,
+      bounds.dimensions[1],
+      minZ,
+
+      minX - guideOffset - tick,
+      0,
+      minZ,
+      minX - guideOffset + tick,
+      0,
+      minZ,
+
+      minX - guideOffset - tick,
+      bounds.dimensions[1],
+      minZ,
+      minX - guideOffset + tick,
+      bounds.dimensions[1],
+      minZ,
+    ]
+
+    const applyPoints = (ref: React.RefObject<LineSegments>, points: number[]) => {
+      const geometry = new BufferGeometry()
+      geometry.setAttribute('position', new Float32BufferAttribute(points, 3))
+      ref.current!.geometry.dispose()
+      ref.current!.geometry = geometry
+    }
+
+    applyPoints(measurementWidthRef, widthPoints)
+    applyPoints(measurementDepthRef, depthPoints)
+    applyPoints(measurementHeightRef, heightPoints)
+  }
 
   useEffect(() => {
     if (!asset) return
     useScene.temporal.getState().pause()
+    meshPreviewAppliedRef.current = false
 
     const validators = { canPlaceOnFloor, canPlaceOnWall, canPlaceOnCeiling }
 
@@ -825,12 +1079,14 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     // ---- Bounding box geometry ----
 
     const draft = draftNode.current
-    const dims = draft ? getScaledDimensions(draft) : (asset.dimensions ?? DEFAULT_DIMENSIONS)
-    const boxGeometry = new BoxGeometry(dims[0], dims[1], dims[2])
-    const wallSideZOffset = asset.attachTo === 'wall-side' ? -dims[2] / 2 : 0
-    boxGeometry.translate(0, dims[1] / 2, wallSideZOffset)
-    const edgesGeometry = new EdgesGeometry(boxGeometry)
-    edgesRef.current.geometry = edgesGeometry
+    const fallbackBounds = getFallbackPreviewBounds(draft, asset, asset.attachTo)
+    updatePreviewGeometry(
+      draft
+        ? (getPreviewBoundsFromObject(sceneRegistry.nodes.get(draft.id) ?? null) ??
+          fallbackBounds)
+        : fallbackBounds,
+    )
+    updateDimensionGuides(fallbackBounds)
 
     // ---- Undo protection ----
     // Undo replaces the entire `nodes` object with a previous snapshot, which doesn't
@@ -874,6 +1130,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
 
     return () => {
       tearingDown = true
+      meshPreviewAppliedRef.current = false
       unsubDraftWatch()
       // Clear live transform for any remaining draft
       if (draftNode.current) {
@@ -919,6 +1176,20 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
     if (!draftNode.current) return
     const mesh = sceneRegistry.nodes.get(draftNode.current.id)
     if (!mesh) return
+    if (
+      measurementTargetState?.id !== draftNode.current.id ||
+      measurementTargetState.object !== mesh
+    ) {
+      setMeasurementTargetState({ id: draftNode.current.id, object: mesh })
+    }
+
+    if (!meshPreviewAppliedRef.current) {
+      const previewBounds = getPreviewBoundsFromObject(mesh)
+      if (previewBounds) {
+        updatePreviewGeometry(previewBounds)
+        meshPreviewAppliedRef.current = true
+      }
+    }
 
     // Hide wall/ceiling-attached items when between surfaces (only cursor visible)
     if (asset.attachTo && placementState.current.surface === 'floor') {
@@ -946,10 +1217,6 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
           draftNode.current.rotation,
         )
         mesh.position.y = slabElevation
-        // Cursor group is at the world root (not inside a level group), so add the
-        // level group's current world Y to convert from level-local to world space.
-        const levelGroup = sceneRegistry.nodes.get(levelId as AnyNodeId)
-        cursorGroupRef.current.position.y = slabElevation + (levelGroup?.position.y ?? 0)
       }
     }
   })
@@ -966,12 +1233,119 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
   const basePlaneGeometry = new PlaneGeometry(dims[0], dims[2])
   basePlaneGeometry.rotateX(-Math.PI / 2) // Make it horizontal
   basePlaneGeometry.translate(0, 0.01, wallSideZOffset) // Slightly above ground to avoid z-fighting
+  const initialDimensionBounds = getFallbackPreviewBounds(initialDraft, config.asset!, config.asset?.attachTo)
+  const widthLabel = formatMeasurement(initialDimensionBounds.dimensions[0], unit)
+  const depthLabel = formatMeasurement(initialDimensionBounds.dimensions[2], unit)
+  const heightLabel = formatMeasurement(initialDimensionBounds.dimensions[1], unit)
+  const widthLabelPosition: [number, number, number] = [
+    initialDimensionBounds.center[0],
+    0.04,
+    initialDimensionBounds.center[2] + initialDimensionBounds.dimensions[2] / 2 + 0.24,
+  ]
+  const depthLabelPosition: [number, number, number] = [
+    initialDimensionBounds.center[0] + initialDimensionBounds.dimensions[0] / 2 + 0.24,
+    0.04,
+    initialDimensionBounds.center[2],
+  ]
+  const heightLabelPosition: [number, number, number] = [
+    initialDimensionBounds.center[0] - initialDimensionBounds.dimensions[0] / 2 - 0.24,
+    initialDimensionBounds.dimensions[1] / 2,
+    initialDimensionBounds.center[2] - initialDimensionBounds.dimensions[2] / 2,
+  ]
+
+  const measurementTarget =
+    draftNode.current && measurementTargetState?.id === draftNode.current.id
+      ? measurementTargetState.object
+      : null
+  const measurementContent = (
+    <>
+      <lineSegments
+        layers={EDITOR_LAYER}
+        material={measurementMaterial}
+        ref={measurementWidthRef}
+        renderOrder={998}
+      >
+        <bufferGeometry />
+      </lineSegments>
+      <lineSegments
+        layers={EDITOR_LAYER}
+        material={measurementMaterial}
+        ref={measurementDepthRef}
+        renderOrder={998}
+      >
+        <bufferGeometry />
+      </lineSegments>
+      <lineSegments
+        layers={EDITOR_LAYER}
+        material={measurementMaterial}
+        ref={measurementHeightRef}
+        renderOrder={998}
+      >
+        <bufferGeometry />
+      </lineSegments>
+      <Html center position={widthLabelPosition}>
+        <div
+          style={{
+            background: 'rgba(15, 23, 42, 0.86)',
+            border: '1px solid rgba(15, 23, 42, 0.65)',
+            borderRadius: '999px',
+            color: '#f8fafc',
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+            fontSize: '11px',
+            fontWeight: 600,
+            lineHeight: 1,
+            padding: '4px 8px',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {widthLabel}
+        </div>
+      </Html>
+      <Html center position={depthLabelPosition}>
+        <div
+          style={{
+            background: 'rgba(15, 23, 42, 0.86)',
+            border: '1px solid rgba(15, 23, 42, 0.65)',
+            borderRadius: '999px',
+            color: '#f8fafc',
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+            fontSize: '11px',
+            fontWeight: 600,
+            lineHeight: 1,
+            padding: '4px 8px',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {depthLabel}
+        </div>
+      </Html>
+      <Html center position={heightLabelPosition}>
+        <div
+          style={{
+            background: 'rgba(15, 23, 42, 0.86)',
+            border: '1px solid rgba(15, 23, 42, 0.65)',
+            borderRadius: '999px',
+            color: '#f8fafc',
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+            fontSize: '11px',
+            fontWeight: 600,
+            lineHeight: 1,
+            padding: '4px 8px',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {heightLabel}
+        </div>
+      </Html>
+    </>
+  )
 
   return (
     <group ref={cursorGroupRef}>
       <lineSegments layers={EDITOR_LAYER} material={edgeMaterial} ref={edgesRef} renderOrder={999}>
         <edgesGeometry args={[initialBoxGeometry]} />
       </lineSegments>
+      {measurementTarget ? createPortal(measurementContent, measurementTarget) : measurementContent}
       <mesh
         geometry={basePlaneGeometry}
         layers={EDITOR_LAYER}
diff --git a/packages/editor/src/components/tools/roof/move-roof-tool.tsx b/packages/editor/src/components/tools/roof/move-roof-tool.tsx
index 502ff0aa6..1f24c89e1 100644
--- a/packages/editor/src/components/tools/roof/move-roof-tool.tsx
+++ b/packages/editor/src/components/tools/roof/move-roof-tool.tsx
@@ -16,6 +16,7 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
+import { clearRoofDuplicateMetadata } from '../../../lib/roof-duplication'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { snapFenceDraftPoint } from '../fence/fence-drafting'
@@ -100,6 +101,7 @@ export const MoveRoofTool: React.FC<{
     // resetting the mesh position (it resets on dirty) and from triggering
     // expensive merged-mesh CSG rebuilds on every frame.
     let wasCommitted = false
+    let wasCancelled = false
 
     // Track pending rotation — no store updates during drag
     let pendingRotation: number = movingNode.rotation as number
@@ -251,11 +253,19 @@ export const MoveRoofTool: React.FC<{
       // Resume temporal and apply the final state as a single undoable step.
       useScene.temporal.getState().resume()
 
-      useScene.getState().updateNode(movingNode.id, {
-        position: [localX, movingNode.position[1], localZ],
-        rotation: pendingRotation,
-        metadata: committedMeta,
-      })
+      if (isNew && movingNode.type === 'roof') {
+        clearRoofDuplicateMetadata(movingNode.id as AnyNodeId, {
+          position: [localX, movingNode.position[1], localZ],
+          rotation: pendingRotation,
+          metadata: committedMeta,
+        })
+      } else {
+        useScene.getState().updateNode(movingNode.id, {
+          position: [localX, movingNode.position[1], localZ],
+          rotation: pendingRotation,
+          metadata: committedMeta,
+        })
+      }
 
       useScene.temporal.getState().pause()
 
@@ -267,6 +277,7 @@ export const MoveRoofTool: React.FC<{
     }
 
     const onCancel = () => {
+      wasCancelled = true
       useLiveTransforms.getState().clear(movingNode.id)
       if (isNew) {
         useScene.getState().deleteNode(movingNode.id)
@@ -325,16 +336,12 @@ export const MoveRoofTool: React.FC<{
       // Clear ephemeral live transform
       useLiveTransforms.getState().clear(movingNode.id)
 
-      if (!wasCommitted) {
-        if (isNew) {
-          useScene.getState().deleteNode(movingNode.id)
-        } else {
-          useScene.getState().updateNode(movingNode.id, {
-            position: original.position,
-            rotation: original.rotation,
-            metadata: original.metadata,
-          })
-        }
+      if (!(wasCommitted || wasCancelled || isNew)) {
+        useScene.getState().updateNode(movingNode.id, {
+          position: original.position,
+          rotation: original.rotation,
+          metadata: original.metadata,
+        })
       }
       useScene.temporal.getState().resume()
       emitter.off('grid:move', onGridMove)
diff --git a/packages/editor/src/components/tools/window/move-window-tool.tsx b/packages/editor/src/components/tools/window/move-window-tool.tsx
index 627803062..16d784e49 100644
--- a/packages/editor/src/components/tools/window/move-window-tool.tsx
+++ b/packages/editor/src/components/tools/window/move-window-tool.tsx
@@ -4,6 +4,7 @@ import {
   isCurvedWall,
   sceneRegistry,
   spatialGridManager,
+  useLiveTransforms,
   useScene,
   type WallEvent,
   WindowNode,
@@ -144,6 +145,10 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
         parentId: event.node.id,
         wallId: event.node.id,
       })
+      useLiveTransforms.getState().set(movingWindowNode.id, {
+        position: [clampedX, clampedY, 0],
+        rotation: itemRotation,
+      })
 
       if (prevWallId && prevWallId !== event.node.id) markWallDirty(prevWallId)
       markWallDirty(event.node.id)
@@ -215,6 +220,10 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
           windowMesh.updateMatrixWorld(true)
         }
       }
+      useLiveTransforms.getState().set(movingWindowNode.id, {
+        position: [clampedX, clampedY, 0],
+        rotation: itemRotation,
+      })
       markWallDirty(event.node.id)
 
       const valid = !hasWallChildOverlap(
@@ -326,6 +335,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
       }
 
       markWallDirty(event.node.id)
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       useScene.temporal.getState().pause()
 
       sfxEmitter.emit('sfx:item-place')
@@ -337,6 +347,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
 
     const onWallLeave = () => {
       hideCursor()
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       if (isNew) return // No original to restore for duplicates
       // Move mode: restore to original position while off-wall
       if (currentWallId && currentWallId !== original.parentId) {
@@ -354,6 +365,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
     }
 
     const onCancel = () => {
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       if (isNew) {
         useScene.getState().deleteNode(movingWindowNode.id)
         if (currentWallId) markWallDirty(currentWallId)
@@ -401,6 +413,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
           if (original.parentId) markWallDirty(original.parentId)
         }
       }
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       useScene.temporal.getState().resume()
       emitter.off('wall:enter', onWallEnter)
       emitter.off('wall:move', onWallMove)
diff --git a/packages/editor/src/components/ui/panels/roof-panel.tsx b/packages/editor/src/components/ui/panels/roof-panel.tsx
index adab45b33..f13139c1a 100755
--- a/packages/editor/src/components/ui/panels/roof-panel.tsx
+++ b/packages/editor/src/components/ui/panels/roof-panel.tsx
@@ -4,6 +4,7 @@ import {
   type AnyNode,
   type AnyNodeId,
   type RoofNode,
+  type RoofSurfaceMaterialRole,
   RoofNode as RoofNodeSchema,
   type RoofSegmentNode,
   RoofSegmentNode as RoofSegmentNodeSchema,
@@ -14,6 +15,7 @@ import { Copy, Move, Plus, Trash2 } from 'lucide-react'
 import { useCallback } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import { duplicateRoofSubtree } from '../../../lib/roof-duplication'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
 import { PanelSection } from '../controls/panel-section'
@@ -73,44 +75,15 @@ export function RoofPanel() {
   )
 
   const handleDuplicate = useCallback(() => {
-    if (!node?.parentId) return
+    if (!node) return
     sfxEmitter.emit('sfx:item-pick')
 
-    let duplicateInfo = structuredClone(node) as any
-    delete duplicateInfo.id
-    duplicateInfo.metadata = { ...duplicateInfo.metadata, isNew: true }
-    // Offset slightly so it's visible
-    duplicateInfo.position = [
-      duplicateInfo.position[0] + 1,
-      duplicateInfo.position[1],
-      duplicateInfo.position[2] + 1,
-    ]
-
     try {
-      const duplicate = RoofNodeSchema.parse(duplicateInfo)
-      useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
-
-      // Also duplicate all child segments
-      const nodesState = useScene.getState().nodes
-      const children = node.children || []
-
-      for (const childId of children) {
-        const childNode = nodesState[childId]
-        if (childNode && childNode.type === 'roof-segment') {
-          let childDuplicateInfo = structuredClone(childNode) as any
-          delete childDuplicateInfo.id
-          childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata, isNew: true }
-          const childDuplicate = RoofSegmentNodeSchema.parse(childDuplicateInfo)
-          useScene.getState().createNode(childDuplicate, duplicate.id as AnyNodeId)
-        }
-      }
-
-      setSelection({ selectedIds: [] })
-      setMovingNode(duplicate)
+      duplicateRoofSubtree(node.id as AnyNodeId, { mode: 'move' })
     } catch (e) {
       console.error('Failed to duplicate roof', e)
     }
-  }, [node, setSelection, setMovingNode])
+  }, [node])
 
   const handleMove = useCallback(() => {
     if (node) {
diff --git a/packages/editor/src/components/ui/panels/stair-panel.tsx b/packages/editor/src/components/ui/panels/stair-panel.tsx
index 362c42aa1..466a7e0b3 100644
--- a/packages/editor/src/components/ui/panels/stair-panel.tsx
+++ b/packages/editor/src/components/ui/panels/stair-panel.tsx
@@ -9,7 +9,6 @@ import {
   type StairSlabOpeningMode,
   type StairTopLandingMode,
   type StairType,
-  StairNode as StairNodeSchema,
   type StairSegmentNode,
   StairSegmentNode as StairSegmentNodeSchema,
   useScene,
@@ -17,6 +16,7 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { Copy, Move, Plus, Trash2 } from 'lucide-react'
 import { useCallback } from 'react'
+import { duplicateStairSubtree } from '../../../lib/stair-duplication'
 import { useShallow } from 'zustand/react/shallow'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
@@ -58,7 +58,6 @@ export function StairPanel() {
   const setSelection = useViewer((s) => s.setSelection)
   const updateNode = useScene((s) => s.updateNode)
   const createNode = useScene((s) => s.createNode)
-  const createNodes = useScene((s) => s.createNodes)
   const setMovingNode = useEditor((s) => s.setMovingNode)
 
   const node = useScene((s) =>
@@ -151,46 +150,15 @@ export function StairPanel() {
   )
 
   const handleDuplicate = useCallback(() => {
-    if (!node?.parentId) return
+    if (!node) return
     sfxEmitter.emit('sfx:item-pick')
 
-    let duplicateInfo = structuredClone(node) as any
-    delete duplicateInfo.id
-    duplicateInfo.metadata = { ...duplicateInfo.metadata }
-    duplicateInfo.children = []
-    duplicateInfo.position = [
-      duplicateInfo.position[0] + 1,
-      duplicateInfo.position[1],
-      duplicateInfo.position[2] + 1,
-    ]
-
     try {
-      const duplicate = StairNodeSchema.parse(duplicateInfo)
-
-      const nodesState = useScene.getState().nodes
-      const children = node.children || []
-      const createOps: { node: AnyNode; parentId?: AnyNodeId }[] = [
-        { node: duplicate, parentId: duplicate.parentId as AnyNodeId },
-      ]
-
-      for (const childId of children) {
-        const childNode = nodesState[childId]
-        if (childNode && childNode.type === 'stair-segment') {
-          let childDuplicateInfo = structuredClone(childNode) as any
-          delete childDuplicateInfo.id
-          childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata }
-          const childDuplicate = StairSegmentNodeSchema.parse(childDuplicateInfo)
-          createOps.push({ node: childDuplicate, parentId: duplicate.id as AnyNodeId })
-        }
-      }
-
-      createNodes(createOps)
-
-      setSelection({ selectedIds: [duplicate.id as AnyNode['id']] })
+      duplicateStairSubtree(node.id as AnyNodeId, { mode: 'move' })
     } catch (e) {
       console.error('Failed to duplicate stair', e)
     }
-  }, [createNodes, node, setSelection])
+  }, [node])
 
   const handleMove = useCallback(() => {
     if (node) {
diff --git a/packages/editor/src/lib/floorplan/geometry.ts b/packages/editor/src/lib/floorplan/geometry.ts
new file mode 100644
index 000000000..f334570f4
--- /dev/null
+++ b/packages/editor/src/lib/floorplan/geometry.ts
@@ -0,0 +1,263 @@
+import type { Point2D } from '@pascal-app/core'
+import type { FloorplanLineSegment, FloorplanSelectionBounds } from './types'
+
+export function clampPlanValue(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
+export function rotatePlanVector(x: number, y: number, rotation: number): [number, number] {
+  const cos = Math.cos(rotation)
+  const sin = Math.sin(rotation)
+  return [x * cos + y * sin, -x * sin + y * cos]
+}
+
+export function getRotatedRectanglePolygon(
+  center: Point2D,
+  width: number,
+  depth: number,
+  rotation: number,
+): Point2D[] {
+  const halfWidth = width / 2
+  const halfDepth = depth / 2
+  const corners: Array<[number, number]> = [
+    [-halfWidth, -halfDepth],
+    [halfWidth, -halfDepth],
+    [halfWidth, halfDepth],
+    [-halfWidth, halfDepth],
+  ]
+
+  return corners.map(([localX, localY]) => {
+    const [offsetX, offsetY] = rotatePlanVector(localX, localY, rotation)
+    return {
+      x: center.x + offsetX,
+      y: center.y + offsetY,
+    }
+  })
+}
+
+export function interpolatePlanPoint(start: Point2D, end: Point2D, t: number): Point2D {
+  return {
+    x: start.x + (end.x - start.x) * t,
+    y: start.y + (end.y - start.y) * t,
+  }
+}
+
+export function getPlanPointDistance(start: Point2D, end: Point2D): number {
+  return Math.hypot(end.x - start.x, end.y - start.y)
+}
+
+export function movePlanPointTowards(start: Point2D, end: Point2D, distance: number): Point2D {
+  const totalDistance = getPlanPointDistance(start, end)
+  if (totalDistance <= Number.EPSILON || distance <= 0) {
+    return start
+  }
+
+  return interpolatePlanPoint(start, end, Math.min(1, distance / totalDistance))
+}
+
+export function getThickPlanLinePolygon(line: FloorplanLineSegment, thickness: number): Point2D[] {
+  const dx = line.end.x - line.start.x
+  const dy = line.end.y - line.start.y
+  const length = Math.hypot(dx, dy)
+
+  if (length <= Number.EPSILON || thickness <= 0) {
+    return [line.start, line.end, line.end, line.start]
+  }
+
+  const halfThickness = thickness / 2
+  const normalX = (-dy / length) * halfThickness
+  const normalY = (dx / length) * halfThickness
+
+  return [
+    { x: line.start.x + normalX, y: line.start.y + normalY },
+    { x: line.end.x + normalX, y: line.end.y + normalY },
+    { x: line.end.x - normalX, y: line.end.y - normalY },
+    { x: line.start.x - normalX, y: line.start.y - normalY },
+  ]
+}
+
+export function getFloorplanSelectionBounds(
+  start: [number, number],
+  end: [number, number],
+): FloorplanSelectionBounds {
+  return {
+    minX: Math.min(start[0], end[0]),
+    maxX: Math.max(start[0], end[0]),
+    minY: Math.min(start[1], end[1]),
+    maxY: Math.max(start[1], end[1]),
+  }
+}
+
+export function isPointInsideSelectionBounds(point: Point2D, bounds: FloorplanSelectionBounds) {
+  return (
+    point.x >= bounds.minX &&
+    point.x <= bounds.maxX &&
+    point.y >= bounds.minY &&
+    point.y <= bounds.maxY
+  )
+}
+
+export function isPointInsidePolygon(point: Point2D, polygon: Point2D[]) {
+  let isInside = false
+
+  for (
+    let currentIndex = 0, previousIndex = polygon.length - 1;
+    currentIndex < polygon.length;
+    previousIndex = currentIndex, currentIndex += 1
+  ) {
+    const current = polygon[currentIndex]
+    const previous = polygon[previousIndex]
+
+    if (!(current && previous)) {
+      continue
+    }
+
+    const intersects =
+      current.y > point.y !== previous.y > point.y &&
+      point.x <
+        ((previous.x - current.x) * (point.y - current.y)) / (previous.y - current.y) + current.x
+
+    if (intersects) {
+      isInside = !isInside
+    }
+  }
+
+  return isInside
+}
+
+export function isPointInsidePolygonWithHoles(
+  point: Point2D,
+  polygon: Point2D[],
+  holes: Point2D[][] = [],
+) {
+  return (
+    isPointInsidePolygon(point, polygon) && !holes.some((hole) => isPointInsidePolygon(point, hole))
+  )
+}
+
+function getLineOrientation(start: Point2D, end: Point2D, point: Point2D) {
+  return (end.x - start.x) * (point.y - start.y) - (end.y - start.y) * (point.x - start.x)
+}
+
+function isPointOnSegment(point: Point2D, start: Point2D, end: Point2D) {
+  const epsilon = 1e-9
+
+  return (
+    Math.abs(getLineOrientation(start, end, point)) <= epsilon &&
+    point.x >= Math.min(start.x, end.x) - epsilon &&
+    point.x <= Math.max(start.x, end.x) + epsilon &&
+    point.y >= Math.min(start.y, end.y) - epsilon &&
+    point.y <= Math.max(start.y, end.y) + epsilon
+  )
+}
+
+function doSegmentsIntersect(
+  firstStart: Point2D,
+  firstEnd: Point2D,
+  secondStart: Point2D,
+  secondEnd: Point2D,
+) {
+  const orientation1 = getLineOrientation(firstStart, firstEnd, secondStart)
+  const orientation2 = getLineOrientation(firstStart, firstEnd, secondEnd)
+  const orientation3 = getLineOrientation(secondStart, secondEnd, firstStart)
+  const orientation4 = getLineOrientation(secondStart, secondEnd, firstEnd)
+
+  const hasProperIntersection =
+    ((orientation1 > 0 && orientation2 < 0) || (orientation1 < 0 && orientation2 > 0)) &&
+    ((orientation3 > 0 && orientation4 < 0) || (orientation3 < 0 && orientation4 > 0))
+
+  if (hasProperIntersection) {
+    return true
+  }
+
+  return (
+    isPointOnSegment(secondStart, firstStart, firstEnd) ||
+    isPointOnSegment(secondEnd, firstStart, firstEnd) ||
+    isPointOnSegment(firstStart, secondStart, secondEnd) ||
+    isPointOnSegment(firstEnd, secondStart, secondEnd)
+  )
+}
+
+export function doesPolygonIntersectSelectionBounds(
+  polygon: Point2D[],
+  bounds: FloorplanSelectionBounds,
+) {
+  if (polygon.length === 0) {
+    return false
+  }
+
+  if (polygon.some((point) => isPointInsideSelectionBounds(point, bounds))) {
+    return true
+  }
+
+  const boundsCorners: [Point2D, Point2D, Point2D, Point2D] = [
+    { x: bounds.minX, y: bounds.minY },
+    { x: bounds.maxX, y: bounds.minY },
+    { x: bounds.maxX, y: bounds.maxY },
+    { x: bounds.minX, y: bounds.maxY },
+  ]
+
+  if (boundsCorners.some((corner) => isPointInsidePolygon(corner, polygon))) {
+    return true
+  }
+
+  const boundsEdges = [
+    [boundsCorners[0], boundsCorners[1]],
+    [boundsCorners[1], boundsCorners[2]],
+    [boundsCorners[2], boundsCorners[3]],
+    [boundsCorners[3], boundsCorners[0]],
+  ] as const
+
+  for (let index = 0; index < polygon.length; index += 1) {
+    const start = polygon[index]
+    const end = polygon[(index + 1) % polygon.length]
+
+    if (!(start && end)) {
+      continue
+    }
+
+    for (const [edgeStart, edgeEnd] of boundsEdges) {
+      if (doSegmentsIntersect(start, end, edgeStart, edgeEnd)) {
+        return true
+      }
+    }
+  }
+
+  return false
+}
+
+export function getDistanceToWallSegment(
+  point: Point2D,
+  start: [number, number],
+  end: [number, number],
+) {
+  const dx = end[0] - start[0]
+  const dy = end[1] - start[1]
+  const lengthSquared = dx * dx + dy * dy
+
+  if (lengthSquared <= Number.EPSILON) {
+    return Math.hypot(point.x - start[0], point.y - start[1])
+  }
+
+  const projection = clampPlanValue(
+    ((point.x - start[0]) * dx + (point.y - start[1]) * dy) / lengthSquared,
+    0,
+    1,
+  )
+  const projectedX = start[0] + dx * projection
+  const projectedY = start[1] + dy * projection
+
+  return Math.hypot(point.x - projectedX, point.y - projectedY)
+}
+
+export function pointMatchesWallPlanPoint(
+  point: Point2D | undefined,
+  planPoint: [number, number],
+  epsilon = 1e-6,
+): boolean {
+  if (!point) {
+    return false
+  }
+
+  return Math.abs(point.x - planPoint[0]) <= epsilon && Math.abs(point.y - planPoint[1]) <= epsilon
+}
diff --git a/packages/editor/src/lib/floorplan/index.ts b/packages/editor/src/lib/floorplan/index.ts
new file mode 100644
index 000000000..846b28e3f
--- /dev/null
+++ b/packages/editor/src/lib/floorplan/index.ts
@@ -0,0 +1,38 @@
+export {
+  clampPlanValue,
+  doesPolygonIntersectSelectionBounds,
+  getDistanceToWallSegment,
+  getFloorplanSelectionBounds,
+  getPlanPointDistance,
+  getRotatedRectanglePolygon,
+  getThickPlanLinePolygon,
+  interpolatePlanPoint,
+  isPointInsidePolygon,
+  isPointInsidePolygonWithHoles,
+  isPointInsideSelectionBounds,
+  movePlanPointTowards,
+  pointMatchesWallPlanPoint,
+  rotatePlanVector,
+} from './geometry'
+export {
+  buildFloorplanItemEntry,
+  collectLevelDescendants,
+  getItemFloorplanTransform,
+} from './items'
+export {
+  buildFloorplanStairEntry,
+  computeFloorplanStairSegmentTransforms,
+  getFloorplanStairSegmentPolygon,
+} from './stairs'
+export type {
+  FloorplanItemEntry,
+  FloorplanLineSegment,
+  FloorplanNodeTransform,
+  FloorplanSelectionBounds,
+  FloorplanStairArrowEntry,
+  FloorplanStairEntry,
+  FloorplanStairSegmentEntry,
+  LevelDescendantMap,
+  StairSegmentTransform,
+} from './types'
+export { getFloorplanWall, getFloorplanWallThickness } from './walls'
diff --git a/packages/editor/src/lib/floorplan/items.ts b/packages/editor/src/lib/floorplan/items.ts
new file mode 100644
index 000000000..272aa9ba5
--- /dev/null
+++ b/packages/editor/src/lib/floorplan/items.ts
@@ -0,0 +1,410 @@
+import {
+  type AnyNode,
+  type AnyNodeId,
+  getScaledDimensions,
+  type ItemNode,
+  type LevelNode,
+  sceneRegistry,
+  useLiveTransforms,
+} from '@pascal-app/core'
+import type { Object3D } from 'three'
+import { Box3, Matrix4, Vector3 } from 'three'
+import { getRotatedRectanglePolygon, rotatePlanVector } from './geometry'
+import type { FloorplanItemEntry, FloorplanNodeTransform, LevelDescendantMap } from './types'
+
+export function collectLevelDescendants(
+  levelNode: LevelNode,
+  nodes: Record<string, AnyNode>,
+): AnyNode[] {
+  const descendants: AnyNode[] = []
+  const stack = [...levelNode.children].reverse() as AnyNodeId[]
+
+  while (stack.length > 0) {
+    const nodeId = stack.pop()
+    if (!nodeId) {
+      continue
+    }
+
+    const node = nodes[nodeId]
+    if (!node) {
+      continue
+    }
+
+    descendants.push(node)
+
+    if ('children' in node && Array.isArray(node.children) && node.children.length > 0) {
+      for (let index = node.children.length - 1; index >= 0; index -= 1) {
+        stack.push(node.children[index] as AnyNodeId)
+      }
+    }
+  }
+
+  return descendants
+}
+
+export function getItemFloorplanTransform(
+  item: ItemNode,
+  nodeById: LevelDescendantMap,
+  cache: Map<string, FloorplanNodeTransform | null>,
+): FloorplanNodeTransform | null {
+  const cached = cache.get(item.id)
+  if (cached !== undefined) {
+    return cached
+  }
+
+  const localRotation = item.rotation[1] ?? 0
+  let result: FloorplanNodeTransform | null = null
+  const itemMetadata =
+    typeof item.metadata === 'object' && item.metadata !== null && !Array.isArray(item.metadata)
+      ? (item.metadata as Record<string, unknown>)
+      : null
+
+  if (itemMetadata?.isTransient === true) {
+    const live = useLiveTransforms.getState().get(item.id)
+    if (live) {
+      result = {
+        position: {
+          x: live.position[0],
+          y: live.position[2],
+        },
+        rotation: live.rotation,
+      }
+
+      cache.set(item.id, result)
+      return result
+    }
+  }
+
+  if (item.parentId) {
+    const parentNode = nodeById.get(item.parentId as AnyNodeId)
+
+    if (parentNode?.type === 'wall') {
+      const wallRotation = -Math.atan2(
+        parentNode.end[1] - parentNode.start[1],
+        parentNode.end[0] - parentNode.start[0],
+      )
+      const wallLocalZ =
+        item.asset.attachTo === 'wall-side'
+          ? ((parentNode.thickness ?? 0.1) / 2) * (item.side === 'back' ? -1 : 1)
+          : item.position[2]
+      const [offsetX, offsetY] = rotatePlanVector(item.position[0], wallLocalZ, wallRotation)
+
+      result = {
+        position: {
+          x: parentNode.start[0] + offsetX,
+          y: parentNode.start[1] + offsetY,
+        },
+        rotation: wallRotation + localRotation,
+      }
+    } else if (parentNode?.type === 'item') {
+      const parentTransform = getItemFloorplanTransform(parentNode, nodeById, cache)
+      if (parentTransform) {
+        const [offsetX, offsetY] = rotatePlanVector(
+          item.position[0],
+          item.position[2],
+          parentTransform.rotation,
+        )
+        result = {
+          position: {
+            x: parentTransform.position.x + offsetX,
+            y: parentTransform.position.y + offsetY,
+          },
+          rotation: parentTransform.rotation + localRotation,
+        }
+      }
+    } else {
+      result = {
+        position: { x: item.position[0], y: item.position[2] },
+        rotation: localRotation,
+      }
+    }
+  } else {
+    result = {
+      position: { x: item.position[0], y: item.position[2] },
+      rotation: localRotation,
+    }
+  }
+
+  cache.set(item.id, result)
+  return result
+}
+
+export function buildFloorplanItemEntry(
+  item: ItemNode,
+  nodeById: LevelDescendantMap,
+  cache: Map<string, FloorplanNodeTransform | null>,
+): FloorplanItemEntry | null {
+  const transform = getItemFloorplanTransform(item, nodeById, cache)
+  if (!transform) {
+    return null
+  }
+
+  const object = sceneRegistry.nodes.get(item.id)
+  const realMeshPolygon = object
+    ? getRealMeshFloorplanPolygon(transform, object)
+    : getCachedMeshFloorplanPolygon(item, transform)
+  if (!realMeshPolygon) {
+    return null
+  }
+
+  const dimensionPolygon = getItemDimensionPolygon(item, transform)
+
+  return {
+    dimensionPolygon,
+    item,
+    polygon: realMeshPolygon,
+    usesRealMesh: realMeshPolygon !== null,
+  }
+}
+
+type Point = {
+  x: number
+  y: number
+}
+
+function getItemDimensionPolygon(item: ItemNode, transform: FloorplanNodeTransform): Point[] {
+  const [width, , depth] = getScaledDimensions(item)
+  const centerLocalZ = item.asset.attachTo === 'wall-side' ? -depth / 2 : 0
+  const [offsetX, offsetY] = rotatePlanVector(0, centerLocalZ, transform.rotation)
+
+  return getRotatedRectanglePolygon(
+    {
+      x: transform.position.x + offsetX,
+      y: transform.position.y + offsetY,
+    },
+    width,
+    depth,
+    transform.rotation,
+  )
+}
+
+function getCachedLocalMeshPolygon(item: ItemNode): Point[] | null {
+  const metadata =
+    typeof item.metadata === 'object' && item.metadata !== null && !Array.isArray(item.metadata)
+      ? (item.metadata as Record<string, unknown>)
+      : null
+  const rawPolygon = metadata?.meshLocalPlanPolygon
+  if (!Array.isArray(rawPolygon)) {
+    return null
+  }
+
+  const polygon = rawPolygon.flatMap((point) => {
+    if (!Array.isArray(point) || point.length < 2) {
+      return []
+    }
+    const x = point[0]
+    const y = point[1]
+    return typeof x === 'number' && typeof y === 'number' ? [{ x, y }] : []
+  })
+
+  return polygon.length >= 3 ? polygon : null
+}
+
+function getCachedMeshFloorplanPolygon(item: ItemNode, transform: FloorplanNodeTransform) {
+  const localPolygon = getCachedLocalMeshPolygon(item)
+  if (!localPolygon) {
+    return null
+  }
+
+  return localPolygon.map((corner) => {
+    const [offsetX, offsetY] = rotatePlanVector(corner.x, corner.y, transform.rotation)
+    return {
+      x: transform.position.x + offsetX,
+      y: transform.position.y + offsetY,
+    }
+  })
+}
+
+function getRealMeshFloorplanPolygon(transform: FloorplanNodeTransform, object: Object3D) {
+  const localPolygon = getLocalMeshFloorplanPolygon(object)
+  if (localPolygon.length === 0) {
+    return null
+  }
+
+  return localPolygon.map((corner) => {
+    const [offsetX, offsetY] = rotatePlanVector(corner.x, corner.y, transform.rotation)
+    return {
+      x: transform.position.x + offsetX,
+      y: transform.position.y + offsetY,
+    }
+  })
+}
+
+function getLocalMeshFloorplanPolygon(object: Object3D): Point[] {
+  object.updateWorldMatrix(true, true)
+
+  const inverseRootMatrix = new Matrix4().copy(object.matrixWorld).invert()
+  const localMatrix = new Matrix4()
+  const scratchBounds = new Box3()
+  const scratchPosition = new Vector3()
+  const registeredNodeObjects = new Set(sceneRegistry.nodes.values())
+  const footprintPoints: Point[] = []
+
+  const collectPoints = (child: Object3D) => {
+    if (child !== object && registeredNodeObjects.has(child)) {
+      return
+    }
+
+    const mesh = child as {
+      isMesh?: boolean
+      name?: string
+      geometry?: {
+        boundingBox: Box3 | null
+        computeBoundingBox?: () => void
+        attributes?: {
+          position?: {
+            count: number
+            getX: (index: number) => number
+            getY: (index: number) => number
+            getZ: (index: number) => number
+          }
+        }
+      }
+      matrixWorld: Matrix4
+    }
+
+    if (mesh.isMesh && mesh.name !== 'cutout' && mesh.geometry) {
+      if (!mesh.geometry.boundingBox && mesh.geometry.computeBoundingBox) {
+        mesh.geometry.computeBoundingBox()
+      }
+
+      localMatrix.copy(inverseRootMatrix).multiply(mesh.matrixWorld)
+
+      const vertexPositions = mesh.geometry.attributes?.position
+      if (vertexPositions && vertexPositions.count > 0) {
+        for (let index = 0; index < vertexPositions.count; index += 1) {
+          scratchPosition
+            .set(
+              vertexPositions.getX(index),
+              vertexPositions.getY(index),
+              vertexPositions.getZ(index),
+            )
+            .applyMatrix4(localMatrix)
+
+          if (Number.isFinite(scratchPosition.x) && Number.isFinite(scratchPosition.z)) {
+            footprintPoints.push({ x: scratchPosition.x, y: scratchPosition.z })
+          }
+        }
+      } else if (mesh.geometry.boundingBox) {
+        scratchBounds.copy(mesh.geometry.boundingBox)
+        scratchBounds.applyMatrix4(localMatrix)
+        if (Number.isFinite(scratchBounds.min.x) && Number.isFinite(scratchBounds.max.x)) {
+          footprintPoints.push(
+            { x: scratchBounds.min.x, y: scratchBounds.min.z },
+            { x: scratchBounds.max.x, y: scratchBounds.min.z },
+            { x: scratchBounds.max.x, y: scratchBounds.max.z },
+            { x: scratchBounds.min.x, y: scratchBounds.max.z },
+          )
+        }
+      }
+    }
+
+    for (const grandchild of child.children) {
+      collectPoints(grandchild)
+    }
+  }
+
+  for (const child of object.children) {
+    collectPoints(child)
+  }
+
+  return getMinimumAreaBoundingRect(footprintPoints) ?? []
+}
+
+function getMinimumAreaBoundingRect(points: Point[]) {
+  if (points.length === 0) {
+    return null
+  }
+
+  const hull = getConvexHull(points)
+  if (hull.length === 0) {
+    return null
+  }
+
+  if (hull.length === 1) {
+    const point = hull[0]!
+    return [point, point, point, point]
+  }
+
+  if (hull.length === 2) {
+    const [start, end] = hull
+    return [start!, end!, end!, start!]
+  }
+
+  let bestArea = Number.POSITIVE_INFINITY
+  let bestRect: Point[] | null = null
+
+  for (let index = 0; index < hull.length; index += 1) {
+    const start = hull[index]!
+    const end = hull[(index + 1) % hull.length]!
+    const angle = Math.atan2(end.y - start.y, end.x - start.x)
+    const cos = Math.cos(-angle)
+    const sin = Math.sin(-angle)
+
+    let minX = Number.POSITIVE_INFINITY
+    let maxX = Number.NEGATIVE_INFINITY
+    let minY = Number.POSITIVE_INFINITY
+    let maxY = Number.NEGATIVE_INFINITY
+
+    for (const point of hull) {
+      const rx = point.x * cos - point.y * sin
+      const ry = point.x * sin + point.y * cos
+      minX = Math.min(minX, rx)
+      maxX = Math.max(maxX, rx)
+      minY = Math.min(minY, ry)
+      maxY = Math.max(maxY, ry)
+    }
+
+    const area = (maxX - minX) * (maxY - minY)
+    if (area >= bestArea) {
+      continue
+    }
+
+    bestRect = [
+      { x: minX, y: minY },
+      { x: maxX, y: minY },
+      { x: maxX, y: maxY },
+      { x: minX, y: maxY },
+    ].map((point) => ({
+      x: point.x * Math.cos(angle) - point.y * Math.sin(angle),
+      y: point.x * Math.sin(angle) + point.y * Math.cos(angle),
+    }))
+    bestArea = area
+  }
+
+  return bestRect
+}
+
+function getConvexHull(points: Point[]) {
+  const uniquePoints = Array.from(
+    new Map(points.map((point) => [`${point.x.toFixed(6)}:${point.y.toFixed(6)}`, point])).values(),
+  ).sort((a, b) => (a.x === b.x ? a.y - b.y : a.x - b.x))
+
+  if (uniquePoints.length <= 1) {
+    return uniquePoints
+  }
+
+  const cross = (origin: Point, a: Point, b: Point) =>
+    (a.x - origin.x) * (b.y - origin.y) - (a.y - origin.y) * (b.x - origin.x)
+
+  const lower: Point[] = []
+  for (const point of uniquePoints) {
+    while (lower.length >= 2 && cross(lower[lower.length - 2]!, lower[lower.length - 1]!, point) <= 0) {
+      lower.pop()
+    }
+    lower.push(point)
+  }
+
+  const upper: Point[] = []
+  for (let index = uniquePoints.length - 1; index >= 0; index -= 1) {
+    const point = uniquePoints[index]!
+    while (upper.length >= 2 && cross(upper[upper.length - 2]!, upper[upper.length - 1]!, point) <= 0) {
+      upper.pop()
+    }
+    upper.push(point)
+  }
+
+  lower.pop()
+  upper.pop()
+  return [...lower, ...upper]
+}
diff --git a/packages/editor/src/lib/floorplan/selection-tool.ts b/packages/editor/src/lib/floorplan/selection-tool.ts
new file mode 100644
index 000000000..f6827e950
--- /dev/null
+++ b/packages/editor/src/lib/floorplan/selection-tool.ts
@@ -0,0 +1,231 @@
+import type {
+  CeilingNode,
+  DoorNode,
+  ItemNode,
+  Point2D,
+  RoofNode,
+  RoofSegmentNode,
+  SlabNode,
+  StairNode,
+  WallNode,
+  WindowNode,
+} from '@pascal-app/core'
+import {
+  doesPolygonIntersectSelectionBounds,
+  getDistanceToWallSegment,
+  isPointInsidePolygon,
+  isPointInsidePolygonWithHoles,
+} from './geometry'
+import type { FloorplanSelectionBounds } from './types'
+
+type OpeningNode = WindowNode | DoorNode
+
+type OpeningPolygonEntry = {
+  opening: OpeningNode
+  polygon: Point2D[]
+}
+
+type ItemEntry = {
+  item: ItemNode
+  polygon: Point2D[]
+}
+
+type StairEntry = {
+  hitPolygons: Point2D[][]
+  stair: StairNode
+  segments: Array<{ polygon: Point2D[] }>
+}
+
+type WallEntry = {
+  wall: WallNode
+  polygon: Point2D[]
+}
+
+type SlabEntry = {
+  slab: SlabNode
+  polygon: Point2D[]
+  holes: Point2D[][]
+}
+
+type CeilingEntry = {
+  ceiling: CeilingNode
+  polygon: Point2D[]
+  holes: Point2D[][]
+}
+
+type RoofEntry = {
+  roof: RoofNode
+  segments: Array<{
+    polygon: Point2D[]
+    segment: RoofSegmentNode
+  }>
+}
+
+type FloorplanSelectionToolContext = {
+  point: Point2D
+  phase: 'site' | 'structure' | 'furnish'
+  isItemContextActive: boolean
+  items: ItemEntry[]
+  openings: OpeningPolygonEntry[]
+  stairs: StairEntry[]
+  walls: WallEntry[]
+  slabs: SlabEntry[]
+  ceilings: CeilingEntry[]
+  roofs: RoofEntry[]
+  openingHitTolerance: number
+  wallHitTolerance: number
+  getOpeningCenterLine: (polygon: Point2D[]) => { start: Point2D; end: Point2D } | null
+}
+
+function getItemHitId(context: FloorplanSelectionToolContext) {
+  if (!context.isItemContextActive) {
+    return null
+  }
+
+  const itemHit = context.items.find(({ polygon }) => isPointInsidePolygon(context.point, polygon))
+  return itemHit?.item.id ?? null
+}
+
+function getStairHitPolygons(stair: StairEntry) {
+  return stair.hitPolygons.length > 0
+    ? stair.hitPolygons
+    : stair.segments.map(({ polygon }) => polygon)
+}
+
+export function getFloorplanHitNodeId(context: FloorplanSelectionToolContext) {
+  if (context.phase === 'structure') {
+    const openingHit = context.openings.find(({ polygon }) => {
+      if (isPointInsidePolygon(context.point, polygon)) {
+        return true
+      }
+
+      const centerLine = context.getOpeningCenterLine(polygon)
+      if (!centerLine) {
+        return false
+      }
+
+      return (
+        getDistanceToWallSegment(
+          context.point,
+          [centerLine.start.x, centerLine.start.y],
+          [centerLine.end.x, centerLine.end.y],
+        ) <= context.openingHitTolerance
+      )
+    })
+    if (openingHit) {
+      return openingHit.opening.id
+    }
+
+    const stairHit = context.stairs.find((stair) =>
+      getStairHitPolygons(stair).some((polygon) => isPointInsidePolygon(context.point, polygon)),
+    )
+    if (stairHit) {
+      return stairHit.stair.id
+    }
+
+    const wallHit = context.walls.find(
+      ({ wall, polygon }) =>
+        isPointInsidePolygon(context.point, polygon) ||
+        getDistanceToWallSegment(context.point, wall.start, wall.end) <= context.wallHitTolerance,
+    )
+    if (wallHit) {
+      return wallHit.wall.id
+    }
+
+    const roofHit = context.roofs.find(({ segments }) =>
+      segments.some(({ polygon }) => isPointInsidePolygon(context.point, polygon)),
+    )
+    if (roofHit) {
+      return roofHit.roof.id
+    }
+
+    const ceilingHit = context.ceilings.find(({ polygon, holes }) =>
+      isPointInsidePolygonWithHoles(context.point, polygon, holes),
+    )
+    if (ceilingHit) {
+      return ceilingHit.ceiling.id
+    }
+
+    const slabHit = context.slabs.find(({ polygon, holes }) =>
+      isPointInsidePolygonWithHoles(context.point, polygon, holes),
+    )
+    if (slabHit) {
+      return slabHit.slab.id
+    }
+  }
+
+  return getItemHitId(context)
+}
+
+type FloorplanSelectionBoundsContext = {
+  bounds: FloorplanSelectionBounds
+  phase: 'site' | 'structure' | 'furnish'
+  isItemContextActive: boolean
+  items: ItemEntry[]
+  walls: WallEntry[]
+  openings: OpeningPolygonEntry[]
+  slabs: SlabEntry[]
+  ceilings: CeilingEntry[]
+  stairs: StairEntry[]
+  roofs: RoofEntry[]
+}
+
+export function getFloorplanSelectionIdsInBounds({
+  bounds,
+  phase,
+  isItemContextActive,
+  items,
+  walls,
+  openings,
+  slabs,
+  ceilings,
+  stairs,
+  roofs,
+}: FloorplanSelectionBoundsContext) {
+  const itemIds = isItemContextActive
+    ? items
+        .filter(({ polygon }) => doesPolygonIntersectSelectionBounds(polygon, bounds))
+        .map(({ item }) => item.id)
+    : []
+
+  if (phase !== 'structure') {
+    return itemIds
+  }
+
+  const wallIds = walls
+    .filter(({ polygon }) => doesPolygonIntersectSelectionBounds(polygon, bounds))
+    .map(({ wall }) => wall.id)
+  const openingIds = openings
+    .filter(({ polygon }) => doesPolygonIntersectSelectionBounds(polygon, bounds))
+    .map(({ opening }) => opening.id)
+  const slabIds = slabs
+    .filter(({ polygon }) => doesPolygonIntersectSelectionBounds(polygon, bounds))
+    .map(({ slab }) => slab.id)
+  const ceilingIds = ceilings
+    .filter(({ polygon }) => doesPolygonIntersectSelectionBounds(polygon, bounds))
+    .map(({ ceiling }) => ceiling.id)
+  const stairIds = stairs
+    .filter((stair) =>
+      getStairHitPolygons(stair).some((polygon) =>
+        doesPolygonIntersectSelectionBounds(polygon, bounds),
+      ),
+    )
+    .map(({ stair }) => stair.id)
+  const roofIds = roofs
+    .filter(({ segments }) =>
+      segments.some(({ polygon }) => doesPolygonIntersectSelectionBounds(polygon, bounds)),
+    )
+    .map(({ roof }) => roof.id)
+
+  return Array.from(
+    new Set([
+      ...itemIds,
+      ...wallIds,
+      ...openingIds,
+      ...slabIds,
+      ...ceilingIds,
+      ...stairIds,
+      ...roofIds,
+    ]),
+  )
+}
diff --git a/packages/editor/src/lib/floorplan/stairs.ts b/packages/editor/src/lib/floorplan/stairs.ts
new file mode 100644
index 000000000..3f06d171f
--- /dev/null
+++ b/packages/editor/src/lib/floorplan/stairs.ts
@@ -0,0 +1,461 @@
+import type { Point2D, StairNode, StairSegmentNode } from '@pascal-app/core'
+import {
+  clampPlanValue,
+  getPlanPointDistance,
+  getThickPlanLinePolygon,
+  interpolatePlanPoint,
+  movePlanPointTowards,
+  rotatePlanVector,
+} from './geometry'
+import type {
+  FloorplanLineSegment,
+  FloorplanStairArrowEntry,
+  FloorplanStairEntry,
+  FloorplanStairSegmentEntry,
+  StairSegmentTransform,
+} from './types'
+
+const FLOORPLAN_STAIR_OUTLINE_BAND_THICKNESS = 0.05
+const FLOORPLAN_STAIR_OUTLINE_MAX_FRACTION = 0.18
+const FLOORPLAN_STAIR_TREAD_BAND_THICKNESS = 0.05 * 0.82
+const FLOORPLAN_STAIR_TREAD_MIN_THICKNESS = 0.02 * 1.5
+const FLOORPLAN_STAIR_ARROW_HEAD_MIN_SIZE = 0.14
+const FLOORPLAN_STAIR_ARROW_HEAD_MAX_SIZE = 0.24
+
+type FloorplanStairArrowSide = 'back' | 'front' | 'left' | 'right'
+
+function getFloorplanStairSegmentCenterLine(polygon: Point2D[]): FloorplanLineSegment | null {
+  if (polygon.length < 4) {
+    return null
+  }
+
+  const [backLeft, backRight, frontRight, frontLeft] = polygon
+
+  return {
+    start: interpolatePlanPoint(backLeft!, backRight!, 0.5),
+    end: interpolatePlanPoint(frontLeft!, frontRight!, 0.5),
+  }
+}
+
+function getFloorplanStairInnerPolygon(polygon: Point2D[]): Point2D[] {
+  if (polygon.length < 4) {
+    return polygon
+  }
+
+  const [backLeft, backRight, frontRight, frontLeft] = polygon
+  const outerWidth = getPlanPointDistance(backLeft!, backRight!)
+  const outerLength = getPlanPointDistance(backLeft!, frontLeft!)
+  const widthInset = Math.min(
+    FLOORPLAN_STAIR_OUTLINE_BAND_THICKNESS,
+    outerWidth * FLOORPLAN_STAIR_OUTLINE_MAX_FRACTION,
+  )
+  const lengthInset = Math.min(
+    FLOORPLAN_STAIR_OUTLINE_BAND_THICKNESS,
+    outerLength * FLOORPLAN_STAIR_OUTLINE_MAX_FRACTION,
+  )
+
+  const insetBackLeft = movePlanPointTowards(backLeft!, frontLeft!, lengthInset)
+  const insetBackRight = movePlanPointTowards(backRight!, frontRight!, lengthInset)
+  const insetFrontLeft = movePlanPointTowards(frontLeft!, backLeft!, lengthInset)
+  const insetFrontRight = movePlanPointTowards(frontRight!, backRight!, lengthInset)
+
+  const innerPolygon = [
+    movePlanPointTowards(insetBackLeft, insetBackRight, widthInset),
+    movePlanPointTowards(insetBackRight, insetBackLeft, widthInset),
+    movePlanPointTowards(insetFrontRight, insetFrontLeft, widthInset),
+    movePlanPointTowards(insetFrontLeft, insetFrontRight, widthInset),
+  ]
+
+  const innerWidth = getPlanPointDistance(innerPolygon[0]!, innerPolygon[1]!)
+  const innerLength = getPlanPointDistance(innerPolygon[0]!, innerPolygon[3]!)
+
+  return innerWidth > 0.06 && innerLength > 0.06 ? innerPolygon : polygon
+}
+
+function getFloorplanStairTreadLines(
+  segment: StairSegmentNode,
+  innerPolygon: Point2D[],
+): FloorplanLineSegment[] {
+  if (segment.segmentType !== 'stair' || segment.stepCount <= 1 || innerPolygon.length < 4) {
+    return []
+  }
+
+  const [backLeft, backRight, frontRight, frontLeft] = innerPolygon
+  const treadLines: FloorplanLineSegment[] = []
+
+  for (let stepIndex = 1; stepIndex < segment.stepCount; stepIndex += 1) {
+    const t = stepIndex / segment.stepCount
+    treadLines.push({
+      start: interpolatePlanPoint(backLeft!, frontLeft!, t),
+      end: interpolatePlanPoint(backRight!, frontRight!, t),
+    })
+  }
+
+  return treadLines
+}
+
+function getFloorplanStairTreadThickness(segment: StairSegmentNode, innerPolygon: Point2D[]) {
+  if (segment.segmentType !== 'stair' || segment.stepCount <= 1 || innerPolygon.length < 4) {
+    return 0
+  }
+
+  const innerWidth = getPlanPointDistance(innerPolygon[0]!, innerPolygon[1]!)
+  const innerLength = getPlanPointDistance(innerPolygon[0]!, innerPolygon[3]!)
+  const treadRun = innerLength / Math.max(segment.stepCount, 1)
+  return clampPlanValue(
+    Math.min(FLOORPLAN_STAIR_TREAD_BAND_THICKNESS, innerWidth * 0.12, treadRun * 0.44),
+    FLOORPLAN_STAIR_TREAD_MIN_THICKNESS,
+    FLOORPLAN_STAIR_TREAD_BAND_THICKNESS,
+  )
+}
+
+function getFloorplanStairTreadBars(
+  segment: StairSegmentNode,
+  innerPolygon: Point2D[],
+  treadThickness = getFloorplanStairTreadThickness(segment, innerPolygon),
+): Point2D[][] {
+  const treadLines = getFloorplanStairTreadLines(segment, innerPolygon)
+  if (treadLines.length === 0 || treadThickness <= 0) {
+    return []
+  }
+
+  return treadLines.map((line) => getThickPlanLinePolygon(line, treadThickness))
+}
+
+function getFloorplanStairSegmentCenterPoint(segment: FloorplanStairSegmentEntry): Point2D | null {
+  if (segment.centerLine) {
+    return interpolatePlanPoint(segment.centerLine.start, segment.centerLine.end, 0.5)
+  }
+
+  if (segment.polygon.length < 4) {
+    return null
+  }
+
+  const [backLeft, backRight, frontRight, frontLeft] = segment.polygon
+
+  return {
+    x: (backLeft!.x + backRight!.x + frontRight!.x + frontLeft!.x) / 4,
+    y: (backLeft!.y + backRight!.y + frontRight!.y + frontLeft!.y) / 4,
+  }
+}
+
+function getFloorplanStairSegmentSidePoint(
+  segment: FloorplanStairSegmentEntry,
+  side: FloorplanStairArrowSide,
+): Point2D | null {
+  if (segment.polygon.length < 4) {
+    return null
+  }
+
+  const [backLeft, backRight, frontRight, frontLeft] = segment.polygon
+
+  switch (side) {
+    case 'back':
+      return interpolatePlanPoint(backLeft!, backRight!, 0.5)
+    case 'front':
+      return interpolatePlanPoint(frontLeft!, frontRight!, 0.5)
+    case 'left':
+      return interpolatePlanPoint(backLeft!, frontLeft!, 0.5)
+    case 'right':
+      return interpolatePlanPoint(backRight!, frontRight!, 0.5)
+  }
+}
+
+function getFloorplanStairExitSide(
+  nextSegment: StairSegmentNode | undefined,
+): FloorplanStairArrowSide {
+  if (!nextSegment) {
+    return 'front'
+  }
+
+  if (nextSegment.attachmentSide === 'left') {
+    return 'right'
+  }
+  if (nextSegment.attachmentSide === 'right') {
+    return 'left'
+  }
+
+  return 'front'
+}
+
+function appendUniquePlanPoint(points: Point2D[], point: Point2D | null) {
+  if (!point) {
+    return
+  }
+
+  const lastPoint = points[points.length - 1]
+  if (lastPoint && getPlanPointDistance(lastPoint, point) <= 0.001) {
+    return
+  }
+
+  points.push(point)
+}
+
+function getFloorplanArcPoint(center: Point2D, radius: number, angle: number): Point2D {
+  return {
+    x: center.x + Math.cos(angle) * radius,
+    y: center.y + Math.sin(angle) * radius,
+  }
+}
+
+function getNormalizedFloorplanStairSweepAngle(stair: StairNode) {
+  const stairType = stair.stairType ?? 'straight'
+  const baseSweepAngle =
+    stair.sweepAngle ?? (stairType === 'spiral' ? Math.PI * 2 : Math.PI / 2)
+
+  if (Math.abs(baseSweepAngle) >= Math.PI * 2) {
+    return Math.sign(baseSweepAngle || 1) * (Math.PI * 2 - 0.001)
+  }
+
+  return baseSweepAngle
+}
+
+function getFloorplanCurvedStairHitPolygon(stair: StairNode): Point2D[] {
+  const stairType = stair.stairType ?? 'straight'
+  const sweepAngle = getNormalizedFloorplanStairSweepAngle(stair)
+  const startAngle = stair.rotation - sweepAngle / 2
+  const endAngle = startAngle + sweepAngle
+  const center = {
+    x: stair.position[0],
+    y: stair.position[2],
+  }
+  const innerRadius = Math.max(
+    stairType === 'spiral' ? 0.05 : 0.2,
+    stair.innerRadius ?? (stairType === 'spiral' ? 0.2 : 0.9),
+  )
+  const outerRadius = innerRadius + stair.width
+  const outerArcLength = Math.abs(sweepAngle) * outerRadius
+  const segmentCount = Math.max(
+    24,
+    Math.ceil(Math.abs(sweepAngle) / (Math.PI / 24)),
+    Math.ceil(outerArcLength / 0.14),
+  )
+  const outerPoints: Point2D[] = []
+  const innerPoints: Point2D[] = []
+
+  for (let index = 0; index <= segmentCount; index += 1) {
+    const t = index / segmentCount
+    const angle = startAngle + (endAngle - startAngle) * t
+    outerPoints.push(getFloorplanArcPoint(center, outerRadius, angle))
+    innerPoints.push(getFloorplanArcPoint(center, innerRadius, angle))
+  }
+
+  return [...outerPoints, ...innerPoints.reverse()]
+}
+
+function buildFloorplanStairArrow(
+  segments: FloorplanStairSegmentEntry[],
+): FloorplanStairArrowEntry | null {
+  const rawPoints: Point2D[] = []
+
+  for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex += 1) {
+    const segment = segments[segmentIndex]!
+    const nextSegment = segments[segmentIndex + 1]?.segment
+    const entryPoint = getFloorplanStairSegmentSidePoint(segment, 'back')
+    const exitPoint = getFloorplanStairSegmentSidePoint(
+      segment,
+      getFloorplanStairExitSide(nextSegment),
+    )
+
+    if (!(entryPoint && exitPoint)) {
+      continue
+    }
+
+    appendUniquePlanPoint(rawPoints, entryPoint)
+
+    const isStraightSegment = getPlanPointDistance(entryPoint, exitPoint) <= 0.001
+    if (isStraightSegment) {
+      continue
+    }
+
+    const exitSide = getFloorplanStairExitSide(nextSegment)
+    if (exitSide === 'front') {
+      appendUniquePlanPoint(rawPoints, exitPoint)
+      continue
+    }
+
+    appendUniquePlanPoint(rawPoints, getFloorplanStairSegmentCenterPoint(segment))
+    appendUniquePlanPoint(rawPoints, exitPoint)
+  }
+
+  if (rawPoints.length < 2) {
+    return null
+  }
+
+  const firstPoint = rawPoints[0]!
+  const secondPoint = rawPoints[1]!
+  const beforeLastPoint = rawPoints[rawPoints.length - 2]!
+  const lastPoint = rawPoints[rawPoints.length - 1]!
+  const firstLength = getPlanPointDistance(firstPoint, secondPoint)
+  const lastLength = getPlanPointDistance(beforeLastPoint, lastPoint)
+
+  if (firstLength <= Number.EPSILON || lastLength <= Number.EPSILON) {
+    return null
+  }
+
+  const polyline = [
+    movePlanPointTowards(firstPoint, secondPoint, Math.min(0.24, firstLength * 0.18)),
+    ...rawPoints.slice(1, -1),
+    movePlanPointTowards(lastPoint, beforeLastPoint, Math.min(0.3, lastLength * 0.22)),
+  ]
+  const arrowTailPoint = polyline[polyline.length - 2]
+  const arrowTip = polyline[polyline.length - 1]
+
+  if (!(arrowTailPoint && arrowTip)) {
+    return null
+  }
+
+  const arrowBodyLength = getPlanPointDistance(arrowTailPoint, arrowTip)
+  if (arrowBodyLength <= Number.EPSILON) {
+    return null
+  }
+
+  const arrowHeadLength = clampPlanValue(
+    arrowBodyLength * 0.72,
+    FLOORPLAN_STAIR_ARROW_HEAD_MIN_SIZE,
+    FLOORPLAN_STAIR_ARROW_HEAD_MAX_SIZE,
+  )
+  const arrowHeadBase = movePlanPointTowards(arrowTip, arrowTailPoint, arrowHeadLength)
+  const directionX = arrowTip.x - arrowHeadBase.x
+  const directionY = arrowTip.y - arrowHeadBase.y
+  const directionLength = Math.hypot(directionX, directionY)
+
+  if (directionLength <= Number.EPSILON) {
+    return null
+  }
+
+  const normalX = -directionY / directionLength
+  const normalY = directionX / directionLength
+  const arrowHeadHalfWidth = arrowHeadLength * 0.34
+
+  return {
+    head: [
+      arrowTip,
+      {
+        x: arrowHeadBase.x + normalX * arrowHeadHalfWidth,
+        y: arrowHeadBase.y + normalY * arrowHeadHalfWidth,
+      },
+      {
+        x: arrowHeadBase.x - normalX * arrowHeadHalfWidth,
+        y: arrowHeadBase.y - normalY * arrowHeadHalfWidth,
+      },
+    ],
+    polyline,
+  }
+}
+
+export function computeFloorplanStairSegmentTransforms(
+  segments: StairSegmentNode[],
+): StairSegmentTransform[] {
+  const transforms: StairSegmentTransform[] = []
+  let currentX = 0
+  let currentY = 0
+  let currentZ = 0
+  let currentRotation = 0
+
+  for (let index = 0; index < segments.length; index += 1) {
+    const segment = segments[index]!
+
+    if (index === 0) {
+      transforms.push({
+        position: [currentX, currentY, currentZ],
+        rotation: currentRotation,
+      })
+      continue
+    }
+
+    const previousSegment = segments[index - 1]!
+    let attachX = 0
+    let attachY = previousSegment.height
+    let attachZ = previousSegment.length
+    let rotationDelta = 0
+
+    if (segment.attachmentSide === 'left') {
+      attachX = previousSegment.width / 2
+      attachZ = previousSegment.length / 2
+      rotationDelta = Math.PI / 2
+    } else if (segment.attachmentSide === 'right') {
+      attachX = -previousSegment.width / 2
+      attachZ = previousSegment.length / 2
+      rotationDelta = -Math.PI / 2
+    }
+
+    const [rotatedAttachX, rotatedAttachZ] = rotatePlanVector(attachX, attachZ, currentRotation)
+    currentX += rotatedAttachX
+    currentY += attachY
+    currentZ += rotatedAttachZ
+    currentRotation += rotationDelta
+
+    transforms.push({
+      position: [currentX, currentY, currentZ],
+      rotation: currentRotation,
+    })
+  }
+
+  return transforms
+}
+
+export function getFloorplanStairSegmentPolygon(
+  stair: StairNode,
+  segment: StairSegmentNode,
+  transform: StairSegmentTransform,
+): Point2D[] {
+  const halfWidth = segment.width / 2
+  const localCorners: Array<[number, number]> = [
+    [-halfWidth, 0],
+    [halfWidth, 0],
+    [halfWidth, segment.length],
+    [-halfWidth, segment.length],
+  ]
+
+  return localCorners.map(([localX, localY]) => {
+    const [segmentX, segmentY] = rotatePlanVector(localX, localY, transform.rotation)
+    const groupX = transform.position[0] + segmentX
+    const groupY = transform.position[2] + segmentY
+    const [worldOffsetX, worldOffsetY] = rotatePlanVector(groupX, groupY, stair.rotation)
+
+    return {
+      x: stair.position[0] + worldOffsetX,
+      y: stair.position[2] + worldOffsetY,
+    }
+  })
+}
+
+export function buildFloorplanStairEntry(
+  stair: StairNode,
+  segments: StairSegmentNode[],
+): FloorplanStairEntry | null {
+  const stairType = stair.stairType ?? 'straight'
+
+  if (segments.length === 0 && stairType === 'straight') {
+    return null
+  }
+
+  const transforms = computeFloorplanStairSegmentTransforms(segments)
+  const segmentEntries = segments.map((segment, index) => {
+    const polygon = getFloorplanStairSegmentPolygon(stair, segment, transforms[index]!)
+    const centerLine = getFloorplanStairSegmentCenterLine(polygon)
+    const innerPolygon = getFloorplanStairInnerPolygon(polygon)
+    const treadThickness = getFloorplanStairTreadThickness(segment, innerPolygon)
+
+    return {
+      centerLine,
+      innerPolygon,
+      segment,
+      polygon,
+      treadBars: getFloorplanStairTreadBars(segment, innerPolygon, treadThickness),
+      treadThickness,
+    }
+  })
+  const hitPolygons =
+    stairType === 'straight'
+      ? segmentEntries.map(({ polygon }) => polygon)
+      : [getFloorplanCurvedStairHitPolygon(stair)]
+
+  return {
+    arrow: buildFloorplanStairArrow(segmentEntries),
+    hitPolygons,
+    stair,
+    segments: segmentEntries,
+  }
+}
diff --git a/packages/editor/src/lib/floorplan/types.ts b/packages/editor/src/lib/floorplan/types.ts
new file mode 100644
index 000000000..0684eb870
--- /dev/null
+++ b/packages/editor/src/lib/floorplan/types.ts
@@ -0,0 +1,53 @@
+import type { AnyNode, ItemNode, Point2D, StairNode, StairSegmentNode } from '@pascal-app/core'
+
+export type FloorplanNodeTransform = {
+  position: Point2D
+  rotation: number
+}
+
+export type FloorplanLineSegment = {
+  start: Point2D
+  end: Point2D
+}
+
+export type FloorplanItemEntry = {
+  dimensionPolygon: Point2D[]
+  item: ItemNode
+  polygon: Point2D[]
+  usesRealMesh: boolean
+}
+
+export type FloorplanStairSegmentEntry = {
+  centerLine: FloorplanLineSegment | null
+  innerPolygon: Point2D[]
+  segment: StairSegmentNode
+  polygon: Point2D[]
+  treadBars: Point2D[][]
+  treadThickness: number
+}
+
+export type FloorplanStairArrowEntry = {
+  head: Point2D[]
+  polyline: Point2D[]
+}
+
+export type FloorplanStairEntry = {
+  arrow: FloorplanStairArrowEntry | null
+  hitPolygons: Point2D[][]
+  stair: StairNode
+  segments: FloorplanStairSegmentEntry[]
+}
+
+export type FloorplanSelectionBounds = {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+export type StairSegmentTransform = {
+  position: [number, number, number]
+  rotation: number
+}
+
+export type LevelDescendantMap = ReadonlyMap<string, AnyNode>
diff --git a/packages/editor/src/lib/floorplan/walls.ts b/packages/editor/src/lib/floorplan/walls.ts
new file mode 100644
index 000000000..384386117
--- /dev/null
+++ b/packages/editor/src/lib/floorplan/walls.ts
@@ -0,0 +1,23 @@
+import type { WallNode } from '@pascal-app/core'
+
+const FLOORPLAN_WALL_THICKNESS_SCALE = 1.18
+const FLOORPLAN_MIN_VISIBLE_WALL_THICKNESS = 0.13
+const FLOORPLAN_MAX_EXTRA_THICKNESS = 0.035
+
+export function getFloorplanWallThickness(wall: WallNode): number {
+  const baseThickness = wall.thickness ?? 0.1
+  const scaledThickness = baseThickness * FLOORPLAN_WALL_THICKNESS_SCALE
+
+  return Math.min(
+    baseThickness + FLOORPLAN_MAX_EXTRA_THICKNESS,
+    Math.max(baseThickness, scaledThickness, FLOORPLAN_MIN_VISIBLE_WALL_THICKNESS),
+  )
+}
+
+export function getFloorplanWall(wall: WallNode): WallNode {
+  return {
+    ...wall,
+    // Slightly exaggerate thin walls so the 2D plan stays legible without drifting from BIM data.
+    thickness: getFloorplanWallThickness(wall),
+  }
+}
diff --git a/packages/editor/src/lib/roof-duplication.ts b/packages/editor/src/lib/roof-duplication.ts
new file mode 100644
index 000000000..4ce304627
--- /dev/null
+++ b/packages/editor/src/lib/roof-duplication.ts
@@ -0,0 +1,214 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  generateId,
+  type RoofNode,
+  RoofNode as RoofNodeSchema,
+  type RoofSegmentNode,
+  RoofSegmentNode as RoofSegmentNodeSchema,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import useEditor from '../store/use-editor'
+
+type DuplicateRoofMode = 'select' | 'move'
+
+type DuplicateRoofOptions = {
+  mode?: DuplicateRoofMode
+  offset?: [number, number, number]
+  parentId?: AnyNodeId
+}
+
+type DuplicateRoofResult = {
+  roof: RoofNode
+  segmentIds: RoofSegmentNode['id'][]
+}
+
+const MOVE_REGISTRY_RETRY_LIMIT = 12
+
+function stripDuplicateFlags(metadata: unknown) {
+  if (typeof metadata !== 'object' || metadata === null || Array.isArray(metadata)) {
+    return metadata
+  }
+
+  const nextMeta = { ...(metadata as Record<string, unknown>) }
+  delete nextMeta.isNew
+  delete nextMeta.isTransient
+  return nextMeta
+}
+
+function buildDuplicateMetadata(metadata: unknown) {
+  const cleaned = stripDuplicateFlags(metadata)
+  if (typeof cleaned !== 'object' || cleaned === null || Array.isArray(cleaned)) {
+    return { isNew: true }
+  }
+
+  return {
+    ...cleaned,
+    isNew: true,
+  }
+}
+
+function moveRoofWhenRegistered(roofId: RoofNode['id'], attempt = 0) {
+  const latestRoof = useScene.getState().nodes[roofId as AnyNodeId]
+  if (latestRoof?.type !== 'roof') {
+    return
+  }
+
+  if (sceneRegistry.nodes.has(roofId)) {
+    useEditor.getState().setMovingNode(latestRoof)
+    useViewer.getState().setSelection({ selectedIds: [] })
+    return
+  }
+
+  if (attempt >= MOVE_REGISTRY_RETRY_LIMIT) {
+    console.warn(`Duplicated roof "${roofId}" did not register before move mode started`)
+    return
+  }
+
+  requestAnimationFrame(() => moveRoofWhenRegistered(roofId, attempt + 1))
+}
+
+export function duplicateRoofSubtree(
+  sourceRoofId: AnyNodeId,
+  options: DuplicateRoofOptions = {},
+): DuplicateRoofResult {
+  const { mode = 'move', offset = [1, 0, 1], parentId: explicitParentId } = options
+
+  const scene = useScene.getState()
+  const sourceRoof = scene.nodes[sourceRoofId]
+
+  if (!sourceRoof || sourceRoof.type !== 'roof') {
+    throw new Error(`Node "${sourceRoofId}" is not a roof`)
+  }
+
+  const parentId = explicitParentId ?? (sourceRoof.parentId as AnyNodeId | null)
+  if (!parentId) {
+    throw new Error(`Roof "${sourceRoofId}" is missing a parent level`)
+  }
+
+  const roofClone = RoofNodeSchema.parse({
+    ...structuredClone(sourceRoof),
+    id: generateId('roof'),
+    parentId,
+    children: [],
+    position: [
+      sourceRoof.position[0] + offset[0],
+      sourceRoof.position[1] + offset[1],
+      sourceRoof.position[2] + offset[2],
+    ] as RoofNode['position'],
+    metadata: buildDuplicateMetadata(sourceRoof.metadata),
+  })
+
+  const segmentClones: RoofSegmentNode[] = []
+  for (const childId of sourceRoof.children ?? []) {
+    const childNode = scene.nodes[childId as AnyNodeId]
+    if (!childNode || childNode.type !== 'roof-segment') {
+      continue
+    }
+
+    const childClone = RoofSegmentNodeSchema.parse({
+      ...structuredClone(childNode),
+      id: generateId('rseg'),
+      parentId: roofClone.id,
+      metadata: buildDuplicateMetadata(childNode.metadata),
+    })
+    segmentClones.push(childClone)
+  }
+
+  scene.createNodes([
+    { node: roofClone, parentId },
+    ...segmentClones.map((segment) => ({ node: segment, parentId: roofClone.id as AnyNodeId })),
+  ])
+
+  const nextScene = useScene.getState()
+  const createdRoof = nextScene.nodes[roofClone.id as AnyNodeId]
+  if (!createdRoof || createdRoof.type !== 'roof') {
+    throw new Error(`Duplicated roof "${roofClone.id}" was not created`)
+  }
+
+  const createdParent = nextScene.nodes[parentId]
+  const parentChildIds =
+    createdParent && 'children' in createdParent && Array.isArray(createdParent.children)
+      ? (createdParent.children as AnyNodeId[])
+      : null
+  if (!createdParent || !parentChildIds?.includes(createdRoof.id as AnyNodeId)) {
+    throw new Error(`Duplicated roof "${createdRoof.id}" was not linked to parent "${parentId}"`)
+  }
+
+  const segmentIds = segmentClones.map((segment) => segment.id)
+  const createdChildIds = (createdRoof.children ?? []) as AnyNodeId[]
+  const missingSegmentId = segmentIds.find(
+    (segmentId) => !createdChildIds.includes(segmentId as AnyNodeId),
+  )
+  if (missingSegmentId) {
+    throw new Error(
+      `Duplicated roof "${createdRoof.id}" is missing cloned segment "${missingSegmentId}"`,
+    )
+  }
+
+  const invalidSegment = segmentIds.find((segmentId) => {
+    const segment = nextScene.nodes[segmentId as AnyNodeId]
+    return !segment || segment.type !== 'roof-segment' || segment.parentId !== createdRoof.id
+  })
+  if (invalidSegment) {
+    throw new Error(
+      `Duplicated roof segment "${invalidSegment}" was not linked to roof "${createdRoof.id}"`,
+    )
+  }
+
+  const setSelection = useViewer.getState().setSelection
+  if (mode === 'select') {
+    setSelection({ selectedIds: [createdRoof.id] })
+  } else {
+    setSelection({ selectedIds: [createdRoof.id] })
+    requestAnimationFrame(() => moveRoofWhenRegistered(createdRoof.id))
+  }
+
+  return {
+    roof: createdRoof,
+    segmentIds,
+  }
+}
+
+export function clearRoofDuplicateMetadata(
+  roofId: AnyNodeId,
+  updates: Partial<Pick<RoofNode, 'position' | 'rotation' | 'metadata'>> = {},
+) {
+  const scene = useScene.getState()
+  const roofNode = scene.nodes[roofId]
+  if (!roofNode || roofNode.type !== 'roof') {
+    return
+  }
+
+  const nodeUpdates: { id: AnyNodeId; data: Record<string, unknown> }[] = [
+    {
+      id: roofId,
+      data: {
+        ...updates,
+        metadata:
+          updates.metadata !== undefined
+            ? stripDuplicateFlags(updates.metadata)
+            : stripDuplicateFlags(roofNode.metadata),
+      },
+    },
+  ]
+
+  for (const childId of roofNode.children ?? []) {
+    const childNode = scene.nodes[childId as AnyNodeId]
+    if (!childNode || childNode.type !== 'roof-segment') {
+      continue
+    }
+
+    nodeUpdates.push({
+      id: childNode.id as AnyNodeId,
+      data: {
+        metadata: stripDuplicateFlags(childNode.metadata),
+      },
+    })
+  }
+
+  scene.updateNodes(nodeUpdates as { id: AnyNodeId; data: Partial<RoofNode | RoofSegmentNode> }[])
+}
diff --git a/packages/editor/src/lib/stair-duplication.ts b/packages/editor/src/lib/stair-duplication.ts
new file mode 100644
index 000000000..4d607c7a8
--- /dev/null
+++ b/packages/editor/src/lib/stair-duplication.ts
@@ -0,0 +1,126 @@
+import {
+  generateId,
+  type AnyNodeId,
+  sceneRegistry,
+  type StairNode,
+  StairNode as StairNodeSchema,
+  type StairSegmentNode,
+  StairSegmentNode as StairSegmentNodeSchema,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import useEditor from '../store/use-editor'
+
+type DuplicateStairOptions = {
+  mode?: 'select' | 'move'
+  offset?: [number, number, number]
+  parentId?: AnyNodeId
+}
+
+type DuplicateStairResult = {
+  stair: StairNode
+  segmentIds: StairSegmentNode['id'][]
+}
+
+const MOVE_REGISTRY_RETRY_LIMIT = 12
+
+function stripDuplicateFlags(metadata: unknown) {
+  if (typeof metadata !== 'object' || metadata === null || Array.isArray(metadata)) {
+    return metadata
+  }
+
+  const nextMeta = { ...(metadata as Record<string, unknown>) }
+  delete nextMeta.isNew
+  delete nextMeta.isTransient
+  return nextMeta
+}
+
+function moveStairWhenRegistered(stairId: StairNode['id'], attempt = 0) {
+  const latestStair = useScene.getState().nodes[stairId as AnyNodeId]
+  if (!latestStair || latestStair.type !== 'stair') {
+    return
+  }
+
+  if (sceneRegistry.nodes.has(stairId)) {
+    useEditor.getState().setMovingNode(latestStair)
+    useViewer.getState().setSelection({ selectedIds: [] })
+    return
+  }
+
+  if (attempt >= MOVE_REGISTRY_RETRY_LIMIT) {
+    console.warn(`Duplicated stair "${stairId}" did not register before move mode started`)
+    return
+  }
+
+  requestAnimationFrame(() => moveStairWhenRegistered(stairId, attempt + 1))
+}
+
+export function duplicateStairSubtree(
+  sourceStairId: AnyNodeId,
+  options: DuplicateStairOptions = {},
+): DuplicateStairResult {
+  const { mode = 'move', offset = [1, 0, 1], parentId: explicitParentId } = options
+
+  const scene = useScene.getState()
+  const sourceStair = scene.nodes[sourceStairId]
+
+  if (!sourceStair || sourceStair.type !== 'stair') {
+    throw new Error(`Node "${sourceStairId}" is not a stair`)
+  }
+
+  const parentId = explicitParentId ?? (sourceStair.parentId as AnyNodeId | null)
+  if (!parentId) {
+    throw new Error(`Stair "${sourceStairId}" is missing a parent level`)
+  }
+
+  const stairClone = StairNodeSchema.parse({
+    ...structuredClone(sourceStair),
+    id: generateId('stair'),
+    parentId,
+    children: [],
+    position: [
+      sourceStair.position[0] + offset[0],
+      sourceStair.position[1] + offset[1],
+      sourceStair.position[2] + offset[2],
+    ] as StairNode['position'],
+    metadata: stripDuplicateFlags(sourceStair.metadata),
+  })
+
+  const segmentClones: StairSegmentNode[] = []
+  for (const childId of sourceStair.children ?? []) {
+    const childNode = scene.nodes[childId as AnyNodeId]
+    if (!childNode || childNode.type !== 'stair-segment') {
+      continue
+    }
+
+    const childClone = StairSegmentNodeSchema.parse({
+      ...structuredClone(childNode),
+      id: generateId('sseg'),
+      parentId: stairClone.id,
+      metadata: stripDuplicateFlags(childNode.metadata),
+    })
+    segmentClones.push(childClone)
+  }
+
+  scene.createNodes([
+    { node: stairClone, parentId },
+    ...segmentClones.map((segment) => ({ node: segment, parentId: stairClone.id as AnyNodeId })),
+  ])
+
+  const createdStair = useScene.getState().nodes[stairClone.id as AnyNodeId]
+  if (!createdStair || createdStair.type !== 'stair') {
+    throw new Error(`Duplicated stair "${stairClone.id}" was not created`)
+  }
+
+  if (mode === 'select') {
+    useViewer.getState().setSelection({ selectedIds: [createdStair.id] })
+  } else {
+    useViewer.getState().setSelection({ selectedIds: [createdStair.id] })
+    requestAnimationFrame(() => moveStairWhenRegistered(createdStair.id))
+  }
+
+  return {
+    stair: createdStair,
+    segmentIds: segmentClones.map((segment) => segment.id),
+  }
+}
diff --git a/packages/viewer/src/components/renderers/item/item-renderer.tsx b/packages/viewer/src/components/renderers/item/item-renderer.tsx
index 5366d3d54..5bcfbd2da 100644
--- a/packages/viewer/src/components/renderers/item/item-renderer.tsx
+++ b/packages/viewer/src/components/renderers/item/item-renderer.tsx
@@ -22,6 +22,10 @@ import { MeshStandardNodeMaterial } from 'three/webgpu'
 import { useNodeEvents } from '../../../hooks/use-node-events'
 import { resolveCdnUrl } from '../../../lib/asset-url'
 import { useItemLightPool } from '../../../store/use-item-light-pool'
+import {
+  requestItemMeshMetadataSync,
+  setItemMeshMetadataSourceRoot,
+} from '../../../systems/item-mesh-metadata/sync-request'
 import { ErrorBoundary } from '../../error-boundary'
 import { NodeRenderer } from '../node-renderer'
 
@@ -107,6 +111,19 @@ const ModelRenderer = ({ node }: { node: ItemNode }) => {
     useScene.getState().dirtyNodes.add(node.parentId as AnyNodeId)
   }, [node.parentId])
 
+  // Re-sync when GLTF `scene` or external `metadata` edits should invalidate cached footprint/bounds.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional — asset load and metadata drive mesh-metadata sync
+  useEffect(() => {
+    const cloneRoot = ref.current
+    if (!cloneRoot) return
+
+    setItemMeshMetadataSourceRoot(node.id, cloneRoot)
+    requestItemMeshMetadataSync(node.id)
+    return () => {
+      setItemMeshMetadataSourceRoot(node.id, null)
+    }
+  }, [node.id, node.metadata, scene])
+
   useEffect(() => {
     const interactive = interactiveRef.current
     if (!interactive) return
diff --git a/packages/viewer/src/components/viewer/index.tsx b/packages/viewer/src/components/viewer/index.tsx
index 6ee40f54e..4cd9f4b37 100644
--- a/packages/viewer/src/components/viewer/index.tsx
+++ b/packages/viewer/src/components/viewer/index.tsx
@@ -18,6 +18,7 @@ import * as THREE from 'three/webgpu'
 import useViewer from '../../store/use-viewer'
 import { GuideSystem } from '../../systems/guide/guide-system'
 import { ItemLightSystem } from '../../systems/item-light/item-light-system'
+import { ItemMeshMetadataSystem } from '../../systems/item-mesh-metadata/item-mesh-metadata-system'
 import { LevelSystem } from '../../systems/level/level-system'
 import { ScanSystem } from '../../systems/scan/scan-system'
 import { WallCutout } from '../../systems/wall/wall-cutout'
@@ -172,6 +173,7 @@ const Viewer: React.FC<ViewerProps> = ({
       <GPUDeviceWatcher />
 
       <ItemLightSystem />
+      <ItemMeshMetadataSystem />
       {selectionManager === 'default' && <SelectionManager />}
       {perf && <PerfMonitor />}
       {children}
diff --git a/packages/viewer/src/systems/item-mesh-metadata/compute-item-mesh-metadata.ts b/packages/viewer/src/systems/item-mesh-metadata/compute-item-mesh-metadata.ts
new file mode 100644
index 000000000..035857f0b
--- /dev/null
+++ b/packages/viewer/src/systems/item-mesh-metadata/compute-item-mesh-metadata.ts
@@ -0,0 +1,226 @@
+import type { Object3D } from 'three'
+import { Box3, Matrix4, Vector3 } from 'three'
+
+type Point = { x: number; y: number }
+
+export type MeshLocalBounds = {
+  min: [number, number, number]
+  max: [number, number, number]
+}
+
+/** Plan footprint in the item root's horizontal (x, z) plane — stored as floorplan polygon. */
+export function computePlanFootprintPolygonLocal(object: Object3D): Point[] {
+  object.updateWorldMatrix(true, true)
+
+  const inverseRootMatrix = new Matrix4().copy(object.matrixWorld).invert()
+  const localMatrix = new Matrix4()
+  const scratchBounds = new Box3()
+  const scratchPosition = new Vector3()
+  const footprintPoints: Point[] = []
+
+  const collectPoints = (child: Object3D) => {
+    const mesh = child as Object3D & {
+      isMesh?: boolean
+      name?: string
+      geometry?: {
+        boundingBox: Box3 | null
+        computeBoundingBox?: () => void
+        attributes?: {
+          position?: {
+            count: number
+            getX: (index: number) => number
+            getY: (index: number) => number
+            getZ: (index: number) => number
+          }
+        }
+      }
+      matrixWorld: Matrix4
+    }
+
+    if (mesh.isMesh && mesh.name !== 'cutout' && mesh.geometry) {
+      if (!mesh.geometry.boundingBox && mesh.geometry.computeBoundingBox) {
+        mesh.geometry.computeBoundingBox()
+      }
+
+      localMatrix.copy(inverseRootMatrix).multiply(mesh.matrixWorld)
+
+      const vertexPositions = mesh.geometry.attributes?.position
+      if (vertexPositions && vertexPositions.count > 0) {
+        for (let index = 0; index < vertexPositions.count; index += 1) {
+          scratchPosition
+            .set(
+              vertexPositions.getX(index),
+              vertexPositions.getY(index),
+              vertexPositions.getZ(index),
+            )
+            .applyMatrix4(localMatrix)
+
+          if (Number.isFinite(scratchPosition.x) && Number.isFinite(scratchPosition.z)) {
+            footprintPoints.push({ x: scratchPosition.x, y: scratchPosition.z })
+          }
+        }
+      } else if (mesh.geometry.boundingBox) {
+        scratchBounds.copy(mesh.geometry.boundingBox)
+        scratchBounds.applyMatrix4(localMatrix)
+        if (Number.isFinite(scratchBounds.min.x) && Number.isFinite(scratchBounds.max.x)) {
+          footprintPoints.push(
+            { x: scratchBounds.min.x, y: scratchBounds.min.z },
+            { x: scratchBounds.max.x, y: scratchBounds.min.z },
+            { x: scratchBounds.max.x, y: scratchBounds.max.z },
+            { x: scratchBounds.min.x, y: scratchBounds.max.z },
+          )
+        }
+      }
+    }
+
+    for (const grandchild of child.children) {
+      collectPoints(grandchild)
+    }
+  }
+
+  for (const child of object.children) {
+    collectPoints(child)
+  }
+
+  return getMinimumAreaBoundingRect(footprintPoints) ?? []
+}
+
+export function computeMeshLocalBoundsFromObject(object: Object3D): MeshLocalBounds | null {
+  object.updateWorldMatrix(true, true)
+
+  const inverseRootMatrix = new Matrix4().copy(object.matrixWorld).invert()
+  const localMatrix = new Matrix4()
+  const localBounds = new Box3()
+  const scratchBounds = new Box3()
+  let hasBounds = false
+
+  const expandBounds = (child: Object3D) => {
+    const mesh = child as Object3D & {
+      isMesh?: boolean
+      name?: string
+      geometry?: {
+        boundingBox: Box3 | null
+        computeBoundingBox?: () => void
+      }
+    }
+
+    if (mesh.isMesh && mesh.name !== 'cutout' && mesh.geometry) {
+      if (!mesh.geometry.boundingBox && mesh.geometry.computeBoundingBox) {
+        mesh.geometry.computeBoundingBox()
+      }
+
+      if (mesh.geometry.boundingBox) {
+        localMatrix.copy(inverseRootMatrix).multiply(mesh.matrixWorld)
+        scratchBounds.copy(mesh.geometry.boundingBox).applyMatrix4(localMatrix)
+        if (!hasBounds) {
+          localBounds.copy(scratchBounds)
+          hasBounds = true
+        } else {
+          localBounds.union(scratchBounds)
+        }
+      }
+    }
+
+    for (const grandchild of child.children) {
+      expandBounds(grandchild)
+    }
+  }
+
+  for (const child of object.children) {
+    expandBounds(child)
+  }
+
+  if (!hasBounds) return null
+
+  return {
+    min: [localBounds.min.x, localBounds.min.y, localBounds.min.z],
+    max: [localBounds.max.x, localBounds.max.y, localBounds.max.z],
+  }
+}
+
+function getMinimumAreaBoundingRect(points: Point[]) {
+  if (points.length === 0) return null
+  if (points.length < 3) return points
+
+  const hull = getConvexHull(points)
+  if (hull.length < 3) return hull
+
+  let bestArea = Number.POSITIVE_INFINITY
+  let bestRect: Point[] | null = null
+
+  for (let index = 0; index < hull.length; index += 1) {
+    const nextIndex = (index + 1) % hull.length
+    const current = hull[index]!
+    const next = hull[nextIndex]!
+    const angle = Math.atan2(next.y - current.y, next.x - current.x)
+    const cos = Math.cos(-angle)
+    const sin = Math.sin(-angle)
+
+    let minX = Number.POSITIVE_INFINITY
+    let maxX = Number.NEGATIVE_INFINITY
+    let minY = Number.POSITIVE_INFINITY
+    let maxY = Number.NEGATIVE_INFINITY
+
+    for (const point of hull) {
+      const rx = point.x * cos - point.y * sin
+      const ry = point.x * sin + point.y * cos
+      minX = Math.min(minX, rx)
+      maxX = Math.max(maxX, rx)
+      minY = Math.min(minY, ry)
+      maxY = Math.max(maxY, ry)
+    }
+
+    const area = (maxX - minX) * (maxY - minY)
+    if (area >= bestArea) continue
+    bestArea = area
+
+    const unrotate = (x: number, y: number): Point => ({
+      x: x * Math.cos(angle) - y * Math.sin(angle),
+      y: x * Math.sin(angle) + y * Math.cos(angle),
+    })
+
+    bestRect = [
+      unrotate(minX, minY),
+      unrotate(maxX, minY),
+      unrotate(maxX, maxY),
+      unrotate(minX, maxY),
+    ]
+  }
+
+  return bestRect
+}
+
+function getConvexHull(points: Point[]) {
+  if (points.length <= 1) return points
+
+  const sorted = [...points].sort((a, b) => (a.x === b.x ? a.y - b.y : a.x - b.x))
+  const cross = (o: Point, a: Point, b: Point) =>
+    (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x)
+
+  const lower: Point[] = []
+  for (const point of sorted) {
+    while (
+      lower.length >= 2 &&
+      cross(lower[lower.length - 2]!, lower[lower.length - 1]!, point) <= 0
+    ) {
+      lower.pop()
+    }
+    lower.push(point)
+  }
+
+  const upper: Point[] = []
+  for (let index = sorted.length - 1; index >= 0; index -= 1) {
+    const point = sorted[index]!
+    while (
+      upper.length >= 2 &&
+      cross(upper[upper.length - 2]!, upper[upper.length - 1]!, point) <= 0
+    ) {
+      upper.pop()
+    }
+    upper.push(point)
+  }
+
+  lower.pop()
+  upper.pop()
+  return [...lower, ...upper]
+}
diff --git a/packages/viewer/src/systems/item-mesh-metadata/item-mesh-metadata-system.tsx b/packages/viewer/src/systems/item-mesh-metadata/item-mesh-metadata-system.tsx
new file mode 100644
index 000000000..58581c802
--- /dev/null
+++ b/packages/viewer/src/systems/item-mesh-metadata/item-mesh-metadata-system.tsx
@@ -0,0 +1,101 @@
+'use client'
+
+import { type AnyNode, type AnyNodeId, sceneRegistry, useScene } from '@pascal-app/core'
+import { useFrame } from '@react-three/fiber'
+import type { Object3D } from 'three'
+import {
+  computeMeshLocalBoundsFromObject,
+  computePlanFootprintPolygonLocal,
+} from './compute-item-mesh-metadata'
+import { drainItemMeshMetadataSyncRequests, getItemMeshMetadataSourceRoot } from './sync-request'
+
+function isMetadataUnchanged(
+  nextPolygon: [number, number][] | null,
+  nextBounds: { min: [number, number, number]; max: [number, number, number] } | null,
+  metadata: Record<string, unknown>,
+): boolean {
+  const currentPolygon = metadata.meshLocalPlanPolygon
+  const currentBounds =
+    typeof metadata.meshLocalBounds === 'object' &&
+    metadata.meshLocalBounds !== null &&
+    !Array.isArray(metadata.meshLocalBounds)
+      ? (metadata.meshLocalBounds as { min?: unknown; max?: unknown })
+      : null
+
+  const polygonUnchanged =
+    (nextPolygon === null &&
+      (currentPolygon === undefined || currentPolygon === null || currentPolygon === false)) ||
+    (Array.isArray(currentPolygon) &&
+      nextPolygon !== null &&
+      currentPolygon.length === nextPolygon.length &&
+      currentPolygon.every(
+        (point, index) =>
+          Array.isArray(point) &&
+          point[0] === nextPolygon[index]?.[0] &&
+          point[1] === nextPolygon[index]?.[1],
+      ))
+
+  const boundsUnchanged =
+    (nextBounds === null && (currentBounds === undefined || currentBounds === null)) ||
+    (nextBounds !== null &&
+      Array.isArray(currentBounds?.min) &&
+      Array.isArray(currentBounds?.max) &&
+      currentBounds.min[0] === nextBounds.min[0] &&
+      currentBounds.min[1] === nextBounds.min[1] &&
+      currentBounds.min[2] === nextBounds.min[2] &&
+      currentBounds.max[0] === nextBounds.max[0] &&
+      currentBounds.max[1] === nextBounds.max[1] &&
+      currentBounds.max[2] === nextBounds.max[2])
+
+  return polygonUnchanged && boundsUnchanged
+}
+
+function trySyncItemMeshMetadata(itemId: string, nodes: Record<string, AnyNode | undefined>) {
+  const node = nodes[itemId]
+  if (!node || node.type !== 'item') return
+  const root =
+    getItemMeshMetadataSourceRoot(itemId) ??
+    (sceneRegistry.nodes.get(itemId) as Object3D | undefined)
+  if (!root) return
+
+  const polygon = computePlanFootprintPolygonLocal(root)
+  const bounds = computeMeshLocalBoundsFromObject(root)
+  if (polygon.length < 3 && !bounds) return
+
+  const nextPolygon =
+    polygon.length >= 3 ? polygon.map(({ x, y }) => [x, y] as [number, number]) : null
+  const nextBounds = bounds ? { min: bounds.min, max: bounds.max } : null
+
+  const metadata =
+    typeof node.metadata === 'object' && node.metadata !== null && !Array.isArray(node.metadata)
+      ? (node.metadata as Record<string, unknown>)
+      : {}
+
+  if (isMetadataUnchanged(nextPolygon, nextBounds, metadata)) return
+
+  useScene.getState().updateNode(itemId as AnyNodeId, {
+    metadata: {
+      ...metadata,
+      ...(nextPolygon ? { meshLocalPlanPolygon: nextPolygon } : {}),
+      ...(nextBounds ? { meshLocalBounds: nextBounds } : {}),
+    },
+  })
+}
+
+/**
+ * Writes `meshLocalPlanPolygon` / `meshLocalBounds` from loaded item meshes.
+ * ModelRenderer requests sync via `requestItemMeshMetadataSync` when GLTF is ready.
+ */
+export function ItemMeshMetadataSystem() {
+  useFrame(() => {
+    const ids = drainItemMeshMetadataSyncRequests()
+    if (ids.length === 0) return
+
+    const nodes = useScene.getState().nodes
+    for (const id of ids) {
+      trySyncItemMeshMetadata(id, nodes)
+    }
+  })
+
+  return null
+}
diff --git a/packages/viewer/src/systems/item-mesh-metadata/sync-request.ts b/packages/viewer/src/systems/item-mesh-metadata/sync-request.ts
new file mode 100644
index 000000000..7ec7c33ce
--- /dev/null
+++ b/packages/viewer/src/systems/item-mesh-metadata/sync-request.ts
@@ -0,0 +1,29 @@
+import type { Object3D } from 'three'
+
+const pendingIds = new Set<string>()
+/** Preferred root for footprint math (Clone root). Falls back to sceneRegistry item root. */
+const sourceRoots = new Map<string, Object3D>()
+
+/** Called when an item's loaded GLTF (or metadata driving footprint) may need re-syncing. */
+export function requestItemMeshMetadataSync(itemId: string) {
+  pendingIds.add(itemId)
+}
+
+export function setItemMeshMetadataSourceRoot(itemId: string, root: Object3D | null) {
+  if (root) {
+    sourceRoots.set(itemId, root)
+  } else {
+    sourceRoots.delete(itemId)
+  }
+}
+
+export function getItemMeshMetadataSourceRoot(itemId: string): Object3D | undefined {
+  return sourceRoots.get(itemId)
+}
+
+export function drainItemMeshMetadataSyncRequests(): string[] {
+  if (pendingIds.size === 0) return []
+  const ids = [...pendingIds]
+  pendingIds.clear()
+  return ids
+}