@pascal-app/editor 0.9.1 → 0.9.2

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

@@ -2,6 +2,7 @@ import { type AnyNodeId, type DormerNode, useScene } from '@pascal-app/core'
 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'
@@ -57,13 +58,15 @@ export const DormerTreeNode = memo(function DormerTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <Image
-          alt=""
-          className="object-contain opacity-60"
-          height={14}
-          src="/icons/roof.png"
-          width={14}
-        />
+        <SnapTargetIcon target="roof">
+          <Image
+            alt=""
+            className="object-contain opacity-60"
+            height={14}
+            src="/icons/roof.webp"
+            width={14}
+          />
+        </SnapTargetIcon>
       }
       isHovered={isHovered}
       isLast={isLast}

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

@@ -49,7 +49,7 @@ export const ElevatorTreeNode = memo(function ElevatorTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <Image alt="" className="object-contain" height={14} src="/icons/elevator.png" width={14} />
+        <Image alt="" className="object-contain" height={14} src="/icons/elevator.webp" width={14} />
       }
       isHovered={isHovered}
       isLast={isLast}

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

@@ -43,7 +43,7 @@ export const FenceTreeNode = memo(function FenceTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <Image alt="" className="object-contain" height={14} src="/icons/fence.png" width={14} />
+        <Image alt="" className="object-contain" height={14} src="/icons/fence.webp" width={14} />
       }
       isHovered={isHovered}
       isLast={isLast}

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

@@ -2,6 +2,7 @@ import { type AnyNodeId, type GutterNode, useScene } from '@pascal-app/core'
 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'
@@ -51,13 +52,15 @@ export const GutterTreeNode = memo(function GutterTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <Image
-          alt=""
-          className="object-contain opacity-60"
-          height={14}
-          src="/icons/roof.png"
-          width={14}
-        />
+        <SnapTargetIcon target="roof">
+          <Image
+            alt=""
+            className="object-contain opacity-60"
+            height={14}
+            src="/icons/roof.webp"
+            width={14}
+          />
+        </SnapTargetIcon>
       }
       isHovered={isHovered}
       isLast={isLast}

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

@@ -36,8 +36,16 @@ import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
 } from './../../../../../lib/level-duplication'
-import { getDefaultLevelName } from './../../../../../lib/level-name'
+import { getDefaultLevelName } from '@pascal-app/core'
 import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
+import {
+  formatAreaLabel,
+  getAreaUnitLabel,
+  getLinearUnitLabel,
+  linearUnitToMeters,
+  metersToLinearUnit,
+  squareMetersToAreaUnit,
+} from './../../../../../lib/measurements'
 import { createLocalGuideImage } from './../../../../../lib/local-guide-image'
 import { cn } from './../../../../../lib/utils'
 import useEditor from './../../../../../store/use-editor'
