@pascal-app/editor 0.4.0 → 0.6.0

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

@@ -2,7 +2,8 @@ import { type AnyNodeId, type StairNode, type StairSegmentNode, useScene } from
 import { useViewer } from '@pascal-app/viewer'
 import { AnimatePresence } from 'motion/react'
 import Image from 'next/image'
-import { useCallback, useEffect, useState } from 'react'
+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, TreeNodeWrapper } from './tree-node'
@@ -10,47 +11,62 @@ import { TreeNodeActions } from './tree-node-actions'
 import { DropIndicatorLine, useTreeNodeDrag } from './tree-node-drag'
 
 interface StairTreeNodeProps {
-  node: StairNode
+  nodeId: AnyNodeId
   depth: number
   isLast?: boolean
 }
 
-export function StairTreeNode({ node, depth, isLast }: StairTreeNodeProps) {
+export const StairTreeNode = memo(function StairTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: StairTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = 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]?.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 nodes = useScene((state) => state.nodes)
   const { drag, dropTarget } = useTreeNodeDrag()
 
-  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)
-  }
-
-  const handleMouseEnter = () => {
-    setHoveredId(node.id)
-  }
+  const segments = useScene(
+    useShallow((s) => {
+      const n = s.nodes[nodeId] as StairNode | undefined
+      if (!n) return [] as StairSegmentNode[]
+      return (n.children ?? [])
+        .map((childId) => s.nodes[childId as AnyNodeId] as StairSegmentNode | undefined)
+        .filter((n): n is StairSegmentNode => n?.type === 'stair-segment')
+    }),
+  )
 
-  const handleMouseLeave = () => {
-    setHoveredId(null)
-  }
+  // Targeted selector — only re-renders when a segment of THIS stair is selected/deselected
+  const hasSelectedChild = useViewer((state) =>
+    segments.some((seg) => state.selection.selectedIds.includes(seg.id)),
+  )
 
