@pascal-app/editor 0.9.2 → 1.0.0-beta.2

package/src/components/editor/floorplan-panel.tsx

@@ -32,17 +32,18 @@ import {
   type Point2D,
   type RoofNode,
   type RoofSegmentNode,
+  resolveSlabPlacementElevation,
   type SiteNode,
   type SlabNode,
   SlabNode as SlabNodeSchema,
-  type SpawnNode,
   type StairNode,
   StairNode as StairNodeSchema,
-  type StairSegmentNode,
   StairSegmentNode as StairSegmentNodeSchema,
   sampleWallCenterline,
   sceneRegistry,
   snapPointAlongAngleRay,
+  spatialGridManager,
+  terrainSupportLift,
   useInteractive,
   useLiveNodeOverrides,
   useLiveTransforms,
@@ -62,6 +63,7 @@ import {
   type ComponentProps,
   memo,
   type MouseEvent as ReactMouseEvent,
+  type ReactNode,
   type PointerEvent as ReactPointerEvent,
   useCallback,
   useEffect,
@@ -86,14 +88,16 @@ import {
   type FloorplanNodeTransform as SharedFloorplanNodeTransform,
   worldToFloorplanLocalPoint,
 } from '../../lib/floorplan'
+import { groundHeightAt } from '../../lib/ground-surface'
 import { guideEmitter } from '../../lib/guide-events'
 import { measurementHint, parseMeasurement } from '../../lib/measurement-parser'
 import { formatLinearMeasurement, linearUnitToMeters } from '../../lib/measurements'
 import { sfxEmitter } from '../../lib/sfx-bus'
-import { SITE_BOUNDARY_DRAG_LABEL } from '../../lib/site-boundary'
+import { SITE_BOUNDARY_DRAG_LABEL, siteBoundaryHandlesEnabled } from '../../lib/site-boundary'
 import { resolveSlabPlanPointSnap } from '../../lib/slab-plan-snap'
 import { cn } from '../../lib/utils'
 import { snapBuildingLocalToWorldGrid } from '../../lib/world-grid-snap'
+import { subscribeNavigationSyncPose } from '../../store/navigation-sync-pose-store'
 import useAlignmentGuides from '../../store/use-alignment-guides'
 import type { GuideUiState, NavigationSyncPose } from '../../store/use-editor'
 import useEditor, {
@@ -117,6 +121,7 @@ import { FloorplanCursorIndicatorOverlay as Editor2dFloorplanCursorIndicatorOver
 import { FloorplanGroupActionMenu } from '../editor-2d/floorplan-group-action-menu'
 import { FloorplanSiteKeyHandler } from '../editor-2d/floorplan-hotkey-handlers'
 import { FloorplanMeasurementToolLayer } from '../editor-2d/floorplan-measurement-tool-layer'
+import { FloorplanRegisteredToolLayer } from '../editor-2d/floorplan-registered-tool-layer'
 import { FloorplanRegistryActionMenu } from '../editor-2d/floorplan-registry-action-menu'
 import { FloorplanRegistryMoveOverlay } from '../editor-2d/floorplan-registry-move-overlay'
 import {
@@ -178,6 +183,7 @@ import {
   chainEndJoinsExistingWall,
   createWallOnCurrentLevel,
   isSegmentLongEnough,
+  resolveTerrainWallConstructionOptions,
   snapWallDraftPoint,
   snapWallDraftPointDetailed,
   snapPointToGrid as snapWallPointToGrid,
@@ -189,6 +195,23 @@ import {
 import { PALETTE_COLORS } from '../ui/primitives/color-dot'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/primitives/tooltip'
 import { resolveFloorplanBackgroundSelection } from './floorplan-background-selection'
+import {
+  subscribeFloorplanCameraNavigation,
+  useFloorplanCameraSyncBridge,
+} from './floorplan-camera-sync'
+import {
+  canApplyFloorplanNavigationSync,
+  canZoomFloorplanDuringNavigation,
+  createFloorplanNavigationSyncScheduler,
+  type FloorplanNavigationSyncScheduler,
+  type FloorplanPresentationViewBox,
+  finalizeFloorplanNavigation,
+  flushFloorplanRotationPresentationRestore,
+  getFloorplanRotationOverscanViewBox,
+  queueFloorplanRotationPresentationRestore,
+  resolveFloorplanPresentationViewBox,
+  setFloorplanCompassRotation,
+} from './floorplan-navigation-presentation'
 import { useFloorplanBackgroundPlacement } from './use-floorplan-background-placement'
 import { useFloorplanHitTesting } from './use-floorplan-hit-testing'
 import { useFloorplanSceneData } from './use-floorplan-scene-data'
@@ -318,6 +341,36 @@ type FloorplanRotationState = {
   startClientX: number
   initialUserRotationDeg: number
   viewportCenterLocal: SvgPoint
+  svg: SVGSVGElement
+  svgStyle: {
+    transform: string
+    transformOrigin: string
+    willChange: string
+  }
+  latestUserRotationDeg: number
+  latestViewport: FloorplanViewport
+}
+
+type FloorplanNavigationSyncPresentationState = {
+  initialUserRotationDeg: number
+  initialSceneRotationDeg: number
+  latestUserRotationDeg: number
+  latestSceneRotationDeg: number
+  latestViewport: FloorplanViewport
+  svg: SVGSVGElement
+  svgStyle: {
+    transform: string
+    transformOrigin: string
+    willChange: string
+  }
+}
+
+function restoreFloorplanNavigationSyncPresentation(
+  presentationState: FloorplanNavigationSyncPresentationState,
+) {
+  presentationState.svg.style.transform = presentationState.svgStyle.transform
+  presentationState.svg.style.transformOrigin = presentationState.svgStyle.transformOrigin
+  presentationState.svg.style.willChange = presentationState.svgStyle.willChange
 }
 
 type FloorplanScreenSelectionState = {
@@ -414,21 +467,6 @@ type PendingFenceDragState = {
   startClientY: number
 }
 
-type ElevatorResizeHandle =
-  | 'width-negative'
-  | 'width-positive'
-  | 'depth-negative'
-  | 'depth-positive'
-
-type ElevatorResizeDragState = {
-  center: Point2D
-  elevatorId: ElevatorNode['id']
-  handle: ElevatorResizeHandle
-  pointerId: number
-  rotation: number
-  shaftWallThickness: number
-}
-
 const GUIDE_CORNERS = ['nw', 'ne', 'se', 'sw'] as const
 
 type GuideCorner = (typeof GUIDE_CORNERS)[number]
@@ -593,22 +631,11 @@ type SitePolygonEntry = {
   points: string
 }
 
-type ZonePolygonEntry = {
-  zone: ZoneNodeType
-  polygon: Point2D[]
-  points: string
-}
-
 type FloorplanLineSegment = {
   start: Point2D
   end: Point2D
 }
 
-type FloorplanPolygonEntry = {
-  points: string
-  polygon: Point2D[]
-}
-
 type FloorplanItemEntry = {
   dimensionPolygon: Point2D[]
   item: ItemNode
@@ -624,52 +651,6 @@ type FloorplanItemEntry = {
   depth: number
 }
 
-type FloorplanSpawnEntry = {
-  spawn: SpawnNode
-  position: Point2D
-  rotation: number
-}
-
-type FloorplanColumnEntry = {
-  column: ColumnNode
-  points: string
-  polygon: Point2D[]
-}
-
-type FloorplanElevatorServedLevel = {
-  id: LevelNode['id']
-  isCurrent: boolean
-  isDisabled: boolean
-  isQueued: boolean
-  isServiceOnly: boolean
-  isTarget: boolean
-  label: string
-}
-
-type FloorplanElevatorEntry = {
-  cabCenterLocalY: number
-  cabDepth: number
-  cabWidth: number
-  center: Point2D
-  doorStyle: ElevatorNode['doorStyle']
-  doorWidth: number
-  elevator: ElevatorNode
-  frontEdge: FloorplanLineSegment
-  frontNormal: Point2D
-  isCarOnLevel: boolean
-  isQueuedLevel: boolean
-  isTargetLevel: boolean
-  outerHalfDepth: number
-  outerHalfWidth: number
-  points: string
-  polygon: Point2D[]
-  rotation: number
-  servedLevels: FloorplanElevatorServedLevel[]
-  shaftDepth: number
-  shaftWallThickness: number
-  shaftWidth: number
-}
-
 type ReferenceFloorData = {
   ceilingPolygons: CeilingPolygonEntry[]
   columnEntries: ReferenceFloorColumnEntry[]
@@ -714,42 +695,6 @@ const REFERENCE_REGISTRY_KINDS = new Set<AnyNode['type']>([
   'elevator',
 ])
 
-type FloorplanStairSegmentEntry = {
-  centerLine: FloorplanLineSegment | null
-  innerPoints: string
-  innerPolygon: Point2D[]
-  segment: StairSegmentNode
-  points: string
-  polygon: Point2D[]
-  treadBars: FloorplanPolygonEntry[]
-  treadThickness: number
-}
-
-type FloorplanStairArrowEntry = {
-  head: Point2D[]
-  polyline: Point2D[]
-}
-
-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
@@ -894,18 +839,6 @@ function resolveFloorplanViewWidth(
   return clamp(requestedWidth, Math.min(minWidth, currentWidth), Math.max(maxWidth, currentWidth))
 }
 
-function roundPlanMeters(value: number) {
-  return Math.round(value * 100) / 100
-}
-
-function getElevatorResizeAxis(handle: ElevatorResizeHandle) {
-  return handle.startsWith('width') ? 'width' : 'depth'
-}
-
-function getElevatorResizeSign(handle: ElevatorResizeHandle) {
-  return handle.endsWith('positive') ? 1 : -1
-}
-
 function getSelectionModifierKeys(event?: {
   metaKey?: boolean
   ctrlKey?: boolean
@@ -2718,9 +2651,10 @@ function formatMeasurement(
   value: number,
   unit: 'metric' | 'imperial',
   metersPerUnit: number | null = null,
+  metricNotation: 'meters' | 'millimeters' = 'meters',
 ) {
   const measuredValue = metersPerUnit && metersPerUnit > 0 ? value * metersPerUnit : value
-  return formatLinearMeasurement(measuredValue, unit)
+  return formatLinearMeasurement(measuredValue, unit, metricNotation)
 }
 
 function formatNumber(value: number, fractionDigits = 2) {
@@ -3613,6 +3547,7 @@ function FloorplanReferenceScaleDraftLine({
   unitsPerPixel: number
 }) {
   const cursor = useFloorplanDraftPreview((s) => s.cursorPoint)
+  const metricNotation = useViewer((state) => state.metricNotation)
   if (!cursor) {
     return null
   }
@@ -3624,6 +3559,8 @@ function FloorplanReferenceScaleDraftLine({
       label={`Ref ${formatMeasurement(
         Math.hypot(cursor[0] - start[0], cursor[1] - start[1]),
         unit,
+        null,
+        metricNotation,
       )}`}
       palette={palette}
       start={start}
@@ -4005,6 +3942,7 @@ const FloorplanSiteEdgeLabelLayer = memo(function FloorplanSiteEdgeLabelLayer({
   unit: 'metric' | 'imperial'
   unitsPerPixel: number
 }) {
+  const metricNotation = useViewer((state) => state.metricNotation)
   if (!(shouldShow && sitePolygon && sitePolygon.polygon.length >= 2)) {
     return null
   }
@@ -4053,7 +3991,7 @@ const FloorplanSiteEdgeLabelLayer = memo(function FloorplanSiteEdgeLabelLayer({
       labelAngleDeg += 180
     }
 
-    const label = formatMeasurement(length, unit)
+    const label = formatMeasurement(length, unit, null, metricNotation)
     const width = Math.max(label.length * upx * 6.4 + padX * 2, minWidth)
     const height = fontSize + padY * 2
 
@@ -4109,262 +4047,6 @@ const FloorplanSiteEdgeLabelLayer = memo(function FloorplanSiteEdgeLabelLayer({
   )
 })
 
-const FloorplanZoneLayer = memo(function FloorplanZoneLayer({
-  canSelectZones,
-  hoveredZoneId,
-  isDeleteMode,
-  onZoneHoverChange,
-  onZoneSelect,
-  palette,
-  selectedZoneId,
-  zonePolygons,
-}: {
-  canSelectZones: boolean
-  hoveredZoneId: ZoneNodeType['id'] | null
-  isDeleteMode: boolean
-  onZoneHoverChange: (zoneId: ZoneNodeType['id'] | null) => void
-  onZoneSelect: (zoneId: ZoneNodeType['id'], event: ReactMouseEvent<SVGElement>) => void
-  palette: FloorplanPalette
-  selectedZoneId: ZoneNodeType['id'] | null
-  zonePolygons: ZonePolygonEntry[]
-}) {
-  return (
-    <>
-      {zonePolygons.map(({ zone, points }) => {
-        const isSelected = selectedZoneId === zone.id
-        const isHovered = hoveredZoneId === zone.id
-        const isDeleteHovered = isDeleteMode && isHovered
-
-        return (
-          <g key={zone.id}>
-            <polygon
-              fill={isDeleteHovered ? palette.deleteFill : zone.color}
-              fillOpacity={isDeleteHovered ? 0.22 : isSelected ? 0.28 : 0.16}
-              pointerEvents="none"
-              points={points}
-              stroke={
-                isDeleteHovered
-                  ? palette.deleteStroke
-                  : isSelected
-                    ? palette.selectedStroke
-                    : zone.color
-              }
-              strokeLinejoin="round"
-              strokeOpacity={isDeleteHovered || isSelected ? 0.96 : 0.72}
-              strokeWidth={isDeleteHovered || isSelected ? '0.08' : '0.05'}
-              vectorEffect="non-scaling-stroke"
-            />
-            {canSelectZones && (
-              <polygon
-                fill="none"
-                onClick={(event) => {
-                  event.stopPropagation()
-                  onZoneSelect(zone.id, event)
-                }}
-                onPointerEnter={() => onZoneHoverChange(zone.id)}
-                onPointerLeave={() => onZoneHoverChange(null)}
-                pointerEvents="stroke"
-                points={points}
-                stroke="transparent"
-                strokeLinejoin="round"
-                strokeWidth={FLOORPLAN_WALL_HIT_STROKE_WIDTH}
-                style={{ cursor: EDITOR_CURSOR }}
-                vectorEffect="non-scaling-stroke"
-              />
-            )}
-          </g>
-        )
-      })}
-    </>
-  )
-})
-
-const FLOORPLAN_ZONE_LABEL_FONT_SIZE = 0.2
-
-function FloorplanZoneLabelInput({
-  centroid,
-  svgRef,
-  viewBox,
-  zone,
-  onDone,
-}: {
-  centroid: { x: number; y: number }
-  svgRef: React.RefObject<SVGSVGElement | null>
-  viewBox: { minX: number; minY: number; width: number; height: number }
-  zone: ZoneNodeType
-  onDone: () => void
-}) {
-  const updateNode = useScene((s) => s.updateNode)
-  const [value, setValue] = useState(zone.name)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    requestAnimationFrame(() => {
-      inputRef.current?.focus()
-      inputRef.current?.select()
-    })
-  }, [])
-
-  const save = useCallback(() => {
-    const trimmed = value.trim()
-    if (trimmed && trimmed !== zone.name) {
-      updateNode(zone.id, { name: trimmed })
-    }
-    onDone()
-  }, [value, zone.id, zone.name, updateNode, onDone])
-
-  // Convert SVG coordinates to screen pixel position
-  const svgEl = svgRef.current
-  if (!svgEl) return null
-  const rect = svgEl.getBoundingClientRect()
-  const screenX = ((centroid.x - viewBox.minX) / viewBox.width) * rect.width + rect.left
-  const screenY = ((centroid.y - viewBox.minY) / viewBox.height) * rect.height + rect.top
-
-  return createPortal(
-    <input
-      onBlur={save}
-      onChange={(e) => setValue(e.target.value)}
-      onClick={(e) => e.stopPropagation()}
-      onKeyDown={(e) => {
-        e.stopPropagation()
-        if (e.key === 'Enter') {
-          e.preventDefault()
-          save()
-        }
-        if (e.key === 'Escape') {
-          e.preventDefault()
-          onDone()
-        }
-      }}
-      onMouseDown={(e) => e.stopPropagation()}
-      onPointerDown={(e) => e.stopPropagation()}
-      ref={inputRef}
-      style={{
-        position: 'fixed',
-        left: screenX,
-        top: screenY,
-        transform: 'translate(-50%, -50%)',
-        border: 'none',
-        borderBottom: `1px solid ${zone.color}`,
-        background: 'transparent',
-        color: 'white',
-        textShadow: `-1px -1px 0 ${zone.color}, 1px -1px 0 ${zone.color}, -1px 1px 0 ${zone.color}, 1px 1px 0 ${zone.color}`,
-        outline: 'none',
-        textAlign: 'center',
-        fontSize: '14px',
-        fontFamily: 'system-ui, -apple-system, sans-serif',
-        padding: '2px 4px',
-        margin: 0,
-        zIndex: 100,
-        width: `${Math.max((value || zone.name || '').length + 2, 6)}ch`,
-      }}
-      type="text"
-      value={value}
-    />,
-    document.body,
-  )
-}
-
-// Pencil icon as an SVG path (Lucide pencil simplified), rendered relative to the label
-const PENCIL_ICON_SIZE = FLOORPLAN_ZONE_LABEL_FONT_SIZE * 0.6
-
-function FloorplanZoneLabel({
-  centroid,
-  onHoverChange,
-  onLabelClick,
-  zone,
-}: {
-  centroid: { x: number; y: number }
-  onHoverChange: (zoneId: ZoneNodeType['id'] | null) => void
-  onLabelClick: (zoneId: ZoneNodeType['id'], event: ReactMouseEvent<SVGElement>) => void
-  zone: ZoneNodeType
-}) {
-  const [hovered, setHovered] = useState(false)
-  const textRef = useRef<SVGTextElement>(null)
-  const [textWidth, setTextWidth] = useState(0)
-  const mode = useEditor((s) => s.mode)
-  const deleteNode = useScene((s) => s.deleteNode)
-  const setSelection = useViewer((s) => s.setSelection)
-
-  useEffect(() => {
-    if (textRef.current) {
-      setTextWidth(textRef.current.getComputedTextLength())
-    }
-  }, [])
-
-  const isDeleteMode = mode === 'delete'
-
-  return (
-    <g
-      cursor="pointer"
-      onClick={(e) => {
-        e.stopPropagation()
-        if (isDeleteMode) {
-          sfxEmitter.emit('sfx:structure-delete')
-          deleteNode(zone.id as AnyNodeId)
-          setSelection({ zoneId: null })
-          return
-        }
-        onLabelClick(zone.id, e)
-      }}
-      onPointerEnter={() => {
-        setHovered(true)
-        onHoverChange(zone.id)
-      }}
-      onPointerLeave={() => {
-        setHovered(false)
-        onHoverChange(null)
-      }}
-      pointerEvents="auto"
-      style={{ userSelect: 'none' }}
-    >
-      <text
-        dominantBaseline="central"
-        fill={isDeleteMode && hovered ? '#fecaca' : 'white'}
-        fontFamily="system-ui, -apple-system, sans-serif"
-        fontSize={FLOORPLAN_ZONE_LABEL_FONT_SIZE}
-        fontWeight="500"
-        paintOrder="stroke"
-        ref={textRef}
-        stroke={isDeleteMode && hovered ? '#dc2626' : zone.color}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={FLOORPLAN_ZONE_LABEL_FONT_SIZE * 0.35}
-        textAnchor="middle"
-        x={centroid.x}
-        y={centroid.y}
-      >
-        {zone.name}
-      </text>
-      {/* Pencil icon — visible on hover */}
-      {hovered && textWidth > 0 && (
-        <g
-          transform={`translate(${centroid.x + textWidth / 2 + PENCIL_ICON_SIZE * 0.5}, ${centroid.y - PENCIL_ICON_SIZE / 2})`}
-        >
-          <g transform={`scale(${PENCIL_ICON_SIZE / 24})`}>
-            <path
-              d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
-              fill="none"
-              paintOrder="stroke"
-              stroke={zone.color}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={3}
-            />
-            <path
-              d="m15 5 4 4"
-              fill="none"
-              stroke={zone.color}
-              strokeLinecap="round"
-              strokeWidth={3}
-            />
-          </g>
-        </g>
-      )}
-    </g>
-  )
-}
-
 const FloorplanPolygonHandleLayer = memo(function FloorplanPolygonHandleLayer({
   edgeHandles = [],
   hoveredHandleId,
@@ -5028,6 +4710,7 @@ function FloorplanLinearDraftLayer({
   unitsPerPixel: number
   sceneRotationDeg: number
 }) {
+  const metricNotation = useViewer((state) => state.metricNotation)
   const wallDraftEnd = useFloorplanDraftPreview((s) => s.wallDraftEnd)
   const fenceDraftEnd = useFloorplanDraftPreview((s) => s.fenceDraftEnd)
   const roofDraftEnd = useFloorplanDraftPreview((s) => s.roofDraftEnd)
@@ -5146,7 +4829,7 @@ function FloorplanLinearDraftLayer({
     }
 
     return {
-      lengthLabel: formatMeasurement(length, unit),
+      lengthLabel: formatMeasurement(length, unit, null, metricNotation),
       midpoint: [
         (wallDraftStart[0] + wallDraftEnd[0]) / 2,
         (wallDraftStart[1] + wallDraftEnd[1]) / 2,
@@ -5154,10 +4837,84 @@ function FloorplanLinearDraftLayer({
       direction: [dx / length, dy / length] as WallPlanPoint,
       angleLabels,
     }
-  }, [isWallBuildActive, unit, wallDraftEnd, wallDraftStart, walls])
+  }, [isWallBuildActive, metricNotation, unit, wallDraftEnd, wallDraftStart, walls])
+
+  // Axis guides for wall and fence drafts — parity with the 3D tools'
+  // `DraftAxisGuides`: an X/Z cross through the draft start, and a single
+  // long line PERPENDICULAR to the segment through the moving endpoint (a
+  // second cross would collide with the start cross on axis-aligned
+  // segments). Long solid lines in world space — cheap for the SVG renderer,
+  // unlike dashed strokes which tessellate per dash over 2000 m. Stroke
+  // width is budgeted in screen pixels via `unitsPerPixel`, matching the
+  // alignment-guide layer.
+  const draftAxisGuideLines = useMemo(() => {
+    const lines: Array<{ x1: number; y1: number; x2: number; y2: number }> = []
+    const pushCross = (point: WallPlanPoint) => {
+      lines.push(
+        {
+          x1: point[0] - DRAFT_AXIS_GUIDE_EXTENT,
+          y1: point[1],
+          x2: point[0] + DRAFT_AXIS_GUIDE_EXTENT,
+          y2: point[1],
+        },
+        {
+          x1: point[0],
+          y1: point[1] - DRAFT_AXIS_GUIDE_EXTENT,
+          x2: point[0],
+          y2: point[1] + DRAFT_AXIS_GUIDE_EXTENT,
+        },
+      )
+    }
+    const pushDraft = (start: WallPlanPoint, end: WallPlanPoint) => {
+      pushCross(start)
+      const dx = end[0] - start[0]
+      const dy = end[1] - start[1]
+      const length = Math.hypot(dx, dy)
+      if (length < 1e-6) return
+      const nx = -dy / length
+      const ny = dx / length
+      lines.push({
+        x1: end[0] - nx * DRAFT_AXIS_GUIDE_EXTENT,
+        y1: end[1] - ny * DRAFT_AXIS_GUIDE_EXTENT,
+        x2: end[0] + nx * DRAFT_AXIS_GUIDE_EXTENT,
+        y2: end[1] + ny * DRAFT_AXIS_GUIDE_EXTENT,
+      })
+    }
+    if (isWallBuildActive && wallDraftStart && wallDraftEnd) {
+      pushDraft(wallDraftStart, wallDraftEnd)
+    }
+    if (isFenceBuildActive && fenceDraftStart && fenceDraftEnd) {
+      pushDraft(fenceDraftStart, fenceDraftEnd)
+    }
+    return lines.length > 0 ? lines : null
+  }, [
+    isFenceBuildActive,
+    isWallBuildActive,
+    fenceDraftEnd,
+    fenceDraftStart,
+    wallDraftEnd,
+    wallDraftStart,
+  ])
 
   return (
     <>
+      {draftAxisGuideLines && (
+        <g pointerEvents="none">
+          {draftAxisGuideLines.map((line, index) => (
+            <line
+              key={index}
+              stroke="#818cf8"
+              strokeOpacity={0.5}
+              strokeWidth={unitsPerPixel}
+              x1={line.x1}
+              x2={line.x2}
+              y1={line.y1}
+              y2={line.y2}
+            />
+          ))}
+        </g>
+      )}
+
       <FloorplanDraftLayer
         anchorFill={draftStroke}
         draftAnchorPoints={EMPTY_DRAFT_ANCHOR_POINTS}
@@ -5186,6 +4943,8 @@ function FloorplanLinearDraftLayer({
 }
 
 const EMPTY_DRAFT_ANCHOR_POINTS: Array<{ x: number; y: number; isPrimary: boolean }> = []
+/** World-space half-length of the 2D draft axis guide lines (matches the 3D tools' 2000 m guides). */
+const DRAFT_AXIS_GUIDE_EXTENT = 1000
 
 export function FloorplanPanel({
   /**
@@ -5195,15 +4954,20 @@ export function FloorplanPanel({
    * in 2d, 3d, and split modes, while this panel itself may be display:none.
    */
   compassHost,
+  floorplanSceneSlot,
 }: {
   compassHost?: HTMLElement | null
+  floorplanSceneSlot?: ReactNode
 }) {
+  useFloorplanCameraSyncBridge()
   const viewportHostRef = useRef<HTMLDivElement>(null)
   const svgRef = useRef<SVGSVGElement>(null)
+  const floorplanBackgroundRef = useRef<SVGRectElement>(null)
   const floorplanSceneRef = useRef<SVGGElement>(null)
   const floorplanContentRef = useRef<SVGGElement>(null)
   const panStateRef = useRef<PanState | null>(null)
   const floorplanRotationStateRef = useRef<FloorplanRotationState | null>(null)
+  const pendingFloorplanRotationRestoreRef = useRef<FloorplanRotationState | null>(null)
   const floorplanSpacePanPressedRef = useRef(false)
   const floorplanNavigationClickSuppressedRef = useRef(false)
   const guideInteractionRef = useRef<GuideInteractionState | null>(null)
@@ -5227,6 +4991,31 @@ export function FloorplanPanel({
   const latestFittedViewportRef = useRef<FloorplanViewport | null>(null)
   const floorplanViewAnimationFrameRef = useRef<number | null>(null)
   const floorplanViewAnimationTargetRef = useRef<FloorplanViewAnimationTarget | null>(null)
+  const floorplanZoomCommitTimerRef = useRef<number | null>(null)
+  const floorplanRenderScaleCommitTimerRef = useRef<number | null>(null)
+  const floorplanViewportInteractionInProgressRef = useRef(false)
+  const floorplanImperativeViewBoxRef = useRef<FloorplanPresentationViewBox | null>(null)
+  const floorplanNavigationSyncPresentationRef =
+    useRef<FloorplanNavigationSyncPresentationState | null>(null)
+  const applyFloorplanNavigationSyncPresentationRef = useRef<(pose: NavigationSyncPose) => void>(
+    () => {},
+  )
+  const commitFloorplanNavigationSyncPresentationRef = useRef<(pose: NavigationSyncPose) => void>(
+    () => {},
+  )
+  const floorplanNavigationSyncSchedulerRef =
+    useRef<FloorplanNavigationSyncScheduler<NavigationSyncPose> | null>(null)
+  const latestFloorplanRenderUnitsPerPixelRef = useRef(1)
+  const floorplanZoomPoseRef = useRef<{
+    localCenter: SvgPoint
+    userRotationDeg: number
+    viewWidth: number
+  } | null>(null)
+  const floorplanPanPoseRef = useRef<{
+    localCenter: SvgPoint
+    userRotationDeg: number
+    viewWidth: number
+  } | null>(null)
   const latestNavigationSyncPoseRef = useRef<NavigationSyncPose | null>(
     useEditor.getState().navigationSyncPose,
   )
@@ -5241,6 +5030,7 @@ export function FloorplanPanel({
   const setPreviewSelectedIds = useViewer((state) => state.setPreviewSelectedIds)
   const isDark = useViewer((state) => getSceneTheme(state.sceneTheme).appearance === 'dark')
   const unit = useViewer((state) => state.unit)
+  const metricNotation = useViewer((state) => state.metricNotation)
   const showGrid = useViewer((state) => state.showGrid)
   const showGuides = useViewer((state) => state.showGuides)
   const setShowGuides = useViewer((state) => state.setShowGuides)
@@ -5331,9 +5121,14 @@ export function FloorplanPanel({
   const buildingRotationDeg = (buildingRotationY * 180) / Math.PI
   const floorplanSceneRotationDeg =
     FLOORPLAN_VIEW_ROTATION_DEG + floorplanUserRotationDeg - buildingRotationDeg
+  const getFloorplanSceneRotationDeg = useCallback(
+    () =>
+      FLOORPLAN_VIEW_ROTATION_DEG + latestFloorplanUserRotationDegRef.current - buildingRotationDeg,
+    [buildingRotationDeg],
+  )
   // Only sync ref from state when floorplan is open (state is source of truth).
   // When hidden, the imperative 3D path owns the ref and must not be clobbered.
-  if (isFloorplanOpenRef.current) {
+  if (isFloorplanOpenRef.current && !floorplanViewportInteractionInProgressRef.current) {
     latestFloorplanUserRotationDegRef.current = floorplanUserRotationDeg
   }
 
@@ -5343,6 +5138,8 @@ export function FloorplanPanel({
   // Shims keep the `setXDraftEnd(value | prev => …)` call sites unchanged.
   const [draftStart, setDraftStart] = useState<WallPlanPoint | null>(null)
   const [wallChainFirstVertex, setWallChainFirstVertex] = useState<WallPlanPoint | null>(null)
+  const wallConstructionOptionsRef =
+    useRef<ReturnType<typeof resolveTerrainWallConstructionOptions>>(undefined)
   // Walls committed by the current 2D-only chain — exclusion set for the
   // T-junction chain-termination test (mirrors the 3D tool's `chainWallIds`).
   const wallChainWallIdsRef = useRef<string[]>([])
@@ -5371,6 +5168,19 @@ export function FloorplanPanel({
   )
   const [ceilingDraftPoints, setCeilingDraftPoints] = useState<WallPlanPoint[]>([])
   const [slabDraftPoints, setSlabDraftPoints] = useState<WallPlanPoint[]>([])
+  const slabPlacementBaseRef = useRef<number | null>(null)
+  // Mirror the per-click draft START anchors into the shared draft store so
+  // out-of-tree consumers (such as host-owned preview publishers) see the whole open
+  // segment without subscribing to this panel's state.
+  useEffect(() => {
+    useFloorplanDraftPreview.getState().setWallDraftStart(draftStart)
+  }, [draftStart])
+  useEffect(() => {
+    useFloorplanDraftPreview.getState().setFenceDraftStart(fenceDraftStart)
+  }, [fenceDraftStart])
+  useEffect(() => {
+    useFloorplanDraftPreview.getState().setRoofDraftStart(roofDraftStart)
+  }, [roofDraftStart])
   const [zoneDraftPoints, setZoneDraftPoints] = useState<WallPlanPoint[]>([])
   const [siteBoundaryDraft, setSiteBoundaryDraft] = useState<SiteBoundaryDraft | null>(null)
   const [siteVertexDragState, setSiteVertexDragState] = useState<SiteVertexDragState | null>(null)
@@ -5424,24 +5234,7 @@ export function FloorplanPanel({
   )
   const [wallEndpointDraft, setWallEndpointDraft] = useState<WallEndpointDraft | null>(null)
   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 [hoveredSpawnId, setHoveredSpawnId] = useState<SpawnNode['id'] | null>(null)
-  const [hoveredStairId, setHoveredStairId] = useState<StairNode['id'] | null>(null)
-  const [hoveredElevatorId, setHoveredElevatorId] = useState<ElevatorNode['id'] | null>(null)
-  const [elevatorResizeDragState, setElevatorResizeDragState] =
-    useState<ElevatorResizeDragState | null>(null)
-  const [hoveredZoneId, setHoveredZoneId] = useState<ZoneNodeType['id'] | null>(null)
-  const [hoveredEndpointId, setHoveredEndpointId] = useState<string | null>(null)
-  const [hoveredWallCurveHandleId, setHoveredWallCurveHandleId] = useState<string | null>(null)
   const [hoveredSiteHandleId, setHoveredSiteHandleId] = useState<string | null>(null)
-  const [hoveredSlabHandleId, setHoveredSlabHandleId] = useState<string | null>(null)
-  const [hoveredCeilingHandleId, setHoveredCeilingHandleId] = useState<string | null>(null)
-  const [hoveredZoneHandleId, setHoveredZoneHandleId] = useState<string | null>(null)
   const [hoveredGuideCorner, setHoveredGuideCorner] = useState<GuideCorner | null>(null)
   const floorplanSelectionTool = useEditor((s) => s.floorplanSelectionTool)
   const setFloorplanSelectionTool = useEditor((s) => s.setFloorplanSelectionTool)
@@ -5530,12 +5323,15 @@ export function FloorplanPanel({
   const [isPanelReady, setIsPanelReady] = useState(false)
   const [surfaceSize, setSurfaceSize] = useState({ width: 1, height: 1 })
   const [viewport, setViewport] = useState<FloorplanViewport | null>(null)
-  latestViewportRef.current = viewport
-  // Tight bbox of the painted floor-plan scene (the rotation `<g>`'s
-  // children), read via SVG `getBBox()` after each render. The legacy
-  // polygon arrays (`wallPolygons`, `displaySlabPolygons`, etc.) are now
-  // empty stubs because rendering moved to the registry layer, so
-  // measuring the DOM is how `fittedViewport` learns where content lives.
+  const [floorplanRenderUnitsPerPixel, setFloorplanRenderUnitsPerPixel] = useState<number | null>(
+    null,
+  )
+  if (!floorplanViewportInteractionInProgressRef.current) {
+    latestViewportRef.current = viewport
+  }
+  // Tight bbox of the registry-rendered floor-plan content, read via SVG
+  // `getBBox()` after geometry changes settle. `fittedViewport` combines it
+  // with the editor-owned site boundary below.
   const [measuredSceneBBox, setMeasuredSceneBBox] = useState<{
     x: number
     y: number
@@ -5776,28 +5572,9 @@ export function FloorplanPanel({
 
     return hasPreviewWalls ? nextFloorplanWallById : floorplanWallById
   }, [displayWallById, floorplanWallById, wallCurveDraft, wallEndpointDraft])
-  // Fence is fully registry-driven (`def.floorplan` + `buildFenceFloorplan`).
-  // The legacy entry list is permanently empty; kept as a typed stable
-  // reference so downstream prop sites stay typed without each having to
-  // declare its own `[]`.
-  const floorplanFenceEntries = useMemo<FloorplanFenceEntry[]>(() => [], [])
-  // Wall is fully registry-driven. Empty stable arrays for the legacy
-  // entry lists; consumers' map / iteration paths become no-ops.
-  const wallPolygons = useMemo<WallPolygonEntry[]>(() => [], [])
-  const displayWallPolygons = useMemo<WallPolygonEntry[]>(() => [], [])
-
-  // Doors + windows fully registry-driven via `def.floorplan`.
-  const openingsPolygons = useMemo<OpeningPolygonEntry[]>(() => [], [])
-  // Slab + ceiling fully registry-driven via `def.floorplan`. Same
-  // empty-stable-array pattern.
-  const slabPolygons = useMemo<SlabPolygonEntry[]>(() => [], [])
-  const displaySlabPolygons = useMemo<SlabPolygonEntry[]>(() => [], [])
-  const ceilingPolygons = useMemo<CeilingPolygonEntry[]>(() => [], [])
-  const displayCeilingPolygons = useMemo<CeilingPolygonEntry[]>(() => [], [])
   // Ceilings on the active level, projected to 2D polygons for hit-testing
-  // ceiling-item placement clicks/moves. The legacy `ceilingPolygons` above
-  // is intentionally empty (ceilings render via the registry layer); this
-  // memo is the placement-side counterpart, separate from rendering.
+  // ceiling-item placement clicks/moves. Committed ceilings render through
+  // the registry; this memo is placement data, not a rendering fallback.
   const ceilingHitEntries = useMemo(
     () =>
       ceilings.map((ceiling) => ({
@@ -5809,11 +5586,6 @@ export function FloorplanPanel({
       })),
     [ceilings],
   )
-  // Zone fully registry-driven via `def.floorplan`.
-  const zonePolygons = useMemo<ZonePolygonEntry[]>(() => [], [])
-  const displayZonePolygons = useMemo<ZonePolygonEntry[]>(() => [], [])
-  // Column fully registry-driven via `def.floorplan`.
-  const floorplanColumnEntries = useMemo<FloorplanColumnEntry[]>(() => [], [])
   const levelDescendantNodeById = useMemo(
     () => new Map(levelDescendantNodes.map((node) => [node.id, node] as const)),
     [levelDescendantNodes],
@@ -5836,11 +5608,6 @@ export function FloorplanPanel({
       ),
     [levelDescendantNodes],
   )
-  // Spawn + item fully registry-driven.
-  const floorplanSpawnEntries = useMemo<FloorplanSpawnEntry[]>(() => [], [])
-  const floorplanItemEntries = useMemo<FloorplanItemEntry[]>(() => [], [])
-  // Elevator fully registry-driven via `def.floorplan`.
-  const floorplanElevatorEntries = useMemo<FloorplanElevatorEntry[]>(() => [], [])
   const referenceFloorLevel = useMemo(() => {
     if (!(showReferenceFloor && levelNode)) {
       return null
@@ -6083,26 +5850,6 @@ export function FloorplanPanel({
       wallPolygons,
     }
   }, [referenceFloorDescendants, referenceFloorLevel])
-  // Pending-mesh check was a flag the legacy active-level item entries
-  // raised when their polygon was the dimension fallback (waiting for
-  // the GLB to load to produce a tighter convex hull). Items are now
-  // registry-rendered, so the active-level entry list is always empty
-  // and this flag is permanently false.
-  const hasPendingItemMeshFootprints = false
-  // Stair fully registry-driven via `def.floorplan` (the parent walks
-  // its `stair-segment` children inside `buildStairFloorplan` to handle
-  // the cumulative-transform chain). `FloorplanRegistryLayer` renders
-  // the result; this legacy list stays empty.
-  const floorplanStairEntries = useMemo<FloorplanStairEntry[]>(() => [], [])
-  // Roof / roof-segment fully registry-driven via def.floorplan.
-  const floorplanRoofEntries = useMemo<FloorplanRoofEntry[]>(() => [], [])
-  // Slab / ceiling / zone are registry-driven; the polygon-handle, hole
-  // editor, and boundary-edit affordances live on `def.floorplanAffordances`.
-  // These legacy lookups stay as null stubs so the hole-editing fallbacks
-  // that still reference them compile cleanly.
-  const selectedSlabEntry = null as SlabPolygonEntry | null
-  const selectedCeilingEntry = null as CeilingPolygonEntry | null
-  const selectedZoneEntry = null as ZonePolygonEntry | null
   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 ceilingById = useMemo(
@@ -6317,13 +6064,12 @@ export function FloorplanPanel({
     isFloorplanItemContextActive
   const visibleSitePolygon = displaySitePolygon
   const canUseSiteBoundaryVertexHandles =
-    visibleSitePolygon !== null && (isSiteEditActive || mode === 'select')
+    visibleSitePolygon !== null && siteBoundaryHandlesEnabled({ mode, phase })
   const isSiteBoundaryHighlighted = isSiteEditActive || siteVertexDragState !== null
   const shouldShowSiteEdgeLabels =
     Boolean(visibleSitePolygon) &&
     activeHandleDrag?.nodeId === visibleSitePolygon?.site.id &&
     activeHandleDrag?.label === SITE_BOUNDARY_DRAG_LABEL
-  const visibleZonePolygons = displayZonePolygons
   const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds])
   const highlightedFloorplanIdSet = useMemo(
     () => new Set([...selectedIds, ...previewSelectedIds]),
@@ -6402,38 +6148,60 @@ export function FloorplanPanel({
     slabDraftPoints,
     zoneDraftPoints,
   ])
+  const activePolygonDraftType = isCeilingBuildActive
+    ? 'ceiling'
+    : isZoneBuildActive
+      ? 'zone'
+      : isSlabBuildActive
+        ? 'slab'
+        : null
+  useEffect(() => {
+    useFloorplanDraftPreview
+      .getState()
+      .setPolygonDraft(activePolygonDraftType, activePolygonDraftPoints)
+  }, [activePolygonDraftPoints, activePolygonDraftType])
   // The cursor-following polygon-draft preview (slab / zone / ceiling) moved into
   // `FloorplanDraftCursorLayer`, which reads the live cursor from the draft store
   // so it re-renders per move without re-rendering this panel.
 
   const svgAspectRatio = surfaceSize.width / surfaceSize.height || 1
+  const applyFloorplanViewportImperatively = useCallback(
+    (nextViewport: FloorplanViewport) => {
+      const nextHeight = nextViewport.width / svgAspectRatio
+      const nextMinX = nextViewport.centerX - nextViewport.width / 2
+      const nextMinY = nextViewport.centerY - nextHeight / 2
+      const nextViewBox = {
+        minX: nextMinX,
+        minY: nextMinY,
+        width: nextViewport.width,
+        height: nextHeight,
+      }
+      const nextPaintViewBox = getFloorplanRotationOverscanViewBox(nextViewBox)
+      floorplanImperativeViewBoxRef.current = nextViewBox
+      hasUserAdjustedViewportRef.current = true
+      latestViewportRef.current = nextViewport
+      svgRef.current?.setAttribute(
+        'viewBox',
+        `${nextMinX} ${nextMinY} ${nextViewport.width} ${nextHeight}`,
+      )
+      const background = floorplanBackgroundRef.current
+      if (background) {
+        background.setAttribute('x', String(nextPaintViewBox.minX))
+        background.setAttribute('y', String(nextPaintViewBox.minY))
+        background.setAttribute('width', String(nextPaintViewBox.width))
+        background.setAttribute('height', String(nextPaintViewBox.height))
+      }
+    },
+    [svgAspectRatio],
+  )
 
   const fittedViewport = useMemo(() => {
-    // Collect bounds from the legacy polygon arrays first. Most are empty
-    // stubs (rendering moved to the registry layer), but we still honor
-    // anything that does emit points so the fit is correct during the
-    // brief window before `measuredSceneBBox` is populated.
-    const legacyPoints = [
-      ...(visibleSitePolygon ? visibleSitePolygon.polygon : []),
-      ...displayCeilingPolygons.flatMap((entry) => entry.polygon),
-      ...displaySlabPolygons.flatMap((entry) => entry.polygon),
-      ...floorplanElevatorEntries.flatMap((entry) => entry.polygon),
-      ...floorplanFenceEntries.flatMap((entry) => entry.centerline),
-      ...floorplanItemEntries.flatMap((entry) => entry.polygon),
-      ...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),
-    ]
-
     let minX = Number.POSITIVE_INFINITY
     let maxX = Number.NEGATIVE_INFINITY
     let minY = Number.POSITIVE_INFINITY
     let maxY = Number.NEGATIVE_INFINITY
 
-    for (const point of legacyPoints) {
+    for (const point of visibleSitePolygon?.polygon ?? []) {
       const svgPoint = rotateSvgPoint(toSvgPoint(point), floorplanSceneRotationDeg)
       minX = Math.min(minX, svgPoint.x)
       maxX = Math.max(maxX, svgPoint.x)
@@ -6481,59 +6249,74 @@ export function FloorplanPanel({
       centerY,
       width,
     }
-  }, [
-    displayCeilingPolygons,
-    displaySlabPolygons,
-    floorplanElevatorEntries,
-    floorplanFenceEntries,
-    floorplanItemEntries,
-    floorplanRoofEntries,
-    floorplanSceneRotationDeg,
-    floorplanStairEntries,
-    measuredSceneBBox,
-    svgAspectRatio,
-    visibleSitePolygon,
-    visibleZonePolygons,
-    wallPolygons,
-  ])
+  }, [floorplanSceneRotationDeg, measuredSceneBBox, svgAspectRatio, visibleSitePolygon])
   latestFittedViewportRef.current = fittedViewport
 
-  // Measure the painted floor-plan scene after each render. `getBBox()`
-  // gives us the tight bounds of whatever the registry layer emitted,
-  // even for kinds whose legacy entry arrays are empty stubs. Bail out
-  // when nothing has painted (empty group throws in some browsers).
-  // We measure the content-only sub-group (not the full scene group) to
-  // exclude the grid layer, whose extent tracks the viewBox and would
-  // otherwise create a measure→fit→measure update loop.
+  // Measure the content-only subtree after its geometry settles. ViewBox-only
+  // navigation does not change these bounds and must not force `getBBox()` on
+  // every animation frame.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: visibility remounts the observed SVG subtree.
   useLayoutEffect(() => {
     const el = floorplanContentRef.current
     if (!el) return
-    let bbox: { x: number; y: number; width: number; height: number }
-    try {
-      const measured = el.getBBox()
-      bbox = {
-        x: measured.x,
-        y: measured.y,
-        width: measured.width,
-        height: measured.height,
-      }
-    } catch {
-      return
+    let scheduledFrame: number | null = null
+    let mutationVersion = 0
+    let observedVersion = 0
+    const measure = () => {
+      let bbox: { x: number; y: number; width: number; height: number }
+      try {
+        const measured = el.getBBox()
+        bbox = {
+          x: measured.x,
+          y: measured.y,
+          width: measured.width,
+          height: measured.height,
+        }
+      } catch {
+        return
+      }
+      if (bbox.width <= 0 && bbox.height <= 0) return
+      setMeasuredSceneBBox((prev) => {
+        if (
+          prev &&
+          prev.x === bbox.x &&
+          prev.y === bbox.y &&
+          prev.width === bbox.width &&
+          prev.height === bbox.height
+        ) {
+          return prev
+        }
+        return bbox
+      })
     }
-    if (bbox.width <= 0 && bbox.height <= 0) return
-    setMeasuredSceneBBox((prev) => {
-      if (
-        prev &&
-        prev.x === bbox.x &&
-        prev.y === bbox.y &&
-        prev.width === bbox.width &&
-        prev.height === bbox.height
-      ) {
-        return prev
+    const flushWhenSettled = () => {
+      if (observedVersion !== mutationVersion) {
+        observedVersion = mutationVersion
+        scheduledFrame = requestAnimationFrame(flushWhenSettled)
+        return
       }
-      return bbox
+      scheduledFrame = null
+      measure()
+    }
+    const observer = new MutationObserver(() => {
+      mutationVersion += 1
+      if (scheduledFrame !== null) return
+      observedVersion = mutationVersion - 1
+      scheduledFrame = requestAnimationFrame(flushWhenSettled)
     })
-  })
+
+    measure()
+    observer.observe(el, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true,
+    })
+    return () => {
+      observer.disconnect()
+      if (scheduledFrame !== null) cancelAnimationFrame(scheduledFrame)
+    }
+  }, [isFloorplanOpen])
 
   const applyFloorplanNavigationState = useCallback(
     (nextViewport: FloorplanViewport, userRotationDeg: number) => {
@@ -6550,6 +6333,136 @@ export function FloorplanPanel({
     [],
   )
 
+  const applyFloorplanNavigationSyncPresentation = useCallback(
+    (pose: NavigationSyncPose) => {
+      const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current
+      const svg = svgRef.current
+      if (!(currentViewport && svg)) return
+
+      let presentationState = floorplanNavigationSyncPresentationRef.current
+      if (!presentationState) {
+        const initialUserRotationDeg = latestFloorplanUserRotationDegRef.current
+        const initialSceneRotationDeg =
+          FLOORPLAN_VIEW_ROTATION_DEG + initialUserRotationDeg - buildingRotationDeg
+        presentationState = {
+          initialUserRotationDeg,
+          initialSceneRotationDeg,
+          latestUserRotationDeg: initialUserRotationDeg,
+          latestSceneRotationDeg: initialSceneRotationDeg,
+          latestViewport: currentViewport,
+          svg,
+          svgStyle: {
+            transform: svg.style.transform,
+            transformOrigin: svg.style.transformOrigin,
+            willChange: svg.style.willChange,
+          },
+        }
+        floorplanNavigationSyncPresentationRef.current = presentationState
+        floorplanViewportInteractionInProgressRef.current = true
+        svg.style.transformOrigin = 'center'
+        svg.style.willChange = 'transform'
+      }
+
+      const nextUserRotationDeg = floorplanRotationFromCameraAzimuth(
+        pose.azimuth,
+        presentationState.latestUserRotationDeg,
+      )
+      const localCenter = worldToFloorplanLocalPoint(
+        pose.target[0],
+        pose.target[2],
+        buildingPosition,
+        buildingRotationY,
+      )
+      const nextWidth = resolveFloorplanViewWidth(
+        pose.viewWidth,
+        currentViewport.width,
+        latestFittedViewportRef.current,
+        false,
+      )
+      const nextSceneRotationDeg =
+        FLOORPLAN_VIEW_ROTATION_DEG + nextUserRotationDeg - buildingRotationDeg
+      const nextCenterSvg = rotateSvgPoint(localCenter, nextSceneRotationDeg)
+      const nextViewport = {
+        centerX: nextCenterSvg.x,
+        centerY: nextCenterSvg.y,
+        width: nextWidth,
+      }
+      const presentationCenterSvg = rotateSvgPoint(
+        localCenter,
+        presentationState.initialSceneRotationDeg,
+      )
+
+      applyFloorplanViewportImperatively({
+        centerX: presentationCenterSvg.x,
+        centerY: presentationCenterSvg.y,
+        width: nextWidth,
+      })
+      svg.style.transform = `rotate(${
+        nextUserRotationDeg - presentationState.initialUserRotationDeg
+      }deg)`
+      latestFloorplanUserRotationDegRef.current = nextUserRotationDeg
+      latestViewportRef.current = nextViewport
+      presentationState.latestUserRotationDeg = nextUserRotationDeg
+      presentationState.latestSceneRotationDeg = nextSceneRotationDeg
+      presentationState.latestViewport = nextViewport
+    },
+    [applyFloorplanViewportImperatively, buildingPosition, buildingRotationDeg, buildingRotationY],
+  )
+
+  const commitFloorplanNavigationSyncPresentation = useCallback(
+    (_pose: NavigationSyncPose) => {
+      const presentationState = floorplanNavigationSyncPresentationRef.current
+      if (!presentationState) return
+
+      applyFloorplanViewportImperatively(presentationState.latestViewport)
+      const scene = floorplanSceneRef.current
+      if (scene) {
+        if (presentationState.latestSceneRotationDeg === 0) {
+          scene.removeAttribute('transform')
+        } else {
+          scene.setAttribute('transform', `rotate(${presentationState.latestSceneRotationDeg})`)
+        }
+      }
+      restoreFloorplanNavigationSyncPresentation(presentationState)
+      floorplanNavigationSyncPresentationRef.current = null
+      floorplanViewportInteractionInProgressRef.current = false
+      floorplanImperativeViewBoxRef.current = null
+      setFloorplanUserRotationDeg((current) =>
+        current === presentationState.latestUserRotationDeg
+          ? current
+          : presentationState.latestUserRotationDeg,
+      )
+      setViewport((current) =>
+        floorplanViewportEquals(current, presentationState.latestViewport)
+          ? current
+          : presentationState.latestViewport,
+      )
+    },
+    [applyFloorplanViewportImperatively],
+  )
+
+  applyFloorplanNavigationSyncPresentationRef.current = applyFloorplanNavigationSyncPresentation
+  commitFloorplanNavigationSyncPresentationRef.current = commitFloorplanNavigationSyncPresentation
+  if (!floorplanNavigationSyncSchedulerRef.current) {
+    floorplanNavigationSyncSchedulerRef.current = createFloorplanNavigationSyncScheduler({
+      applyPresentation: (pose: NavigationSyncPose) =>
+        applyFloorplanNavigationSyncPresentationRef.current(pose),
+      commit: (pose: NavigationSyncPose) =>
+        commitFloorplanNavigationSyncPresentationRef.current(pose),
+    })
+  }
+  const floorplanNavigationSyncScheduler = floorplanNavigationSyncSchedulerRef.current
+  const discardFloorplanNavigationSyncPresentation = useCallback(() => {
+    floorplanNavigationSyncScheduler.discard()
+    const presentationState = floorplanNavigationSyncPresentationRef.current
+    if (presentationState) {
+      restoreFloorplanNavigationSyncPresentation(presentationState)
+      floorplanNavigationSyncPresentationRef.current = null
+    }
+    floorplanViewportInteractionInProgressRef.current = false
+    floorplanImperativeViewBoxRef.current = null
+  }, [floorplanNavigationSyncScheduler])
+
   const stopFloorplanViewAnimation = useCallback(() => {
     if (floorplanViewAnimationFrameRef.current !== null) {
       window.cancelAnimationFrame(floorplanViewAnimationFrameRef.current)
@@ -6679,39 +6592,26 @@ export function FloorplanPanel({
 
   const syncFloorplanViewportToNavigationPose = useCallback(
     (pose: NavigationSyncPose) => {
-      // Skip the viewport sync while the 2D panel is hidden (3D mode). It writes
-      // React state (`setViewport`) that re-renders the whole floorplan SVG, so
-      // doing it every camera-zoom frame for an invisible panel was a needless
-      // per-frame stall. The catch-up effect below re-syncs on reopen.
+      // The transient camera stream owns refs + imperative SVG presentation.
+      // React state is committed only by the scheduler after the stream settles.
       if (!isFloorplanOpenRef.current) {
         return
       }
-      if (floorplanRotationStateRef.current) {
+      const localNavigationInProgress =
+        floorplanViewportInteractionInProgressRef.current &&
+        floorplanNavigationSyncPresentationRef.current === null
+      if (!canApplyFloorplanNavigationSync(localNavigationInProgress)) {
         return
       }
-
-      const nextUserRotationDeg = floorplanRotationFromCameraAzimuth(
-        pose.azimuth,
-        latestFloorplanUserRotationDegRef.current,
-      )
-      const localCenter = worldToFloorplanLocalPoint(
-        pose.target[0],
-        pose.target[2],
-        buildingPosition,
-        buildingRotationY,
-      )
-
-      applyFloorplanNavigationView(localCenter, nextUserRotationDeg, pose.viewWidth, {
-        clampViewWidth: false,
-      })
-    },
-    [applyFloorplanNavigationView, buildingPosition, buildingRotationY],
-  )
+      floorplanNavigationSyncScheduler.update(pose)
+    },
+    [floorplanNavigationSyncScheduler],
+  )
 
   useEffect(() => {
     if (!isFloorplanOpen) return
 
-    const pose = useEditor.getState().navigationSyncPose
+    const pose = latestNavigationSyncPoseRef.current
     if (!pose) {
       return
     }
@@ -6722,6 +6622,18 @@ export function FloorplanPanel({
     }
   }, [syncFloorplanViewportToNavigationPose, isFloorplanOpen])
 
+  useEffect(() => {
+    if (isFloorplanOpen) return
+    discardFloorplanNavigationSyncPresentation()
+  }, [discardFloorplanNavigationSyncPresentation, isFloorplanOpen])
+
+  useEffect(
+    () => () => {
+      discardFloorplanNavigationSyncPresentation()
+    },
+    [discardFloorplanNavigationSyncPresentation],
+  )
+
   const cancelHiddenCompassAnimation = useCallback(() => {
     if (hiddenCompassAnimationRef.current !== null) {
       cancelAnimationFrame(hiddenCompassAnimationRef.current)
@@ -6729,11 +6641,9 @@ export function FloorplanPanel({
     }
   }, [])
 
-  // Align-north while the panel is hidden publishes a single '2d' pose that
-  // the 3D camera applies through the echo-suppressed pending-pose path — it
-  // never publishes '3d' frames back, so the needle must animate itself.
-  // Same time constant as the 2D view animation and the camera's effective
-  // smoothTime, so all three stay visually in step.
+  // Align-north while the panel is hidden publishes one 2D pose through the
+  // generic camera bridge. Camera application suppresses its own pose stream,
+  // so the needle animates itself with the same time constant.
   const animateHiddenCompassNeedle = useCallback(
     (targetDeg: number) => {
       cancelHiddenCompassAnimation()
@@ -6752,9 +6662,7 @@ export function FloorplanPanel({
           nextDeg = targetDeg
         }
         latestFloorplanUserRotationDegRef.current = nextDeg
-        if (compassNeedleRef.current) {
-          compassNeedleRef.current.style.transform = `rotate(${nextDeg}deg)`
-        }
+        setFloorplanCompassRotation(compassNeedleRef.current, nextDeg)
         if (nextDeg !== targetDeg) {
           hiddenCompassAnimationRef.current = requestAnimationFrame(tick)
         }
@@ -6764,10 +6672,10 @@ export function FloorplanPanel({
     [cancelHiddenCompassAnimation],
   )
 
-  useEffect(() => {
-    const unsubscribe = useEditor.subscribe((state) => {
-      const pose = state.navigationSyncPose
-      if (!pose || latestNavigationSyncPoseRef.current?.revision === pose.revision) {
+  const receiveFloorplanNavigationPose = useCallback(
+    (pose: NavigationSyncPose) => {
+      const previousPose = latestNavigationSyncPoseRef.current
+      if (previousPose?.source === pose.source && previousPose.revision === pose.revision) {
         return
       }
 
@@ -6785,9 +6693,7 @@ export function FloorplanPanel({
           // owns the needle, so any local animation yields to it.
           cancelHiddenCompassAnimation()
           latestFloorplanUserRotationDegRef.current = nextDeg
-          if (compassNeedleRef.current) {
-            compassNeedleRef.current.style.transform = `rotate(${nextDeg}deg)`
-          }
+          setFloorplanCompassRotation(compassNeedleRef.current, nextDeg)
         } else {
           animateHiddenCompassNeedle(nextDeg)
         }
@@ -6797,24 +6703,45 @@ export function FloorplanPanel({
       if (pose.source === '3d') {
         syncFloorplanViewportToNavigationPose(pose)
       }
-    })
-    return () => {
-      unsubscribe()
-      cancelHiddenCompassAnimation()
+    },
+    [
+      animateHiddenCompassNeedle,
+      cancelHiddenCompassAnimation,
+      syncFloorplanViewportToNavigationPose,
+    ],
+  )
+
+  useEffect(
+    () => subscribeFloorplanCameraNavigation(receiveFloorplanNavigationPose),
+    [receiveFloorplanNavigationPose],
+  )
+
+  useEffect(() => {
+    const receiveStoredNavigationPose = (pose: NavigationSyncPose | null) => {
+      if (pose?.source === '2d') {
+        receiveFloorplanNavigationPose(pose)
+      }
     }
-  }, [
-    syncFloorplanViewportToNavigationPose,
-    animateHiddenCompassNeedle,
-    cancelHiddenCompassAnimation,
-  ])
+    return subscribeNavigationSyncPose(receiveStoredNavigationPose)
+  }, [receiveFloorplanNavigationPose])
+
+  useEffect(
+    () => () => {
+      cancelHiddenCompassAnimation()
+    },
+    [cancelHiddenCompassAnimation],
+  )
 
   // When the panel is hidden the imperative path owns the compass needle.
   // React re-renders can overwrite the needle's inline transform with stale
   // state; this layout effect restores the authoritative ref value before
   // the browser paints so the needle never visibly snaps to a stale angle.
   useLayoutEffect(() => {
-    if (!isFloorplanOpen && compassNeedleRef.current) {
-      compassNeedleRef.current.style.transform = `rotate(${latestFloorplanUserRotationDegRef.current}deg)`
+    if (!isFloorplanOpen) {
+      setFloorplanCompassRotation(
+        compassNeedleRef.current,
+        latestFloorplanUserRotationDegRef.current,
+      )
     }
   })
 
@@ -6865,35 +6792,6 @@ export function FloorplanPanel({
     }
   }, [])
 
-  // Reset to auto-fit each time the 2D editor re-opens. The panel stays
-  // mounted across close/open (hidden via `display: none`), so without
-  // this the user's last pan/zoom — and any stale `measuredSceneBBox`
-  // captured before they closed it — would survive and the reopened
-  // editor would show the same off-screen viewport instead of fitting
-  // to the current scene.
-  useEffect(() => {
-    if (!isFloorplanOpen) {
-      stopFloorplanViewAnimation()
-      floorplanSpacePanPressedRef.current = false
-      panStateRef.current = null
-      floorplanRotationStateRef.current = null
-      setIsSpacePanPressed(false)
-      setIsPanning(false)
-      setIsRotatingFloorplan(false)
-      return
-    }
-    setMeasuredSceneBBox(null)
-
-    if (!latestNavigationSyncPoseRef.current) {
-      stopFloorplanViewAnimation()
-      hasUserAdjustedViewportRef.current = false
-      latestFloorplanUserRotationDegRef.current = 0
-      latestViewportRef.current = null
-      setFloorplanUserRotationDeg(0)
-      setViewport(null)
-    }
-  }, [isFloorplanOpen, stopFloorplanViewAnimation])
-
   useEffect(() => {
     const levelChanged = previousLevelIdRef.current !== (levelId ?? null)
 
@@ -6952,19 +6850,32 @@ export function FloorplanPanel({
       height,
     }
   }, [fittedViewport, svgAspectRatio, viewport])
+  const presentationViewBox = resolveFloorplanPresentationViewBox(
+    viewBox,
+    floorplanImperativeViewBoxRef.current,
+    floorplanViewportInteractionInProgressRef.current,
+  )
+  const presentationPaintViewBox = getFloorplanRotationOverscanViewBox(presentationViewBox)
   const floorplanWorldUnitsPerPixel = useMemo(() => {
     const widthUnitsPerPixel = viewBox.width / Math.max(surfaceSize.width, 1)
     const heightUnitsPerPixel = viewBox.height / Math.max(surfaceSize.height, 1)
 
     return (widthUnitsPerPixel + heightUnitsPerPixel) / 2
   }, [surfaceSize.height, surfaceSize.width, viewBox.height, viewBox.width])
-  const floorplanWallHitTolerance = useMemo(
-    () => floorplanWorldUnitsPerPixel * (FLOORPLAN_WALL_HIT_STROKE_WIDTH / 2),
-    [floorplanWorldUnitsPerPixel],
+  const getLiveFloorplanWorldUnitsPerPixel = useCallback(() => {
+    const width = latestViewportRef.current?.width ?? viewBox.width
+    const height = width / svgAspectRatio
+    const widthUnitsPerPixel = width / Math.max(surfaceSize.width, 1)
+    const heightUnitsPerPixel = height / Math.max(surfaceSize.height, 1)
+    return (widthUnitsPerPixel + heightUnitsPerPixel) / 2
+  }, [surfaceSize.height, surfaceSize.width, svgAspectRatio, viewBox.width])
+  const getFloorplanWallHitTolerance = useCallback(
+    () => getLiveFloorplanWorldUnitsPerPixel() * (FLOORPLAN_WALL_HIT_STROKE_WIDTH / 2),
+    [getLiveFloorplanWorldUnitsPerPixel],
   )
-  const floorplanOpeningHitTolerance = useMemo(
-    () => floorplanWorldUnitsPerPixel * (FLOORPLAN_OPENING_HIT_STROKE_WIDTH / 2),
-    [floorplanWorldUnitsPerPixel],
+  const getFloorplanOpeningHitTolerance = useCallback(
+    () => getLiveFloorplanWorldUnitsPerPixel() * (FLOORPLAN_OPENING_HIT_STROKE_WIDTH / 2),
+    [getLiveFloorplanWorldUnitsPerPixel],
   )
   const wallSelectionHatchSpacing = useMemo(
     () => Math.max(floorplanWorldUnitsPerPixel * 12, 0.0001),
@@ -7220,7 +7131,11 @@ export function FloorplanPanel({
     [surfaceSize.width, viewBox.width],
   )
   const gridBounds = useMemo(
-    () => getRotatedViewBoxBounds(viewBox, floorplanSceneRotationDeg),
+    () =>
+      getRotatedViewBoxBounds(
+        getFloorplanRotationOverscanViewBox(viewBox),
+        floorplanSceneRotationDeg,
+      ),
     [floorplanSceneRotationDeg, viewBox],
   )
 
@@ -7249,7 +7164,9 @@ export function FloorplanPanel({
       ),
     [gridBounds, gridSteps.majorStep],
   )
-  const floorplanUnitsPerPixel = viewBox.width / Math.max(surfaceSize.width, 1)
+  const liveFloorplanUnitsPerPixel = viewBox.width / Math.max(surfaceSize.width, 1)
+  const floorplanUnitsPerPixel = floorplanRenderUnitsPerPixel ?? liveFloorplanUnitsPerPixel
+  latestFloorplanRenderUnitsPerPixelRef.current = floorplanUnitsPerPixel
 
   useEffect(() => {
     setReferenceScaleUnit(unit === 'imperial' ? 'feet' : 'meters')
@@ -7435,120 +7352,6 @@ export function FloorplanPanel({
     [getSvgPointFromClientPoint, buildingRotationY],
   )
 
-  const previewElevatorResize = useCallback(
-    (dragState: ElevatorResizeDragState, planPoint: WallPlanPoint) => {
-      const localDeltaX = planPoint[0] - dragState.center.x
-      const localDeltaY = planPoint[1] - dragState.center.y
-      const [localX, localY] = rotatePlanVector(localDeltaX, localDeltaY, -dragState.rotation)
-      const axis = getElevatorResizeAxis(dragState.handle)
-      const sign = getElevatorResizeSign(dragState.handle)
-      const localDistance = sign * (axis === 'width' ? localX : localY)
-      const nextOuterSize = Math.max(0.1, localDistance) * 2
-
-      if (axis === 'width') {
-        const nextShaftWidth = roundPlanMeters(
-          Math.max(0.8, nextOuterSize - dragState.shaftWallThickness * 2),
-        )
-        const nextCabWidth = nextShaftWidth
-        useLiveNodeOverrides
-          .getState()
-          .set(dragState.elevatorId, { shaftWidth: nextShaftWidth, width: nextCabWidth })
-        setCursorPoint(planPoint)
-        return { shaftWidth: nextShaftWidth, width: nextCabWidth } satisfies Partial<ElevatorNode>
-      }
-
-      const nextShaftDepth = roundPlanMeters(
-        Math.max(0.8, nextOuterSize - dragState.shaftWallThickness * 2),
-      )
-      const nextCabDepth = nextShaftDepth
-      useLiveNodeOverrides
-        .getState()
-        .set(dragState.elevatorId, { depth: nextCabDepth, shaftDepth: nextShaftDepth })
-      setCursorPoint(planPoint)
-      return { depth: nextCabDepth, shaftDepth: nextShaftDepth } satisfies Partial<ElevatorNode>
-    },
-    [setCursorPoint],
-  )
-
-  const handleElevatorResizePointerDown = useCallback(
-    (
-      entry: FloorplanElevatorEntry,
-      handle: ElevatorResizeHandle,
-      event: ReactPointerEvent<SVGCircleElement>,
-    ) => {
-      if (event.button !== 0 || mode !== 'select') {
-        return
-      }
-
-      event.preventDefault()
-      event.stopPropagation()
-      event.currentTarget.setPointerCapture(event.pointerId)
-      setHoveredElevatorId(null)
-      setSelection({ selectedIds: [entry.elevator.id] })
-
-      setElevatorResizeDragState({
-        center: entry.center,
-        elevatorId: entry.elevator.id,
-        handle,
-        pointerId: event.pointerId,
-        rotation: entry.rotation,
-        shaftWallThickness: entry.shaftWallThickness,
-      })
-    },
-    [mode, setSelection],
-  )
-
-  const handleElevatorResizePointerMove = useCallback(
-    (event: ReactPointerEvent<SVGCircleElement>) => {
-      const dragState = elevatorResizeDragState
-      if (!dragState || dragState.pointerId !== event.pointerId) {
-        return
-      }
-
-      const planPoint = getPlanPointFromClientPoint(event.clientX, event.clientY)
-      if (!planPoint) {
-        return
-      }
-
-      event.preventDefault()
-      event.stopPropagation()
-      previewElevatorResize(dragState, planPoint)
-    },
-    [elevatorResizeDragState, getPlanPointFromClientPoint, previewElevatorResize],
-  )
-
-  const handleElevatorResizePointerUp = useCallback(
-    (event: ReactPointerEvent<SVGCircleElement>) => {
-      const dragState = elevatorResizeDragState
-      if (!dragState || dragState.pointerId !== event.pointerId) {
-        return
-      }
-
-      const planPoint = getPlanPointFromClientPoint(event.clientX, event.clientY)
-      const updates = planPoint ? previewElevatorResize(dragState, planPoint) : {}
-
-      event.preventDefault()
-      event.stopPropagation()
-      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-        event.currentTarget.releasePointerCapture(event.pointerId)
-      }
-
-      useLiveNodeOverrides.getState().clear(dragState.elevatorId)
-      if (Object.keys(updates).length > 0) {
-        updateNode(dragState.elevatorId as AnyNodeId, updates)
-      }
-      setElevatorResizeDragState(null)
-      setCursorPoint(null)
-    },
-    [
-      elevatorResizeDragState,
-      getPlanPointFromClientPoint,
-      previewElevatorResize,
-      updateNode,
-      setCursorPoint,
-    ],
-  )
-
   useEffect(() => {
     siteBoundaryDraftRef.current = siteBoundaryDraft
   }, [siteBoundaryDraft])
@@ -7777,8 +7580,77 @@ export function FloorplanPanel({
     [beginPanelInteraction, panelRect],
   )
 
+  const applyFloorplanRotationImperatively = useCallback(
+    (rotationState: FloorplanRotationState, nextUserRotationDeg: number) => {
+      const currentViewport = latestViewportRef.current ?? rotationState.latestViewport
+      const nextSceneRotationDeg =
+        FLOORPLAN_VIEW_ROTATION_DEG + nextUserRotationDeg - buildingRotationDeg
+      const nextCenterSvg = rotateSvgPoint(rotationState.viewportCenterLocal, nextSceneRotationDeg)
+      const nextViewport = {
+        centerX: nextCenterSvg.x,
+        centerY: nextCenterSvg.y,
+        width: currentViewport.width,
+      }
+
+      hasUserAdjustedViewportRef.current = true
+      latestFloorplanUserRotationDegRef.current = nextUserRotationDeg
+      latestViewportRef.current = nextViewport
+      setFloorplanCompassRotation(compassNeedleRef.current, nextUserRotationDeg)
+      // Transform the already-painted SVG as one compositor layer. Mutating the
+      // scene rotation/viewBox here forces the heavy vector plan to rerasterize.
+      rotationState.svg.style.transform = `rotate(${nextUserRotationDeg - rotationState.initialUserRotationDeg}deg)`
+
+      rotationState.latestUserRotationDeg = nextUserRotationDeg
+      rotationState.latestViewport = nextViewport
+    },
+    [buildingRotationDeg],
+  )
+
+  const commitFloorplanZoom = useCallback(() => {
+    if (floorplanZoomCommitTimerRef.current !== null) {
+      window.clearTimeout(floorplanZoomCommitTimerRef.current)
+      floorplanZoomCommitTimerRef.current = null
+    }
+    const nextViewport = latestViewportRef.current
+    const pendingPose = floorplanZoomPoseRef.current
+    floorplanZoomPoseRef.current = null
+    floorplanViewportInteractionInProgressRef.current = false
+    floorplanImperativeViewBoxRef.current = null
+    if (!nextViewport) return
+    setFloorplanRenderUnitsPerPixel(
+      (current) => current ?? latestFloorplanRenderUnitsPerPixelRef.current,
+    )
+    setViewport((current) =>
+      floorplanViewportEquals(current, nextViewport) ? current : nextViewport,
+    )
+    if (floorplanRenderScaleCommitTimerRef.current !== null) {
+      window.clearTimeout(floorplanRenderScaleCommitTimerRef.current)
+    }
+    floorplanRenderScaleCommitTimerRef.current = window.setTimeout(() => {
+      floorplanRenderScaleCommitTimerRef.current = null
+      setFloorplanRenderUnitsPerPixel(null)
+    }, 350)
+    if (pendingPose) {
+      publishFloorplanNavigationPose(
+        pendingPose.localCenter,
+        pendingPose.userRotationDeg,
+        pendingPose.viewWidth,
+      )
+    }
+  }, [publishFloorplanNavigationPose])
+
+  const scheduleFloorplanZoomCommit = useCallback(() => {
+    if (floorplanZoomCommitTimerRef.current !== null) {
+      window.clearTimeout(floorplanZoomCommitTimerRef.current)
+    }
+    floorplanZoomCommitTimerRef.current = window.setTimeout(commitFloorplanZoom, 300)
+  }, [commitFloorplanZoom])
+
   const zoomViewportAtClientPoint = useCallback(
     (clientX: number, clientY: number, widthFactor: number) => {
+      if (!canZoomFloorplanDuringNavigation(floorplanRotationStateRef.current !== null)) {
+        return
+      }
       if (!Number.isFinite(widthFactor) || widthFactor <= 0) {
         return
       }
@@ -7792,14 +7664,27 @@ export function FloorplanPanel({
       if (!localPoint) {
         return
       }
-      const svgPoint = rotateSvgPoint(localPoint, floorplanSceneRotationDeg)
+      const currentSceneRotationDeg =
+        FLOORPLAN_VIEW_ROTATION_DEG +
+        latestFloorplanUserRotationDegRef.current -
+        buildingRotationDeg
+      const svgPoint = rotateSvgPoint(localPoint, currentSceneRotationDeg)
 
-      const currentViewport = viewport ?? fittedViewport
-      const currentViewBox = viewBox
+      const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current
+      if (!currentViewport) {
+        return
+      }
+      const currentViewBox = {
+        minX: currentViewport.centerX - currentViewport.width / 2,
+        minY: currentViewport.centerY - currentViewport.width / svgAspectRatio / 2,
+        width: currentViewport.width,
+        height: currentViewport.width / svgAspectRatio,
+      }
+      const fitted = latestFittedViewportRef.current
       const nextWidth = resolveFloorplanViewWidth(
         currentViewport.width * widthFactor,
         currentViewport.width,
-        fittedViewport,
+        fitted,
         true,
       )
       const nextHeight = nextWidth / svgAspectRatio
@@ -7812,34 +7697,149 @@ export function FloorplanPanel({
         x: nextMinX + nextWidth / 2,
         y: nextMinY + nextHeight / 2,
       }
-      const localCenter = rotateSvgPoint(nextCenterSvg, -floorplanSceneRotationDeg)
+      const localCenter = rotateSvgPoint(nextCenterSvg, -currentSceneRotationDeg)
+      const nextViewport = {
+        centerX: nextCenterSvg.x,
+        centerY: nextCenterSvg.y,
+        width: nextWidth,
+      }
 
-      smoothFloorplanNavigationView(
-        localCenter,
-        latestFloorplanUserRotationDegRef.current,
-        nextWidth,
-      )
-      publishFloorplanNavigationPose(
-        localCenter,
-        latestFloorplanUserRotationDegRef.current,
-        nextWidth,
-      )
+      stopFloorplanViewAnimation()
+      if (floorplanRenderScaleCommitTimerRef.current !== null) {
+        window.clearTimeout(floorplanRenderScaleCommitTimerRef.current)
+        floorplanRenderScaleCommitTimerRef.current = null
+      }
+      floorplanViewportInteractionInProgressRef.current = true
+      applyFloorplanViewportImperatively(nextViewport)
+      scheduleFloorplanZoomCommit()
+      const userRotationDeg = latestFloorplanUserRotationDegRef.current
+      floorplanZoomPoseRef.current = { localCenter, userRotationDeg, viewWidth: nextWidth }
+      if (useEditor.getState().viewMode === 'split') {
+        publishFloorplanNavigationPose(localCenter, userRotationDeg, nextWidth)
+      }
     },
     [
-      fittedViewport,
-      floorplanSceneRotationDeg,
+      applyFloorplanViewportImperatively,
+      buildingRotationDeg,
       getSvgPointFromClientPoint,
       publishFloorplanNavigationPose,
-      smoothFloorplanNavigationView,
+      scheduleFloorplanZoomCommit,
+      stopFloorplanViewAnimation,
       svgAspectRatio,
-      viewBox,
-      viewport,
     ],
   )
 
+  useEffect(
+    () => () => {
+      if (floorplanZoomCommitTimerRef.current !== null) {
+        window.clearTimeout(floorplanZoomCommitTimerRef.current)
+      }
+      if (floorplanRenderScaleCommitTimerRef.current !== null) {
+        window.clearTimeout(floorplanRenderScaleCommitTimerRef.current)
+      }
+      floorplanViewportInteractionInProgressRef.current = false
+      floorplanImperativeViewBoxRef.current = null
+    },
+    [],
+  )
+
+  const commitFloorplanPan = useCallback(() => {
+    const nextViewport = latestViewportRef.current
+    const pendingPose = floorplanPanPoseRef.current
+    floorplanPanPoseRef.current = null
+    floorplanViewportInteractionInProgressRef.current = false
+    floorplanImperativeViewBoxRef.current = null
+    if (nextViewport) {
+      setViewport((current) =>
+        floorplanViewportEquals(current, nextViewport) ? current : nextViewport,
+      )
+    }
+    if (pendingPose) {
+      publishFloorplanNavigationPose(
+        pendingPose.localCenter,
+        pendingPose.userRotationDeg,
+        pendingPose.viewWidth,
+      )
+    }
+  }, [publishFloorplanNavigationPose])
+
+  const commitFloorplanRotation = useCallback(
+    (rotationState: FloorplanRotationState) => {
+      floorplanViewportInteractionInProgressRef.current = false
+      floorplanImperativeViewBoxRef.current = null
+      queueFloorplanRotationPresentationRestore(pendingFloorplanRotationRestoreRef, rotationState)
+      setFloorplanUserRotationDeg((current) =>
+        current === rotationState.latestUserRotationDeg
+          ? current
+          : rotationState.latestUserRotationDeg,
+      )
+      setViewport((current) =>
+        floorplanViewportEquals(current, rotationState.latestViewport)
+          ? current
+          : rotationState.latestViewport,
+      )
+      publishFloorplanNavigationPose(
+        rotationState.viewportCenterLocal,
+        rotationState.latestUserRotationDeg,
+        rotationState.latestViewport.width,
+      )
+    },
+    [publishFloorplanNavigationPose],
+  )
+
+  useLayoutEffect(() => {
+    flushFloorplanRotationPresentationRestore(pendingFloorplanRotationRestoreRef)
+  })
+
+  // Finalize imperative navigation when the floorplan closes so reopening
+  // restores the last visible pose instead of stale React state.
+  useEffect(() => {
+    if (isFloorplanOpen) return
+    stopFloorplanViewAnimation()
+    const rotationState = floorplanRotationStateRef.current
+    finalizeFloorplanNavigation({
+      zoomPending:
+        floorplanZoomCommitTimerRef.current !== null || floorplanZoomPoseRef.current !== null,
+      panActive: panStateRef.current !== null,
+      rotationState,
+      commitZoom: commitFloorplanZoom,
+      commitPan: commitFloorplanPan,
+      commitRotation: commitFloorplanRotation,
+    })
+    floorplanSpacePanPressedRef.current = false
+    panStateRef.current = null
+    floorplanRotationStateRef.current = null
+    floorplanViewportInteractionInProgressRef.current = false
+    floorplanImperativeViewBoxRef.current = null
+    setIsSpacePanPressed(false)
+    setIsPanning(false)
+    setIsRotatingFloorplan(false)
+  }, [
+    commitFloorplanPan,
+    commitFloorplanRotation,
+    commitFloorplanZoom,
+    isFloorplanOpen,
+    stopFloorplanViewAnimation,
+  ])
+
+  useEffect(() => {
+    if (!isFloorplanOpen) return
+    setMeasuredSceneBBox(null)
+
+    if (!latestNavigationSyncPoseRef.current) {
+      stopFloorplanViewAnimation()
+      hasUserAdjustedViewportRef.current = false
+      latestFloorplanUserRotationDegRef.current = 0
+      latestViewportRef.current = null
+      setFloorplanUserRotationDeg(0)
+      setViewport(null)
+    }
+  }, [isFloorplanOpen, stopFloorplanViewAnimation])
+
   const clearWallPlacementDraft = useCallback(() => {
     setDraftStart(null)
     setWallChainFirstVertex(null)
+    wallConstructionOptionsRef.current = undefined
     wallChainWallIdsRef.current = []
     setDraftEnd(null)
     useSegmentDraftChain.getState().clear('wall')
@@ -7857,6 +7857,7 @@ export function FloorplanPanel({
   }, [])
   const clearSlabPlacementDraft = useCallback(() => {
     setSlabDraftPoints([])
+    slabPlacementBaseRef.current = null
   }, [])
   const clearZonePlacementDraft = useCallback(() => {
     setZoneDraftPoints([])
@@ -7865,13 +7866,11 @@ export function FloorplanPanel({
   const clearWallEndpointDrag = useCallback(() => {
     wallEndpointDragRef.current = null
     setWallEndpointDraft(null)
-    setHoveredEndpointId(null)
     useWallSnapIndicator.getState().clear()
   }, [])
   const clearWallCurveDrag = useCallback(() => {
     wallCurveDragRef.current = null
     setWallCurveDraft(null)
-    setHoveredWallCurveHandleId(null)
   }, [])
   const clearSiteBoundaryInteraction = useCallback(() => {
     const draft = siteBoundaryDraftRef.current
@@ -7981,18 +7980,22 @@ export function FloorplanPanel({
   // the tools' own `commitSlab/CeilingDrawing`) are called ONLY in 2D-only view
   // so split / 3D keep their single-owner tool commit (no double-create).
   const createSlabOnCurrentLevel = useCallback(
-    (points: WallPlanPoint[]) => {
+    (points: WallPlanPoint[], baseElevation: number | null) => {
       if (!levelId) {
         return null
       }
       const { createNode, nodes } = useScene.getState()
       const slabCount = Object.values(nodes).filter((node) => node.type === 'slab').length
       const defaults = useEditor.getState().toolDefaults.slab ?? {}
-      const slab = SlabNodeSchema.parse({
+      const authored = SlabNodeSchema.parse({
         ...defaults,
         name: `Slab ${slabCount + 1}`,
         polygon: points.map(([x, z]) => [x, z] as [number, number]),
       })
+      const slab = {
+        ...authored,
+        elevation: resolveSlabPlacementElevation(authored, baseElevation),
+      }
       createNode(slab, levelId)
       sfxEmitter.emit('sfx:structure-build')
       setSelection({ selectedIds: [slab.id] })
@@ -8079,14 +8082,6 @@ export function FloorplanPanel({
     }
   }, [isItemPlacementPreviewActive, scheduleMovingFloorplanNodeRefresh])
 
-  useEffect(() => {
-    if (!hasPendingItemMeshFootprints) {
-      return
-    }
-
-    scheduleMovingFloorplanNodeRefresh()
-  }, [scheduleMovingFloorplanNodeRefresh])
-
   // Subscribe to the live-transforms store so rotation/position changes that
   // *don't* go through pointer events still refresh the floorplan — e.g. R/T
   // keyboard rotation during placement updates `useLiveTransforms` but emits
@@ -8240,9 +8235,17 @@ export function FloorplanPanel({
         setShiftPressed(true)
       }
 
-      if (isStairBuildActive && (event.key === 'r' || event.key === 'R')) {
+      if (
+        isStairBuildActive &&
+        useEditor.getState().viewMode === '2d' &&
+        (event.key === 'r' || event.key === 'R')
+      ) {
         useStairBuildPreview.getState().rotateBy(Math.PI / 4)
-      } else if (isStairBuildActive && (event.key === 't' || event.key === 'T')) {
+      } else if (
+        isStairBuildActive &&
+        useEditor.getState().viewMode === '2d' &&
+        (event.key === 't' || event.key === 'T')
+      ) {
         useStairBuildPreview.getState().rotateBy(-Math.PI / 4)
       }
 
@@ -8786,8 +8789,13 @@ export function FloorplanPanel({
         event.preventDefault()
         event.stopPropagation()
 
+        floorplanNavigationSyncScheduler.flush()
+        if (floorplanZoomCommitTimerRef.current !== null) commitFloorplanZoom()
+        stopFloorplanViewAnimation()
         floorplanNavigationClickSuppressedRef.current = true
-        const currentViewport = viewport ?? fittedViewport
+        const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current
+        if (!currentViewport) return
+        floorplanViewportInteractionInProgressRef.current = true
         panStateRef.current = {
           pointerId: event.pointerId,
           clientX: event.clientX,
@@ -8812,17 +8820,36 @@ export function FloorplanPanel({
       event.preventDefault()
       event.stopPropagation()
 
-      const currentViewport = viewport ?? fittedViewport
+      floorplanNavigationSyncScheduler.flush()
+      if (floorplanZoomCommitTimerRef.current !== null) commitFloorplanZoom()
+      stopFloorplanViewAnimation()
+      const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current
+      const svg = svgRef.current
+      if (!(currentViewport && svg)) return
+      const currentUserRotationDeg = latestFloorplanUserRotationDegRef.current
+      const currentSceneRotationDeg =
+        FLOORPLAN_VIEW_ROTATION_DEG + currentUserRotationDeg - buildingRotationDeg
       const viewportCenterLocal = rotateSvgPoint(
         { x: currentViewport.centerX, y: currentViewport.centerY },
-        -floorplanSceneRotationDeg,
+        -currentSceneRotationDeg,
       )
-
+      const svgStyle = {
+        transform: svg.style.transform,
+        transformOrigin: svg.style.transformOrigin,
+        willChange: svg.style.willChange,
+      }
+      floorplanViewportInteractionInProgressRef.current = true
+      svg.style.transformOrigin = 'center'
+      svg.style.willChange = 'transform'
       floorplanRotationStateRef.current = {
         pointerId: event.pointerId,
         startClientX: event.clientX,
-        initialUserRotationDeg: floorplanUserRotationDeg,
+        initialUserRotationDeg: currentUserRotationDeg,
         viewportCenterLocal,
+        svg,
+        svgStyle,
+        latestUserRotationDeg: currentUserRotationDeg,
+        latestViewport: currentViewport,
       }
       setIsRotatingFloorplan(true)
       setCursorPoint(null)
@@ -8831,12 +8858,12 @@ export function FloorplanPanel({
       event.currentTarget.setPointerCapture(event.pointerId)
     },
     [
-      fittedViewport,
-      floorplanSceneRotationDeg,
-      floorplanUserRotationDeg,
-      viewport,
+      commitFloorplanZoom,
+      buildingRotationDeg,
+      floorplanNavigationSyncScheduler,
       setFloorplanCursorPosition,
       setCursorPoint,
+      stopFloorplanViewAnimation,
     ],
   )
 
@@ -8876,24 +8903,31 @@ export function FloorplanPanel({
     [isScreenSelectionToolActive, setPreviewSelectedIds],
   )
 
-  const endFloorplanNavigation = useCallback((event?: ReactPointerEvent<SVGSVGElement>) => {
-    if (
-      event &&
-      (panStateRef.current || floorplanRotationStateRef.current) &&
-      event.currentTarget.hasPointerCapture(event.pointerId)
-    ) {
-      event.currentTarget.releasePointerCapture(event.pointerId)
-    }
+  const endFloorplanNavigation = useCallback(
+    (event?: ReactPointerEvent<SVGSVGElement>) => {
+      const wasPanning = panStateRef.current !== null
+      const rotationState = floorplanRotationStateRef.current
+      if (
+        event &&
+        (panStateRef.current || floorplanRotationStateRef.current) &&
+        event.currentTarget.hasPointerCapture(event.pointerId)
+      ) {
+        event.currentTarget.releasePointerCapture(event.pointerId)
+      }
 
-    panStateRef.current = null
-    floorplanRotationStateRef.current = null
-    setIsPanning(false)
-    setIsRotatingFloorplan(false)
+      panStateRef.current = null
+      floorplanRotationStateRef.current = null
+      if (wasPanning) commitFloorplanPan()
+      if (rotationState) commitFloorplanRotation(rotationState)
+      setIsPanning(false)
+      setIsRotatingFloorplan(false)
 
-    window.setTimeout(() => {
-      floorplanNavigationClickSuppressedRef.current = false
-    }, 0)
-  }, [])
+      window.setTimeout(() => {
+        floorplanNavigationClickSuppressedRef.current = false
+      }, 0)
+    },
+    [commitFloorplanPan, commitFloorplanRotation],
+  )
 
   const hoveredWallIdRef = useRef<string | null>(null)
   const hoveredCeilingIdRef = useRef<string | null>(null)
@@ -8929,10 +8963,20 @@ export function FloorplanPanel({
       const worldX = buildingPosition[0] + planPoint[0] * cos + planPoint[1] * sin
       const worldZ = buildingPosition[2] - planPoint[0] * sin + planPoint[1] * cos
 
+      // On sculpted ground the grid Y is the terrain height under the plan point,
+      // not the flat storey plane. There is no XZ correction to make here — the
+      // plan view's ray is vertical by construction, so the skew the 3D path has
+      // to march for cannot happen — but the Y still has to be the ground's, or a
+      // wall drafted in 2D lands at the datum while the same wall drafted in 3D
+      // lands on the hillside.
+      const groundY = groundHeightAt(worldX, worldZ, floorplanGridWorldY)
+      const worldY = groundY ?? floorplanGridWorldY
+      const localY = groundY === null ? floorplanGridLocalY : groundY - buildingPosition[1]
+
       emitter.emit(`grid:${eventType}` as any, {
         nativeEvent: nativeEvent.nativeEvent as any,
-        position: [worldX, floorplanGridWorldY, worldZ],
-        localPosition: [planPoint[0], floorplanGridLocalY, planPoint[1]],
+        position: [worldX, worldY, worldZ],
+        localPosition: [planPoint[0], localY, planPoint[1]],
       })
     },
     [buildingPosition, buildingRotationY, floorplanGridLocalY, floorplanGridWorldY],
@@ -9093,9 +9137,14 @@ export function FloorplanPanel({
           (rotationState.startClientX - event.clientX) * FLOORPLAN_ROTATION_DEGREES_PER_PIXEL
         const nextUserRotationDeg = rotationState.initialUserRotationDeg + angleDeltaDeg
 
-        smoothFloorplanNavigationView(rotationState.viewportCenterLocal, nextUserRotationDeg)
-        publishFloorplanNavigationPose(rotationState.viewportCenterLocal, nextUserRotationDeg)
-        setCursorPoint(null)
+        applyFloorplanRotationImperatively(rotationState, nextUserRotationDeg)
+        if (useEditor.getState().viewMode === 'split') {
+          publishFloorplanNavigationPose(
+            rotationState.viewportCenterLocal,
+            nextUserRotationDeg,
+            rotationState.latestViewport.width,
+          )
+        }
         return
       }
 
@@ -9105,8 +9154,11 @@ export function FloorplanPanel({
 
         const deltaX = event.clientX - panStateRef.current.clientX
         const deltaY = event.clientY - panStateRef.current.clientY
-        const worldPerPixelX = viewBox.width / surfaceSize.width
-        const worldPerPixelY = viewBox.height / surfaceSize.height
+        const currentViewport = latestViewportRef.current ?? latestFittedViewportRef.current
+        if (!currentViewport) return
+        const currentHeight = currentViewport.width / svgAspectRatio
+        const worldPerPixelX = currentViewport.width / surfaceSize.width
+        const worldPerPixelY = currentHeight / surfaceSize.height
 
         const nextCenterSvg = {
           x: panStateRef.current.centerSvg.x - deltaX * worldPerPixelX,
@@ -9117,8 +9169,20 @@ export function FloorplanPanel({
           FLOORPLAN_VIEW_ROTATION_DEG + currentUserRotationDeg - buildingRotationDeg
         const localCenter = rotateSvgPoint(nextCenterSvg, -currentSceneRotationDeg)
 
-        smoothFloorplanNavigationView(localCenter, currentUserRotationDeg)
-        publishFloorplanNavigationPose(localCenter, currentUserRotationDeg)
+        const nextViewport = {
+          centerX: nextCenterSvg.x,
+          centerY: nextCenterSvg.y,
+          width: currentViewport.width,
+        }
+        applyFloorplanViewportImperatively(nextViewport)
+        floorplanPanPoseRef.current = {
+          localCenter,
+          userRotationDeg: currentUserRotationDeg,
+          viewWidth: currentViewport.width,
+        }
+        if (useEditor.getState().viewMode === 'split') {
+          publishFloorplanNavigationPose(localCenter, currentUserRotationDeg, currentViewport.width)
+        }
 
         panStateRef.current = {
           pointerId: event.pointerId,
@@ -9134,10 +9198,6 @@ export function FloorplanPanel({
         return
       }
 
-      if (elevatorResizeDragState?.pointerId === event.pointerId) {
-        return
-      }
-
       if (wallEndpointDragRef.current?.pointerId === event.pointerId) {
         return
       }
@@ -9458,6 +9518,8 @@ export function FloorplanPanel({
     },
     [
       buildingRotationDeg,
+      applyFloorplanViewportImperatively,
+      applyFloorplanRotationImperatively,
       draftStart,
       ceilingDraftPoints,
       emitFloorplanWallLeave,
@@ -9486,15 +9548,12 @@ export function FloorplanPanel({
       isWallBuildActive,
       levelId,
       publishFloorplanNavigationPose,
-      smoothFloorplanNavigationView,
       referenceScaleDraft,
       roofDraftStart,
-      elevatorResizeDragState,
       siteVertexDragState,
       surfaceSize.height,
       surfaceSize.width,
-      viewBox.height,
-      viewBox.width,
+      svgAspectRatio,
       walls,
       setCursorPoint,
       setDraftEnd,
@@ -9519,16 +9578,32 @@ export function FloorplanPanel({
       if (firstPoint && slabDraftPoints.length >= 3 && isPointNearPlanPoint(point, firstPoint)) {
         // 2D-only view: the 3D tool can't commit, so close the polygon here.
         if (useEditor.getState().viewMode === '2d') {
-          createSlabOnCurrentLevel(slabDraftPoints)
+          createSlabOnCurrentLevel(slabDraftPoints, slabPlacementBaseRef.current)
         }
         clearDraft()
         return
       }
 
+      if (slabDraftPoints.length === 0) {
+        const recessed = useEditor.getState().toolDefaults.slab?.recessed === true
+        if (!levelId || recessed) {
+          slabPlacementBaseRef.current = null
+        } else {
+          const support = spatialGridManager.getPointedSupportSurface(
+            levelId,
+            [point[0], 1_000_000, point[1]],
+            [0, -1, 0],
+          )
+          slabPlacementBaseRef.current =
+            support.slabId != null
+              ? support.elevation
+              : terrainSupportLift(useScene.getState().nodes, levelId, point[0], point[1])
+        }
+      }
       setSlabDraftPoints((currentPoints) => [...currentPoints, point])
       setCursorPoint(point)
     },
-    [clearDraft, createSlabOnCurrentLevel, slabDraftPoints, setCursorPoint],
+    [clearDraft, createSlabOnCurrentLevel, levelId, slabDraftPoints, setCursorPoint],
   )
   const handleSlabPlacementConfirm = useCallback(
     (point?: WallPlanPoint) => {
@@ -9553,7 +9628,7 @@ export function FloorplanPanel({
 
       // 2D-only view: the 3D tool can't commit, so create the slab here.
       if (useEditor.getState().viewMode === '2d') {
-        createSlabOnCurrentLevel(nextPoints)
+        createSlabOnCurrentLevel(nextPoints, slabPlacementBaseRef.current)
       }
       clearDraft()
     },
@@ -9660,6 +9735,14 @@ export function FloorplanPanel({
   const handleWallPlacementPoint = useCallback(
     (point: WallPlanPoint) => {
       if (!draftStart) {
+        wallConstructionOptionsRef.current = levelId
+          ? resolveTerrainWallConstructionOptions(
+              useScene.getState().nodes,
+              levelId,
+              point,
+              useEditor.getState().toolDefaults.wall,
+            )
+          : undefined
         setDraftStart(point)
         setWallChainFirstVertex(point)
         setDraftEnd(point)
@@ -9686,7 +9769,14 @@ export function FloorplanPanel({
       // ceiling 2D-only committers: create locally here, gated on the
       // view, so split / 3D keep their single-owner tool commit.
       const viewIs2DOnly = useEditor.getState().viewMode === '2d'
-      const createdWall = viewIs2DOnly ? createWallOnCurrentLevel(draftStart, point) : null
+      let createdWall: WallNode | null = null
+      if (viewIs2DOnly) {
+        createdWall = createWallOnCurrentLevel(
+          draftStart,
+          point,
+          wallConstructionOptionsRef.current,
+        )
+      }
       if (createdWall) {
         wallChainWallIdsRef.current.push(createdWall.id)
       }
@@ -9753,21 +9843,7 @@ export function FloorplanPanel({
     ],
   )
   const { getFloorplanHitIdAtPoint, getFloorplanSelectionIdsInBounds } = useFloorplanHitTesting({
-    ceilingPolygons: displayCeilingPolygons,
-    columnPolygons: floorplanColumnEntries,
-    displaySlabPolygons,
-    displayWallPolygons,
-    floorplanElevatorEntries,
-    floorplanItemEntries,
-    floorplanOpeningHitTolerance,
-    floorplanRoofEntries,
-    floorplanStairEntries,
-    floorplanWallHitTolerance,
-    getOpeningCenterLine,
-    isFloorplanItemContextActive,
-    openingsPolygons,
-    phase,
-    toPoint2D,
+    sceneRef: floorplanSceneRef,
   })
   // Wall-commit snap for the placement hook. Mirrors the move-preview branch:
   // it honours the Magnetic snap toggle so a click never snaps to geometry the
@@ -9907,8 +9983,6 @@ export function FloorplanPanel({
         modifierKeys,
         planPoint,
         structureLayer,
-        toPoint2D,
-        visibleZonePolygons,
       })
 
       if (backgroundSelection.handled) {
@@ -9973,7 +10047,6 @@ export function FloorplanPanel({
       structureLayer,
       getFloorplanHitIdAtPoint,
       unit,
-      visibleZonePolygons,
       emitFloorplanGridEvent,
       setCursorPoint,
     ],
@@ -10623,7 +10696,6 @@ export function FloorplanPanel({
         !panStateRef.current &&
         !floorplanRotationStateRef.current &&
         !guideInteractionRef.current &&
-        !elevatorResizeDragState &&
         !wallEndpointDragRef.current &&
         !siteVertexDragState
       ) {
@@ -10651,7 +10723,6 @@ export function FloorplanPanel({
       handlePointerMove,
       hasFloorplanCursorIndicator,
       isSpacePanPressed,
-      elevatorResizeDragState,
       siteVertexDragState,
       setFloorplanCursorPosition,
     ],
@@ -10879,11 +10950,13 @@ export function FloorplanPanel({
       event.preventDefault()
       event.stopPropagation()
 
+      floorplanNavigationSyncScheduler.flush()
       const widthFactor = Math.exp(event.deltaY * (event.ctrlKey ? 0.003 : 0.0015))
       zoomViewportAtClientPoint(event.clientX, event.clientY, widthFactor)
     }
 
     const handleGestureStart = (event: Event) => {
+      floorplanNavigationSyncScheduler.flush()
       const gestureEvent = event as GestureLikeEvent
       gestureScaleRef.current = gestureEvent.scale ?? 1
       event.preventDefault()
@@ -10910,6 +10983,7 @@ export function FloorplanPanel({
 
     const handleGestureEnd = (event: Event) => {
       gestureScaleRef.current = 1
+      commitFloorplanZoom()
       event.preventDefault()
       event.stopPropagation()
     }
@@ -10929,7 +11003,7 @@ export function FloorplanPanel({
       svg.removeEventListener('gesturechange', handleGestureChange)
       svg.removeEventListener('gestureend', handleGestureEnd)
     }
-  }, [zoomViewportAtClientPoint])
+  }, [commitFloorplanZoom, floorplanNavigationSyncScheduler, zoomViewportAtClientPoint])
 
   const restoreGroundLevelStructureSelection = useCallback(() => {
     const sceneNodes = useScene.getState().nodes
@@ -11047,7 +11121,7 @@ export function FloorplanPanel({
       ref={containerRef}
     >
       <FloorplanSiteKeyHandler onRestoreGroundLevel={restoreGroundLevelStructureSelection} />
-      <div className="relative min-h-0 flex-1" ref={viewportHostRef}>
+      <div className="relative min-h-0 flex-1 bg-white" ref={viewportHostRef}>
         <FloorplanCursorIndicator
           cursorColor={floorplanCursorColor}
           floorplanSelectionTool={floorplanSelectionTool}
@@ -11134,7 +11208,12 @@ export function FloorplanPanel({
                 Drawn line
               </div>
               <div className="mt-1 font-medium text-sm">
-                {formatMeasurement(pendingReferenceScale.measuredLengthUnits, unit)}
+                {formatMeasurement(
+                  pendingReferenceScale.measuredLengthUnits,
+                  unit,
+                  null,
+                  metricNotation,
+                )}
               </div>
             </div>
 
@@ -11220,6 +11299,7 @@ export function FloorplanPanel({
           // panel, so pan/zoom is preserved across the toggle.
           <svg
             className="h-full w-full touch-none"
+            data-pascal-floorplan-2d
             onClick={isMarqueeSelectionToolActive ? undefined : handleSvgClick}
             onContextMenu={(event) => event.preventDefault()}
             onDoubleClick={isMarqueeSelectionToolActive ? undefined : handleBackgroundDoubleClick}
@@ -11233,8 +11313,9 @@ export function FloorplanPanel({
             style={{
               cursor:
                 floorplanNavigationCursor ?? (referenceScaleDraft ? 'crosshair' : EDITOR_CURSOR),
+              overflow: 'visible',
             }}
-            viewBox={`${viewBox.minX} ${viewBox.minY} ${viewBox.width} ${viewBox.height}`}
+            viewBox={`${presentationViewBox.minX} ${presentationViewBox.minY} ${presentationViewBox.width} ${presentationViewBox.height}`}
           >
             <defs>
               <pattern
@@ -11272,10 +11353,11 @@ export function FloorplanPanel({
             </defs>
             <rect
               fill={palette.surface}
-              height={viewBox.height}
-              width={viewBox.width}
-              x={viewBox.minX}
-              y={viewBox.minY}
+              height={presentationPaintViewBox.height}
+              ref={floorplanBackgroundRef}
+              width={presentationPaintViewBox.width}
+              x={presentationPaintViewBox.minX}
+              y={presentationPaintViewBox.minY}
             />
 
             <g
@@ -11337,7 +11419,7 @@ export function FloorplanPanel({
               {isMarqueeSelectionToolActive && (
                 <rect
                   fill="transparent"
-                  height={viewBox.height}
+                  height={presentationViewBox.height}
                   onClick={(event) => {
                     event.preventDefault()
                     event.stopPropagation()
@@ -11351,25 +11433,18 @@ export function FloorplanPanel({
                   onPointerMove={handleMarqueePointerMove}
                   onPointerUp={handleMarqueePointerUp}
                   style={{ cursor: EDITOR_CURSOR }}
-                  width={viewBox.width}
-                  x={viewBox.minX}
-                  y={viewBox.minY}
+                  width={presentationViewBox.width}
+                  x={presentationViewBox.minX}
+                  y={presentationViewBox.minY}
                 />
               )}
 
-              {/* Registry-driven floor-plan layer. Iterates kinds whose
-                  NodeDefinition supplies a `floorplan` builder and renders
-                  their SVG via <FloorplanGeometryRenderer>. Sits above the
-                  legacy inline content so newly-registered kinds (shelf
-                  today) overlay on top until their inline equivalent is
-                  removed in their Phase 5 migration PR.
-
-                  Wrapped in <FloorplanRenderProvider> so registry-driven
-                  kinds receive the same themed palette / units-per-pixel
-                  the legacy layers compute. The hatch pattern id is the
-                  legacy wall hatch — kinds that opt into selection hatch
-                  fills reuse this <defs> pattern via fill="url(...)". */}
+              {/* Registry-driven floor-plan layer. Every committed node kind
+                  supplies its geometry through `NodeDefinition.floorplan`.
+                  The provider carries editor presentation data—palette,
+                  scale, rotation, and the shared selection-hatch pattern. */}
               <FloorplanRenderProvider
+                getSceneRotationDeg={getFloorplanSceneRotationDeg}
                 hatchPatternId={wallSelectionHatchId}
                 palette={floorplanRegistryPalette}
                 sceneRotationDeg={floorplanSceneRotationDeg}
@@ -11396,6 +11471,8 @@ export function FloorplanPanel({
                   <FloorplanWallMoveGhostLayer />
                 </g>
                 <FloorplanMeasurementToolLayer />
+                <FloorplanRegisteredToolLayer />
+                {floorplanSceneSlot}
               </FloorplanRenderProvider>
               {/* Cursor-driven placement ghost for movingNode when the
                   active kind is registry-driven. Renders via a portal
@@ -11506,13 +11583,6 @@ export function FloorplanPanel({
                 walls={walls}
               />
 
-              {/* Wall / fence endpoint, wall curve, slab / ceiling /
-                  zone vertex+midpoint+edge handles are all driven by the
-                  registry's `def.floorplanAffordances` and rendered as
-                  part of `FloorplanRegistryLayer`. The legacy handle
-                  layers that lived here received empty handle arrays
-                  post-migration and rendered nothing. */}
-
               {selectedGuide && showGuides && (
                 <FloorplanGuideSelectionOverlay
                   guide={selectedGuide}
@@ -11564,12 +11634,12 @@ export function FloorplanPanel({
             {isFloorplanNavigationOverlayVisible && (
               <rect
                 fill="transparent"
-                height={viewBox.height}
+                height={presentationViewBox.height}
                 pointerEvents="all"
                 style={{ cursor: floorplanNavigationCursor ?? 'grab' }}
-                width={viewBox.width}
-                x={viewBox.minX}
-                y={viewBox.minY}
+                width={presentationViewBox.width}
+                x={presentationViewBox.minX}
+                y={presentationViewBox.minY}
               />
             )}
           </svg>