@pascal-app/editor 1.0.1 → 1.0.4

package/src/components/viewer/viewer-hover-label.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { nodeDisplayLabel } from '../../lib/node-display-label'
+import { type ViewerNodes, zoneLabel } from '../../lib/viewer-selection'
+
+/** The hovered node's name, for the bottom pill. A room reads as the room. */
+export function viewerHoverLabel(hoveredId: string | null, nodes: ViewerNodes): string | null {
+  const node = hoveredId ? nodes[hoveredId] : undefined
+  if (!node) return null
+  return node.type === 'zone' ? zoneLabel(node) : nodeDisplayLabel(node)
+}
+
+/**
+ * What a click would select, named in a pill above the controls bar. Every
+ * viewer surface's hit source sets the hover (`applyViewerHover`); hidden in
+ * the walkthrough and on devices without a hovering pointer. Names come from
+ * the parametric scene store unless the surface passes its own graph.
+ */
+export function ViewerHoverLabel({ nodes: nodesProp }: { nodes?: ViewerNodes }) {
+  const sceneNodes = useScene((s) => s.nodes)
+  const nodes = nodesProp ?? sceneNodes
+  const label = useViewer((s) => (s.walkthroughMode ? null : viewerHoverLabel(s.hoveredId, nodes)))
+  if (!label) return null
+  return (
+    <div
+      className="pointer-events-none absolute bottom-24 left-1/2 z-20 -translate-x-1/2 rounded-full border border-border/60 bg-background/90 px-3 py-1 text-foreground text-sm shadow-elevation-3 backdrop-blur [@media(hover:none)]:hidden"
+      data-testid="viewer-hover-label"
+    >
+      {label}
+    </div>
+  )
+}

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

