@pascal-app/editor 1.0.3 → 1.0.5

package/src/components/viewer/viewer-scene-header.tsx

@@ -1,104 +1,114 @@
 'use client'
 
-import {
-  type AnyNode,
-  type AnyNodeId,
-  type BuildingNode,
-  getLevelDisplayName,
-  type LevelNode,
-  useScene,
-  type ZoneNode,
-} from '@pascal-app/core'
+import { getLevelDisplayName, type LevelNode, sceneRegistry, useScene } from '@pascal-app/core'
 import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { ArrowLeft, ChevronRight, Layers } from 'lucide-react'
 import Link from 'next/link'
-import type { ReactNode } from 'react'
-import { useShallow } from 'zustand/react/shallow'
+import { type ReactNode, useMemo } from 'react'
 import { cn } from '../../lib/utils'
-import { ViewerUnitsPanel } from './viewer-units-panel'
-
-const getNodeName = (node: AnyNode): string => {
-  if ('name' in node && node.name) return node.name
-  if (node.type === 'wall') return 'Wall'
-  if (node.type === 'fence') return 'Fence'
-  if (node.type === 'item') return (node as { asset: { name: string } }).asset?.name || 'Item'
-  if (node.type === 'slab') return 'Slab'
-  if (node.type === 'ceiling') return 'Ceiling'
-  if (node.type === 'roof') return 'Roof'
-  if (node.type === 'roof-segment') return 'Roof Segment'
-  return node.type
-}
+import {
+  applyViewerClick,
+  frameViewerNode,
+  roomOfObject,
+  selectViewerBuilding,
+  selectViewerLevel,
+  selectViewerRoom,
+  selectViewerUnit,
+  type ViewerCrumb,
+  type ViewerSidebarSection,
+  type ViewerSource,
+  viewerBreadcrumb,
+  viewerSidebarSections,
+} from '../../lib/viewer-selection'
+import { formatRoomArea } from '../editor/room-labels'
 
 export type ViewerSceneHeaderProps = {
   projectName?: string | null
   owner?: { username?: string | null } | null
   onBack?: () => void
   /** Fallback destination when no `onBack` handler is supplied. Must already be
-   *  sanitized by the caller. */
-  backHref?: string
-  /** Extra row under the project info (e.g. likes/fork actions). */
+   *  sanitized by the caller. `null` shows no back arrow (an embedded viewer with
+   *  nowhere to go back to). */
+  backHref?: string | null
+  /** Extra row under the project info (e.g. like and duplicate actions). */
   stats?: ReactNode
+  /** The scene the header navigates; the parametric scene store by default. */
+  source?: ViewerSource
 }
 
