@pascal-app/editor 0.8.0 → 0.9.2

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

@@ -0,0 +1,132 @@
+'use client'
+
+import { type AnyNodeId, type ShelfNode, useScene } from '@pascal-app/core'
+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 { InlineRenameInput } from './inline-rename-input'
+import {
+  focusTreeNode,
+  handleTreeSelection,
+  routeTreeSelectionToNode,
+  TreeNode,
+  TreeNodeWrapper,
+} from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface ShelfTreeNodeProps {
+  nodeId: ShelfNode['id']
+  depth: number
+  isLast?: boolean
+}
+
+/**
+ * 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`]`
+ * field on the schema; items reparent into it via `def.surfaces` + the
+ * placement coordinator's shelf strategy.
+ */
+export const ShelfTreeNode = memo(function ShelfTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: ShelfTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [expanded, setExpanded] = useState(true)
+  const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
+  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)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  // Expand when a descendant is selected — same imperative subscription
+  // the item tree-node uses, so we don't re-render when unrelated
+  // selection-state ticks.
+  useEffect(() => {
+    return useViewer.subscribe((state) => {
+      const { selectedIds } = state.selection
+      if (selectedIds.length === 0) return
+      const nodes = useScene.getState().nodes
+      for (const id of selectedIds) {
+        let current = nodes[id as AnyNodeId]
+        while (current?.parentId) {
+          if (current.parentId === nodeId) {
+            setExpanded(true)
+            return
+          }
+          current = nodes[current.parentId as AnyNodeId]
+        }
+      }
+    })
+  }, [nodeId])
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      handleTreeSelection(
+        e,
+        nodeId,
+        useViewer.getState().selection.selectedIds,
+        setSelection,
+      )
+      routeTreeSelectionToNode(node)
+    },
+    [node, nodeId, setSelection],
+  )
+
+  const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
+  const handleMouseEnter = useCallback(() => setHoveredId(nodeId), [nodeId, setHoveredId])
+  const handleMouseLeave = useCallback(() => setHoveredId(null), [setHoveredId])
+  const handleToggle = useCallback(() => setExpanded((prev) => !prev), [])
+  const handleStartEditing = useCallback(() => setIsEditing(true), [])
+  const handleStopEditing = useCallback(() => setIsEditing(false), [])
+
+  const hasChildren = children.length > 0
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions nodeId={nodeId} />}
+      depth={depth}
+      expanded={expanded}
+      hasChildren={hasChildren}
+      icon={
+        <Image alt="" className="object-contain" height={14} src="/icons/shelf.webp" width={14} />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={isVisible}
+      label={
+        <InlineRenameInput
+          defaultName="Shelf"
+          isEditing={isEditing}
+          nodeId={nodeId}
+          onStartEditing={handleStartEditing}
+          onStopEditing={handleStopEditing}
+        />
+      }
+      nodeId={nodeId}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onToggle={handleToggle}
+    >
+      {hasChildren &&
+        children.map((childId, index) => (
+          <TreeNode
+            depth={depth + 1}
+            isLast={index === children.length - 1}
+            key={childId}
+            nodeId={childId}
+          />
+        ))}
+    </TreeNodeWrapper>
+  )
+})

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}
@@ -91,8 +92,11 @@ function calculatePolygonArea(polygon: Array<[number, number]>): number {
 
   for (let i = 0; i < n; i++) {
     const j = (i + 1) % n
-    area += polygon[i]?.[0] * polygon[j]?.[1]
-    area -= polygon[j]?.[0] * polygon[i]?.[1]
+    const pi = polygon[i]
+    const pj = polygon[j]
+    if (!(pi && pj)) continue
+    area += pi[0] * pj[1]
+    area -= pj[0] * pi[1]
   }
 
   return Math.abs(area) / 2

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

@@ -0,0 +1,86 @@
+import { type AnyNodeId, type SolarPanelNode, 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'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface SolarPanelTreeNodeProps {
+  nodeId: AnyNodeId
+  depth: number
+  isLast?: boolean
+}
+
+export const SolarPanelTreeNode = memo(function SolarPanelTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: SolarPanelTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
+  const node = useScene((s) => s.nodes[nodeId] as SolarPanelNode | undefined)
+  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 handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      const handled = handleTreeSelection(
+        e,
+        nodeId,
+        useViewer.getState().selection.selectedIds,
+        setSelection,
+      )
+      if (!handled && useEditor.getState().phase === 'furnish') {
+        useEditor.getState().setPhase('structure')
+      }
+    },
+    [nodeId, setSelection],
+  )
+
+  const defaultName = node?.name || 'Solar Panel'
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions nodeId={nodeId} />}
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <SnapTargetIcon target="roof">
+          <Image
+            alt=""
+            className="object-contain opacity-60"
+            height={14}
+            src="/icons/roof.webp"
+            width={14}
+          />
+        </SnapTargetIcon>
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={isVisible}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          nodeId={nodeId}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      nodeId={nodeId}
+      onClick={handleClick}
+      onDoubleClick={() => focusTreeNode(nodeId)}
+      onMouseEnter={() => setHoveredId(nodeId)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => {}}
+    />
+  )
+})

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

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

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