@@ -0,0 +1,175 @@
+'use client'
+
+import {
+  type AnyNode,
+  buildUnitReport,
+  sceneRegistry,
+  useScene,
+  type ZoneNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect, useMemo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { resolveRoomAssemblyHeights } from '../../lib/room-assembly-overlay'
+import { roomFloorElevation } from '../../lib/room-handle-drag'
+import { describeZoneOutline, type RoomSelectionRecord } from '../../lib/room-selection'
+import {
+  selectViewerRoom,
+  type ViewerSource,
+  viewerRooms,
+  zoneLabel,
+} from '../../lib/viewer-selection'
+import { RoomAssemblyMesh } from '../editor/room-highlight'
+import {
+  RoomLabelAnchor3D,
+  RoomPillChip,
+  RoomPillsLayer3D,
+  roomLabelEntries,
+  roomLabelsVisible,
+  useFadePresence,
+} from '../editor/room-labels'
+
+/**
+ * Rooms on every viewer surface, as the editor shows them: the editor's pills
+ * on the current floor while nothing but the floor is selected, and the
+ * editor's room highlight on the selected or hovered room (or a focused
+ * unit's rooms). Zones draw no tinted volume here, and their meshes are not
+ * mounted at all, so they never catch a click.
+ */
+export function ViewerRooms({ source }: { source: ViewerSource }) {
+  useEffect(() => {
+    const before = useViewer.getState().showZones
+    useViewer.getState().setShowZones(false)
+    return () => useViewer.getState().setShowZones(before)
+  }, [])
+  const { levelId, zoneId, selectedIds } = useViewer(
+    useShallow((s) => ({
+      levelId: s.selection.levelId,
+      zoneId: s.selection.zoneId,
+      selectedIds: s.selection.selectedIds,
+    })),
+  )
+  const focusedUnitId = useViewer((s) => s.focusedUnitId)
+  const hoveredId = useViewer((s) => s.hoveredId)
+  const walkthrough = useViewer((s) => s.walkthroughMode)
+  const { nodes } = source
+
+  const pillsShown =
+    !!levelId &&
+    !walkthrough &&
+    roomLabelsVisible({
+      phase: 'building',
+      mode: 'select',
+      scopeIdle: true,
+      room: null,
+      zoneId,
+      focusedUnitId,
+      isCaptureMode: false,
+      isThumbnailCapture: false,
+      selectedTypes: selectedIds.map((id) => nodes[id]?.type),
+    })
+
+  // The layer stays mounted through its fade-out, like the editor's.
+  const pillsPresent = useFadePresence(pillsShown)
+
+  const rooms = useMemo(() => (levelId ? viewerRooms(levelId, nodes) : []), [levelId, nodes])
+  const entries = useMemo(() => {
+    if (!levelId) return []
+    const zones = Object.values(nodes).filter(
+      (node): node is ZoneNode =>
+        node.type === 'zone' && node.parentId === levelId && node.visible !== false,
+    )
+    return roomLabelEntries(
+      rooms.filter((room) => nodes[room.zoneId]?.visible !== false),
+      zones,
+    )
+  }, [levelId, nodes, rooms])
+
+  const highlighted = useMemo(() => {
+    if (walkthrough) return []
+    const ids = new Set<string>()
+    if (zoneId) ids.add(zoneId)
+    if (hoveredId && nodes[hoveredId]?.type === 'zone') ids.add(hoveredId)
+    const unit = focusedUnitId ? nodes[focusedUnitId] : undefined
+    if (unit?.type === 'unit') {
+      for (const member of buildUnitReport(unit, nodes).members)
+        if (member.levelId === levelId) ids.add(member.zoneId)
+    }
+    return [...ids].flatMap((id): RoomSelectionRecord[] => {
+      const zone = nodes[id]
+      if (zone?.type !== 'zone' || !zone.parentId) return []
+      const detected = viewerRooms(zone.parentId, nodes).find((room) => room.zoneId === id)
+      return [detected ?? describeZoneOutline(zone.parentId, zone)]
+    })
+  }, [focusedUnitId, hoveredId, levelId, nodes, walkthrough, zoneId])
+
+  return (
+    <>
+      {pillsPresent && levelId ? (
+        <RoomPillsLayer3D
+          entries={entries}
+          levelObject={() => source.objectFor(levelId)}
+          renderLabel={(entry, anchors, elements) => {
+            const zone = nodes[entry.zoneId]
+            if (zone?.type !== 'zone') return null
+            return (
+              <RoomLabelAnchor3D
+                anchors={anchors}
+                entry={entry}
+                floorY={roomFloorElevation(nodes as Record<string, AnyNode>, entry.zoneId)}
+              >
+                <RoomPillChip
+                  areaM2={entry.area}
+                  color={zone.color}
+                  elements={elements}
+                  name={zoneLabel(zone)}
+                  onClick={() => selectViewerRoom(zone.id, source)}
+                  onHover={() => useViewer.getState().setHoveredId(zone.id)}
+                  onLeave={() => {
+                    if (useViewer.getState().hoveredId === zone.id)
+                      useViewer.getState().setHoveredId(null)
+                  }}
+                  view="3d"
+                  zoneId={zone.id}
+                />
+              </RoomLabelAnchor3D>
+            )
+          }}
+          shown={pillsShown}
+        />
+      ) : null}
+      {highlighted.map((room) => (
+        <ViewerRoomHighlight key={room.zoneId} room={room} source={source} />
+      ))}
+    </>
+  )
+}
+
+const parametricObject = (id: string) => sceneRegistry.nodes.get(id)
+
+/** `ViewerRooms` over the parametric scene store. */
+export function ParametricViewerRooms() {
+  const nodes = useScene((s) => s.nodes)
+  const source = useMemo<ViewerSource>(() => ({ nodes, objectFor: parametricObject }), [nodes])
+  return <ViewerRooms source={source} />
+}
+
+function ViewerRoomHighlight({
+  room,
+  source,
+}: {
+  room: RoomSelectionRecord
+  source: ViewerSource
+}) {
+  const heights = useMemo(
+    () => resolveRoomAssemblyHeights(room, source.nodes as Record<string, AnyNode>),
+    [room, source.nodes],
+  )
+  return (
+    <RoomAssemblyMesh
+      heights={heights}
+      levelObject={() => source.objectFor(room.key.levelId)}
+      room={room}
+    />
+  )
+}

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>
   )
 }