@pascal-app/viewer 0.1.11 → 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/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;AAgC7D,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,mDAsExD,CAAA"}
+{"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

@@ -1,5 +1,6 @@
 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';
@@ -49,9 +50,22 @@ export const SiteRenderer = ({ node }) => {
             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 }) })] }));
+    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/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.11",
+  "version": "0.1.12",
   "description": "3D viewer component for Pascal building editor",
   "type": "module",
   "main": "./dist/index.js",