@pascal-app/editor 0.4.0 → 0.5.1

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

@@ -1,7 +1,8 @@
-import { type BuildingNode, LevelNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, type BuildingNode, LevelNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Building2, Plus } from 'lucide-react'
 import { useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import {
   Tooltip,
   TooltipContent,
@@ -11,37 +12,42 @@ import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 
 interface BuildingTreeNodeProps {
-  node: BuildingNode
+  nodeId: AnyNodeId
   depth: number
   isLast?: boolean
 }
 
-export function BuildingTreeNode({ node, depth, isLast }: BuildingTreeNodeProps) {
+export function BuildingTreeNode({ nodeId, depth, isLast }: BuildingTreeNodeProps) {
   const [expanded, setExpanded] = useState(true)
   const createNode = useScene((state) => state.createNode)
-  const isSelected = useViewer((state) => state.selection.buildingId === node.id)
-  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
+  const name = useScene((s) => s.nodes[nodeId]?.name)
+  const children = useScene(
+    useShallow((s) => (s.nodes[nodeId] as BuildingNode | undefined)?.children ?? []),
+  )
+  const isSelected = useViewer((state) => state.selection.buildingId === nodeId)
+  const isHovered = useViewer((state) => state.hoveredId === nodeId)
   const setSelection = useViewer((state) => state.setSelection)
 
   const handleClick = () => {
-    setSelection({ buildingId: node.id })
+    setSelection({ buildingId: nodeId })
   }
 
   const handleAddLevel = (e: React.MouseEvent) => {
     e.stopPropagation()
     const newLevel = LevelNode.parse({
-      level: node.children.length,
+      level: children.length,
       children: [],
-      parentId: node.id,
+      parentId: nodeId,
     })
-    createNode(newLevel, node.id)
+    createNode(newLevel, nodeId)
   }
 
   return (
     <TreeNodeWrapper
       actions={
         <div className="flex items-center gap-0.5">
-          <TreeNodeActions node={node} />
+          <TreeNodeActions nodeId={nodeId} />
           <Tooltip>
             <TooltipTrigger asChild>
               <button
@@ -57,20 +63,21 @@ export function BuildingTreeNode({ node, depth, isLast }: BuildingTreeNodeProps)
       }
       depth={depth}
       expanded={expanded}
-      hasChildren={node.children.length > 0}
+      hasChildren={children.length > 0}
       icon={<Building2 className="h-3.5 w-3.5" />}
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}
-      label={node.name || 'Building'}
+      isVisible={isVisible}
+      label={name || 'Building'}
       onClick={handleClick}
-      onDoubleClick={() => focusTreeNode(node.id)}
+      onDoubleClick={() => focusTreeNode(nodeId)}
       onToggle={() => setExpanded(!expanded)}
     >
-      {node.children.map((childId, index) => (
+      {children.map((childId, index) => (
         <TreeNode
           depth={depth + 1}
-          isLast={index === node.children.length - 1}
+          isLast={index === children.length - 1}
           key={childId}
           nodeId={childId}
         />

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

@@ -1,104 +1,112 @@
 import { type AnyNodeId, type CeilingNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { useEffect, useState } from 'react'
+import { 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 { TreeNodeActions } from './tree-node-actions'
 
 interface CeilingTreeNodeProps {
-  node: CeilingNode
+  nodeId: AnyNodeId
   depth: number
   isLast?: boolean
 }
 
-export function CeilingTreeNode({ node, depth, isLast }: CeilingTreeNodeProps) {
+export function CeilingTreeNode({ nodeId, depth, isLast }: CeilingTreeNodeProps) {
   const [expanded, setExpanded] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
-  const selectedIds = useViewer((state) => state.selection.selectedIds)
-  const isSelected = selectedIds.includes(node.id)
-  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
+  const children = useScene(
+    useShallow((s) => (s.nodes[nodeId as AnyNodeId] as CeilingNode | undefined)?.children ?? []),
+  )
+  const polygon = useScene(
+    (s) => (s.nodes[nodeId as AnyNodeId] as CeilingNode | undefined)?.polygon ?? [],
+  )
+  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 — imperative to avoid subscribing to the full selectedIds array
   useEffect(() => {
-    if (selectedIds.length === 0) return
-    const nodes = useScene.getState().nodes
-    let isDescendant = false
-    for (const id of selectedIds) {
-      let current = nodes[id as AnyNodeId]
-      while (current?.parentId) {
-        if (current.parentId === node.id) {
-          isDescendant = true
-          break
+    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]
         }
-        current = nodes[current.parentId as AnyNodeId]
       }
-      if (isDescendant) break
-    }
-    if (isDescendant) {
-      setExpanded(true)
-    }
-  }, [selectedIds, node.id])
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    const handled = handleTreeSelection(e, node.id, selectedIds, setSelection)
-    if (!handled && useEditor.getState().phase === 'furnish') {
-      useEditor.getState().setPhase('structure')
-    }
-  }
-
-  const handleDoubleClick = () => {
-    focusTreeNode(node.id)
-  }
+    })
+  }, [nodeId])
 
-  const handleMouseEnter = () => {
-    setHoveredId(node.id)
-  }
+  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 handleMouseLeave = () => {
-    setHoveredId(null)
-  }
+  const handleDoubleClick = useCallback(() => focusTreeNode(nodeId as AnyNodeId), [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), [])
 
-  // Calculate approximate area from polygon
-  const area = calculatePolygonArea(node.polygon).toFixed(1)
+  const area = calculatePolygonArea(polygon).toFixed(1)
   const defaultName = `Ceiling (${area}m²)`
 
   return (
     <TreeNodeWrapper
-      actions={<TreeNodeActions node={node} />}
+      actions={<TreeNodeActions nodeId={nodeId as AnyNodeId} />}
       depth={depth}
       expanded={expanded}
-      hasChildren={node.children.length > 0}
+      hasChildren={children.length > 0}
       icon={
         <Image alt="" className="object-contain" height={14} src="/icons/ceiling.png" width={14} />
       }
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}
-      isVisible={node.visible !== false}
+      isVisible={isVisible}
       label={
         <InlineRenameInput
           defaultName={defaultName}
           isEditing={isEditing}
-          node={node}
-          onStartEditing={() => setIsEditing(true)}
-          onStopEditing={() => setIsEditing(false)}
+          nodeId={nodeId as AnyNodeId}
+          onStartEditing={handleStartEditing}
+          onStopEditing={handleStopEditing}
         />
       }
-      nodeId={node.id}
+      nodeId={nodeId}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      onToggle={() => setExpanded(!expanded)}
+      onToggle={handleToggle}
     >
-      {node.children.map((childId, index) => (
+      {children.map((childId, index) => (
         <TreeNode
           depth={depth + 1}
-          isLast={index === node.children.length - 1}
+          isLast={index === children.length - 1}
           key={childId}
           nodeId={childId}
         />

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

@@ -1,33 +1,50 @@
 'use client'
 
-import type { DoorNode } from '@pascal-app/core'
+import { type AnyNodeId, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 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 DoorTreeNodeProps {
-  node: DoorNode
+  nodeId: AnyNodeId
   depth: number
   isLast?: boolean
 }
 
-export function DoorTreeNode({ node, depth, isLast }: DoorTreeNodeProps) {
+export function DoorTreeNode({ nodeId, depth, isLast }: DoorTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
-  const selectedIds = useViewer((state) => state.selection.selectedIds)
-  const isSelected = selectedIds.includes(node.id)
-  const isHovered = useViewer((state) => state.hoveredId === node.id)
+  const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
+  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 defaultName = 'Door'
+  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 handleStartEditing = useCallback(() => setIsEditing(true), [])
+  const handleStopEditing = useCallback(() => setIsEditing(false), [])
 
   return (
     <TreeNodeWrapper
-      actions={<TreeNodeActions node={node} />}
+      actions={<TreeNodeActions nodeId={nodeId as AnyNodeId} />}
       depth={depth}
       expanded={false}
       hasChildren={false}
@@ -37,26 +54,20 @@ export function DoorTreeNode({ node, depth, isLast }: DoorTreeNodeProps) {
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}
-      isVisible={node.visible !== false}
+      isVisible={isVisible}
       label={
         <InlineRenameInput
-          defaultName={defaultName}
+          defaultName="Door"
           isEditing={isEditing}
-          node={node}
-          onStartEditing={() => setIsEditing(true)}
-          onStopEditing={() => setIsEditing(false)}
+          nodeId={nodeId as AnyNodeId}
+          onStartEditing={handleStartEditing}
+          onStopEditing={handleStopEditing}
         />
       }
-      nodeId={node.id}
-      onClick={(e: React.MouseEvent) => {
-        e.stopPropagation()
-        const handled = handleTreeSelection(e, node.id, selectedIds, setSelection)
-        if (!handled && useEditor.getState().phase === 'furnish') {
-          useEditor.getState().setPhase('structure')
-        }
-      }}
-      onDoubleClick={() => focusTreeNode(node.id)}
-      onMouseEnter={() => setHoveredId(node.id)}
+      nodeId={nodeId}
+      onClick={handleClick}
+      onDoubleClick={() => focusTreeNode(nodeId as AnyNodeId)}
+      onMouseEnter={() => setHoveredId(nodeId)}
       onMouseLeave={() => setHoveredId(null)}
       onToggle={() => {}}
     />

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

@@ -0,0 +1,65 @@
+import { type AnyNodeId, type FenceNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { useState } from 'react'
+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 FenceTreeNodeProps {
+  nodeId: AnyNodeId
+  depth: number
+  isLast?: boolean
+}
+
+export function FenceTreeNode({ nodeId, depth, isLast }: FenceTreeNodeProps) {
+  const node = useScene((state) => state.nodes[nodeId]) as FenceNode | undefined
+  const [isEditing, setIsEditing] = useState(false)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const isSelected = selectedIds.includes(nodeId)
+  const isHovered = useViewer((state) => state.hoveredId === nodeId)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  if (!node) return null
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const handled = handleTreeSelection(e, nodeId, selectedIds, setSelection)
+    if (!handled && useEditor.getState().phase === 'furnish') {
+      useEditor.getState().setPhase('structure')
+    }
+  }
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions node={node} />}
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <Image alt="" className="object-contain" height={14} src="/icons/fence.png" width={14} />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={node.visible !== false}
+      label={
+        <InlineRenameInput
+          defaultName="Fence"
+          isEditing={isEditing}
+          node={node}
+          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/index.tsx

@@ -24,6 +24,7 @@ import {
 } from 'lucide-react'
 import { AnimatePresence, LayoutGroup, motion } from 'motion/react'
 import { useEffect, useRef, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import {
   Popover,
@@ -393,8 +394,15 @@ function LevelReferences({
   onUploadAsset,
   onDeleteAsset,
 }: LevelReferencesProps) {
-  const nodes = useScene((s) => s.nodes)
   const deleteNode = useScene((s) => s.deleteNode)
+  const references = useScene(
+    useShallow((s) =>
+      Object.values(s.nodes).filter(
+        (node): node is ScanNode | GuideNode =>
+          (node.type === 'scan' || node.type === 'guide') && node.parentId === levelId,
+      ),
+    ),
+  )
   const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
   const uploadState = useUploadStore((s) => s.uploads[levelId])
   const clearUpload = useUploadStore((s) => s.clearUpload)
@@ -409,11 +417,6 @@ function LevelReferences({
 
   const scanInputRef = useRef<HTMLInputElement>(null)
 
-  const references = Object.values(nodes).filter(
-    (node): node is ScanNode | GuideNode =>
-      (node.type === 'scan' || node.type === 'guide') && node.parentId === levelId,
-  )
-
   const handleAddAsset = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
@@ -457,7 +460,10 @@ function LevelReferences({
 
   const handleDelete = async (nodeId: string, e: React.MouseEvent) => {
     e.stopPropagation()
-    const refNode = nodes[nodeId as AnyNodeId] as ScanNode | GuideNode | undefined
+    const refNode = useScene.getState().nodes[nodeId as AnyNodeId] as
+      | ScanNode
+      | GuideNode
+      | undefined
 
     if (
       projectId &&
@@ -789,21 +795,28 @@ function LevelsSection({
   onUploadAsset?: (projectId: string, levelId: string, file: File, type: 'scan' | 'guide') => void
   onDeleteAsset?: (projectId: string, url: string) => void
 } = {}) {
-  const nodes = useScene((state) => state.nodes)
   const createNode = useScene((state) => state.createNode)
   const updateNode = useScene((state) => state.updateNode)
   const selectedBuildingId = useViewer((state) => state.selection.buildingId)
   const selectedLevelId = useViewer((state) => state.selection.levelId)
   const setSelection = useViewer((state) => state.setSelection)
 
-  const building = selectedBuildingId ? (nodes[selectedBuildingId] as BuildingNode) : null
+  const building = useScene((s) =>
+    selectedBuildingId ? ((s.nodes[selectedBuildingId] as BuildingNode | undefined) ?? null) : null,
+  )
+  const levels = useScene(
+    useShallow((s) => {
+      if (!selectedBuildingId) return []
+      const bldg = s.nodes[selectedBuildingId] as BuildingNode | undefined
+      if (!bldg) return []
+      return bldg.children
+        .map((id) => s.nodes[id])
+        .filter((node): node is LevelNode => node?.type === 'level')
+    }),
+  )
 
   if (!building) return null
 
-  const levels = building.children
-    .map((id) => nodes[id])
-    .filter((node): node is LevelNode => node?.type === 'level')
-
   const handleAddLevel = () => {
     const newLevel = LevelNode.parse({
       level: levels.length,
@@ -1175,7 +1188,6 @@ function MultiSelectionBadge() {
 }
 
 function ContentSection() {
-  const nodes = useScene((state) => state.nodes)
   const selectedLevelId = useViewer((state) => state.selection.levelId)
   const structureLayer = useEditor((state) => state.structureLayer)
   const phase = useEditor((state) => state.phase)
@@ -1183,7 +1195,25 @@ function ContentSection() {
   const setMode = useEditor((state) => state.setMode)
   const setTool = useEditor((state) => state.setTool)
 
-  const level = selectedLevelId ? (nodes[selectedLevelId] as LevelNode) : null
+  const level = useScene((s) =>
+    selectedLevelId ? ((s.nodes[selectedLevelId] as LevelNode | undefined) ?? null) : null,
+  )
+  const levelZones = useScene(
+    useShallow((s) => {
+      if (!selectedLevelId) return []
+      return Object.values(s.nodes).filter(
+        (node): node is ZoneNode => node.type === 'zone' && node.parentId === selectedLevelId,
+      )
+    }),
+  )
+  const elementChildren = useScene(
+    useShallow((s) => {
+      if (!selectedLevelId) return []
+      const lvl = s.nodes[selectedLevelId] as LevelNode | undefined
+      if (!lvl) return []
+      return lvl.children.filter((childId) => s.nodes[childId]?.type !== 'zone')
+    }),
+  )
 
   if (!level) {
     return (
@@ -1192,11 +1222,6 @@ function ContentSection() {
   }
 
   if (structureLayer === 'zones') {
-    // Show zones for this level
-    const levelZones = Object.values(nodes).filter(
-      (node): node is ZoneNode => node.type === 'zone' && node.parentId === selectedLevelId,
-    )
-
     const handleAddZone = () => {
       setPhase('structure')
       setMode('build')
@@ -1223,21 +1248,9 @@ function ContentSection() {
     )
   }
 
-  // Filter elements based on phase
-  const elementChildren = level.children.filter((childId) => {
-    const childNode = nodes[childId]
-    if (!childNode || childNode.type === 'zone') return false
-
-    // We no longer filter out structural nodes in furnish mode or furnish nodes in structure mode
-    // This allows nested items (like lights in a ceiling or cabinetry on a wall) to remain visible
-    // and selectable in both modes, ensuring seamless transition in the tree view.
-    return true
-  })
-
   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">
@@ -1431,7 +1444,6 @@ export interface SitePanelProps {
 }
 
 export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanelProps = {}) {
-  const nodes = useScene((state) => state.nodes)
   const rootNodeIds = useScene((state) => state.rootNodeIds)
   const updateNode = useScene((state) => state.updateNode)
   const selectedBuildingId = useViewer((state) => state.selection.buildingId)
@@ -1442,13 +1454,20 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
   const [siteCameraOpen, setSiteCameraOpen] = useState(false)
   const [buildingCameraOpen, setBuildingCameraOpen] = useState<string | null>(null)
 
-  const siteNode = rootNodeIds[0] ? nodes[rootNodeIds[0]] : null
-  const buildings = (siteNode?.type === 'site' ? siteNode.children : [])
-    .map((child) => {
-      const id = typeof child === 'string' ? child : child.id
-      return nodes[id] as BuildingNode | undefined
-    })
-    .filter((node): node is BuildingNode => node?.type === 'building')
+  const siteNode = useScene((s) =>
+    rootNodeIds[0] ? ((s.nodes[rootNodeIds[0]] as SiteNode | undefined) ?? null) : null,
+  )
+  const buildings = useScene(
+    useShallow((s) => {
+      if (!siteNode) return []
+      return siteNode.children
+        .map((child) => {
+          const id = typeof child === 'string' ? child : child.id
+          return s.nodes[id] as BuildingNode | undefined
+        })
+        .filter((node): node is BuildingNode => node?.type === 'building')
+    }),
+  )
 
   return (
     <LayoutGroup>

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

@@ -1,10 +1,10 @@
-import { type AnyNode, useScene } from '@pascal-app/core'
+import { type AnyNodeId, useScene } from '@pascal-app/core'
 import { Pencil } from 'lucide-react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from './../../../../../lib/utils'
 
 interface InlineRenameInputProps {
-  node: AnyNode
+  nodeId: AnyNodeId
   isEditing: boolean
   onStopEditing: () => void
   defaultName: string
@@ -12,8 +12,8 @@ interface InlineRenameInputProps {
   onStartEditing?: () => void
 }
 
-export function InlineRenameInput({
-  node,
+export const InlineRenameInput = memo(function InlineRenameInput({
+  nodeId,
   isEditing,
   onStopEditing,
   defaultName,
@@ -21,13 +21,14 @@ export function InlineRenameInput({
   onStartEditing,
 }: InlineRenameInputProps) {
   const updateNode = useScene((s) => s.updateNode)
-  const [value, setValue] = useState(node.name || '')
+  const name = useScene((s) => s.nodes[nodeId]?.name)
+  const [value, setValue] = useState(name || '')
   const inputRef = useRef<HTMLInputElement>(null)
   const inputSize = Math.max((value || defaultName).length, 1)
 
   useEffect(() => {
     if (isEditing) {
-      setValue(node.name || '')
+      setValue(name || '')
       // Focus and select all text after a short delay
       setTimeout(() => {
         if (inputRef.current) {
@@ -36,15 +37,15 @@ export function InlineRenameInput({
         }
       }, 0)
     }
-  }, [isEditing, node.name])
+  }, [isEditing, name])
 
   const handleSave = useCallback(() => {
     const trimmed = value.trim()
-    if (trimmed !== node.name) {
-      updateNode(node.id, { name: trimmed || undefined })
+    if (trimmed !== name) {
+      updateNode(nodeId, { name: trimmed || undefined })
     }
     onStopEditing()
-  }, [value, node.id, node.name, updateNode, onStopEditing])
+  }, [value, nodeId, name, updateNode, onStopEditing])
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
@@ -60,7 +61,7 @@ export 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)}>
-          {node.name || defaultName}
+          {name || defaultName}
         </span>
         {onStartEditing && (
           <button
@@ -95,4 +96,4 @@ export function InlineRenameInput({
       value={value}
     />
   )
-}
+})