@pascal-app/editor 1.0.3 → 1.0.4

package/src/components/editor/index.tsx

@@ -23,6 +23,7 @@ import {
   ViewerPresentations,
 } from '@pascal-app/viewer'
 import {
+  type CSSProperties,
   memo,
   Profiler,
   type ProfilerOnRenderCallback,
@@ -38,11 +39,17 @@ import { ViewerZoneSystem } from '../../components/viewer-zone-system'
 import { type SaveStatus, useAutoSave } from '../../hooks/use-auto-save'
 import { useKeyboard } from '../../hooks/use-keyboard'
 import { useSaveShortcut } from '../../hooks/use-save-shortcut'
+import { useCeilingEditSessionOwner } from '../../lib/ceiling-edit-session'
+import { showsWholeBuilding, useEditorLevelDisplay } from '../../lib/editor-level-display'
+import { isSceneView } from '../../lib/editor-views'
+import { useGestureLifecycleOwner } from '../../lib/gesture-lifecycle'
 import {
   createLocalProjectPresentationPersistence,
   type LocalProjectPresentationPersistence,
 } from '../../lib/local-project-presentation-persistence'
 import { type ActivePaintMaterial, hasActivePaintMaterial } from '../../lib/material-paint'
+import { usePaintRegionHovering } from '../../lib/paint-region-hover'
+import { resetPaintMode, usePaintRegionMode } from '../../lib/paint-region-mode'
 import {
   applySceneGraphToEditor,
   loadSceneFromLocalStorage,
@@ -51,16 +58,17 @@ import {
 } from '../../lib/scene'
 import { disposeSFXBus, initSFXBus } from '../../lib/sfx-bus'
 import { useUnitFocusRules } from '../../lib/units'
+import { useViewerFloorDisplay } from '../../lib/viewer-selection'
 import { type CameraHintAction, useCameraHintFocus } from '../../store/use-camera-hint-focus'
 import useEditor from '../../store/use-editor'
 import useFloorplanMode from '../../store/use-floorplan-mode'
 import useSessionGroups from '../../store/use-session-groups'
+import { paneOfView, VIEW_2D, VIEW_3D, type ViewPaneIndex } from '../../store/view-layout'
 import { CeilingSelectionAffordanceSystem } from '../systems/ceiling/ceiling-selection-affordance-system'
 import { CeilingSystem } from '../systems/ceiling/ceiling-system'
 import { RoofEditSystem } from '../systems/roof/roof-edit-system'
 import { SelectionAffordanceManager } from '../systems/selection-affordance-manager'
 import { StairEditSystem } from '../systems/stair/stair-edit-system'
-import { ZoneLabelEditorSystem } from '../systems/zone/zone-label-editor-system'
 import { ZoneSystem } from '../systems/zone/zone-system'
 import { BoxSelectTool } from '../tools/select/box-select-tool'
 import { ToolManager } from '../tools/tool-manager'
@@ -73,6 +81,7 @@ import { PanelManager } from '../ui/panels/panel-manager'
 import { ErrorBoundary } from '../ui/primitives/error-boundary'
 import { useSidebarStore } from '../ui/primitives/sidebar'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/primitives/tooltip'
+import { RightStack } from '../ui/right-stack'
 import { SceneLoader, SceneLoadFailed } from '../ui/scene-loader'
 import { AppSidebar } from '../ui/sidebar/app-sidebar'
 import type { ExtraPanel } from '../ui/sidebar/icon-rail'
@@ -80,6 +89,9 @@ import { SettingsPanel, type SettingsPanelProps } from '../ui/sidebar/panels/set
 import { SitePanel, type SitePanelProps } from '../ui/sidebar/panels/site-panel'
 import type { SidebarTab } from '../ui/sidebar/tab-bar'
 import { useHostPanels } from '../ui/sidebar/use-plugin-panels'
+import { ViewerHoverLabel } from '../viewer/viewer-hover-label'
+import { ParametricViewerRooms } from '../viewer/viewer-rooms'
+import { ViewerSelectionManager } from '../viewer/viewer-selection-manager'
 import { ViewerStage } from '../viewer/viewer-stage'
 import type { ViewerStageMode } from '../viewer/viewer-stage-modes'
 import { CaptureCameraRig } from './capture-camera-rig'
@@ -93,21 +105,29 @@ import { FloatingActionMenu } from './floating-action-menu'
 import { FloatingBuildingActionMenu } from './floating-building-action-menu'
 import { FloorplanModeCoordinator } from './floorplan-mode-coordinator'
 import { FloorplanPanel } from './floorplan-panel'
+import { FootprintHeightHandle } from './footprint-height-handle'
 import { Grid } from './grid'
 import { GroupFloatingActionMenu } from './group-floating-action-menu'
 import { GroupRotateHandle } from './group-rotate-handle'
 import { GroupSelectionBox3D } from './group-selection-box-3d'
+import { EditorHandleHitPriority } from './handles/handle-hit-priority'
 import { NodeArrowHandles } from './node-arrow-handles'
 import { QuickMeasurementHud } from './quick-measurement-hud'
 import { RiserDiagramPanel } from './riser-diagram-panel'
+import { RoomLabels3D } from './room-labels'
 import { SelectionManager } from './selection-manager'
 import { SiteEdgeLabels } from './site-edge-labels'
 import { SlabHoleHighlights } from './slab-hole-highlights'
 import { SnapshotCaptureOverlay } from './snapshot-capture-overlay'
 import { type SnapshotCameraData, ThumbnailGenerator } from './thumbnail-generator'
+import { VectorEdgeExtractor } from './vector-edge-extractor'
+import { HostView } from './views/host-view'
+import { SceneRegion } from './views/scene-region'
+import { useActiveViewLayout, useEditorViews } from './views/use-editor-views'
 import { WallMeasurementLabel } from './wall-measurement-label'
 import { WallMoveSideHandles } from './wall-move-side-handles'
 import { WallOpeningHighlights } from './wall-opening-highlights'
+import { WallRegionHandles } from './wall-region-handles'
 
 const CAMERA_CONTROLS_HINT_DISMISSED_STORAGE_KEY = 'editor-camera-controls-hint-dismissed:v1'
 const PREVIEW_STAGE_SWITCHER_POSITION =
@@ -117,12 +137,16 @@ const DELETE_CURSOR_BADGE_OFFSET_X = 14
 const DELETE_CURSOR_BADGE_OFFSET_Y = 14
 const PAINT_CURSOR_BADGE_COLOR = '#818cf8'
 const PAINT_CURSOR_BADGE_DISABLED_COLOR = '#94a3b8'
+// Neutral: erasing paints no colour.
+const ERASE_CURSOR_BADGE_COLOR = '#e4e4e7'
 const PAINT_CURSOR_BADGE_OFFSET_X = 14
 const PAINT_CURSOR_BADGE_OFFSET_Y = 14
 const SCENE_READY_FALLBACK_MS = 8000
 const PRESENTATION_PROJECT_NOT_RESTORED = Symbol('presentation-project-not-restored')
 const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
-type PaintCursorBadgeState = 'empty' | 'ready' | 'blocked'
+// `aim`: a region sub-mode off what it draws on — the HUD says where to go; no
+// forbidden sign, since nothing is refused.
+type PaintCursorBadgeState = 'empty' | 'ready' | 'aim' | 'blocked'
 const recordEditorRender: ProfilerOnRenderCallback = (_id, _phase, actualDuration) => {
   if (PERF_OVERLAY_ENABLED) recordPerfSample('react-render', actualDuration)
 }
@@ -130,6 +154,8 @@ const EDITOR_HOVER_STYLES: HoverStyles = {
   default: { visibleColor: 0x00_aa_ff, hiddenColor: 0xf3_ff_47, strength: 5, pulse: true },
   delete: { visibleColor: 0xef_44_44, hiddenColor: 0x99_1b_1b, strength: 6, pulse: false },
   'paint-ready': { visibleColor: 0xf5_9e_0b, hiddenColor: 0xfd_e0_68, strength: 5, pulse: true },
+  // Erasing paints nothing: a neutral outline, no paint colour.
+  'erase-ready': { visibleColor: 0xe4_e4_e7, hiddenColor: 0xa1_a1_aa, strength: 5, pulse: false },
   'paint-disabled': {
     visibleColor: 0x94_a3_b8,
     hiddenColor: 0x47_55_69,
@@ -177,11 +203,20 @@ export interface EditorProps {
   viewerToolbarLeft?: ReactNode
   viewerToolbarRight?: ReactNode
   /**
-   * Full-bleed surface swapped in over the 3D canvas (v2) — e.g. the studio
-   * gallery. The canvas stays mounted underneath (no WebGL re-init) and the
-   * viewer toolbar stays on top so the host's stage switch remains reachable.
+   * Full-bleed surface swapped in over the whole stage (v2) — e.g. a builder
+   * with its own canvas. The scene stays mounted underneath (no WebGL re-init)
+   * and the view bar steps aside. Something to show *beside* the scene is a
+   * view instead (`registerEditorHostView`).
    */
   stageOverlay?: ReactNode
+  /**
+   * Chrome that belongs to the scene (v2), positioned over the 3D and 2D panes
+   * with the level selector and tool dock — e.g. a capture bar. Hidden while
+   * no scene view is on screen.
+   */
+  sceneOverlay?: ReactNode
+  /** Show each pane's view bar (v2, default true). Off for a host that presents one fixed view. */
+  viewBar?: boolean
   /**
    * Docked below the node inspector (v2). Hosts mount the "save as preset"
    * affordance here so it reads as part of the inspector surface and shows
@@ -243,6 +278,9 @@ export interface EditorProps {
   sidebarOverlay?: ReactNode
   viewerBanner?: ReactNode
 
+  /** Shown in the preview header. */
+  projectName?: string | null
+
   // Panel config (passed through to sidebar panels — v1 only)
   settingsPanelProps?: SettingsPanelProps
   sitePanelProps?: SitePanelProps
@@ -422,7 +460,7 @@ type CameraControlHint = {
   alternativeKeys?: ShortcutKey[]
 }
 
-const EDITOR_CAMERA_CONTROL_HINTS: CameraControlHint[] = [
+const CAMERA_CONTROL_HINTS: CameraControlHint[] = [
   {
     action: 'Pan',
     keys: [{ value: 'Space' }, { value: 'Left click' }],
@@ -432,12 +470,6 @@ const EDITOR_CAMERA_CONTROL_HINTS: CameraControlHint[] = [
   { action: 'Zoom', keys: [{ value: 'Scroll' }] },
 ]
 
-const PREVIEW_CAMERA_CONTROL_HINTS: CameraControlHint[] = [
-  { action: 'Pan', keys: [{ value: 'Left click' }] },
-  { action: 'Rotate', keys: [{ value: 'Right click' }] },
-  { action: 'Zoom', keys: [{ value: 'Scroll' }] },
-]
-
 const CAMERA_SHORTCUT_KEY_META: Record<string, { icon?: string; label: string; text?: string }> = {
   'Left click': {
     icon: 'ph:mouse-left-click-fill',
@@ -544,14 +576,8 @@ function CameraControlHintItem({ hint }: { hint: CameraControlHint }) {
   )
 }
 
-function ViewerCanvasControlsHint({
-  isPreviewMode,
-  onDismiss,
-}: {
-  isPreviewMode: boolean
-  onDismiss: () => void
-}) {
-  const all = isPreviewMode ? PREVIEW_CAMERA_CONTROL_HINTS : EDITOR_CAMERA_CONTROL_HINTS
+function ViewerCanvasControlsHint({ onDismiss }: { onDismiss: () => void }) {
+  const all = CAMERA_CONTROL_HINTS
   // A host teaching one gesture at a time narrows this to the one it is asking
   // for, and to nothing once it is done. Null — the default — is all of them.
   const focus = useCameraHintFocus((state) => state.actions)
@@ -680,26 +706,31 @@ function PaintCursorBadge({
   swatchColor,
   swatchImageUrl,
   isEraser,
+  isPicker = false,
 }: {
   position: { x: number; y: number }
   state: PaintCursorBadgeState
   swatchColor: string
   swatchImageUrl?: string
   isEraser: boolean
+  /** The eyedropper: the swatch is what a click would take. */
+  isPicker?: boolean
 }) {
   const accentColor =
     state === 'ready'
       ? isEraser
-        ? PAINT_CURSOR_BADGE_COLOR
+        ? ERASE_CURSOR_BADGE_COLOR
         : swatchColor
       : PAINT_CURSOR_BADGE_DISABLED_COLOR
-  const iconOpacity = state === 'ready' ? 1 : state === 'blocked' ? 0.62 : 0.42
+  const iconOpacity = state === 'ready' ? 1 : state === 'blocked' || state === 'aim' ? 0.62 : 0.42
   const lineHeight = 18
 
   return (
     <div
       aria-hidden="true"
       className="pointer-events-none absolute z-40"
+      data-paint-cursor-state={state}
+      data-paint-cursor-tool={isEraser ? 'erase' : isPicker ? 'pick' : 'paint'}
       style={{
         left: position.x,
         top: position.y,
@@ -721,29 +752,32 @@ function PaintCursorBadge({
           transform: `translate(-50%, calc(-100% - ${lineHeight}px))`,
         }}
       >
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
-          alt=""
-          aria-hidden="true"
-          className="h-5 w-5 object-contain drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
-          src="/icons/paint.webp"
-          style={{
-            filter: state === 'ready' ? undefined : 'grayscale(1)',
-            opacity: iconOpacity,
-          }}
-        />
-        {state === 'ready' ? (
-          isEraser ? (
-            <span className="-right-1 -bottom-1 absolute flex h-3.5 w-3.5 items-center justify-center rounded-full border border-white/35 bg-zinc-950 text-white shadow-[0_2px_6px_rgba(0,0,0,0.45)]">
-              <Icon
-                aria-hidden="true"
-                color="currentColor"
-                height={10}
-                icon="mdi:eraser-variant"
-                width={10}
-              />
-            </span>
-          ) : (
+        {isPicker || isEraser ? (
+          // The eyedropper and the eraser carry their own tool, never a paint colour.
+          <Icon
+            aria-hidden="true"
+            className="text-white"
+            color="currentColor"
+            height={18}
+            icon={isEraser ? 'mdi:eraser-variant' : 'lucide:pipette'}
+            style={{ opacity: iconOpacity }}
+            width={18}
+          />
+        ) : (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          <img
+            alt=""
+            aria-hidden="true"
+            className="h-5 w-5 object-contain drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"
+            src="/icons/paint.webp"
+            style={{
+              filter: state === 'ready' ? undefined : 'grayscale(1)',
+              opacity: iconOpacity,
+            }}
+          />
+        )}
+        {state === 'ready' || state === 'aim' ? (
+          isEraser ? null : (
             <span
               className="-right-1 -bottom-1 absolute h-3.5 w-3.5 rounded-full border border-white/70 bg-cover bg-center shadow-[0_2px_6px_rgba(0,0,0,0.45)]"
               style={{
@@ -751,6 +785,7 @@ function PaintCursorBadge({
                 backgroundImage: swatchImageUrl
                   ? `url(${JSON.stringify(swatchImageUrl)})`
                   : undefined,
+                opacity: state === 'aim' ? 0.55 : 1,
               }}
             />
           )
@@ -815,16 +850,20 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       <SceneEnvironment />
       {!(isFirstPersonMode || isStudioMode || isCaptureMode) && <SelectionManager />}
       {!(noEditing || isXRMode) && <BoxSelectTool />}
+      {!noEditing && <EditorHandleHitPriority />}
       {!noEditing && <NodeArrowHandles />}
+      {!noEditing && <FootprintHeightHandle />}
       {!noEditing && <GroupRotateHandle />}
       {!noEditing && <GroupSelectionBox3D />}
       {!noEditing && <WallOpeningHighlights />}
       {!noEditing && <SlabHoleHighlights />}
       {!noEditing && <WallMoveSideHandles />}
+      {!noEditing && <WallRegionHandles />}
       {!noEditing && <FenceTangentLines3D />}
       {!(noEditing || isXRMode) && <FloatingActionMenu />}
       {!(noEditing || isXRMode) && <GroupFloatingActionMenu />}
       {!(noEditing || isXRMode) && <FloatingBuildingActionMenu />}
+      {!(noEditing || isXRMode) && <RoomLabels3D />}
       {!(isFirstPersonMode || isXRMode) && <WallMeasurementLabel />}
       <ExportManager />
       {isFirstPersonMode ? <ViewerZoneSystem /> : <ZoneSystem />}
@@ -839,8 +878,8 @@ const ViewerSceneContent = memo(function ViewerSceneContent({
       {isCaptureMode && !isXRMode && <CaptureCameraRig />}
       {!isXRMode && <CustomCameraControls />}
       {!isXRMode && <ThumbnailGenerator onThumbnailCapture={onThumbnailCapture} />}
+      {!isXRMode && <VectorEdgeExtractor />}
       {!(isFirstPersonMode || isXRMode) && <SiteEdgeLabels />}
-      <InteractiveSystem />
       {presentationsReady ? <ViewerPresentations /> : null}
       {!noEditing && viewerSceneSlot}
     </>
@@ -933,7 +972,10 @@ function PaintCursorLayer({
 }) {
   const mode = useEditor((s) => s.mode)
   const activePaintMaterial = useEditor((s) => s.activePaintMaterial)
-  const paintEraser = useEditor((s) => s.paintEraser)
+  const paintMode = usePaintRegionMode((s) => s.mode)
+  const picked = usePaintRegionMode((s) => s.picked)
+  const paintEraser = paintMode === 'erase'
+  const picking = paintMode === 'pick'
   const paintHover = useEditor((s) => s.paintHover)
   const sceneMaterials = useScene((s) => s.materials)
   const [position, setPosition] = useState<{ x: number; y: number } | null>(null)
@@ -985,14 +1027,26 @@ function PaintCursorLayer({
     }
   }, [active, containerRef])
 
-  const hasPaint = paintEraser || hasActivePaintMaterial(activePaintMaterial)
+  const hasPaint = paintEraser || picking || hasActivePaintMaterial(activePaintMaterial)
+  // A region sub-mode reads its own surfaces (walls, floors), not the whole-surface hover.
+  const regionMode = paintMode === 'rectangle' || paintMode === 'polygon'
+  const regionHovering = usePaintRegionHovering()
   const badgeState: PaintCursorBadgeState = !hasPaint
     ? 'empty'
-    : paintHover != null
-      ? 'ready'
-      : 'blocked'
-  const swatchColor = getActivePaintMaterialSwatchColor(activePaintMaterial, sceneMaterials)
-  const swatchImageUrl = getActivePaintMaterialSwatchImageUrl(activePaintMaterial, sceneMaterials)
+    : picking
+      ? picked
+        ? 'ready'
+        : 'aim'
+      : regionMode
+        ? regionHovering
+          ? 'ready'
+          : 'aim'
+        : paintHover != null
+          ? 'ready'
+          : 'blocked'
+  const swatchMaterial = picking ? picked : activePaintMaterial
+  const swatchColor = getActivePaintMaterialSwatchColor(swatchMaterial, sceneMaterials)
+  const swatchImageUrl = getActivePaintMaterialSwatchImageUrl(swatchMaterial, sceneMaterials)
 
   if (!active || !position) return null
 
@@ -1003,6 +1057,7 @@ function PaintCursorLayer({
     >
       <PaintCursorBadge
         isEraser={paintEraser}
+        isPicker={picking}
         position={{ x: 0, y: 0 }}
         state={badgeState}
         swatchColor={swatchColor}
@@ -1012,8 +1067,8 @@ function PaintCursorLayer({
   )
 }
 
-// ── Viewer canvas: memoized, subscribes to viewMode/floorplanPaneRatio internally ──
-// This prevents Editor from re-rendering when those values change.
+// ── Viewer canvas: memoized, subscribes to the view layout internally ──
+// This prevents Editor from re-rendering when the layout changes.
 
 const ViewerCanvas = memo(function ViewerCanvas({
   isVersionPreviewMode,
@@ -1046,12 +1101,20 @@ const ViewerCanvas = memo(function ViewerCanvas({
   disablePostFx?: boolean
   immersive?: ViewerImmersiveSession
 }) {
-  const viewMode = useEditor((s) => s.viewMode)
-  const floorplanPaneRatio = useEditor((s) => s.floorplanPaneRatio)
-  const setFloorplanPaneRatio = useEditor((s) => s.setFloorplanPaneRatio)
+  const layout = useActiveViewLayout()
+  const views = useEditorViews()
   const isPreviewMode = useEditor((s) => s.isPreviewMode)
   const isCaptureMode = useEditor((s) => s.isCaptureMode)
   useUnitFocusRules()
+  const wholeBuilding = useEditor((s) =>
+    showsWholeBuilding({
+      isPreviewMode: s.isPreviewMode,
+      isFirstPersonMode,
+      captureMode: s.captureMode,
+      captureLevelId: s.captureLevelId,
+    }),
+  )
+  useEditorLevelDisplay(wholeBuilding)
   const presetIsolation = useEditor((s) =>
     s.captureMode.mode === 'preset' ? s.captureMode.isolated : null,
   )
@@ -1069,25 +1132,24 @@ const ViewerCanvas = memo(function ViewerCanvas({
     setViewerAreaEl(el)
   }, [])
   const viewer3dRef = useRef<HTMLDivElement>(null)
-  const isResizingFloorplan = useRef(false)
+  const isResizingPanes = useRef(false)
 
-  const handleFloorplanDividerDown = useCallback((e: React.PointerEvent) => {
+  const handlePaneDividerDown = useCallback((e: React.PointerEvent) => {
     e.preventDefault()
-    isResizingFloorplan.current = true
+    isResizingPanes.current = true
     document.body.style.cursor = 'col-resize'
     document.body.style.userSelect = 'none'
   }, [])
 
   useEffect(() => {
     const handlePointerMove = (e: PointerEvent) => {
-      if (!isResizingFloorplan.current) return
+      if (!isResizingPanes.current) return
       if (!viewerAreaRef.current) return
       const rect = viewerAreaRef.current.getBoundingClientRect()
-      const newRatio = (e.clientX - rect.left) / rect.width
-      setFloorplanPaneRatio(Math.max(0.15, Math.min(0.85, newRatio)))
+      useEditor.getState().setViewPaneRatio((e.clientX - rect.left) / rect.width)
     }
     const handlePointerUp = () => {
-      isResizingFloorplan.current = false
+      isResizingPanes.current = false
       document.body.style.cursor = ''
       document.body.style.userSelect = ''
     }
@@ -1097,7 +1159,7 @@ const ViewerCanvas = memo(function ViewerCanvas({
       window.removeEventListener('pointermove', handlePointerMove)
       window.removeEventListener('pointerup', handlePointerUp)
     }
-  }, [setFloorplanPaneRatio])
+  }, [])
 
   useEffect(() => {
     setIsCameraControlsHintVisible(!readCameraControlsHintDismissed())
@@ -1108,91 +1170,128 @@ const ViewerCanvas = memo(function ViewerCanvas({
     writeCameraControlsHintDismissed(true)
   }, [])
 
-  const show2d = viewMode === '2d' || viewMode === 'split'
-  const show3d = viewMode === '3d' || viewMode === 'split'
+  const pane2d = paneOfView(layout, VIEW_2D)
+  const pane3d = paneOfView(layout, VIEW_3D)
+  const show3d = pane3d !== null
+  // Panes are grid cells placed by `gridColumn`, in a fixed DOM order: moving a
+  // view to the other pane restyles it rather than reparenting it, so the 3D
+  // canvas keeps its WebGL context and the plan its session through a swap.
+  const paneStyle = (pane: ViewPaneIndex | null): CSSProperties =>
+    pane === null ? { display: 'none' } : { gridColumn: pane + 1, gridRow: 1 }
+  const hostPanes = ([0, 1] as const).filter(
+    (pane) => (pane === 0 || layout.split) && !isSceneView(layout.panes[pane]),
+  )
+  const focusPane = (pane: ViewPaneIndex) => () => {
+    if (layout.split) useEditor.getState().focusViewPane(pane)
+  }
 
   return (
     <ErrorBoundary fallback={<EditorSceneCrashFallback />}>
       {/* `relative` so the floorplan compass (portaled here to stay visible in
-          2d / 3d / split alike) can anchor to this container's bottom-left. */}
-      <div className="relative flex h-full" ref={setViewerAreaNode}>
+          every layout) can anchor to this container's bottom-left. */}
+      <div className="relative h-full" ref={setViewerAreaNode}>
         <QuickMeasurementHud />
         <DeleteConfirmationDialog />
-        {/* 2D floorplan — always mounted once shown, hidden via CSS to preserve state */}
         <div
-          className="relative h-full flex-shrink-0"
+          className="absolute inset-0 grid"
+          data-view-split={layout.split || undefined}
           style={{
-            width: viewMode === '2d' ? '100%' : `${floorplanPaneRatio * 100}%`,
-            display: show2d ? undefined : 'none',
+            gridTemplateColumns: layout.split
+              ? `minmax(0, ${layout.ratio}fr) minmax(0, ${1 - layout.ratio}fr)`
+              : 'minmax(0, 1fr)',
+            gridTemplateRows: 'minmax(0, 1fr)',
           }}
         >
-          <div className="h-full w-full overflow-hidden">
-            <FloorplanPanel compassHost={viewerAreaEl} floorplanSceneSlot={floorplanSceneSlot} />
-          </div>
-          {viewMode === 'split' && (
-            <div
-              className="absolute inset-y-0 -right-3 z-10 flex w-6 cursor-col-resize items-center justify-center"
-              onPointerDown={handleFloorplanDividerDown}
-            >
-              <div className="h-8 w-1 rounded-full bg-neutral-400" />
+          {/* 2D floorplan — always mounted once shown, hidden via CSS to preserve state */}
+          <div
+            className="relative min-w-0 overflow-hidden"
+            data-view-pane={pane2d ?? undefined}
+            onPointerDownCapture={pane2d === null ? undefined : focusPane(pane2d)}
+            style={paneStyle(pane2d)}
+          >
+            <div className="h-full w-full overflow-hidden">
+              <FloorplanPanel compassHost={viewerAreaEl} floorplanSceneSlot={floorplanSceneSlot} />
             </div>
-          )}
-        </div>
+          </div>
 
-        {/* 3D viewer — always mounted, hidden via CSS to avoid destroying the WebGL context */}
-        <div
-          className="relative min-w-0 flex-1 overflow-hidden"
-          data-pascal-viewer-3d
-          ref={viewer3dRef}
-          style={{ display: show3d ? undefined : 'none' }}
-        >
-          <DeleteCursorLayer
-            containerRef={viewer3dRef}
-            isVersionPreviewMode={isVersionPreviewMode}
-          />
-          <PaintCursorLayer
-            containerRef={viewer3dRef}
-            isVersionPreviewMode={isVersionPreviewMode}
-          />
-          {!showLoader && isCameraControlsHintVisible && !isFirstPersonMode ? (
-            <ViewerCanvasControlsHint
-              isPreviewMode={isPreviewMode}
-              onDismiss={dismissCameraControlsHint}
-            />
-          ) : null}
-          <SelectionPersistenceManager enabled={hasLoadedInitialScene && !showLoader} />
-          <Viewer
-            defaultRender={EDITOR_DEFAULT_RENDER}
-            disablePostFx={disablePostFx}
-            hoverStyles={EDITOR_HOVER_STYLES}
-            isolate={presetIsolation}
-            // Preset captures isolate one subtree and keep the exterior transparent.
-            // Other modes retain the viewer's configured background policy.
-            transparent={presetIsolation === null ? undefined : true}
-            onSceneReadyChange={onSceneReadyChange}
-            renderContext="editor"
-            renderPaused={!show3d && !showLoader}
-            sceneReadyKey={sceneReadyKey}
-            immersive={immersive}
-            // Walk/drone framing during snapshot capture is camera-only: the
-            // viewer's default selection manager would hover-highlight whatever
-            // the cursor crosses, which orbit capture never does.
-            selectionManager={isFirstPersonMode && !isCaptureMode ? 'default' : 'custom'}
+          {/* 3D viewer — always mounted, hidden via CSS to avoid destroying the WebGL context */}
+          <div
+            className="relative min-w-0 overflow-hidden"
+            data-pascal-viewer-3d
+            data-view-pane={pane3d ?? undefined}
+            onPointerDownCapture={pane3d === null ? undefined : focusPane(pane3d)}
+            ref={viewer3dRef}
+            style={paneStyle(pane3d)}
           >
-            <ViewerSceneContent
-              isFirstPersonMode={isFirstPersonMode}
-              isLoading={showLoader}
-              isXRMode={immersive != null}
-              isStudioMode={isStudioMode}
+            <DeleteCursorLayer
+              containerRef={viewer3dRef}
               isVersionPreviewMode={isVersionPreviewMode}
-              onThumbnailCapture={onThumbnailCapture}
-              presentationsReady={presentationsReady}
-              viewerSceneSlot={viewerSceneSlot}
             />
-          </Viewer>
+            <PaintCursorLayer
+              containerRef={viewer3dRef}
+              isVersionPreviewMode={isVersionPreviewMode}
+            />
+            {!showLoader && isCameraControlsHintVisible && !isFirstPersonMode ? (
+              <ViewerCanvasControlsHint onDismiss={dismissCameraControlsHint} />
+            ) : null}
+            <SelectionPersistenceManager enabled={hasLoadedInitialScene && !showLoader} />
+            <Viewer
+              defaultRender={EDITOR_DEFAULT_RENDER}
+              disablePostFx={disablePostFx}
+              hoverStyles={EDITOR_HOVER_STYLES}
+              isolate={presetIsolation}
+              // Preset captures isolate one subtree and keep the exterior transparent.
+              // Other modes retain the viewer's configured background policy.
+              transparent={presetIsolation === null ? undefined : true}
+              onSceneReadyChange={onSceneReadyChange}
+              renderContext="editor"
+              renderPaused={!show3d && !showLoader}
+              sceneReadyKey={sceneReadyKey}
+              immersive={immersive}
+              // Walk/drone framing during snapshot capture is camera-only: the
+              // viewer's default selection manager would hover-highlight whatever
+              // the cursor crosses, which orbit capture never does.
+              selectionManager={isFirstPersonMode && !isCaptureMode ? 'default' : 'custom'}
+            >
+              <ViewerSceneContent
+                isFirstPersonMode={isFirstPersonMode}
+                isLoading={showLoader}
+                isXRMode={immersive != null}
+                isStudioMode={isStudioMode}
+                isVersionPreviewMode={isVersionPreviewMode}
+                onThumbnailCapture={onThumbnailCapture}
+                presentationsReady={presentationsReady}
+                viewerSceneSlot={viewerSceneSlot}
+              />
+            </Viewer>
+          </div>
+
+          {hostPanes.map((pane) => {
+            const viewId = layout.panes[pane]
+            return (
+              <div
+                className="relative min-w-0 overflow-hidden"
+                data-view-pane={pane}
+                key={viewId}
+                onPointerDownCapture={focusPane(pane)}
+                style={paneStyle(pane)}
+              >
+                <HostView key={viewId} view={views.find((view) => view.id === viewId)} />
+              </div>
+            )
+          })}
         </div>
+
+        {layout.split && (
+          <div
+            className="absolute inset-y-0 z-10 flex w-6 -translate-x-1/2 cursor-col-resize items-center justify-center"
+            onPointerDown={handlePaneDividerDown}
+            style={{ left: `${layout.ratio * 100}%` }}
+          >
+            <div className="h-8 w-1 rounded-full bg-neutral-400" />
+          </div>
+        )}
       </div>
-      {!(showLoader || isVersionPreviewMode) && <ZoneLabelEditorSystem />}
     </ErrorBoundary>
   )
 })
@@ -1201,12 +1300,14 @@ function PreviewStage({
   isFirstPersonMode,
   mode,
   onModeChange,
+  projectName,
   showLoader,
   viewerContent,
 }: {
   isFirstPersonMode: boolean
   mode: ViewerStageMode
   onModeChange: (mode: ViewerStageMode) => void
+  projectName?: string | null
   showLoader: boolean
   viewerContent: ReactNode
 }) {
@@ -1222,6 +1323,7 @@ function PreviewStage({
     [onModeChange],
   )
 
+  useViewerFloorDisplay()
   const stageMode = isFirstPersonMode || !hasFloorplan ? '3d' : mode
   const stageModes = hasFloorplan && !isFirstPersonMode ? undefined : (['3d'] as const)
 
@@ -1233,9 +1335,11 @@ function PreviewStage({
         <ViewerOverlay
           hideBottomBar={stageMode !== '3d'}
           onBack={() => useEditor.getState().setPreviewMode(false)}
+          projectName={projectName}
         />
       )}
 
+      {stageMode === '3d' && !isFirstPersonMode ? <ViewerHoverLabel /> : null}
       <ViewerStage
         className="absolute inset-0"
         mode={stageMode}
@@ -1261,6 +1365,8 @@ function EditorContent({
   viewerToolbarLeft,
   viewerToolbarRight,
   stageOverlay,
+  sceneOverlay,
+  viewBar = true,
   inspectorFooter,
   multiSelectionFooter,
   viewerSceneSlot,
@@ -1280,6 +1386,7 @@ function EditorContent({
   immersive,
   sidebarOverlay,
   viewerBanner,
+  projectName,
   settingsPanelProps,
   sitePanelProps,
   extraSidebarPanels,
@@ -1311,8 +1418,9 @@ function EditorContent({
   }, [presentationProjectId])
 
   useKeyboard({ isVersionPreviewMode, disabled: isFirstPersonMode || isStudioMode })
+  useGestureLifecycleOwner()
 
-  const { isLoadingSceneRef, saveNow } = useAutoSave({
+  const { beginSceneLoad, completeSceneLoad, saveNow } = useAutoSave({
     guardAgainstSceneWipe,
     onSave,
     onDirty,
@@ -1352,6 +1460,7 @@ function EditorContent({
     const teardown = initializeEditorRuntime()
     return teardown
   }, [])
+  useCeilingEditSessionOwner()
 
   useEffect(() => {
     void useEditor.persist.rehydrate()
@@ -1361,6 +1470,7 @@ function EditorContent({
   useEffect(() => {
     useViewer.getState().setProjectId(projectId ?? null)
     useFloorplanMode.getState().setProjectId(projectId ?? null)
+    resetPaintMode()
 
     return () => {
       useViewer.getState().setProjectId(null)
@@ -1373,7 +1483,7 @@ function EditorContent({
     let cancelled = false
 
     async function load(attempt: number) {
-      isLoadingSceneRef.current = true
+      beginSceneLoad()
       setSceneLoadError(null)
       setHasLoadedInitialScene(false)
       setIsViewerSceneReady(false)
@@ -1388,6 +1498,9 @@ function EditorContent({
         const sceneGraph = onLoad ? await onLoad() : loadSceneFromLocalStorage()
         if (!cancelled && attempt === sceneLoadAttempt) {
           applySceneGraphToEditor(sceneGraph)
+          // The store holds the loaded graph: autosave resumes now, not on a
+          // frame — a tab loaded while hidden never gets one.
+          completeSceneLoad()
           setIsViewerSceneReady(false)
           setSceneReadyKey((key) => key + 1)
         }
@@ -1404,9 +1517,11 @@ function EditorContent({
           setIsSceneLoading(false)
           if (!failed) {
             setHasLoadedInitialScene(true)
-            requestAnimationFrame(() => {
-              isLoadingSceneRef.current = false
-            })
+            // A project opens in select mode. Rehydrate already drops the
+            // persisted tool, but a host's rail panel may arm a mode of its
+            // own when it mounts, and with a restored rail tab that mount can
+            // land after rehydrate.
+            useEditor.getState().armToolMode({ mode: 'select' })
           }
         }
       }
@@ -1417,7 +1532,7 @@ function EditorContent({
     return () => {
       cancelled = true
     }
-  }, [onLoad, isLoadingSceneRef, sceneLoadAttempt])
+  }, [onLoad, beginSceneLoad, completeSceneLoad, sceneLoadAttempt])
 
   const retrySceneLoad = useCallback(() => {
     setSceneLoadAttempt((attempt) => attempt + 1)
@@ -1486,10 +1601,13 @@ function EditorContent({
 
   const firstPersonPreviousLevelRef = useRef(useViewer.getState().selection.levelId)
   const wasFirstPersonModeRef = useRef(isFirstPersonMode)
+  const firstPersonWasPreviewRef = useRef(isPreviewMode)
 
   useEffect(() => {
     const wasFirstPersonMode = wasFirstPersonModeRef.current
+    const wasPreviewMode = firstPersonWasPreviewRef.current
     wasFirstPersonModeRef.current = isFirstPersonMode
+    firstPersonWasPreviewRef.current = isPreviewMode
 
     if (isFirstPersonMode && !wasFirstPersonMode) {
       const viewer = useViewer.getState()
@@ -1508,7 +1626,8 @@ function EditorContent({
     firstPersonPreviousLevelRef.current = null
     viewer.setWalkthroughMode(false)
 
-    if (!previousLevelId) return
+    // Leaving Preview has already restored the editor's complete selection.
+    if ((wasPreviewMode && !isPreviewMode) || !previousLevelId) return
 
     const previousLevelNode = useScene.getState().nodes[previousLevelId]
     if (previousLevelNode?.type === 'level') {
@@ -1518,7 +1637,7 @@ function EditorContent({
         selectedIds: [],
       })
     }
-  }, [isFirstPersonMode])
+  }, [isFirstPersonMode, isPreviewMode])
 
   const previewViewerContent = (
     <Viewer
@@ -1526,16 +1645,18 @@ function EditorContent({
       disablePostFx={disablePostFx}
       hoverStyles={EDITOR_HOVER_STYLES}
       renderContext="editor"
-      selectionManager="default"
+      selectionManager="custom"
     >
       <ExportManager />
-      <ViewerZoneSystem />
+      <ViewerSelectionManager />
+      <ParametricViewerRooms />
       <CeilingSystem />
       <RoofEditSystem />
       <StairEditSystem />
       {isFirstPersonMode && <FirstPersonControls />}
       <CustomCameraControls />
       <ThumbnailGenerator onThumbnailCapture={onThumbnailCapture} />
+      <VectorEdgeExtractor />
       <InteractiveSystem />
       {presentationsReady ? <ViewerPresentations /> : null}
     </Viewer>
@@ -1605,6 +1726,10 @@ function EditorContent({
         mobileDefaultSnap: 0.5,
         mobileIcon: p.icon,
         icon: p.icon,
+        noPanel: p.noPanel,
+        onSelect: p.onSelect,
+        stageActive: p.stageActive,
+        onDeselect: p.onDeselect,
       })),
     ]
 
@@ -1626,6 +1751,7 @@ function EditorContent({
             isFirstPersonMode={isFirstPersonMode}
             mode={previewStageMode}
             onModeChange={setPreviewStageMode}
+            projectName={projectName}
             showLoader={visibleLoader}
             viewerContent={previewViewerContent}
           />
@@ -1635,25 +1761,27 @@ function EditorContent({
               navbarSlot={navbarSlot}
               overlays={
                 <>
-                  {!(isCaptureMode || stageOverlay) && <FloatingLevelSelector />}
-                  {!(isVersionPreviewMode || isCaptureMode || isStudioMode) && (
-                    <div className="pointer-events-auto">
-                      <ActionMenu />
-                    </div>
-                  )}
-                  {!(isVersionPreviewMode || isCaptureMode || isStudioMode) && (
-                    <div className="pointer-events-auto">
-                      <PanelManager
-                        inspectorFooter={inspectorFooter}
-                        multiSelectionFooter={multiSelectionFooter}
-                      />
-                    </div>
-                  )}
-                  {!isCaptureMode && (
-                    <div className="pointer-events-auto">
-                      <HelperManager />
-                    </div>
-                  )}
+                  <SceneRegion>
+                    {!(isCaptureMode || stageOverlay) && <FloatingLevelSelector />}
+                    {!(isVersionPreviewMode || isCaptureMode || isStudioMode) && (
+                      <div className="pointer-events-auto">
+                        <ActionMenu />
+                      </div>
+                    )}
+                    {sceneOverlay}
+                  </SceneRegion>
+                  {/* The inspector and the shortcuts card share one right column. */}
+                  <RightStack
+                    helper={isCaptureMode ? null : <HelperManager />}
+                    inspector={
+                      isVersionPreviewMode || isCaptureMode || isStudioMode ? null : (
+                        <PanelManager
+                          inspectorFooter={inspectorFooter}
+                          multiSelectionFooter={multiSelectionFooter}
+                        />
+                      )
+                    }
+                  />
                   {/* Capture mode drives walk / drone from its own overlay, which
                       owns the framing chrome — the walkthrough HUD would both
                       clutter the frame and offer a second, conflicting exit. */}
@@ -1670,6 +1798,7 @@ function EditorContent({
               sidebarOverlay={sidebarOverlay}
               sidebarTabs={tabBarTabs}
               stageOverlay={stageOverlay}
+              viewBar={viewBar}
               viewerContent={viewerCanvas}
               viewerToolbarLeft={viewerToolbarLeft}
               viewerToolbarRight={viewerToolbarRight}
@@ -1706,6 +1835,7 @@ function EditorContent({
           isFirstPersonMode={isFirstPersonMode}
           mode={previewStageMode}
           onModeChange={setPreviewStageMode}
+          projectName={projectName}
           showLoader={visibleLoader}
           viewerContent={previewViewerContent}
         />
@@ -1731,12 +1861,7 @@ function EditorContent({
             <div className="pointer-events-auto">
               <ActionMenu />
             </div>
-            <div className="pointer-events-auto">
-              <PanelManager />
-            </div>
-            <div className="pointer-events-auto">
-              <HelperManager />
-            </div>
+            <RightStack helper={<HelperManager />} inspector={<PanelManager />} />
             <RiserDiagramPanel />
             {isFirstPersonMode && (
               <FirstPersonOverlay onExit={() => useEditor.getState().setFirstPersonMode(false)} />