@pascal-app/editor 0.5.1 → 0.6.0

package/src/components/ui/panels/wall-panel.tsx

@@ -3,25 +3,81 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  getEffectiveWallSurfaceMaterial,
+  getClampedWallCurveOffset,
+  getMaxWallCurveOffset,
+  getWallCurveLength,
+  getWallSurfaceMaterialSignature,
+  normalizeWallCurveOffset,
   type MaterialSchema,
   useScene,
+  type WallSurfaceSide,
   type WallNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useCallback } from 'react'
+import { Move, Spline } from 'lucide-react'
+import { useCallback, useMemo } from 'react'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+import { ActionButton, ActionGroup } from '../controls/action-button'
 import { MaterialPicker } from '../controls/material-picker'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
 import { PanelWrapper } from './panel-wrapper'
 
+function buildWallSurfaceMaterialPatch(
+  node: WallNode,
+  targetSide: WallSurfaceSide | null,
+  material: MaterialSchema | undefined,
+  materialPreset: string | undefined,
+): Partial<WallNode> {
+  const nextSurfaceMaterial = { material, materialPreset }
+  const nextInterior =
+    targetSide === null || targetSide === 'interior'
+      ? nextSurfaceMaterial
+      : getEffectiveWallSurfaceMaterial(node, 'interior')
+  const nextExterior =
+    targetSide === null || targetSide === 'exterior'
+      ? nextSurfaceMaterial
+      : getEffectiveWallSurfaceMaterial(node, 'exterior')
+
+  return {
+    interiorMaterial: nextInterior.material,
+    interiorMaterialPreset: nextInterior.materialPreset,
+    exteriorMaterial: nextExterior.material,
+    exteriorMaterialPreset: nextExterior.materialPreset,
+    material: undefined,
+    materialPreset: undefined,
+  }
+}
+
 export function WallPanel() {
-  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
+  const setMovingNode = useEditor((s) => s.setMovingNode)
+  const setCurvingWall = useEditor((s) => s.setCurvingWall)
+  const selectedMaterialTarget = useEditor((s) => s.selectedMaterialTarget)
+
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as WallNode | undefined) : undefined,
+  )
 
