@pascal-app/editor 1.0.3 → 1.0.5

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

@@ -5,10 +5,12 @@ import {
   type AnyNode,
   type AnyNodeId,
   type BuildingNode,
+  type CameraControlFrameEvent,
   type CeilingNode,
   CeilingNode as CeilingNodeSchema,
   type ColumnNode,
   calculateLevelMiters,
+  createSizedStairFlight,
   DEFAULT_ANGLE_STEP,
   type DoorNode,
   DoorNode as DoorNodeSchema,
@@ -17,7 +19,6 @@ import {
   type FenceNode,
   type FloorplanGeometry,
   type GeometryContext,
-  type GridEvent,
   type GuideNode,
   getRenderableSlabPolygon,
   getWallChordFrame,
@@ -27,6 +28,7 @@ import {
   isCurvedWall,
   type LevelNode,
   loadAssetUrl,
+  newZone,
   nodeRegistry,
   normalizeWallCurveOffset,
   type Point2D,
@@ -40,7 +42,6 @@ import {
   SlabNode as SlabNodeSchema,
   type StairNode,
   StairNode as StairNodeSchema,
-  StairSegmentNode as StairSegmentNodeSchema,
   sampleWallCenterline,
   sceneRegistry,
   snapPointAlongAngleRay,
@@ -56,14 +57,13 @@ import {
   WindowNode as WindowNodeSchema,
   wallClosesRoom,
   wallRectangleCorners,
-  ZoneNode as ZoneNodeSchema,
-  type ZoneNode as ZoneNodeType,
 } from '@pascal-app/core'
 import { useSegmentDraftChain, useWallSnapIndicator } from '@pascal-app/editor'
 import { getSceneTheme, useViewer } from '@pascal-app/viewer'
 import { Command, Ruler } from 'lucide-react'
 import {
   type ComponentProps,
+  type CSSProperties,
   memo,
   type MouseEvent as ReactMouseEvent,
   type ReactNode,
@@ -78,11 +78,15 @@ import {
 import { createPortal } from 'react-dom'
 import { Vector3 } from 'three'
 import { useShallow } from 'zustand/react/shallow'
+import {
+  hoverRoomFromHit,
+  resolvePlanRoomHit,
+  roomPickingEnabled,
+} from '../../hooks/use-selected-room'
 import { resolveCeilingPlanPointSnap } from '../../lib/ceiling-plan-snap'
 import {
   alignFloorplanDraftPoint,
   buildFloorplanItemEntry,
-  buildFloorplanStairEntry as buildSharedFloorplanStairEntry,
   collectLevelDescendants,
   FLOORPLAN_VIEW_ROTATION_DEG,
   floorplanLocalToWorldPoint,
@@ -91,29 +95,59 @@ import {
   type FloorplanNodeTransform as SharedFloorplanNodeTransform,
   worldToFloorplanLocalPoint,
 } from '../../lib/floorplan'
+import { buildFloorplanContext } from '../../lib/floorplan/floorplan-readonly'
+// Site-plan view. Owned under `lib/floorplan/site-plan/**`; this panel
+// only chooses between it and the registry layer, and mounts the switch.
+import {
+  FloorplanDrawingTypeSwitch,
+  useSitePlanAvailable,
+} from '../../lib/floorplan/site-plan/drawing-type-switch'
+import { FloorplanSitePlanLayer } from '../../lib/floorplan/site-plan/site-plan-layer'
 import { resolveGenericFloorplanGridEventPoint } from '../../lib/floorplan-grid-event-point'
 import type { EditorGridEvent } from '../../lib/grid-event-presentation'
 import { groundHeightAt } from '../../lib/ground-surface'
 import { guideEmitter } from '../../lib/guide-events'
 import {
   acceptsKeyboardPan,
+  advanceKeyboardPanMotion,
   clearKeyboardPanKeys,
+  createKeyboardPanMotion,
   isKeyboardPanKey,
   type KeyboardPanState,
-  keyboardPanDirection,
   keyboardPanSpeed,
+  resetKeyboardPanMotion,
   setKeyboardPanKey,
+  syncKeyboardPanMotion,
 } from '../../lib/keyboard-pan'
 import { measurementHint, parseMeasurement } from '../../lib/measurement-parser'
 import { formatLinearMeasurement, linearUnitToMeters } from '../../lib/measurements'
+import { snapRegisteredDraftPoint } from '../../lib/registered-draft-snap'
+import { selectRoomFromHit } from '../../lib/room-selection-commands'
+import { enterBuildingFromPlanHit } from '../../lib/selection-routing'
 import { sfxEmitter } from '../../lib/sfx-bus'
 import { SITE_BOUNDARY_DRAG_LABEL, siteBoundaryHandlesEnabled } from '../../lib/site-boundary'
 import { resolveSlabPlanPointSnap } from '../../lib/slab-plan-snap'
-import { cancelPendingZonePaint, focusedUnitNode, paintZoneMembership } from '../../lib/units'
+import {
+  cancelPendingZonePaint,
+  focusedUnitNode,
+  paintZoneMembership,
+  zoneAtLevelPoint,
+} from '../../lib/units'
 import { cn } from '../../lib/utils'
+import { framingAnimates } from '../../lib/viewer-selection'
+import { getWallDrawVariant } from '../../lib/wall-draw-variant'
+import {
+  addWallPolygonDraftCorner,
+  commitWallPolygonDraft,
+  discardWallPolygonDraft,
+  startWallPolygonDraft,
+  wallPolygonDraftWalls,
+} from '../../lib/wall-polygon-draft'
 import { snapBuildingLocalToWorldGrid } from '../../lib/world-grid-snap'
+import { nextZoneName } from '../../lib/zone-name'
 import { subscribeNavigationSyncPose } from '../../store/navigation-sync-pose-store'
 import useAlignmentGuides from '../../store/use-alignment-guides'
+import useDrawingView from '../../store/use-drawing-view'
 import type { GuideUiState, NavigationSyncPose } from '../../store/use-editor'
 import useEditor, {
   isAngleSnapActive,
@@ -132,11 +166,19 @@ import useInteractionScope, {
 import usePlacementPreview from '../../store/use-placement-preview'
 import { expandSessionSelectionForNode } from '../../store/use-session-groups'
 import { useStairBuildPreview } from '../../store/use-stair-build-preview'
+import {
+  activeViewLayout,
+  isViewVisible,
+  VIEW_2D,
+  VIEW_3D,
+  visibleScene,
+} from '../../store/view-layout'
 import { FloorplanAlignmentGuideLayer } from '../editor-2d/floorplan-alignment-guide-layer'
 import { FloorplanCursorIndicatorOverlay as Editor2dFloorplanCursorIndicatorOverlay } from '../editor-2d/floorplan-cursor-indicator-overlay'
 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 { FloorplanOpenWallEndsLayer } from '../editor-2d/floorplan-open-wall-ends-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'
@@ -147,7 +189,7 @@ import {
 import { FloorplanSnapBeaconLayer } from '../editor-2d/floorplan-snap-beacon-layer'
 import { FloorplanWallMoveGhostLayer } from '../editor-2d/floorplan-wall-move-ghost-layer'
 import { FloorplanDraftLayer } from '../editor-2d/renderers/floorplan-draft-layer'
-import { FloorplanDraftWallMeasurement } from '../editor-2d/renderers/floorplan-draft-wall-measurement'
+import { FloorplanDraftMeasurement } from '../editor-2d/renderers/floorplan-draft-measurement'
 import { FloorplanGeometryRenderer } from '../editor-2d/renderers/floorplan-geometry-renderer'
 import { FloorplanMarqueeLayer } from '../editor-2d/renderers/floorplan-marquee-layer'
 import { FloorplanPlacementPreviewLayer } from '../editor-2d/renderers/floorplan-placement-preview-layer'
@@ -155,10 +197,8 @@ import {
   FloorplanRegistryLayer,
   RotationAngleOverlay,
 } from '../editor-2d/renderers/floorplan-registry-layer'
-import { FloorplanStairLayer } from '../editor-2d/renderers/floorplan-stair-layer'
 import { FloorplanVoronoiLayer } from '../editor-2d/renderers/floorplan-voronoi-layer'
-import { buildSvgPolylinePath, formatPolygonPath, getArcPlanPoint } from '../editor-2d/svg-paths'
-import { snapFenceDraftPoint } from '../tools/fence/fence-drafting'
+import { buildSvgPolylinePath, formatPolygonPath } from '../editor-2d/svg-paths'
 import { snapToHalf } from '../tools/item/placement-math'
 import {
   isBoxSelectPointerSuppressed,
@@ -188,15 +228,6 @@ import {
   getAngleToSegmentReference,
   getSegmentAngleReferenceAtPoint,
 } from '../tools/shared/segment-angle'
-import {
-  DEFAULT_STAIR_ATTACHMENT_SIDE,
-  DEFAULT_STAIR_FILL_TO_FLOOR,
-  DEFAULT_STAIR_HEIGHT,
-  DEFAULT_STAIR_LENGTH,
-  DEFAULT_STAIR_STEP_COUNT,
-  DEFAULT_STAIR_THICKNESS,
-  DEFAULT_STAIR_WIDTH,
-} from '../tools/stair/stair-defaults'
 import {
   chainEndJoinsExistingWall,
   createWallOnCurrentLevel,
@@ -208,8 +239,6 @@ import {
   WALL_JOIN_SNAP_RADIUS,
   type WallPlanPoint,
 } from '../tools/wall/wall-drafting'
-
-import { PALETTE_COLORS } from '../ui/primitives/color-dot'
 import { FloorplanCompassButton } from '../viewer/floorplan-compass-button'
 import { resolveFloorplanBackgroundSelection } from './floorplan-background-selection'
 import {
@@ -232,6 +261,7 @@ import {
 import { useFloorplanBackgroundPlacement } from './use-floorplan-background-placement'
 import { useFloorplanHitTesting } from './use-floorplan-hit-testing'
 import { useFloorplanSceneData } from './use-floorplan-scene-data'
+import { sceneSpan } from './views/scene-region'
 
 const FALLBACK_VIEW_SIZE = 12
 const FLOORPLAN_PADDING = 2
@@ -282,7 +312,6 @@ const FLOORPLAN_HOVER_TRANSITION = 'opacity 180ms cubic-bezier(0.2, 0, 0, 1)'
 const FLOORPLAN_WALL_HIT_STROKE_WIDTH = 18
 const FLOORPLAN_WALL_STROKE_WIDTH = '1'
 const FLOORPLAN_OPENING_HIT_STROKE_WIDTH = 16
-const noopFloorplanStairHandler = () => {}
 const FLOORPLAN_OPENING_STROKE_WIDTH = 0.05
 const FLOORPLAN_ENDPOINT_HIT_STROKE_WIDTH = 18
 const FLOORPLAN_ENDPOINT_HOVER_GLOW_STROKE_WIDTH = 16
@@ -2124,68 +2153,6 @@ function movePlanPointTowards(start: Point2D, end: Point2D, distance: number): P
   return interpolatePlanPoint(start, end, Math.min(1, distance / totalDistance))
 }
 
-function getNormalizedFloorplanStairSweepAngle(stair: StairNode) {
-  const stairType = stair.stairType ?? 'straight'
-  const baseSweepAngle = stair.sweepAngle ?? (stairType === 'spiral' ? Math.PI * 2 : Math.PI / 2)
-
-  if (Math.abs(baseSweepAngle) >= Math.PI * 2) {
-    return Math.sign(baseSweepAngle || 1) * (Math.PI * 2 - 0.001)
-  }
-
-  return baseSweepAngle
-}
-
-function getFloorplanSpiralLandingSweep(stair: StairNode, sweepAngle: number) {
-  if (
-    (stair.stairType ?? 'straight') !== 'spiral' ||
-    (stair.topLandingMode ?? 'none') !== 'integrated'
-  ) {
-    return 0
-  }
-
-  const innerRadius = Math.max(0.05, stair.innerRadius ?? 0.9)
-  const width = Math.max(stair.width ?? 1, 0.4)
-  const landingDepth = Math.max(0.3, stair.topLandingDepth ?? Math.max(width * 0.9, 0.8))
-
-  return (
-    Math.min(Math.PI * 0.75, landingDepth / Math.max(innerRadius + width / 2, 0.1)) *
-    Math.sign(sweepAngle || 1)
-  )
-}
-
-function getFloorplanCurvedStairHitPolygon(stair: StairNode): Point2D[] {
-  const stairType = stair.stairType ?? 'straight'
-  const sweepAngle = getNormalizedFloorplanStairSweepAngle(stair)
-  const startAngle = -stair.rotation - sweepAngle / 2
-  const endAngle = startAngle + sweepAngle + getFloorplanSpiralLandingSweep(stair, sweepAngle)
-  const center = {
-    x: stair.position[0],
-    y: stair.position[2],
-  }
-  const innerRadius = Math.max(
-    stairType === 'spiral' ? 0.05 : 0.2,
-    stair.innerRadius ?? (stairType === 'spiral' ? 0.2 : 0.9),
-  )
-  const outerRadius = innerRadius + stair.width
-  const outerArcLength = Math.abs(sweepAngle) * outerRadius
-  const segmentCount = Math.max(
-    24,
-    Math.ceil(Math.abs(sweepAngle) / (Math.PI / 24)),
-    Math.ceil(outerArcLength / 0.14),
-  )
-  const outerPoints: Point2D[] = []
-  const innerPoints: Point2D[] = []
-
-  for (let index = 0; index <= segmentCount; index += 1) {
-    const t = index / segmentCount
-    const angle = startAngle + (endAngle - startAngle) * t
-    outerPoints.push(getArcPlanPoint(center, outerRadius, angle))
-    innerPoints.push(getArcPlanPoint(center, innerRadius, angle))
-  }
-
-  return [...outerPoints, ...innerPoints.reverse()]
-}
-
 function isPointInsidePolygonWithHoles(
   point: Point2D,
   polygon: Point2D[],
@@ -4226,107 +4193,57 @@ const FloorplanPolygonHandleLayer = memo(function FloorplanPolygonHandleLayer({
   )
 })
 
-// Static segment for the in-flight stair build preview. No per-render
-// dependency (the geometry only moves / rotates), so it lives at module scope
-// instead of a `useMemo`.
-const FLOORPLAN_PREVIEW_STAIR_SEGMENT = StairSegmentNodeSchema.parse({
-  id: 'sseg_floorplan_preview',
-  segmentType: 'stair',
-  width: DEFAULT_STAIR_WIDTH,
-  length: DEFAULT_STAIR_LENGTH,
-  height: DEFAULT_STAIR_HEIGHT,
-  stepCount: DEFAULT_STAIR_STEP_COUNT,
-  attachmentSide: DEFAULT_STAIR_ATTACHMENT_SIDE,
-  fillToFloor: DEFAULT_STAIR_FILL_TO_FLOOR,
-  thickness: DEFAULT_STAIR_THICKNESS,
-  position: [0, 0, 0],
-  metadata: { isTransient: true, isFloorplanPreview: true },
-})
-
-const EMPTY_FLOORPLAN_ID_SET: ReadonlySet<string> = new Set()
-
-type FloorplanStairLayerPalette = ComponentProps<typeof FloorplanStairLayer>['palette']
-
-// Leaf layer for the stair tool's in-flight 2D build preview. Subscribes to the
-// `useStairBuildPreview` store directly so a per-`grid:move` point update (or an
-// R/T rotation) re-renders ONLY this tiny layer — never the ~120-220ms
-// `FloorplanPanel`. This mirrors how column / elevator placement stays smooth by
-// routing preview state through a store + leaf. Committed stairs render through
-// `FloorplanRegistryLayer`; this layer is non-interactive (noop handlers, empty
-// hit sets), so it never participates in hover / select.
 function FloorplanStairBuildPreviewLayer({
   palette,
-  isDeleteMode,
 }: {
-  palette: FloorplanStairLayerPalette
-  isDeleteMode: boolean
+  palette: FloorplanRenderContextValue['palette']
 }) {
-  const phase = useEditor((s) => s.phase)
   const mode = useEditor((s) => s.mode)
   const tool = useEditor((s) => s.tool)
   const point = useStairBuildPreview((s) => s.point)
   const rotation = useStairBuildPreview((s) => s.rotation)
-  const isActive = phase === 'structure' && mode === 'build' && tool === 'stair'
+  const rise = useStairBuildPreview((s) => s.rise)
+  const length = useStairBuildPreview((s) => s.length)
+  const stepCount = useStairBuildPreview((s) => s.stepCount)
+  const isActive = mode === 'build' && tool === 'stair'
 
-  const previewEntry = useMemo(() => {
-    if (!(isActive && point)) {
+  const previewGeometry = useMemo(() => {
+    if (!(isActive && point && rise && rise > 0)) {
       return null
     }
+    const previewSegment = {
+      ...createSizedStairFlight(rise),
+      ...(length !== null ? { length } : {}),
+      ...(stepCount !== null ? { stepCount } : {}),
+      id: 'sseg_floorplan_preview' as const,
+      parentId: 'stair_floorplan_preview' as const,
+    }
     const previewStair = StairNodeSchema.parse({
       id: 'stair_floorplan_preview',
       name: 'Staircase preview',
       position: [point[0], 0, point[1]],
       rotation,
-      children: [FLOORPLAN_PREVIEW_STAIR_SEGMENT.id],
+      children: [previewSegment.id],
       metadata: { isTransient: true, isFloorplanPreview: true },
     })
-    const entry = buildSharedFloorplanStairEntry(previewStair, [FLOORPLAN_PREVIEW_STAIR_SEGMENT])
-    if (!entry) {
-      return null
-    }
-    const hitPolygons =
-      (previewStair.stairType ?? 'straight') === 'straight'
-        ? entry.segments.map((segmentEntry) => segmentEntry.polygon)
-        : [getFloorplanCurvedStairHitPolygon(previewStair)]
-
-    return {
-      ...entry,
-      hitPolygons,
-      segments: entry.segments.map((segmentEntry) => ({
-        ...segmentEntry,
-        innerPoints: formatPolygonPoints(segmentEntry.innerPolygon),
-        points: formatPolygonPoints(segmentEntry.polygon),
-        treadBars: segmentEntry.treadBars.map((polygon) => ({
-          points: formatPolygonPoints(polygon),
-          polygon,
-        })),
-      })),
-    }
-  }, [isActive, point, rotation])
-
-  if (!previewEntry) {
-    return null
-  }
+    const nodes = { [previewStair.id]: previewStair, [previewSegment.id]: previewSegment }
+    return (
+      nodeRegistry.get(previewStair.type)?.floorplan?.(
+        previewStair,
+        buildFloorplanContext(previewStair, nodes, {
+          selected: false,
+          highlighted: false,
+          hovered: false,
+          moving: true,
+          unit: 'metric',
+          palette,
+        }),
+      ) ?? null
+    )
+  }, [isActive, point, rotation, rise, length, stepCount, palette])
 
-  return (
-    <FloorplanStairLayer
-      canFocusStairs={false}
-      canSelectStairs={false}
-      cursor={EDITOR_CURSOR}
-      highlightedIdSet={EMPTY_FLOORPLAN_ID_SET}
-      hitStrokeWidth={FLOORPLAN_OPENING_HIT_STROKE_WIDTH}
-      hoveredStairId={null}
-      isDeleteMode={isDeleteMode}
-      onStairDoubleClick={noopFloorplanStairHandler}
-      onStairHoverChange={noopFloorplanStairHandler}
-      onStairHoverEnter={noopFloorplanStairHandler}
-      onStairPointerDown={noopFloorplanStairHandler}
-      onStairSelect={noopFloorplanStairHandler}
-      palette={palette}
-      selectedIdSet={EMPTY_FLOORPLAN_ID_SET}
-      stairEntries={[previewEntry]}
-    />
-  )
+  if (!previewGeometry) return null
+  return <FloorplanGeometryRenderer geometry={previewGeometry} pointerEventsOverride="none" />
 }
 
 // Leaf overlay for the cursor-following draft preview: the cursor crosshair plus
@@ -4530,6 +4447,7 @@ function FloorplanLinearDraftLayer({
   const roofDraftEnd = useFloorplanDraftPreview((s) => s.roofDraftEnd)
   const roofDraftQuarterTurn = useFloorplanDraftPreview((s) => s.roofDraftQuarterTurn)
   const wallRectangleDraftStart = useFloorplanDraftPreview((s) => s.wallRectangleDraftStart)
+  const wallPolygonDraftPoints = useFloorplanDraftPreview((s) => s.wallPolygonDraftPoints)
   // The live cursor is the rectangle's opposite corner; select it only while a
   // rectangle draft is open so idle moves don't re-render this layer.
   const wallRectangleDraftEnd = useFloorplanDraftPreview((s) =>
@@ -4599,6 +4517,20 @@ function FloorplanLinearDraftLayer({
     wallRectangleDraftStart,
   ])
 
+  // An open Polygon room's placed sides — draft state, drawn like the
+  // rectangle draft (mitered together) until the polygon is written.
+  const polygonRoomDraft = useMemo(() => {
+    if (!(levelId && isWallBuildActive && wallPolygonDraftPoints.length >= 2)) return null
+    const draftWalls = wallPolygonDraftPoints.slice(1).map((end, index) =>
+      getSharedFloorplanWall({
+        ...buildDraftWall(levelId, wallPolygonDraftPoints[index]!, end),
+        id: `wall_polygon_draft_${index}` as WallNode['id'],
+      }),
+    )
+    const miterData = calculateLevelMiters(draftWalls)
+    return draftWalls.map((wall) => formatPolygonPoints(getWallPlanFootprint(wall, miterData)))
+  }, [isWallBuildActive, levelId, wallPolygonDraftPoints])
+
   const draftPolygonPoints = useMemo(() => {
     if (isRoofBuildActive && roofDraftStart && roofDraftEnd) {
       const minX = Math.min(roofDraftStart[0], roofDraftEnd[0])
@@ -4831,7 +4763,7 @@ function FloorplanLinearDraftLayer({
       )}
 
       {draftWallMeasurement && (
-        <FloorplanDraftWallMeasurement
+        <FloorplanDraftMeasurement
           labelBackground={isDark ? '#0f172a' : '#ffffff'}
           labelText={isDark ? '#e2e8f0' : '#171717'}
           measurement={draftWallMeasurement}
@@ -4841,6 +4773,22 @@ function FloorplanLinearDraftLayer({
         />
       )}
 
+      {polygonRoomDraft?.map((points, index) => (
+        <FloorplanDraftLayer
+          anchorFill={draftStroke}
+          draftAnchorPoints={EMPTY_DRAFT_ANCHOR_POINTS}
+          draftFill={draftFill}
+          draftPolygonPoints={points}
+          draftStroke={draftStroke}
+          key={`polygon-room-${index}`}
+          linearDraftSegment={null}
+          polygonDraftClosingSegment={null}
+          polygonDraftPolygonPoints={null}
+          polygonDraftPolylinePoints={null}
+          unitsPerPixel={unitsPerPixel}
+        />
+      ))}
+
       {rectangleDraft?.polygons.map((points, index) => (
         <FloorplanDraftLayer
           anchorFill={draftStroke}
@@ -4858,7 +4806,7 @@ function FloorplanLinearDraftLayer({
       ))}
 
       {rectangleDraft?.measurements.map((measurement, index) => (
-        <FloorplanDraftWallMeasurement
+        <FloorplanDraftMeasurement
           key={index}
           labelBackground={isDark ? '#0f172a' : '#ffffff'}
           labelText={isDark ? '#e2e8f0' : '#171717'}
@@ -4962,6 +4910,12 @@ export function FloorplanPanel({
   const unit = useViewer((state) => state.unit)
   const metricNotation = useViewer((state) => state.metricNotation)
   const showGrid = useViewer((state) => state.showGrid)
+  // Floor plan vs. site plan. Site plan hides the level geometry and draws
+  // the lot instead — see `lib/floorplan/site-plan/site-plan-layer.tsx`. A
+  // persisted site-plan choice on a scene with no lot reads as the floor plan.
+  const sitePlanAvailable = useSitePlanAvailable()
+  const storedDrawingType = useDrawingView((state) => state.drawingType)
+  const activeDrawingType = sitePlanAvailable ? storedDrawingType : 'floor-plan'
   const showGuides = useViewer((state) => state.showGuides)
   const setShowGuides = useViewer((state) => state.setShowGuides)
   const selectedItem = useEditor((state) => state.selectedItem)
@@ -4971,8 +4925,21 @@ export function FloorplanPanel({
   // editor/index.tsx — subscribing here lets us re-fit the viewport when
   // the user closes and re-opens the 2D editor instead of restoring the
   // stale viewport from before they closed it.
-  const isFloorplanOpen = useEditor((state) => state.isFloorplanOpen)
-  const viewMode = useEditor((state) => state.viewMode)
+  const isFloorplanOpen = useEditor((state) => isViewVisible(state, VIEW_2D))
+  // The compass sits at the scene's bottom-left corner, the drawing switch
+  // beside it. With the plan in the right pane both move to its bottom-right
+  // corner (compass outermost), clear of the dock centred over the scene.
+  const planOnRight = useEditor((state) => {
+    const layout = activeViewLayout(state)
+    return layout.split && layout.panes[1] === VIEW_2D
+  })
+  // `null` while no scene view is on screen: the compass has nothing to orient.
+  const sceneLeft = useEditor((state) => sceneSpan(activeViewLayout(state))?.left ?? null)
+  // Mirrored, the pair stays left of the helper toggle in the stage's corner.
+  const compassStyle: CSSProperties = planOnRight
+    ? { right: 56 }
+    : { left: `calc(${(sceneLeft ?? 0) * 100}% + 12px)` }
+  const shownScene = useEditor(visibleScene)
   // Mirror for callbacks that fire outside React's render (the per-frame
   // navigation-pose subscriber): when the 2D panel is hidden (`display:none` in
   // 3D mode) it must NOT re-render on every camera-zoom frame.
@@ -4990,8 +4957,6 @@ export function FloorplanPanel({
   const activeHandleDrag = useActiveHandleDrag()
   const setPhase = useEditor((state) => state.setPhase)
   const setMovingNode = useEditor((state) => state.setMovingNode)
-  const structureLayer = useEditor((state) => state.structureLayer)
-  const setStructureLayer = useEditor((state) => state.setStructureLayer)
   const setTool = useEditor((state) => state.setTool)
   const tool = useEditor((state) => state.tool)
   const deleteNode = useScene((state) => state.deleteNode)
@@ -5273,12 +5238,6 @@ export function FloorplanPanel({
     height: number
   } | null>(null)
 
-  useEffect(() => {
-    if (structureLayer === 'zones' && floorplanSelectionTool === 'marquee') {
-      setFloorplanSelectionTool('click')
-    }
-  }, [floorplanSelectionTool, setFloorplanSelectionTool, structureLayer])
-
   useEffect(() => {
     setIsMacPlatform(navigator.platform.toUpperCase().includes('MAC'))
   }, [])
@@ -5792,21 +5751,21 @@ export function FloorplanPanel({
   )
 
   const isSiteEditActive = phase === 'site'
-  const isWallBuildActive = phase === 'structure' && mode === 'build' && tool === 'wall'
-  const isSlabBuildActive = phase === 'structure' && mode === 'build' && tool === 'slab'
-  const isCeilingBuildActive = phase === 'structure' && mode === 'build' && tool === 'ceiling'
-  const isZoneBuildActive = phase === 'structure' && mode === 'build' && tool === 'zone'
-  const isDoorBuildActive = phase === 'structure' && mode === 'build' && tool === 'door'
-  const isWindowBuildActive = phase === 'structure' && mode === 'build' && tool === 'window'
+  const isWallBuildActive = mode === 'build' && tool === 'wall'
+  const isSlabBuildActive = mode === 'build' && tool === 'slab'
+  const isCeilingBuildActive = mode === 'build' && tool === 'ceiling'
+  const isZoneBuildActive = mode === 'build' && tool === 'zone'
+  const isDoorBuildActive = mode === 'build' && tool === 'door'
+  const isWindowBuildActive = mode === 'build' && tool === 'window'
   const isPolygonBuildActive = isSlabBuildActive || isZoneBuildActive
   const isPolygonDraftBuildActive = isPolygonBuildActive || isCeilingBuildActive
   const isOpeningBuildActive = isDoorBuildActive || isWindowBuildActive
   const isOpeningMoveActive = movingOpeningType !== null
   const isOpeningPlacementActive = isOpeningBuildActive || isOpeningMoveActive
-  const isFenceBuildActive = phase === 'structure' && mode === 'build' && tool === 'fence'
+  const isFenceBuildActive = mode === 'build' && tool === 'fence'
   const fenceContinuation = useEditor((state) => state.continuationByContext.fence)
-  const isRoofBuildActive = phase === 'structure' && mode === 'build' && tool === 'roof'
-  const isStairBuildActive = phase === 'structure' && mode === 'build' && tool === 'stair'
+  const isRoofBuildActive = mode === 'build' && tool === 'roof'
+  const isStairBuildActive = mode === 'build' && tool === 'stair'
   const isStairMoveActive = movingNode?.type === 'stair'
   const isRoofMoveActive = movingNode?.type === 'roof' || movingNode?.type === 'roof-segment'
   const isSlabMoveActive = movingNode?.type === 'slab'
@@ -5932,12 +5891,11 @@ export function FloorplanPanel({
     mode === 'select' &&
     floorplanSelectionTool === 'marquee' &&
     !movingNode &&
-    !isFenceEndpointMoveActive &&
-    structureLayer !== 'zones'
+    !isFenceEndpointMoveActive
   const isScreenSelectionToolActive =
     mode === 'select' &&
     floorplanSelectionTool === 'click' &&
-    (phase === 'structure' || phase === 'furnish') &&
+    phase === 'building' &&
     !movingNode &&
     !isFenceEndpointMoveActive &&
     !referenceScaleDraft &&
@@ -5947,8 +5905,7 @@ export function FloorplanPanel({
     mode === 'select' &&
     floorplanSelectionTool === 'click' &&
     !movingNode &&
-    !isFenceEndpointMoveActive &&
-    structureLayer !== 'zones'
+    !isFenceEndpointMoveActive
   const canInteractElementFloorplanGeometry = isDeleteMode || canSelectElementFloorplanGeometry
   const canInteractFloorplanSlabs = isDeleteMode || canSelectElementFloorplanGeometry
   const canInteractWithGuides =
@@ -5960,42 +5917,7 @@ export function FloorplanPanel({
     mode === 'select' &&
     floorplanSelectionTool === 'click' &&
     !movingNode &&
-    !isFenceEndpointMoveActive &&
-    structureLayer === 'zones'
-  const canInteractFloorplanZones = isDeleteMode || canSelectFloorplanZones
-  const isFloorplanStructureContextActive = phase === 'structure' && structureLayer !== 'zones'
-  const isFloorplanFurnishContextActive = phase === 'furnish'
-  const isFloorplanItemContextActive =
-    isFloorplanFurnishContextActive || isFloorplanStructureContextActive
-  const canSelectFloorplanStairs =
-    (mode === 'select' &&
-      floorplanSelectionTool === 'click' &&
-      !movingNode &&
-      !isFenceEndpointMoveActive &&
-      isFloorplanStructureContextActive) ||
-    isDeleteMode
-  const canSelectFloorplanElevators = canSelectFloorplanStairs
-  const canSelectFloorplanSpawns = canSelectFloorplanStairs
-  const canSelectFloorplanItems =
-    (mode === 'select' &&
-      floorplanSelectionTool === 'click' &&
-      !movingNode &&
-      !isFenceEndpointMoveActive &&
-      isFloorplanItemContextActive) ||
-    isDeleteMode
-  const canFocusFloorplanStairs =
-    mode === 'select' &&
-    floorplanSelectionTool === 'click' &&
-    !movingNode &&
-    !isFenceEndpointMoveActive &&
-    isFloorplanStructureContextActive
-  const canFocusFloorplanSpawns = canFocusFloorplanStairs
-  const canFocusFloorplanItems =
-    mode === 'select' &&
-    floorplanSelectionTool === 'click' &&
-    !movingNode &&
-    !isFenceEndpointMoveActive &&
-    isFloorplanItemContextActive
+    !isFenceEndpointMoveActive
   const visibleSitePolygon = displaySitePolygon
   const canUseSiteBoundaryVertexHandles =
     visibleSitePolygon !== null && siteBoundaryHandlesEnabled({ mode, phase })
@@ -6772,6 +6694,58 @@ export function FloorplanPanel({
     stopFloorplanViewAnimation,
   ])
 
+  // A frame request ("show me this node") moves the 3D camera and the plan follows its pose; with no
+  // 3D view on screen no pose reaches the plan, so it frames the node itself. The request waits for
+  // the selection it came with to render: a node on another floor or in another building is placed
+  // with that building's transform, after the floor change has reset the view.
+  const [pendingFrame, setPendingFrame] = useState<CameraControlFrameEvent | null>(null)
+  useEffect(() => {
+    const frame = (event: CameraControlFrameEvent) => {
+      if (isFloorplanOpenRef.current && !isViewVisible(useEditor.getState(), VIEW_3D))
+        setPendingFrame(event)
+    }
+    emitter.on('camera-controls:frame', frame)
+    return () => emitter.off('camera-controls:frame', frame)
+  }, [])
+
+  useEffect(() => {
+    if (!pendingFrame) return
+    setPendingFrame(null)
+    const userRotationDeg = latestFloorplanUserRotationDegRef.current
+    const toLocal = (x: number, z: number) =>
+      worldToFloorplanLocalPoint(x, z, buildingPosition, buildingRotationY)
+    const { bounds, pose } = pendingFrame
+    let centre: SvgPoint
+    let width: number | undefined
+    if (bounds) {
+      // The box's corners as the plan shows them now, so it fits the pane at any turn and aspect.
+      const sceneRotationDeg = FLOORPLAN_VIEW_ROTATION_DEG + userRotationDeg - buildingRotationDeg
+      const shown = [bounds.min[0], bounds.max[0]].flatMap((x) =>
+        [bounds.min[2], bounds.max[2]].map((z) => rotateSvgPoint(toLocal(x, z), sceneRotationDeg)),
+      )
+      const xs = shown.map((point) => point.x)
+      const ys = shown.map((point) => point.y)
+      centre = toLocal((bounds.min[0] + bounds.max[0]) / 2, (bounds.min[2] + bounds.max[2]) / 2)
+      width = Math.max(
+        Math.max(...xs) - Math.min(...xs) + FLOORPLAN_PADDING * 2,
+        (Math.max(...ys) - Math.min(...ys) + FLOORPLAN_PADDING * 2) * svgAspectRatio,
+      )
+    } else if (pose) {
+      // A saved view with nothing to measure: its target, at the zoom the person has.
+      centre = toLocal(pose.target[0], pose.target[2])
+    } else return
+    // A floor change has just reset the view to the whole floor: glide from there, not from nothing.
+    latestViewportRef.current ??= latestFittedViewportRef.current
+    applyFloorplanNavigationView(centre, userRotationDeg, width, { smooth: framingAnimates() })
+  }, [
+    applyFloorplanNavigationView,
+    buildingPosition,
+    buildingRotationDeg,
+    buildingRotationY,
+    pendingFrame,
+    svgAspectRatio,
+  ])
+
   const viewBox = useMemo(() => {
     const currentViewport = viewport ?? fittedViewport
     const width = currentViewport.width
@@ -7648,7 +7622,7 @@ export function FloorplanPanel({
       scheduleFloorplanZoomCommit()
       const userRotationDeg = latestFloorplanUserRotationDegRef.current
       floorplanZoomPoseRef.current = { localCenter, userRotationDeg, viewWidth: nextWidth }
-      if (useEditor.getState().viewMode === 'split') {
+      if (visibleScene(useEditor.getState()) === 'split') {
         publishFloorplanNavigationPose(localCenter, userRotationDeg, nextWidth)
       }
     },
@@ -7731,28 +7705,24 @@ export function FloorplanPanel({
     right: false,
   })
   useEffect(() => {
-    if (viewMode !== '2d') return
+    if (shownScene !== '2d') return
     const keys = keyboardPanKeysRef.current
+    const motion = createKeyboardPanMotion()
     let frame: number | null = null
-    let lastTime: number | null = null
     const sceneRotationDeg = (userRotationDeg: number) =>
       FLOORPLAN_VIEW_ROTATION_DEG + userRotationDeg - buildingRotationDeg
-    const step = (time: number) => {
-      const { horizontal, vertical } = keyboardPanDirection(keys)
+    const step = () => {
       const viewport = latestViewportRef.current ?? latestFittedViewportRef.current
-      if ((horizontal === 0 && vertical === 0) || !viewport) {
+      if (!(viewport && advanceKeyboardPanMotion(motion, keys, performance.now()))) {
         frame = null
-        lastTime = null
+        resetKeyboardPanMotion(motion)
         commitFloorplanPan()
         return
       }
-      const elapsed = lastTime === null ? 0 : Math.min((time - lastTime) / 1000, 0.05)
-      lastTime = time
-      const distance =
-        (keyboardPanSpeed(viewport.width) * elapsed) / Math.hypot(horizontal, vertical)
+      const speed = keyboardPanSpeed(viewport.width)
       const next = {
-        centerX: viewport.centerX + horizontal * distance,
-        centerY: viewport.centerY - vertical * distance,
+        centerX: viewport.centerX + motion.stepX * speed,
+        centerY: viewport.centerY - motion.stepY * speed,
         width: viewport.width,
       }
       const userRotationDeg = latestFloorplanUserRotationDegRef.current
@@ -7773,12 +7743,15 @@ export function FloorplanPanel({
     }
     const onKeyDown = (event: KeyboardEvent) => {
       if (!(isKeyboardPanKey(event.code) && acceptsKeyboardPan(event))) return
+      syncKeyboardPanMotion(motion, keys, performance.now())
       if (setKeyboardPanKey(keys, event.code, true)) start()
       event.preventDefault()
       event.stopPropagation()
     }
     const onKeyUp = (event: KeyboardEvent) => {
-      if (isKeyboardPanKey(event.code) && setKeyboardPanKey(keys, event.code, false)) {
+      if (!isKeyboardPanKey(event.code)) return
+      syncKeyboardPanMotion(motion, keys, performance.now())
+      if (setKeyboardPanKey(keys, event.code, false)) {
         event.preventDefault()
         event.stopPropagation()
       }
@@ -7828,7 +7801,7 @@ export function FloorplanPanel({
     commitFloorplanPan,
     publishFloorplanNavigationPose,
     smoothFloorplanNavigationView,
-    viewMode,
+    shownScene,
   ])
 
   useLayoutEffect(() => {
@@ -7880,7 +7853,10 @@ export function FloorplanPanel({
     }
   }, [isFloorplanOpen, stopFloorplanViewAnimation])
 
+  // Clearing an open wall draft drops a Polygon room in progress (nothing of
+  // it was written); paths that keep it commit first.
   const clearWallPlacementDraft = useCallback(() => {
+    discardWallPolygonDraft()
     setDraftStart(null)
     setWallChainFirstVertex(null)
     wallConstructionOptionsRef.current = undefined
@@ -7937,10 +7913,9 @@ export function FloorplanPanel({
     setHoveredSiteHandleId(null)
   }, [clearSiteBoundaryLivePreview])
   const exitSiteEditingToSelect = useCallback(() => {
-    setPhase('structure')
-    setStructureLayer('elements')
+    setPhase('building')
     setMode('select')
-  }, [setMode, setPhase, setStructureLayer])
+  }, [setMode, setPhase])
 
   const clearDraft = useCallback(() => {
     clearWallPlacementDraft()
@@ -8002,10 +7977,8 @@ export function FloorplanPanel({
       }
 
       const { createNode, updateNode, nodes } = useScene.getState()
-      const zoneCount = Object.values(nodes).filter((node) => node.type === 'zone').length
-      const zone = ZoneNodeSchema.parse({
-        color: PALETTE_COLORS[zoneCount % PALETTE_COLORS.length],
-        name: `Zone ${zoneCount + 1}`,
+      const zone = newZone({
+        name: nextZoneName(nodes),
         polygon: points.map(([x, z]) => [x, z] as [number, number]),
       })
 
@@ -8080,22 +8053,6 @@ export function FloorplanPanel({
       useStairBuildPreview.getState().reset()
       return
     }
-
-    const handleGridMove = (event: GridEvent) => {
-      // Publish to the dedicated store (deduped on the snapped point), NOT panel
-      // state: the stair preview lives in `FloorplanStairBuildPreviewLayer`, so a
-      // per-move update re-renders only that tiny leaf instead of this entire
-      // (~200ms) panel — the same pattern that keeps column/elevator smooth.
-      useStairBuildPreview
-        .getState()
-        .setPoint(getSnappedFloorplanPoint([event.localPosition[0], event.localPosition[2]]))
-    }
-
-    emitter.on('grid:move', handleGridMove)
-
-    return () => {
-      emitter.off('grid:move', handleGridMove)
-    }
   }, [isStairBuildActive])
 
   useEffect(() => {
@@ -8287,13 +8244,13 @@ export function FloorplanPanel({
 
       if (
         isStairBuildActive &&
-        useEditor.getState().viewMode === '2d' &&
+        visibleScene(useEditor.getState()) === '2d' &&
         (event.key === 'r' || event.key === 'R')
       ) {
         useStairBuildPreview.getState().rotateBy(Math.PI / 4)
       } else if (
         isStairBuildActive &&
-        useEditor.getState().viewMode === '2d' &&
+        visibleScene(useEditor.getState()) === '2d' &&
         (event.key === 't' || event.key === 'T')
       ) {
         useStairBuildPreview.getState().rotateBy(-Math.PI / 4)
@@ -9004,7 +8961,7 @@ export function FloorplanPanel({
   // tools that subscribe to these grid events.
   const emitFloorplanGridEvent = useCallback(
     (
-      eventType: 'move' | 'click' | 'double-click',
+      eventType: 'move' | 'click' | 'double-click' | 'pointerdown' | 'pointerup',
       planPoint: WallPlanPoint,
       nativeEvent: ReactMouseEvent<SVGSVGElement> | ReactPointerEvent<SVGSVGElement>,
     ) => {
@@ -9205,7 +9162,7 @@ export function FloorplanPanel({
         const nextUserRotationDeg = rotationState.initialUserRotationDeg + angleDeltaDeg
 
         applyFloorplanRotationImperatively(rotationState, nextUserRotationDeg)
-        if (useEditor.getState().viewMode === 'split') {
+        if (visibleScene(useEditor.getState()) === 'split') {
           publishFloorplanNavigationPose(
             rotationState.viewportCenterLocal,
             nextUserRotationDeg,
@@ -9247,7 +9204,7 @@ export function FloorplanPanel({
           userRotationDeg: currentUserRotationDeg,
           viewWidth: currentViewport.width,
         }
-        if (useEditor.getState().viewMode === 'split') {
+        if (visibleScene(useEditor.getState()) === 'split') {
           publishFloorplanNavigationPose(localCenter, currentUserRotationDeg, currentViewport.width)
         }
 
@@ -9339,6 +9296,14 @@ export function FloorplanPanel({
       }
 
       if (isFenceBuildActive) {
+        if (useEditor.getState().getContinuation('fence') === 'freehand') {
+          useAlignmentGuides.getState().clear()
+          emitFloorplanGridEvent('move', planPoint, event)
+          setCursorPoint((previousPoint) =>
+            previousPoint && pointsEqual(previousPoint, planPoint) ? previousPoint : planPoint,
+          )
+          return
+        }
         // Fence draft: grid snap (+ existing-wall/fence endpoint snap), then
         // Figma alignment — same endpoint-wins precedence as the wall branch.
         // While a draft is open the segment locks to 15° rays from its start.
@@ -9346,17 +9311,23 @@ export function FloorplanPanel({
         // there is no Shift hold-to-bypass. Alignment follows the magnetic snap
         // mode, not Alt (continuation is cycled through the HUD / C).
         const fenceAngleSnap = fenceDraftStart !== null && isAngleSnapActive()
-        const fenceSnapped = snapFenceDraftPoint({
-          point: planPoint,
-          walls,
-          fences,
-          start: fenceDraftStart ?? undefined,
-          angleSnap: fenceAngleSnap,
-          magnetic: isMagneticSnapActive(),
-        })
+        const fenceSnapped = snapRegisteredDraftPoint(
+          'fence',
+          {
+            point: planPoint,
+            walls,
+            fences,
+            start: fenceDraftStart ?? undefined,
+            angleSnap: fenceAngleSnap,
+            magnetic: isMagneticSnapActive(),
+          },
+          planPoint,
+        )
         const fenceGridBase = snapWallPointToGrid(planPoint)
         const fenceLocked =
-          fenceSnapped[0] !== fenceGridBase[0] || fenceSnapped[1] !== fenceGridBase[1]
+          event.altKey ||
+          fenceSnapped[0] !== fenceGridBase[0] ||
+          fenceSnapped[1] !== fenceGridBase[1]
         let snappedPoint = fenceSnapped
         if (fenceLocked) useAlignmentGuides.getState().clear()
         // Alignment lines show in every mode; the pull applies only when
@@ -9542,7 +9513,7 @@ export function FloorplanPanel({
       const wallAngleSnap = draftStart !== null && isAngleSnapActive()
       const wallSnap = snapWallDraftPointDetailed({
         point: planPoint,
-        walls,
+        walls: [...walls, ...wallPolygonDraftWalls()],
         start: draftStart ?? undefined,
         angleSnap: wallAngleSnap,
         magnetic: isMagneticSnapActive(),
@@ -9649,7 +9620,7 @@ export function FloorplanPanel({
       const firstPoint = slabDraftPoints[0]
       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') {
+        if (visibleScene(useEditor.getState()) === '2d') {
           createSlabOnCurrentLevel(slabDraftPoints, slabPlacementBaseRef.current)
         }
         clearDraft()
@@ -9699,7 +9670,7 @@ export function FloorplanPanel({
       }
 
       // 2D-only view: the 3D tool can't commit, so create the slab here.
-      if (useEditor.getState().viewMode === '2d') {
+      if (visibleScene(useEditor.getState()) === '2d') {
         createSlabOnCurrentLevel(nextPoints, slabPlacementBaseRef.current)
       }
       clearDraft()
@@ -9715,7 +9686,7 @@ export function FloorplanPanel({
 
       const firstPoint = ceilingDraftPoints[0]
       if (firstPoint && ceilingDraftPoints.length >= 3 && isPointNearPlanPoint(point, firstPoint)) {
-        if (useEditor.getState().viewMode === '2d') {
+        if (visibleScene(useEditor.getState()) === '2d') {
           createCeilingOnCurrentLevel(ceilingDraftPoints)
         }
         clearCeilingPlacementDraft()
@@ -9748,7 +9719,7 @@ export function FloorplanPanel({
         return
       }
 
-      if (useEditor.getState().viewMode === '2d') {
+      if (visibleScene(useEditor.getState()) === '2d') {
         createCeilingOnCurrentLevel(nextPoints)
       }
       clearCeilingPlacementDraft()
@@ -9815,6 +9786,14 @@ export function FloorplanPanel({
               useEditor.getState().toolDefaults.wall,
             )
           : undefined
+        // 2D-only owns a Polygon room's draft; split view leaves it to the 3D tool.
+        if (
+          levelId &&
+          visibleScene(useEditor.getState()) === '2d' &&
+          getWallDrawVariant() === 'polygon'
+        ) {
+          startWallPolygonDraft(levelId as AnyNodeId, point, wallConstructionOptionsRef.current)
+        }
         setDraftStart(point)
         setWallChainFirstVertex(point)
         setDraftEnd(point)
@@ -9840,8 +9819,22 @@ export function FloorplanPanel({
       // `display:none`, so the tool never commits. Mirror the slab /
       // 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 viewIs2DOnly = visibleScene(useEditor.getState()) === '2d'
       let createdWall: WallNode | null = null
+      // 2D-only Polygon room: the corner joins the draft; nothing is written
+      // until it closes, seals or tees (then every wall at once).
+      if (viewIs2DOnly && getWallDrawVariant() === 'polygon') {
+        if (addWallPolygonDraftCorner(point) !== 'open') {
+          commitWallPolygonDraft()
+          clearWallPlacementDraft()
+          setCursorPoint(null)
+          return
+        }
+        setDraftStart(point)
+        setDraftEnd(point)
+        setCursorPoint(point)
+        return
+      }
       if (viewIs2DOnly) {
         createdWall = createWallOnCurrentLevel(
           draftStart,
@@ -10045,18 +10038,25 @@ export function FloorplanPanel({
         return
       }
 
+      if (useInteractionScope.getState().scope.kind !== 'idle') return
       const modifierKeys = getSelectionModifierKeys(event)
 
+      if (enterBuildingFromPlanHit(getFloorplanHitIdAtPoint(planPoint))) return
+      if (roomPickingEnabled()) {
+        const hitId = getFloorplanHitIdAtPoint(planPoint)
+        if (selectRoomFromHit(resolvePlanRoomHit(hitId, planPoint), modifierKeys, hitId)) return
+      }
       const backgroundSelection = resolveFloorplanBackgroundSelection({
         canSelectElementFloorplanGeometry,
-        canSelectFloorplanZones,
+        canSelectFloorplanZones: canSelectFloorplanZones && !!useViewer.getState().focusedUnitId,
         currentSelectedIds: useViewer.getState().selection.selectedIds,
         expandIdsForNode: expandSessionSelectionForNode,
-        getFloorplanHitIdAtPoint,
+        getFloorplanHitIdAtPoint: useViewer.getState().focusedUnitId
+          ? (point) => zoneAtLevelPoint(point[0], point[1])?.id ?? null
+          : getFloorplanHitIdAtPoint,
         isWallBuildActive,
         modifierKeys,
         planPoint,
-        structureLayer,
       })
 
       if (backgroundSelection.handled) {
@@ -10104,15 +10104,14 @@ export function FloorplanPanel({
         }
 
         if (backgroundSelection.kind === 'clear-zones') {
-          setSelection({ zoneId: null })
-          // Return to structure select (same as 3D grid click)
-          useEditor.getState().setStructureLayer('elements')
-          useEditor.getState().setMode('select')
+          useEditor.getState().clearRoom()
+          setSelection({ selectedIds: [], zoneId: null })
           return
         }
 
         if (!backgroundSelection.preserveSelection) {
-          setSelection({ selectedIds: [] })
+          useEditor.getState().clearRoom()
+          setSelection({ selectedIds: [], zoneId: null })
         }
         return
       }
@@ -10130,7 +10129,6 @@ export function FloorplanPanel({
       referenceScaleDraft,
       setSelectedReferenceId,
       setSelection,
-      structureLayer,
       getFloorplanHitIdAtPoint,
       unit,
       emitFloorplanGridEvent,
@@ -10150,6 +10148,49 @@ export function FloorplanPanel({
     },
     [handleBackgroundClick],
   )
+  const handleSvgPointerDown = useCallback(
+    (event: ReactPointerEvent<SVGSVGElement>) => {
+      if (
+        isFenceBuildActive &&
+        useEditor.getState().getContinuation('fence') === 'freehand' &&
+        event.button === 0
+      ) {
+        const point = getPlanPointFromClientPoint(event.clientX, event.clientY)
+        if (point) {
+          clearFencePlacementDraft()
+          event.currentTarget.setPointerCapture(event.pointerId)
+          emitFloorplanGridEvent('pointerdown', point, event)
+        }
+      }
+      handlePointerDown(event)
+    },
+    [
+      clearFencePlacementDraft,
+      emitFloorplanGridEvent,
+      getPlanPointFromClientPoint,
+      handlePointerDown,
+      isFenceBuildActive,
+    ],
+  )
+  const handleSvgPointerUp = useCallback(
+    (event: ReactPointerEvent<SVGSVGElement>) => {
+      if (
+        isFenceBuildActive &&
+        useEditor.getState().getContinuation('fence') === 'freehand' &&
+        event.button === 0
+      ) {
+        const point = getPlanPointFromClientPoint(event.clientX, event.clientY)
+        if (point) emitFloorplanGridEvent('pointerup', point, event)
+      }
+      endFloorplanNavigation(event)
+    },
+    [
+      emitFloorplanGridEvent,
+      endFloorplanNavigation,
+      getPlanPointFromClientPoint,
+      isFenceBuildActive,
+    ],
+  )
   const handleBackgroundDoubleClick = useCallback(
     (event: ReactMouseEvent<SVGSVGElement>) => {
       if (!(isPolygonDraftBuildActive && !isRoofBuildActive)) {
@@ -10300,28 +10341,18 @@ export function FloorplanPanel({
     if (floorplanScreenSelectionOwnsInputDraggingRef.current) {
       useViewer.getState().setInputDragging(false)
       floorplanScreenSelectionOwnsInputDraggingRef.current = false
+      useInteractionScope.getState().endIf((scope) => scope.kind === 'box-select')
     }
   }, [syncPreviewSelectedIds])
 
   const commitFloorplanScreenSelection = useCallback(
     (nextSelectedIds: string[], event: PointerEvent) => {
       const modifierKeys = getSelectionModifierKeys(event)
-      const shouldAppend = modifierKeys.meta || modifierKeys.ctrl || modifierKeys.shift
-
       setSelectedReferenceId(null)
 
-      if (phase === 'structure' && structureLayer === 'zones') {
-        if (nextSelectedIds.length > 0) {
-          setSelection({ zoneId: nextSelectedIds[0] as ZoneNodeType['id'] })
-        } else if (!shouldAppend) {
-          setSelection({ zoneId: null })
-        }
-        return
-      }
-
       addFloorplanSelection(nextSelectedIds, modifierKeys)
     },
-    [addFloorplanSelection, phase, setSelectedReferenceId, setSelection, structureLayer],
+    [addFloorplanSelection, setSelectedReferenceId],
   )
 
   useEffect(() => {
@@ -10371,6 +10402,7 @@ export function FloorplanPanel({
       if (!state.isDragging && dragDistance >= SCREEN_RECTANGLE_SELECTION_DRAG_THRESHOLD_PX) {
         state.isDragging = true
         floorplanScreenSelectionOwnsInputDraggingRef.current = true
+        useInteractionScope.getState().begin({ kind: 'box-select' })
         useViewer.getState().setInputDragging(true)
         markBoxSelectHandled()
 
@@ -10775,11 +10807,16 @@ export function FloorplanPanel({
   const hasFloorplanCursorIndicator =
     Boolean(movingOpeningType) ||
     (mode === 'build' && tool !== null) ||
-    (mode === 'select' && floorplanSelectionTool === 'marquee' && structureLayer !== 'zones') ||
+    (mode === 'select' && floorplanSelectionTool === 'marquee') ||
     mode === 'delete'
 
   const handleSvgPointerMove = useCallback(
     (event: ReactPointerEvent<SVGSVGElement>) => {
+      if (roomPickingEnabled() && !(event.target as Element).closest('.floorplan-registry-entry')) {
+        const point = getPlanPointFromClientPoint(event.clientX, event.clientY)
+        if (point)
+          hoverRoomFromHit(resolvePlanRoomHit(null, point), getSelectionModifierKeys(event), null)
+      }
       if (
         hasFloorplanCursorIndicator &&
         !isSpacePanPressed &&
@@ -10812,6 +10849,7 @@ export function FloorplanPanel({
     [
       handlePointerMove,
       hasFloorplanCursorIndicator,
+      getPlanPointFromClientPoint,
       isSpacePanPressed,
       siteVertexDragState,
       setFloorplanCursorPosition,
@@ -10819,6 +10857,7 @@ export function FloorplanPanel({
   )
 
   const handleSvgPointerLeave = useCallback(() => {
+    useEditor.getState().setHoveredRoom(null)
     setFloorplanCursorPosition(null)
     setHoveredGuideCorner(null)
     handlePointerLeave()
@@ -11129,8 +11168,7 @@ export function FloorplanPanel({
             )
           })()
 
-    setPhase('structure')
-    setStructureLayer('elements')
+    setPhase('building')
     setMode('select')
 
     const nextSelection: Parameters<typeof setSelection>[0] = {
@@ -11147,16 +11185,7 @@ export function FloorplanPanel({
     }
 
     setSelection(nextSelection)
-  }, [
-    currentBuildingId,
-    floorplanLevels,
-    levelNode,
-    setMode,
-    setPhase,
-    setSelection,
-    setStructureLayer,
-    site,
-  ])
+  }, [currentBuildingId, floorplanLevels, levelNode, setMode, setPhase, setSelection, site])
   const activeDraftAnchorPoint =
     referenceScaleDraft?.start ??
     draftStart ??
@@ -11236,8 +11265,10 @@ export function FloorplanPanel({
             pill, plus the group pill for multi-selections. */}
         <FloorplanRegistryActionMenu />
         <FloorplanGroupActionMenu />
+        <FloorplanDrawingTypeSwitch className={planOnRight ? 'right-24 left-auto' : undefined} />
 
         {!isStudioWorkspace &&
+          sceneLeft !== null &&
           (levelNode?.type === 'level' || hasAmbientBuildingLevel) &&
           (compassHost ? (
             createPortal(
@@ -11245,6 +11276,7 @@ export function FloorplanPanel({
                 needleRef={compassNeedleRef}
                 northRotationDeg={floorplanUserRotationDeg}
                 onAlignNorth={alignFloorplanViewToNorth}
+                style={compassStyle}
               />,
               compassHost,
             )
@@ -11282,7 +11314,7 @@ export function FloorplanPanel({
             }}
           >
             <div className="mb-3 flex items-start gap-2.5">
-              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-border bg-white/5">
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-border bg-black/4 dark:bg-white/5">
                 <Ruler className="h-4 w-4 text-foreground/80" />
               </div>
               <div className="min-w-0">
@@ -11294,7 +11326,7 @@ export function FloorplanPanel({
               </div>
             </div>
 
-            <div className="mb-3 rounded-xl border border-border/70 bg-white/5 px-3 py-2">
+            <div className="mb-3 rounded-xl border border-border/70 bg-black/4 dark:bg-white/5 px-3 py-2">
               <div className="text-[11px] text-muted-foreground uppercase tracking-wide">
                 Drawn line
               </div>
@@ -11357,7 +11389,7 @@ export function FloorplanPanel({
 
             <div className="mt-4 flex justify-end gap-2">
               <button
-                className="h-8 rounded-lg border border-border px-3 font-medium text-muted-foreground text-xs transition hover:bg-white/8 hover:text-foreground"
+                className="h-8 rounded-lg border border-border px-3 font-medium text-muted-foreground text-xs transition hover:bg-black/5 dark:hover:bg-white/8 hover:text-foreground"
                 onClick={() => setPendingReferenceScale(null)}
                 type="button"
               >
@@ -11385,7 +11417,7 @@ export function FloorplanPanel({
           // renderer, handle layers) must NOT render/reconcile while hidden —
           // otherwise every scene/selection change in pure 3D re-rendered the
           // whole floorplan tree (profiler: 150–200ms on a wall-endpoint drag).
-          // `isFloorplanOpen` is `viewMode !== '3d'`, so this still renders fully
+          // `isFloorplanOpen` is "the plan is in a pane", so this still renders fully
           // in both 2D and split. Viewport state lives on the still-mounted
           // panel, so pan/zoom is preserved across the toggle.
           <svg
@@ -11395,11 +11427,11 @@ export function FloorplanPanel({
             onContextMenu={(event) => event.preventDefault()}
             onDoubleClick={isMarqueeSelectionToolActive ? undefined : handleBackgroundDoubleClick}
             onPointerCancel={endFloorplanNavigation}
-            onPointerDown={handlePointerDown}
+            onPointerDown={handleSvgPointerDown}
             onPointerDownCapture={handleNavigationPointerDown}
             onPointerLeave={handleSvgPointerLeave}
             onPointerMove={handleSvgPointerMove}
-            onPointerUp={endFloorplanNavigation}
+            onPointerUp={handleSvgPointerUp}
             ref={svgRef}
             style={{
               cursor:
@@ -11496,7 +11528,7 @@ export function FloorplanPanel({
                   subscribes to the `useStairBuildPreview` store directly, so a
                   per-`grid:move` cursor update re-renders only that tiny layer
                   rather than this whole panel. */}
-              <FloorplanStairBuildPreviewLayer isDeleteMode={isDeleteMode} palette={palette} />
+              <FloorplanStairBuildPreviewLayer palette={floorplanRegistryPalette} />
 
               <FloorplanReferenceScaleLayer
                 draft={referenceScaleDraft}
@@ -11547,7 +11579,13 @@ export function FloorplanPanel({
                     whose extent is derived from the current viewBox and
                     would create a measure→fit→measure loop. */}
                 <g ref={floorplanContentRef}>
-                  <FloorplanRegistryLayer />
+                  {/* Site-plan mode swaps the level drawing for the lot /
+                      setback / footprint drawing, in SITE coordinates. */}
+                  {activeDrawingType === 'site-plan' ? (
+                    <FloorplanSitePlanLayer />
+                  ) : (
+                    <FloorplanRegistryLayer />
+                  )}
                   {/* Faint footprint ghost of the node being placed by a
                       registry placement tool (e.g. column), following the
                       cursor. The 3D mesh preview is hidden in 2D, so this is
@@ -11561,6 +11599,7 @@ export function FloorplanPanel({
                       `floorplan-wall-move-ghost-layer.tsx`. */}
                   <FloorplanWallMoveGhostLayer />
                 </g>
+                {activeDrawingType !== 'site-plan' && <FloorplanOpenWallEndsLayer />}
                 <FloorplanMeasurementToolLayer />
                 <FloorplanRegisteredToolLayer />
                 {floorplanSceneSlot}
@@ -11577,42 +11616,54 @@ export function FloorplanPanel({
                   paint on top of node geometry. */}
               <FloorplanAlignmentGuideLayer />
 
-              <FloorplanSiteLayer
-                dimmed={selectedIds.length > 1 || previewSelectedIds.length > 1}
-                isHighlighted={isSiteBoundaryHighlighted}
-                palette={palette}
-                sitePolygon={visibleSitePolygon}
-              />
+              {/* The property line, its vertex handles and its edge labels are
+                  drawn in BUILDING-LOCAL metres (the frame the level's walls
+                  live in). The site-plan drawing type draws the lot itself, in
+                  SITE metres, so mounting these there paints a second lot
+                  offset by the building's own position — the "two dashed
+                  boxes" — and it shifts whenever the house moves. */}
+              {activeDrawingType !== 'site-plan' && (
+                <FloorplanSiteLayer
+                  dimmed={selectedIds.length > 1 || previewSelectedIds.length > 1}
+                  isHighlighted={isSiteBoundaryHighlighted}
+                  palette={palette}
+                  sitePolygon={visibleSitePolygon}
+                />
+              )}
 
-              <FloorplanPolygonHandleLayer
-                edgeHandles={siteEdgeHandles}
-                hoveredHandleId={hoveredSiteHandleId}
-                midpointHandles={siteMidpointHandles}
-                onHandleHoverChange={setHoveredSiteHandleId}
-                onMidpointPointerDown={(nodeId, edgeIndex, event) =>
-                  handleSiteMidpointPointerDown(nodeId as SiteNode['id'], edgeIndex, event)
-                }
-                onVertexDoubleClick={(nodeId, vertexIndex, event) =>
-                  handleSiteVertexDoubleClick(nodeId as SiteNode['id'], vertexIndex, event)
-                }
-                onVertexPointerDown={(nodeId, vertexIndex, event) =>
-                  handleSiteVertexPointerDown(nodeId as SiteNode['id'], vertexIndex, event)
-                }
-                palette={palette}
-                unitsPerPixel={floorplanUnitsPerPixel}
-                vertexHandles={siteVertexHandles}
-              />
+              {activeDrawingType !== 'site-plan' && (
+                <FloorplanPolygonHandleLayer
+                  edgeHandles={siteEdgeHandles}
+                  hoveredHandleId={hoveredSiteHandleId}
+                  midpointHandles={siteMidpointHandles}
+                  onHandleHoverChange={setHoveredSiteHandleId}
+                  onMidpointPointerDown={(nodeId, edgeIndex, event) =>
+                    handleSiteMidpointPointerDown(nodeId as SiteNode['id'], edgeIndex, event)
+                  }
+                  onVertexDoubleClick={(nodeId, vertexIndex, event) =>
+                    handleSiteVertexDoubleClick(nodeId as SiteNode['id'], vertexIndex, event)
+                  }
+                  onVertexPointerDown={(nodeId, vertexIndex, event) =>
+                    handleSiteVertexPointerDown(nodeId as SiteNode['id'], vertexIndex, event)
+                  }
+                  palette={palette}
+                  unitsPerPixel={floorplanUnitsPerPixel}
+                  vertexHandles={siteVertexHandles}
+                />
+              )}
 
-              <FloorplanSiteEdgeLabelLayer
-                labelBackground={isDark ? '#0f172a' : '#ffffff'}
-                labelText={isDark ? '#e2e8f0' : '#171717'}
-                palette={palette}
-                sceneRotationDeg={floorplanSceneRotationDeg}
-                shouldShow={shouldShowSiteEdgeLabels}
-                sitePolygon={visibleSitePolygon}
-                unit={unit}
-                unitsPerPixel={floorplanUnitsPerPixel}
-              />
+              {activeDrawingType !== 'site-plan' && (
+                <FloorplanSiteEdgeLabelLayer
+                  labelBackground={isDark ? '#0f172a' : '#ffffff'}
+                  labelText={isDark ? '#e2e8f0' : '#171717'}
+                  palette={palette}
+                  sceneRotationDeg={floorplanSceneRotationDeg}
+                  shouldShow={shouldShowSiteEdgeLabels}
+                  sitePolygon={visibleSitePolygon}
+                  unit={unit}
+                  unitsPerPixel={floorplanUnitsPerPixel}
+                />
+              )}
 
               {/* "Magnetic" wall-snap beacon — per-kind glyph at the active
                   draft / endpoint-move snap point. Same store + coord space as