@pascal-app/viewer 0.1.13 → 0.2.0

package/dist/components/viewer/ground-occluder.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScene } from '@pascal-app/core';
+import polygonClipping from 'polygon-clipping';
+import { useMemo } from 'react';
+import * as THREE from 'three';
+import useViewer from '../../store/use-viewer';
+export const GroundOccluder = () => {
+    const theme = useViewer((state) => state.theme);
+    const bgColor = theme === 'dark' ? '#1f2433' : '#fafafa';
+    const nodes = useScene((state) => state.nodes);
+    const shape = useMemo(() => {
+        const s = new THREE.Shape();
+        const size = 1000;
+        // Create outer infinite plane
+        s.moveTo(-size, -size);
+        s.lineTo(size, -size);
+        s.lineTo(size, size);
+        s.lineTo(-size, size);
+        s.closePath();
+        // Collect all polygons for slabs and zones
+        const polygons = [];
+        Object.values(nodes).forEach((node) => {
+            if (node.type === 'slab' && node.polygon && node.polygon.length >= 3) {
+                polygons.push(node.polygon);
+            }
+        });
+        if (polygons.length > 0) {
+            // Format for polygon-clipping: [[[x, y], [x, y], ...]]
+            const multiPolygons = polygons.map((pts) => {
+                const ring = pts.map((p) => [p[0], -p[1]]); // Negate Y (which was Z)
+                return [ring];
+            });
+            // Union all polygons together to prevent artifacts from overlapping
+            const unionedPolygons = polygonClipping.union(multiPolygons[0], ...multiPolygons.slice(1));
+            // Add each resulting unioned polygon as a hole
+            for (const geom of unionedPolygons) {
+                // First ring in each geometry is the exterior ring
+                if (geom.length > 0) {
+                    const ring = geom[0];
+                    const hole = new THREE.Path();
+                    if (ring.length > 0) {
+                        hole.moveTo(ring[0][0], ring[0][1]);
+                        for (let i = 1; i < ring.length; i++) {
+                            hole.lineTo(ring[i][0], ring[i][1]);
+                        }
+                        hole.closePath();
+                        s.holes.push(hole);
+                    }
+                }
+            }
+        }
+        return s;
+    }, [nodes]);
+    return (_jsxs("mesh", { "position-y": -0.05, "rotation-x": -Math.PI / 2, children: [_jsx("shapeGeometry", { args: [shape] }), _jsx("meshBasicMaterial", { color: bgColor, depthWrite: true, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1 })] }));
+};

package/dist/components/viewer/index.d.ts

@@ -7,6 +7,7 @@ declare module '@react-three/fiber' {
 interface ViewerProps {
     children?: React.ReactNode;
     selectionManager?: 'default' | 'custom';
+    perf?: boolean;
 }
 declare const Viewer: React.FC<ViewerProps>;
 export default Viewer;

package/dist/components/viewer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5E,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AAYrC,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAc,SAAQ,kBAAkB,CAAC,OAAO,KAAK,CAAC;KAAG;CACpE;AAID,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CACxC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+CjC,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAkB,KAAK,kBAAkB,EAAsB,MAAM,oBAAoB,CAAA;AAEhG,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AA2CrC,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAc,SAAQ,kBAAkB,CAAC,OAAO,KAAK,CAAC;KAAG;CACpE;AA+BD,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0DjC,CAAA;AASD,eAAe,MAAM,CAAA"}

package/dist/components/viewer/index.js

@@ -1,30 +1,83 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CeilingSystem, ItemSystem, RoofSystem, SlabSystem, WallSystem, WindowSystem } from '@pascal-app/core';
+import { CeilingSystem, DoorSystem, ItemSystem, RoofSystem, SlabSystem, WallSystem, WindowSystem, } from '@pascal-app/core';
 import { Bvh } from '@react-three/drei';