+const SECTION_TITLES: Record<ViewerSidebarSection['kind'], string> = {
+  units: 'Units',
+  rooms: 'Rooms',
+  zones: 'Zones',
+}
+
+const parametricObject = (id: string) => sceneRegistry.nodes.get(id)
+
+/**
+ * The navigation of every viewer surface: the project card, the bar (building
+ * › floor › room › element) and the floor list with, under the current floor,
+ * its units, rooms and zones. A row or a crumb selects and frames; the canvas
+ * selects in place (`lib/viewer-selection.ts`).
+ */
 export const ViewerSceneHeader = ({
   projectName,
   owner,
   onBack,
   backHref = '/',
   stats,
+  source: sourceProp,
 }: ViewerSceneHeaderProps) => {
+  const sceneNodes = useScene((s) => s.nodes)
+  const source = useMemo<ViewerSource>(
+    () => sourceProp ?? { nodes: sceneNodes, objectFor: parametricObject },
+    [sourceProp, sceneNodes],
+  )
+  const { nodes } = source
   const selection = useViewer((s) => s.selection)
+  const focusedUnitId = useViewer((s) => s.focusedUnitId)
+  const unit = useViewer((s) => s.unit)
 
-  // Subscribe only to the specific nodes we read so that creating an unrelated
-  // node elsewhere in the scene doesn't re-render this overlay.
-  const firstSelectedId = selection.selectedIds[0] ?? null
-  const building = useScene((s) =>
-    selection.buildingId ? (s.nodes[selection.buildingId] as BuildingNode | undefined) : null,
-  )
-  const level = useScene((s) =>
-    selection.levelId ? (s.nodes[selection.levelId] as LevelNode | undefined) : null,
-  )
-  const zone = useScene((s) =>
-    selection.zoneId ? (s.nodes[selection.zoneId] as ZoneNode | undefined) : null,
-  )
-  const selectedNode = useScene((s) =>
-    firstSelectedId ? (s.nodes[firstSelectedId as AnyNodeId] as AnyNode | undefined) : null,
+  const crumbs = useMemo(
+    () =>
+      viewerBreadcrumb(selection, focusedUnitId, nodes, (nodeId, levelId) =>
+        roomOfObject(nodeId, levelId, source),
+      ),
+    [selection, focusedUnitId, nodes, source],
   )
-  const sceneNodes = useScene((s) => s.nodes)
+  const buildingId = crumbs.find((crumb) => crumb.kind === 'building')?.id ?? null
   // Highest first so the list reads top-down like a building section.
-  const levels = useScene(
-    useShallow((s) => {
-      if (!building) return []
-      return building.children
-        .map((id) => s.nodes[id as AnyNodeId] as LevelNode | undefined)
-        .filter((n): n is LevelNode => n?.type === 'level')
-        .sort((a, b) => b.level - a.level)
-    }),
+  const levels = useMemo(() => {
+    const building = buildingId ? nodes[buildingId] : undefined
+    if (building?.type !== 'building') return []
+    return building.children
+      .map((id) => nodes[id])
+      .filter((node): node is LevelNode => node?.type === 'level')
+      .sort((a, b) => b.level - a.level)
+  }, [buildingId, nodes])
+  const sections = useMemo(
+    () => (selection.levelId ? viewerSidebarSections(selection.levelId, nodes) : []),
+    [selection.levelId, nodes],
   )
 
-  const handleLevelClick = (levelId: LevelNode['id']) => {
-    // When switching levels, deselect zone and items
-    if (levelId !== selection.levelId) markPerfAction('level-switch', levelId)
-    useViewer.getState().setSelection({ levelId })
-  }
-
-  const handleBreadcrumbClick = (depth: 'root' | 'building' | 'level') => {
-    switch (depth) {
-      case 'root':
-        useViewer.getState().resetSelection()
-        break
+  const handleCrumb = (crumb: ViewerCrumb) => {
+    switch (crumb.kind) {
       case 'building':
-        useViewer.getState().setSelection({ levelId: null })
-        break
+        return selectViewerBuilding(source)
       case 'level':
-        useViewer.getState().setSelection({ zoneId: null })
-        break
+        return selectViewerLevel(crumb.id, source)
+      case 'unit':
+        return selectViewerUnit(crumb.id, source)
+      case 'room':
+        return selectViewerRoom(crumb.id, source)
+      case 'node':
+        applyViewerClick({ nodeId: crumb.id, point: null }, nodes)
+        return frameViewerNode(crumb.id, source)
     }
   }
 
   return (
-    <div className="dark absolute top-4 left-4 z-20 flex flex-col gap-3 text-foreground">
-      <div className="corner-smooth pointer-events-auto flex min-w-[200px] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 shadow-elevation-4 backdrop-blur-xl transition-colors duration-200 ease-out">
+    <div className="dark absolute top-4 left-4 z-20 flex max-h-[calc(100%-7rem)] flex-col gap-3 text-foreground">
+      <div className="corner-smooth pointer-events-auto flex min-w-[200px] max-w-[min(28rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 shadow-elevation-4 backdrop-blur-xl transition-colors duration-200 ease-out">
         {/* Project info + back */}
         <div className="flex items-center gap-3 px-3 py-2.5">
           {onBack ? (
@@ -110,7 +120,7 @@ export const ViewerSceneHeader = ({
             >
               <ArrowLeft className="h-4 w-4 text-muted-foreground" />
             </button>
-          ) : (
+          ) : backHref === null ? null : (
             <Link
               aria-label="Back"
               className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-white/10"
@@ -139,101 +149,127 @@ export const ViewerSceneHeader = ({
           <div className="flex items-center gap-1 border-border/40 border-t px-3 py-2">{stats}</div>
         )}
 
-        {/* Breadcrumb — only shown when navigated into a building */}
-        {building && (
-          <div className="border-border/40 border-t px-3 py-2">
-            <div className="flex items-center gap-1.5 text-xs">
-              <button
-                className="text-muted-foreground transition-colors hover:text-foreground"
-                onClick={() => handleBreadcrumbClick('root')}
-              >
-                Site
-              </button>
-
-              <ChevronRight className="h-3 w-3 text-muted-foreground/50" />
-              <button
-                className={`truncate transition-colors ${level ? 'text-muted-foreground hover:text-foreground' : 'font-medium text-foreground'}`}
-                onClick={() => handleBreadcrumbClick('building')}
-              >
-                {building.name || 'Building'}
-              </button>
-
-              {level && (
-                <>
-                  <ChevronRight className="h-3 w-3 text-muted-foreground/50" />
+        {crumbs.length > 0 && (
+          <nav
+            aria-label="Selection"
+            className="flex flex-wrap items-center gap-x-1.5 gap-y-1 border-border/40 border-t px-3 py-2 text-xs"
+            data-testid="viewer-breadcrumb"
+          >
+            {crumbs.map((crumb, index) => {
+              const isLast = index === crumbs.length - 1
+              return (
+                <span
+                  className="flex min-w-0 items-center gap-1.5"
+                  key={`${crumb.kind}:${crumb.id}`}
+                >
+                  {index > 0 && <ChevronRight className="h-3 w-3 text-muted-foreground/50" />}
                   <button
-                    className={`truncate transition-colors ${zone ? 'text-muted-foreground hover:text-foreground' : 'font-medium text-foreground'}`}
-                    onClick={() => handleBreadcrumbClick('level')}
+                    className={cn(
+                      'truncate transition-colors',
+                      isLast
+                        ? 'font-medium text-foreground'
+                        : 'text-muted-foreground hover:text-foreground',
+                    )}
+                    data-crumb={crumb.kind}
+                    onClick={() => handleCrumb(crumb)}
+                    type="button"
                   >
-                    {getLevelDisplayName(level)}
+                    {crumb.label}
                   </button>
-                </>
-              )}
-
-              {zone && (
-                <>
-                  <ChevronRight className="h-3 w-3 text-muted-foreground/50" />
-                  <span
-                    className={`truncate transition-colors ${selectedNode ? 'text-muted-foreground' : 'font-medium text-foreground'}`}
-                  >
-                    {zone.name}
-                  </span>
-                </>
-              )}
-
-              {selectedNode && zone && (
-                <>
-                  <ChevronRight className="h-3 w-3 text-muted-foreground/50" />
-                  <span className="truncate font-medium text-foreground">
-                    {getNodeName(selectedNode)}
-                  </span>
-                </>
-              )}
-            </div>
-          </div>
+                </span>
+              )
+            })}
+          </nav>
         )}
       </div>
 
-      {/* Level list (only when a building is selected) */}
-      {building && levels.length > 0 && (
-        <div className="corner-smooth pointer-events-auto flex w-48 flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 py-1 shadow-elevation-4 backdrop-blur-xl transition-colors duration-200 ease-out">
+      {levels.length > 0 && (
+        <div className="corner-smooth pointer-events-auto flex min-h-0 w-56 flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/95 py-1 shadow-elevation-4 backdrop-blur-xl transition-colors duration-200 ease-out">
           <span className="px-3 py-2 font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
             Levels
           </span>
-          <div className="flex flex-col">
+          <div className="flex min-h-0 flex-col overflow-y-auto">
             {levels.map((lvl) => {
               const isSelected = lvl.id === selection.levelId
               return (
-                <button
-                  className={cn(
-                    'group/row relative flex h-8 w-full cursor-pointer select-none items-center border-border/50 border-r border-r-transparent border-b px-3 text-sm transition-all duration-200',
-                    isSelected
-                      ? 'border-r-3 border-r-white bg-accent/50 text-foreground'
-                      : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
-                  )}
-                  key={lvl.id}
-                  onClick={() => handleLevelClick(lvl.id)}
-                >
-                  <div className="flex min-w-0 flex-1 items-center gap-2">
-                    <span
-                      className={cn(
-                        'flex h-4 w-4 shrink-0 items-center justify-center transition-all duration-200',
-                        !isSelected && 'opacity-60 grayscale',
-                      )}
-                    >
-                      <Layers className="h-3.5 w-3.5" />
-                    </span>
-                    <div className="min-w-0 flex-1 truncate text-left">
-                      {getLevelDisplayName(lvl)}
+                <div key={lvl.id}>
+                  <button
+                    className={cn(
+                      'group/row relative flex h-8 w-full cursor-pointer select-none items-center border-border/50 border-r border-r-transparent border-b px-3 text-sm transition-all duration-200',
+                      isSelected
+                        ? 'border-r-3 border-r-white bg-accent/50 text-foreground'
+                        : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
+                    )}
+                    onClick={() => {
+                      if (!isSelected) markPerfAction('level-switch', lvl.id)
+                      selectViewerLevel(lvl.id, source)
+                    }}
+                    type="button"
+                  >
+                    <div className="flex min-w-0 flex-1 items-center gap-2">
+                      <span
+                        className={cn(
+                          'flex h-4 w-4 shrink-0 items-center justify-center transition-all duration-200',
+                          !isSelected && 'opacity-60 grayscale',
+                        )}
+                      >
+                        <Layers className="h-3.5 w-3.5" />
+                      </span>
+                      <div className="min-w-0 flex-1 truncate text-left">
+                        {getLevelDisplayName(lvl)}
+                      </div>
                     </div>
-                  </div>
-                </button>
+                  </button>
+                  {isSelected &&
+                    sections.map((section) => (
+                      <div
+                        className="border-border/50 border-b pb-1"
+                        data-viewer-section={section.kind}
+                        key={section.kind}
+                      >
+                        <span className="block px-3 pt-2 pb-1 pl-9 font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
+                          {SECTION_TITLES[section.kind]}
+                        </span>
+                        {section.rows.map((row) => {
+                          const active =
+                            section.kind === 'units'
+                              ? row.id === focusedUnitId
+                              : row.id === selection.zoneId
+                          return (
+                            <button
+                              className={cn(
+                                'flex h-7 w-full cursor-pointer select-none items-center gap-2 pr-3 pl-9 text-left text-sm transition-colors',
+                                active
+                                  ? 'bg-accent/50 text-foreground'
+                                  : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
+                              )}
+                              key={row.id}
+                              onClick={() =>
+                                section.kind === 'units'
+                                  ? selectViewerUnit(row.id, source)
+                                  : selectViewerRoom(row.id, source)
+                              }
+                              type="button"
+                            >
+                              <span
+                                className="h-2 w-2 shrink-0 rounded-full"
+                                style={{ backgroundColor: row.color }}
+                              />
+                              <span className="min-w-0 flex-1 truncate">{row.label}</span>
+                              <span className="shrink-0 font-mono text-[11px] text-muted-foreground tabular-nums">
+                                {formatRoomArea(row.areaM2, unit)}
+                              </span>
+                            </button>
+                          )
+                        })}
+                      </div>
+                    ))}
+                </div>
               )
             })}
           </div>
         </div>
       )}
-      {building && <ViewerUnitsPanel nodes={sceneNodes} />}
     </div>
   )
 }

package/src/components/viewer/viewer-selection-manager.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { type AnyNodeId, emitter, type NodeEvent, sceneRegistry, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useThree } from '@react-three/fiber'
+import { useEffect } from 'react'
+import { selectionModifiersFromEvent } from '../../lib/selection-routing'
+import {
+  applyViewerClick,
+  applyViewerHover,
+  viewerPickFromNodeEvent,
+} from '../../lib/viewer-selection'
+
+/**
+ * Selection for a parametric viewer surface (the published viewer's fallback,
+ * its embed, the editor's Preview): free-form and room-first, through the same
+ * rules as the baked viewer. Mount it with `<Viewer selectionManager="custom">`.
+ */
+export function ViewerSelectionManager() {
+  const gl = useThree((state) => state.gl)
+
+  useEffect(() => {
+    let clickHandled = false
+    let hoveredFrom: string | null = null
+    const pendingClicks = new Set<number>()
+
+    const onMove = (event: NodeEvent) => {
+      if (useViewer.getState().walkthroughMode) return
+      const pick = viewerPickFromNodeEvent(event, useScene.getState().nodes)
+      if (!pick) return
+      event.stopPropagation()
+      hoveredFrom = event.node.id
+      applyViewerHover(pick, useScene.getState().nodes)
+    }
+    const onLeave = (event: NodeEvent) => {
+      if (event.node.id !== hoveredFrom) return
+      hoveredFrom = null
+      useViewer.getState().setHoveredId(null)
+    }
+    const onClick = (event: NodeEvent) => {
+      if (useViewer.getState().walkthroughMode) return
+      const pick = viewerPickFromNodeEvent(event, useScene.getState().nodes)
+      if (!pick) return
+      event.stopPropagation()
+      clickHandled = true
+      applyViewerClick(
+        pick,
+        useScene.getState().nodes,
+        selectionModifiersFromEvent(event.nativeEvent),
+      )
+    }
+    // A click on nothing selectable clears the room and the element.
+    const onCanvasClick = (event: MouseEvent) => {
+      const viewer = useViewer.getState()
+      if (event.button !== 0 || viewer.walkthroughMode) return
+      if (viewer.cameraDragging || viewer.inputDragging) return
+      const frame = requestAnimationFrame(() => {
+        pendingClicks.delete(frame)
+        if (useViewer.getState().walkthroughMode) return
+        if (clickHandled) {
+          clickHandled = false
+          return
+        }
+        applyViewerClick(null, useScene.getState().nodes)
+      })
+      pendingClicks.add(frame)
+    }
+
+    emitter.on('node:move', onMove)
+    emitter.on('node:enter', onMove)
+    emitter.on('node:leave', onLeave)
+    emitter.on('node:click', onClick)
+    const canvas = gl.domElement
+    canvas.addEventListener('click', onCanvasClick)
+    return () => {
+      emitter.off('node:move', onMove)
+      emitter.off('node:enter', onMove)
+      emitter.off('node:leave', onLeave)
+      emitter.off('node:click', onClick)
+      canvas.removeEventListener('click', onCanvasClick)
+      for (const frame of pendingClicks) cancelAnimationFrame(frame)
+      useViewer.getState().setHoveredId(null)
+    }
+  }, [gl])
+
+  return <ViewerOutlineSync />
+}
+
+/** The selected elements and the hovered one, outlined (rooms highlight instead). */
+function ViewerOutlineSync() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const externalSelectedIds = useViewer((s) => s.externalSelectedIds)
+  const hoveredId = useViewer((s) => s.hoveredId)
+  const outliner = useViewer((s) => s.outliner)
+  const geometryRevision = useViewer((s) => s.geometryRevision)
+  const walkthrough = useViewer((s) => s.walkthroughMode)
+  const nodes = useScene((s) => s.nodes)
+
+  useEffect(() => {
+    void geometryRevision
+    outliner.selectedObjects.length = 0
+    outliner.hoveredObjects.length = 0
+    if (walkthrough) return
+    for (const id of new Set([...selectedIds, ...externalSelectedIds])) {
+      const object = sceneRegistry.nodes.get(id)
+      if (object) outliner.selectedObjects.push(object)
+    }
+    const hovered = hoveredId ? nodes[hoveredId as AnyNodeId] : undefined
+    if (hovered && hovered.type !== 'zone') {
+      const object = sceneRegistry.nodes.get(hovered.id)
+      if (object) outliner.hoveredObjects.push(object)
+    }
+  }, [selectedIds, externalSelectedIds, hoveredId, outliner, nodes, geometryRevision, walkthrough])
+
+  useEffect(
+    () => () => {
+      outliner.selectedObjects.length = 0
+      outliner.hoveredObjects.length = 0
+    },
+    [outliner],
+  )
+
+  return null
+}

package/src/components/viewer/viewer-stage.tsx

@@ -60,7 +60,6 @@ function selectViewerLevel(nodes: Record<string, AnyNode>, levelId: string) {
     selectedIds: [],
     zoneId: null,
   })
-  viewer.setLevelMode('solo')
 }
 
 export function ViewerStage({
@@ -137,7 +136,8 @@ export function ViewerStage({
       if (notify && nextLevelId !== useViewer.getState().selection.levelId) {
         markPerfAction('level-switch', nextLevelId)
       }
-      selectViewerLevel(scene?.nodes ?? useScene.getState().nodes, nextLevelId)
+      if (nextLevelId !== useViewer.getState().selection.levelId)
+        selectViewerLevel(scene?.nodes ?? useScene.getState().nodes, nextLevelId)
       if (notify) onLevelChange?.(nextLevelId)
     },
     [onLevelChange, scene],

package/src/components/viewer-zone-system.tsx

@@ -11,7 +11,6 @@ import useInteractionScope from '../store/use-interaction-scope'
 export const ViewerZoneSystem = () => {
   useFrame(() => {
     const { levelId, zoneId } = useViewer.getState().selection
-    const structureLayer = useEditor.getState().structureLayer
     const nodes = useScene.getState().nodes
     // Snapshot capture is a clean, camera-only surface — zone geometry and
     // tags stay out of the framed shot (mirrors the editor ZoneSystem's gate).
@@ -29,17 +28,13 @@ export const ViewerZoneSystem = () => {
 
       const isOnSelectedLevel = zone.parentId === levelId
 
-      // Keep group visible (so <Html> labels stay active), hide/show meshes only.
-      // Zone geometry: visible in zone mode on the right level, OR when this zone is selected.
-      // The editor ZoneSystem handles the selected zone's opacity animation.
+      // Keep group visible (so <Html> labels stay active), hide/show meshes only:
+      // only the selected zone shows its volume.
       const isSelected = id === zoneId
       // A zone the author hid (sidebar eye) takes the group with it — this
       // per-frame write would otherwise undo the renderer's `visible` prop.
       const nodeVisible = zone.visible !== false
-      const shouldShowGeometry =
-        nodeVisible &&
-        !isCaptureMode &&
-        ((structureLayer === 'zones' && !!levelId && isOnSelectedLevel) || isSelected)
+      const shouldShowGeometry = nodeVisible && !isCaptureMode && isSelected
       if (obj.visible !== nodeVisible) obj.visible = nodeVisible
       obj.traverse((child) => {
         if ((child as Mesh).isMesh) {