-  const selectedId = selectedIds[0]
-  const node = selectedId ? (nodes[selectedId as AnyNode['id']] as WallNode | undefined) : undefined
+  // Boolean selector — re-renders only when this specific wall's child
+  // composition crosses the "has a door/window/wall-item" threshold.
+  const hasWallChildrenBlockingCurve = useScene((s) => {
+    if (!node) return false
+    return (node.children ?? []).some((childId) => {
+      const child = s.nodes[childId as AnyNodeId]
+      if (!child) return false
+      if (child.type === 'door' || child.type === 'window') return true
+      if (child.type === 'item') {
+        const attachTo = child.asset?.attachTo
+        return attachTo === 'wall' || attachTo === 'wall-side'
+      }
+      return false
+    })
+  })
 
   const handleUpdate = useCallback(
     (updates: Partial<WallNode>) => {
@@ -32,6 +88,35 @@ export function WallPanel() {
     [selectedId, updateNode],
   )
 
+  const effectiveInteriorMaterial = useMemo(
+    () => (node ? getEffectiveWallSurfaceMaterial(node, 'interior') : {}),
+    [node],
+  )
+  const effectiveExteriorMaterial = useMemo(
+    () => (node ? getEffectiveWallSurfaceMaterial(node, 'exterior') : {}),
+    [node],
+  )
+  const surfaceMaterialsMatch = useMemo(
+    () =>
+      getWallSurfaceMaterialSignature(effectiveInteriorMaterial) ===
+      getWallSurfaceMaterialSignature(effectiveExteriorMaterial),
+    [effectiveExteriorMaterial, effectiveInteriorMaterial],
+  )
+  const materialTargetSide =
+    selectedMaterialTarget &&
+    selectedMaterialTarget.nodeId === node?.id &&
+    (selectedMaterialTarget.role === 'interior' || selectedMaterialTarget.role === 'exterior')
+      ? selectedMaterialTarget.role
+      : null
+  const materialPickerValue =
+    materialTargetSide === 'interior'
+      ? effectiveInteriorMaterial
+      : materialTargetSide === 'exterior'
+        ? effectiveExteriorMaterial
+        : surfaceMaterialsMatch
+          ? effectiveInteriorMaterial
+          : {}
+
   const handleUpdateLength = useCallback(
     (newLength: number) => {
       if (!node || newLength <= 0) return
@@ -55,25 +140,50 @@ export function WallPanel() {
     [node, handleUpdate],
   )
 
-  const handleMaterialChange = useCallback(
+  const handleMaterialPresetChange = useCallback(
+    (materialPreset: string) => {
+      if (!node || !materialTargetSide) return
+      handleUpdate(buildWallSurfaceMaterialPatch(node, materialTargetSide, undefined, materialPreset))
+    },
+    [handleUpdate, materialTargetSide, node],
+  )
+
+  const handleCustomMaterialChange = useCallback(
     (material: MaterialSchema) => {
-      handleUpdate({ material })
+      if (!node || !materialTargetSide) return
+      handleUpdate(buildWallSurfaceMaterialPatch(node, materialTargetSide, material, undefined))
     },
-    [handleUpdate],
+    [handleUpdate, materialTargetSide, node],
   )
 
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
   }, [setSelection])
 
-  if (!node || node.type !== 'wall' || selectedIds.length !== 1) return null
+  const handleMove = useCallback(() => {
+    if (!node) return
+    sfxEmitter.emit('sfx:item-pick')
+    setMovingNode(node)
+    setSelection({ selectedIds: [] })
+  }, [node, setMovingNode, setSelection])
+
+  const handleCurve = useCallback(() => {
+    if (!node) return
+    sfxEmitter.emit('sfx:item-pick')
+    setCurvingWall(node)
+    setSelection({ selectedIds: [] })
+  }, [node, setCurvingWall, setSelection])
+
+  if (!(node && node.type === 'wall' && selectedId)) return null
 
   const dx = node.end[0] - node.start[0]
   const dz = node.end[1] - node.start[1]
-  const length = Math.sqrt(dx * dx + dz * dz)
+  const length = getWallCurveLength(node)
 
   const height = node.height ?? 2.5
   const thickness = node.thickness ?? 0.1
+  const curveOffset = getClampedWallCurveOffset(node)
+  const maxCurveOffset = getMaxWallCurveOffset(node)
 
   return (
     <PanelWrapper
@@ -113,10 +223,48 @@ export function WallPanel() {
           unit="m"
           value={Math.round(thickness * 1000) / 1000}
         />
+        {!hasWallChildrenBlockingCurve && (
+          <SliderControl
+            label="Curve"
+            max={Math.max(0.01, maxCurveOffset)}
+            min={-Math.max(0.01, maxCurveOffset)}
+            onChange={(v) => handleUpdate({ curveOffset: normalizeWallCurveOffset(node, v) })}
+            precision={2}
+            step={0.1}
+            unit="m"
+            value={Math.round(curveOffset * 100) / 100}
+          />
+        )}
       </PanelSection>
 
       <PanelSection title="Material">
-        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
+        {!materialTargetSide ? (
+          <div className="mb-3 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-[11px] text-muted-foreground">
+            Click the wall face you want to edit. Materials now apply to one side at a time.
+          </div>
+        ) : null}
+        <MaterialPicker
+          disabled={!materialTargetSide}
+          hideSideControl
+          nodeType="wall"
+          onChange={handleCustomMaterialChange}
+          onSelectMaterialPreset={handleMaterialPresetChange}
+          selectedMaterialPreset={materialPickerValue.materialPreset}
+          value={materialPickerValue.material}
+        />
+      </PanelSection>
+
+      <PanelSection title="Actions">
+        <ActionGroup>
+          <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
+          {!hasWallChildrenBlockingCurve && (
+            <ActionButton
+              icon={<Spline className="h-3.5 w-3.5" />}
+              label="Curve"
+              onClick={handleCurve}
+            />
+          )}
+        </ActionGroup>
       </PanelSection>
     </PanelWrapper>
   )

package/src/components/ui/panels/window-panel.tsx

@@ -24,19 +24,17 @@ import { PanelWrapper } from './panel-wrapper'
 import { PresetsPopover } from './presets/presets-popover'
 
 export function WindowPanel() {
-  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
   const deleteNode = useScene((s) => s.deleteNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
 
   const adapter = usePresetsAdapter()
 
-  const selectedId = selectedIds[0]
-  const node = selectedId
-    ? (nodes[selectedId as AnyNode['id']] as WindowNode | undefined)
-    : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as WindowNode | undefined) : undefined,
+  )
 
   const handleUpdate = useCallback(
     (updates: Partial<WindowNode>) => {
@@ -153,7 +151,7 @@ export function WindowPanel() {
     [handleUpdate],
   )
 
-  if (!node || node.type !== 'window' || selectedIds.length !== 1) return null
+  if (!(node && node.type === 'window' && selectedId)) return null
 
   const numCols = node.columnRatios.length
   const numRows = node.rowRatios.length

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

@@ -1,7 +1,7 @@
 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 { memo, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import {
   Tooltip,
@@ -17,7 +17,11 @@ interface BuildingTreeNodeProps {
   isLast?: boolean
 }
 
-export function BuildingTreeNode({ nodeId, depth, isLast }: BuildingTreeNodeProps) {
+export const BuildingTreeNode = memo(function BuildingTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: BuildingTreeNodeProps) {
   const [expanded, setExpanded] = useState(true)
   const createNode = useScene((state) => state.createNode)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -84,4 +88,4 @@ export function BuildingTreeNode({ nodeId, depth, isLast }: BuildingTreeNodeProp
       ))}
     </TreeNodeWrapper>
   )
-}
+})

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

@@ -1,7 +1,7 @@
 import { type AnyNodeId, type CeilingNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 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'
@@ -14,7 +14,11 @@ interface CeilingTreeNodeProps {
   isLast?: boolean
 }
 
-export function CeilingTreeNode({ nodeId, depth, isLast }: CeilingTreeNodeProps) {
+export const CeilingTreeNode = memo(function CeilingTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: CeilingTreeNodeProps) {
   const [expanded, setExpanded] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
@@ -113,7 +117,7 @@ export function CeilingTreeNode({ nodeId, depth, isLast }: CeilingTreeNodeProps)
       ))}
     </TreeNodeWrapper>
   )
-}
+})
 
 /**
  * Calculate the area of a polygon using the shoelace formula

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

@@ -3,7 +3,7 @@
 import { type AnyNodeId, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { useCallback, 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'
@@ -15,7 +15,11 @@ interface DoorTreeNodeProps {
   isLast?: boolean
 }
 
-export function DoorTreeNode({ nodeId, depth, isLast }: DoorTreeNodeProps) {
+export const DoorTreeNode = memo(function DoorTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: DoorTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
@@ -72,4 +76,4 @@ export function DoorTreeNode({ nodeId, depth, isLast }: DoorTreeNodeProps) {
       onToggle={() => {}}
     />
   )
-}
+})

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

@@ -1,7 +1,7 @@
 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 { memo, useState } from 'react'
 import useEditor from '../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
@@ -13,7 +13,11 @@ interface FenceTreeNodeProps {
   isLast?: boolean
 }
 
-export function FenceTreeNode({ nodeId, depth, isLast }: FenceTreeNodeProps) {
+export const FenceTreeNode = memo(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)
@@ -62,4 +66,4 @@ export function FenceTreeNode({ nodeId, depth, isLast }: FenceTreeNodeProps) {
       onToggle={() => {}}
     />
   )
-}
+})

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

@@ -23,7 +23,7 @@ import {
   X,
 } from 'lucide-react'
 import { AnimatePresence, LayoutGroup, motion } from 'motion/react'
-import { useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { ColorDot } from './../../../../../components/ui/primitives/color-dot'
 import {
@@ -80,7 +80,7 @@ function useSiteNode(): SiteNode | null {
   )
 }
 
-function PropertyLineSection() {
+const PropertyLineSection = memo(function PropertyLineSection() {
   const siteNode = useSiteNode()
   const updateNode = useScene((state) => state.updateNode)
   const mode = useEditor((state) => state.mode)
@@ -218,13 +218,13 @@ function PropertyLineSection() {
       )}
     </div>
   )
-}
+})
 
 // ============================================================================
 // SITE PHASE VIEW - Property line + building buttons
 // ============================================================================
 
-function CameraPopover({
+const CameraPopover = memo(function CameraPopover({
   nodeId,
   hasCamera,
   open,
@@ -303,9 +303,9 @@ function CameraPopover({
       </PopoverContent>
     </Popover>
   )
-}
+})
 
-function ReferenceItem({
+const ReferenceItem = memo(function ReferenceItem({
   refNode,
   isLastRow,
   setSelectedReferenceId,
@@ -375,7 +375,7 @@ function ReferenceItem({
       </button>
     </div>
   )
-}
+})
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024 // 200MB
 
@@ -387,7 +387,7 @@ interface LevelReferencesProps {
   onDeleteAsset?: (projectId: string, url: string) => void
 }
 
-function LevelReferences({
+const LevelReferences = memo(function LevelReferences({
   levelId,
   isLastLevel,
   projectId,
@@ -554,9 +554,9 @@ function LevelReferences({
       )}
     </div>
   )
-}
+})
 
-function LevelItem({
+const LevelItem = memo(function LevelItem({
   level,
   selectedLevelId,
   setSelection,
@@ -784,9 +784,9 @@ function LevelItem({
       </AnimatePresence>
     </div>
   )
-}
+})
 
-function LevelsSection({
+const LevelsSection = memo(function LevelsSection({
   projectId,
   onUploadAsset,
   onDeleteAsset,
@@ -870,9 +870,9 @@ function LevelsSection({
       </div>
     </div>
   )
-}
+})
 
-function LayerToggle() {
+const LayerToggle = memo(function LayerToggle() {
   const structureLayer = useEditor((state) => state.structureLayer)
   const setStructureLayer = useEditor((state) => state.setStructureLayer)
   const phase = useEditor((state) => state.phase)
@@ -1000,9 +1000,9 @@ function LayerToggle() {
       </button>
     </div>
   )
-}
+})
 
-function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLast?: boolean }) {
+const ZoneItem = memo(function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLast?: boolean }) {
   const [isEditing, setIsEditing] = useState(false)
   const [cameraPopoverOpen, setCameraPopoverOpen] = useState(false)
   const deleteNode = useScene((state) => state.deleteNode)
@@ -1163,9 +1163,9 @@ function ZoneItem({ zone, isLast }: { zone: ZoneNode; isLast?: boolean }) {
       </div>
     </div>
   )
-}
+})
 
-function MultiSelectionBadge() {
+const MultiSelectionBadge = memo(function MultiSelectionBadge() {
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const setSelection = useViewer((state) => state.setSelection)
 
@@ -1185,9 +1185,9 @@ function MultiSelectionBadge() {
       </div>
     </div>
   )
-}
+})
 
-function ContentSection() {
+const ContentSection = memo(function ContentSection() {
   const selectedLevelId = useViewer((state) => state.selection.levelId)
   const structureLayer = useEditor((state) => state.structureLayer)
   const phase = useEditor((state) => state.phase)
@@ -1265,9 +1265,9 @@ function ContentSection() {
       </div>
     </TreeNodeDragProvider>
   )
-}
+})
 
-function BuildingItem({
+const BuildingItem = memo(function BuildingItem({
   building,
   isBuildingActive,
   buildingCameraOpen,
@@ -1308,19 +1308,16 @@ function BuildingItem({
   }
 
   return (
-    <motion.div
+    <div
       className={cn('flex shrink-0 flex-col overflow-hidden', isBuildingActive && 'min-h-0 flex-1')}
-      layout
-      transition={{ type: 'spring', bounce: 0, duration: 0.4 }}
     >
-      <motion.div
+      <div
         className={cn(
           'group/building flex h-10 shrink-0 cursor-pointer items-center border-border/50 border-b pr-2 transition-all duration-200',
           isBuildingActive
             ? 'bg-accent/50 text-foreground'
             : 'text-muted-foreground hover:bg-accent/30 hover:text-foreground',
         )}
-        layout="position"
         onClick={handleSelect}
         onDoubleClick={handleDoubleClick}
         ref={itemRef}
@@ -1404,7 +1401,7 @@ function BuildingItem({
             </div>
           </PopoverContent>
         </Popover>
-      </motion.div>
+      </div>
 
       {/* Tools and content for the active building */}
       <AnimatePresence initial={false}>
