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} />

packages/viewer/src/components/viewer/frame-limiter.tsx

@@ -6,7 +6,8 @@ type FrameLimiterProps = {
 }
 
 const FrameLimiter: React.FC<FrameLimiterProps> = ({ fps = 50 }) => {
-  const { advance, set, frameloop: initFrameloop } = useThree()
+  const { advance, set, frameloop: initFrameloop, scene, clock } = useThree()
+  const renderer = useThree((state) => state.gl)
 
   useLayoutEffect(() => {
     let elapsed = 0
@@ -14,7 +15,6 @@ const FrameLimiter: React.FC<FrameLimiterProps> = ({ fps = 50 }) => {
     let i = 0
     let raf: number | null = null
     const interval = 1000 / fps
-
     function tick(t: DOMHighResTimeStamp) {
       raf = requestAnimationFrame(tick)
       elapsed = t - then
@@ -24,10 +24,11 @@ const FrameLimiter: React.FC<FrameLimiterProps> = ({ fps = 50 }) => {
         then = t - (elapsed % interval)
       }
     }
-
+    // Set frameloop to never, it will shut down the default render loop
     set({ frameloop: 'never' })
+    // Kick off custom render loop
     raf = requestAnimationFrame(tick)
-
+    // Restore initial setting
     return () => {
       if (raf) {
         cancelAnimationFrame(raf)

packages/viewer/src/components/viewer/ground-occluder.tsx

@@ -65,6 +65,7 @@ export const GroundOccluder = () => {
 
     if (polygons.length > 0) {
       for (const ring of unionPolygons(polygons.map((pts) => pts.map((p) => [p[0], -p[1]])))) {
+        if (ring.length < 3) continue
         const hole = new THREE.Path()
 
         hole.moveTo(ring[0]![0], ring[0]![1])

packages/viewer/src/components/viewer/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { ElevatorOpeningSystem } from '@pascal-app/core'
-import { Bvh } from '@react-three/drei'
 import { Canvas, extend, type ThreeToJSXElements, useFrame, useThree } from '@react-three/fiber'
 import { useEffect, useMemo, useRef } from 'react'
 import * as THREE from 'three/webgpu'
@@ -31,6 +30,7 @@ import FrameLimiter from './frame-limiter'
 import { Lights } from './lights'
 import { PerfMonitor } from './perf-monitor'
 import PostProcessing, { DEFAULT_HOVER_STYLES, type HoverStyles } from './post-processing'
+import { SceneBvh } from './scene-bvh'
 import { SelectionManager } from './selection-manager'
 import { ViewerCamera } from './viewer-camera'
 
@@ -84,7 +84,7 @@ extend(THREE as any)
 const WEBGPU_RENDERER_CACHE = new WeakMap<HTMLCanvasElement, Promise<THREE.WebGPURenderer>>()
 
 /**
- * Monitors the WebGPU device for loss events and logs them.
+ * Monitors the WebGPU device for loss / uncaptured errors and logs them.
  * WebGPU device loss can happen when:
  *  - Tab is backgrounded and OS reclaims GPU
  *  - Driver crash or GPU reset
@@ -97,6 +97,8 @@ type WebGPUDeviceLossInfo = {
 
 type WebGPUDeviceLike = {
   lost: Promise<WebGPUDeviceLossInfo>
+  label?: string
+  features?: Set<string>
   addEventListener?: (type: string, listener: EventListener) => void
   removeEventListener?: (type: string, listener: EventListener) => void
 }
@@ -109,9 +111,18 @@ function GPUDeviceWatcher() {
     const device = backend?.device as WebGPUDeviceLike | undefined
 
     if (!device) {
+      console.warn('[viewer] No WebGPU device on backend — running on a fallback renderer.', {
+        backend: backend?.constructor?.name ?? 'unknown',
+        rendererType: (gl as any).constructor?.name ?? 'unknown',
+      })
       return
     }
 
+    console.log('[viewer] WebGPU device ready', {
+      label: device.label,
+      features: Array.from(device.features ?? []),
+    })
+
     device.lost.then((info: WebGPUDeviceLossInfo) => {
       console.error(
         `[viewer] WebGPU device lost: reason="${info.reason ?? 'unknown'}", message="${info.message ?? ''}". ` +
@@ -139,6 +150,7 @@ interface ViewerProps {
   hoverStyles?: HoverStyles
   selectionManager?: 'default' | 'custom'
   perf?: boolean
+  useBvh?: boolean
 }
 
 const Viewer: React.FC<ViewerProps> = ({
@@ -146,6 +158,7 @@ const Viewer: React.FC<ViewerProps> = ({
   hoverStyles = DEFAULT_HOVER_STYLES,
   selectionManager = 'default',
   perf = false,
+  useBvh = true,
 }) => {
   const theme = useViewer((state) => state.theme)
   return (
@@ -196,9 +209,13 @@ const Viewer: React.FC<ViewerProps> = ({
         {/* <directionalLight position={[10, 10, 5]} intensity={0.5} castShadow
           /> */}
         <Lights />
-        <Bvh>
+        {useBvh ? (
+          <SceneBvh>
+            <SceneRenderer />
+          </SceneBvh>
+        ) : (
           <SceneRenderer />
-        </Bvh>
+        )}
 
         {/* Default Systems */}
         <LevelSystem />

packages/viewer/src/components/viewer/post-processing.tsx

@@ -131,7 +131,6 @@ const PostProcessingPasses = ({
 
   // Reset retry state when project changes
   useEffect(() => {
-    // Intentionally touch projectId so the effect reruns on project switches.
     void projectId
     retryCountRef.current = 0
     if (rebuildTimeoutRef.current !== null) {
@@ -168,15 +167,23 @@ const PostProcessingPasses = ({
 
   // Build / rebuild the post-processing pipeline
   useEffect(() => {
-    // Intentionally touch these so React/biome treat project switches and retry bumps
-    // as explicit rebuild triggers instead of accidental extra dependencies.
-    void projectId
-    void pipelineVersion
-
     if (!(renderer && scene && camera)) {
+      console.warn('[viewer/post-processing] Skipping pipeline build — missing dependency.', {
+        hasRenderer: !!renderer,
+        hasScene: !!scene,
+        hasCamera: !!camera,
+      })
       return
     }
 
+    console.log('[viewer/post-processing] Building pipeline', {
+      version: pipelineVersion,
+      ssgi: SSGI_PARAMS.enabled,
+      hoverHighlightMode,
+      projectId,
+      rendererCtor: (renderer as any).constructor?.name,
+    })
+
     hasPipelineErrorRef.current = false
 
     // WebGPU availability check: SSGI, denoise, and RenderPipeline are all
@@ -341,6 +348,7 @@ const PostProcessingPasses = ({
   }, [
     camera,
     hoverHiddenColor,
+    hoverHighlightMode,
     hoverPulseMix,
     hoverStrength,
     hoverVisibleColor,

packages/viewer/src/components/viewer/scene-bvh.tsx

@@ -0,0 +1,137 @@
+import { useThree } from '@react-three/fiber'
+import {
+  type ReactNode,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+import { Group, Mesh, type BufferGeometry } from 'three'
+import {
+  SAH,
+  acceleratedRaycast,
+  computeBoundsTree,
+  disposeBoundsTree,
+  type SplitStrategy,
+} from 'three-mesh-bvh'
+
+type SceneBvhProps = {
+  children?: ReactNode
+  enabled?: boolean
+  firstHitOnly?: boolean
+  strategy?: SplitStrategy
+  verbose?: boolean
+  setBoundingBox?: boolean
+  maxDepth?: number
+  maxLeafSize?: number
+  indirect?: boolean
+}
+
+const isMesh = (object: unknown): object is Mesh =>
+  !!object && typeof object === 'object' && (object as Mesh).isMesh === true
+
+const hasBvhCompatibleGeometry = (geometry?: BufferGeometry | null) => {
+  if (!geometry) return false
+
+  const position = geometry.getAttribute('position')
+  if (!position) return false
+
+  const vertexCount = geometry.getIndex()?.count ?? position.count
+  return vertexCount >= 3
+}
+
+export const SceneBvh = forwardRef<Group, SceneBvhProps>(
+  (
+    {
+      children,
+      enabled = true,
+      firstHitOnly = false,
+      strategy = SAH,
+      verbose = false,
+      setBoundingBox = true,
+      maxDepth = 40,
+      maxLeafSize = 10,
+      indirect = false,
+    },
+    forwardedRef,
+  ) => {
+    const ref = useRef<Group>(null)
+    const raycaster = useThree((state) => state.raycaster)
+
+    useImperativeHandle(forwardedRef, () => ref.current!, [])
+
+    useEffect(() => {
+      if (!enabled || !ref.current) return
+
+      const options = {
+        strategy,
+        verbose,
+        setBoundingBox,
+        maxDepth,
+        maxLeafSize,
+        indirect,
+      }
+      const group = ref.current
+      const acceleratedMeshes = new Set<Mesh>()
+      const computedGeometries = new Set<BufferGeometry>()
+
+      ;(raycaster as any).firstHitOnly = firstHitOnly
+
+      group.traverse((child) => {
+        if (!isMesh(child)) return
+
+        if (child.raycast === Mesh.prototype.raycast) {
+          child.raycast = acceleratedRaycast
+          acceleratedMeshes.add(child)
+        }
+
+        if (child.raycast !== acceleratedRaycast) return
+
+        const geometry = child.geometry
+        if (geometry.boundsTree || !hasBvhCompatibleGeometry(geometry)) return
+
+        try {
+          geometry.computeBoundsTree = computeBoundsTree
+          geometry.disposeBoundsTree = disposeBoundsTree
+          geometry.computeBoundsTree(options)
+          computedGeometries.add(geometry)
+        } catch (error) {
+          console.warn('[viewer] Skipping BVH for incompatible mesh geometry.', {
+            mesh: child.name || child.type,
+            error,
+          })
+        }
+      })
+
+      return () => {
+        delete (raycaster as any).firstHitOnly
+
+        for (const geometry of computedGeometries) {
+          if (geometry.boundsTree) {
+            geometry.disposeBoundsTree()
+          }
+        }
+
+        for (const mesh of acceleratedMeshes) {
+          if (mesh.raycast === acceleratedRaycast) {
+            mesh.raycast = Mesh.prototype.raycast
+          }
+        }
+      }
+    }, [
+      enabled,
+      firstHitOnly,
+      strategy,
+      verbose,
+      setBoundingBox,
+      maxDepth,
+      maxLeafSize,
+      indirect,
+      raycaster,
+    ])
+
+    return <group ref={ref}>{children}</group>
+  },
+)
+
+SceneBvh.displayName = 'SceneBvh'