@pascal-app/viewer 0.1.13 → 0.3.0

package/dist/systems/item-light/item-light-system.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { sceneRegistry, useInteractive, useScene } from '@pascal-app/core';
+import { useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+import { MathUtils, Vector3 } from 'three';
+import { useItemLightPool } from '../../store/use-item-light-pool';
+import useViewer from '../../store/use-viewer';
+const POOL_SIZE = 12;
+// How often (in seconds) to re-evaluate which items have lights assigned (fallback timer)
+const REASSIGN_INTERVAL = 0.2;
+// Hysteresis: a currently-assigned slot keeps its key unless an unassigned
+// candidate beats it by at least this much (prevents flickering at the boundary)
+const HYSTERESIS = 0.15;
+// Camera movement thresholds that trigger an early re-evaluation
+const CAM_MOVE_DIST = 0.5; // units
+const CAM_ROT_DOT = 0.995; // cos(~5.7°)
+// Module-level temp vectors reused every frame (avoids GC pressure)
+const _dir = new Vector3();
+const _camPos = new Vector3();
+const _camFwd = new Vector3();
+const _itemPos = new Vector3();
+function scoreRegistration(reg, nodes, selectedLevelId, levelMode, interactiveState) {
+    // Skip lights that are toggled off — they contribute no illumination
+    if (reg.toggleIndex >= 0) {
+        const values = interactiveState.items[reg.nodeId]?.controlValues;
+        const isOn = Boolean(values?.[reg.toggleIndex]);
+        if (!isOn)
+            return Number.POSITIVE_INFINITY;
+    }
+    const { nodeId, effect } = reg;
+    const obj = sceneRegistry.nodes.get(nodeId);
+    if (!obj)
+        return Number.POSITIVE_INFINITY;
+    obj.getWorldPosition(_itemPos);
+    _itemPos.x += effect.offset[0];
+    _itemPos.y += effect.offset[1];
+    _itemPos.z += effect.offset[2];
+    _dir.copy(_itemPos).sub(_camPos).normalize();
+    const dot = _camFwd.dot(_dir); // 1 = ahead, -1 = behind
+    // Angular component (0 = dead ahead, 2 = directly behind)
+    const angular = 1 - dot;
+    // Normalised distance component (assumes scenes < 200 units)
+    const dist = _camPos.distanceTo(_itemPos) / 200;
+    // ── Level factor ──────────────────────────────────────────────────────────
+    const node = nodes[nodeId];
+    const itemLevelId = node?.parentId ?? null;
+    let levelPenalty = 0;
+    if (selectedLevelId) {
+        if (itemLevelId !== selectedLevelId) {
+            // In solo mode items on other levels are invisible — deprioritize strongly
+            levelPenalty = levelMode === 'solo' ? 100 : 0.8;
+        }
+    }
+    else if (itemLevelId) {
+        // No level selected — lightly prefer items on level index 0
+        const levelNode = nodes[itemLevelId];
+        const levelIndex = levelNode?.level ?? 0;
+        if (levelIndex !== 0)
+            levelPenalty = 0.3;
+    }
+    return angular * 0.7 + dist * 0.3 + levelPenalty;
+}
+export function ItemLightSystem() {
+    const lightRefs = useRef(Array.from({ length: POOL_SIZE }, () => null));
+    const slots = useRef(Array.from({ length: POOL_SIZE }, () => ({ key: null, pendingKey: null, isFadingOut: false })));
+    const reassignTimer = useRef(0);
+    // Track camera state at last reassignment to detect meaningful movement
+    const prevReassignCamPos = useRef(new Vector3());
+    const prevReassignCamFwd = useRef(new Vector3(0, 0, -1));
+    useFrame(({ camera }, delta) => {
+        const dt = Math.min(delta, 0.1);
+        const { registrations } = useItemLightPool.getState();
+        const interactiveState = useInteractive.getState();
+        // ── 1. Throttled priority reassignment ──────────────────────────────────
+        camera.getWorldPosition(_camPos);
+        camera.getWorldDirection(_camFwd);
+        const camMoved = _camPos.distanceTo(prevReassignCamPos.current) > CAM_MOVE_DIST ||
+            _camFwd.dot(prevReassignCamFwd.current) < CAM_ROT_DOT;
+        reassignTimer.current -= delta;
+        const shouldReassign = reassignTimer.current <= 0 || camMoved;
+        if (shouldReassign) {
+            reassignTimer.current = REASSIGN_INTERVAL;
+            prevReassignCamPos.current.copy(_camPos);
+            prevReassignCamFwd.current.copy(_camFwd);
+            // Read level/scene state once for the whole tick
+            const nodes = useScene.getState().nodes;
+            const viewerState = useViewer.getState();
+            const selectedLevelId = viewerState.selection.levelId;
+            const levelMode = viewerState.levelMode;
+            // Score every registration
+            const scored = [];
+            for (const [key, reg] of registrations) {
+                scored.push({
+                    key,
+                    score: scoreRegistration(reg, nodes, selectedLevelId, levelMode, interactiveState),
+                });
+            }
+            scored.sort((a, b) => a.score - b.score);
+            // Build the desired assignment (top POOL_SIZE keys)
+            const desired = scored.slice(0, POOL_SIZE).map((s) => s.key);
+            // Build a map of currently-assigned keys → slot index for hysteresis
+            const currentlyAssigned = new Map();
+            for (let i = 0; i < POOL_SIZE; i++) {
+                const s = slots.current[i];
+                if (!s)
+                    continue;
+                const k = s.key ?? s.pendingKey;
+                if (k)
+                    currentlyAssigned.set(k, i);
+            }
+            // Assign desired keys to slots — prefer keeping existing assignments
+            const usedSlots = new Set();
+            const assignedKeys = new Set();
+            // Pass 1: keep existing slots where the key is still in desired
+            for (const key of desired) {
+                const existingSlot = currentlyAssigned.get(key);
+                if (existingSlot !== undefined && !usedSlots.has(existingSlot)) {
+                    usedSlots.add(existingSlot);
+                    assignedKeys.add(key);
+                }
+            }
+            // Pass 2: assign remaining desired keys to free slots
+            let freeSlot = 0;
+            for (const key of desired) {
+                if (assignedKeys.has(key))
+                    continue;
+                while (freeSlot < POOL_SIZE && usedSlots.has(freeSlot))
+                    freeSlot++;
+                if (freeSlot >= POOL_SIZE)
+                    break;
+                // Hysteresis: only evict the current occupant if the new key scores
+                // meaningfully better than it
+                const freeSlotData = slots.current[freeSlot];
+                const currentKey = freeSlotData ? (freeSlotData.key ?? freeSlotData.pendingKey) : null;
+                if (currentKey && !desired.includes(currentKey)) {
+                    const currentScore = scored.find((s) => s.key === currentKey)?.score ?? Number.POSITIVE_INFINITY;
+                    const newScore = scored.find((s) => s.key === key)?.score ?? 0;
+                    if (currentScore - newScore < HYSTERESIS) {
+                        freeSlot++;
+                        continue;
+                    }
+                }
+                usedSlots.add(freeSlot);
+                assignedKeys.add(key);
+                const slot = slots.current[freeSlot];
+                if (slot && slot.key !== key) {
+                    slot.pendingKey = key;
+                    slot.isFadingOut = slot.key !== null;
+                    if (!slot.isFadingOut) {
+                        // Slot was idle — skip fade-out, assign immediately
+                        slot.key = key;
+                        slot.pendingKey = null;
+                        const light = lightRefs.current[freeSlot];
+                        const reg = registrations.get(key);
+                        if (light && reg) {
+                            light.color.set(reg.effect.color);
+                            light.distance = reg.effect.distance ?? 0;
+                        }
+                    }
+                }
+                freeSlot++;
+            }
+            // Clear slots whose key is no longer in desired and not pending
+            for (let i = 0; i < POOL_SIZE; i++) {
+                if (!usedSlots.has(i)) {
+                    const slot = slots.current[i];
+                    if (slot?.key && !desired.includes(slot.key)) {
+                        slot.pendingKey = null;
+                        slot.isFadingOut = true;
+                    }
+                }
+            }
+        }
+        // ── 2. Per-frame light updates ───────────────────────────────────────────
+        for (let i = 0; i < POOL_SIZE; i++) {
+            const light = lightRefs.current[i];
+            if (!light)
+                continue;
+            const slot = slots.current[i];
+            if (!slot)
+                continue;
+            // Fade-out phase: lerp intensity → 0, then complete the transition
+            if (slot.isFadingOut) {
+                light.intensity = MathUtils.lerp(light.intensity, 0, dt * 12);
+                if (light.intensity < 0.01) {
+                    light.intensity = 0;
+                    slot.isFadingOut = false;
+                    slot.key = slot.pendingKey;
+                    slot.pendingKey = null;
+                    if (slot.key) {
+                        const reg = registrations.get(slot.key);
+                        if (reg) {
+                            light.color.set(reg.effect.color);
+                            light.distance = reg.effect.distance ?? 0;
+                        }
+                    }
+                }
+                continue;
+            }
+            if (!slot.key) {
+                // Idle slot — keep dark
+                light.intensity = 0;
+                continue;
+            }
+            const reg = registrations.get(slot.key);
+            if (!reg) {
+                slot.key = null;
+                light.intensity = 0;
+                continue;
+            }
+            // Snap world position each frame
+            const obj = sceneRegistry.nodes.get(reg.nodeId);
+            if (obj) {
+                obj.getWorldPosition(_itemPos);
+                const [ox, oy, oz] = reg.effect.offset;
+                light.position.set(_itemPos.x + ox, _itemPos.y + oy, _itemPos.z + oz);
+            }
+            // Compute target intensity
+            const values = interactiveState.items[reg.nodeId]?.controlValues;
+            const isOn = reg.toggleIndex >= 0 ? Boolean(values?.[reg.toggleIndex]) : true;
+            let t = 1;
+            if (reg.hasSlider) {
+                const raw = values?.[reg.sliderIndex] ?? reg.sliderMin;
+                t = (raw - reg.sliderMin) / (reg.sliderMax - reg.sliderMin);
+            }
+            const targetIntensity = isOn
+                ? MathUtils.lerp(reg.effect.intensityRange[0], reg.effect.intensityRange[1], t)
+                : reg.effect.intensityRange[0];
+            light.intensity = MathUtils.lerp(light.intensity, targetIntensity, dt * 12);
+        }
+    });
+    return (_jsx(_Fragment, { children: Array.from({ length: POOL_SIZE }, (_, i) => (_jsx("pointLight", { castShadow: false, intensity: 0, ref: (el) => {
+                lightRefs.current[i] = el;
+            } }, i))) }));
+}

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.3.0",
   "description": "3D viewer component for Pascal building editor",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,16 +26,18 @@
     "@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/node": "^25.5.0",
     "@types/react": "^19.2.2",
-    "typescript": "5.9.2",
-    "@types/three": "^0.182.0"
+    "@types/three": "^0.183.0",
+    "typescript": "5.9.3"
   },
   "keywords": [
     "3d",