@@ -1433,9 +1430,9 @@ function BuildingItem({
           </motion.div>
         )}
       </AnimatePresence>
-    </motion.div>
+    </div>
   )
-}
+})
 
 export interface SitePanelProps {
   projectId?: string
@@ -1534,7 +1531,7 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
               No buildings yet
             </motion.div>
           ) : (
-            <motion.div className="flex min-h-0 flex-1 flex-col" layout>
+            <div className="flex min-h-0 flex-1 flex-col">
               {buildings.map((building) => {
                 const isBuildingActive =
                   (phase === 'structure' || phase === 'furnish') &&
@@ -1553,7 +1550,7 @@ export function SitePanel({ projectId, onUploadAsset, onDeleteAsset }: SitePanel
                   />
                 )
               })}
-            </motion.div>
+            </div>
           )}
         </motion.div>
       </div>

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

@@ -1,7 +1,7 @@
 import { type AnyNodeId, type ItemNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 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'
@@ -24,7 +24,11 @@ interface ItemTreeNodeProps {
   isLast?: boolean
 }
 
-export function ItemTreeNode({ nodeId, depth, isLast }: ItemTreeNodeProps) {
+export const ItemTreeNode = memo(function ItemTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: ItemTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(true)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -121,4 +125,4 @@ export function ItemTreeNode({ nodeId, depth, isLast }: ItemTreeNodeProps) {
         ))}
     </TreeNodeWrapper>
   )
