@pascal-app/editor 1.0.3 → 1.0.5

package/src/components/viewer/floorplan-compass-button.tsx

@@ -1,25 +1,33 @@
 'use client'
 
 import type React from 'react'
+import { cn } from '../../lib/utils'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/primitives/tooltip'
 
 export type FloorplanCompassButtonProps = {
   northRotationDeg: number
   onAlignNorth: () => void
   needleRef?: React.RefObject<SVGSVGElement | null>
+  /** Horizontal anchor; defaults to the bottom-left corner. */
+  style?: React.CSSProperties
 }
 
 export function FloorplanCompassButton({
   northRotationDeg,
   onAlignNorth,
   needleRef,
+  style,
 }: FloorplanCompassButtonProps) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <button
           aria-label="Align view to north"
-          className="group pointer-events-auto absolute bottom-3 left-3 z-30 flex h-8 w-8 items-center justify-center rounded-full border border-black/10 bg-white/85 shadow-sm backdrop-blur-md transition hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-neutral-900/85 dark:hover:bg-neutral-900"
+          className={cn(
+            'group pointer-events-auto absolute bottom-3 z-30 flex h-8 w-8 items-center justify-center rounded-full border border-black/10 bg-white/85 shadow-sm backdrop-blur-md transition hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-neutral-900/85 dark:hover:bg-neutral-900',
+            !style && 'left-3',
+          )}
+          style={style}
           onClick={(event) => {
             event.preventDefault()
             event.stopPropagation()

package/src/components/viewer/floorplan-preview.tsx

@@ -6,6 +6,7 @@ import {
   type FloorplanGeometry,
   type FloorplanPalette,
   type GeometryContext,
+  getLevelDisplayName,
   isNodeKindEnabled,
   nodeRegistry,
   useScene,
@@ -143,12 +144,10 @@ function boundsToViewBox(bounds: FloorplanBounds): FloorplanViewBox {
 }
 
 function levelLabel(level: AnyNode): string {
-  const named = (level as { name?: string }).name?.trim()
-  if (named) return named
-  const ordinal = (level as { level?: number }).level ?? 0
-  if (ordinal === 0) return 'Ground floor'
-  if (ordinal < 0) return `Basement ${Math.abs(ordinal)}`
-  return `Level ${ordinal}`
+  return getLevelDisplayName({
+    name: (level as { name?: string }).name,
+    level: (level as { level?: number }).level ?? 0,
+  })
 }
 
 function collectLevelTree(root: AnyNode, nodes: Record<string, AnyNode>): AnyNode[] {

package/src/components/viewer/viewer-controls-bar.tsx

@@ -28,6 +28,7 @@ import {
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 import { ActionButton } from '../ui/action-menu/action-button'
+import { FollowPascalToggle } from '../ui/action-menu/follow-pascal-toggle'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -103,13 +104,14 @@ function VisibilityMenu({
           className="hover:bg-white/5 hover:text-foreground"
           label="Visibility"
           size="icon"
+          tooltipClassName="dark"
           tooltipSide="top"
           variant="ghost"
         >
           <Eye className="h-5 w-5" />
         </ActionButton>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="center" className="min-w-44" side="top">
+      <DropdownMenuContent align="center" className="dark min-w-44" side="top">
         {canShowScans && (
           <DropdownMenuItem
             onSelect={(e) => keepOpen(e, () => useViewer.getState().setShowScans(!showScans))}
@@ -160,13 +162,14 @@ function DisplayMenu() {
           className="hover:bg-white/5 hover:text-foreground"
           label="Display settings"
           size="icon"
+          tooltipClassName="dark"
           tooltipSide="top"
           variant="ghost"
         >
           <SlidersHorizontal className="h-5 w-5" />
         </ActionButton>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="center" className="min-w-56" side="top">
+      <DropdownMenuContent align="center" className="dark min-w-56" side="top">
         <DropdownMenuItem
           onSelect={(e) => keepOpen(e, () => useViewer.getState().setShadows(!shadows))}
         >
@@ -207,7 +210,7 @@ function DisplayMenu() {
             <span>Render</span>
             <span className="ml-auto text-muted-foreground text-xs">{activeShading.name}</span>
           </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="min-w-56">
+          <DropdownMenuSubContent className="dark min-w-56">
             {SHADING_OPTIONS.map((option) => {
               const OptionIcon = option.icon
               return (
@@ -232,12 +235,12 @@ function DisplayMenu() {
         <DropdownMenuSub>
           <DropdownMenuSubTrigger>
             <SwatchBook className="h-4 w-4" />
-            <span>Theme</span>
+            <span>Scene theme</span>
             <span className="ml-auto truncate text-muted-foreground text-xs">
               {activeTheme.name}
             </span>
           </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="min-w-48">
+          <DropdownMenuSubContent className="dark min-w-48">
             {SCENE_THEMES.map((t) => {
               const swatches = (['wall', 'roof', 'floor', 'glazing'] as const).map(
                 (role) => t.clayTints?.[role] ?? CLAY_PALETTE[role],
@@ -270,7 +273,7 @@ function DisplayMenu() {
             <span>Edges</span>
             <span className="ml-auto text-muted-foreground text-xs">{activeEdges.name}</span>
           </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent className="min-w-56">
+          <DropdownMenuSubContent className="dark min-w-56">
             {EDGE_OPTIONS.map((option) => (
               <DropdownMenuItem
                 key={option.id}
@@ -360,6 +363,7 @@ export const ViewerControlsBar = ({
               useViewer.getState().setLevelMode(modes[nextIndex] ?? 'stacked')
             }}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -383,6 +387,7 @@ export const ViewerControlsBar = ({
                 useViewer.getState().setWallMode(modes[nextIndex] ?? 'cutaway')
               }}
               size="icon"
+              tooltipClassName="dark"
               tooltipSide="top"
               variant="ghost"
             >
@@ -406,6 +411,7 @@ export const ViewerControlsBar = ({
             label={`Walkthrough: ${walkthroughActive ? 'On' : 'Off'}`}
             onClick={onWalkthroughToggle}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -414,12 +420,16 @@ export const ViewerControlsBar = ({
 
           <div className="mx-1 h-5 w-px bg-border/40" />
 
+          {/* Follow Pascal */}
+          <FollowPascalToggle className="hidden sm:inline-flex" tooltipClassName="dark" />
+
           {/* Camera actions */}
           <ActionButton
             className="group hidden hover:bg-white/5 sm:inline-flex"
             label="Orbit left"
             onClick={() => emitter.emit('camera-controls:orbit-ccw')}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -435,6 +445,7 @@ export const ViewerControlsBar = ({
             label="Orbit right"
             onClick={() => emitter.emit('camera-controls:orbit-cw')}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >
@@ -450,6 +461,7 @@ export const ViewerControlsBar = ({
             label="Top view"
             onClick={() => emitter.emit('camera-controls:top-view')}
             size="icon"
+            tooltipClassName="dark"
             tooltipSide="top"
             variant="ghost"
           >

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,191 @@
+'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,
+  RoomPillDetail,
+  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}
+          // A level of its own: nothing open or placed on one floor carries to the next.
+          key={levelId}
+          levelObject={() => source.objectFor(levelId)}
+          renderDetail={(entry) => {
+            const zone = nodes[entry.zoneId]
+            if (zone?.type !== 'zone') return null
+            return (
+              <RoomPillDetail
+                areaM2={entry.area}
+                color={zone.color}
+                name={zoneLabel(zone)}
+                view="3d"
+                zoneId={zone.id}
+              />
+            )
+          }}
+          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}
+    />
+  )
+}