@pascal-app/viewer 0.1.13 → 0.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"level-system.d.ts","sourceRoot":"","sources":["../../../src/systems/level/level-system.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,YAkBvB,CAAA"}
+{"version":3,"file":"level-system.d.ts","sourceRoot":"","sources":["../../../src/systems/level/level-system.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,YAsCvB,CAAA"}

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

@@ -2,22 +2,33 @@ import { sceneRegistry, useScene } from '@pascal-app/core';
 import { useFrame } from '@react-three/fiber';
 import { lerp } from 'three/src/math/MathUtils.js';
 import useViewer from '../../store/use-viewer';
-const LEVEL_HEIGHT = 2.5;
+import { getLevelHeight } from './level-utils';
 const EXPLODED_GAP = 5;
 export const LevelSystem = () => {
     useFrame((_, delta) => {
+        const nodes = useScene.getState().nodes;
         const levelMode = useViewer.getState().levelMode;
         const selectedLevel = useViewer.getState().selection.levelId;
+        const entries = [];
         sceneRegistry.byType.level.forEach((levelId) => {
             const obj = sceneRegistry.nodes.get(levelId);
-            if (obj) {
-                const level = useScene.getState().nodes[levelId];
-                const targetY = (level.level || 0) *
-                    (LEVEL_HEIGHT + (levelMode === 'exploded' ? EXPLODED_GAP : 0));
-                obj.position.y = lerp(obj.position.y, targetY, delta * 3);
-                obj.visible = levelMode !== 'solo' || level?.id === selectedLevel || !selectedLevel;
+            const level = nodes[levelId];
+            if (obj && level) {
+                entries.push({ levelId, index: level.level ?? 0, obj });
             }
         });
-    });
+        entries.sort((a, b) => a.index - b.index);
+        // Walk sorted levels, accumulating base Y offsets
+        let cumulativeY = 0;
+        for (const { levelId, index, obj } of entries) {
+            const level = nodes[levelId];
+            const baseY = cumulativeY;
+            const explodedExtra = levelMode === 'exploded' ? index * EXPLODED_GAP : 0;
+            const targetY = baseY + explodedExtra;
+            obj.position.y = lerp(obj.position.y, targetY, delta * 12); // Smoothly animate to new Y position
+            obj.visible = levelMode !== 'solo' || level?.id === selectedLevel || !selectedLevel;
+            cumulativeY += getLevelHeight(levelId, nodes);
+        }
+    }, 5); // Using a lower priority so it runs after transforms from other systems have settled
     return null;
 };

package/dist/systems/level/level-utils.d.ts

@@ -0,0 +1,17 @@
+import { useScene } from '@pascal-app/core';
+export declare const DEFAULT_LEVEL_HEIGHT = 2.5;
+export declare function getLevelHeight(levelId: string, nodes: ReturnType<typeof useScene.getState>['nodes']): number;
+/**
+ * Instantly snaps all level Objects3D to their true stacked Y positions
+ * (ignores levelMode — always uses stacked, no exploded gap).
+ *
+ * Returns a restore function that reverts each level's Y to what it was
+ * before the snap, so lerp animations in LevelSystem can continue undisturbed.
+ *
+ * Usage:
+ *   const restore = snapLevelsToTruePositions()
+ *   renderer.render(scene, camera)
+ *   restore()
+ */
+export declare function snapLevelsToTruePositions(): () => void;
+//# sourceMappingURL=level-utils.d.ts.map

package/dist/systems/level/level-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"level-utils.d.ts","sourceRoot":"","sources":["../../../src/systems/level/level-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,QAAQ,EAET,MAAM,kBAAkB,CAAA;AAEzB,eAAO,MAAM,oBAAoB,MAAM,CAAA;AAQvC,wBAAgB,cAAc,CAC5B,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,GACnD,MAAM,CA8BR;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,yBAAyB,IAAI,MAAM,IAAI,CAyCtD"}

package/dist/systems/level/level-utils.js

@@ -0,0 +1,82 @@
+import { sceneRegistry, useScene, } from '@pascal-app/core';
+export const DEFAULT_LEVEL_HEIGHT = 2.5;
+// Cache: levelId → computed height. Invalidated when the nodes reference changes.
+// Zustand produces a new `nodes` object on every mutation, so reference equality
+// is a zero-cost way to detect stale data without any subscription overhead.
+const heightCache = new Map();
+let lastNodesRef = null;
+export function getLevelHeight(levelId, nodes) {
+    if (nodes !== lastNodesRef) {
+        heightCache.clear();
+        lastNodesRef = nodes;
+    }
+    if (heightCache.has(levelId))
+        return heightCache.get(levelId);
+    const level = nodes[levelId];
+    if (!level)
+        return DEFAULT_LEVEL_HEIGHT;
+    let maxTop = 0;
+    for (const childId of level.children) {
+        const child = nodes[childId];
+        if (!child)
+            continue;
+        if (child.type === 'ceiling') {
+            const ch = child.height ?? DEFAULT_LEVEL_HEIGHT;
+            if (ch > maxTop)
+                maxTop = ch;
+        }
+        else if (child.type === 'wall') {
+            let meshY = sceneRegistry.nodes.get(childId)?.position.y ?? 0;
+            if (meshY < 0)
+                meshY = 0;
+            const top = meshY + (child.height ?? DEFAULT_LEVEL_HEIGHT);
+            if (top > maxTop)
+                maxTop = top;
+        }
+    }
+    const height = maxTop > 0 ? maxTop : DEFAULT_LEVEL_HEIGHT;
+    heightCache.set(levelId, height);
+    return height;
+}
+/**
+ * Instantly snaps all level Objects3D to their true stacked Y positions
+ * (ignores levelMode — always uses stacked, no exploded gap).
+ *
+ * Returns a restore function that reverts each level's Y to what it was
+ * before the snap, so lerp animations in LevelSystem can continue undisturbed.
+ *
+ * Usage:
+ *   const restore = snapLevelsToTruePositions()
+ *   renderer.render(scene, camera)
+ *   restore()
+ */
+export function snapLevelsToTruePositions() {
+    const nodes = useScene.getState().nodes;
+    const entries = [];
+    sceneRegistry.byType.level.forEach((levelId) => {
+        const obj = sceneRegistry.nodes.get(levelId);
+        const level = nodes[levelId];
+        if (obj && level) {
+            entries.push({ levelId, index: level.level ?? 0, obj });
+        }
+    });
+    entries.sort((a, b) => a.index - b.index);
+    // Snapshot current Y and visibility so we can restore them after the render
+    const snapshot = new Map(entries.map(({ levelId, obj }) => [levelId, { y: obj.position.y, visible: obj.visible }]));
+    // Snap to true stacked positions and make all levels visible
+    let cumulativeY = 0;
+    for (const { levelId, obj } of entries) {
+        obj.position.y = cumulativeY;
+        obj.visible = true;
+        cumulativeY += getLevelHeight(levelId, nodes);
+    }
+    return () => {
+        for (const { levelId, obj } of entries) {
+            const saved = snapshot.get(levelId);
+            if (saved !== undefined) {
+                obj.position.y = saved.y;
+                obj.visible = saved.visible;
+            }
+        }
+    };
+}

