@pascal-app/editor 1.0.1 → 1.0.4

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

@@ -19,7 +19,9 @@ import {
   Copy,
   Eye,
   EyeOff,
+  Boxes,
   Group,
+  LayoutGrid,
   Loader2,
   MoreHorizontal,
   Pencil,
@@ -29,7 +31,18 @@ import {
   X,
 } from 'lucide-react'
 import { AnimatePresence, LayoutGroup, motion } from 'motion/react'
-import { memo, useEffect, useRef, useState, useSyncExternalStore } from 'react'
+import { type ComponentType, lazy, memo, Suspense, useEffect, useRef, useState, useSyncExternalStore } from 'react'
+import { nodeRegistry } from '@pascal-app/core'
+
+/** The site kind's inspector (`parametrics.customPanel`), mounted under the Site header. */
+const SiteKindPanel = lazy(async () => {
+  const def = nodeRegistry.get('site') as
+    | { parametrics?: { customPanel?: () => Promise<{ default: ComponentType }> } }
+    | undefined
+  const loader = def?.parametrics?.customPanel
+  if (!loader) return { default: () => null }
+  return loader()
+})
 import { useShallow } from 'zustand/react/shallow'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import {
@@ -40,8 +53,8 @@ import {
 import {
   buildLevelDuplicateCreateOps,
   type LevelDuplicatePreset,
-} from './../../../../../lib/level-duplication'
-import { getDefaultLevelName } from '@pascal-app/core'
+} from '@pascal-app/core/building'
+import { getDefaultLevelName, getLevelDisplayName } from '@pascal-app/core'
 import { deleteLevelWithFallbackSelection } from './../../../../../lib/level-selection'
 import {
   formatAreaLabel,
@@ -53,12 +66,19 @@ import {
 } from './../../../../../lib/measurements'
 import { createLocalGuideImage, createLocalScan } from './../../../../../lib/local-guide-image'
 import { editorHostTreeChildrenRegistry } from './../../../../../lib/host-tree-children'
+import { requestRoomDeletion } from './../../../../../lib/room-structure-commands'
+import {
+  selectZoneOrRoom,
+  useZoneSelected,
+  zoneKindLabel,
+} from './../../../../../lib/room-zone-routing'
 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 { CollectionsSection } from './collection-tree-node'
 import { InlineRenameInput } from './inline-rename-input'
 import { ZoneMembershipCheckbox } from './zone-membership-checkbox'
 import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
@@ -719,8 +739,7 @@ const LevelItem = memo(function LevelItem({
   const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
-  const createNodes = useScene((s) => s.createNodes)
-  const updateNodes = useScene((s) => s.updateNodes)
+  const applyNodeChanges = useScene((s) => s.applyNodeChanges)
   const itemRef = useRef<HTMLDivElement>(null)
   const isSelected = selectedLevelId === level.id
   const canDeleteLevel = level.level !== 0
@@ -754,22 +773,14 @@ const LevelItem = memo(function LevelItem({
   }
 
   const handleDuplicateLevel = (preset: LevelDuplicatePreset = 'everything') => {
-    const { createOps, newLevelId, shiftedLevels } = buildLevelDuplicateCreateOps({
+    const { createOps, newLevelId, updateOps } = buildLevelDuplicateCreateOps({
       nodes: useScene.getState().nodes,
       level,
       levels,
       preset,
     })
 
-    if (shiftedLevels.length > 0) {
-      updateNodes(
-        shiftedLevels.map((shiftedLevel) => ({
-          id: shiftedLevel.id as AnyNodeId,
-          data: { level: shiftedLevel.level } as Partial<AnyNode>,
-        })),
-      )
-    }
-    createNodes(createOps)
+    applyNodeChanges({ create: createOps, update: updateOps })
     selectLevel(newLevelId as LevelNode['id'], false)
     setDuplicateDialogOpen(false)
   }
@@ -838,6 +849,7 @@ const LevelItem = memo(function LevelItem({
           />
           <InlineRenameInput
             defaultName={getDefaultLevelName(level.level)}
+            displayName={getLevelDisplayName(level)}
             isEditing={isEditing}
             nodeId={level.id}
             onStartEditing={() => setIsEditing(true)}
@@ -1149,137 +1161,15 @@ const UnitsSection = memo(function UnitsSection({
   )
 })
 
-const LayerToggle = memo(function LayerToggle() {
-  const structureLayer = useEditor((state) => state.structureLayer)
-  const setStructureLayer = useEditor((state) => state.setStructureLayer)
-  const phase = useEditor((state) => state.phase)
-  const setPhase = useEditor((state) => state.setPhase)
-
-  const activeTab =
-    phase === 'structure' && structureLayer === 'elements'
-      ? 'structure'
-      : phase === 'furnish'
-        ? 'furnish'
-        : phase === 'structure' && structureLayer === 'zones'
-          ? 'zones'
-          : 'none'
-
-  return (
-    <div className="relative flex items-center gap-1 border-border/50 border-b bg-[#2C2C2E] p-1">
-      <button
-        className={cn(
-          'relative flex flex-1 cursor-pointer flex-col items-center justify-center rounded-md py-2 font-medium text-[10px] transition-all duration-200',
-          activeTab === 'structure'
-            ? 'text-foreground'
-            : 'text-muted-foreground hover:bg-white/5 hover:text-foreground',
-        )}
-        onClick={() => {
-          setPhase('structure')
-          setStructureLayer('elements')
-        }}
-      >
-        {activeTab === 'structure' && (
-          <motion.div
-            className="absolute inset-0 rounded-md bg-[#3e3e3e] shadow-sm ring-1 ring-border/50"
-            layoutId="layerToggleActiveBg"
-            transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
-          />
-        )}
-        <div className="relative z-10 flex flex-col items-center">
-          <img
-            alt="Structure"
-            className={cn(
-              'mb-1 h-6 w-6 transition-all',
-              activeTab !== 'structure' && 'opacity-50 grayscale',
-            )}
-            src="/icons/room.webp"
-          />
-          Structure
-        </div>
-        <div className="absolute right-1.5 bottom-1 z-10 rounded border border-border/40 bg-background/40 px-1 py-[2px] backdrop-blur-md">
-          <span className="block font-medium font-mono text-[9px] text-muted-foreground/70 leading-none">
-            B
-          </span>
-        </div>
-      </button>
-
-      <button
-        className={cn(
-          'relative flex flex-1 cursor-pointer flex-col items-center justify-center rounded-md py-2 font-medium text-[10px] transition-all duration-200',
-          activeTab === 'furnish'
-            ? 'text-foreground'
-            : 'text-muted-foreground hover:bg-white/5 hover:text-foreground',
-        )}
-        onClick={() => {
-          setPhase('furnish')
-        }}
-      >
-        {activeTab === 'furnish' && (
-          <motion.div
-            className="absolute inset-0 rounded-md bg-[#3e3e3e] shadow-sm ring-1 ring-border/50"
-            layoutId="layerToggleActiveBg"
-            transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
-          />
-        )}
-        <div className="relative z-10 flex flex-col items-center">
-          <img
-            alt="Furnish"
-            className={cn(
-              'mb-1 h-6 w-6 transition-all',
-              activeTab !== 'furnish' && 'opacity-50 grayscale',
-            )}
-            src="/icons/couch.webp"
-          />
-          Furnish
-        </div>
-        <div className="absolute right-1.5 bottom-1 z-10 rounded border border-border/40 bg-background/40 px-1 py-[2px] backdrop-blur-md">
-          <span className="block font-medium font-mono text-[9px] text-muted-foreground/70 leading-none">
-            F
-          </span>
-        </div>
-      </button>
-
-      <button
-        className={cn(
-          'relative flex flex-1 cursor-pointer flex-col items-center justify-center rounded-md py-2 font-medium text-[10px] transition-all duration-200',
-          activeTab === 'zones'
-            ? 'text-foreground'
-            : 'text-muted-foreground hover:bg-white/5 hover:text-foreground',
-        )}
-        onClick={() => {
-          setPhase('structure')
-          setStructureLayer('zones')
-        }}
-      >
-        {activeTab === 'zones' && (
-          <motion.div
-            className="absolute inset-0 rounded-md bg-[#3e3e3e] shadow-sm ring-1 ring-border/50"
-            layoutId="layerToggleActiveBg"
-            transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
-          />
-        )}
-        <div className="relative z-10 flex flex-col items-center">
-          <img
-            alt="Zones"
-            className={cn(
-              'mb-1 h-6 w-6 transition-all',
-              activeTab !== 'zones' && 'opacity-50 grayscale',
-            )}
-            src="/icons/kitchen.webp"
-          />
-          Zones
-        </div>
-        <div className="absolute right-1.5 bottom-1 z-10 rounded border border-border/40 bg-background/40 px-1 py-[2px] backdrop-blur-md">
-          <span className="block font-medium font-mono text-[9px] text-muted-foreground/70 leading-none">
-            Z
-          </span>
-        </div>
-      </button>
-    </div>
-  )
-})
-
-const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLast?: boolean }) {
+const ZoneItem = memo(function ZoneItem({
+  zone,
+  depth,
+  isLast,
+}: {
+  zone: ZoneNode
+  depth: number
+  isLast?: boolean
+}) {
   const [isEditing, setIsEditing] = useState(false)
   const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
   const deleteNode = useScene((state) => state.deleteNode)
@@ -1289,15 +1179,14 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
     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)
   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 isSelected = useZoneSelected(zone.id)
+  const isRoom = zone.spaceRole === 'room'
   const isHovered = hoveredId === zone.id
 
   const itemRef = useRef<HTMLDivElement>(null)
@@ -1308,12 +1197,11 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
     }
   }, [isSelected])
 
-  const defaultName = `Zone (${formatAreaLabel(calculatePolygonArea(zone.polygon), unit)})`
+  const defaultName = `${zoneKindLabel(zone)} (${formatAreaLabel(calculatePolygonArea(zone.polygon), unit)})`
 
   const handleClick = () => {
-    setSelection({ zoneId: zone.id })
-    setPhase('structure')
     setMode('select')
+    selectZoneOrRoom(zone.id)
   }
 
   const handleDoubleClick = () => {
@@ -1322,6 +1210,8 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
 
   const handleDelete = (e: React.MouseEvent) => {
     e.stopPropagation()
+    // A room goes the way the room panel deletes it (its walls, or merged back).
+    if (isRoom) return requestRoomDeletion(zone.id)
     deleteNode(zone.id)
     if (isSelected) {
       setSelection({ zoneId: null })
@@ -1335,7 +1225,7 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
   return (
     <div
       className={cn(
-        'group/row relative flex h-8 cursor-pointer select-none items-center border-border/50 border-b px-3 text-sm transition-all duration-200',
+        'group/row relative flex h-8 cursor-pointer select-none items-center border-border/50 border-b text-sm transition-all duration-200',
         isSelected
           ? 'bg-accent/50 text-foreground'
           : isHovered
@@ -1347,6 +1237,7 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
       onMouseEnter={() => setHoveredId(zone.id)}
       onMouseLeave={() => setHoveredId(null)}
       ref={itemRef}
+      style={{ paddingLeft: depth * 12 + 28, paddingRight: 12 }}
     >
       {/* Vertical tree line */}
       <div
@@ -1354,12 +1245,12 @@ const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLa
           'pointer-events-none absolute w-px bg-border/50',
           isLast ? 'top-0 bottom-1/2' : 'top-0 bottom-0',
         )}
-        style={{ left: 8 }}
+        style={{ left: (depth - 1) * 12 + 20 }}
       />
       {/* Horizontal branch line */}
       <div
         className="pointer-events-none absolute top-1/2 h-px bg-border/50"
-        style={{ left: 8, width: 4 }}
+        style={{ left: (depth - 1) * 12 + 20, width: 4 }}
       />
 
       {focusedUnit && (
@@ -1476,17 +1367,9 @@ const MultiSelectionBadge = memo(function MultiSelectionBadge() {
   )
 })
 
-const ContentSection = memo(function ContentSection() {
+const RoomsSection = memo(function RoomsSection() {
   const selectedLevelId = useViewer((state) => state.selection.levelId)
-  const structureLayer = useEditor((state) => state.structureLayer)
-  const phase = useEditor((state) => state.phase)
-  const setPhase = useEditor((state) => state.setPhase)
-  const setMode = useEditor((state) => state.setMode)
-  const setTool = useEditor((state) => state.setTool)
-
-  const level = useScene((s) =>
-    selectedLevelId ? ((s.nodes[selectedLevelId] as LevelNode | undefined) ?? null) : null,
-  )
+  const armToolMode = useEditor((state) => state.armToolMode)
   const levelZones = useScene(
     useShallow((s) => {
       if (!selectedLevelId) return []
@@ -1495,6 +1378,82 @@ const ContentSection = memo(function ContentSection() {
       )
     }),
   )
+  const [expanded, setExpanded] = useState(true)
+
+  if (!selectedLevelId) return null
+
+  const handleDrawZone = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    armToolMode({ mode: 'build', tool: 'zone' })
+  }
+
+  const rooms = levelZones.filter((zone) => zone.spaceRole === 'room')
+  const others = levelZones.filter((zone) => zone.spaceRole !== 'room')
+
+  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={handleDrawZone}
+            title="Draw a zone"
+            type="button"
+          >
+            <Plus className="h-3 w-3" />
+          </button>
+        }
+        depth={1}
+        expanded={expanded}
+        hasChildren
+        icon={<LayoutGrid className="h-3.5 w-3.5" />}
+        label={
+          <span className="flex items-center gap-1.5">
+            Rooms
+            {rooms.length > 0 && (
+              <span className="text-muted-foreground text-xs">{rooms.length}</span>
+            )}
+          </span>
+        }
+        onClick={() => setExpanded((value) => !value)}
+        onToggle={() => setExpanded((value) => !value)}
+      >
+        {levelZones.length === 0 && (
+          <div className="border-border/50 border-b py-2 pr-3 pl-[52px] text-muted-foreground text-xs">
+            Close walls around a space to make a room.
+          </div>
+        )}
+        {rooms.map((zone, index) => (
+          <ZoneItem
+            depth={2}
+            isLast={others.length === 0 && index === rooms.length - 1}
+            key={zone.id}
+            zone={zone}
+          />
+        ))}
+        {others.length > 0 && (
+          <>
+            <div
+              className="pt-3 pb-1 pl-[52px] font-medium text-[11px] text-muted-foreground"
+              data-other-zones
+            >
+              Other zones
+            </div>
+            {others.map((zone, index) => (
+              <ZoneItem depth={2} isLast={index === others.length - 1} key={zone.id} zone={zone} />
+            ))}
+          </>
+        )}
+      </TreeNodeWrapper>
+    </div>
+  )
+})
+
+const ContentSection = memo(function ContentSection() {
+  const selectedLevelId = useViewer((state) => state.selection.levelId)
+  const level = useScene((s) =>
+    selectedLevelId ? ((s.nodes[selectedLevelId] as LevelNode | undefined) ?? null) : null,
+  )
   const elementChildren = useScene(
     useShallow((s) => {
       if (!selectedLevelId) return []
@@ -1506,6 +1465,7 @@ const ContentSection = memo(function ContentSection() {
       })
     }),
   )
+  const [expanded, setExpanded] = useState(true)
 
   if (!level) {
     return (
@@ -1513,49 +1473,40 @@ const ContentSection = memo(function ContentSection() {
     )
   }
 
-  if (structureLayer === 'zones') {
-    const handleAddZone = () => {
-      setPhase('structure')
-      setMode('build')
-      setTool('zone')
-    }
-
-    if (levelZones.length === 0) {
-      return (
-        <div className="px-3 py-4 text-muted-foreground text-sm">
-          No zones on this level.{' '}
-          <button className="cursor-pointer text-primary hover:underline" onClick={handleAddZone}>
-            Add one
-          </button>
-        </div>
-      )
-    }
-
-    return (
-      <div className="flex flex-col">
-        {levelZones.map((zone, index) => (
-          <ZoneItem isLast={index === levelZones.length - 1} key={zone.id} zone={zone} />
-        ))}
-      </div>
-    )
-  }
-
-  if (elementChildren.length === 0) {
-    return <div className="px-3 py-4 text-muted-foreground text-sm">No elements on this level</div>
-  }
   return (
-    <TreeNodeDragProvider>
-      <div className="flex flex-col">
-        {elementChildren.map((childId, index) => (
-          <TreeNode
-            depth={0}
-            isLast={index === elementChildren.length - 1}
-            key={childId}
-            nodeId={childId}
-          />
-        ))}
-      </div>
-    </TreeNodeDragProvider>
+    <TreeNodeWrapper
+      depth={1}
+      expanded={expanded}
+      hasChildren
+      icon={<Boxes className="h-3.5 w-3.5" />}
+      label={
+        <span className="flex items-center gap-1.5">
+          Elements
+          {elementChildren.length > 0 && (
+            <span className="text-muted-foreground text-xs">{elementChildren.length}</span>
+          )}
+        </span>
+      }
+      onClick={() => setExpanded((value) => !value)}
+      onToggle={() => setExpanded((value) => !value)}
+    >
+      {elementChildren.length === 0 ? (
+        <div className="border-border/50 border-b py-2 pr-3 pl-[52px] text-muted-foreground text-xs">
+          No elements on this level
+        </div>
+      ) : (
+        <TreeNodeDragProvider>
+          {elementChildren.map((childId, index) => (
+            <TreeNode
+              depth={2}
+              isLast={index === elementChildren.length - 1}
+              key={childId}
+              nodeId={childId}
+            />
+          ))}
+        </TreeNodeDragProvider>
+      )}
+    </TreeNodeWrapper>
   )
 })
 
@@ -1591,7 +1542,7 @@ const BuildingItem = memo(function BuildingItem({
   const handleSelect = () => {
     setSelection({ buildingId: building.id })
     if (phase === 'site') {
-      setPhase('structure')
+      setPhase('building')
     }
   }
 
@@ -1713,7 +1664,8 @@ const BuildingItem = memo(function BuildingItem({
                   projectId={projectId}
                 />
                 <UnitsSection buildingId={building.id} />
-                <LayerToggle />
+                <RoomsSection />
+                <CollectionsSection />
               </div>
               <div className="subtle-scrollbar relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
                 <MultiSelectionBadge />
@@ -1769,7 +1721,14 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
                 : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
             )}
             layout="position"
-            onClick={() => setPhase('site')}
+            onClick={() => {
+              setPhase('site')
+              // Also SELECT the site node so the registry inspector mounts the
+              // site kind's panel (address / parcel / setbacks / front edge).
+              // The site kind opts out of 3D click selection, so this header is
+              // its only selection entry point. (WS1)
+              setSelection({ selectedIds: [siteNode.id as AnyNodeId], zoneId: null })
+            }}
           >
             <div className="flex items-center gap-2">
               <img
@@ -1811,6 +1770,12 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
                 transition={{ type: 'spring', bounce: 0, duration: 0.4 }}
               >
                 <PropertyLineSection />
+                {/* Address → parcel, setbacks, front edge: the site kind's own
+                    panel (packages/nodes/src/site/panel.tsx), loaded through
+                    the registry so the editor does not import the nodes package. */}
+                <Suspense fallback={null}>
+                  <SiteKindPanel />
+                </Suspense>
               </motion.div>
             )}
           </AnimatePresence>
@@ -1824,7 +1789,7 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
             <div className="flex min-h-0 flex-1 flex-col">
               {buildings.map((building) => {
                 const isBuildingActive =
-                  (phase === 'structure' || phase === 'furnish') &&
+                  phase === 'building' &&
                   selectedBuildingId === building.id
 
                 return (

package/src/components/ui/sidebar/panels/site-panel/inline-rename-input.tsx

@@ -3,25 +3,47 @@ import { Pencil } from 'lucide-react'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from './../../../../../lib/utils'
 
-interface InlineRenameInputProps {
-  nodeId: AnyNodeId
+interface InlineRenameFieldProps {
+  name: string | undefined
+  /** Receives the trimmed name, or `undefined` when cleared. */
+  onRename: (name: string | undefined) => void
   isEditing: boolean
   onStopEditing: () => void
   defaultName: string
+  /** Shown instead of the stored name when not editing (a level's display name). */
+  displayName?: string
   className?: string
   onStartEditing?: () => void
 }
 
+type InlineRenameInputProps = Omit<InlineRenameFieldProps, 'name' | 'onRename'> & {
+  nodeId: AnyNodeId
+}
+
+/** Renames a scene node through `updateNode`. */
 export const InlineRenameInput = memo(function InlineRenameInput({
   nodeId,
+  ...props
+}: InlineRenameInputProps) {
+  const updateNode = useScene((s) => s.updateNode)
+  const name = useScene((s) => s.nodes[nodeId]?.name)
+  const handleRename = useCallback(
+    (next: string | undefined) => updateNode(nodeId, { name: next }),
+    [nodeId, updateNode],
+  )
+  return <InlineRenameField {...props} name={name} onRename={handleRename} />
+})
+
+export const InlineRenameField = memo(function InlineRenameField({
+  name,
+  onRename,
   isEditing,
   onStopEditing,
   defaultName,
+  displayName,
   className,
   onStartEditing,
-}: InlineRenameInputProps) {
-  const updateNode = useScene((s) => s.updateNode)
-  const name = useScene((s) => s.nodes[nodeId]?.name)
+}: InlineRenameFieldProps) {
   const [value, setValue] = useState(name || '')
   const inputRef = useRef<HTMLInputElement>(null)
   const inputSize = Math.max((value || defaultName).length, 1)
@@ -42,10 +64,10 @@ export const InlineRenameInput = memo(function InlineRenameInput({
   const handleSave = useCallback(() => {
     const trimmed = value.trim()
     if (trimmed !== name) {
-      updateNode(nodeId, { name: trimmed || undefined })
+      onRename(trimmed || undefined)
     }
     onStopEditing()
-  }, [value, nodeId, name, updateNode, onStopEditing])
+  }, [value, name, onRename, onStopEditing])
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
@@ -61,7 +83,7 @@ export const InlineRenameInput = memo(function InlineRenameInput({
     return (
       <div className="group/rename flex h-5 min-w-0 items-center gap-1">
         <span className={cn('truncate border-transparent border-b', className)}>
-          {name || defaultName}
+          {displayName ?? (name || defaultName)}
         </span>
         {onStartEditing && (
           <button

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

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