-import { Canvas, extend } from '@react-three/fiber';
+import { Canvas, extend, 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';
 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';
+function AnimatedBackground({ isDark }) {
+    const targetColor = useMemo(() => new THREE.Color(), []);
+    const initialized = useRef(false);
+    useFrame(({ scene }, delta) => {
+        const dt = Math.min(delta, 0.1) * 4;
+        const targetHex = isDark ? '#1f2433' : '#ffffff';
+        if (!(scene.background && scene.background instanceof THREE.Color)) {
+            scene.background = new THREE.Color(targetHex);
+            initialized.current = true;
+            return;
+        }
+        if (!initialized.current) {
+            scene.background.set(targetHex);
+            initialized.current = true;
+            return;
+        }
+        targetColor.set(targetHex);
+        scene.background.lerp(targetColor, dt);
+    });
+    return null;
+}
 extend(THREE);
-const Viewer = ({ children, selectionManager = 'default' }) => {
-    return (_jsxs(Canvas, { dpr: [1, 1.5], className: 'bg-[#fafafa]', gl: async (props) => {
+/**
+ * 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.backend;
+        const device = 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;
+}
+const Viewer = ({ children, selectionManager = 'default', perf = false, }) => {
+    const theme = useViewer((state) => state.theme);
+    return (_jsxs(Canvas, { camera: { position: [50, 50, 50], fov: 50 }, className: `transition-colors duration-700 ${theme === 'dark' ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`, dpr: [1, 1.5], gl: (props) => {
             const renderer = new THREE.WebGPURenderer(props);
-            await renderer.init();
             renderer.toneMapping = THREE.ACESFilmicToneMapping;
             renderer.toneMappingExposure = 0.9;
             return renderer;
         }, shadows: {
             type: THREE.PCFShadowMap,
             enabled: true,
-        }, camera: { position: [50, 50, 50], fov: 50 }, children: [_jsx("color", { attach: "background", args: ['#fafafa'] }), _jsx(ViewerCamera, {}), _jsx(Lights, {}), _jsx(Bvh, { children: _jsx(SceneRenderer, {}) }), _jsx(LevelSystem, {}), _jsx(GuideSystem, {}), _jsx(ScanSystem, {}), _jsx(WallCutout, {}), _jsx(CeilingSystem, {}), _jsx(ItemSystem, {}), _jsx(RoofSystem, {}), _jsx(SlabSystem, {}), _jsx(WallSystem, {}), _jsx(WindowSystem, {}), _jsx(ZoneSystem, {}), _jsx(PostProcessing, {}), selectionManager === 'default' && _jsx(SelectionManager, {}), children] }));
+        }, children: [_jsx(GroundOccluder, {}), _jsx(ViewerCamera, {}), _jsx(Lights, {}), _jsx(Bvh, { children: _jsx(SceneRenderer, {}) }), _jsx(LevelSystem, {}), _jsx(GuideSystem, {}), _jsx(ScanSystem, {}), _jsx(WallCutout, {}), _jsx(CeilingSystem, {}), _jsx(DoorSystem, {}), _jsx(ItemSystem, {}), _jsx(RoofSystem, {}), _jsx(SlabSystem, {}), _jsx(WallSystem, {}), _jsx(WindowSystem, {}), _jsx(ZoneSystem, {}), _jsx(PostProcessing, {}), _jsx(GPUDeviceWatcher, {}), _jsx(ItemLightSystem, {}), selectionManager === 'default' && _jsx(SelectionManager, {}), perf && _jsx(PerfMonitor, {}), children] }));
+};
+const DebugRenderer = () => {
+    useFrame(({ gl, scene, camera }) => {
+        gl.render(scene, camera);
+    });
+    return null;
 };
 export default Viewer;

package/dist/components/viewer/lights.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lights.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/lights.tsx"],"names":[],"mappings":"AAGA,wBAAgB,MAAM,4CAgDrB"}
+{"version":3,"file":"lights.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/lights.tsx"],"names":[],"mappings":"AAMA,wBAAgB,MAAM,4CAoIrB"}

package/dist/components/viewer/lights.js

@@ -1,10 +1,74 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { useMemo, useRef } from 'react';
+import * as THREE from 'three/webgpu';
+import useViewer from '../../store/use-viewer';
 export function Lights() {
-    const lightRef = useRef(null);
+    const theme = useViewer((state) => state.theme);
+    const isDark = theme === 'dark';
+    const light1Ref = useRef(null);
     const shadowCamera = useRef(null);
     const shadowCameraSize = 50; // The "area" around the camera to shadow
-    // useHelper(lightRef, DirectionalLightHelper, 1, 'red')
-    // useHelper(shadowCamera, CameraHelper)
-    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: lightRef, position: [10, 10, 10], castShadow: true, intensity: 4, "shadow-bias": -0.002, "shadow-normalBias": 0.3, "shadow-mapSize": [1024, 1024], "shadow-radius": 3, "shadow-intensity": 0.4, children: _jsx("orthographicCamera", { ref: shadowCamera, attach: "shadow-camera", near: 1, far: 100, left: -shadowCameraSize, right: shadowCameraSize, top: shadowCameraSize, bottom: -shadowCameraSize }) }), _jsx("directionalLight", { position: [-10, 10, -10], intensity: 0.75 }), _jsx("directionalLight", { position: [-10, 10, 10], intensity: 1 }), _jsx("ambientLight", { intensity: 0.5, color: 'white' })] }));
+    const light2Ref = useRef(null);
+    const light3Ref = useRef(null);
+    const ambientRef = useRef(null);
+    const initialized = useRef(false);
+    const targets = useMemo(() => ({
+        l1Color: new THREE.Color(),
+        l2Color: new THREE.Color(),
+        l3Color: new THREE.Color(),
+        ambColor: new THREE.Color(),
+    }), []);
+    useFrame((_, delta) => {
+        // clamp delta to avoid huge jumps on tab switch
+        const dt = Math.min(delta, 0.1) * 4;
+        if (!initialized.current) {
+            if (light1Ref.current) {
+                light1Ref.current.intensity = isDark ? 0.8 : 4;
+                light1Ref.current.color.set(isDark ? '#e0e5ff' : '#ffffff');
+                if (light1Ref.current.shadow)
+                    light1Ref.current.shadow.intensity = isDark ? 0.8 : 0.4;
+            }
+            if (light2Ref.current) {
+                light2Ref.current.intensity = isDark ? 0.2 : 0.75;
+                light2Ref.current.color.set(isDark ? '#8090ff' : '#ffffff');
+            }
+            if (light3Ref.current) {
+                light3Ref.current.intensity = isDark ? 0.3 : 1;
+                light3Ref.current.color.set(isDark ? '#a0b0ff' : '#ffffff');
+            }
+            if (ambientRef.current) {
+                ambientRef.current.intensity = isDark ? 0.15 : 0.5;
+                ambientRef.current.color.set(isDark ? '#a0b0ff' : '#ffffff');
+            }
+            initialized.current = true;
+            return;
+        }
+        if (light1Ref.current) {
+            light1Ref.current.intensity = THREE.MathUtils.lerp(light1Ref.current.intensity, isDark ? 0.8 : 4, dt);
+            targets.l1Color.set(isDark ? '#e0e5ff' : '#ffffff');
+            light1Ref.current.color.lerp(targets.l1Color, dt);
+            if (light1Ref.current.shadow) {
+                if (light1Ref.current.shadow.intensity !== undefined) {
+                    light1Ref.current.shadow.intensity = THREE.MathUtils.lerp(light1Ref.current.shadow.intensity, isDark ? 0.8 : 0.4, dt);
+                }
+            }
+        }
+        if (light2Ref.current) {
+            light2Ref.current.intensity = THREE.MathUtils.lerp(light2Ref.current.intensity, isDark ? 0.2 : 0.75, dt);
+            targets.l2Color.set(isDark ? '#8090ff' : '#ffffff');
+            light2Ref.current.color.lerp(targets.l2Color, dt);
+        }
+        if (light3Ref.current) {
+            light3Ref.current.intensity = THREE.MathUtils.lerp(light3Ref.current.intensity, isDark ? 0.3 : 1, dt);
+            targets.l3Color.set(isDark ? '#a0b0ff' : '#ffffff');
+            light3Ref.current.color.lerp(targets.l3Color, dt);
+        }
+        if (ambientRef.current) {
+            ambientRef.current.intensity = THREE.MathUtils.lerp(ambientRef.current.intensity, isDark ? 0.15 : 0.5, dt);
+            targets.ambColor.set(isDark ? '#a0b0ff' : '#ffffff');
+            ambientRef.current.color.lerp(targets.ambColor, dt);
+        }
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { castShadow: true, position: [10, 10, 10], ref: light1Ref, "shadow-bias": -0.002, "shadow-mapSize": [1024, 1024], "shadow-normalBias": 0.3, "shadow-radius": 3, children: _jsx("orthographicCamera", { attach: "shadow-camera", bottom: -shadowCameraSize, far: 100, left: -shadowCameraSize, near: 1, ref: shadowCamera, right: shadowCameraSize, top: shadowCameraSize }) }), _jsx("directionalLight", { position: [-10, 10, -10], ref: light2Ref }), _jsx("directionalLight", { position: [-10, 10, 10], ref: light3Ref }), _jsx("ambientLight", { ref: ambientRef })] }));
 }

package/dist/components/viewer/perf-monitor.d.ts

@@ -0,0 +1,2 @@
+export declare const PerfMonitor: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=perf-monitor.d.ts.map

package/dist/components/viewer/perf-monitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf-monitor.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/perf-monitor.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,+CAoDvB,CAAA"}

package/dist/components/viewer/perf-monitor.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useScene } from '@pascal-app/core';
+import { Html } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
+import { useRef, useState } from 'react';
+const SAMPLE_INTERVAL = 0.5; // seconds between display updates
+export const PerfMonitor = () => {
+    const [stats, setStats] = useState({ fps: 0, frameMs: 0, drawCalls: 0, triangles: 0, dirty: 0 });
+    const frameCount = useRef(0);
+    const elapsed = useRef(0);
+    const lastMs = useRef(0);
+    useFrame(({ gl, clock }) => {
+        frameCount.current++;
+        const now = clock.elapsedTime;
+        const dt = now - elapsed.current;
+        if (dt >= SAMPLE_INTERVAL) {
+            const fps = Math.round(frameCount.current / dt);
+            const frameMs = lastMs.current;
+            const info = gl.info;
+            const drawCalls = info.render?.calls ?? 0;
+            const triangles = info.render?.triangles ?? 0;
+            const dirty = useScene.getState().dirtyNodes.size;
+            setStats({ fps, frameMs, drawCalls, triangles, dirty });
+            frameCount.current = 0;
+            elapsed.current = now;
+        }
+        lastMs.current = Math.round(clock.getDelta() * 1000 * 10) / 10;
+    });
+    return (_jsx(Html, { position: [0, 0, 0], style: { position: 'fixed', top: 8, left: 8, pointerEvents: 'none' }, zIndexRange: [100, 100], children: _jsx("div", { style: {
+                fontFamily: 'monospace',
+                fontSize: 11,
+                lineHeight: 1.5,
+                color: stats.fps < 30 ? '#f87171' : stats.fps < 55 ? '#fbbf24' : '#4ade80',
+                background: 'rgba(0,0,0,0.7)',
+                borderRadius: 6,
+                padding: '6px 10px',
+                whiteSpace: 'pre',
+            }, children: `FPS  ${stats.fps}
+DRAW ${stats.drawCalls}
+TRI  ${(stats.triangles / 1000).toFixed(1)}k
+DIRTY ${stats.dirty}` }) }));
+};

package/dist/components/viewer/post-processing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"post-processing.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/post-processing.tsx"],"names":[],"mappings":"AA0BA,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAA;AAED,QAAA,MAAM,oBAAoB,YAgJzB,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"post-processing.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/post-processing.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAA;AAQD,QAAA,MAAM,oBAAoB,YA4RzB,CAAA;AAED,eAAe,oBAAoB,CAAA"}