@@ -98,7 +98,7 @@ export const StairTreeNode = memo(function StairTreeNode({
         expanded={expanded}
         hasChildren={segments.length > 0}
         icon={
-          <Image alt="" className="object-contain" height={14} src="/icons/stairs.png" width={14} />
+          <Image alt="" className="object-contain" height={14} src="/icons/stairs.webp" width={14} />
         }
         isDropTarget={isValidDropTarget && isDropTarget}
         isHovered={isHovered || isDropTarget}
@@ -206,7 +206,7 @@ function StairSegmentTreeNode({
             alt=""
             className="object-contain opacity-60"
             height={14}
-            src="/icons/stairs.png"
+            src="/icons/stairs.webp"
             width={14}
           />
         }

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

@@ -1,7 +1,10 @@
-import { type AnyNodeId, emitter, useScene } from '@pascal-app/core'
+import { type AnyNode, type AnyNodeId, emitter, nodeRegistry, useScene } from '@pascal-app/core'
+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'
 
 export function handleTreeSelection(
   e: React.MouseEvent,
@@ -53,16 +56,48 @@ 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'
+import { ChimneyTreeNode } from './chimney-tree-node'
 import { ColumnTreeNode } from './column-tree-node'
 import { DoorTreeNode } from './door-tree-node'
+import { DormerTreeNode } from './dormer-tree-node'
+import { ElevatorTreeNode } from './elevator-tree-node'
 import { FenceTreeNode } from './fence-tree-node'
+import { GutterTreeNode } from './gutter-tree-node'
 import { ItemTreeNode } from './item-tree-node'
 import { LevelTreeNode } from './level-tree-node'
+import { RegistryTreeNode } from './registry-tree-node'
 import { RoofTreeNode } from './roof-tree-node'
+import { ShelfTreeNode } from './shelf-tree-node'
 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 { WallTreeNode } from './wall-tree-node'
@@ -75,45 +110,83 @@ interface TreeNodeProps {
   isLast?: boolean
 }
 
+// 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
+// flagged by the Phase 6 grep gate as the last per-kind dispatch
+// 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 }>
+> = {
+  building: BuildingTreeNode as React.ComponentType<{
+    depth: number
+    isLast?: boolean
+    nodeId: AnyNodeId
+  }>,
+  cabinet: RegistryTreeNode,
+  'cabinet-module': RegistryTreeNode,
+  'box-vent': RegistryTreeNode,
+  ceiling: CeilingTreeNode,
+  chimney: ChimneyTreeNode,
+  dormer: DormerTreeNode,
+  downspout: RegistryTreeNode,
+  'solar-panel': SolarPanelTreeNode,
+  column: ColumnTreeNode,
+  elevator: ElevatorTreeNode,
+  level: LevelTreeNode as React.ComponentType<{
+    depth: number
+    isLast?: boolean
+    nodeId: AnyNodeId
+  }>,
+  shelf: ShelfTreeNode as React.ComponentType<{
+    depth: number
+    isLast?: boolean
+    nodeId: AnyNodeId
+  }>,
+  slab: SlabTreeNode,
+  spawn: SpawnTreeNode as React.ComponentType<{
+    depth: number
+    isLast?: boolean
+    nodeId: AnyNodeId
+  }>,
+  wall: WallTreeNode,
+  fence: FenceTreeNode,
+  gutter: GutterTreeNode,
+  measurement: RegistryTreeNode,
+  'ridge-vent': RegistryTreeNode,
+  'turbine-vent': RegistryTreeNode,
+  cupola: RegistryTreeNode,
+  'eyebrow-vent': RegistryTreeNode,
+  skylight: RegistryTreeNode,
+  roof: RoofTreeNode,
+  stair: StairTreeNode,
+  door: DoorTreeNode,
+  window: WindowTreeNode,
+  zone: ZoneTreeNode as React.ComponentType<{
+    depth: number
+    isLast?: boolean
+    nodeId: AnyNodeId
+  }>,
+  item: ItemTreeNode,
+}
+
 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.
+  const shouldHide = useScene((state) => {
+    const node = state.nodes[nodeId]
+    if (!node) return false
+    return nodeRegistry.get(node.type)?.tree?.hidden?.(node, state.nodes) ?? false
+  })
   const nodeType = useScene((state) => state.nodes[nodeId]?.type)
-
+  if (shouldHide) return null
   if (!nodeType) return null
-
-  switch (nodeType) {
-    case 'building':
-      return (
-        <BuildingTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `building_${string}`} />
-      )
-    case 'ceiling':
-      return <CeilingTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'column':
-      return <ColumnTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'level':
-      return <LevelTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `level_${string}`} />
-    case 'slab':
-      return <SlabTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'spawn':
-      return <SpawnTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `spawn_${string}`} />
-    case 'wall':
-      return <WallTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'fence':
-      return <FenceTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'roof':
-      return <RoofTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'stair':
-      return <StairTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'item':
-      return <ItemTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'door':
-      return <DoorTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'window':
-      return <WindowTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
-    case 'zone':
-      return <ZoneTreeNode depth={depth} isLast={isLast} nodeId={nodeId as `zone_${string}`} />
-    default:
-      return null
-  }
+  const Component = treeNodeByType[nodeType]
+  if (!Component) return null
+  return <Component depth={depth} isLast={isLast} nodeId={nodeId} />
 })
 
 interface TreeNodeWrapperProps {
@@ -234,10 +307,10 @@ export const TreeNodeWrapper = forwardRef<HTMLDivElement, TreeNodeWrapperProps>(
               </motion.div>
             ) : null}
           </button>
