@pascal-app/editor 1.0.0 → 1.0.1

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

@@ -26,8 +26,15 @@ export const BuildingTreeNode = memo(function BuildingTreeNode({
   const createNode = useScene((state) => state.createNode)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const name = useScene((s) => s.nodes[nodeId]?.name)
+  // Levels and elevators first, units after, so the units read as one group.
   const children = useScene(
-    useShallow((s) => (s.nodes[nodeId] as BuildingNode | undefined)?.children ?? []),
+    useShallow((s) => {
+      const ids = (s.nodes[nodeId] as BuildingNode | undefined)?.children ?? []
+      return [
+        ...ids.filter((id) => s.nodes[id]?.type !== 'unit'),
+        ...ids.filter((id) => s.nodes[id]?.type === 'unit'),
+      ]
+    }),
   )
   const isSelected = useViewer((state) => state.selection.buildingId === nodeId)
   const isHovered = useViewer((state) => state.hoveredId === nodeId)

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

@@ -19,6 +19,7 @@ import {
   Copy,
   Eye,
   EyeOff,
+  Group,
   Loader2,
   MoreHorizontal,
   Pencil,
@@ -50,15 +51,17 @@ import {
   metersToLinearUnit,
   squareMetersToAreaUnit,
 } from './../../../../../lib/measurements'
-import { createLocalGuideImage } from './../../../../../lib/local-guide-image'
+import { createLocalGuideImage, createLocalScan } from './../../../../../lib/local-guide-image'
 import { editorHostTreeChildrenRegistry } from './../../../../../lib/host-tree-children'
+import { createUnitInBuilding, toggleZoneMembership } from './../../../../../lib/units'
 import { cn } from './../../../../../lib/utils'
 import useEditor from './../../../../../store/use-editor'
 import { useUploadStore } from '../../../../../store/use-upload'
 import { MetricControl } from '../../../controls/metric-control'
 import { LevelDuplicateDialog } from '../../../level-duplicate-dialog'
 import { InlineRenameInput } from './inline-rename-input'
-import { focusTreeNode, TreeNode } from './tree-node'
+import { ZoneMembershipCheckbox } from './zone-membership-checkbox'
+import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeDragProvider } from './tree-node-drag'
 
 // ============================================================================
@@ -497,6 +500,7 @@ const LevelReferences = memo(function LevelReferences({
   const deleteNode = useScene((s) => s.deleteNode)
   const setSelection = useViewer((s) => s.setSelection)
   const setShowGuides = useViewer((s) => s.setShowGuides)
+  const setShowScans = useViewer((s) => s.setShowScans)
   const references = useScene(
     useShallow((s) =>
       Object.values(s.nodes).filter(
@@ -566,6 +570,23 @@ const LevelReferences = memo(function LevelReferences({
       return
     }
 
+    if (!onUploadAsset) {
+      useUploadStore.getState().startUpload(levelId, 'scan', file.name)
+      useUploadStore.getState().setStatus(levelId, 'uploading')
+
+      try {
+        const { scan, url } = await createLocalScan({ createNode, file, levelId })
+        setShowScans(true)
+        setSelectedReferenceId(scan.id)
+        setSelection({ selectedIds: [], zoneId: null })
+        useUploadStore.getState().setResult(levelId, url)
+        window.setTimeout(() => useUploadStore.getState().clearUpload(levelId), 600)
+      } catch {
+        useUploadStore.getState().setError(levelId, 'Could not add that scan.')
+      }
+      return
+    }
+
     if (!projectId) {
       useUploadStore.getState().startUpload(levelId, 'scan', file.name)
       useUploadStore.getState().setError(levelId, 'No active project. Please open a project first.')
@@ -573,7 +594,7 @@ const LevelReferences = memo(function LevelReferences({
     }
 
     clearUpload(levelId)
-    onUploadAsset?.(projectId, levelId, file, type)
+    onUploadAsset(projectId, levelId, file, type)
   }
 
   const handleDelete = async (nodeId: string, e: React.MouseEvent) => {
@@ -949,7 +970,7 @@ const LevelItem = memo(function LevelItem({
                 precision={2}
                 step={0.05}
                 unit="m"
-                value={Math.round((level.baseElevation ?? 0) * 100) / 100}
+                value={(level.baseElevation ?? 0)}
               />
             </div>
             <LevelReferences
@@ -1060,6 +1081,74 @@ const LevelsSection = memo(function LevelsSection({
   )
 })
 
+const UnitsSection = memo(function UnitsSection({
+  buildingId,
+}: {
+  buildingId: BuildingNode['id']
+}) {
+  const unitIds = useScene(
+    useShallow((s) => {
+      const building = s.nodes[buildingId] as BuildingNode | undefined
+      return (building?.children ?? []).filter((id) => s.nodes[id]?.type === 'unit')
+    }),
+  )
+  const hasUnits = unitIds.length > 0
+  const [expanded, setExpanded] = useState(hasUnits)
+
+  useEffect(() => {
+    if (hasUnits) setExpanded(true)
+  }, [hasUnits])
+
+  const handleNewUnit = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    createUnitInBuilding(buildingId)
+    setExpanded(true)
+  }
+
+  return (
+    <div className="subtle-scrollbar max-h-72 shrink-0 overflow-y-auto overflow-x-hidden">
+      <TreeNodeWrapper
+        actions={
+          <button
+            className="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10"
+            onClick={handleNewUnit}
+            title="New unit"
+            type="button"
+          >
+            <Plus className="h-3 w-3" />
+          </button>
+        }
+        depth={1}
+        expanded={expanded}
+        hasChildren
+        icon={<Group className="h-3.5 w-3.5" />}
+        label={
+          <span className="flex items-center gap-1.5">
+            Units
+            {hasUnits && <span className="text-muted-foreground text-xs">{unitIds.length}</span>}
+          </span>
+        }
+        onClick={() => setExpanded((value) => !value)}
+        onToggle={() => setExpanded((value) => !value)}
+      >
+        {unitIds.map((unitId) => (
+          <TreeNode depth={2} key={unitId} nodeId={unitId} />
+        ))}
+        <TreeNodeWrapper
+          depth={2}
+          expanded={false}
+          hasChildren={false}
+          icon={<Plus className="h-3.5 w-3.5" />}
+          isLast
+          label="New unit"
+          onClick={handleNewUnit}
+          onToggle={() => {}}
+        />
+      </TreeNodeWrapper>
+    </div>
+  )
+})
+
 const LayerToggle = memo(function LayerToggle() {
   const structureLayer = useEditor((state) => state.structureLayer)
   const setStructureLayer = useEditor((state) => state.setStructureLayer)
@@ -1195,6 +1284,11 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
   const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
   const deleteNode = useScene((state) => state.deleteNode)
   const updateNode = useScene((state) => state.updateNode)
+  const focusedUnitId = useViewer((state) => state.focusedUnitId)
+  const focusedUnit = useScene((s) => {
+    const unit = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+    return unit?.type === 'unit' ? unit : null
+  })
   const selectedZoneId = useViewer((state) => state.selection.zoneId)
   const hoveredId = useViewer((state) => state.hoveredId)
   const setSelection = useViewer((state) => state.setSelection)
@@ -1268,6 +1362,13 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
         style={{ left: 8, width: 4 }}
       />
 
+      {focusedUnit && (
+        <ZoneMembershipCheckbox
+          checked={focusedUnit.members.includes(zone.id)}
+          onToggle={() => toggleZoneMembership(focusedUnit.id, zone.id)}
+          unitName={focusedUnit.name || 'Unit'}
+        />
+      )}
       <span className={cn('mr-2', !isSelected && 'opacity-40')}>
         <ColorDot color={zone.color} onChange={handleColorChange} />
       </span>
@@ -1611,6 +1712,7 @@ const BuildingItem = memo(function BuildingItem({
                   onUploadAsset={onUploadAsset}
                   projectId={projectId}
                 />
+                <UnitsSection buildingId={building.id} />
                 <LayerToggle />
               </div>
               <div className="subtle-scrollbar relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden">

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

@@ -70,12 +70,7 @@ export const ItemTreeNode = memo(function ItemTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      handleTreeSelection(
-        e,
-        nodeId,
-        useViewer.getState().selection.selectedIds,
-        setSelection,
-      )
+      handleTreeSelection(e, nodeId, useViewer.getState().selection.selectedIds, setSelection)
       routeTreeSelectionToNode(node)
     },
     [node, nodeId, setSelection],
@@ -134,7 +129,7 @@ export const ItemTreeNode = memo(function ItemTreeNode({
             depth={depth + 1}
             isLast={index === children.length - 1}
             key={childId}
-            nodeId={childId}
+            nodeId={childId as AnyNodeId}
           />
         ))}
     </TreeNodeWrapper>

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

@@ -24,7 +24,7 @@ interface ShelfTreeNodeProps {
 /**
  * Sidebar tree entry for shelf. Mirrors `item-tree-node`'s shape so the
  * shelf's hosted items list as collapsible children — same pattern items
- * use for their nested items. The shelf has its own `children: ItemNode[`id`]`
+ * use for their nested items. The shelf has its own `children: string[]`
  * field on the schema; items reparent into it via `def.surfaces` + the
  * placement coordinator's shelf strategy.
  */
@@ -69,12 +69,7 @@ export const ShelfTreeNode = memo(function ShelfTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      handleTreeSelection(
-        e,
-        nodeId,
-        useViewer.getState().selection.selectedIds,
-        setSelection,
-      )
+      handleTreeSelection(e, nodeId, useViewer.getState().selection.selectedIds, setSelection)
       routeTreeSelectionToNode(node)
     },
     [node, nodeId, setSelection],
@@ -124,7 +119,7 @@ export const ShelfTreeNode = memo(function ShelfTreeNode({
             depth={depth + 1}
             isLast={index === children.length - 1}
             key={childId}
-            nodeId={childId}
+            nodeId={childId as AnyNodeId}
           />
         ))}
     </TreeNodeWrapper>

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

@@ -107,6 +107,7 @@ import { SlabTreeNode } from './slab-tree-node'
 import { SolarPanelTreeNode } from './solar-panel-tree-node'
 import { SpawnTreeNode } from './spawn-tree-node'
 import { StairTreeNode } from './stair-tree-node'
+import { UnitTreeNode } from './unit-tree-node'
 import { WallTreeNode } from './wall-tree-node'
 import { WindowTreeNode } from './window-tree-node'
 import { ZoneTreeNode } from './zone-tree-node'
@@ -175,6 +176,7 @@ const treeNodeByType: Record<string, TreeNodeComponent> = {
   roof: RoofTreeNode,
   scan: RegistryTreeNode,
   stair: StairTreeNode,
+  unit: UnitTreeNode,
   door: DoorTreeNode,
   window: WindowTreeNode,
   zone: ZoneTreeNode as React.ComponentType<{
@@ -207,6 +209,8 @@ export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: Tr
 interface TreeNodeWrapperProps {
   nodeId?: string
   icon: React.ReactNode
+  /** Keep the icon's own color when unselected (color dots are the identity). */
+  keepIconColor?: boolean
   label: React.ReactNode
   depth: number
   hasChildren: boolean
@@ -232,6 +236,7 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
     {
       nodeId,
       icon,
+      keepIconColor,
       label,
       depth,
       hasChildren,
@@ -326,7 +331,7 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
             <span
               className={cn(
                 'flex h-5 w-5 shrink-0 items-center justify-center transition-all duration-200',
-                !isSelected && 'opacity-60 grayscale',
+                !isSelected && !keepIconColor && 'opacity-60 grayscale',
               )}
             >
               {icon}

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

@@ -0,0 +1,224 @@
+import {
+  type AnyNodeId,
+  getLevelDisplayName,
+  type LevelNode,
+  type UnitNode,
+  unitWarnings,
+  useScene,
+  type ZoneNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { AlertTriangle, Trash2, X } from 'lucide-react'
+import { memo, useCallback, useState } from 'react'
+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'
+
+type UnitWarningCode = ReturnType<typeof unitWarnings>[number]['code']
+
+const WARNING_LABELS: Record<UnitWarningCode, string> = {
+  empty: 'No zones in this unit',
+  'non-adjacent-levels': 'Members sit on non-adjacent levels',
+}
+
+const ACTION_BUTTON_CLASS =
+  'flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10'
+
+interface UnitZoneRowProps {
+  zoneId: ZoneNode['id']
+  depth: number
+  isLast?: boolean
+  onRemove?: (zoneId: ZoneNode['id']) => void
+}
+
+/** One member zone under a unit: name + level, click selects it. */
+export const UnitZoneRow = memo(function UnitZoneRow({
+  zoneId,
+  depth,
+  isLast,
+  onRemove,
+}: UnitZoneRowProps) {
+  const zone = useScene((s) => s.nodes[zoneId] as ZoneNode | undefined)
+  const levelLabel = useScene((s) => {
+    const level = zone?.parentId ? (s.nodes[zone.parentId as AnyNodeId] as LevelNode | undefined) : undefined
+    return level?.type === 'level' ? getLevelDisplayName(level) : null
+  })
+  const isSelected = useViewer((s) => s.selection.zoneId === zoneId)
+  const isHovered = useViewer((s) => s.hoveredId === zoneId)
+  const setSelection = useViewer((s) => s.setSelection)
+  const setHoveredId = useViewer((s) => s.setHoveredId)
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      if (!zone) return
+      setSelection({ levelId: zone.parentId as LevelNode['id'], zoneId })
+      routeTreeSelectionToNode(zone)
+    },
+    [zone, zoneId, setSelection],
+  )
+
+  if (!zone) return null
+
+  return (
+    <TreeNodeWrapper
+      actions={
+        onRemove ? (
+          <button
+            className={ACTION_BUTTON_CLASS}
+            onClick={(event) => {
+              event.stopPropagation()
+              onRemove(zoneId)
+            }}
+            title="Remove from unit"
+            type="button"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        ) : undefined
+      }
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <span
+          className="h-3 w-3 rounded-sm border border-border/50"
+          style={{ backgroundColor: zone.color }}
+        />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      keepIconColor
+      label={
+        <span className="flex min-w-0 items-baseline gap-1.5">
+          <span className="truncate">{zone.name || 'Zone'}</span>
+          {levelLabel && (
+            <span className="shrink-0 text-muted-foreground text-xs">{levelLabel}</span>
+          )}
+        </span>
+      }
+      nodeId={zoneId}
+      onClick={handleClick}
+      onMouseEnter={() => setHoveredId(zoneId)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => {}}
+    />
+  )
+})
+
+interface UnitTreeNodeProps {
+  nodeId: AnyNodeId
+  depth: number
+  isLast?: boolean
+}
+
+export const UnitTreeNode = memo(function UnitTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: UnitTreeNodeProps) {
+  const unitId = nodeId as UnitNode['id']
+  const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const updateNode = useScene((s) => s.updateNode)
+  const deleteNode = useScene((s) => s.deleteNode)
+  const color = useScene((s) => (s.nodes[nodeId] as UnitNode | undefined)?.color)
+  const members = useScene(
+    useShallow((s) => (s.nodes[nodeId] as UnitNode | undefined)?.members ?? []),
+  )
+  const warningCodes = useScene(
+    useShallow((s) => {
+      const unit = s.nodes[nodeId]
+      return unit?.type === 'unit' ? unitWarnings(unit, s.nodes).map((w) => w.code) : []
+    }),
+  )
+  const isSelected = useViewer((s) => s.selection.selectedIds.includes(nodeId))
+  const isHovered = useViewer((s) => s.hoveredId === nodeId)
+  const setHoveredId = useViewer((s) => s.setHoveredId)
+  const isFocused = useViewer((s) => s.focusedUnitId === unitId)
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      enterUnitFocus(unitId)
+    },
+    [unitId],
+  )
+
+  const handleRemoveMember = useCallback(
+    (zoneId: ZoneNode['id']) => assignZoneToUnit(zoneId, null),
+    [],
+  )
+
+  const warningTitle = [...new Set(warningCodes)].map((code) => WARNING_LABELS[code]).join('\n')
+
+  return (
+    <TreeNodeWrapper
+      actions={
+        <button
+          className={ACTION_BUTTON_CLASS}
+          onClick={(event) => {
+            event.stopPropagation()
+            deleteNode(unitId)
+          }}
+          title="Delete unit"
+          type="button"
+        >
+          <Trash2 className="h-3 w-3" />
+        </button>
+      }
+      depth={depth}
+      expanded={expanded}
+      hasChildren={members.length > 0}
+      icon={
+        <ColorDot
+          color={color ?? '#f59e0b'}
+          onChange={(next) => updateNode(unitId, { color: next })}
+        />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      keepIconColor
+      label={
+        <span className="flex min-w-0 items-center gap-1.5">
+          <InlineRenameInput
+            defaultName="Unit"
+            isEditing={isEditing}
+            nodeId={nodeId}
+            onStartEditing={() => setIsEditing(true)}
+            onStopEditing={() => setIsEditing(false)}
+          />
+          {isFocused && (
+            <span className="shrink-0 rounded-full bg-primary/15 px-1.5 text-[10px] text-primary leading-4">
+              Focused
+            </span>
+          )}
+          {warningCodes.length > 0 && (
+            <span className="shrink-0 text-muted-foreground" title={warningTitle}>
+              <AlertTriangle className="h-3 w-3" />
+            </span>
+          )}
+        </span>
+      }
+      nodeId={nodeId}
+      onClick={handleClick}
+      onMouseEnter={() => setHoveredId(nodeId)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => setExpanded((value) => !value)}
+    >
+      {members.map((zoneId, index) => (
+        <UnitZoneRow
+          depth={depth + 1}
+          isLast={index === members.length - 1}
+          key={zoneId}
+          onRemove={handleRemoveMember}
+          zoneId={zoneId}
+        />
+      ))}
+    </TreeNodeWrapper>
+  )
+})

package/src/components/ui/sidebar/panels/site-panel/zone-membership-checkbox.tsx

@@ -0,0 +1,22 @@
+import { Checkbox } from './../../../primitives/checkbox'
+
+/** Membership toggle shown on zone rows while a unit is focused. */
+export function ZoneMembershipCheckbox({
+  checked,
+  onToggle,
+  unitName,
+}: {
+  checked: boolean
+  onToggle: () => void
+  unitName: string
+}) {
+  return (
+    <Checkbox
+      aria-label={`In ${unitName}`}
+      checked={checked}
+      className="mr-2"
+      onCheckedChange={onToggle}
+      onDoubleClick={(event) => event.stopPropagation()}
+    />
+  )
+}

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

@@ -3,9 +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 { toggleZoneMembership } from './../../../../../lib/units'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { ZoneMembershipCheckbox } from './zone-membership-checkbox'
 
 interface ZoneTreeNodeProps {
   nodeId: ZoneNode['id']
@@ -28,6 +30,11 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const unit = useViewer((state) => state.unit)
+  const focusedUnitId = useViewer((state) => state.focusedUnitId)
+  const focusedUnit = useScene((s) => {
+    const focused = focusedUnitId ? s.nodes[focusedUnitId] : undefined
+    return focused?.type === 'unit' ? focused : null
+  })
 
   const handleClick = useCallback(() => setSelection({ zoneId: nodeId }), [nodeId, setSelection])
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
@@ -50,15 +57,25 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}
+      keepIconColor
       isVisible={isVisible}
       label={
-        <InlineRenameInput
-          defaultName={defaultName}
-          isEditing={isEditing}
-          nodeId={nodeId}
-          onStartEditing={handleStartEditing}
-          onStopEditing={handleStopEditing}
-        />
+        <span className="flex min-w-0 items-center">
+          {focusedUnit && (
+            <ZoneMembershipCheckbox
+              checked={focusedUnit.members.includes(nodeId)}
+              onToggle={() => toggleZoneMembership(focusedUnit.id, nodeId)}
+              unitName={focusedUnit.name || 'Unit'}
+            />
+          )}
+          <InlineRenameInput
+            defaultName={defaultName}
+            isEditing={isEditing}
+            nodeId={nodeId}
+            onStartEditing={handleStartEditing}
+            onStopEditing={handleStopEditing}
+          />
+        </span>
       }
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}

package/src/components/ui/snap-target-badge.tsx

@@ -1,4 +1,5 @@
 import type { AnyNode, AssetInput } from '@pascal-app/core'
+import { isProceduralItem } from '@pascal-app/core/procedural-items'
 import type { ReactNode } from 'react'
 import { cn } from '../../lib/utils'
 
@@ -35,6 +36,7 @@ export function resolveAssetSnapTarget(attachTo: AssetInput['attachTo']): SnapTa
 
 export function resolveNodeSnapTarget(node: AnyNode | null | undefined): SnapTarget | null {
   if (!node) return null
+  if (isProceduralItem(node)) return resolveAssetSnapTarget(node.recipe.mounting?.attachTo)
   if ('roofSegmentId' in node && typeof node.roofSegmentId === 'string') return 'roof'
   if (node.type === 'downspout') return 'roof'
   if (node.type === 'door' || node.type === 'window') return 'wall'

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

@@ -15,6 +15,7 @@ import Link from 'next/link'
 import type { ReactNode } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 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
@@ -63,6 +64,7 @@ export const ViewerSceneHeader = ({
   const selectedNode = useScene((s) =>
     firstSelectedId ? (s.nodes[firstSelectedId as AnyNodeId] as AnyNode | undefined) : null,
   )
+  const sceneNodes = useScene((s) => s.nodes)
   // Highest first so the list reads top-down like a building section.
   const levels = useScene(
     useShallow((s) => {
@@ -231,6 +233,7 @@ export const ViewerSceneHeader = ({
           </div>
         </div>
       )}
+      {building && <ViewerUnitsPanel nodes={sceneNodes} />}
     </div>
   )
 }