@pascal-app/editor 1.0.0-beta.5 → 1.0.1

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

@@ -11,11 +11,15 @@ import {
   useScene,
   type ZoneNode,
 } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import {
   Camera,
   ChevronDown,
+  ChevronRight,
   Copy,
+  Eye,
+  EyeOff,
+  Group,
   Loader2,
   MoreHorizontal,
   Pencil,
@@ -25,7 +29,7 @@ import {
   X,
 } from 'lucide-react'
 import { AnimatePresence, LayoutGroup, motion } from 'motion/react'
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useRef, useState, useSyncExternalStore } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import {
@@ -47,14 +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'
 
 // ============================================================================
@@ -350,8 +357,25 @@ const ReferenceItem = memo(function ReferenceItem({
   handleDelete: (id: string, e: React.MouseEvent) => void
 }) {
   const [isEditing, setIsEditing] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(true)
+  const updateNode = useScene((state) => state.updateNode)
+  const selectedReferenceId = useEditor((state) => state.selectedReferenceId)
+  const isCapture = refNode.type === 'scan'
+  const isVisible = refNode.visible !== false
+  useSyncExternalStore(
+    editorHostTreeChildrenRegistry.subscribe,
+    editorHostTreeChildrenRegistry.getSnapshot,
+    editorHostTreeChildrenRegistry.getSnapshot,
+  )
+  const hostChildren = isCapture
+    ? editorHostTreeChildrenRegistry.childrenForKind(refNode.type)
+    : undefined
+  const hasHostChildren = Boolean(hostChildren?.hasChildren(refNode))
+  const HostChildren = hasHostChildren ? hostChildren?.component : undefined
+
   const handleSelect = () => {
     setSelectedReferenceId(refNode.id)
+    useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
   }
 
   const handleDoubleClick = () => {
@@ -359,53 +383,98 @@ const ReferenceItem = memo(function ReferenceItem({
   }
 
   return (
-    <div
-      className="group/ref relative flex h-8 cursor-pointer select-none items-center border-border/50 border-b pr-2 text-xs transition-colors hover:bg-accent/30"
-      onClick={handleSelect}
-      onDoubleClick={handleDoubleClick}
-    >
+    <div className="relative flex flex-col">
       <div
         className={cn(
-          'pointer-events-none absolute z-10 w-px bg-border/50',
-          isLastRow ? 'top-0 bottom-1/2' : 'top-0 bottom-0',
+          'group/ref relative flex h-8 cursor-pointer select-none items-center border-border/50 border-b pr-2 text-xs transition-colors hover:bg-accent/30',
+          selectedReferenceId === refNode.id && 'bg-accent/50 text-foreground',
+          !isVisible && 'opacity-50',
         )}
-        style={{ left: 45 }}
-      />
-      <div
-        className="pointer-events-none absolute top-1/2 z-10 h-px bg-border/50"
-        style={{ left: 45, width: 8 }}
-      />
+        onClick={handleSelect}
+        onDoubleClick={handleDoubleClick}
+      >
+        <div
+          className={cn(
+            'pointer-events-none absolute z-10 w-px bg-border/50',
+            isLastRow && !(hasHostChildren && isExpanded) ? 'top-0 bottom-1/2' : 'top-0 bottom-0',
+          )}
+          style={{ left: 45 }}
+        />
+        <div
+          className="pointer-events-none absolute top-1/2 z-10 h-px bg-border/50"
+          style={{ left: 45, width: 8 }}
+        />
 
-      <div className="flex h-8 min-w-0 flex-1 cursor-pointer items-center gap-2 py-0 pl-[60px] text-muted-foreground group-hover/ref:text-foreground">
-        {refNode.type === 'scan' ? (
-          <img
-            alt="Scan"
-            className="h-3.5 w-3.5 shrink-0 object-contain opacity-70 transition-opacity group-hover/ref:opacity-100"
-            src="/icons/mesh.webp"
-          />
-        ) : (
-          <img
-            alt="Guide"
-            className="h-3.5 w-3.5 shrink-0 object-contain opacity-70 transition-opacity group-hover/ref:opacity-100"
-            src="/icons/floorplan.webp"
+        {isCapture ? (
+          <button
+            className="z-20 ml-[52px] flex h-4 w-4 shrink-0 items-center justify-center"
+            onClick={(event) => {
+              event.stopPropagation()
+              if (hasHostChildren) setIsExpanded((expanded) => !expanded)
+            }}
+            type="button"
+          >
+            {hasHostChildren ? (
+              <ChevronRight
+                className={cn('h-3 w-3 transition-transform', isExpanded && 'rotate-90')}
+              />
+            ) : null}
+          </button>
+        ) : null}
+
+        <div
+          className={cn(
+            'flex h-8 min-w-0 flex-1 cursor-pointer items-center gap-2 py-0 text-muted-foreground group-hover/ref:text-foreground',
+            !isCapture && 'pl-[60px]',
+          )}
+        >
+          {isCapture ? (
+            <img
+              alt="Capture"
+              className="h-3.5 w-3.5 shrink-0 object-contain opacity-70 transition-opacity group-hover/ref:opacity-100"
+              src="/icons/mesh.webp"
+            />
+          ) : (
+            <img
+              alt="Guide"
+              className="h-3.5 w-3.5 shrink-0 object-contain opacity-70 transition-opacity group-hover/ref:opacity-100"
+              src="/icons/floorplan.webp"
+            />
+          )}
+          <InlineRenameInput
+            defaultName={isCapture ? 'Capture' : 'Guide Image'}
+            isEditing={isEditing}
+            nodeId={refNode.id}
+            onStartEditing={() => setIsEditing(true)}
+            onStopEditing={() => setIsEditing(false)}
           />
-        )}
-        <InlineRenameInput
-          defaultName={refNode.type === 'scan' ? '3D Scan' : 'Guide Image'}
-          isEditing={isEditing}
-          nodeId={refNode.id}
-          onStartEditing={() => setIsEditing(true)}
-          onStopEditing={() => setIsEditing(false)}
-        />
-      </div>
+        </div>
 
-      <button
-        className="z-20 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/ref:opacity-100 dark:hover:bg-white/10"
-        onClick={(e) => handleDelete(refNode.id, e)}
-        title="Delete"
-      >
-        <Trash2 className="h-3 w-3" />
-      </button>
+        {isCapture ? (
+          <button
+            className="z-20 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/ref:opacity-100 dark:hover:bg-white/10"
+            onClick={(event) => {
+              event.stopPropagation()
+              updateNode(refNode.id, { visible: !isVisible })
+            }}
+            title={isVisible ? 'Hide' : 'Show'}
+            type="button"
+          >
+            {isVisible ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
+          </button>
+        ) : null}
+        <button
+          className="z-20 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition-colors hover:bg-black/5 hover:text-foreground group-hover/ref:opacity-100 dark:hover:bg-white/10"
+          onClick={(e) => handleDelete(refNode.id, e)}
+          title="Delete"
+          type="button"
+        >
+          <Trash2 className="h-3 w-3" />
+        </button>
+      </div>
+      {isExpanded && HostChildren ? (
+        <HostChildren depth={3} nodeId={refNode.id} parentVisible={isVisible} />
+      ) : null}
     </div>
   )
 })
@@ -431,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(
@@ -500,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.')
@@ -507,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) => {
@@ -643,7 +730,8 @@ const LevelItem = memo(function LevelItem({
       ? (level.parentId as BuildingNode['id'])
       : undefined
 
-  const selectLevel = (levelId: LevelNode['id']) => {
+  const selectLevel = (levelId: LevelNode['id'], measure = true) => {
+    if (measure && selectedLevelId !== levelId) markPerfAction('level-switch', levelId)
     setSelection(buildingId ? { buildingId, levelId } : { levelId })
   }
 
@@ -682,7 +770,7 @@ const LevelItem = memo(function LevelItem({
       )
     }
     createNodes(createOps)
-    selectLevel(newLevelId as LevelNode['id'])
+    selectLevel(newLevelId as LevelNode['id'], false)
     setDuplicateDialogOpen(false)
   }
 
@@ -882,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
@@ -993,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)
@@ -1128,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)
@@ -1201,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>
@@ -1332,7 +1500,10 @@ const ContentSection = memo(function ContentSection() {
       if (!selectedLevelId) return []
       const lvl = s.nodes[selectedLevelId] as LevelNode | undefined
       if (!lvl) return []
-      return lvl.children.filter((childId) => s.nodes[childId]?.type !== 'zone')
+      return lvl.children.filter((childId) => {
+        const type = s.nodes[childId]?.type
+        return type !== 'zone' && type !== 'scan'
+      })
     }),
   )
 
@@ -1541,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/level-tree-node.tsx

@@ -1,5 +1,5 @@
 import { type LevelNode, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
+import { markPerfAction, useViewer } from '@pascal-app/viewer'
 import { Layers } from 'lucide-react'
 import { memo, useCallback, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
@@ -30,7 +30,10 @@ export const LevelTreeNode = memo(function LevelTreeNode({
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
 
-  const handleClick = useCallback(() => setSelection({ levelId: nodeId }), [nodeId, setSelection])
+  const handleClick = useCallback(() => {
+    if (!isSelected) markPerfAction('level-switch', nodeId)
+    setSelection({ levelId: nodeId })
+  }, [isSelected, nodeId, setSelection])
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
   const handleToggle = useCallback(() => setExpanded((prev) => !prev), [])
   const handleStartEditing = useCallback(() => setIsEditing(true), [])

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

@@ -2,8 +2,9 @@ import { Icon as IconifyIcon } from '@iconify/react'
 import { type AnyNodeId, nodeRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react'
 import { useShallow } from 'zustand/react/shallow'
+import { editorHostTreeChildrenRegistry } from '../../../../../lib/host-tree-children'
 import { resolveNodeSnapTarget, SnapTargetIcon } from '../../../snap-target-badge'
 import { InlineRenameInput } from './inline-rename-input'
 import {
@@ -43,9 +44,19 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
+  useSyncExternalStore(
+    editorHostTreeChildrenRegistry.subscribe,
+    editorHostTreeChildrenRegistry.getSnapshot,
+    editorHostTreeChildrenRegistry.getSnapshot,
+  )
 
   const presentation = node ? nodeRegistry.get(node.type)?.presentation : undefined
   const tree = node ? nodeRegistry.get(node.type)?.tree : undefined
+  const hostChildren = node
+    ? editorHostTreeChildrenRegistry.childrenForKind(node.type)
+    : undefined
+  const hasHostChildren = Boolean(node && hostChildren?.hasChildren(node))
+  const HostChildren = hasHostChildren ? hostChildren?.component : undefined
   const icon = presentation?.icon
   const iconSrc = icon?.kind === 'url' ? icon.src : '/icons/roof.webp'
   const iconElement =
@@ -63,7 +74,7 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
   const snapTarget = resolveNodeSnapTarget(node)
   const defaultName =
     node ? tree?.label?.(node, useScene.getState().nodes) || node.name || presentation?.label || 'Node' : 'Node'
-  const hasChildren = children.length > 0
+  const hasChildren = children.length > 0 || hasHostChildren
 
   useEffect(() => {
     return useViewer.subscribe((state) => {
@@ -126,15 +137,21 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
       onMouseLeave={() => setHoveredId(null)}
       onToggle={() => setExpanded((prev) => !prev)}
     >
-      {hasChildren &&
-        children.map((childId, index) => (
-          <TreeNode
-            depth={depth + 1}
-            isLast={index === children.length - 1}
-            key={childId}
-            nodeId={childId as AnyNodeId}
-          />
-        ))}
+      {hasChildren && (
+        <>
+          {children.map((childId, index) => (
+            <TreeNode
+              depth={depth + 1}
+              isLast={!hasHostChildren && index === children.length - 1}
+              key={childId}
+              nodeId={childId as AnyNodeId}
+            />
+          ))}
+          {HostChildren ? (
+            <HostChildren depth={depth + 1} nodeId={nodeId} parentVisible={isVisible} />
+          ) : null}
+        </>
+      )}
     </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.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, test } from 'bun:test'
+import { getTreeNodeComponent } from './tree-node'
+
+describe('site tree node routing', () => {
+  test('renders plugin node kinds through the generic tree row', () => {
+    expect(getTreeNodeComponent('lean-to-extension')).toBe(getTreeNodeComponent('plugin-kind'))
+  })
+})

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'
@@ -117,6 +118,12 @@ interface TreeNodeProps {
   isLast?: boolean
 }
 
+type TreeNodeComponent = React.ComponentType<{
+  depth: number
+  isLast?: boolean
+  nodeId: AnyNodeId
+}>
+
 // Per-kind tree-node components keyed by `node.type`. Lookup replaces
 // the legacy switch — adding a kind to this map is now the only edit
 // needed in this file (the switch's `case '<kind>':` clauses were
@@ -124,10 +131,7 @@ interface TreeNodeProps {
 // outside the registry; future work moves these to a
 // `def.presentation`-driven generic tree-node and removes this map
 // entirely).
-const treeNodeByType: Record<
-  string,
-  React.ComponentType<{ depth: number; isLast?: boolean; nodeId: AnyNodeId }>
-> = {
+const treeNodeByType: Record<string, TreeNodeComponent> = {
   building: BuildingTreeNode as React.ComponentType<{
     depth: number
     isLast?: boolean
@@ -136,6 +140,7 @@ const treeNodeByType: Record<
   cabinet: RegistryTreeNode,
   'cabinet-module': RegistryTreeNode,
   'box-vent': RegistryTreeNode,
+  'block': RegistryTreeNode,
   ceiling: CeilingTreeNode,
   chimney: ChimneyTreeNode,
   dormer: DormerTreeNode,
@@ -169,7 +174,9 @@ const treeNodeByType: Record<
   'eyebrow-vent': RegistryTreeNode,
   skylight: RegistryTreeNode,
   roof: RoofTreeNode,
+  scan: RegistryTreeNode,
   stair: StairTreeNode,
+  unit: UnitTreeNode,
   door: DoorTreeNode,
   window: WindowTreeNode,
   zone: ZoneTreeNode as React.ComponentType<{
@@ -180,6 +187,10 @@ const treeNodeByType: Record<
   item: ItemTreeNode,
 }
 
+export function getTreeNodeComponent(nodeType: string): TreeNodeComponent {
+  return treeNodeByType[nodeType] ?? RegistryTreeNode
+}
+
 export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: TreeNodeProps) {
   // Registry-driven row hiding (`def.tree.hidden`) — primitive boolean
   // selector so unrelated scene updates don't re-render every row.
@@ -191,14 +202,15 @@ export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: Tr
   const nodeType = useScene((state) => state.nodes[nodeId]?.type)
   if (shouldHide) return null
   if (!nodeType) return null
-  const Component = treeNodeByType[nodeType]
-  if (!Component) return null
+  const Component = getTreeNodeComponent(nodeType)
   return <Component depth={depth} isLast={isLast} nodeId={nodeId} />
 })
 
 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
@@ -224,6 +236,7 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
     {
       nodeId,
       icon,
+      keepIconColor,
       label,
       depth,
       hasChildren,
@@ -318,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}