@@ -93,6 +101,7 @@ const PropertyLineSection = memo(function PropertyLineSection() {
   const updateNode = useScene((state) => state.updateNode)
   const mode = useEditor((state) => state.mode)
   const setMode = useEditor((state) => state.setMode)
+  const viewerUnit = useViewer((state) => state.unit)
 
   if (!siteNode) return null
 
@@ -101,6 +110,14 @@ const PropertyLineSection = memo(function PropertyLineSection() {
   const perimeter = calculatePerimeter(points)
   const isEditing = mode === 'edit'
 
+  // Property-line coordinates and readouts follow the metric/imperial toggle.
+  const isImperial = viewerUnit === 'imperial'
+  const linearLabel = getLinearUnitLabel(viewerUnit)
+  const toDisplayLinear = (meters: number) => metersToLinearUnit(meters, viewerUnit)
+  const toStoredLinear = (display: number) => linearUnitToMeters(display, viewerUnit)
+  const displayArea = squareMetersToAreaUnit(area, viewerUnit)
+  const displayPerimeter = toDisplayLinear(perimeter)
+
   const handleToggleEdit = () => {
     setMode(isEditing ? 'select' : 'edit')
   }
@@ -166,10 +183,16 @@ const PropertyLineSection = memo(function PropertyLineSection() {
       {/* Measurements */}
       <div className="relative flex gap-3 pr-3 pb-2 pl-10">
         <div className="text-muted-foreground text-xs">
-          Area: <span className="text-foreground">{area.toFixed(1)} m²</span>
+          Area:{' '}
+          <span className="text-foreground">
+            {displayArea.toFixed(1)} {getAreaUnitLabel(viewerUnit)}
+          </span>
         </div>
         <div className="text-muted-foreground text-xs">
-          Perimeter: <span className="text-foreground">{perimeter.toFixed(1)} m</span>
+          Perimeter:{' '}
+          <span className="text-foreground">
+            {displayPerimeter.toFixed(1)} {linearLabel}
+          </span>
         </div>
       </div>
 
@@ -184,21 +207,21 @@ const PropertyLineSection = memo(function PropertyLineSection() {
                 <input
                   className="w-16 rounded border border-border/50 bg-accent/50 px-1.5 py-0.5 text-foreground text-xs focus:border-primary focus:outline-none"
                   onChange={(e) =>
-                    handlePointChange(index, 0, Number.parseFloat(e.target.value) || 0)
+                    handlePointChange(index, 0, toStoredLinear(Number.parseFloat(e.target.value) || 0))
                   }
                   step={0.5}
                   type="number"
-                  value={point[0]}
+                  value={Number(toDisplayLinear(point[0]).toFixed(2))}
                 />
                 <label className="shrink-0 text-muted-foreground">Z</label>
                 <input
                   className="w-16 rounded border border-border/50 bg-accent/50 px-1.5 py-0.5 text-foreground text-xs focus:border-primary focus:outline-none"
                   onChange={(e) =>
-                    handlePointChange(index, 1, Number.parseFloat(e.target.value) || 0)
+                    handlePointChange(index, 1, toStoredLinear(Number.parseFloat(e.target.value) || 0))
                   }
                   step={0.5}
                   type="number"
-                  value={point[1]}
+                  value={Number(toDisplayLinear(point[1]).toFixed(2))}
                 />
                 <button
                   className={cn(
@@ -356,13 +379,13 @@ const ReferenceItem = memo(function ReferenceItem({
           <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.png"
+            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.png"
+            src="/icons/floorplan.webp"
           />
         )}
         <InlineRenameInput
@@ -721,7 +744,7 @@ const LevelItem = memo(function LevelItem({
               'h-4 w-4 shrink-0 object-contain transition-all duration-200',
               !isSelected && 'opacity-60 grayscale',
             )}
-            src="/icons/level.png"
+            src="/icons/level.webp"
           />
           <InlineRenameInput
             defaultName={getDefaultLevelName(level.level)}
@@ -999,7 +1022,7 @@ const LayerToggle = memo(function LayerToggle() {
               'mb-1 h-6 w-6 transition-all',
               activeTab !== 'structure' && 'opacity-50 grayscale',
             )}
-            src="/icons/room.png"
+            src="/icons/room.webp"
           />
           Structure
         </div>
@@ -1035,7 +1058,7 @@ const LayerToggle = memo(function LayerToggle() {
               'mb-1 h-6 w-6 transition-all',
               activeTab !== 'furnish' && 'opacity-50 grayscale',
             )}
-            src="/icons/couch.png"
+            src="/icons/couch.webp"
           />
           Furnish
         </div>
@@ -1072,7 +1095,7 @@ const LayerToggle = memo(function LayerToggle() {
               'mb-1 h-6 w-6 transition-all',
               activeTab !== 'zones' && 'opacity-50 grayscale',
             )}
-            src="/icons/kitchen.png"
+            src="/icons/kitchen.webp"
           />
           Zones
         </div>
@@ -1097,6 +1120,7 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const setPhase = useEditor((state) => state.setPhase)
   const setMode = useEditor((state) => state.setMode)
+  const unit = useViewer((state) => state.unit)
 
   const isSelected = selectedZoneId === zone.id
   const isHovered = hoveredId === zone.id
@@ -1109,8 +1133,7 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
     }
   }, [isSelected])
 
-  const area = calculatePolygonArea(zone.polygon).toFixed(1)
-  const defaultName = `Zone (${area}m²)`
+  const defaultName = `Zone (${formatAreaLabel(calculatePolygonArea(zone.polygon), unit)})`
 
   const handleClick = () => {
     setSelection({ zoneId: zone.id })
@@ -1413,7 +1436,7 @@ const BuildingItem = memo(function BuildingItem({
               'h-5 w-5 object-contain transition-all',
               !isBuildingActive && 'opacity-60 grayscale',
             )}
-            src="/icons/building.png"
+            src="/icons/building.webp"
           />
           <span className="truncate font-medium text-sm">{building.name || 'Building'}</span>
         </div>
@@ -1569,7 +1592,7 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
                   'h-5 w-5 object-contain transition-all',
                   phase !== 'site' && 'opacity-60 grayscale',
                 )}
-                src="/icons/site-flag.png"
+                src="/icons/site-flag.webp"
               />
               <span className="font-medium text-sm">{siteNode.name || 'Site'}</span>
             </div>

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

@@ -3,19 +3,25 @@ import { useViewer } from '@pascal-app/viewer'
 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 { resolveNodeSnapTarget, SnapTargetIcon } from '../../../snap-target-badge'
 import { InlineRenameInput } from './inline-rename-input'
-import { focusTreeNode, handleTreeSelection, TreeNode, TreeNodeWrapper } from './tree-node'
+import {
+  focusTreeNode,
+  handleTreeSelection,
+  routeTreeSelectionToNode,
+  TreeNode,
+  TreeNodeWrapper,
+} from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 
 const CATEGORY_ICONS: Record<string, string> = {
-  door: '/icons/door.png',
-  window: '/icons/window.png',
-  furniture: '/icons/couch.png',
-  appliance: '/icons/appliance.png',
-  kitchen: '/icons/kitchen.png',
-  bathroom: '/icons/bathroom.png',
-  outdoor: '/icons/tree.png',
+  door: '/icons/door.webp',
+  window: '/icons/window.webp',
+  furniture: '/icons/couch.webp',
+  appliance: '/icons/appliance.webp',
+  kitchen: '/icons/kitchen.webp',
+  bathroom: '/icons/bathroom.webp',
+  outdoor: '/icons/tree.webp',
 }
 
 interface ItemTreeNodeProps {
@@ -35,7 +41,8 @@ export const ItemTreeNode = memo(function ItemTreeNode({
   const children = useScene(
     useShallow((s) => (s.nodes[nodeId] as ItemNode | undefined)?.children ?? []),
   )
-  const asset = useScene((s) => (s.nodes[nodeId] as ItemNode | undefined)?.asset)
+  const node = useScene((s) => s.nodes[nodeId] as ItemNode | undefined)
+  const asset = node?.asset
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
@@ -63,17 +70,15 @@ export const ItemTreeNode = memo(function ItemTreeNode({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      const handled = handleTreeSelection(
+      handleTreeSelection(
         e,
         nodeId,
         useViewer.getState().selection.selectedIds,
         setSelection,
       )
-      if (!handled && useEditor.getState().phase === 'structure') {
-        useEditor.getState().setPhase('furnish')
-      }
+      routeTreeSelectionToNode(node)
     },
-    [nodeId, setSelection],
+    [node, nodeId, setSelection],
   )
 
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
@@ -83,7 +88,8 @@ export const ItemTreeNode = memo(function ItemTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const iconSrc = CATEGORY_ICONS[asset?.category ?? ''] || '/icons/couch.png'
+  const iconSrc = CATEGORY_ICONS[asset?.category ?? ''] || '/icons/couch.webp'
+  const snapTarget = resolveNodeSnapTarget(node)
   const defaultName = asset?.name || 'Item'
   const hasChildren = children.length > 0
 
@@ -93,7 +99,15 @@ export const ItemTreeNode = memo(function ItemTreeNode({
       depth={depth}
       expanded={expanded}
       hasChildren={hasChildren}
-      icon={<Image alt="" className="object-contain" height={14} src={iconSrc} width={14} />}
+      icon={
+        snapTarget ? (
+          <SnapTargetIcon target={snapTarget}>
+            <Image alt="" className="object-contain" height={14} src={iconSrc} width={14} />
+          </SnapTargetIcon>
+        ) : (
+          <Image alt="" className="object-contain" height={14} src={iconSrc} width={14} />
+        )
+      }
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}

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

@@ -3,7 +3,7 @@ import { 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 '../../../../../lib/level-name'
+import { getDefaultLevelName } from '@pascal-app/core'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'

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

@@ -1,11 +1,20 @@
+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, useState } from 'react'
-import useEditor from './../../../../../store/use-editor'
+import { memo, useCallback, useEffect, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { resolveNodeSnapTarget, SnapTargetIcon } from '../../../snap-target-badge'
 import { InlineRenameInput } from './inline-rename-input'
-import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import {
+  focusTreeNode,
+  handleTreeSelection,
+  routeTreeSelectionToNode,
+  TreeNode,
+  TreeNodeWrapper,
+} from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
+import { resolveTreeChildIds, treeContainsDescendant } from './tree-structure'
 
 interface RegistryTreeNodeProps {
   nodeId: AnyNodeId
@@ -14,11 +23,11 @@ interface RegistryTreeNodeProps {
 }
 
 /**
- * Generic, leaf tree-node row driven entirely by the kind's
- * `def.presentation` (icon + label). Replaces the per-kind boilerplate
+ * Generic, registry-driven tree-node row powered by `def.presentation` and
+ * `def.tree`. Replaces the per-kind boilerplate
  * components that differed only in their default name and icon — today the
- * roof vents (box / ridge / turbine / cupola / eyebrow). Register a kind in
- * `treeNodeByType` against this component instead of authoring another copy.
+ * roof vents plus cabinet rows. Register a kind in `treeNodeByType` against
+ * this component instead of authoring another copy.
  */
 export const RegistryTreeNode = memo(function RegistryTreeNode({
   nodeId,
@@ -26,48 +35,76 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
   isLast,
 }: RegistryTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(true)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
   const node = useScene((s) => s.nodes[nodeId])
+  const children = useScene(useShallow((s) => resolveTreeChildIds(nodeId, s.nodes)))
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
 
   const presentation = node ? nodeRegistry.get(node.type)?.presentation : undefined
+  const tree = node ? nodeRegistry.get(node.type)?.tree : undefined
   const icon = presentation?.icon
-  const iconSrc = icon?.kind === 'url' ? icon.src : '/icons/roof.png'
-  const defaultName = node?.name || presentation?.label || 'Node'
+  const iconSrc = icon?.kind === 'url' ? icon.src : '/icons/roof.webp'
+  const iconElement =
+    icon?.kind === 'iconify' ? (
+      <IconifyIcon className="opacity-60" height={14} icon={icon.name} width={14} />
+    ) : (
+      <Image
+        alt=""
+        className="object-contain opacity-60"
+        height={14}
+        src={iconSrc}
+        width={14}
+      />
+    )
+  const snapTarget = resolveNodeSnapTarget(node)
+  const defaultName =
+    node ? tree?.label?.(node, useScene.getState().nodes) || node.name || presentation?.label || 'Node' : 'Node'
+  const hasChildren = children.length > 0
+
+  useEffect(() => {
+    return useViewer.subscribe((state) => {
+      const { selectedIds } = state.selection
+      if (selectedIds.length === 0) return
+      const nodes = useScene.getState().nodes
+      for (const id of selectedIds) {
+        if (treeContainsDescendant(nodeId, id as AnyNodeId, nodes)) {
+          setExpanded(true)
+          return
+        }
+      }
+    })
+  }, [nodeId])
 
   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')
-      }
+      routeTreeSelectionToNode(node)
     },
-    [nodeId, setSelection],
+    [node, nodeId, setSelection],
   )
 
   return (
     <TreeNodeWrapper
       actions={<TreeNodeActions nodeId={nodeId} />}
       depth={depth}
-      expanded={false}
-      hasChildren={false}
+      expanded={expanded}
+      hasChildren={hasChildren}
       icon={
-        <Image
-          alt=""
-          className="object-contain opacity-60"
-          height={14}
-          src={iconSrc}
-          width={14}
-        />
+        snapTarget ? (
+          <SnapTargetIcon target={snapTarget}>{iconElement}</SnapTargetIcon>
+        ) : (
+          iconElement
+        )
       }
       isHovered={isHovered}
       isLast={isLast}
@@ -87,7 +124,17 @@ export const RegistryTreeNode = memo(function RegistryTreeNode({
       onDoubleClick={() => focusTreeNode(nodeId)}
       onMouseEnter={() => setHoveredId(nodeId)}
       onMouseLeave={() => setHoveredId(null)}
-      onToggle={() => {}}
-    />
+      onToggle={() => setExpanded((prev) => !prev)}
+    >
+      {hasChildren &&
+        children.map((childId, index) => (
+          <TreeNode
+            depth={depth + 1}
+            isLast={index === children.length - 1}
+            key={childId}
+            nodeId={childId as AnyNodeId}
+          />
+        ))}
+    </TreeNodeWrapper>
   )
 })

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

@@ -28,6 +28,7 @@ export const RoofTreeNode = memo(function RoofTreeNode({
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
+  const setRoofHostDragArmedId = useEditor((state) => state.setRoofHostDragArmedId)
   const { drag, dropTarget } = useTreeNodeDrag()
 
   const segments = useScene(
@@ -57,8 +58,11 @@ export const RoofTreeNode = memo(function RoofTreeNode({
       if (!handled && useEditor.getState().phase === 'furnish') {
         useEditor.getState().setPhase('structure')
       }
+      if (!e.metaKey && !e.ctrlKey && !e.shiftKey) {
+        setRoofHostDragArmedId(nodeId)
+      }
     },
-    [nodeId, setSelection],
+    [nodeId, setRoofHostDragArmedId, setSelection],
   )
 
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
@@ -98,7 +102,7 @@ export const RoofTreeNode = memo(function RoofTreeNode({
         expanded={expanded}
         hasChildren={segments.length > 0}
         icon={
-          <Image alt="" className="object-contain" height={14} src="/icons/roof.png" width={14} />
+          <Image alt="" className="object-contain" height={14} src="/icons/roof.webp" width={14} />
         }
         isDropTarget={isValidDropTarget && isDropTarget}
         isHovered={isHovered || isDropTarget}
@@ -230,7 +234,7 @@ function RoofSegmentTreeNode({
             alt=""
             className="object-contain opacity-60"
             height={14}
-            src="/icons/roof.png"
+            src="/icons/roof.webp"
             width={14}
           />
         }

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

@@ -5,9 +5,14 @@ import { useViewer } from '@pascal-app/viewer'
 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, TreeNode, TreeNodeWrapper } from './tree-node'
+import {
+  focusTreeNode,
+  handleTreeSelection,
+  routeTreeSelectionToNode,
+  TreeNode,
+  TreeNodeWrapper,
+} from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 
 interface ShelfTreeNodeProps {
@@ -34,6 +39,7 @@ export const ShelfTreeNode = memo(function ShelfTreeNode({
   const children = useScene(
     useShallow((s) => (s.nodes[nodeId] as ShelfNode | undefined)?.children ?? []),
   )
+  const node = useScene((s) => s.nodes[nodeId] as ShelfNode | undefined)
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
@@ -63,17 +69,15 @@ export const ShelfTreeNode = memo(function ShelfTreeNode({
   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')
-      }
+      routeTreeSelectionToNode(node)
     },
-    [nodeId, setSelection],
+    [node, nodeId, setSelection],
   )
 
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
@@ -92,7 +96,7 @@ export const ShelfTreeNode = memo(function ShelfTreeNode({
       expanded={expanded}
       hasChildren={hasChildren}
       icon={
-        <Image alt="" className="object-contain" height={14} src="/icons/shelf.png" width={14} />
+        <Image alt="" className="object-contain" height={14} src="/icons/shelf.webp" width={14} />
       }
       isHovered={isHovered}
       isLast={isLast}

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

@@ -2,6 +2,7 @@ import { type AnyNodeId, 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'
@@ -25,6 +26,7 @@ export const SlabTreeNode = memo(function SlabTreeNode({
   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 handleClick = useCallback(
     (e: React.MouseEvent) => {
@@ -45,8 +47,7 @@ export const SlabTreeNode = memo(function SlabTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  const area = calculatePolygonArea(polygon).toFixed(1)
-  const defaultName = `Slab (${area}m²)`
+  const defaultName = `Slab (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
 
   return (
     <TreeNodeWrapper
@@ -55,7 +56,7 @@ export const SlabTreeNode = memo(function SlabTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <Image alt="" className="object-contain" height={14} src="/icons/floor.png" width={14} />
+        <Image alt="" className="object-contain" height={14} src="/icons/floor.webp" width={14} />
       }
       isHovered={isHovered}
       isLast={isLast}