-          <div className="flex min-w-0 flex-1 items-center gap-1.5">
+          <div className="flex min-w-0 flex-1 items-center gap-2">
             <span
               className={cn(
-                'flex h-4 w-4 shrink-0 items-center justify-center transition-all duration-200',
+                'flex h-5 w-5 shrink-0 items-center justify-center transition-all duration-200',
                 !isSelected && 'opacity-60 grayscale',
               )}
             >

package/src/components/ui/sidebar/panels/site-panel/tree-structure.ts

@@ -0,0 +1,36 @@
+import { type AnyNode, type AnyNodeId, nodeRegistry } from '@pascal-app/core'
+
+/**
+ * Child ids the sidebar tree renders under a node: the kind's
+ * `def.tree.childIds` override when declared, otherwise the node's own
+ * `children`. Kind-agnostic — kinds that reshape their subtree (hidden
+ * derived nodes, flattened containers) do so via the registry hook.
+ */
+export function resolveTreeChildIds(
+  nodeId: AnyNodeId,
+  nodes: Readonly<Partial<Record<AnyNodeId, AnyNode>>>,
+): AnyNodeId[] {
+  const node = nodes[nodeId]
+  if (!node) return []
+  const childIds = nodeRegistry.get(node.type)?.tree?.childIds
+  if (childIds) return childIds(node, nodes)
+  const children = (node as { children?: unknown }).children
+  return Array.isArray(children) ? (children as AnyNodeId[]) : []
+}
+
+/**
+ * Whether `targetId` appears anywhere under `nodeId` in the *rendered*
+ * sidebar tree (i.e. walking registry-overridden child ids, not the raw
+ * scene graph). Drives auto-expansion when a descendant gets selected.
+ */
+export function treeContainsDescendant(
+  nodeId: AnyNodeId,
+  targetId: AnyNodeId,
+  nodes: Readonly<Partial<Record<AnyNodeId, AnyNode>>>,
+): boolean {
+  for (const childId of resolveTreeChildIds(nodeId, nodes)) {
+    if (childId === targetId) return true
+    if (treeContainsDescendant(childId, targetId, nodes)) return true
+  }
+  return false
+}

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

@@ -79,7 +79,7 @@ export const WallTreeNode = memo(function WallTreeNode({
       expanded={expanded}
       hasChildren={children.length > 0}
       icon={
-        <Image alt="" className="object-contain" height={14} src="/icons/wall.png" width={14} />
+        <Image alt="" className="object-contain" height={14} src="/icons/wall.webp" width={14} />
       }
       isHovered={isHovered}
       isLast={isLast}

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

@@ -1,9 +1,10 @@
 'use client'
 
-import { type AnyNodeId, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type WindowNode, useScene } from '@pascal-app/core'
 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'
@@ -22,6 +23,7 @@ export const WindowTreeNode = memo(function WindowTreeNode({
 }: WindowTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
+  const node = useScene((s) => s.nodes[nodeId] as WindowNode | undefined)
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
   const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
@@ -45,6 +47,7 @@ export const WindowTreeNode = memo(function WindowTreeNode({
 
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
+  const snapTarget = resolveNodeSnapTarget(node) ?? 'wall'
 
   return (
     <TreeNodeWrapper
@@ -53,7 +56,9 @@ export const WindowTreeNode = memo(function WindowTreeNode({
       expanded={false}
       hasChildren={false}
       icon={
-        <Image alt="" className="object-contain" height={14} src="/icons/window.png" width={14} />
+        <SnapTargetIcon target={snapTarget}>
+          <Image alt="" className="object-contain" height={14} src="/icons/window.webp" width={14} />
+        </SnapTargetIcon>
       }
       isHovered={isHovered}
       isLast={isLast}

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

@@ -2,6 +2,7 @@ import { useScene, type ZoneNode } from '@pascal-app/core'
 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 { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
@@ -26,6 +27,7 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
   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(() => setSelection({ zoneId: nodeId }), [nodeId, setSelection])
   const handleDoubleClick = useCallback(() => focusTreeNode(nodeId), [nodeId])
@@ -34,9 +36,7 @@ export const ZoneTreeNode = memo(function ZoneTreeNode({
   const handleStartEditing = useCallback(() => setIsEditing(true), [])
   const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
-  // Calculate approximate area from polygon
-  const area = calculatePolygonArea(polygon).toFixed(1)
-  const defaultName = `Zone (${area}m²)`
+  const defaultName = `Zone (${formatAreaLabel(calculatePolygonArea(polygon), unit)})`
 
   return (
     <TreeNodeWrapper