@pascal-app/viewer 0.3.2 → 0.4.0

package/dist/components/renderers/ceiling/ceiling-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ceiling-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/ceiling/ceiling-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,kBAAkB,CAAA;AAmChE,eAAO,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,4CAoC9D,CAAA"}
+{"version":3,"file":"ceiling-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/ceiling/ceiling-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAgC,MAAM,kBAAkB,CAAA;AAkCjF,eAAO,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,4CA6B9D,CAAA"}

package/dist/components/renderers/ceiling/ceiling-renderer.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRegistry } from '@pascal-app/core';
+import { resolveMaterial, useRegistry } from '@pascal-app/core';
 import { useMemo, useRef } from 'react';
 import { float, mix, positionWorld, smoothstep } from 'three/tsl';
 import { BackSide, FrontSide, MeshBasicNodeMaterial } from 'three/webgpu';
 import { useNodeEvents } from '../../../hooks/use-node-events';
-import { DEFAULT_CEILING_MATERIAL } from '../../../lib/materials';
 import { NodeRenderer } from '../node-renderer';
 const gridScale = 5;
 const gridX = positionWorld.x.mul(gridScale).fract();
@@ -34,16 +33,9 @@ export const CeilingRenderer = ({ node }) => {
     useRegistry(node.id, 'ceiling', ref);
     const handlers = useNodeEvents(node, 'ceiling');
     const materials = useMemo(() => {
-        const mat = node.material;
-        if (mat) {
-            const props = mat.properties;
-            const color = props?.color || '#999999';
-            return createCeilingMaterials(color);
-        }
-        return {
-            topMaterial: createCeilingMaterials().topMaterial,
-            bottomMaterial: DEFAULT_CEILING_MATERIAL,
-        };
+        const props = resolveMaterial(node.material);
+        const color = props.color || '#999999';
+        return createCeilingMaterials(color);
     }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
     return (_jsxs("mesh", { material: materials.bottomMaterial, ref: ref, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("mesh", { material: materials.topMaterial, name: "ceiling-grid", ...handlers, scale: 0, visible: false, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }), node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId)))] }));
 };

package/dist/components/renderers/item/item-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/item/item-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,QAAQ,EAKd,MAAM,kBAAkB,CAAA;AAoDzB,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAiBxD,CAAA"}
+{"version":3,"file":"item-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/item/item-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EAKd,MAAM,kBAAkB,CAAA;AAkCzB,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAiBxD,CAAA"}

package/dist/components/renderers/item/item-renderer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useInteractive, useRegistry, useScene, } from '@pascal-app/core';
+import { baseMaterial, glassMaterial, useInteractive, useRegistry, useScene, } from '@pascal-app/core';
 import { useAnimations } from '@react-three/drei';
 import { Clone } from '@react-three/drei/core/Clone';
 import { useGLTF } from '@react-three/drei/core/Gltf';
@@ -7,33 +7,17 @@ import { useFrame } from '@react-three/fiber';
 import { Suspense, useEffect, useMemo, useRef } from 'react';
 import { MathUtils } from 'three';
 import { positionLocal, smoothstep, time } from 'three/tsl';
-import { DoubleSide, MeshStandardNodeMaterial } from 'three/webgpu';
+import { MeshStandardNodeMaterial } from 'three/webgpu';
 import { useNodeEvents } from '../../../hooks/use-node-events';
 import { resolveCdnUrl } from '../../../lib/asset-url';
 import { useItemLightPool } from '../../../store/use-item-light-pool';
 import { ErrorBoundary } from '../../error-boundary';
 import { NodeRenderer } from '../node-renderer';
