@pascal-app/viewer 0.1.12 → 0.2.0

package/dist/components/viewer/post-processing.js

@@ -1,137 +1,260 @@
 import { useFrame, useThree } from '@react-three/fiber';
-import { useEffect, useRef } from 'react';
-import { Color, UnsignedByteType } from 'three';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Color, Layers, UnsignedByteType } from 'three';
 import { outline } from 'three/addons/tsl/display/OutlineNode.js';
 import { ssgi } from 'three/addons/tsl/display/SSGINode.js';
 import { traa } from 'three/addons/tsl/display/TRAANode.js';
-import { add, colorToDirection, diffuseColor, directionToColor, mrt, normalView, oscSine, output, pass, sample, time, uniform, vec4, velocity, } from 'three/tsl';
-import { PostProcessing } from 'three/webgpu';
+import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js';
+import { add, colorToDirection, diffuseColor, directionToColor, float, mix, mrt, normalView, oscSine, output, pass, sample, time, uniform, vec4, velocity, } from 'three/tsl';
+import { RenderPipeline } from 'three/webgpu';
+import { SCENE_LAYER, ZONE_LAYER } from '../../lib/layers';
 import useViewer from '../../store/use-viewer';
 // SSGI Parameters - adjust these to fine-tune global illumination and ambient occlusion
 export const SSGI_PARAMS = {
     enabled: true,
     sliceCount: 1,
-    stepCount: 8,
+    stepCount: 4,
     radius: 1,
     expFactor: 1.5,
     thickness: 0.5,
     backfaceLighting: 0.5,
     aoIntensity: 1.5,
-    giIntensity: 0.5,
+    giIntensity: 0,
     useLinearThickness: false,
     useScreenSpaceSampling: true,
-    useTemporalFiltering: true,
+    useTemporalFiltering: false,
 };