-}
+})

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

@@ -1,7 +1,7 @@
 import { type AnyNodeId, type LevelNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Layers } from 'lucide-react'
-import { useCallback, useState } from 'react'
+import { memo, useCallback, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
@@ -13,7 +13,11 @@ interface LevelTreeNodeProps {
   isLast?: boolean
 }
 
-export function LevelTreeNode({ nodeId, depth, isLast }: LevelTreeNodeProps) {
+export const LevelTreeNode = memo(function LevelTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: LevelTreeNodeProps) {
   const [expanded, setExpanded] = useState(true)
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -67,4 +71,4 @@ export function LevelTreeNode({ nodeId, depth, isLast }: LevelTreeNodeProps) {
       ))}
     </TreeNodeWrapper>
   )
-}
+})

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

@@ -2,7 +2,7 @@ import { type AnyNodeId, type RoofNode, type RoofSegmentNode, 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'
@@ -16,7 +16,11 @@ interface RoofTreeNodeProps {
   isLast?: boolean
 }
 
-export function RoofTreeNode({ nodeId, depth, isLast }: RoofTreeNodeProps) {
+export const RoofTreeNode = memo(function RoofTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: RoofTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [expanded, setExpanded] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -147,7 +151,7 @@ export function RoofTreeNode({ nodeId, depth, isLast }: RoofTreeNodeProps) {
       </TreeNodeWrapper>
     </div>
   )
-}
+})
 
 function RoofSegmentTreeNode({
   node,