@pascal-app/viewer 0.1.10 → 0.1.12

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;AAoBhE,eAAO,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,4CAe9D,CAAA"}
+{"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;AAuChE,eAAO,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,4CAe9D,CAAA"}

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

@@ -1,21 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRegistry } from '@pascal-app/core';
 import { useRef } from 'react';
-import { faceDirection, float, mix } from 'three/tsl';
-import { DoubleSide, MeshStandardNodeMaterial } from 'three/webgpu';
+import { faceDirection, float, mix, positionWorld, smoothstep } from 'three/tsl';
+import { DoubleSide, MeshBasicNodeMaterial } from 'three/webgpu';
 import { useNodeEvents } from '../../../hooks/use-node-events';
 import { NodeRenderer } from '../node-renderer';
 // TSL material that renders differently based on face direction:
 // - Back face (looking up at ceiling from below): solid
 // - Front face (looking down at ceiling from above): 30% opacity
-const ceilingMaterial = new MeshStandardNodeMaterial({
-    color: 0xffffff,
+const ceilingMaterial = new MeshBasicNodeMaterial({
+    color: 0x999999,
     side: DoubleSide,
     transparent: true,
+    depthWrite: false,
 });
+// Create grid pattern based on local position
+const gridScale = 5; // Grid cells per meter (1 = 1m grid)
+const gridX = positionWorld.x.mul(gridScale).fract();
+const gridY = positionWorld.z.mul(gridScale).fract();
+// Create grid lines - they are at 0 and 1
+const lineWidth = 0.05; // Width of grid lines (0-1 range within cell)
+// Create visible lines at edges (near 0 and near 1)
+const lineX = smoothstep(lineWidth, 0, gridX).add(smoothstep(1.0 - lineWidth, 1.0, gridX));
+const lineY = smoothstep(lineWidth, 0, gridY).add(smoothstep(1.0 - lineWidth, 1.0, gridY));
+// Combine: if either X or Y is a line, show the line
+const gridPattern = lineX.max(lineY);
+// Grid lines at 0.8 opacity, spaces at 0.1 opacity
+const gridOpacity = mix(float(0.1), float(0.8), gridPattern);
 // faceDirection is 1.0 for front face, -1.0 for back face
-// We want: front face (top, looking down) = 0.3 opacity, back face (bottom, looking up) = 1.0 opacity
-ceilingMaterial.opacityNode = mix(float(1.0), float(0.3), faceDirection.greaterThan(0.0));
+// Front face (top, looking down): grid pattern, Back face (bottom, looking up): solid
+ceilingMaterial.opacityNode = mix(float(1.0), gridOpacity, faceDirection.greaterThan(0.0));
 export const CeilingRenderer = ({ node }) => {
     const ref = useRef(null);
     useRegistry(node.id, 'ceiling', ref);

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,EAAkB,KAAK,QAAQ,EAAyB,MAAM,kBAAkB,CAAA;AAkCvF,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAYxD,CAAA"}
+{"version":3,"file":"item-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/item/item-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,QAAQ,EAAyB,MAAM,kBAAkB,CAAA;AAmCvF,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAYxD,CAAA"}

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

@@ -3,9 +3,10 @@ import { useRegistry, useScene } from '@pascal-app/core';
 import { Clone } from '@react-three/drei/core/Clone';
 import { useGLTF } from '@react-three/drei/core/Gltf';
 import { Suspense, useEffect, useMemo, useRef } from 'react';
+import { positionLocal, smoothstep, time } from 'three/tsl';
 import { DoubleSide, MeshStandardNodeMaterial } from 'three/webgpu';
-import { resolveCdnUrl } from '../../../lib/asset-url';
 import { useNodeEvents } from '../../../hooks/use-node-events';
+import { resolveCdnUrl } from '../../../lib/asset-url';
 // Shared materials to avoid creating new instances for every mesh
 const defaultMaterial = new MeshStandardNodeMaterial({
     color: 0xffffff,
@@ -31,7 +32,19 @@ const getMaterialForOriginal = (original) => {
 export const ItemRenderer = ({ node }) => {
     const ref = useRef(null);
     useRegistry(node.id, node.type, ref);
-    return (_jsx("group", { position: node.position, rotation: node.rotation, ref: ref, visible: node.visible, children: _jsx(Suspense, { children: _jsx(ModelRenderer, { node: node }) }) }));
+    return (_jsx("group", { position: node.position, rotation: node.rotation, ref: ref, visible: node.visible, children: _jsx(Suspense, { fallback: _jsx(PreviewModel, { node: node }), children: _jsx(ModelRenderer, { node: node }) }) }));
+};
+const previewMaterial = new MeshStandardNodeMaterial({
+    color: '#cccccc',
+    roughness: 1,
+    metalness: 0,
+    depthTest: false,
+});
+const previewOpacity = smoothstep(0.42, 0.55, positionLocal.y.add(time.mul(-0.2)).mul(10).fract());
+previewMaterial.opacityNode = previewOpacity;
+previewMaterial.transparent = true;
+const PreviewModel = ({ node }) => {
+    return (_jsx("mesh", { "position-y": node.asset.dimensions[1] / 2, material: previewMaterial, children: _jsx("boxGeometry", { args: [node.asset.dimensions[0], node.asset.dimensions[1], node.asset.dimensions[2]] }) }));
 };
 const ModelRenderer = ({ node }) => {
     const { scene, nodes } = useGLTF(resolveCdnUrl(node.asset.src) || '');

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;AAYzD,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,mDAmBjE,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;AAazD,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,mDAoBjE,CAAA"}

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

@@ -8,6 +8,7 @@ import { ItemRenderer } from './item/item-renderer';
 import { LevelRenderer } from './level/level-renderer';
 import { RoofRenderer } from './roof/roof-renderer';
 import { ScanRenderer } from './scan/scan-renderer';
+import { SiteRenderer } from './site/site-renderer';
 import { SlabRenderer } from './slab/slab-renderer';
 import { WallRenderer } from './wall/wall-renderer';
 import { ZoneRenderer } from './zone/zone-renderer';
@@ -15,5 +16,5 @@ export const NodeRenderer = ({ nodeId }) => {
     const node = useScene((state) => state.nodes[nodeId]);
     if (!node)
         return null;
-    return (_jsxs(_Fragment, { children: [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 === 'zone' && _jsx(ZoneRenderer, { node: node }), node.type === 'roof' && _jsx(RoofRenderer, { 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 === 'zone' && _jsx(ZoneRenderer, { node: node }), node.type === 'roof' && _jsx(RoofRenderer, { node: node }), node.type === 'scan' && _jsx(ScanRenderer, { node: node }), node.type === 'guide' && _jsx(GuideRenderer, { node: node })] }));
 };

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

@@ -19,10 +19,12 @@ const ScanModel = ({ url, opacity }) => {
             if (isTransparent) {
                 material.transparent = true;
                 material.opacity = normalizedOpacity;
+                material.depthWrite = false;
             }
             else {
                 material.transparent = false;
                 material.opacity = 1;
+                material.depthWrite = true;
             }
             material.needsUpdate = true;
         };

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

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

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

@@ -0,0 +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;AAiC7D,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,mDAmGxD,CAAA"}

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRegistry } from '@pascal-app/core';
+import { Html } from '@react-three/drei';
+import { useMemo, useRef } from 'react';
+import { BufferGeometry, DoubleSide, Float32BufferAttribute, Shape } from 'three';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+import { NodeRenderer } from '../node-renderer';
+const Y_OFFSET = 0.01;
+const LINE_HEIGHT = 0.5;
+/**
+ * Creates simple line geometry for site boundary
+ * Single horizontal line at ground level
+ */
+const createBoundaryLineGeometry = (points) => {
+    const geometry = new BufferGeometry();
+    if (points.length < 2)
+        return geometry;
+    const positions = [];
+    // Create a simple line loop at ground level
+    for (const [x, z] of points) {
+        positions.push(x, Y_OFFSET, z);
+    }
+    // Close the loop
+    positions.push(points[0][0], Y_OFFSET, points[0][1]);
+    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    return geometry;
+};
+export const SiteRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, 'site', ref);
+    // Create floor shape from polygon points
+    const floorShape = useMemo(() => {
+        if (!node?.polygon?.points || node.polygon.points.length < 3)
+            return null;
+        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.closePath();
+        return shape;
+    }, [node?.polygon?.points]);
+    // Create boundary line geometry
+    const lineGeometry = useMemo(() => {
+        if (!node?.polygon?.points || node.polygon.points.length < 2)
+            return null;
+        return createBoundaryLineGeometry(node.polygon.points);
+    }, [node?.polygon?.points]);
+    // Edge distances for labels
+    const edges = useMemo(() => {
+        const polygon = node?.polygon?.points ?? [];
+        if (polygon.length < 2)
+            return [];
+        return polygon.map(([x1, z1], i) => {
+            const [x2, z2] = polygon[(i + 1) % polygon.length];
+            const midX = (x1 + x2) / 2;
+            const midZ = (z1 + z2) / 2;
+            const dist = Math.sqrt((x2 - x1) ** 2 + (z2 - z1) ** 2);
+            return { midX, midZ, dist };
+        });
+    }, [node?.polygon?.points]);
+    const handlers = useNodeEvents(node, 'site');
+    if (!node || !floorShape || !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], rotation: [-Math.PI / 2, 0, 0], children: [_jsx("shapeGeometry", { args: [floorShape] }), _jsx("meshBasicMaterial", { color: "#f59e0b", transparent: true, opacity: 0.05, side: DoubleSide, depthWrite: false })] }), _jsx("line", { geometry: lineGeometry, frustumCulled: false, renderOrder: 9, children: _jsx("lineBasicMaterial", { color: "#f59e0b", linewidth: 2, transparent: true, opacity: 0.6 }) }), edges.map((edge, i) => (_jsx(Html, { center: true, position: [edge.midX, 0.5, edge.midZ], style: { pointerEvents: 'none', userSelect: 'none' }, zIndexRange: [10, 0], occlude: true, children: _jsxs("div", { className: "whitespace-nowrap rounded bg-black/75 px-1.5 py-0.5 font-mono text-white text-xs backdrop-blur-sm", children: [edge.dist.toFixed(2), "m"] }) }, `edge-${i}`)))] }));
+};

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