-  const segments = (node.children ?? [])
-    .map((childId) => nodes[childId as AnyNodeId] as StairSegmentNode | undefined)
-    .filter((n): n is StairSegmentNode => n?.type === 'stair-segment')
+  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 hasSelectedChild = segments.some((seg) => selectedIds.includes(seg.id))
+  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), [])
 
   useEffect(() => {
     if (isSelected || hasSelectedChild) {
@@ -59,7 +75,7 @@ export function StairTreeNode({ node, depth, isLast }: StairTreeNodeProps) {
   }, [isSelected, hasSelectedChild])
 
   // Auto-expand when a segment is being dragged over this stair
-  const isDropTarget = drag !== null && dropTarget?.parentId === node.id
+  const isDropTarget = drag !== null && dropTarget?.parentId === nodeId
   useEffect(() => {
     if (isDropTarget && !expanded) {
       setExpanded(true)
@@ -72,12 +88,12 @@ export function StairTreeNode({ node, depth, isLast }: StairTreeNodeProps) {
   // Hide the dragged segment from every stair while dragging
   const visibleSegments = drag ? segments.filter((seg) => seg.id !== drag.nodeId) : segments
 
-  const isValidDropTarget = drag !== null && drag.nodeId !== node.id
+  const isValidDropTarget = drag !== null && drag.nodeId !== nodeId
 
   return (
-    <div data-drop-target={node.id}>
+    <div data-drop-target={nodeId}>
       <TreeNodeWrapper
-        actions={<TreeNodeActions node={node} />}
+        actions={<TreeNodeActions nodeId={nodeId} />}
         depth={depth}
         expanded={expanded}
         hasChildren={segments.length > 0}
@@ -88,22 +104,22 @@ export function StairTreeNode({ node, depth, isLast }: StairTreeNodeProps) {
         isHovered={isHovered || isDropTarget}
         isLast={isLast && !expanded}
         isSelected={isSelected}
-        isVisible={node.visible !== false}
+        isVisible={isVisible}
         label={
           <InlineRenameInput
             defaultName={defaultName}
             isEditing={isEditing}
-            node={node}
-            onStartEditing={() => setIsEditing(true)}
-            onStopEditing={() => setIsEditing(false)}
+            nodeId={nodeId}
+            onStartEditing={handleStartEditing}
+            onStopEditing={handleStopEditing}
           />
         }
-        nodeId={node.id}
+        nodeId={nodeId}
         onClick={handleClick}
         onDoubleClick={handleDoubleClick}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
-        onToggle={() => setExpanded(!expanded)}
+        onToggle={handleToggle}
       >
         {visibleSegments.map((seg, i) => {
           const showIndicatorBefore = isDropTarget && dropTarget?.insertIndex === i
@@ -135,7 +151,7 @@ export function StairTreeNode({ node, depth, isLast }: StairTreeNodeProps) {
       </TreeNodeWrapper>
     </div>
   )
-}
+})
 
 function StairSegmentTreeNode({
   node,
@@ -147,18 +163,20 @@ function StairSegmentTreeNode({
   isLast?: boolean
 }) {
   const [isEditing, setIsEditing] = useState(false)
-  const selectedIds = useViewer((state) => state.selection.selectedIds)
-  const isSelected = selectedIds.includes(node.id)
+  const isSelected = useViewer((state) => state.selection.selectedIds.includes(node.id))
   const isHovered = useViewer((state) => state.hoveredId === node.id)
   const setSelection = useViewer((state) => state.setSelection)
   const setHoveredId = useViewer((state) => state.setHoveredId)
   const { startDrag, isDragging } = useTreeNodeDrag()
 
-  const handleClick = (e: React.MouseEvent) => {
-    if (isDragging) return
-    e.stopPropagation()
-    handleTreeSelection(e, node.id, selectedIds, setSelection)
-  }
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDragging) return
+      e.stopPropagation()
+      handleTreeSelection(e, node.id, useViewer.getState().selection.selectedIds, setSelection)
+    },
+    [node.id, isDragging, setSelection],
+  )
 
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
@@ -170,13 +188,16 @@ function StairSegmentTreeNode({
     [node.id, node.type, node.parentId, node.segmentType, node.width, node.length, startDrag],
   )
 
+  const handleStartEditing = useCallback(() => setIsEditing(true), [])
+  const handleStopEditing = useCallback(() => setIsEditing(false), [])
+
   const typeLabel = node.segmentType === 'stair' ? 'Flight' : 'Landing'
   const defaultName = `${typeLabel} (${node.width.toFixed(1)}×${node.length.toFixed(1)}m)`
 
   return (
     <div data-drop-child={node.id}>
       <TreeNodeWrapper
-        actions={<TreeNodeActions node={node} />}
+        actions={<TreeNodeActions nodeId={node.id} />}
         depth={depth}
         expanded={false}
         hasChildren={false}
@@ -198,9 +219,9 @@ function StairSegmentTreeNode({
           <InlineRenameInput
             defaultName={defaultName}
             isEditing={isEditing}
-            node={node}
-            onStartEditing={() => setIsEditing(true)}
-            onStopEditing={() => setIsEditing(false)}
+            nodeId={node.id}
+            onStartEditing={handleStartEditing}
+            onStopEditing={handleStopEditing}
           />
         }
         nodeId={node.id}

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

@@ -1,7 +1,7 @@
-import { type AnyNode, type AnyNodeId, emitter, useScene } from '@pascal-app/core'
+import { type AnyNodeId, emitter, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Camera, Eye, EyeOff, Trash2 } from 'lucide-react'
-import { useState } from 'react'
+import { memo, useState } from 'react'
 import {
   Popover,
   PopoverContent,
@@ -9,21 +9,21 @@ import {
 } from './../../../../../components/ui/primitives/popover'
 
 interface TreeNodeActionsProps {
-  node: AnyNode
+  nodeId: AnyNodeId
 }
 
-export function TreeNodeActions({ node }: TreeNodeActionsProps) {
+export const TreeNodeActions = memo(function TreeNodeActions({ nodeId }: TreeNodeActionsProps) {
   const [open, setOpen] = useState(false)
   const updateNode = useScene((state) => state.updateNode)
   const updateNodes = useScene((state) => state.updateNodes)
-  const selectedIds = useViewer((state) => state.selection.selectedIds)
-  const hasCamera = !!node.camera
-  const isVisible = node.visible !== false
+  const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
+  const hasCamera = useScene((s) => !!(s.nodes[nodeId] as any)?.camera)
 
   const toggleVisibility = (e: React.MouseEvent) => {
     e.stopPropagation()
     const newVisibility = !isVisible
-    if (selectedIds?.includes(node.id)) {
+    const selectedIds = useViewer.getState().selection.selectedIds
+    if (selectedIds?.includes(nodeId)) {
       updateNodes(
         selectedIds.map((id) => ({
           id: id as AnyNodeId,
@@ -31,24 +31,24 @@ export function TreeNodeActions({ node }: TreeNodeActionsProps) {
         })),
       )
     } else {
-      updateNode(node.id, { visible: newVisibility })
+      updateNode(nodeId, { visible: newVisibility })
     }
   }
 
   const handleCaptureCamera = (e: React.MouseEvent) => {
     e.stopPropagation()
-    emitter.emit('camera-controls:capture', { nodeId: node.id })
+    emitter.emit('camera-controls:capture', { nodeId })
     setOpen(false)
   }
   const handleViewCamera = (e: React.MouseEvent) => {
     e.stopPropagation()
-    emitter.emit('camera-controls:view', { nodeId: node.id })
+    emitter.emit('camera-controls:view', { nodeId })
     setOpen(false)
   }
 
   const handleClearCamera = (e: React.MouseEvent) => {
     e.stopPropagation()
-    updateNode(node.id, { camera: undefined })
+    updateNode(nodeId, { camera: undefined })
     setOpen(false)
   }
 
@@ -112,4 +112,4 @@ export function TreeNodeActions({ node }: TreeNodeActionsProps) {
       </Popover>
     </div>
   )
-}
+})

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

@@ -1,7 +1,7 @@
 import { type AnyNodeId, emitter, useScene } from '@pascal-app/core'
 import { ChevronRight } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
-import { forwardRef, useEffect, useRef } from 'react'
+import { forwardRef, memo, useEffect, useRef } from 'react'
 
 export function handleTreeSelection(
   e: React.MouseEvent,
@@ -57,6 +57,7 @@ import { cn } from '../../../../../lib/utils'
 import { BuildingTreeNode } from './building-tree-node'
 import { CeilingTreeNode } from './ceiling-tree-node'
 import { DoorTreeNode } from './door-tree-node'
+import { FenceTreeNode } from './fence-tree-node'
 import { ItemTreeNode } from './item-tree-node'
 import { LevelTreeNode } from './level-tree-node'
 import { RoofTreeNode } from './roof-tree-node'
@@ -72,38 +73,40 @@ interface TreeNodeProps {
   isLast?: boolean
 }
 
-export function TreeNode({ nodeId, depth = 0, isLast }: TreeNodeProps) {
-  const node = useScene((state) => state.nodes[nodeId])
+export const TreeNode = memo(function TreeNode({ nodeId, depth = 0, isLast }: TreeNodeProps) {
+  const nodeType = useScene((state) => state.nodes[nodeId]?.type)
 
-  if (!node) return null
+  if (!nodeType) return null
 
-  switch (node.type) {
+  switch (nodeType) {
     case 'building':
-      return <BuildingTreeNode depth={depth} isLast={isLast} node={node as any} />
+      return <BuildingTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'ceiling':
-      return <CeilingTreeNode depth={depth} isLast={isLast} node={node as any} />
+      return <CeilingTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'level':
-      return <LevelTreeNode depth={depth} isLast={isLast} node={node as any} />
+      return <LevelTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'slab':
-      return <SlabTreeNode depth={depth} isLast={isLast} node={node as any} />
+      return <SlabTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'wall':
-      return <WallTreeNode depth={depth} isLast={isLast} node={node as any} />
+      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} node={node as any} />
+      return <RoofTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'stair':
-      return <StairTreeNode depth={depth} isLast={isLast} node={node as any} />
+      return <StairTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'item':
-      return <ItemTreeNode depth={depth} isLast={isLast} node={node as any} />
+      return <ItemTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'door':
-      return <DoorTreeNode depth={depth} isLast={isLast} node={node as any} />
+      return <DoorTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'window':
-      return <WindowTreeNode depth={depth} isLast={isLast} node={node as any} />
+      return <WindowTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     case 'zone':
-      return <ZoneTreeNode depth={depth} isLast={isLast} node={node as any} />
+      return <ZoneTreeNode depth={depth} isLast={isLast} nodeId={nodeId} />
     default:
       return null
   }
-}
+})
 
 interface TreeNodeWrapperProps {
   nodeId?: string

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

@@ -1,106 +1,114 @@
 import { type AnyNodeId, useScene, type WallNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, 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 WallTreeNodeProps {
-  node: WallNode
+  nodeId: AnyNodeId
   depth: number
   isLast?: boolean
 }
 
-export function WallTreeNode({ node, depth, isLast }: WallTreeNodeProps) {
+export const WallTreeNode = memo(function WallTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: WallTreeNodeProps) {
   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 WallNode | undefined)?.children ?? []),
+  )
+  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)
-  }
-
-  const handleMouseEnter = () => {
-    setHoveredId(node.id)
-  }
+    })
+  }, [nodeId])
 
-  const handleMouseLeave = () => {
-    setHoveredId(null)
-  }
+  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 = 'Wall'
+  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), [])
 
   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/wall.png" width={14} />
       }
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}
-      isVisible={node.visible !== false}
+      isVisible={isVisible}
       label={
         <InlineRenameInput
-          defaultName={defaultName}
+          defaultName="Wall"
           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}
         />
       ))}
     </TreeNodeWrapper>
   )
-}
+})

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

@@ -1,33 +1,54 @@
 'use client'
 
-import type { WindowNode } 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 { memo, 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 WindowTreeNodeProps {
-  node: WindowNode
+  nodeId: AnyNodeId
   depth: number
   isLast?: boolean
 }
 
-export function WindowTreeNode({ node, depth, isLast }: WindowTreeNodeProps) {
+export const WindowTreeNode = memo(function WindowTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: WindowTreeNodeProps) {
   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 = 'Window'
+  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,28 +58,22 @@ export function WindowTreeNode({ node, depth, isLast }: WindowTreeNodeProps) {
       isHovered={isHovered}
       isLast={isLast}
       isSelected={isSelected}
-      isVisible={node.visible !== false}
+      isVisible={isVisible}
       label={
         <InlineRenameInput
-          defaultName={defaultName}
+          defaultName="Window"
           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={() => {}}
     />
   )
-}
+})