sync: update core and viewer from monorepo (#143)

Major changes:
- Roof system rewrite with roof-segment support
- Scene store refactor
- Spatial grid improvements
- Item light system
- Post-processing and selection manager updates
- Perf monitor component

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

@@ -10,11 +10,12 @@ import {
   WindowSystem,
 } from '@pascal-app/core'
 import { Bvh } from '@react-three/drei'
-import { Canvas, extend, type ThreeToJSXElements, useFrame } from '@react-three/fiber'
-import { useMemo, useRef } from 'react'
+import { Canvas, extend, type ThreeToJSXElements, useFrame, useThree } from '@react-three/fiber'
+import { useEffect, useMemo, useRef } from 'react'
 import * as THREE from 'three/webgpu'
 import useViewer from '../../store/use-viewer'
 import { GuideSystem } from '../../systems/guide/guide-system'
+import { ItemLightSystem } from '../../systems/item-light/item-light-system'
 import { LevelSystem } from '../../systems/level/level-system'
 import { ScanSystem } from '../../systems/scan/scan-system'
 import { WallCutout } from '../../systems/wall/wall-cutout'
@@ -22,6 +23,7 @@ import { ZoneSystem } from '../../systems/zone/zone-system'
 import { SceneRenderer } from '../renderers/scene-renderer'
 import { GroundOccluder } from './ground-occluder'
 import { Lights } from './lights'
+import { PerfMonitor } from './perf-monitor'
 import PostProcessing from './post-processing'
 import { SelectionManager } from './selection-manager'
 import { ViewerCamera } from './viewer-camera'
@@ -59,12 +61,44 @@ declare module '@react-three/fiber' {
 
 extend(THREE as any)
 
+/**
+ * Monitors the WebGPU device for loss events and logs them.
+ * WebGPU device loss can happen when:
+ *  - Tab is backgrounded and OS reclaims GPU
+ *  - Driver crash or GPU reset
+ *  - Browser security policy kills the context
+ */
+function GPUDeviceWatcher() {
+  const gl = useThree((s) => s.gl)
+
+  useEffect(() => {
+    const backend = (gl as any).backend
+    const device: GPUDevice | undefined = backend?.device
+
+    if (!device) return
+
+    device.lost.then((info) => {
+      console.error(
+        `[viewer] WebGPU device lost: reason="${info.reason}", message="${info.message}". ` +
+          'The page must be reloaded to recover the GPU context.',
+      )
+    })
+  }, [gl])
+
+  return null
+}
+
 interface ViewerProps {
   children?: React.ReactNode
   selectionManager?: 'default' | 'custom'
+  perf?: boolean
 }
 
-const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default' }) => {
+const Viewer: React.FC<ViewerProps> = ({
+  children,
+  selectionManager = 'default',
+  perf = false,
+}) => {
   const theme = useViewer((state) => state.theme)
 
   return (
@@ -72,11 +106,10 @@ const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default'
       camera={{ position: [50, 50, 50], fov: 50 }}
       className={`transition-colors duration-700 ${theme === 'dark' ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`}
       dpr={[1, 1.5]}
-      gl={async (props) => {
+      gl={(props) => {
         const renderer = new THREE.WebGPURenderer(props as any)
         renderer.toneMapping = THREE.ACESFilmicToneMapping
         renderer.toneMappingExposure = 0.9
-        await renderer.init()
         return renderer
       }}
       shadows={{
@@ -110,11 +143,22 @@ const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default'
       <WindowSystem />
       <ZoneSystem />
       <PostProcessing />
+      {/* <DebugRenderer /> */}
+      <GPUDeviceWatcher />
 
+      <ItemLightSystem />
       {selectionManager === 'default' && <SelectionManager />}
+      {perf && <PerfMonitor />}
       {children}
     </Canvas>
   )
 }
 
+const DebugRenderer = () => {
+  useFrame(({ gl, scene, camera }) => {
+    gl.render(scene, camera)
+  })
+  return null
+}
+
 export default Viewer