-// Shared materials to avoid creating new instances for every mesh
-const defaultMaterial = new MeshStandardNodeMaterial({
-    color: 0xff_ff_ff,
-    roughness: 1,
-    metalness: 0,
-});
-const glassMaterial = new MeshStandardNodeMaterial({
-    name: 'glass',
-    color: 'lightgray',
-    roughness: 0.8,
-    metalness: 0,
-    transparent: true,
-    opacity: 0.35,
-    side: DoubleSide,
-    depthWrite: false,
-});
 const getMaterialForOriginal = (original) => {
     if (original.name.toLowerCase() === 'glass') {
         return glassMaterial;
     }
-    return defaultMaterial;
+    return baseMaterial;
 };
 const BrokenItemFallback = ({ node }) => {
     const handlers = useNodeEvents(node, 'item');
@@ -93,6 +77,17 @@ const ModelRenderer = ({ node }) => {
                 if (Array.isArray(mesh.material)) {
                     mesh.material = mesh.material.map((mat) => getMaterialForOriginal(mat));
                     hasGlass = mesh.material.some((mat) => mat.name === 'glass');
+                    // Fix geometry groups that reference materialIndex beyond the material
+                    // array length — this causes three-mesh-bvh to crash with
+                    // "Cannot read properties of undefined (reading 'side')"
+                    const matCount = mesh.material.length;
+                    if (mesh.geometry.groups.length > 0) {
+                        for (const group of mesh.geometry.groups) {
+                            if (group.materialIndex !== undefined && group.materialIndex >= matCount) {
+                                group.materialIndex = 0;
+                            }
+                        }
+                    }
                 }
                 else {
                     mesh.material = getMaterialForOriginal(mesh.material);

package/dist/components/renderers/node-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/renderers/node-renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,OAAO,EAAY,MAAM,kBAAkB,CAAA;AAgBzD,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,mDAuBjE,CAAA"}
+{"version":3,"file":"node-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/renderers/node-renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,OAAO,EAAY,MAAM,kBAAkB,CAAA;AAkBzD,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,mDAyBjE,CAAA"}

package/dist/components/renderers/node-renderer.js

@@ -12,6 +12,8 @@ import { RoofSegmentRenderer } from './roof-segment/roof-segment-renderer';
 import { ScanRenderer } from './scan/scan-renderer';
 import { SiteRenderer } from './site/site-renderer';
 import { SlabRenderer } from './slab/slab-renderer';
+import { StairRenderer } from './stair/stair-renderer';
+import { StairSegmentRenderer } from './stair-segment/stair-segment-renderer';
 import { WallRenderer } from './wall/wall-renderer';
 import { WindowRenderer } from './window/window-renderer';
 import { ZoneRenderer } from './zone/zone-renderer';
@@ -19,5 +21,5 @@ export const NodeRenderer = ({ nodeId }) => {
     const node = useScene((state) => state.nodes[nodeId]);
     if (!node)
         return null;
-    return (_jsxs(_Fragment, { children: [node.type === 'site' && _jsx(SiteRenderer, { node: node }), node.type === 'building' && _jsx(BuildingRenderer, { node: node }), node.type === 'ceiling' && _jsx(CeilingRenderer, { node: node }), node.type === 'level' && _jsx(LevelRenderer, { node: node }), node.type === 'item' && _jsx(ItemRenderer, { node: node }), node.type === 'slab' && _jsx(SlabRenderer, { node: node }), node.type === 'wall' && _jsx(WallRenderer, { node: node }), node.type === 'door' && _jsx(DoorRenderer, { node: node }), node.type === 'window' && _jsx(WindowRenderer, { node: node }), node.type === 'zone' && _jsx(ZoneRenderer, { node: node }), node.type === 'roof' && _jsx(RoofRenderer, { node: node }), node.type === 'roof-segment' && _jsx(RoofSegmentRenderer, { node: node }), node.type === 'scan' && _jsx(ScanRenderer, { node: node }), node.type === 'guide' && _jsx(GuideRenderer, { node: node })] }));
+    return (_jsxs(_Fragment, { children: [node.type === 'site' && _jsx(SiteRenderer, { node: node }), node.type === 'building' && _jsx(BuildingRenderer, { node: node }), node.type === 'ceiling' && _jsx(CeilingRenderer, { node: node }), node.type === 'level' && _jsx(LevelRenderer, { node: node }), node.type === 'item' && _jsx(ItemRenderer, { node: node }), node.type === 'slab' && _jsx(SlabRenderer, { node: node }), node.type === 'wall' && _jsx(WallRenderer, { node: node }), node.type === 'door' && _jsx(DoorRenderer, { node: node }), node.type === 'window' && _jsx(WindowRenderer, { node: node }), node.type === 'zone' && _jsx(ZoneRenderer, { node: node }), node.type === 'roof' && _jsx(RoofRenderer, { node: node }), node.type === 'roof-segment' && _jsx(RoofSegmentRenderer, { node: node }), node.type === 'stair' && _jsx(StairRenderer, { node: node }), node.type === 'stair-segment' && _jsx(StairSegmentRenderer, { node: node }), node.type === 'scan' && _jsx(ScanRenderer, { node: node }), node.type === 'guide' && _jsx(GuideRenderer, { node: node })] }));
 };

package/dist/components/renderers/site/site-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/site/site-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAe,MAAM,kBAAkB,CAAA;AA+B7D,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,mDA2DxD,CAAA"}
+{"version":3,"file":"site-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/site/site-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAwC,MAAM,kBAAkB,CAAA;AAmCtF,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,mDAgHxD,CAAA"}

package/dist/components/renderers/site/site-renderer.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRegistry } from '@pascal-app/core';
+import { useRegistry, useScene } from '@pascal-app/core';
+import polygonClipping from 'polygon-clipping';
 import { useMemo, useRef } from 'react';
-import { BufferGeometry, Float32BufferAttribute, Shape } from 'three';
+import { BufferGeometry, Float32BufferAttribute, Path, Shape } from 'three';
 import { useNodeEvents } from '../../../hooks/use-node-events';
+import useViewer from '../../../store/use-viewer';
 import { NodeRenderer } from '../node-renderer';
 const Y_OFFSET = 0.01;
 /**
@@ -26,22 +28,64 @@ const createBoundaryLineGeometry = (points) => {
 export const SiteRenderer = ({ node }) => {
     const ref = useRef(null);
     useRegistry(node.id, 'site', ref);
-    // Create floor shape from polygon points
-    const floorShape = useMemo(() => {
+    const theme = useViewer((state) => state.theme);
+    const bgColor = theme === 'dark' ? '#1f2433' : '#fafafa';
+    // Cache slab polygon references to keep the selector stable across unrelated store updates
+    const slabPolygonsCache = useRef([]);
+    const slabPolygons = useScene((state) => {
+        const nodeList = Object.values(state.nodes);
+        const levelIndexById = new Map();
+        let lowestLevelIndex = Number.POSITIVE_INFINITY;
+        nodeList.forEach((n) => {
+            if (n.type !== 'level')
+                return;
+            levelIndexById.set(n.id, n.level);
+            lowestLevelIndex = Math.min(lowestLevelIndex, n.level);
+        });
+        const next = nodeList
+            .filter((n) => n.type === 'slab' && n.visible && n.polygon.length >= 3)
+            .filter((n) => {
+            if (!Number.isFinite(lowestLevelIndex))
+                return true;
+            const parentLevel = n.parentId ? levelIndexById.get(n.parentId) : undefined;
+            return parentLevel === lowestLevelIndex;
+        })
+            .map((n) => n.polygon);
+        const prev = slabPolygonsCache.current;
+        if (next.length === prev.length && next.every((p, i) => p === prev[i]))
+            return prev;
+        slabPolygonsCache.current = next;
+        return next;
+    });
+    // Ground shape: site polygon with slab footprints punched as holes
+    const groundShape = useMemo(() => {
         if (!node?.polygon?.points || node.polygon.points.length < 3)
             return null;
+        const pts = node.polygon.points;
         const shape = new Shape();
-        const firstPt = node.polygon.points[0];
-        // Shape is in X-Y plane, we rotate it to X-Z plane
-        // Negate Y (which becomes Z) to get correct orientation
-        shape.moveTo(firstPt[0], -firstPt[1]);
-        for (let i = 1; i < node.polygon.points.length; i++) {
-            const pt = node.polygon.points[i];
-            shape.lineTo(pt[0], -pt[1]);
-        }
+        shape.moveTo(pts[0][0], -pts[0][1]);
+        for (let i = 1; i < pts.length; i++)
+            shape.lineTo(pts[i][0], -pts[i][1]);
         shape.closePath();
+        if (slabPolygons.length > 0) {
+            const multiPolygons = slabPolygons.map((p) => [
+                p.map((pt) => [pt[0], -pt[1]]),
+            ]);
+            const unioned = polygonClipping.union(multiPolygons[0], ...multiPolygons.slice(1));
+            for (const geom of unioned) {
+                const ring = geom[0];
+                if (ring && ring.length > 0) {
+                    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]);
+                    hole.closePath();
+                    shape.holes.push(hole);
+                }
+            }
+        }
         return shape;
-    }, [node?.polygon?.points]);
+    }, [node?.polygon?.points, slabPolygons]);
     // Create boundary line geometry
     const lineGeometry = useMemo(() => {
         if (!node?.polygon?.points || node.polygon.points.length < 2)
@@ -49,8 +93,8 @@ export const SiteRenderer = ({ node }) => {
         return createBoundaryLineGeometry(node.polygon.points);
     }, [node?.polygon?.points]);
     const handlers = useNodeEvents(node, 'site');
-    if (!(node && floorShape && lineGeometry)) {
+    if (!(node && lineGeometry)) {
         return null;
     }
-    return (_jsxs("group", { ref: ref, ...handlers, children: [node.children.map((child) => (_jsx(NodeRenderer, { nodeId: typeof child === 'string' ? child : child.id }, typeof child === 'string' ? child : child.id))), _jsxs("mesh", { position: [0, Y_OFFSET - 0.005, 0], receiveShadow: true, rotation: [-Math.PI / 2, 0, 0], children: [_jsx("shapeGeometry", { args: [floorShape] }), _jsx("shadowMaterial", { opacity: 0.75, transparent: true })] }), _jsx("line", { frustumCulled: false, geometry: lineGeometry, renderOrder: 9, children: _jsx("lineBasicMaterial", { color: "#f59e0b", linewidth: 2, opacity: 0.6, transparent: true }) })] }));
+    return (_jsxs("group", { ref: ref, ...handlers, children: [node.children.map((child) => (_jsx(NodeRenderer, { nodeId: typeof child === 'string' ? child : child.id }, typeof child === 'string' ? child : child.id))), groundShape && (_jsxs("mesh", { position: [0, -0.05, 0], receiveShadow: true, rotation: [-Math.PI / 2, 0, 0], children: [_jsx("shapeGeometry", { args: [groundShape] }), _jsx("meshStandardMaterial", { color: bgColor, depthWrite: true, polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1 })] })), _jsx("line", { frustumCulled: false, geometry: lineGeometry, renderOrder: 9, children: _jsx("lineBasicMaterial", { color: "#f59e0b", linewidth: 2, opacity: 0.6, transparent: true }) })] }));
 };

package/dist/components/renderers/slab/slab-renderer.js

@@ -13,5 +13,5 @@ export const SlabRenderer = ({ node }) => {
             return DEFAULT_SLAB_MATERIAL;
         return createMaterial(mat);
     }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
-    return (_jsx("mesh", { castShadow: true, receiveShadow: true, ref: ref, ...handlers, visible: node.visible, material: material, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
+    return (_jsx("mesh", { castShadow: true, receiveShadow: true, ref: ref, ...handlers, material: material, visible: node.visible, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
 };

package/dist/components/renderers/stair/stair-renderer.d.ts

@@ -0,0 +1,5 @@
+import { type StairNode } from '@pascal-app/core';
+export declare const StairRenderer: ({ node }: {
+    node: StairNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stair-renderer.d.ts.map

package/dist/components/renderers/stair/stair-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stair-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/stair/stair-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAyB,MAAM,kBAAkB,CAAA;AAOxE,eAAO,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,4CAoC1D,CAAA"}

package/dist/components/renderers/stair/stair-renderer.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRegistry, useScene } from '@pascal-app/core';
+import { useLayoutEffect, useMemo, useRef } from 'react';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+import { createMaterial, DEFAULT_STAIR_MATERIAL } from '../../../lib/materials';
+import { NodeRenderer } from '../node-renderer';
+export const StairRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, 'stair', ref);
+    useLayoutEffect(() => {
+        useScene.getState().markDirty(node.id);
+    }, [node.id]);
+    const handlers = useNodeEvents(node, 'stair');
+    const material = useMemo(() => {
+        const mat = node.material;
+        if (!mat)
+            return DEFAULT_STAIR_MATERIAL;
+        return createMaterial(mat);
+    }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
+    return (_jsxs("group", { "position-x": node.position[0], "position-z": node.position[2], ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers, children: [_jsx("mesh", { castShadow: true, material: material, name: "merged-stair", receiveShadow: true, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }), _jsx("group", { name: "segments-wrapper", visible: false, children: (node.children ?? []).map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))) })] }));
+};

package/dist/components/renderers/stair-segment/stair-segment-renderer.d.ts

@@ -0,0 +1,5 @@
+import { type StairSegmentNode } from '@pascal-app/core';
+export declare const StairSegmentRenderer: ({ node }: {
+    node: StairSegmentNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stair-segment-renderer.d.ts.map

package/dist/components/renderers/stair-segment/stair-segment-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stair-segment-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/stair-segment/stair-segment-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAyB,MAAM,kBAAkB,CAAA;AAM/E,eAAO,MAAM,oBAAoB,GAAI,UAAU;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,4CA8BxE,CAAA"}

package/dist/components/renderers/stair-segment/stair-segment-renderer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRegistry, useScene } from '@pascal-app/core';
+import { useLayoutEffect, useMemo, useRef } from 'react';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+import { createMaterial, DEFAULT_STAIR_MATERIAL } from '../../../lib/materials';
+export const StairSegmentRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, 'stair-segment', ref);
+    useLayoutEffect(() => {
+        useScene.getState().markDirty(node.id);
+    }, [node.id]);
+    const handlers = useNodeEvents(node, 'stair-segment');
+    const material = useMemo(() => {
+        const mat = node.material;
+        if (!mat)
+            return DEFAULT_STAIR_MATERIAL;
+        return createMaterial(mat);
+    }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
+    return (_jsx("mesh", { material: material, position: node.position, ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
+};

package/dist/components/renderers/wall/wall-renderer.js

@@ -17,5 +17,5 @@ export const WallRenderer = ({ node }) => {
             return DEFAULT_WALL_MATERIAL;
         return createMaterial(mat);
     }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
-    return (_jsxs("mesh", { castShadow: true, receiveShadow: true, ref: ref, visible: node.visible, material: material, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("mesh", { name: "collision-mesh", visible: false, ...handlers, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }), node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId)))] }));
+    return (_jsxs("mesh", { castShadow: true, material: material, receiveShadow: true, ref: ref, visible: node.visible, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("mesh", { name: "collision-mesh", visible: false, ...handlers, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }), node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId)))] }));
 };

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":"AAYA,OAAO,EAAkB,KAAK,kBAAkB,EAAsB,MAAM,oBAAoB,CAAA;AAEhG,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AA0CrC,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,CA6DjC,CAAA;AASD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,KAAK,kBAAkB,EAAsB,MAAM,oBAAoB,CAAA;AAEhG,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AA0CrC,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,CA8DjC,CAAA;AASD,eAAe,MAAM,CAAA"}

package/dist/components/viewer/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CeilingSystem, DoorSystem, ItemSystem, RoofSystem, SlabSystem, WallSystem, WindowSystem, } from '@pascal-app/core';
+import { CeilingSystem, DoorSystem, ItemSystem, RoofSystem, SlabSystem, StairSystem, WallSystem, WindowSystem, } from '@pascal-app/core';
 import { Bvh } from '@react-three/drei';
 import { Canvas, extend, useFrame, useThree } from '@react-three/fiber';
 import { useEffect, useMemo, useRef } from 'react';
@@ -74,7 +74,7 @@ const Viewer = ({ children, selectionManager = 'default', perf = false, }) => {
         }, shadows: {
             type: THREE.PCFShadowMap,
             enabled: true,
-        }, children: [_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] }));
+        }, children: [_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(StairSystem, {}), _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 }) => {

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":"AA4BA,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAA;AAQD,QAAA,MAAM,oBAAoB,YAkRzB,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"post-processing.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/post-processing.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAA;AAQD,QAAA,MAAM,oBAAoB,YAoQzB,CAAA;AAED,eAAe,oBAAoB,CAAA"}

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

@@ -1,12 +1,12 @@
 import { useFrame, useThree } from '@react-three/fiber';
 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 { 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, } from 'three/tsl';
 import { RenderPipeline } from 'three/webgpu';
 import { SCENE_LAYER, ZONE_LAYER } from '../../lib/layers';
+import { mergedOutline } from '../../lib/merged-outline-node';
 import useViewer from '../../store/use-viewer';
 // SSGI Parameters - adjust these to fine-tune global illumination and ambient occlusion
 export const SSGI_PARAMS = {
@@ -45,6 +45,7 @@ const PostProcessingPasses = () => {
         l.disable(SCENE_LAYER);
         return l;
     }, []);
+    const hoverHighlightMode = useViewer((s) => s.hoverHighlightMode);
     // 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)
@@ -144,49 +145,36 @@ const PostProcessingPasses = () => {
                 // Composite: scene * AO + diffuse * GI
                 sceneColor = 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();
-            const compositeWithOutlines = vec4(add(sceneColor.rgb, selectedOutlinePass.add(hoverOutlinePass)), sceneColor.a);
+            // Single merged outline node: one shared depth pass for both selected + hovered groups.
+            const outliner = useViewer.getState().outliner;
+            const outlineNode = mergedOutline(scene, camera, {
+                primaryObjects: outliner.selectedObjects,
+                secondaryObjects: outliner.hoveredObjects,
+                primaryEdgeThickness: uniform(1),
+                secondaryEdgeThickness: uniform(1.5),
+            });
+            // Selected: white visible, yellow hidden
+            const selectedVisibleColor = uniform(new Color(0xff_ff_ff));
+            const selectedHiddenColor = uniform(new Color(0xf3_ff_47));
+            const selectedStrength = uniform(3);
+            const selectedOutline = outlineNode.primaryVisibleEdge
+                .mul(selectedVisibleColor)
+                .add(outlineNode.primaryHiddenEdge.mul(selectedHiddenColor))
+                .mul(selectedStrength);
+            // Hovered: blue visible, yellow hidden, pulsing
+            const hoverVisibleColor = uniform(new Color(hoverHighlightMode === 'delete' ? 0xef_44_44 : 0x00_aa_ff));
+            const hoverHiddenColor = uniform(new Color(hoverHighlightMode === 'delete' ? 0x99_1b_1b : 0xf3_ff_47));
+            const hoverStrength = uniform(hoverHighlightMode === 'delete' ? 6 : 5);
+            const pulsePeriod = uniform(3);
+            const osc = hoverHighlightMode === 'delete'
+                ? float(1)
+                : oscSine(time.div(pulsePeriod).mul(2)).mul(0.5).add(0.5); // [ 0.5, 1.0 ]
+            const hoverOutline = outlineNode.secondaryVisibleEdge
+                .mul(hoverVisibleColor)
+                .add(outlineNode.secondaryHiddenEdge.mul(hoverHiddenColor))
+                .mul(hoverStrength)
+                .mul(osc);
+            const compositeWithOutlines = vec4(add(sceneColor.rgb, selectedOutline.add(hoverOutline)), sceneColor.a);
             const finalOutput = vec4(mix(bgUniform.current, compositeWithOutlines.rgb, contentAlpha), float(1));
             const renderPipeline = new RenderPipeline(renderer);
             renderPipeline.outputNode = finalOutput;
@@ -206,7 +194,7 @@ const PostProcessingPasses = () => {
             }
             renderPipelineRef.current = null;
         };
-    }, [renderer, scene, camera, isInitialized, zoneLayers]);
+    }, [renderer, scene, camera, hoverHighlightMode, 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);

package/dist/components/viewer/walkthrough-controls.d.ts

@@ -0,0 +1,2 @@
+export declare const WalkthroughControls: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=walkthrough-controls.d.ts.map

package/dist/components/viewer/walkthrough-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"walkthrough-controls.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/walkthrough-controls.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,mBAAmB,sDAwH/B,CAAA"}

package/dist/components/viewer/walkthrough-controls.js

@@ -0,0 +1,131 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PointerLockControls } from '@react-three/drei';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useCallback, useEffect, useRef } from 'react';
+import { Vector3 } from 'three';
+import useViewer from '../../store/use-viewer';
+const MOVE_SPEED = 5;
+const EYE_HEIGHT = 1.6;
+const _direction = new Vector3();
+const _forward = new Vector3();
+const _right = new Vector3();
+export const WalkthroughControls = () => {
+    const controlsRef = useRef(null);
+    const walkthroughMode = useViewer((s) => s.walkthroughMode);
+    const keys = useRef({ w: false, a: false, s: false, d: false });
+    const camera = useThree((s) => s.camera);
+    // Set initial eye height
+    useEffect(() => {
+        if (walkthroughMode) {
+            camera.position.y = EYE_HEIGHT;
+        }
+    }, [walkthroughMode, camera]);
+    // Keyboard handlers
+    useEffect(() => {
+        if (!walkthroughMode)
+            return;
+        const onKeyDown = (e) => {
+            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
+                return;
+            const key = e.key.toLowerCase();
+            // ESC exits walkthrough mode completely
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                useViewer.getState().setWalkthroughMode(false);
+                return;
+            }
+            if (key === 'w' || key === 'arrowup')
+                keys.current.w = true;
+            if (key === 'a' || key === 'arrowleft')
+                keys.current.a = true;
+            if (key === 's' || key === 'arrowdown')
+                keys.current.s = true;
+            if (key === 'd' || key === 'arrowright')
+                keys.current.d = true;
+        };
+        const onKeyUp = (e) => {
+            const key = e.key.toLowerCase();
+            if (key === 'w' || key === 'arrowup')
+                keys.current.w = false;
+            if (key === 'a' || key === 'arrowleft')
+                keys.current.a = false;
+            if (key === 's' || key === 'arrowdown')
+                keys.current.s = false;
+            if (key === 'd' || key === 'arrowright')
+                keys.current.d = false;
+        };
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
+            // Reset keys on cleanup
+            keys.current = { w: false, a: false, s: false, d: false };
+        };
+    }, [walkthroughMode]);
+    // Release pointer lock when walkthrough mode is turned off
+    useEffect(() => {
+        if (!walkthroughMode && document.pointerLockElement) {
+            document.exitPointerLock();
+        }
+    }, [walkthroughMode]);
+    // Movement loop
+    useFrame((_, delta) => {
+        if (!(walkthroughMode && controlsRef.current))
+            return;
+        _direction.set(0, 0, 0);
+        // Get camera forward and right vectors (XZ plane only)
+        camera.getWorldDirection(_forward);
+        _forward.y = 0;
+        _forward.normalize();
+        _right.crossVectors(_forward, camera.up).normalize();
+        if (keys.current.w)
+            _direction.add(_forward);
+        if (keys.current.s)
+            _direction.sub(_forward);
+        if (keys.current.d)
+            _direction.add(_right);
+        if (keys.current.a)
+            _direction.sub(_right);
+        if (_direction.lengthSq() > 0) {
+            _direction.normalize().multiplyScalar(MOVE_SPEED * delta);
+            camera.position.add(_direction);
+            // Keep eye height constant
+            camera.position.y = EYE_HEIGHT;
+        }
+    });
+    const handleClick = useCallback(() => {
+        if (walkthroughMode && controlsRef.current) {
+            // Feature detection: some browsers (Facebook/Instagram in-app, older Safari)
+            // don't support pointer lock on the canvas element
+            if (typeof controlsRef.current.lock === 'function') {
+                try {
+                    controlsRef.current.lock();
+                }
+                catch {
+                    // Silently ignore — pointer lock unavailable in this browser context
+                }
+            }
+        }
+    }, [walkthroughMode]);
+    // Click to lock
+    useEffect(() => {
+        if (!walkthroughMode)
+            return;
+        const canvas = document.querySelector('canvas');
+        if (!canvas)
+            return;
+        canvas.addEventListener('click', handleClick);
+        return () => canvas.removeEventListener('click', handleClick);
+    }, [walkthroughMode, handleClick]);
+    if (!walkthroughMode)
+        return null;
+    // Skip PointerLockControls on browsers that don't support pointer lock
+    // (Facebook/Instagram in-app browsers, some iOS WebViews)
+    if (typeof document !== 'undefined' && !('requestPointerLock' in HTMLElement.prototype)) {
+        return null;
+    }
+    return _jsx(PointerLockControls, { ref: controlsRef });
+};

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;AAU3C,QAAA,MAAM,WAAW,GAAI,MAAM,MAAM,KAAG,UAAU,CAAC,OAAO,OAAO,CA2B5D,CAAA;AAED,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"}