+const MAX_PIPELINE_RETRIES = 3;
+const RETRY_DELAY_MS = 500;
+const DARK_BG = '#1f2433';
+const LIGHT_BG = '#ffffff';
 const PostProcessingPasses = () => {
     const { gl: renderer, scene, camera } = useThree();
-    const postProcessingRef = useRef(null);
+    const renderPipelineRef = useRef(null);
+    const hasPipelineErrorRef = useRef(false);
+    const retryCountRef = useRef(0);
+    const [isInitialized, setIsInitialized] = useState(false);
+    // Background color uniform — updated every frame via lerp, read by the TSL pipeline.
+    // Initialised from the current theme so there's no flash on first render.
+    const initBg = useViewer.getState().theme === 'dark' ? DARK_BG : LIGHT_BG;
+    const bgUniform = useRef(uniform(new Color(initBg)));
+    const bgCurrent = useRef(new Color(initBg));
+    const bgTarget = useRef(new Color());
+    const zoneLayers = useMemo(() => {
+        const l = new Layers();
+        l.enable(ZONE_LAYER);
+        l.disable(SCENE_LAYER);
+        return l;
+    }, []);
+    // Subscribe to projectId so the pipeline rebuilds on project switch
+    const projectId = useViewer((s) => s.projectId);
+    // Bump this to force a pipeline rebuild (used by retry logic)
+    const [pipelineVersion, setPipelineVersion] = useState(0);
+    const requestPipelineRebuild = useCallback(() => {
+        setPipelineVersion((v) => v + 1);
+    }, []);
+    // Renderer initialization
     useEffect(() => {
-        if (!renderer || !scene || !camera) {
+        let mounted = true;
+        const initRenderer = async () => {
+            try {
+                if (renderer && renderer.init) {
+                    await renderer.init();
+                }
+                if (mounted) {
+                    setIsInitialized(true);
+                }
+            }
+            catch (error) {
+                console.error('[viewer] Failed to initialize renderer for post-processing.', error);
+                if (mounted) {
+                    setIsInitialized(false);
+                }
+            }
+        };
+        initRenderer();
+        return () => {
+            mounted = false;
+        };
+    }, [renderer]);
+    // Reset retry count when project changes
+    useEffect(() => {
+        retryCountRef.current = 0;
+    }, []);
+    // Build / rebuild the post-processing pipeline
+    useEffect(() => {
+        if (!(renderer && scene && camera && isInitialized)) {
             return;
         }
-        // Scene pass with MRT for SSGI
-        const scenePass = pass(scene, camera);
-        scenePass.setMRT(mrt({
-            output: output,
-            diffuseColor: diffuseColor,
-            normal: directionToColor(normalView),
-            velocity: velocity,
-        }));
-        // Get texture outputs
-        const scenePassColor = scenePass.getTextureNode('output');
-        const scenePassDiffuse = scenePass.getTextureNode('diffuseColor');
-        const scenePassDepth = scenePass.getTextureNode('depth');
-        const scenePassNormal = scenePass.getTextureNode('normal');
-        const scenePassVelocity = scenePass.getTextureNode('velocity');
-        // Optimize texture bandwidth
-        const diffuseTexture = scenePass.getTexture('diffuseColor');
-        diffuseTexture.type = UnsignedByteType;
-        const normalTexture = scenePass.getTexture('normal');
-        normalTexture.type = UnsignedByteType;
-        // Extract normal from color-encoded texture
-        const sceneNormal = sample((uv) => {
-            return colorToDirection(scenePassNormal.sample(uv));
-        });
-        // SSGI Pass (cast to PerspectiveCamera for SSGI)
-        const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, camera);
-        giPass.sliceCount.value = SSGI_PARAMS.sliceCount;
-        giPass.stepCount.value = SSGI_PARAMS.stepCount;
-        giPass.radius.value = SSGI_PARAMS.radius;
-        giPass.expFactor.value = SSGI_PARAMS.expFactor;
-        giPass.thickness.value = SSGI_PARAMS.thickness;
-        giPass.backfaceLighting.value = SSGI_PARAMS.backfaceLighting;
-        giPass.aoIntensity.value = SSGI_PARAMS.aoIntensity;
-        giPass.giIntensity.value = SSGI_PARAMS.giIntensity;
-        giPass.useLinearThickness.value = SSGI_PARAMS.useLinearThickness;
-        giPass.useScreenSpaceSampling.value = SSGI_PARAMS.useScreenSpaceSampling;
-        giPass.useTemporalFiltering = SSGI_PARAMS.useTemporalFiltering;
-        // Extract GI and AO from SSGI pass
-        const gi = giPass.rgb;
-        const ao = giPass.a;
-        // Composite: scene * AO + diffuse * GI
-        const compositePass = vec4(add(scenePassColor.rgb.mul(ao), scenePassDiffuse.rgb.mul(gi)), scenePassColor.a);
-        // TRAA (Temporal Reprojection Anti-Aliasing)
-        const traaPass = traa(compositePass, scenePassDepth, scenePassVelocity, camera);
-        function generateSelectedOutlinePass() {
-            const edgeStrength = uniform(3);
-            const edgeGlow = uniform(0);
-            const edgeThickness = uniform(1);
-            const visibleEdgeColor = uniform(new Color(0xffffff));
-            const hiddenEdgeColor = uniform(new Color(0xf3ff47));
-            const outlinePass = outline(scene, camera, {
-                selectedObjects: useViewer.getState().outliner.selectedObjects,
-                edgeGlow,
-                edgeThickness,
+        hasPipelineErrorRef.current = false;
+        // Clear outliner arrays synchronously to prevent stale Object3D refs
+        // from the previous project leaking into the new pipeline's outline passes.
+        const outliner = useViewer.getState().outliner;
+        outliner.selectedObjects.length = 0;
+        outliner.hoveredObjects.length = 0;
+        try {
+            // Scene pass with MRT for SSGI
+            const scenePass = pass(scene, camera);
+            scenePass.setMRT(mrt({
+                output,
+                diffuseColor,
+                normal: directionToColor(normalView),
+                velocity,
+            }));
+            // Get texture outputs
+            const scenePassColor = scenePass.getTextureNode('output');
+            const scenePassDiffuse = scenePass.getTextureNode('diffuseColor');
+            const scenePassDepth = scenePass.getTextureNode('depth');
+            const scenePassNormal = scenePass.getTextureNode('normal');
+            const scenePassVelocity = scenePass.getTextureNode('velocity');
+            // Optimize texture bandwidth
+            const diffuseTexture = scenePass.getTexture('diffuseColor');
+            diffuseTexture.type = UnsignedByteType;
+            const normalTexture = scenePass.getTexture('normal');
+            normalTexture.type = UnsignedByteType;
+            // Extract normal from color-encoded texture
+            const sceneNormal = sample((uv) => {
+                return colorToDirection(scenePassNormal.sample(uv));
             });
-            const { visibleEdge, hiddenEdge } = outlinePass;
-            const outlineColor = visibleEdge
-                .mul(visibleEdgeColor)
-                .add(hiddenEdge.mul(hiddenEdgeColor))
-                .mul(edgeStrength);
-            return outlineColor;
+            const zonePass = pass(scene, camera);
+            zonePass.setLayers(zoneLayers);
+            // SSGI Pass (cast to PerspectiveCamera for SSGI)
+            const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, camera);
+            giPass.sliceCount.value = SSGI_PARAMS.sliceCount;
+            giPass.stepCount.value = SSGI_PARAMS.stepCount;
+            giPass.radius.value = SSGI_PARAMS.radius;
+            giPass.expFactor.value = SSGI_PARAMS.expFactor;
+            giPass.thickness.value = SSGI_PARAMS.thickness;
+            giPass.backfaceLighting.value = SSGI_PARAMS.backfaceLighting;
+            giPass.aoIntensity.value = SSGI_PARAMS.aoIntensity;
+            giPass.giIntensity.value = SSGI_PARAMS.giIntensity;
+            giPass.useLinearThickness.value = SSGI_PARAMS.useLinearThickness;
+            giPass.useScreenSpaceSampling.value = SSGI_PARAMS.useScreenSpaceSampling;
+            giPass.useTemporalFiltering = SSGI_PARAMS.useTemporalFiltering;
+            const giTexture = giPass.getTextureNode();
+            // DenoiseNode only denoises RGB — alpha is passed through unchanged.
+            // SSGI packs AO into alpha, so we remap it into RGB before denoising.
+            // convertToTexture() inside denoise() will call rtt() on this vec4 node automatically.
+            const aoAsRgb = vec4(giTexture.a, giTexture.a, giTexture.a, float(1));
+            const denoisePass = denoise(aoAsRgb, scenePassDepth, sceneNormal, camera);
+            denoisePass.index.value = 0;
+            denoisePass.radius.value = 4;
+            const gi = giPass.rgb;
+            const ao = denoisePass.r;
+            // const gi = giPass.rgb;
+            // const ao = giPass.a;
+            // Background detection via alpha: renderer clears with alpha=0 (setClearAlpha(0) in useFrame),
+            // so background pixels have scenePassColor.a=0 while geometry pixels have output.a=1.
+            // WebGPU only applies clearColorValue to MRT attachment 0 (output), so scenePassColor.a
+            // is the reliable geometry mask — no normals, no flicker.
+            const hasGeometry = scenePassColor.a;
+            const contentAlpha = hasGeometry.max(zonePass.a);
+            // Composite: scene * AO + diffuse * GI
+            const compositePass = vec4(add(scenePassColor.rgb.mul(ao), add(zonePass.rgb, scenePassDiffuse.rgb.mul(gi))), contentAlpha);
+            function generateSelectedOutlinePass() {
+                const edgeStrength = uniform(3);
+                const edgeGlow = uniform(0);
+                const edgeThickness = uniform(1);
+                const visibleEdgeColor = uniform(new Color(0xff_ff_ff));
+                const hiddenEdgeColor = uniform(new Color(0xf3_ff_47));
+                const outlinePass = outline(scene, camera, {
+                    selectedObjects: useViewer.getState().outliner.selectedObjects,
+                    edgeGlow,
+                    edgeThickness,
+                });
+                const { visibleEdge, hiddenEdge } = outlinePass;
+                const outlineColor = visibleEdge
+                    .mul(visibleEdgeColor)
+                    .add(hiddenEdge.mul(hiddenEdgeColor))
+                    .mul(edgeStrength);
+                return outlineColor;
+            }
+            function generateHoverOutlinePass() {
+                const edgeStrength = uniform(5);
+                const edgeGlow = uniform(0.5);
+                const edgeThickness = uniform(1.5);
+                const pulsePeriod = uniform(3);
+                const visibleEdgeColor = uniform(new Color(0x00_aa_ff));
+                const hiddenEdgeColor = uniform(new Color(0xf3_ff_47));
+                const outlinePass = outline(scene, camera, {
+                    selectedObjects: useViewer.getState().outliner.hoveredObjects,
+                    edgeGlow,
+                    edgeThickness,
+                });
+                const { visibleEdge, hiddenEdge } = outlinePass;
+                const period = time.div(pulsePeriod).mul(2);
+                const osc = oscSine(period).mul(0.5).add(0.5); // osc [ 0.5, 1.0 ]
+                const outlineColor = visibleEdge
+                    .mul(visibleEdgeColor)
+                    .add(hiddenEdge.mul(hiddenEdgeColor))
+                    .mul(edgeStrength);
+                const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
+                return outlinePulse;
+            }
+            const selectedOutlinePass = generateSelectedOutlinePass();
+            const hoverOutlinePass = generateHoverOutlinePass();
+            // Combine composite with outlines BEFORE applying TRAA
+            const compositeWithOutlines = SSGI_PARAMS.enabled
+                ? vec4(add(compositePass.rgb, selectedOutlinePass.add(hoverOutlinePass)), compositePass.a)
+                : vec4(add(scenePassColor.rgb, selectedOutlinePass.add(hoverOutlinePass)), scenePassColor.a);
+            // TRAA (Temporal Reprojection Anti-Aliasing) - applied AFTER combining everything
+            const traaOutput = traa(compositeWithOutlines, scenePassDepth, scenePassVelocity, camera);
+            // For zone-over-background pixels, scenePassDepth=1.0 (no scene geometry) causes TRAA
+            // to output black. Use hasGeometry to blend: geometry pixels use traaRgb, all others
+            // (zones over background, pure background) use compositePass.rgb directly.
+            const traaRgb = traaOutput.rgb;
+            const colorSource = mix(compositePass.rgb, traaRgb, hasGeometry);
+            const finalOutput = vec4(mix(bgUniform.current, colorSource, contentAlpha), float(1));
+            const renderPipeline = new RenderPipeline(renderer);
+            renderPipeline.outputNode = finalOutput;
+            renderPipelineRef.current = renderPipeline;
         }
-        function generateHoverOutlinePass() {
-            const edgeStrength = uniform(5);
-            const edgeGlow = uniform(0.5);
-            const edgeThickness = uniform(1.5);
-            const pulsePeriod = uniform(3);
-            const visibleEdgeColor = uniform(new Color(0x00aaff));
-            const hiddenEdgeColor = uniform(new Color(0xf3ff47));
-            const outlinePass = outline(scene, camera, {
-                selectedObjects: useViewer.getState().outliner.hoveredObjects,
-                edgeGlow,
-                edgeThickness,
-            });
-            const { visibleEdge, hiddenEdge } = outlinePass;
-            const period = time.div(pulsePeriod).mul(2);
-            const osc = oscSine(period).mul(0.5).add(0.5); // osc [ 0.5, 1.0 ]
-            const outlineColor = visibleEdge
-                .mul(visibleEdgeColor)
-                .add(hiddenEdge.mul(hiddenEdgeColor))
-                .mul(edgeStrength);
-            const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
-            return outlinePulse;
+        catch (error) {
+            hasPipelineErrorRef.current = true;
+            console.error('[viewer] Failed to set up post-processing pipeline. Rendering without post FX.', error);
+            if (renderPipelineRef.current) {
+                renderPipelineRef.current.dispose();
+            }
+            renderPipelineRef.current = null;
         }
-        // Setup post-processing
-        const postProcessing = new PostProcessing(renderer);
-        const selectedOutlinePass = generateSelectedOutlinePass();
-        const hoverOutlinePass = generateHoverOutlinePass();
-        // Combine SSGI output with outlines
-        const finalOutput = SSGI_PARAMS.enabled
-            ? selectedOutlinePass.add(hoverOutlinePass).add(traaPass)
-            : selectedOutlinePass.add(hoverOutlinePass).add(scenePassColor);
-        postProcessing.outputNode = finalOutput;
-        postProcessingRef.current = postProcessing;
         return () => {
-            if (postProcessingRef.current) {
-                postProcessingRef.current.dispose();
+            if (renderPipelineRef.current) {
+                renderPipelineRef.current.dispose();
             }
-            postProcessingRef.current = null;
+            renderPipelineRef.current = null;
         };
-    }, [renderer, scene, camera]);
-    useFrame(() => {
-        if (postProcessingRef.current) {
-            postProcessingRef.current.render();
+    }, [renderer, scene, camera, isInitialized, zoneLayers]);
+    useFrame((_, delta) => {
+        // Animate background colour toward the current theme target (same lerp as AnimatedBackground)
+        bgTarget.current.set(useViewer.getState().theme === 'dark' ? DARK_BG : LIGHT_BG);
+        bgCurrent.current.lerp(bgTarget.current, Math.min(delta, 0.1) * 4);
+        bgUniform.current.value.copy(bgCurrent.current);
+        if (hasPipelineErrorRef.current || !renderPipelineRef.current) {
+            return;
+        }
+        try {
+            // Clear alpha=0 so background pixels in the output MRT attachment (index 0) get a=0,
+            // making scenePassColor.a a reliable geometry mask (geometry pixels write a=1 via output node).
+            ;
+            renderer.setClearAlpha(0);
+            renderPipelineRef.current.render();
+        }
+        catch (error) {
+            hasPipelineErrorRef.current = true;
+            console.error('[viewer] Post-processing render pass failed.', error);
+            if (renderPipelineRef.current) {
+                renderPipelineRef.current.dispose();
+            }
+            renderPipelineRef.current = null;
+            if (retryCountRef.current < MAX_PIPELINE_RETRIES) {
+                // Auto-retry: schedule a pipeline rebuild if we haven't exceeded the retry limit
+                retryCountRef.current++;
+                console.warn(`[viewer] Scheduling post-processing rebuild (attempt ${retryCountRef.current}/${MAX_PIPELINE_RETRIES})`);
+                setTimeout(requestPipelineRebuild, RETRY_DELAY_MS);
+            }
+            else {
+                console.error('[viewer] Post-processing retries exhausted. Rendering without post FX for this session.');
+            }
         }
     }, 1);
     return null;

package/dist/components/viewer/selection-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection-manager.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/selection-manager.tsx"],"names":[],"mappings":"AAkNA,eAAO,MAAM,gBAAgB,+CA0D5B,CAAA"}
+{"version":3,"file":"selection-manager.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/selection-manager.tsx"],"names":[],"mappings":"AAwQA,eAAO,MAAM,gBAAgB,+CAsE5B,CAAA"}

package/dist/components/viewer/selection-manager.js

@@ -46,12 +46,19 @@ const isNodeOnLevel = (node, levelId) => {
     // Direct child of level
     if (node.parentId === levelId)
         return true;
-    // Wall-attached items (windows/doors): check if parent wall is on the level
-    if (node.type === 'item' && node.parentId) {
+    // Wall-attached nodes (window/door/item): check if parent wall is on the level
+    if ((node.type === 'item' || node.type === 'window' || node.type === 'door') && node.parentId) {
         const parentNode = nodes[node.parentId];
         if (parentNode?.type === 'wall' && parentNode.parentId === levelId) {
             return true;
         }
+        // Ceiling/slab/roof-attached items: check if parent structure is on the level
+        if ((parentNode?.type === 'ceiling' ||
+            parentNode?.type === 'slab' ||
+            parentNode?.type === 'roof') &&
+            parentNode.parentId === levelId) {
+            return true;
+        }
     }
     return false;
 };
@@ -97,7 +104,7 @@ const isNodeInZone = (node, levelId, zoneId) => {
         }
         return false;
     }
-    if (node.type === 'roof') {
+    if (node.type === 'roof' || node.type === 'roof-segment') {
         // Roofs on the same level are valid when zone is selected
         return true;
     }
@@ -105,6 +112,17 @@ const isNodeInZone = (node, levelId, zoneId) => {
 };
 const getStrategy = () => {
     const { buildingId, levelId, zoneId } = useViewer.getState().selection;
+    const computeNextIds = (node, selectedIds, event) => {
+        const isMeta = event?.metaKey || event?.nativeEvent?.metaKey;
+        const isCtrl = event?.ctrlKey || event?.nativeEvent?.ctrlKey;
+        if (isMeta || isCtrl) {
+            if (selectedIds.includes(node.id)) {
+                return selectedIds.filter((id) => id !== node.id);
+            }
+            return [...selectedIds, node.id];
+        }
+        return [node.id];
+    };
     // No building selected -> can select buildings
     if (!buildingId) {
         return {
@@ -144,18 +162,21 @@ const getStrategy = () => {
             isValid: (node) => node.type === 'zone' && node.parentId === levelId,
         };
     }
-    // Zone selected -> can select/hover contents (walls, items, slabs, ceilings, roofs)
+    // Zone selected -> can select/hover contents (walls, items, slabs, ceilings, roofs, windows, doors)
     return {
-        types: ['wall', 'item', 'slab', 'ceiling', 'roof'],
-        handleClick: (node) => {
-            const { selectedIds } = useViewer.getState().selection;
-            // Toggle selection - if already selected, deselect; otherwise select
-            if (selectedIds.includes(node.id)) {
-                useViewer.getState().setSelection({ selectedIds: selectedIds.filter((id) => id !== node.id) });
-            }
-            else {
-                useViewer.getState().setSelection({ selectedIds: [node.id] });
+        types: ['wall', 'item', 'slab', 'ceiling', 'roof', 'roof-segment', 'window', 'door'],
+        handleClick: (node, nativeEvent) => {
+            let nodeToSelect = node;
+            if (node.type === 'roof-segment' && node.parentId) {
+                const parentNode = useScene.getState().nodes[node.parentId];
+                if (parentNode && parentNode.type === 'roof') {
+                    nodeToSelect = parentNode;
+                }
             }
+            const { selectedIds } = useViewer.getState().selection;
+            useViewer
+                .getState()
+                .setSelection({ selectedIds: computeNextIds(nodeToSelect, selectedIds, nativeEvent) });
         },
         handleDeselect: () => {
             const { selectedIds } = useViewer.getState().selection;
@@ -168,7 +189,16 @@ const getStrategy = () => {
             }
         },
         isValid: (node) => {
-            const validTypes = ['wall', 'item', 'slab', 'ceiling', 'roof'];
+            const validTypes = [
+                'wall',
+                'item',
+                'slab',
+                'ceiling',
+                'roof',
+                'roof-segment',
+                'window',
+                'door',
+            ];
             if (!validTypes.includes(node.type))
                 return false;
             return isNodeInZone(node, levelId, zoneId);
@@ -205,12 +235,24 @@ export const SelectionManager = () => {
                 return;
             event.stopPropagation();
             clickHandledRef.current = true;
-            strategy.handleClick(event.node);
+            strategy.handleClick(event.node, event.nativeEvent);
             // Clear hover immediately after clicking on building/level/zone
             useViewer.setState({ hoveredId: null });
         };
         // Subscribe to all node types
-        const allTypes = ['building', 'level', 'zone', 'wall', 'item', 'slab', 'ceiling', 'roof'];
+        const allTypes = [
+            'building',
+            'level',
+            'zone',
+            'wall',
+            'item',
+            'slab',
+            'ceiling',
+            'roof',
+            'roof-segment',
+            'window',
+            'door',
+        ];
         for (const type of allTypes) {
             emitter.on(`${type}:enter`, onEnter);
             emitter.on(`${type}:leave`, onLeave);
@@ -223,14 +265,16 @@ export const SelectionManager = () => {
                 emitter.off(`${type}:click`, onClick);
             }
         };
-    }, [selection]);
+    }, []);
     return (_jsxs(_Fragment, { children: [_jsx(PointerMissedHandler, { clickHandledRef: clickHandledRef }), _jsx(OutlinerSync, {})] }));
 };
-const PointerMissedHandler = ({ clickHandledRef }) => {
+const PointerMissedHandler = ({ clickHandledRef, }) => {
     const gl = useThree((s) => s.gl);
     useEffect(() => {
         const handleClick = (event) => {
             // Only handle left clicks
+            if (useViewer.getState().cameraDragging)
+                return;
             if (event.button !== 0)
                 return;
             // Use requestAnimationFrame to check after R3F event handlers

package/dist/components/viewer/viewer-camera.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewer-camera.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/viewer-camera.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,+CAOxB,CAAA"}
+{"version":3,"file":"viewer-camera.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/viewer-camera.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,+CAQxB,CAAA"}

package/dist/components/viewer/viewer-camera.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { OrthographicCamera, PerspectiveCamera } from "@react-three/drei";
-import useViewer from "../../store/use-viewer";
+import { OrthographicCamera, PerspectiveCamera } from '@react-three/drei';
+import useViewer from '../../store/use-viewer';
 export const ViewerCamera = () => {
     const cameraMode = useViewer((state) => state.cameraMode);
     return cameraMode === 'perspective' ? (_jsx(PerspectiveCamera, { far: 1000, fov: 50, makeDefault: true, near: 0.1, position: [10, 10, 10] })) : (_jsx(OrthographicCamera, { far: 1000, makeDefault: true, near: -1000, position: [10, 10, 10], zoom: 20 }));

package/dist/hooks/use-gltf-ktx2.d.ts

@@ -1,4 +1,4 @@
-import { useGLTF } from "@react-three/drei";
+import { useGLTF } from '@react-three/drei';
 declare const useGLTFKTX2: (path: string) => ReturnType<typeof useGLTF>;
 export { useGLTFKTX2 };
 //# sourceMappingURL=use-gltf-ktx2.d.ts.map

package/dist/hooks/use-gltf-ktx2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-gltf-ktx2.d.ts","sourceRoot":"","sources":["../../src/hooks/use-gltf-ktx2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAQ3C,QAAA,MAAM,WAAW,GAAI,MAAM,MAAM,KAAG,UAAU,CAAC,OAAO,OAAO,CAS5D,CAAA;AACD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"use-gltf-ktx2.d.ts","sourceRoot":"","sources":["../../src/hooks/use-gltf-ktx2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAU3C,QAAA,MAAM,WAAW,GAAI,MAAM,MAAM,KAAG,UAAU,CAAC,OAAO,OAAO,CA2B5D,CAAA;AACD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/hooks/use-gltf-ktx2.js

@@ -1,15 +1,33 @@
-import { useGLTF } from "@react-three/drei";
-import { useThree } from "@react-three/fiber";
-import { KTX2Loader } from "three/examples/jsm/Addons.js";
-import { MeshoptDecoder } from "three/examples/jsm/libs/meshopt_decoder.module.js";
+import { useGLTF } from '@react-three/drei';
+import { useThree } from '@react-three/fiber';
+import { KTX2Loader } from 'three/examples/jsm/Addons.js';
+import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
 const ktx2LoaderInstance = new KTX2Loader();
 ktx2LoaderInstance.setTranscoderPath('https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/basis/');
+const ktx2ConfiguredRenderers = new WeakSet();
+const ktx2WarningLoggedRenderers = new WeakSet();
 const useGLTFKTX2 = (path) => {
     const gl = useThree((state) => state.gl);
     return useGLTF(path, true, true, (loader) => {
-        ktx2LoaderInstance.detectSupport(gl);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        loader.setKTX2Loader(ktx2LoaderInstance);
+        const renderer = gl;
+        if (!ktx2ConfiguredRenderers.has(renderer)) {
+            try {
+                ktx2LoaderInstance.detectSupport(gl);
+                ktx2ConfiguredRenderers.add(renderer);
+            }
+            catch (error) {
+                // Some WebGPU flows can transiently call this before backend init.
+                // Avoid crashing the whole scene; scans may render without KTX2 on this pass.
+                if (!ktx2WarningLoggedRenderers.has(renderer)) {
+                    console.warn('[viewer] Skipping KTX2 support detection for now.', error);
+                    ktx2WarningLoggedRenderers.add(renderer);
+                }
+            }
+        }
+        if (ktx2ConfiguredRenderers.has(renderer)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            loader.setKTX2Loader(ktx2LoaderInstance);
+        }
         loader.setMeshoptDecoder(MeshoptDecoder);
     });
 };

package/dist/hooks/use-node-events.d.ts

@@ -1,4 +1,4 @@
-import { type BuildingEvent, type BuildingNode, type CeilingEvent, type CeilingNode, type ItemEvent, type ItemNode, type LevelEvent, type LevelNode, type RoofEvent, type RoofNode, type SiteEvent, type SiteNode, type SlabEvent, type SlabNode, type WallEvent, type WallNode, type ZoneEvent, type ZoneNode } from '@pascal-app/core';
+import { type BuildingEvent, type BuildingNode, type CeilingEvent, type CeilingNode, type DoorEvent, type DoorNode, type ItemEvent, type ItemNode, type LevelEvent, type LevelNode, type RoofEvent, type RoofNode, type RoofSegmentEvent, type RoofSegmentNode, type SiteEvent, type SiteNode, type SlabEvent, type SlabNode, type WallEvent, type WallNode, type WindowEvent, type WindowNode, type ZoneEvent, type ZoneNode } from '@pascal-app/core';
 import type { ThreeEvent } from '@react-three/fiber';
 type NodeConfig = {
     site: {
@@ -37,6 +37,18 @@ type NodeConfig = {
         node: RoofNode;
         event: RoofEvent;
     };
+    'roof-segment': {
+        node: RoofSegmentNode;
+        event: RoofSegmentEvent;
+    };
+    window: {
+        node: WindowNode;
+        event: WindowEvent;
+    };
+    door: {
+        node: DoorNode;
+        event: DoorEvent;
+    };
 };
 type NodeType = keyof NodeConfig;
 export declare function useNodeEvents<T extends NodeType>(node: NodeConfig[T]['node'], type: T): {

package/dist/hooks/use-node-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-node-events.d.ts","sourceRoot":"","sources":["../../src/hooks/use-node-events.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,WAAW,EAGhB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;IAC1C,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;IAC1C,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;IAC1C,QAAQ,EAAE;QAAE,IAAI,EAAE,YAAY,CAAC;QAAC,KAAK,EAAE,aAAa,CAAA;KAAE,CAAA;IACtD,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,CAAA;IAC7C,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;IAC1C,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;IAC1C,OAAO,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,YAAY,CAAA;KAAE,CAAA;IACnD,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;CAC3C,CAAA;AAED,KAAK,QAAQ,GAAG,MAAM,UAAU,CAAA;AAEhC,wBAAgB,aAAa,CAAC,CAAC,SAAS,QAAQ,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC;uBAiB/D,UAAU,CAAC,YAAY,CAAC;qBAI1B,UAAU,CAAC,YAAY,CAAC;iBAI5B,UAAU,CAAC,YAAY,CAAC;wBAIjB,UAAU,CAAC,YAAY,CAAC;wBACxB,UAAU,CAAC,YAAY,CAAC;uBACzB,UAAU,CAAC,YAAY,CAAC;uBACxB,UAAU,CAAC,YAAY,CAAC;uBACxB,UAAU,CAAC,YAAY,CAAC;EAE9C"}
+{"version":3,"file":"use-node-events.d.ts","sourceRoot":"","sources":["../../src/hooks/use-node-events.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,QAAQ,EAGb,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAGpD,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;IAC1C,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;IAC1C,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;IAC1C,QAAQ,EAAE;QAAE,IAAI,EAAE,YAAY,CAAC;QAAC,KAAK,EAAE,aAAa,CAAA;KAAE,CAAA;IACtD,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,CAAA;IAC7C,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;IAC1C,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;IAC1C,OAAO,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,YAAY,CAAA;KAAE,CAAA;IACnD,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;IAC1C,cAAc,EAAE;QAAE,IAAI,EAAE,eAAe,CAAC;QAAC,KAAK,EAAE,gBAAgB,CAAA;KAAE,CAAA;IAClE,MAAM,EAAE;QAAE,IAAI,EAAE,UAAU,CAAC;QAAC,KAAK,EAAE,WAAW,CAAA;KAAE,CAAA;IAChD,IAAI,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAA;CAC3C,CAAA;AAED,KAAK,QAAQ,GAAG,MAAM,UAAU,CAAA;AAEhC,wBAAgB,aAAa,CAAC,CAAC,SAAS,QAAQ,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC;uBAiB/D,UAAU,CAAC,YAAY,CAAC;qBAK1B,UAAU,CAAC,YAAY,CAAC;iBAQ5B,UAAU,CAAC,YAAY,CAAC;wBAIjB,UAAU,CAAC,YAAY,CAAC;wBAIxB,UAAU,CAAC,YAAY,CAAC;uBAIzB,UAAU,CAAC,YAAY,CAAC;uBAIxB,UAAU,CAAC,YAAY,CAAC;uBAIxB,UAAU,CAAC,YAAY,CAAC;EAK9C"}