@pascal-app/editor 1.0.3 → 1.0.5

package/src/components/editor-2d/renderers/floorplan-registry-layer.tsx

@@ -23,12 +23,20 @@ import {
   resolveBuildingForLevel,
   resolveSelectionProxyId,
   resumeSceneHistory,
+  type SlabNode,
   useInteractive,
   useLiveNodeOverrides,
   useLiveTransforms,
   useScene,
 } from '@pascal-app/core'
-import { beginPerfAction, cancelPerfAction, commitPerfAction, useViewer } from '@pascal-app/viewer'
+import {
+  beginPerfAction,
+  cancelPerfAction,
+  commitPerfAction,
+  useRevealPlanActive,
+  useRevealWaiting,
+  useViewer,
+} from '@pascal-app/viewer'
 import {
   type ComponentProps,
   memo,
@@ -43,6 +51,14 @@ import {
 } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
+import {
+  hoverRoomFromHit,
+  resolvePlanRoomHit,
+  roomPickingEnabled,
+  selectionModifiersFromEvent,
+  useRoomRecords,
+} from '../../../hooks/use-selected-room'
+import { useCeilingEditSession } from '../../../lib/ceiling-edit-session'
 import { ROTATE_HANDLE_DRAG_LABEL } from '../../../lib/contextual-help'
 import {
   canDirectRotateNode,
@@ -53,6 +69,7 @@ import {
   snapDirectRotationDelta,
 } from '../../../lib/direct-manipulation'
 import { createEditorApi } from '../../../lib/editor-api'
+import { isRoomOwnedPlate, roomOwnedPlateDrillTarget } from '../../../lib/floor-footprints'
 import {
   type FloorplanAnnotationVisibility,
   filterFloorplanAnnotationGeometry,
@@ -86,7 +103,15 @@ import {
   isIdle,
   tangentReshapeScope,
 } from '../../../lib/interaction/scope'
-import { emitCanvasNodeSelection } from '../../../lib/selection-routing'
+import { runFloorplanWallPush, WALL_PUSH_AFFORDANCE } from '../../../lib/room-handle-drag'
+import { selectRoom, selectRoomFromHit } from '../../../lib/room-selection-commands'
+import { clickZoneArea, hoverZoneArea } from '../../../lib/room-zone-routing'
+import {
+  emitCanvasNodeSelection,
+  enterBuildingFromPlanHit,
+  resolveCanvasBuildingId,
+} from '../../../lib/selection-routing'
+import { createSessionWrites, type SessionWrites } from '../../../lib/session-writes'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { clearSurfacePlanSnapFeedback } from '../../../lib/surface-plan-snap'
 import { paintZoneMembership } from '../../../lib/units'
@@ -101,8 +126,13 @@ import useInteractionScope, {
   useMovingNode,
 } from '../../../store/use-interaction-scope'
 import { expandSessionSelectionForNode } from '../../../store/use-session-groups'
+import { isViewVisible, VIEW_2D } from '../../../store/view-layout'
+import { FloorRegionControls2D } from '../../editor/floor-region-controls'
 import { startGroupPickUp } from '../../editor/group-actions'
 import { classifyParticipant } from '../../editor/group-transform-shared'
+import { RoomHandleDragPreview2D, RoomHandles2D } from '../../editor/room-handles-2d'
+import { RoomHighlight2D } from '../../editor/room-highlight'
+import { RoomLabels2D } from '../../editor/room-labels'
 import { suppressBoxSelectForPointer } from '../../tools/select/box-select-state'
 import {
   FloorplanGroupSelectionBox,
@@ -120,6 +150,7 @@ import {
   resolveSvgAnnotationCollisions,
   svgAnnotationLabelId,
 } from './floorplan-annotation-layout'
+import { FloorplanDimensionEditOverlay } from './floorplan-dimension-edit-overlay'
 import { FloorplanDimensionRenderer } from './floorplan-dimension-renderer'
 import { FloorplanGeometryRenderer } from './floorplan-geometry-renderer'
 import {
@@ -127,6 +158,7 @@ import {
   resolveFloorplanLabelAngle,
   updateSvgFloorplanLabelOrientations,
 } from './floorplan-label-angle'
+import { useFloorplanReveal } from './floorplan-reveal'
 
 /**
  * Registry-driven floor-plan layer.
@@ -179,22 +211,19 @@ const ScaleAwareFloorplanGroupSelectionBox = memo(function ScaleAwareFloorplanGr
   return <FloorplanGroupSelectionBox {...props} unitsPerPixel={unitsPerPixel} />
 })
 
-/**
- * Snapshot of node fields captured at drag-start, used by the single-undo
- * dance to revert untracked before re-applying as a single tracked
- * change. The dispatcher only knows about the `affectedIds` the
- * affordance declares; it captures whatever fields exist on each node by
- * cloning the full record minus the registry-managed `id` / `type`.
- */
-type NodeSnapshot = { id: AnyNodeId; data: Record<string, unknown> }
-
 type ActiveDrag = {
   pointerId: number
   captureTarget: Element
   /** Key for the visual `active` flag — e.g. `${nodeId}:${endpoint}`. */
   handleId: string
   session: FloorplanAffordanceSession
-  snapshots: NodeSnapshot[]
+  /**
+   * What the session itself wrote to the scene during `apply()` (legacy
+   * sessions only; override-only sessions write nothing). Cancel and commit
+   * take back exactly these writes, so a collaborator's edit to the same node
+   * mid-drag survives.
+   */
+  writes: SessionWrites
   historyPaused: boolean
   /**
    * Last plan point handed to `session.apply` (the grab point until the first
@@ -218,7 +247,6 @@ type ActiveDrag = {
 }
 
 type FloorplanAffordanceCancelEffects = {
-  restoreSnapshots: (snapshots: NodeSnapshot[]) => void
   resumeHistory: () => void
   clearPreview: (id: AnyNodeId) => void
   clearSnapFeedback: () => void
@@ -242,7 +270,7 @@ export function cancelFloorplanAffordanceDrag(
     drag.captureTarget.releasePointerCapture?.(drag.pointerId)
   }
 
-  effects.restoreSnapshots(drag.snapshots)
+  drag.writes.revert()
   if (drag.historyPaused) {
     effects.resumeHistory()
     drag.historyPaused = false
@@ -378,6 +406,7 @@ type CacheEntry = {
   deps: NodeDeps
   base: FloorplanGeometry | null
   overlay: FloorplanGeometry | null
+  handles: FloorplanGeometry | null
   node: AnyNode
 }
 
@@ -433,7 +462,7 @@ type FloorplanLevelDataHook = (args: {
   nodes: Record<string, AnyNode>
 }) => unknown
 
-type FloorplanRenderPass = 'base' | 'overlay'
+type FloorplanRenderPass = 'base' | 'overlay' | 'handles'
 
 const POINTER_CURSOR_STYLE = { cursor: 'pointer' } as const
 // Group members advertise the drag-to-move-the-selection gesture.
@@ -441,18 +470,16 @@ const MOVE_CURSOR_STYLE = { cursor: 'move' } as const
 const NO_POINTER_EVENTS_STYLE = { pointerEvents: 'none' } as const
 
 export function isFloorplanOpeningPlacementState({
-  phase,
   mode,
   tool,
   movingNodeHasWallOpeningPlacement,
 }: {
-  phase: string
   mode: string
   tool: string | null
   movingNodeHasWallOpeningPlacement: boolean
 }): boolean {
   return (
-    (phase === 'structure' && mode === 'build' && (tool === 'door' || tool === 'window')) ||
+    (mode === 'build' && (tool === 'door' || tool === 'window')) ||
     movingNodeHasWallOpeningPlacement
   )
 }
@@ -471,12 +498,11 @@ export function floorplanEntryYieldsToTool(state: {
 }
 
 function floorplanEntryYieldsToToolNow(): boolean {
-  const { phase, mode, tool } = useEditor.getState()
+  const { mode, tool } = useEditor.getState()
   const movingNode = getMovingNode()
   return floorplanEntryYieldsToTool({
     mode,
     openingPlacement: isFloorplanOpeningPlacementState({
-      phase,
       mode,
       tool,
       movingNodeHasWallOpeningPlacement:
@@ -486,21 +512,6 @@ function floorplanEntryYieldsToToolNow(): boolean {
   })
 }
 
-function snapshotNode(node: AnyNode): NodeSnapshot {
-  // Shallow-clone every non-id, non-type field. Arrays / vec tuples are
-  // deep-cloned to detach from the live store reference.
-  const data: Record<string, unknown> = {}
-  for (const [key, value] of Object.entries(node)) {
-    if (key === 'id' || key === 'type' || key === 'object' || key === 'parentId') continue
-    data[key] = Array.isArray(value) ? [...(value as unknown[])] : value
-  }
-  return { id: node.id, data }
-}
-
-function snapshotsToUpdates(snapshots: NodeSnapshot[]) {
-  return snapshots.map((s) => ({ id: s.id, data: s.data }))
-}
-
 // Stable empty sentinel used by per-entry builders while the floor plan is
 // hidden; committed scene edits still flow through `useScene`.
 const EMPTY_LIVE_OVERRIDES: Map<string, LiveNodeOverrides> = new Map()
@@ -564,6 +575,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   }, [selectedLevelId, ambientBuildingSourceId, nodes])
 
   const levelId = selectedLevelId ?? ambientLevelId
+  useRoomRecords(levelId)
   const isAmbient = !selectedLevelId && !!ambientLevelId
   const activeBuildingId = useMemo(
     () => (levelId ? resolveBuildingForLevel(levelId as AnyNodeId, nodes) : null),
@@ -584,19 +596,17 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   // `handleClickStop` / `handleSelect`, so the tool never sees it. Pass
   // clicks through in that case (`floorplanEntryYieldsToToolNow`).
   const editorMode = useEditor((s) => s.mode)
-  const structureLayer = useEditor((s) => s.structureLayer)
   const floorplanSelectionTool = useEditor((s) => s.floorplanSelectionTool)
   const endpointReshape = useEndpointReshape()
   const isMarqueeSelectionActive =
     editorMode === 'select' &&
     floorplanSelectionTool === 'marquee' &&
-    structureLayer !== 'zones' &&
     !movingNode &&
     !endpointReshape
   // While the floor plan is not on screen (pure 3D view), per-entry live
   // selectors freeze to `undefined` so drag publishes do not re-render the
   // hidden floor-plan tree.
-  const floorplanVisible = useEditor((s) => s.viewMode !== '3d')
+  const floorplanVisible = useEditor((s) => isViewVisible(s, VIEW_2D))
   const drawingType = useDrawingView((s) => s.drawingType)
   const annotationVisibility = useFloorplanAnnotationVisibility((s) => s.visibility)
   const wallDimensionReference = useFloorplanAnnotationVisibility((s) => s.wallDimensionReference)
@@ -697,6 +707,17 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         swallowNextClick(200)
         return
       }
+      // A zone's fill or label takes the same rule as its pill (`clickZoneArea`).
+      if (clickedNode?.type === 'zone') {
+        clickZoneArea(clickedNode.id, {
+          meta: false,
+          ctrl: false,
+          shift: options.shouldToggle,
+          alt: options.isolateMember,
+        })
+        swallowNextClick(200)
+        return
+      }
       const currentSelectedIds = useViewer.getState().selection.selectedIds
       let nextSelectedIds: string[]
       if (options.shouldToggle) {
@@ -754,13 +775,13 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
   )
 
   const handleClickStop = useCallback((event: React.MouseEvent<SVGGElement>) => {
-    if (floorplanEntryYieldsToToolNow()) return
+    if (floorplanEntryYieldsToToolNow() || !isIdle(useInteractionScope.getState().scope)) return
     event.stopPropagation()
   }, [])
 
   const startDirectMoveDrag = useCallback(
     (id: AnyNodeId, event: ReactPointerEvent<SVGGElement>): boolean => {
-      if (event.button !== 0) return false
+      if (event.button !== 0 || event.altKey) return false
 
       const node = useScene.getState().nodes[id]
       if (!node || !isRegistryMovable(node.type)) return false
@@ -1015,7 +1036,35 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       // the stores at event time. Commit clears the interaction scope before
       // React paints the next frame; a render-time `undefined` handler leaves
       // a short dead zone where the first post-placement selection is lost.
-      if (floorplanEntryYieldsToToolNow()) return
+      if (floorplanEntryYieldsToToolNow() || !isIdle(useInteractionScope.getState().scope)) return
+      if (event.button === 0 && enterBuildingFromPlanHit(id)) {
+        event.stopPropagation()
+        swallowNextClick(200)
+        return
+      }
+      const point = clientToPlan(event.clientX, event.clientY)
+      if (
+        event.button === 0 &&
+        point &&
+        roomPickingEnabled() &&
+        selectRoomFromHit(resolvePlanRoomHit(id, point), selectionModifiersFromEvent(event), id)
+      ) {
+        event.stopPropagation()
+        swallowNextClick(200)
+        return
+      }
+      // A room-owned plate past its room: the same routing as the 3D click.
+      const plate = useScene.getState().nodes[id]
+      if (event.button === 0 && point && roomPickingEnabled() && isRoomOwnedPlate(plate)) {
+        const footprint = roomOwnedPlateDrillTarget(useScene.getState().nodes, plate as SlabNode)
+        if (footprint) handleSelect(footprint.id as AnyNodeId, event)
+        else {
+          const hit = resolvePlanRoomHit(id, point)
+          if (hit) selectRoom(hit)
+          event.stopPropagation()
+        }
+        return
+      }
       if (startDirectMoveDrag(id, event)) return
       if (startDirectRotateDrag(id, event)) return
       if (startGroupMoveDrag(id, event)) return
@@ -1241,6 +1290,16 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       if (event.button !== 0) return
       if (movingNode) return
 
+      // A wall push arrow runs the same push drag as the 3D arrows (its own
+      // gesture, preview and commit), not a registry affordance session.
+      if (affordance === WALL_PUSH_AFFORDANCE) {
+        event.preventDefault()
+        event.stopPropagation()
+        suppressBoxSelectForPointer(event)
+        runFloorplanWallPush(payload, event.clientX, event.clientY)
+        return
+      }
+
       const sceneNodes = useScene.getState().nodes
       const node = sceneNodes[nodeId]
       if (!node) return
@@ -1266,13 +1325,9 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         sceneApi: createSceneApi(useScene),
       })
 
-      const snapshots: NodeSnapshot[] = []
-      for (const id of session.affectedIds) {
-        const n = sceneNodes[id]
-        if (n) snapshots.push(snapshotNode(n))
-      }
-
       pauseSceneHistory(useScene)
+      const writes = createSessionWrites()
+      writes.watch(session.affectedIds)
 
       // Rotation readout setup. The wedge radius tracks the grab distance
       // from the pivot (≈ the handle's orbit), nudged inward so the swept
@@ -1304,7 +1359,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         captureTarget,
         handleId,
         session,
-        snapshots,
+        writes,
         historyPaused: true,
         lastPlanPoint: initialPlanPoint,
         rotation,
@@ -1337,8 +1392,6 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       cancelFloorplanAffordanceDrag(
         dragRef,
         {
-          restoreSnapshots: (snapshots) =>
-            useScene.getState().updateNodes(snapshotsToUpdates(snapshots)),
           resumeHistory: () => resumeSceneHistory(useScene),
           clearPreview: (id) => {
             useLiveNodeOverrides.getState().clear(id)
@@ -1364,15 +1417,17 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       if (!planPoint) return
 
       drag.lastPlanPoint = planPoint
-      drag.session.apply({
-        planPoint,
-        modifiers: {
-          shiftKey: event.shiftKey,
-          altKey: event.altKey,
-          ctrlKey: event.ctrlKey,
-          metaKey: event.metaKey,
-        },
-      })
+      drag.writes.record(() =>
+        drag.session.apply({
+          planPoint,
+          modifiers: {
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+          },
+        }),
+      )
 
       // Live rotation readout. Sweep from the bearing at grab to the
       // current pointer bearing around the pivot — the same measurement
@@ -1409,11 +1464,11 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       // Sessions with a `commit` hook own their atomic write (e.g.
       // affordances that publish to `useLiveNodeOverrides` during
       // `apply()` and never touch scene mid-drag). Mirrors the move
-      // overlay's `session.commit` path — revert untracked (no-op when
-      // the session never wrote to scene), resume history, then let
-      // the session do the tracked write.
+      // overlay's `session.commit` path — take back what the session wrote
+      // (nothing, for those), resume history, then let the session do the
+      // tracked write.
       if (commitValid && drag.session.commit) {
-        useScene.getState().updateNodes(snapshotsToUpdates(drag.snapshots))
+        drag.writes.revert()
         if (drag.historyPaused) {
           resumeSceneHistory(useScene)
           drag.historyPaused = false
@@ -1430,37 +1485,23 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       }
 
       // Legacy compatibility for sessions that still wrote preview state into
-      // `useScene` during `apply()`: capture the final state BEFORE the revert
-      // so we know what to re-apply post-resume. New sessions should provide a
-      // `commit()` hook and preview through live overrides/transforms instead.
-      const sceneNodes = useScene.getState().nodes
-      const finalUpdates: Array<{ id: AnyNodeId; data: Record<string, unknown> }> = []
-      for (const snap of drag.snapshots) {
-        const current = sceneNodes[snap.id]
-        if (!current) continue
-        const data: Record<string, unknown> = {}
-        let changed = false
-        for (const [key, before] of Object.entries(snap.data)) {
-          const after = (current as unknown as Record<string, unknown>)[key]
-          if (!deepEqual(before, after)) {
-            data[key] = Array.isArray(after) ? [...(after as unknown[])] : after
-            changed = true
-          }
-        }
-        if (changed) finalUpdates.push({ id: snap.id, data })
-      }
+      // `useScene` during `apply()`: the fields they wrote are re-applied as
+      // one tracked change after the untracked revert. New sessions should
+      // provide a `commit()` hook and preview through live overrides/transforms.
+      const changes = drag.writes.changes()
+      const changed = changes.create.length + changes.update.length + changes.delete.length > 0
 
-      if (commitValid && finalUpdates.length > 0) {
+      if (commitValid && changed) {
         // Legacy single-undo dance (mirrors the old 3D move-endpoint-tool):
-        //   1. Revert to baseline while history is still paused (untracked).
+        //   1. Take back the session's writes while history is still paused.
         //   2. Resume history.
-        //   3. Re-apply the final state — recorded as one tracked change.
-        useScene.getState().updateNodes(snapshotsToUpdates(drag.snapshots))
+        //   3. Re-apply them — recorded as one tracked change.
+        drag.writes.revert()
         if (drag.historyPaused) {
           resumeSceneHistory(useScene)
           drag.historyPaused = false
         }
-        useScene.getState().updateNodes(finalUpdates)
+        useScene.getState().applyNodeChanges(changes)
         commitPerfAction()
         sfxEmitter.emit('sfx:structure-build')
       } else {
@@ -1468,7 +1509,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
         // resume without committing. Also clear any live overrides
         // the session published (no-op when the session writes to
         // scene directly).
-        useScene.getState().updateNodes(snapshotsToUpdates(drag.snapshots))
+        drag.writes.revert()
         if (drag.historyPaused) {
           resumeSceneHistory(useScene)
           drag.historyPaused = false
@@ -1504,15 +1545,17 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
       ) {
         return
       }
-      drag.session.apply({
-        planPoint: drag.lastPlanPoint,
-        modifiers: {
-          shiftKey: event.shiftKey,
-          altKey: event.altKey,
-          ctrlKey: event.ctrlKey,
-          metaKey: event.metaKey,
-        },
-      })
+      drag.writes.record(() =>
+        drag.session.apply({
+          planPoint: drag.lastPlanPoint,
+          modifiers: {
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+          },
+        }),
+      )
     }
 
     window.addEventListener('pointermove', onPointerMove)
@@ -1542,6 +1585,48 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
 
   const palette = renderCtx?.palette
 
+  const renderEntries = (pass: FloorplanRenderPass) =>
+    entries.map((entry) => (
+      <FloorplanRegistryEntry
+        activeDragId={handleIdForNode(activeDragId, entry.id)}
+        annotationVisibility={annotationVisibility}
+        floorplanMode={floorplanMode}
+        floorplanVisible={floorplanVisible}
+        geometryCacheRef={geometryCacheRef}
+        hatchPatternId={renderCtx?.hatchPatternId}
+        hoveredHandleId={handleIdForNode(hoveredHandleId, entry.id)}
+        interactiveElevators={interactiveElevators}
+        isMarqueeSelectionActive={isMarqueeSelectionActive}
+        key={`${pass}-${entry.id}`}
+        levelDataCacheRef={levelDataCacheRef}
+        levelNodeIdsByType={floorplanData.levelNodeIdsByType}
+        moving={movingNode?.id === entry.id}
+        node={entry.node}
+        nodeId={entry.id}
+        nodes={nodes}
+        onClickStop={handleClickStop}
+        onEntryPointerDown={handleEntryPointerDown}
+        onGroupMovePointerDown={handleGroupMoveHandlePointerDown}
+        onHandleHoverChange={setHoveredHandleId}
+        onHandleDoubleClick={commitAffordanceAction}
+        onHandlePointerDown={startAffordanceDrag}
+        palette={palette}
+        unitFocus={unitFocus}
+        pass={pass}
+        sceneRotationDeg={sceneRotationDeg}
+        setMovingNode={setMovingNode}
+        setMovingNodeOrigin={setMovingNodeOrigin}
+        siblingEpoch={entry.dependsOnSiblingInputs ? (siblingEpochs.get(entry.id) ?? 0) : 0}
+        unit={unit}
+        metricNotation={metricNotation}
+        wallDimensionReference={effectiveWallDimensionReference}
+        visibilityRootId={
+          entry.visibilityRootId ?? (entry.ctxOverrides ? undefined : (levelId as AnyNodeId))
+        }
+        ctxOverrides={entry.ctxOverrides}
+      />
+    ))
+
   return (
     // The outer wrapper stops `click` events that escape an entry's
     // `onClick={handleClickStop}`. The base+overlay split means
@@ -1567,48 +1652,10 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
           strokes, hatches). Lower-rank kinds (zones) paint first so
           higher-rank kinds (slabs, then walls / items / shelves) layer
           on top in the expected document-order z-stack. */}
-      <g className="floorplan-registry-base">
-        {entries.map((entry) => (
-          <FloorplanRegistryEntry
-            activeDragId={handleIdForNode(activeDragId, entry.id)}
-            annotationVisibility={annotationVisibility}
-            floorplanMode={floorplanMode}
-            floorplanVisible={floorplanVisible}
-            geometryCacheRef={geometryCacheRef}
-            hatchPatternId={renderCtx?.hatchPatternId}
-            hoveredHandleId={handleIdForNode(hoveredHandleId, entry.id)}
-            interactiveElevators={interactiveElevators}
-            isMarqueeSelectionActive={isMarqueeSelectionActive}
-            key={`base-${entry.id}`}
-            levelDataCacheRef={levelDataCacheRef}
-            levelNodeIdsByType={floorplanData.levelNodeIdsByType}
-            moving={movingNode?.id === entry.id}
-            node={entry.node}
-            nodeId={entry.id}
-            nodes={nodes}
-            onClickStop={handleClickStop}
-            onEntryPointerDown={handleEntryPointerDown}
-            onGroupMovePointerDown={handleGroupMoveHandlePointerDown}
-            onHandleHoverChange={setHoveredHandleId}
-            onHandleDoubleClick={commitAffordanceAction}
-            onHandlePointerDown={startAffordanceDrag}
-            palette={palette}
-            unitFocus={unitFocus}
-            pass="base"
-            sceneRotationDeg={sceneRotationDeg}
-            setMovingNode={setMovingNode}
-            setMovingNodeOrigin={setMovingNodeOrigin}
-            siblingEpoch={entry.dependsOnSiblingInputs ? (siblingEpochs.get(entry.id) ?? 0) : 0}
-            unit={unit}
-            metricNotation={metricNotation}
-            wallDimensionReference={effectiveWallDimensionReference}
-            visibilityRootId={
-              entry.visibilityRootId ?? (entry.ctxOverrides ? undefined : (levelId as AnyNodeId))
-            }
-            ctxOverrides={entry.ctxOverrides}
-          />
-        ))}
-      </g>
+      <g className="floorplan-registry-base">{renderEntries('base')}</g>
+      <RoomHighlight2D levelId={levelId} />
+      <RoomLabels2D levelId={levelId} />
+      <FloorRegionControls2D levelId={levelId} />
       {/* Overlay pass — interactive handles (vertex / midpoint / edge /
           move) and labels (text / dimensions). Painted after every base
           entry so polygon-editor chrome on a selected slab stays above
@@ -1616,49 +1663,16 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
           slab + wall geometry sitting on top of the zone. Each overlay
           still routes through the same selection-handling `<g>` so a
           click on a zone's name selects the zone. */}
-      <g className="floorplan-registry-overlay">
-        {entries.map((entry) => (
-          <FloorplanRegistryEntry
-            activeDragId={handleIdForNode(activeDragId, entry.id)}
-            annotationVisibility={annotationVisibility}
-            floorplanMode={floorplanMode}
-            floorplanVisible={floorplanVisible}
-            geometryCacheRef={geometryCacheRef}
-            hatchPatternId={renderCtx?.hatchPatternId}
-            hoveredHandleId={handleIdForNode(hoveredHandleId, entry.id)}
-            interactiveElevators={interactiveElevators}
-            isMarqueeSelectionActive={isMarqueeSelectionActive}
-            key={`overlay-${entry.id}`}
-            levelDataCacheRef={levelDataCacheRef}
-            levelNodeIdsByType={floorplanData.levelNodeIdsByType}
-            moving={movingNode?.id === entry.id}
-            node={entry.node}
-            nodeId={entry.id}
-            nodes={nodes}
-            onClickStop={handleClickStop}
-            onEntryPointerDown={handleEntryPointerDown}
-            onGroupMovePointerDown={handleGroupMoveHandlePointerDown}
-            onHandleHoverChange={setHoveredHandleId}
-            onHandleDoubleClick={commitAffordanceAction}
-            onHandlePointerDown={startAffordanceDrag}
-            palette={palette}
-            unitFocus={unitFocus}
-            pass="overlay"
-            sceneRotationDeg={sceneRotationDeg}
-            setMovingNode={setMovingNode}
-            setMovingNodeOrigin={setMovingNodeOrigin}
-            siblingEpoch={entry.dependsOnSiblingInputs ? (siblingEpochs.get(entry.id) ?? 0) : 0}
-            unit={unit}
-            metricNotation={metricNotation}
-            wallDimensionReference={effectiveWallDimensionReference}
-            visibilityRootId={
-              entry.visibilityRootId ?? (entry.ctxOverrides ? undefined : (levelId as AnyNodeId))
-            }
-            ctxOverrides={entry.ctxOverrides}
-          />
-        ))}
-      </g>
+      <g className="floorplan-registry-overlay">{renderEntries('overlay')}</g>
+      {/* Handles pass — every grabbable handle above every node's overlay,
+          so a neighbour's outline never covers a selected wall's corner. */}
+      <g className="floorplan-registry-handles">{renderEntries('handles')}</g>
+      <RoomHandles2D levelId={levelId} />
+      <RoomHandleDragPreview2D levelId={levelId} />
       <FloorplanAnnotationLayoutResolver active={floorplanVisible} />
+      {/* Click-to-type dimension labels. Portals its HTML input to
+          document.body, so mounting it inside the SVG tree is safe. */}
+      <FloorplanDimensionEditOverlay />
       {/* Dashed group bbox — shows what a group drag carries along while a
           multi-selection exists, rides the live delta mid-drag, and doubles
           as the group's whole-area drag handle. */}
@@ -2021,18 +2035,37 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   wallDimensionReference,
   visibilityRootId,
 }: FloorplanRegistryEntryProps): React.ReactElement | null {
+  // A node an agent just built is drawn on its construction-reveal turn, as in 3D.
+  const revealWaiting = useRevealWaiting(nodeId)
+  const revealActive = useRevealPlanActive(nodeId)
+  const entryRef = useRef<SVGGElement>(null)
   const selected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
   const highlighted = useViewer((state) => state.previewSelectedIds.includes(nodeId))
-  const suppressHandles = useViewer(
+  const multiSelected = useViewer(
     (state) =>
       state.selection.selectedIds.length > 1 && state.selection.selectedIds.includes(nodeId),
   )
+  // A ceiling's vertex / edge handles belong to its Edit ceiling session.
+  const ceilingWithoutSession = useCeilingEditSession(
+    (state) => node.type === 'ceiling' && state.session?.ceilingId !== nodeId,
+  )
+  const suppressHandles = multiSelected || ceilingWithoutSession
   const selectedLevelId = useViewer((state) => state.selection.levelId)
   const selectionProxyId = resolveSelectionProxyId(
     node,
     nodes as Record<string, AnyNode | undefined>,
   )
-  const hovered = useViewer((state) => state.hoveredId === selectionProxyId)
+  const phase = useEditor((state) => state.phase)
+  const hoverTargetId =
+    phase === 'site' ? (resolveCanvasBuildingId(node, nodes) ?? selectionProxyId) : selectionProxyId
+  // What a chat chip points at (`pointedIds`) lights as a hover does, as it does in 3D: the node
+  // itself, or what a hover on it would light.
+  const hovered = useViewer(
+    (state) =>
+      state.hoveredId === hoverTargetId ||
+      state.pointedIds.includes(nodeId) ||
+      state.pointedIds.includes(hoverTargetId),
+  )
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const referencedAnnotationRole = useViewer((state) =>
     floorplanEntryReferencedAnnotationRole(node, nodes, new Set(state.selection.selectedIds)),
@@ -2041,7 +2074,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
     state.activeRotateNodeId === nodeId ? nodeId : null,
   )
   const groupMoveCursor =
-    suppressHandles && classifyParticipant(node, selectedLevelId, nodes) !== null
+    multiSelected && classifyParticipant(node, selectedLevelId, nodes) !== null
   const live = useLiveTransforms((s) => (floorplanVisible ? s.transforms.get(nodeId) : undefined))
   const liveOverride = useLiveNodeOverrides((s) =>
     floorplanVisible ? s.overrides.get(nodeId) : undefined,
@@ -2066,25 +2099,55 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
 
   // Mirror the sidebar tree nodes' hover wiring — `useViewer.hoveredId` drives
   // the highlight halo in 3D as well as registry floor-plan hover strokes.
-  const handlePointerEnter = useCallback(() => {
-    const currentNode = useScene.getState().nodes[nodeId]
-    setHoveredId(
-      currentNode
-        ? resolveSelectionProxyId(
-            currentNode,
-            useScene.getState().nodes as Record<string, AnyNode | undefined>,
-          )
-        : nodeId,
-    )
-  }, [nodeId, setHoveredId])
+  const handlePointerEnter = useCallback(
+    (event: ReactPointerEvent<SVGGElement>) => {
+      if (floorplanEntryYieldsToToolNow() || !isIdle(useInteractionScope.getState().scope)) return
+      const currentNode = useScene.getState().nodes[nodeId]
+      if (currentNode && useEditor.getState().phase === 'site') {
+        const buildingId = resolveCanvasBuildingId(currentNode, useScene.getState().nodes)
+        if (buildingId) {
+          setHoveredId(buildingId)
+          return
+        }
+      }
+      if (currentNode?.type === 'zone' && roomPickingEnabled()) {
+        hoverZoneArea(nodeId, selectionModifiersFromEvent(event))
+        return
+      }
+      const point = clientToPlan(event.clientX, event.clientY)
+      if (
+        point &&
+        roomPickingEnabled() &&
+        hoverRoomFromHit(
+          resolvePlanRoomHit(nodeId, point),
+          selectionModifiersFromEvent(event),
+          nodeId,
+        )
+      )
+        return
+      setHoveredId(
+        currentNode
+          ? resolveSelectionProxyId(
+              currentNode,
+              useScene.getState().nodes as Record<string, AnyNode | undefined>,
+            )
+          : nodeId,
+      )
+    },
+    [nodeId, setHoveredId],
+  )
 
   const handlePointerLeave = useCallback(() => {
+    useEditor.getState().setHoveredRoom(null)
     const node = useScene.getState().nodes[nodeId]
     const targetId = node
-      ? resolveSelectionProxyId(
-          node,
-          useScene.getState().nodes as Record<string, AnyNode | undefined>,
-        )
+      ? useEditor.getState().phase === 'site'
+        ? (resolveCanvasBuildingId(node, useScene.getState().nodes) ??
+          resolveSelectionProxyId(node, useScene.getState().nodes))
+        : resolveSelectionProxyId(
+            node,
+            useScene.getState().nodes as Record<string, AnyNode | undefined>,
+          )
       : nodeId
     if (useViewer.getState().hoveredId === targetId) setHoveredId(null)
   }, [nodeId, setHoveredId])
@@ -2160,7 +2223,7 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
     wallDimensionReference,
     visibilityRootId,
   })
-  const rawGeometry = cacheEntry ? (pass === 'base' ? cacheEntry.base : cacheEntry.overlay) : null
+  const rawGeometry = cacheEntry ? cacheEntry[pass] : null
   const visibleGeometry = rawGeometry
     ? filterFloorplanAnnotationGeometry(rawGeometry, presentationVisibility)
     : null
@@ -2168,10 +2231,11 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
   // dimension chrome (all of which live in the overlay pass) while keeping
   // its highlighted body geometry.
   const geometry =
-    visibleGeometry && suppressHandles && pass === 'overlay'
+    visibleGeometry && suppressHandles && pass !== 'base'
       ? stripHandleChrome(visibleGeometry)
       : visibleGeometry
-  if (!geometry) return null
+  useFloorplanReveal(nodeId, entryRef, cacheEntry, revealWaiting, revealActive)
+  if (revealWaiting || !geometry) return null
 
   const entryClick = isMarqueeSelectionActive ? undefined : onClickStop
   const entryPointerDown = isMarqueeSelectionActive ? undefined : handlePointerDown
@@ -2180,9 +2244,11 @@ const FloorplanRegistryEntry = memo(function FloorplanRegistryEntry({
     <g
       className="floorplan-registry-entry"
       data-node-id={nodeId}
+      ref={entryRef}
       onClick={entryClick}
       onPointerDown={entryPointerDown}
       onPointerEnter={handlePointerEnter}
+      onPointerMove={handlePointerEnter}
       onPointerLeave={handlePointerLeave}
       style={groupMoveCursor ? MOVE_CURSOR_STYLE : POINTER_CURSOR_STYLE}
     >
@@ -2401,6 +2467,7 @@ export function buildFloorplanEntryGeometry({
     selected,
     unit,
     metricNotation,
+    roomLabelOverlay: true,
     wallDimensionReference,
     highlighted,
     hovered,
@@ -2426,6 +2493,7 @@ export function buildFloorplanEntryGeometry({
           automaticDimensions,
           metricNotation,
           purpose: 'edit',
+          roomLabelOverlay: true,
           wallDimensionReference,
         }),
         viewState: palette
@@ -2467,10 +2535,13 @@ export function buildFloorplanEntryGeometry({
           transform: ctxOverrides.outputTransform,
         }
       : unprojectedGeometry
-  const { base, overlay } = geometry
+  const { base, overlay: overlayWithHandles } = geometry
     ? splitFloorplanOverlay(geometry)
     : { base: null, overlay: null }
-  const entry: CacheEntry = { deps, base, overlay, node: effectiveNode }
+  const { rest: overlay, handles } = overlayWithHandles
+    ? splitFloorplanHandles(overlayWithHandles)
+    : { rest: null, handles: null }
+  const entry: CacheEntry = { deps, base, overlay, handles, node: effectiveNode }
   geometryCache.set(nodeId, entry)
   return entry
 }
@@ -2619,6 +2690,7 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
       }
       case 'endpoint-handle': {
         if (!palette) return <></>
+        const endpointUnitsPerPixel = g.screenSized ? unitsPerPixel : handleUnitsPerPixel
         const handleId = makeHandleId(nodeId, g.payload)
         const doubleClickAffordance = floorplanHandleDoubleClickAffordance(g)
         const isHovered = hoveredHandleId === handleId
@@ -2644,10 +2716,10 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
             : palette.endpointHandleFill
         const outerRadius =
           (isActive ? ENDPOINT_HANDLE_ACTIVE_RADIUS_PX : ENDPOINT_HANDLE_SELECTED_RADIUS_PX) *
-          handleUnitsPerPixel
+          endpointUnitsPerPixel
         const dotRadius =
           (isActive ? ENDPOINT_HANDLE_ACTIVE_DOT_RADIUS_PX : ENDPOINT_HANDLE_DOT_RADIUS_PX) *
-          handleUnitsPerPixel
+          endpointUnitsPerPixel
         return (
           <g
             key={keyHint}
@@ -2663,7 +2735,7 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
               r={outerRadius}
               stroke={hoverStroke}
               strokeOpacity={isActive ? 0.24 : 0.16}
-              strokeWidth={ENDPOINT_HOVER_GLOW_STROKE_WIDTH_PX * handleUnitsPerPixel}
+              strokeWidth={ENDPOINT_HOVER_GLOW_STROKE_WIDTH_PX * endpointUnitsPerPixel}
               style={{ opacity: isHovered || isActive ? 1 : 0, transition: HOVER_TRANSITION }}
               vectorEffect="non-scaling-stroke"
             />
@@ -2675,7 +2747,7 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
               r={outerRadius}
               stroke={hoverStroke}
               strokeOpacity={isActive ? 0.72 : 0.52}
-              strokeWidth={ENDPOINT_HOVER_RING_STROKE_WIDTH_PX * handleUnitsPerPixel}
+              strokeWidth={ENDPOINT_HOVER_RING_STROKE_WIDTH_PX * endpointUnitsPerPixel}
               style={{ opacity: isHovered || isActive ? 1 : 0, transition: HOVER_TRANSITION }}
               vectorEffect="non-scaling-stroke"
             />
@@ -2923,12 +2995,13 @@ export const InteractiveGeometry = memo(function InteractiveGeometry({
         // body (matches the 3D `HANDLE_OFFSET`).
         const bi = 0.03 // base inset
         const arrowD = `M ${bi},${-sh} L ${bi + sl},${-sh} L ${bi + sl},${-hh} L ${bi + sl + hl},0 L ${bi + sl},${hh} L ${bi + sl},${sh} L ${bi},${sh} Z`
-        // Indigo palette to match the 3D `WallMoveSideHandles` arrows
+        // Indigo palette to match the 3D wall push arrows
         // (`ARROW_COLOR` / `ARROW_HOVER_COLOR`) and the corner-sphere
         // accent in `floating-action-menu.tsx`.
         const fill = isHovered ? '#a5b4fc' : '#8381ed'
         const angleDeg = (g.angle * 180) / Math.PI
-        const cursor = g.affordance ? 'ew-resize' : 'move'
+        const cursor =
+          g.affordance === WALL_PUSH_AFFORDANCE ? 'grab' : g.affordance ? 'ew-resize' : 'move'
         const affordance = g.affordance
         const payload = g.payload
         // No hover-grow: a scaling transform would enlarge the hit area
@@ -3515,6 +3588,42 @@ export function splitFloorplanOverlay(g: FloorplanGeometry): {
   return { base: g, overlay: null }
 }
 
+/** The kinds a pointer grabs: they paint and hit-test above every node's outline. */
+const HANDLE_KINDS = new Set<FloorplanGeometry['kind']>([
+  'endpoint-handle',
+  'midpoint-handle',
+  'edge-handle',
+  'move-handle',
+  'move-arrow',
+  'rotate-arrow',
+])
+
+/**
+ * Splits an overlay tree into its grabbable handles and the rest (labels,
+ * dimensions, outlines). The handles render in a pass of their own after
+ * every node's overlay: an outline painted later (a neighbouring wall's body)
+ * would otherwise cover a selected wall's corner handle and take its press —
+ * the 2D twin of the 3D handle hit priority.
+ */
+export function splitFloorplanHandles(g: FloorplanGeometry): {
+  rest: FloorplanGeometry | null
+  handles: FloorplanGeometry | null
+} {
+  if (HANDLE_KINDS.has(g.kind)) return { rest: null, handles: g }
+  if (g.kind !== 'group') return { rest: g, handles: null }
+  const rest: FloorplanGeometry[] = []
+  const handles: FloorplanGeometry[] = []
+  for (const child of g.children) {
+    const split = splitFloorplanHandles(child)
+    if (split.rest) rest.push(split.rest)
+    if (split.handles) handles.push(split.handles)
+  }
+  return {
+    rest: rest.length ? { ...g, children: rest } : null,
+    handles: handles.length ? { ...g, children: handles } : null,
+  }
+}
+
 /**
  * Per-node edit chrome hidden while a multi-selection is active: the group is
  * manipulated as one rigid piece (drag to move, R/T to rotate), so individual
@@ -3703,29 +3812,6 @@ function depsValueEqual(a: unknown, b: unknown): boolean {
  */
 export { floorplanLayerRank }
 
-function deepEqual(a: unknown, b: unknown): boolean {
-  if (a === b) return true
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) return false
-    for (let i = 0; i < a.length; i++) {
-      if (!deepEqual(a[i], b[i])) return false
-    }
-    return true
-  }
-  if (typeof a === 'object' && typeof b === 'object' && a !== null && b !== null) {
-    const aKeys = Object.keys(a as Record<string, unknown>)
-    const bKeys = Object.keys(b as Record<string, unknown>)
-    if (aKeys.length !== bKeys.length) return false
-    for (const key of aKeys) {
-      if (!deepEqual((a as Record<string, unknown>)[key], (b as Record<string, unknown>)[key])) {
-        return false
-      }
-    }
-    return true
-  }
-  return false
-}
-
 const ROTATION_WEDGE_COLOR = '#8381ed'
 const ROTATION_WEDGE_SEGMENTS = 48