@pascal-app/editor 1.0.3 → 1.0.4

package/src/components/ui/sidebar/panels/site-panel/level-tree-node.tsx

@@ -3,7 +3,7 @@ import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { Layers } from 'lucide-react'
 import { memo, useCallback, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import { getDefaultLevelName } from '@pascal-app/core'
+import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -26,6 +26,7 @@ export const LevelTreeNode = memo(function LevelTreeNode({
     useShallow((s) => (s.nodes[nodeId] as LevelNode | undefined)?.children ?? []),
   )
   const level = useScene((s) => (s.nodes[nodeId] as LevelNode | undefined)?.level ?? 0)
+  const levelName = useScene((s) => (s.nodes[nodeId] as LevelNode | undefined)?.name)
   const isSelected = useViewer((state) => state.selection.levelId === nodeId)
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
@@ -40,6 +41,7 @@ export const LevelTreeNode = memo(function LevelTreeNode({
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
   const defaultName = getDefaultLevelName(level)
+  const displayName = getLevelDisplayName({ name: levelName, level })
 
   return (
     <TreeNodeWrapper
@@ -55,6 +57,7 @@ export const LevelTreeNode = memo(function LevelTreeNode({
       label={
         <InlineRenameInput
           defaultName={defaultName}
+          displayName={displayName}
           isEditing={isEditing}
           nodeId={nodeId}
           onStartEditing={handleStartEditing}

package/src/components/ui/sidebar/panels/site-panel/registry-tree-node.tsx

@@ -10,7 +10,6 @@ import { InlineRenameInput } from './inline-rename-input'
 import {
   focusTreeNode,
   handleTreeSelection,
-  routeTreeSelectionToNode,
   TreeNode,
   TreeNodeWrapper,
 } from './tree-node'
@@ -99,9 +98,8 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      routeTreeSelectionToNode(node)
     },
-    [node, nodeId, setSelection],
+    [nodeId, setSelection],
   )
 
   return (

package/src/components/ui/sidebar/panels/site-panel/roof-tree-node.tsx

@@ -49,15 +49,12 @@ export const RoofTreeNode = memo(function RoofTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
       if (!e.metaKey && !e.ctrlKey && !e.shiftKey) {
         setRoofHostDragArmedId(nodeId)
       }

package/src/components/ui/sidebar/panels/site-panel/shelf-tree-node.tsx

@@ -9,7 +9,6 @@ import { InlineRenameInput } from './inline-rename-input'
 import {
   focusTreeNode,
   handleTreeSelection,
-  routeTreeSelectionToNode,
   TreeNode,
   TreeNodeWrapper,
 } from './tree-node'
@@ -70,9 +69,8 @@ export const ShelfTreeNode = memo(function ShelfTreeNode({
     (e: React.MouseEvent) => {
       e.stopPropagation()
       handleTreeSelection(e, nodeId, useViewer.getState().selection.selectedIds, setSelection)
-      routeTreeSelectionToNode(node)
     },
-    [node, nodeId, setSelection],
+    [nodeId, setSelection],
   )
 
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])

package/src/components/ui/sidebar/panels/site-panel/slab-tree-node.tsx

@@ -1,9 +1,8 @@
-import { type AnyNodeId, type SlabNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, floorFootprintName, type SlabNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 import { formatAreaLabel } from './../../../../../lib/measurements'
-import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -27,19 +26,22 @@ export const SlabTreeNode = memo(function SlabTreeNode({
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const unit = useViewer((state) => state.unit)
+  // A base plate is one footprint's "Floor & foundation": listed by the
+  // footprint's name ("Shared floor", "Lanai floor"), opening that panel.
+  const footprint = useScene((s) => {
+    const node = s.nodes[nodeId]
+    return node?.type === 'slab' && node.plateRole === 'base' ? floorFootprintName(s.nodes, node) : null
+  })
 
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )
@@ -63,13 +65,19 @@ export const SlabTreeNode = memo(function SlabTreeNode({
       isSelected={isSelected}
       isVisible={isVisible}
       label={
-        <InlineRenameInput
-          defaultName={defaultName}
-          isEditing={isEditing}
-          nodeId={nodeId}
-          onStartEditing={handleStartEditing}
-          onStopEditing={handleStopEditing}
-        />
+        footprint ? (
+          <span className="truncate" data-footprint-entry={nodeId}>
+            {footprint}
+          </span>
+        ) : (
+          <InlineRenameInput
+            defaultName={defaultName}
+            isEditing={isEditing}
+            nodeId={nodeId}
+            onStartEditing={handleStartEditing}
+            onStopEditing={handleStopEditing}
+          />
+        )
       }
       nodeId={nodeId}
       onClick={handleClick}

package/src/components/ui/sidebar/panels/site-panel/solar-panel-tree-node.tsx

@@ -3,7 +3,6 @@ import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 import { SnapTargetIcon } from '../../../snap-target-badge'
-import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -30,15 +29,12 @@ export const SolarPanelTreeNode = memo(function SolarPanelTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

package/src/components/ui/sidebar/panels/site-panel/spawn-tree-node.tsx

@@ -4,7 +4,6 @@ import { type SpawnNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
-import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -30,15 +29,12 @@ export const SpawnTreeNode = memo(function SpawnTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

package/src/components/ui/sidebar/panels/site-panel/stair-tree-node.tsx

@@ -4,7 +4,6 @@ import { AnimatePresence } from 'motion/react'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import useEditor from '../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -48,15 +47,12 @@ export const StairTreeNode = memo(function StairTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

package/src/components/ui/sidebar/panels/site-panel/tree-node.tsx

@@ -3,8 +3,6 @@ import { useViewer } from '@pascal-app/viewer'
 import { ChevronRight } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
 import { forwardRef, memo, useEffect, useRef } from 'react'
-import { resolveNodeSelectionTarget } from '../../../../../lib/selection-routing'
-import useEditor from '../../../../../store/use-editor'
 import { expandSessionSelectionForNode } from '../../../../../store/use-session-groups'
 
 export function handleTreeSelection(
@@ -63,31 +61,6 @@ export function focusTreeNode(nodeId: AnyNodeId) {
   emitter.emit('camera-controls:focus', { nodeId })
 }
 
-export function routeTreeSelectionToNode(node: AnyNode | null | undefined) {
-  const target = node ? resolveNodeSelectionTarget(node) : null
-  if (!target) return
-
-  const selectedIdsAfterClick = useViewer.getState().selection.selectedIds
-  const editor = useEditor.getState()
-  let didRoute = false
-
-  if (target.phase !== editor.phase) {
-    editor.setPhase(target.phase)
-    didRoute = true
-  }
-  if (
-    target.phase === 'structure' &&
-    target.structureLayer &&
-    target.structureLayer !== useEditor.getState().structureLayer
-  ) {
-    useEditor.getState().setStructureLayer(target.structureLayer)
-    didRoute = true
-  }
-  if (didRoute) {
-    useViewer.getState().setSelection({ selectedIds: selectedIdsAfterClick })
-  }
-}
-
 import { cn } from '../../../../../lib/utils'
 import { BuildingTreeNode } from './building-tree-node'
 import { CeilingTreeNode } from './ceiling-tree-node'

package/src/components/ui/sidebar/panels/site-panel/unit-tree-node.tsx

@@ -14,7 +14,7 @@ import { useShallow } from 'zustand/react/shallow'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import { assignZoneToUnit, enterUnitFocus } from './../../../../../lib/units'
 import { InlineRenameInput } from './inline-rename-input'
-import { routeTreeSelectionToNode, TreeNodeWrapper } from './tree-node'
+import { TreeNodeWrapper } from './tree-node'
 
 type UnitWarningCode = ReturnType<typeof unitWarnings>[number]['code']
 
@@ -55,7 +55,6 @@ export const UnitZoneRow = memo(function UnitZoneRow({
       event.stopPropagation()
       if (!zone) return
       setSelection({ levelId: zone.parentId as LevelNode['id'], zoneId })
-      routeTreeSelectionToNode(zone)
     },
     [zone, zoneId, setSelection],
   )
@@ -94,7 +93,7 @@ export const UnitZoneRow = memo(function UnitZoneRow({
       keepIconColor
       label={
         <span className="flex min-w-0 items-baseline gap-1.5">
-          <span className="truncate">{zone.name || 'Zone'}</span>
+          <span className="truncate">{zone.name || (zone.spaceRole === 'room' ? 'Room' : 'Zone')}</span>
           {levelLabel && (
             <span className="shrink-0 text-muted-foreground text-xs">{levelLabel}</span>
           )}

package/src/components/ui/sidebar/panels/site-panel/wall-tree-node.tsx

@@ -3,7 +3,6 @@ import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
-import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -52,15 +51,12 @@ export const WallTreeNode = memo(function WallTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

package/src/components/ui/sidebar/panels/site-panel/window-tree-node.tsx

@@ -5,7 +5,6 @@ import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
 import { memo, useCallback, useState } from 'react'
 import { resolveNodeSnapTarget, SnapTargetIcon } from '../../../snap-target-badge'
-import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -32,15 +31,12 @@ export const WindowTreeNode = memo(function WindowTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'furnish') {
-        useEditor.getState().setPhase('structure')
-      }
     },
     [nodeId, setSelection],
   )

package/src/components/ui/sidebar/panels/site-panel/zone-tree-node.tsx

@@ -3,6 +3,11 @@ import { useViewer } from '@pascal-app/viewer'
 import { memo, useCallback, useState } from 'react'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import { formatAreaLabel } from './../../../../../lib/measurements'
+import {
+  selectZoneOrRoom,
+  useZoneSelected,
+  zoneKindLabel,
+} from './../../../../../lib/room-zone-routing'
 import { toggleZoneMembership } from './../../../../../lib/units'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNodeWrapper } from './tree-node'
@@ -25,9 +30,9 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const color = useScene((s) => (s.nodes[nodeId] as ZoneNode | undefined)?.color)
   const polygon = useScene((s) => (s.nodes[nodeId] as ZoneNode | undefined)?.polygon ?? [])
-  const isSelected = useViewer((state) => state.selection.zoneId === nodeId)
+  const isSelected = useZoneSelected(nodeId)
+  const kind = useScene((s) => zoneKindLabel(s.nodes[nodeId] as ZoneNode | undefined))
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
-  const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const unit = useViewer((state) => state.unit)
   const focusedUnitId = useViewer((state) => state.focusedUnitId)
@@ -36,14 +41,14 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
     return focused?.type === 'unit' ? focused : null
   })
 
-  const handleClick = useCallback(() => setSelection({ zoneId: nodeId }), [nodeId, setSelection])
+  const handleClick = useCallback(() => selectZoneOrRoom(nodeId), [nodeId])
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
   const handleMouseEnter = useCallback(() => setHoveredId(nodeId), [nodeId, setHoveredId])
   const handleMouseLeave = useCallback(() => setHoveredId(null), [setHoveredId])
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const defaultName = `Zone (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
+  const defaultName = `${kind} (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
 
   return (
     <TreeNodeWrapper

package/src/components/ui/sidebar/panels/zone-panel/index.tsx

@@ -137,7 +137,6 @@ export function ZonePanel() {
   const currentLevelId = useViewer((state) => state.selection.levelId)
   const selectedZoneId = useViewer((state) => state.selection.zoneId)
   const setSelection = useViewer((state) => state.setSelection)
-  const setPhase = useEditor((state) => state.setPhase)
   const setMode = useEditor((state) => state.setMode)
   const setTool = useEditor((state) => state.setTool)
 
@@ -149,7 +148,6 @@ export function ZonePanel() {
 
   const handleAddZone = () => {
     if (currentLevelId) {
-      setPhase('structure')
       setMode('build')
       setTool('zone')
     }

package/src/components/ui/sidebar/tab-bar.tsx

@@ -19,6 +19,16 @@ export type SidebarTab = {
    * keeps the icon highlighted regardless of collapse.
    */
   noPanel?: boolean
+  /** Runs when the entry is picked — with `noPanel`, to put its surface on the stage. */
+  onSelect?: () => void
+  /**
+   * For a `noPanel` entry whose surface can leave the stage on its own (a view
+   * closed from the view bar): false once it has, and the rail goes back to
+   * the panel that was open before it.
+   */
+  stageActive?: boolean
+  /** Runs when the rail moves from this entry to another: a stage entry takes its surface down. */
+  onDeselect?: () => void
 }
 
 interface TabBarProps {

package/src/components/ui/sidebar/use-plugin-panels.tsx

@@ -12,28 +12,37 @@ import {
   useSyncExternalStore,
 } from 'react'
 import useEditor from '../../../store/use-editor'
+import { isViewVisible } from '../../../store/view-layout'
+import { PluginsView } from '../../editor/views/plugins-view'
+import { PLUGINS_VIEW_ID } from '../../editor/views/use-editor-views'
 import {
   editorHostPanelRegistry,
   type EditorHostPanel,
   managedPluginIds,
   showsPluginManager,
 } from '../../../lib/plugin-panels'
+import { IconRefImage } from '../icon-ref'
 import { ErrorBoundary } from '../primitives/error-boundary'
 import type { ExtraPanel } from './icon-rail'
-import { PluginsPanel } from './panels/plugins-panel'
 
+// The rail's "+" puts the plugin directory on the stage, as a view in the
+// focused pane, and stays lit while it is there instead of leaving an
+// unrelated panel open beside it. `component` serves the v1 sidebar.
 const pluginsManagerPanel: ExtraPanel = {
   id: 'plugins',
   label: 'Plugins',
-  icon: <Plus className="h-5 w-5" />,
-  component: PluginsPanel,
+  icon: <img alt="" className="size-8 object-contain" src="/icons/plugins.webp" />,
+  component: PluginsView,
+  noPanel: true,
+  onSelect: () => useEditor.getState().showView(PLUGINS_VIEW_ID),
+  onDeselect: () => useEditor.getState().closeView(PLUGINS_VIEW_ID),
 }
 
 /** Resolve a plugin's {@link IconRef} into a rail-sized React node. Mirrors the
  * inspector's `renderIcon`, sized for the 24px icon-rail button. */
 function renderIconRef(ref: IconRef): ReactNode {
   if (ref.kind === 'url') {
-    return <img alt="" className="h-5 w-5 object-contain" src={ref.src} />
+    return <IconRefImage className="h-5 w-5" src={ref.src} />
   }
   if (ref.kind === 'iconify') {
     return <Icon height={20} icon={ref.name} width={20} />
@@ -106,6 +115,7 @@ export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
   const workspaceMode = useEditor((s) => s.workspaceMode)
   const installedPlugins = useScene((s) => s.installedPlugins)
   const readOnly = useScene((s) => s.readOnly)
+  const pluginsViewShown = useEditor((s) => isViewVisible(s, PLUGINS_VIEW_ID))
   const hostIds = new Set(hostPanels?.map((p) => p.id))
 
   useEffect(() => {
@@ -141,7 +151,7 @@ export function useHostPanels(hostPanels?: ExtraPanel[]): ExtraPanel[] {
       readOnly,
       workspaceMode,
     })
-      ? [pluginsManagerPanel]
+      ? [{ ...pluginsManagerPanel, stageActive: pluginsViewShown }]
       : []
   return [...(hostPanels ?? []), ...fromRegistry, ...manager]
 }

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