@@ -1 +1 @@
-{"version":3,"file":"zone-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/zone/zone-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAkG7D,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,mDAmGxD,CAAA"}
+{"version":3,"file":"zone-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/zone/zone-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAwG7D,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,mDAoGxD,CAAA"}

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

@@ -3,7 +3,7 @@ import { useRegistry } from '@pascal-app/core';
 import { Html } from '@react-three/drei';
 import { useMemo, useRef } from 'react';
 import { BufferGeometry, Color, DoubleSide, Float32BufferAttribute, Shape } from 'three';
-import { color, float, uv } from 'three/tsl';
+import { color, float, uniform, uv } from 'three/tsl';
 import { MeshBasicNodeMaterial } from 'three/webgpu';
 import { useNodeEvents } from '../../../hooks/use-node-events';
 const Y_OFFSET = 0.01;
@@ -16,15 +16,19 @@ const createWallGradientMaterial = (zoneColor) => {
     const baseColor = color(new Color(zoneColor));
     // Use UV y coordinate for vertical gradient (0 at bottom, 1 at top)
     const gradientT = uv().y;
+    const opacity = uniform(0);
     // Fade opacity from 0.6 at bottom to 0 at top
-    const opacity = float(0.6).mul(float(1).sub(gradientT));
+    const finalOpacity = float(0.6).mul(float(1).sub(gradientT)).mul(opacity);
     return new MeshBasicNodeMaterial({
         transparent: true,
         colorNode: baseColor,
-        opacityNode: opacity,
+        opacityNode: finalOpacity,
         side: DoubleSide,
         depthWrite: false,
         depthTest: false,
+        userData: {
+            uOpacity: opacity,
+        }
     });
 };
 /**
@@ -32,12 +36,15 @@ const createWallGradientMaterial = (zoneColor) => {
  */
 const createFloorMaterial = (zoneColor) => {
     const baseColor = color(new Color(zoneColor));
+    const opacity = uniform(0);
     return new MeshBasicNodeMaterial({
         transparent: true,
         colorNode: baseColor,
-        opacityNode: float(0.15),
+        opacityNode: float(0.25).mul(opacity),
         side: DoubleSide,
         depthWrite: false,
+        depthTest: false,
+        userData: { uOpacity: opacity }
     });
 };
 /**
@@ -142,7 +149,7 @@ export const ZoneRenderer = ({ node }) => {
     }
     return (_jsxs("group", { ref: ref, ...handlers, children: [_jsx(Html, { name: "label", position: [centroid[0], 1, centroid[1]], style: {
                     pointerEvents: 'none'
-                }, children: _jsx("div", { style: {
+                }, zIndexRange: [10, 0], children: _jsx("div", { style: {
                         transform: 'translate3d(-50%, -50%, 0)',
                         width: 'max-content',
                         color: 'white',
@@ -150,5 +157,5 @@ export const ZoneRenderer = ({ node }) => {
                         display: 'flex',
                         gap: '8px',
                         alignItems: 'center',
-                    }, children: node.name }) }), _jsx("mesh", { position: [0, Y_OFFSET, 0], rotation: [-Math.PI / 2, 0, 0], material: floorMaterial, children: _jsx("shapeGeometry", { args: [floorShape] }) }), _jsx("mesh", { geometry: wallGeometry, material: wallMaterial })] }));
+                    }, children: node.name }) }), _jsx("mesh", { position: [0, Y_OFFSET, 0], rotation: [-Math.PI / 2, 0, 0], material: floorMaterial, name: "floor", children: _jsx("shapeGeometry", { args: [floorShape] }) }), _jsx("mesh", { geometry: wallGeometry, material: wallMaterial, name: "walls" })] }));
 };

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;AAWrC,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,CA4CjC,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"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,CA8CjC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/components/viewer/index.js

@@ -8,6 +8,7 @@ import { GuideSystem } from '../../systems/guide/guide-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 { Lights } from './lights';
 import PostProcessing from './post-processing';
@@ -15,7 +16,7 @@ import { SelectionManager } from './selection-manager';
 import { ViewerCamera } from './viewer-camera';
 extend(THREE);
 const Viewer = ({ children, selectionManager = 'default' }) => {
-    return (_jsxs(Canvas, { className: 'bg-[#fafafa]', gl: async (props) => {
+    return (_jsxs(Canvas, { dpr: [1, 1.5], className: 'bg-[#fafafa]', gl: async (props) => {
             const renderer = new THREE.WebGPURenderer(props);
             await renderer.init();
             renderer.toneMapping = THREE.ACESFilmicToneMapping;
@@ -24,6 +25,6 @@ const Viewer = ({ children, selectionManager = 'default' }) => {
         }, 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(PostProcessing, {}), selectionManager === 'default' && _jsx(SelectionManager, {}), children] }));
+        }, 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(ZoneSystem, {}), _jsx(PostProcessing, {}), selectionManager === 'default' && _jsx(SelectionManager, {}), children] }));
 };
 export default Viewer;

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,YA8IzB,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"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"}

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

@@ -10,10 +10,10 @@ 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: 2,
+    sliceCount: 1,
     stepCount: 8,
-    radius: 2,
-    expFactor: 2,
+    radius: 1,
+    expFactor: 1.5,
     thickness: 0.5,
     backfaceLighting: 0.5,
     aoIntensity: 1.5,

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

@@ -1,6 +1,10 @@
-import { type BuildingEvent, type BuildingNode, type CeilingEvent, type CeilingNode, type ItemEvent, type ItemNode, type LevelEvent, type LevelNode, type RoofEvent, type RoofNode, 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 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 { ThreeEvent } from '@react-three/fiber';
 type NodeConfig = {
+    site: {
+        node: SiteNode;
+        event: SiteEvent;
+    };
     item: {
         node: ItemNode;
         event: ItemEvent;

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,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,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,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"}

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Viewer } from './components/viewer';
-export { useGridEvents } from './hooks/use-grid-events';
 export { default as useViewer } from './store/use-viewer';
 export { ASSETS_CDN_URL, resolveAssetUrl, resolveCdnUrl } from './lib/asset-url';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -1,4 +1,3 @@
 export { default as Viewer } from './components/viewer';
-export { useGridEvents } from './hooks/use-grid-events';
 export { default as useViewer } from './store/use-viewer';
 export { ASSETS_CDN_URL, resolveAssetUrl, resolveCdnUrl } from './lib/asset-url';

package/dist/systems/zone/zone-system.d.ts

@@ -0,0 +1,2 @@
+export declare const ZoneSystem: () => null;
+//# sourceMappingURL=zone-system.d.ts.map

package/dist/systems/zone/zone-system.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zone-system.d.ts","sourceRoot":"","sources":["../../../src/systems/zone/zone-system.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,YA4DtB,CAAA"}

package/dist/systems/zone/zone-system.js

@@ -0,0 +1,57 @@
+import { sceneRegistry, useScene } from '@pascal-app/core';
+import { useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+import { MathUtils } from 'three';
+import useViewer from '../../store/use-viewer';
+const TRANSITION_DURATION = 400; // ms
+export const ZoneSystem = () => {
+    const lastHighlightedZoneRef = useRef(null);
+    const lastChangeTimeRef = useRef(0);
+    const isTransitioningRef = useRef(false);
+    useFrame(({ clock }, delta) => {
+        const hoveredId = useViewer.getState().hoveredId;
+        let highlightedZone = null;
+        if (hoveredId) {
+            const hoveredNode = useScene.getState().nodes[hoveredId];
+            if (hoveredNode?.type === 'zone') {
+                highlightedZone = hoveredId;
+            }
+        }
+        // Detect zone change
+        if (highlightedZone !== lastHighlightedZoneRef.current) {
+            lastHighlightedZoneRef.current = highlightedZone;
+            lastChangeTimeRef.current = clock.elapsedTime * 1000;
+            isTransitioningRef.current = true;
+        }
+        // Skip frame if not transitioning
+        if (!isTransitioningRef.current)
+            return;
+        const elapsed = clock.elapsedTime * 1000 - lastChangeTimeRef.current;
+        // Stop transitioning after duration
+        if (elapsed >= TRANSITION_DURATION) {
+            isTransitioningRef.current = false;
+        }
+        // Lerp speed: complete transition in ~400ms
+        const lerpSpeed = 10 * delta;
+        sceneRegistry.byType.zone.forEach((zoneId) => {
+            const zone = sceneRegistry.nodes.get(zoneId);
+            if (!zone)
+                return;
+            const isHighlighted = zoneId === highlightedZone;
+            const targetOpacity = isHighlighted ? 1 : 0;
+            const walls = zone.getObjectByName('walls');
+            if (walls) {
+                const material = walls.material;
+                const currentOpacity = material.userData.uOpacity.value;
+                material.userData.uOpacity.value = MathUtils.lerp(currentOpacity, targetOpacity, lerpSpeed);
+            }
+            const floor = zone.getObjectByName('floor');
+            if (floor) {
+                const material = floor.material;
+                const currentOpacity = material.userData.uOpacity.value;
+                material.userData.uOpacity.value = MathUtils.lerp(currentOpacity, targetOpacity, lerpSpeed);
+            }
+        });
+    });
+    return null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/viewer",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "3D viewer component for Pascal building editor",
   "type": "module",
   "main": "./dist/index.js",