Merge branch 'main' into feat/elevator-system

# Conflicts:
#	packages/editor/src/components/tools/item/move-tool.tsx
#	packages/editor/src/components/tools/tool-manager.tsx
#	packages/editor/src/components/ui/panels/panel-manager.tsx
#	packages/editor/src/store/use-editor.tsx
#	packages/viewer/src/components/renderers/site/site-renderer.tsx
#	packages/viewer/src/components/viewer/ground-occluder.tsx
#	packages/viewer/src/components/viewer/index.tsx
#	packages/viewer/src/components/viewer/post-processing.tsx

packages/viewer/src/components/renderers/ceiling/ceiling-renderer.tsx

@@ -4,12 +4,19 @@ import {
   resolveMaterial,
   useRegistry,
 } from '@pascal-app/core'
-import { useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
+import { BufferGeometry, Float32BufferAttribute } from 'three'
 import { float, mix, positionWorld, smoothstep } from 'three/tsl'
 import { BackSide, FrontSide, type Mesh, MeshBasicNodeMaterial } from 'three/webgpu'
 import { useNodeEvents } from '../../../hooks/use-node-events'
 import { NodeRenderer } from '../node-renderer'
 
+function createEmptyGeometry() {
+  const geometry = new BufferGeometry()
+  geometry.setAttribute('position', new Float32BufferAttribute([], 3))
+  return geometry
+}
+
 const gridScale = 5
 const gridX = positionWorld.x.mul(gridScale).fract()
 const gridY = positionWorld.z.mul(gridScale).fract()
@@ -51,10 +58,20 @@ function getCeilingMaterials(color = '#999999') {
 
 export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
   const ref = useRef<Mesh>(null!)
+  const placeholderGeometry = useMemo(createEmptyGeometry, [])
+  const gridPlaceholderGeometry = useMemo(createEmptyGeometry, [])
 
   useRegistry(node.id, 'ceiling', ref)
   const handlers = useNodeEvents(node, 'ceiling')
 
+  useEffect(
+    () => () => {
+      placeholderGeometry.dispose()
+      gridPlaceholderGeometry.dispose()
+    },
+    [gridPlaceholderGeometry, placeholderGeometry],
+  )
+
   const materials = useMemo(() => {
     const preset = getMaterialPresetByRef(node.materialPreset)
     const props = preset?.mapProperties ?? resolveMaterial(node.material)
@@ -69,17 +86,15 @@ export const CeilingRenderer = ({ node }: { node: CeilingNode }) => {
   ])
 
   return (
-    <mesh material={materials.bottomMaterial} ref={ref}>
-      <boxGeometry args={[0, 0, 0]} />
+    <mesh geometry={placeholderGeometry} material={materials.bottomMaterial} ref={ref}>
       <mesh
+        geometry={gridPlaceholderGeometry}
         material={materials.topMaterial}
         name="ceiling-grid"
         {...handlers}
         scale={0}
         visible={false}
-      >
-        <boxGeometry args={[0, 0, 0]} />
-      </mesh>
+      />
       {node.children.map((childId) => (
         <NodeRenderer key={childId} nodeId={childId} />
       ))}

packages/viewer/src/components/renderers/door/door-renderer.tsx

@@ -1,6 +1,6 @@
 import { type DoorNode, useRegistry, useScene } from '@pascal-app/core'
 import { useLayoutEffect, useRef } from 'react'
-import { MeshBasicMaterial, type Mesh } from 'three'
+import { type Mesh, MeshBasicMaterial } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
 
 const doorHitboxMaterial = new MeshBasicMaterial({ visible: false })

packages/viewer/src/components/renderers/fence/fence-renderer.tsx

@@ -2,28 +2,12 @@ import { type FenceNode, useRegistry, useScene } from '@pascal-app/core'
 import { useLayoutEffect, useMemo, useRef } from 'react'
 import type { Mesh } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
-import {
-  createMaterial,
-  createMaterialFromPresetRef,
-  DEFAULT_STAIR_MATERIAL,
-} from '../../../lib/materials'
+import { DEFAULT_STAIR_MATERIAL } from '../../../lib/materials'
 
 export const FenceRenderer = ({ node }: { node: FenceNode }) => {
   const ref = useRef<Mesh>(null!)
   const handlers = useNodeEvents(node, 'fence')
-  const material = useMemo(() => {
-    const presetMaterial = createMaterialFromPresetRef(node.materialPreset)
-    if (presetMaterial) return presetMaterial
-    const mat = node.material
-    if (!mat) return DEFAULT_STAIR_MATERIAL
-    return createMaterial(mat)
-  }, [
-    node.materialPreset,
-    node.material,
-    node.material?.preset,
-    node.material?.properties,
-    node.material?.texture,
-  ])
+  const material = useMemo(() => DEFAULT_STAIR_MATERIAL, [])
 
   useRegistry(node.id, 'fence', ref)
   useLayoutEffect(() => {

packages/viewer/src/components/renderers/item/item-renderer.tsx

@@ -156,9 +156,12 @@ const ModelRenderer = ({ node }: { node: ItemNode }) => {
   const lightEffects =
     interactive?.effects.filter((e): e is LightEffect => e.kind === 'light') ?? []
 
+  // useGLTF caches scenes, and Clone shares child geometry/material references.
+  // Undo can unmount one item while another clone of the same asset still needs them.
   return (
     <>
       <Clone
+        dispose={null}
         object={scene}
         position={node.asset.offset}
         ref={ref}

packages/viewer/src/components/renderers/site/site-renderer.tsx

@@ -90,6 +90,7 @@ export const SiteRenderer = ({ node }: { node: SiteNode }) => {
 
     if (slabPolygons.length > 0) {
       for (const ring of unionPolygons(slabPolygons.map((p) => p.map((pt) => [pt[0], -pt[1]])))) {
+        if (ring.length < 3) continue
         const hole = new Path()
         hole.moveTo(ring[0]![0], ring[0]![1])
         for (let i = 1; i < ring.length; i++) hole.lineTo(ring[i]![0], ring[i]![1])

packages/viewer/src/components/renderers/slab/slab-renderer.tsx

@@ -1,5 +1,5 @@
 import { getMaterialPresetByRef, type SlabNode, useRegistry } from '@pascal-app/core'
-import { useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import type { Mesh } from 'three'
 import * as THREE from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
@@ -11,6 +11,12 @@ import {
 
 const slabMaterialCache = new Map<string, THREE.MeshStandardMaterial>()
 
+function createEmptyGeometry() {
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3))
+  return geometry
+}
+
 function getSlabMaterial(
   cacheKey: string,
   params: { material?: SlabNode['material']; materialPreset?: string },
@@ -47,11 +53,14 @@ function getSlabMaterial(
 
 export const SlabRenderer = ({ node }: { node: SlabNode }) => {
   const ref = useRef<Mesh>(null!)
+  const placeholderGeometry = useMemo(createEmptyGeometry, [])
 
   useRegistry(node.id, 'slab', ref)
 
   const handlers = useNodeEvents(node, 'slab')
 
+  useEffect(() => () => placeholderGeometry.dispose(), [placeholderGeometry])
+
   const material = useMemo(() => {
     const resolvedMaterial = node.material
     const resolvedMaterialPreset = node.materialPreset
@@ -75,13 +84,12 @@ export const SlabRenderer = ({ node }: { node: SlabNode }) => {
   return (
     <mesh
       castShadow
+      geometry={placeholderGeometry}
       receiveShadow
       ref={ref}
       {...handlers}
       material={material}
       visible={node.visible}
-    >
-      <boxGeometry args={[0, 0, 0]} />
-    </mesh>
+    />
   )
 }

packages/viewer/src/components/renderers/stair-segment/stair-segment-renderer.tsx

@@ -24,10 +24,27 @@ export const StairSegmentRenderer = ({ node }: { node: StairSegmentNode }) => {
   const parentNode = node.parentId
     ? (nodes[node.parentId as AnyNodeId] as StairNode | undefined)
     : undefined
-  const material = useMemo(
-    () => getStraightStairSegmentBodyMaterials(node, parentNode),
-    [node, parentNode],
-  )
+
+  const material = useMemo(() => {
+    return getStraightStairSegmentBodyMaterials(node, parentNode)
+  }, [
+    node.materialPreset,
+    node.material,
+    node.material?.preset,
+    node.material?.properties,
+    node.material?.texture,
+    parentNode?.materialPreset,
+    parentNode?.material,
+    parentNode?.material?.preset,
+    parentNode?.material?.properties,
+    parentNode?.material?.texture,
+    parentNode?.railingMaterialPreset,
+    parentNode?.railingMaterial,
+    parentNode?.sideMaterialPreset,
+    parentNode?.sideMaterial,
+    parentNode?.treadMaterialPreset,
+    parentNode?.treadMaterial,
+  ])
 
   const placeholderGeometry = useMemo(() => {
     const geometry = new THREE.BufferGeometry()

packages/viewer/src/components/renderers/stair/stair-renderer.tsx

@@ -112,9 +112,9 @@ export const StairRenderer = ({ node }: { node: StairNode }) => {
           receiveShadow
         />
       ) : null}
-      {!isSegmentBasedStair ? (
+      {isSegmentBasedStair ? null : (
         <CurvedStairBody bodyMaterials={straightBodyMaterials} stair={node} />
-      ) : null}
+      )}
       <StairRailings material={railingMaterial} stair={node} />
       {isSegmentBasedStair ? (
         <group name="segments-wrapper" visible={false}>
@@ -292,7 +292,7 @@ function StairRailings({ stair, material }: { stair: StairNode; material: THREE.
       ))}
       {railPaths.slice(1).map((segmentPath, index) => {
         const previousPath = railPaths[index]
-        if (!previousPath || !segmentPath.connectFromPrevious) return null
+        if (!(previousPath && segmentPath.connectFromPrevious)) return null
         if (previousPath.layout.segment.segmentType === 'landing') return null
         if (segmentPath.layout.segment.segmentType === 'landing') return null
 
@@ -451,10 +451,10 @@ function CurvedStairBody({
       {isSpiral && (stair.showCenterColumn ?? true) ? (
         <mesh
           castShadow
-          receiveShadow
           material={sideMaterial}
           name="stair-side"
           position={[0, spiralColumnHeight / 2, 0]}
+          receiveShadow
         >
           <cylinderGeometry
             args={[spiralColumnRadius, spiralColumnRadius, spiralColumnHeight, 10]}

packages/viewer/src/components/renderers/wall/wall-renderer.tsx

@@ -1,12 +1,27 @@
 import { useRegistry, useScene, type WallNode } from '@pascal-app/core'
-import { useLayoutEffect, useRef } from 'react'
-import type { Mesh } from 'three'
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import { BufferGeometry, Float32BufferAttribute, type Mesh } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
 import { getVisibleWallMaterials } from '../../../systems/wall/wall-materials'
 import { NodeRenderer } from '../node-renderer'
 
+function createEmptyWallGeometry() {
+  const geometry = new BufferGeometry()
+  geometry.setAttribute('position', new Float32BufferAttribute([], 3))
+  geometry.addGroup(0, 0, 0)
+  geometry.addGroup(0, 0, 1)
+  geometry.addGroup(0, 0, 2)
+  return geometry
+}
+
 export const WallRenderer = ({ node }: { node: WallNode }) => {
   const ref = useRef<Mesh>(null!)
+  const placeholderGeometry = useMemo(createEmptyWallGeometry, [])
+  const collisionPlaceholderGeometry = useMemo(() => {
+    const geometry = new BufferGeometry()
+    geometry.setAttribute('position', new Float32BufferAttribute([], 3))
+    return geometry
+  }, [])
 
   useRegistry(node.id, 'wall', ref)
 
@@ -14,15 +29,31 @@ export const WallRenderer = ({ node }: { node: WallNode }) => {
     useScene.getState().markDirty(node.id)
   }, [node.id])
 
+  useEffect(() => {
+    return () => {
+      placeholderGeometry.dispose()
+      collisionPlaceholderGeometry.dispose()
+    }
+  }, [collisionPlaceholderGeometry, placeholderGeometry])
+
   const handlers = useNodeEvents(node, 'wall')
   const material = getVisibleWallMaterials(node)
 
   return (
-    <mesh castShadow material={material} receiveShadow ref={ref} visible={node.visible}>
-      <boxGeometry args={[0, 0, 0]} />
-      <mesh name="collision-mesh" visible={false} {...handlers}>
-        <boxGeometry args={[0, 0, 0]} />
-      </mesh>
+    <mesh
+      castShadow
+      geometry={placeholderGeometry}
+      material={material}
+      receiveShadow
+      ref={ref}
+      visible={node.visible}
+    >
+      <mesh
+        geometry={collisionPlaceholderGeometry}
+        name="collision-mesh"
+        visible={false}
+        {...handlers}
+      />
 
       {node.children.map((childId) => (
         <NodeRenderer key={`${node.id}:${childId}`} nodeId={childId} />