package/dist/systems/wall/wall-cutout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wall-cutout.d.ts","sourceRoot":"","sources":["../../../src/systems/wall/wall-cutout.tsx"],"names":[],"mappings":"AAgDA,eAAO,MAAM,UAAU,YAkEtB,CAAA"}
+{"version":3,"file":"wall-cutout.d.ts","sourceRoot":"","sources":["../../../src/systems/wall/wall-cutout.tsx"],"names":[],"mappings":"AAgDA,eAAO,MAAM,UAAU,YAgEtB,CAAA"}

package/dist/systems/wall/wall-cutout.js

@@ -85,11 +85,9 @@ export const WallCutout = () => {
                             hideWall = true;
                         }
                     }
-                    else {
+                    else if (wallNode.backSide === 'exterior' && wallNode.frontSide !== 'exterior') {
                         // Back side
-                        if (wallNode.backSide === 'exterior' && wallNode.frontSide !== 'exterior') {
-                            hideWall = true;
-                        }
+                        hideWall = true;
                     }
                 }
                 ;

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

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

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

@@ -4,21 +4,47 @@ import { useRef } from 'react';
 import { MathUtils } from 'three';
 import useViewer from '../../store/use-viewer';
 const TRANSITION_DURATION = 400; // ms
+const EXIT_DEBOUNCE_MS = 50; // ignore rapid exit→re-enter within this window
 export const ZoneSystem = () => {
     const lastHighlightedZoneRef = useRef(null);
     const lastChangeTimeRef = useRef(0);
     const isTransitioningRef = useRef(false);
+    // Debounce exit-to-null: track the raw pending value and when it last changed
+    const pendingZoneRef = useRef(null);
+    const pendingZoneSinceRef = useRef(0);
     useFrame(({ clock }, delta) => {
         const hoveredId = useViewer.getState().hoveredId;
-        let highlightedZone = null;
+        let rawZone = null;
         if (hoveredId) {
             const hoveredNode = useScene.getState().nodes[hoveredId];
             if (hoveredNode?.type === 'zone') {
-                highlightedZone = hoveredId;
+                rawZone = hoveredId;
             }
         }
-        // Detect zone change
+        // Update pending zone when the raw value changes
+        if (rawZone !== pendingZoneRef.current) {
+            pendingZoneRef.current = rawZone;
+            pendingZoneSinceRef.current = clock.elapsedTime * 1000;
+        }
+        // Apply non-null immediately; debounce null to filter out brief exits
+        const age = clock.elapsedTime * 1000 - pendingZoneSinceRef.current;
+        const highlightedZone = rawZone !== null ? rawZone : age >= EXIT_DEBOUNCE_MS ? null : lastHighlightedZoneRef.current;
+        // Detect stable zone change
         if (highlightedZone !== lastHighlightedZoneRef.current) {
+            // Fade out previous zone label-pin
+            if (lastHighlightedZoneRef.current) {
+                const prevLabel = document.getElementById(`${lastHighlightedZoneRef.current}-label`);
+                const pin = prevLabel?.querySelector('.label-pin');
+                if (pin)
+                    pin.style.opacity = '0';
+            }
+            // Fade in new zone label-pin
+            if (highlightedZone) {
+                const label = document.getElementById(`${highlightedZone}-label`);
+                const pin = label?.querySelector('.label-pin');
+                if (pin)
+                    pin.style.opacity = '1';
+            }
             lastHighlightedZoneRef.current = highlightedZone;
             lastChangeTimeRef.current = clock.elapsedTime * 1000;
             isTransitioningRef.current = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/viewer",
-  "version": "0.1.13",
+  "version": "0.2.0",
   "description": "3D viewer component for Pascal building editor",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,16 +26,17 @@
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "react": "^18 || ^19",
-    "three": "^0.182"
+    "three": "^0.183"
   },
   "dependencies": {
+    "polygon-clipping": "^0.15.7",
     "zustand": "^5"
   },
   "devDependencies": {
-    "@repo/typescript-config": "*",
+    "@pascal/typescript-config": "*",
     "@types/react": "^19.2.2",
-    "typescript": "5.9.2",
-    "@types/three": "^0.182.0"
+    "typescript": "5.9.3",
+    "@types/three": "^0.183.0"
   },
   "keywords": [
     "3d",