@pascal-app/viewer 0.4.0 → 0.5.1

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

@@ -1 +1 @@
-{"version":3,"file":"building-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/building/building-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,kBAAkB,CAAA;AAMjE,eAAO,MAAM,gBAAgB,GAAI,UAAU;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,4CAYhE,CAAA"}
+{"version":3,"file":"building-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/building/building-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,kBAAkB,CAAA;AAMjE,eAAO,MAAM,gBAAgB,GAAI,UAAU;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,4CAkBhE,CAAA"}

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

@@ -7,5 +7,5 @@ export const BuildingRenderer = ({ node }) => {
     const ref = useRef(null);
     useRegistry(node.id, node.type, ref);
     const handlers = useNodeEvents(node, 'building');
-    return (_jsx("group", { ref: ref, ...handlers, children: node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))) }));
+    return (_jsx("group", { position: node.position, ref: ref, rotation: [node.rotation[0], node.rotation[1], node.rotation[2]], ...handlers, children: node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))) }));
 };

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

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

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

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

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

@@ -0,0 +1,15 @@
+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 { DEFAULT_STAIR_MATERIAL } from '../../../lib/materials';
+export const FenceRenderer = ({ node }) => {
+    const ref = useRef(null);
+    const handlers = useNodeEvents(node, 'fence');
+    const material = useMemo(() => DEFAULT_STAIR_MATERIAL, []);
+    useRegistry(node.id, 'fence', ref);
+    useLayoutEffect(() => {
+        useScene.getState().markDirty(node.id);
+    }, [node.id]);
+    return (_jsx("mesh", { castShadow: true, material: material, receiveShadow: true, ref: ref, visible: node.visible, ...handlers, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
+};

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;AAkBzD,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,mDAyBjE,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;AAmBzD,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,mDA0BjE,CAAA"}

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

@@ -4,6 +4,7 @@ import { useScene } from '@pascal-app/core';
 import { BuildingRenderer } from './building/building-renderer';
 import { CeilingRenderer } from './ceiling/ceiling-renderer';
 import { DoorRenderer } from './door/door-renderer';
+import { FenceRenderer } from './fence/fence-renderer';
 import { GuideRenderer } from './guide/guide-renderer';
 import { ItemRenderer } from './item/item-renderer';
 import { LevelRenderer } from './level/level-renderer';
@@ -21,5 +22,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 === '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 })] }));
+    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 === 'fence' && _jsx(FenceRenderer, { 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/stair/stair-renderer.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"stair-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/stair/stair-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAgD,MAAM,kBAAkB,CAAA;AAqC/G,eAAO,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,4CAwC1D,CAAA"}

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

@@ -1,6 +1,7 @@
 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 * as THREE from 'three';
 import { useNodeEvents } from '../../../hooks/use-node-events';
 import { createMaterial, DEFAULT_STAIR_MATERIAL } from '../../../lib/materials';
 import { NodeRenderer } from '../node-renderer';
@@ -17,5 +18,471 @@ export const StairRenderer = ({ node }) => {
             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))) })] }));
+    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] }) }), node.stairType === 'curved' || node.stairType === 'spiral' ? (_jsx(CurvedStairBody, { material: material, stair: node })) : null, _jsx(StairRailings, { material: material, stair: node }), _jsx("group", { name: "segments-wrapper", visible: false, children: (node.children ?? []).map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))) })] }));
 };
+function StairRailings({ stair, material }) {
+    const nodes = useScene((state) => state.nodes);
+    const segments = useMemo(() => (stair.children ?? [])
+        .map((childId) => nodes[childId])
+        .filter((node) => node?.type === 'stair-segment' && node.visible !== false), [nodes, stair.children]);
+    const railPaths = useMemo(() => buildStairRailPaths(segments, stair.railingMode ?? 'none'), [segments, stair.railingMode]);
+    const railHeight = stair.railingHeight ?? 0.92;
+    const midRailHeight = Math.max(railHeight * 0.45, 0.35);
+    const railRadius = 0.022;
+    const balusterRadius = 0.018;
+    if ((stair.railingMode ?? 'none') === 'none') {
+        return null;
+    }
+    if (stair.stairType === 'curved' || stair.stairType === 'spiral') {
+        const stepCount = Math.max(2, Math.round(stair.stepCount ?? 10));
+        const sweepAngle = stair.sweepAngle ?? (stair.stairType === 'spiral' ? Math.PI * 2 : Math.PI / 2);
+        const stepSweep = sweepAngle / stepCount;
+        const stepHeight = Math.max(stair.totalRise ?? 2.5, 0.1) / stepCount;
+        const innerRadius = Math.max(stair.stairType === 'spiral' ? 0.05 : 0.2, stair.innerRadius ?? 0.9);
+        const outerRadius = innerRadius + Math.max(stair.width ?? 1, 0.4);
+        const leftRadius = sweepAngle >= 0 ? innerRadius + 0.04 : outerRadius - 0.04;
+        const rightRadius = sweepAngle >= 0 ? outerRadius - 0.04 : innerRadius + 0.04;
+        const radii = stair.railingMode === 'both'
+            ? [leftRadius, rightRadius]
+            : stair.railingMode === 'left'
+                ? [leftRadius]
+                : stair.railingMode === 'right'
+                    ? [rightRadius]
+                    : [];
+        return (_jsx("group", { name: "stair-railing", children: radii.map((radius, sideIndex) => {
+                const sidePoints = Array.from({ length: stepCount }).map((_, index) => {
+                    const angle = -sweepAngle / 2 + stepSweep * index + stepSweep / 2;
+                    return [
+                        Math.cos(angle) * radius,
+                        stair.stairType === 'spiral'
+                            ? stepHeight * index + Math.max(stair.thickness ?? 0.25, 0.02)
+                            : stepHeight * (index + 1),
+                        Math.sin(angle) * radius,
+                    ];
+                });
+                return (_jsxs("group", { children: [sidePoints.map((point, pointIndex) => (_jsx("mesh", { castShadow: true, geometry: BALUSTER_GEOMETRY, material: material, position: [point[0], point[1] + railHeight / 2, point[2]], receiveShadow: true, scale: [balusterRadius, railHeight, balusterRadius] }, `${stair.id}-curved-baluster-${sideIndex}-${pointIndex}`))), sidePoints.slice(0, -1).map((point, pointIndex) => {
+                            const nextPoint = sidePoints[pointIndex + 1];
+                            if (!nextPoint)
+                                return null;
+                            return (_jsxs("group", { children: [_jsx(RailSegment, { end: [nextPoint[0], nextPoint[1] + railHeight, nextPoint[2]], material: material, radius: railRadius, start: [point[0], point[1] + railHeight, point[2]] }), _jsx(RailSegment, { end: [nextPoint[0], nextPoint[1] + midRailHeight, nextPoint[2]], material: material, radius: railRadius * 0.8, start: [point[0], point[1] + midRailHeight, point[2]] })] }, `${stair.id}-curved-rail-${sideIndex}-${pointIndex}`));
+                        })] }, `${stair.id}-curved-railing-${sideIndex}`));
+            }) }));
+    }
+    if (railPaths.length === 0) {
+        return null;
+    }
+    return (_jsxs("group", { name: "stair-railing", children: [railPaths.map((segmentPath, index) => (_jsx("group", { position: [segmentPath.layout.center[0], segmentPath.layout.elevation, segmentPath.layout.center[1]], "rotation-y": segmentPath.layout.rotation, children: segmentPath.sidePaths.map((sidePath, sideIndex) => (_jsxs("group", { children: [sidePath.points.map((point, pointIndex) => (_jsx("mesh", { castShadow: true, geometry: BALUSTER_GEOMETRY, material: material, position: [point[2], point[1] + railHeight / 2, point[0]], receiveShadow: true, scale: [balusterRadius, railHeight, balusterRadius] }, `${segmentPath.layout.segment.id}-${sidePath.side}-baluster-${pointIndex}`))), sidePath.points.slice(0, -1).map((point, pointIndex) => {
+                            const nextPoint = sidePath.points[pointIndex + 1];
+                            if (!nextPoint)
+                                return null;
+                            return (_jsxs("group", { children: [_jsx(RailSegment, { end: [nextPoint[2], nextPoint[1] + railHeight, nextPoint[0]], material: material, radius: railRadius, start: [point[2], point[1] + railHeight, point[0]] }), _jsx(RailSegment, { end: [nextPoint[2], nextPoint[1] + midRailHeight, nextPoint[0]], material: material, radius: railRadius * 0.8, start: [point[2], point[1] + midRailHeight, point[0]] })] }, `${segmentPath.layout.segment.id}-${sidePath.side}-rail-${pointIndex}`));
+                        })] }, `${segmentPath.layout.segment.id}-${sidePath.side}-${sideIndex}`))) }, `${segmentPath.layout.segment.id}-railing`))), railPaths.slice(1).map((segmentPath, index) => {
+                const previousPath = railPaths[index];
+                if (!previousPath || !segmentPath.connectFromPrevious)
+                    return null;
+                if (previousPath.layout.segment.segmentType === 'landing')
+                    return null;
+                if (segmentPath.layout.segment.segmentType === 'landing')
+                    return null;
+                return segmentPath.sidePaths.map((sidePath, sideIndex) => {
+                    const currentPoint = sidePath.points[0];
+                    if (!currentPoint)
+                        return null;
+                    const currentWorldPoint = toWorldRailPoint(segmentPath.layout, currentPoint);
+                    const previousSidePath = [...previousPath.sidePaths]
+                        .map((entry) => {
+                        const lastPoint = entry.points[entry.points.length - 1];
+                        return {
+                            entry,
+                            distance: lastPoint ? distance3(toWorldRailPoint(previousPath.layout, lastPoint), currentWorldPoint) : Number.POSITIVE_INFINITY,
+                        };
+                    })
+                        .sort((left, right) => left.distance - right.distance)[0]?.entry;
+                    const previousPoint = previousSidePath && previousSidePath.points.length
+                        ? previousSidePath.points[previousSidePath.points.length - 1]
+                        : null;
+                    if (!(previousPoint && currentPoint)) {
+                        return null;
+                    }
+                    const previousWorldPoint = toWorldRailPoint(previousPath.layout, previousPoint);
+                    return (_jsxs("group", { children: [_jsx(RailSegment, { end: [currentWorldPoint[0], currentWorldPoint[1] + railHeight, currentWorldPoint[2]], material: material, radius: railRadius, start: [previousWorldPoint[0], previousWorldPoint[1] + railHeight, previousWorldPoint[2]] }), _jsx(RailSegment, { end: [currentWorldPoint[0], currentWorldPoint[1] + midRailHeight, currentWorldPoint[2]], material: material, radius: railRadius * 0.8, start: [previousWorldPoint[0], previousWorldPoint[1] + midRailHeight, previousWorldPoint[2]] })] }, `${previousPath.layout.segment.id}-${segmentPath.layout.segment.id}-${sideIndex}`));
+                });
+            })] }));
+}
+const BALUSTER_GEOMETRY = new THREE.CylinderGeometry(1, 1, 1, 8);
+const RAIL_GEOMETRY = new THREE.CylinderGeometry(1, 1, 1, 8);
+function RailSegment({ start, end, radius, material, }) {
+    const startVector = useMemo(() => new THREE.Vector3(...start), [start]);
+    const endVector = useMemo(() => new THREE.Vector3(...end), [end]);
+    const direction = useMemo(() => endVector.clone().sub(startVector), [endVector, startVector]);
+    const length = Math.max(direction.length(), 0.01);
+    const quaternion = useMemo(() => new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction.clone().normalize()), [direction]);
+    const midpoint = useMemo(() => startVector.clone().add(endVector).multiplyScalar(0.5), [endVector, startVector]);
+    return (_jsx("mesh", { castShadow: true, geometry: RAIL_GEOMETRY, material: material, position: [midpoint.x, midpoint.y, midpoint.z], quaternion: quaternion, receiveShadow: true, scale: [Math.max(radius, 0.01), length, Math.max(radius, 0.01)] }));
+}
+function CurvedStairBody({ stair, material }) {
+    const stepCount = Math.max(2, Math.round(stair.stepCount ?? 10));
+    const totalRise = Math.max(stair.totalRise ?? 2.5, 0.1);
+    const stepHeight = totalRise / stepCount;
+    const isSpiral = stair.stairType === 'spiral';
+    const innerRadius = Math.max(isSpiral ? 0.05 : 0.2, stair.innerRadius ?? 0.9);
+    const outerRadius = innerRadius + Math.max(stair.width ?? 1, 0.4);
+    const sweepAngle = stair.sweepAngle ?? (isSpiral ? Math.PI * 2 : Math.PI / 2);
+    const stepSweep = sweepAngle / stepCount;
+    const thickness = Math.max(stair.thickness ?? 0.25, 0.02);
+    const fillToFloor = stair.fillToFloor ?? true;
+    const spiralColumnRadius = Math.max(0.05, Math.min(innerRadius * 0.72, innerRadius - 0.03));
+    const spiralColumnHeight = totalRise + thickness;
+    const spiralLandingDepth = Math.max(0.3, stair.topLandingDepth ?? Math.max((stair.width ?? 1) * 0.9, 0.8));
+    const spiralLandingSweep = isSpiral && (stair.topLandingMode ?? 'none') === 'integrated'
+        ? Math.min(Math.PI * 0.75, spiralLandingDepth / Math.max(innerRadius + (stair.width ?? 1) / 2, 0.1)) *
+            Math.sign(sweepAngle || 1)
+        : 0;
+    const spiralLastStepTop = stepHeight * Math.max(stepCount - 1, 0) + thickness;
+    const spiralLandingThickness = isSpiral && (stair.topLandingMode ?? 'none') === 'integrated'
+        ? Math.max(0.02, totalRise - spiralLastStepTop)
+        : 0;
+    return (_jsxs("group", { name: isSpiral ? 'spiral-stair' : 'curved-stair', children: [isSpiral && (stair.showCenterColumn ?? true) ? (_jsx("mesh", { castShadow: true, receiveShadow: true, material: material, position: [0, spiralColumnHeight / 2, 0], children: _jsx("cylinderGeometry", { args: [spiralColumnRadius, spiralColumnRadius, spiralColumnHeight, 10] }) })) : null, Array.from({ length: stepCount }).map((_, index) => {
+                const currentHeight = stepHeight * (index + 1);
+                const actualStepHeight = isSpiral ? thickness : fillToFloor ? Math.max(currentHeight, thickness) : thickness;
+                const startAngle = -sweepAngle / 2 + stepSweep * index;
+                const endAngle = startAngle + stepSweep;
+                const stepY = isSpiral ? stepHeight * index : fillToFloor ? 0 : Math.max(currentHeight - thickness, 0);
+                const midAngle = startAngle + stepSweep / 2;
+                return (_jsxs("group", { "position-y": stepY, children: [isSpiral && (stair.showStepSupports ?? true) ? (_jsx("mesh", { castShadow: true, material: material, position: [
+                                Math.cos(midAngle) * (spiralColumnRadius + Math.max(0.04, innerRadius - spiralColumnRadius + 0.04) / 2 - 0.02),
+                                Math.max(thickness * 0.55, 0.025) / 2,
+                                Math.sin(midAngle) * (spiralColumnRadius + Math.max(0.04, innerRadius - spiralColumnRadius + 0.04) / 2 - 0.02),
+                            ], receiveShadow: true, "rotation-y": -midAngle, children: _jsx("boxGeometry", { args: [
+                                    Math.max(0.04, innerRadius - spiralColumnRadius + 0.04),
+                                    Math.max(thickness * 0.55, 0.025),
+                                    Math.max(0.04, Math.min(0.12, Math.max(thickness * 0.55, 0.025) * 1.5)),
+                                ] }) })) : null, _jsx(CurvedStepMesh, { endAngle: endAngle, innerRadius: innerRadius, material: material, outerRadius: outerRadius, positionY: 0, startAngle: startAngle, stepHeight: actualStepHeight, thickness: thickness })] }, `${stair.id}-${isSpiral ? 'spiral' : 'curved'}-step-${index}`));
+            }), isSpiral && (stair.topLandingMode ?? 'none') === 'integrated' ? (_jsx(CurvedStepMesh, { endAngle: sweepAngle / 2 + spiralLandingSweep, innerRadius: innerRadius, material: material, outerRadius: outerRadius, positionY: spiralLastStepTop, startAngle: sweepAngle / 2, stepHeight: spiralLandingThickness, thickness: spiralLandingThickness })) : null] }));
+}
+function CurvedStepMesh({ innerRadius, outerRadius, startAngle, endAngle, stepHeight, thickness, positionY, material, }) {
+    const geometry = useMemo(() => buildCurvedStepGeometry(innerRadius, outerRadius, startAngle, endAngle, Math.max(stepHeight, thickness)), [endAngle, innerRadius, outerRadius, startAngle, stepHeight, thickness]);
+    return _jsx("mesh", { castShadow: true, geometry: geometry, material: material, "position-y": positionY, receiveShadow: true });
+}
+function buildCurvedStepGeometry(innerRadius, outerRadius, startAngle, endAngle, height) {
+    const clampedHeight = Math.max(height, 0.02);
+    const y0 = 0;
+    const y1 = clampedHeight;
+    const sweepAngle = endAngle - startAngle;
+    const sweepDirection = Math.sign(sweepAngle) || 1;
+    const segmentCount = Math.max(4, Math.min(24, Math.ceil(Math.abs(sweepAngle) / (Math.PI / 18) + Math.max(0, (outerRadius - innerRadius) * 3))));
+    const positions = [];
+    const normals = [];
+    const pointOnArc = (radius, angle, y) => new THREE.Vector3(Math.cos(angle) * radius, y, Math.sin(angle) * radius);
+    const pushTriangle = (a, b, c, normal) => {
+        const edgeAB = b.clone().sub(a);
+        const edgeAC = c.clone().sub(a);
+        const faceNormal = edgeAB.cross(edgeAC);
+        const ordered = faceNormal.dot(normal) >= 0 ? [a, b, c] : [a, c, b];
+        for (const point of ordered) {
+            positions.push(point.x, point.y, point.z);
+            normals.push(normal.x, normal.y, normal.z);
+        }
+    };
+    const pushQuad = (a, b, c, d, normal) => {
+        pushTriangle(a, b, c, normal);
+        pushTriangle(a, c, d, normal);
+    };
+    const upNormal = new THREE.Vector3(0, 1, 0);
+    const downNormal = new THREE.Vector3(0, -1, 0);
+    for (let index = 0; index < segmentCount; index++) {
+        const t0 = index / segmentCount;
+        const t1 = (index + 1) / segmentCount;
+        const segStart = startAngle + sweepAngle * t0;
+        const segEnd = startAngle + sweepAngle * t1;
+        const midAngle = (segStart + segEnd) / 2;
+        const innerStartBottom = pointOnArc(innerRadius, segStart, y0);
+        const innerEndBottom = pointOnArc(innerRadius, segEnd, y0);
+        const outerStartBottom = pointOnArc(outerRadius, segStart, y0);
+        const outerEndBottom = pointOnArc(outerRadius, segEnd, y0);
+        const innerStartTop = pointOnArc(innerRadius, segStart, y1);
+        const innerEndTop = pointOnArc(innerRadius, segEnd, y1);
+        const outerStartTop = pointOnArc(outerRadius, segStart, y1);
+        const outerEndTop = pointOnArc(outerRadius, segEnd, y1);
+        const outerNormal = new THREE.Vector3(Math.cos(midAngle), 0, Math.sin(midAngle)).normalize();
+        const innerNormal = new THREE.Vector3(-Math.cos(midAngle), 0, -Math.sin(midAngle)).normalize();
+        pushQuad(innerStartTop, outerStartTop, outerEndTop, innerEndTop, upNormal);
+        pushQuad(innerStartBottom, innerEndBottom, outerEndBottom, outerStartBottom, downNormal);
+        pushQuad(innerStartBottom, innerStartTop, innerEndTop, innerEndBottom, innerNormal);
+        pushQuad(outerStartBottom, outerEndBottom, outerEndTop, outerStartTop, outerNormal);
+    }
+    const startInnerBottom = pointOnArc(innerRadius, startAngle, y0);
+    const startOuterBottom = pointOnArc(outerRadius, startAngle, y0);
+    const startInnerTop = pointOnArc(innerRadius, startAngle, y1);
+    const startOuterTop = pointOnArc(outerRadius, startAngle, y1);
+    const endInnerBottom = pointOnArc(innerRadius, endAngle, y0);
+    const endOuterBottom = pointOnArc(outerRadius, endAngle, y0);
+    const endInnerTop = pointOnArc(innerRadius, endAngle, y1);
+    const endOuterTop = pointOnArc(outerRadius, endAngle, y1);
+    const startNormal = new THREE.Vector3(sweepDirection * Math.sin(startAngle), 0, -sweepDirection * Math.cos(startAngle)).normalize();
+    const endNormal = new THREE.Vector3(-sweepDirection * Math.sin(endAngle), 0, sweepDirection * Math.cos(endAngle)).normalize();
+    pushQuad(startInnerBottom, startOuterBottom, startOuterTop, startInnerTop, startNormal);
+    pushQuad(endInnerBottom, endInnerTop, endOuterTop, endOuterBottom, endNormal);
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+    geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+    geometry.computeVertexNormals();
+    return geometry;
+}
+function buildStairRailPaths(segments, railingMode) {
+    if (!segments.length || railingMode === 'none')
+        return [];
+    const layouts = computeStairRailLayouts(segments);
+    const landingInset = 0.08;
+    if (railingMode === 'both') {
+        const isStraightLineDoubleLandingLayout = layouts.length === 4 &&
+            layouts[0]?.segment.segmentType === 'stair' &&
+            layouts[1]?.segment.segmentType === 'landing' &&
+            layouts[2]?.segment.segmentType === 'stair' &&
+            layouts[2]?.segment.attachmentSide === 'front' &&
+            layouts[3]?.segment.segmentType === 'landing' &&
+            layouts[3]?.segment.attachmentSide === 'front';
+        return layouts.map((layout, index) => {
+            const previousLayout = index > 0 ? layouts[index - 1] : undefined;
+            const nextLayout = layouts[index + 1];
+            const { nextStairLayout, isTerminalLandingBeforeStair } = resolveLandingChainNextStair(layouts, index);
+            const hideLandingRailing = layout.segment.segmentType === 'landing' &&
+                previousLayout?.segment.segmentType === 'stair' &&
+                nextLayout?.segment.segmentType === 'stair';
+            const visualTurnSide = isTerminalLandingBeforeStair && nextStairLayout?.segment.attachmentSide
+                ? nextStairLayout.segment.attachmentSide
+                : nextLayout?.segment.attachmentSide;
+            const sideCandidates = isTerminalLandingBeforeStair && layout.segment.segmentType === 'landing'
+                ? visualTurnSide === 'left'
+                    ? ['front', 'right']
+                    : visualTurnSide === 'right'
+                        ? ['front', 'left']
+                        : ['left', 'right']
+                : hideLandingRailing
+                    ? visualTurnSide === 'left'
+                        ? ['front', 'right']
+                        : visualTurnSide === 'right'
+                            ? ['front', 'left']
+                            : ['left', 'right']
+                    : layout.segment.segmentType === 'landing'
+                        ? nextLayout?.segment.segmentType === 'landing' && visualTurnSide === 'left'
+                            ? ['front', 'right']
+                            : nextLayout?.segment.segmentType === 'landing' && visualTurnSide === 'right'
+                                ? ['front', 'left']
+                                : visualTurnSide === 'left'
+                                    ? ['right']
+                                    : visualTurnSide === 'right'
+                                        ? ['left']
+                                        : ['left', 'right']
+                        : ['left', 'right'];
+            return {
+                layout,
+                sidePaths: isStraightLineDoubleLandingLayout && index === 1
+                    ? ['left', 'right'].map((side) => buildSegmentRailPath(layouts, index, side, landingInset))
+                    : sideCandidates.map((side) => buildSegmentRailPath(layouts, index, side, landingInset)),
+                connectFromPrevious: index > 0 &&
+                    !(previousLayout?.segment.segmentType === 'landing' && layout.segment.segmentType === 'landing'),
+            };
+        });
+    }
+    const isStraightLineDoubleLandingLayout = layouts.length === 4 &&
+        layouts[0]?.segment.segmentType === 'stair' &&
+        layouts[1]?.segment.segmentType === 'landing' &&
+        layouts[2]?.segment.segmentType === 'stair' &&
+        layouts[2]?.segment.attachmentSide === 'front' &&
+        layouts[3]?.segment.segmentType === 'landing' &&
+        layouts[3]?.segment.attachmentSide === 'front';
+    return layouts.map((layout, index) => {
+        const previousLayout = index > 0 ? layouts[index - 1] : undefined;
+        const nextLayout = layouts[index + 1];
+        const { nextStairLayout, isTerminalLandingBeforeStair } = resolveLandingChainNextStair(layouts, index);
+        const isMiddleLandingBetweenFlights = layout.segment.segmentType === 'landing' &&
+            previousLayout?.segment.segmentType === 'stair' &&
+            nextLayout?.segment.segmentType === 'stair';
+        const nextAttachmentSide = nextLayout?.segment.attachmentSide;
+        const terminalNextAttachmentSide = nextStairLayout?.segment.attachmentSide;
+        const suppressMiddleLandingOnPreferredTurnSide = isMiddleLandingBetweenFlights &&
+            nextAttachmentSide != null &&
+            nextAttachmentSide !== 'front' &&
+            nextAttachmentSide === railingMode;
+        const suppressLandingRailing = (layout.segment.segmentType === 'landing' &&
+            nextLayout?.segment.segmentType === 'landing' &&
+            nextAttachmentSide === railingMode) ||
+            suppressMiddleLandingOnPreferredTurnSide;
+        const landingContinuesOnPreferredSide = layout.segment.segmentType === 'landing'
+            ? nextAttachmentSide == null || nextAttachmentSide === 'front' || nextAttachmentSide === railingMode
+            : true;
+        const sideCandidates = suppressLandingRailing
+            ? []
+            : layout.segment.segmentType !== 'landing'
+                ? [railingMode]
+                : isTerminalLandingBeforeStair
+                    ? railingMode === 'left'
+                        ? terminalNextAttachmentSide === 'right'
+                            ? ['front', 'left']
+                            : terminalNextAttachmentSide === 'front' || terminalNextAttachmentSide == null
+                                ? ['left']
+                                : []
+                        : railingMode === 'right'
+                            ? terminalNextAttachmentSide === 'left'
+                                ? ['front', 'right']
+                                : terminalNextAttachmentSide === 'front' || terminalNextAttachmentSide == null
+                                    ? ['right']
+                                    : []
+                            : [railingMode]
+                    : isStraightLineDoubleLandingLayout
+                        ? [railingMode]
+                        : isMiddleLandingBetweenFlights && railingMode === 'left'
+                            ? nextAttachmentSide === 'right'
+                                ? ['front', 'left']
+                                : ['left']
+                            : isMiddleLandingBetweenFlights && railingMode === 'right'
+                                ? nextAttachmentSide === 'left'
+                                    ? ['front', 'right']
+                                    : ['right']
+                                : nextLayout?.segment.segmentType === 'landing' &&
+                                    nextAttachmentSide != null &&
+                                    nextAttachmentSide !== 'front' &&
+                                    nextAttachmentSide !== railingMode
+                                    ? ['front', railingMode]
+                                    : [railingMode];
+        return {
+            layout,
+            sidePaths: sideCandidates.map((side) => buildSegmentRailPath(layouts, index, side, landingInset)),
+            connectFromPrevious: index > 0 &&
+                !suppressLandingRailing &&
+                sideCandidates.length > 0 &&
+                (layout.segment.segmentType === 'landing' ? landingContinuesOnPreferredSide : true),
+        };
+    });
+}
+function resolveLandingChainNextStair(layouts, index) {
+    const layout = layouts[index];
+    if (!layout || layout.segment.segmentType !== 'landing') {
+        return { isTerminalLandingBeforeStair: false };
+    }
+    let cursor = index;
+    while (cursor + 1 < layouts.length && layouts[cursor + 1]?.segment.segmentType === 'landing') {
+        cursor += 1;
+    }
+    const nextStairLayout = cursor + 1 < layouts.length && layouts[cursor + 1]?.segment.segmentType === 'stair'
+        ? layouts[cursor + 1]
+        : undefined;
+    return {
+        nextStairLayout,
+        isTerminalLandingBeforeStair: Boolean(nextStairLayout) && cursor === index,
+    };
+}
+function computeStairRailLayouts(segments) {
+    const transforms = computeSegmentTransforms(segments);
+    return segments.map((segment, index) => {
+        const transform = transforms[index];
+        const [centerOffsetX, centerOffsetZ] = rotateXZ(0, segment.length / 2, transform.rotation);
+        return {
+            center: [transform.position[0] + centerOffsetX, transform.position[2] + centerOffsetZ],
+            elevation: transform.position[1],
+            rotation: transform.rotation,
+            segment,
+        };
+    });
+}
+function buildSegmentRailPath(layouts, layoutIndex, side, landingInset) {
+    const layout = layouts[layoutIndex];
+    const segment = layout.segment;
+    const previousLayout = layoutIndex > 0 ? layouts[layoutIndex - 1] : undefined;
+    const nextLayout = layoutIndex >= 0 ? layouts[layoutIndex + 1] : undefined;
+    const steps = Math.max(1, segment.segmentType === 'landing' ? 1 : segment.stepCount);
+    const stepDepth = segment.length / steps;
+    const stepHeight = segment.segmentType === 'landing' ? 0 : segment.height / steps;
+    const flightSideOffset = side === 'left' ? segment.width / 2 - 0.045 : -segment.width / 2 + 0.045;
+    const flightStartX = previousLayout?.segment.segmentType === 'landing' ? -segment.length / 2 + landingInset : -segment.length / 2;
+    const flightEndX = nextLayout?.segment.segmentType === 'landing' ? segment.length / 2 - landingInset : segment.length / 2;
+    const landingFrontX = previousLayout?.segment.segmentType === 'stair' &&
+        segment.attachmentSide &&
+        segment.attachmentSide !== 'front'
+        ? -segment.length / 2 + landingInset
+        : segment.length / 2 - landingInset;
+    if (segment.segmentType === 'landing') {
+        const backX = -segment.length / 2 + landingInset;
+        const frontX = segment.length / 2 - landingInset;
+        const leftZ = segment.width / 2 - landingInset;
+        const rightZ = -segment.width / 2 + landingInset;
+        return {
+            side,
+            points: side === 'left'
+                ? [
+                    [backX, 0, leftZ],
+                    [frontX, 0, leftZ],
+                ]
+                : side === 'right'
+                    ? [
+                        [backX, 0, rightZ],
+                        [frontX, 0, rightZ],
+                    ]
+                    : [
+                        [landingFrontX, 0, leftZ],
+                        [landingFrontX, 0, rightZ],
+                    ],
+        };
+    }
+    return {
+        side,
+        points: [
+            ...(previousLayout?.segment.segmentType === 'landing' ? [] : [[flightStartX, stepHeight > 0 ? stepHeight : 0, flightSideOffset]]),
+            ...Array.from({ length: steps }).map((_, index) => [
+                -segment.length / 2 + stepDepth * index + stepDepth / 2,
+                stepHeight * (index + 1),
+                flightSideOffset,
+            ]),
+            ...(nextLayout?.segment.segmentType === 'landing'
+                ? []
+                : [[flightEndX, segment.height, flightSideOffset]]),
+        ],
+    };
+}
+function toWorldRailPoint(layout, point) {
+    const [localX, localY, localZ] = point;
+    const [offsetX, offsetZ] = rotateXZ(localZ, localX, layout.rotation);
+    return [layout.center[0] + offsetX, layout.elevation + localY, layout.center[1] + offsetZ];
+}
+function computeSegmentTransforms(segments) {
+    const transforms = [];
+    let currentPos = new THREE.Vector3(0, 0, 0);
+    let currentRot = 0;
+    for (let i = 0; i < segments.length; i++) {
+        const segment = segments[i];
+        if (i === 0) {
+            transforms.push({ position: [currentPos.x, currentPos.y, currentPos.z], rotation: currentRot });
+            continue;
+        }
+        const prev = segments[i - 1];
+        const localAttachPos = new THREE.Vector3();
+        let rotChange = 0;
+        switch (segment.attachmentSide) {
+            case 'front':
+                localAttachPos.set(0, prev.height, prev.length);
+                break;
+            case 'left':
+                localAttachPos.set(prev.width / 2, prev.height, prev.length / 2);
+                rotChange = Math.PI / 2;
+                break;
+            case 'right':
+                localAttachPos.set(-prev.width / 2, prev.height, prev.length / 2);
+                rotChange = -Math.PI / 2;
+                break;
+        }
+        localAttachPos.applyAxisAngle(new THREE.Vector3(0, 1, 0), currentRot);
+        currentPos = currentPos.clone().add(localAttachPos);
+        currentRot += rotChange;
+        transforms.push({ position: [currentPos.x, currentPos.y, currentPos.z], rotation: currentRot });
+    }
+    return transforms;
+}
+function rotateXZ(x, z, angle) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    return [x * cos + z * sin, -x * sin + z * cos];
+}
+function distance3(a, b) {
+    return Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
+}

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":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAcA,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, StairSystem, WallSystem, WindowSystem, } from '@pascal-app/core';
+import { CeilingSystem, DoorSystem, FenceSystem, 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(StairSystem, {}), _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(FenceSystem, {}), _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,YAoQzB,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,YAmTzB,CAAA;AAED,eAAe,oBAAoB,CAAA"}

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

@@ -32,6 +32,7 @@ const PostProcessingPasses = () => {
     const renderPipelineRef = useRef(null);
     const hasPipelineErrorRef = useRef(false);
     const retryCountRef = useRef(0);
+    const rebuildTimeoutRef = useRef(null);
     const [isInitialized, setIsInitialized] = useState(false);
     // Background color uniform — updated every frame via lerp, read by the TSL pipeline.
     // Initialised from the current theme so there's no flash on first render.
@@ -51,6 +52,10 @@ const PostProcessingPasses = () => {
     // Bump this to force a pipeline rebuild (used by retry logic)
     const [pipelineVersion, setPipelineVersion] = useState(0);
     const requestPipelineRebuild = useCallback(() => {
+        if (rebuildTimeoutRef.current !== null) {
+            clearTimeout(rebuildTimeoutRef.current);
+            rebuildTimeoutRef.current = null;
+        }
         setPipelineVersion((v) => v + 1);
     }, []);
     // Renderer initialization
@@ -77,12 +82,30 @@ const PostProcessingPasses = () => {
             mounted = false;
         };
     }, [renderer]);
-    // Reset retry count when project changes
+    // Reset retry state when project changes
     useEffect(() => {
+        // Intentionally touch projectId so the effect reruns on project switches.
+        void projectId;
         retryCountRef.current = 0;
+        if (rebuildTimeoutRef.current !== null) {
+            clearTimeout(rebuildTimeoutRef.current);
+            rebuildTimeoutRef.current = null;
+        }
+    }, [projectId]);
+    useEffect(() => {
+        return () => {
+            if (rebuildTimeoutRef.current !== null) {
+                clearTimeout(rebuildTimeoutRef.current);
+                rebuildTimeoutRef.current = null;
+            }
+        };
     }, []);
     // Build / rebuild the post-processing pipeline
     useEffect(() => {
+        // Intentionally touch these so React/biome treat project switches and retry bumps
+        // as explicit rebuild triggers instead of accidental extra dependencies.
+        void projectId;
+        void pipelineVersion;
         if (!(renderer && scene && camera && isInitialized)) {
             return;
         }
@@ -179,6 +202,7 @@ const PostProcessingPasses = () => {
             const renderPipeline = new RenderPipeline(renderer);
             renderPipeline.outputNode = finalOutput;
             renderPipelineRef.current = renderPipeline;
+            retryCountRef.current = 0;
         }
         catch (error) {
             hasPipelineErrorRef.current = true;
@@ -194,13 +218,33 @@ const PostProcessingPasses = () => {
             }
             renderPipelineRef.current = null;
         };
-    }, [renderer, scene, camera, hoverHighlightMode, isInitialized, zoneLayers]);
+    }, [
+        renderer,
+        scene,
+        camera,
+        hoverHighlightMode,
+        isInitialized,
+        zoneLayers,
+        projectId,
+        pipelineVersion,
+    ]);
     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);
         bgCurrent.current.lerp(bgTarget.current, Math.min(delta, 0.1) * 4);
         bgUniform.current.value.copy(bgCurrent.current);
         if (hasPipelineErrorRef.current || !renderPipelineRef.current) {
+            try {
+                if (renderer.setClearAlpha) {
+                    ;
+                    renderer.setClearAlpha(1);
+                }
+                ;
+                renderer.render(scene, camera);
+            }
+            catch (fallbackError) {
+                console.error('[viewer] Fallback render failed.', fallbackError);
+            }
             return;
         }
         try {
@@ -221,7 +265,10 @@ const PostProcessingPasses = () => {
                 // Auto-retry: schedule a pipeline rebuild if we haven't exceeded the retry limit
                 retryCountRef.current++;
                 console.warn(`[viewer] Scheduling post-processing rebuild (attempt ${retryCountRef.current}/${MAX_PIPELINE_RETRIES})`);
-                setTimeout(requestPipelineRebuild, RETRY_DELAY_MS);
+                if (rebuildTimeoutRef.current !== null) {
+                    clearTimeout(rebuildTimeoutRef.current);
+                }
+                rebuildTimeoutRef.current = setTimeout(requestPipelineRebuild, RETRY_DELAY_MS);
             }
             else {
                 console.error('[viewer] Post-processing retries exhausted. Rendering without post FX for this session.');

package/dist/components/viewer/selection-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection-manager.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/selection-manager.tsx"],"names":[],"mappings":"AAwQA,eAAO,MAAM,gBAAgB,+CAsE5B,CAAA"}
+{"version":3,"file":"selection-manager.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/selection-manager.tsx"],"names":[],"mappings":"AAiRA,eAAO,MAAM,gBAAgB,+CAuE5B,CAAA"}

package/dist/components/viewer/selection-manager.js

@@ -88,6 +88,12 @@ const isNodeInZone = (node, levelId, zoneId) => {
         const endIn = pointInPolygonWithTolerance(wall.end[0], wall.end[1], zone.polygon);
         return startIn || endIn;
     }
+    if (node.type === 'fence') {
+        const fence = node;
+        const startIn = pointInPolygonWithTolerance(fence.start[0], fence.start[1], zone.polygon);
+        const endIn = pointInPolygonWithTolerance(fence.end[0], fence.end[1], zone.polygon);
+        return startIn || endIn;
+    }
     if (node.type === 'slab' || node.type === 'ceiling') {
         const poly = node.polygon;
         if (!poly?.length)
@@ -164,7 +170,7 @@ const getStrategy = () => {
     }
     // Zone selected -> can select/hover contents (walls, items, slabs, ceilings, roofs, windows, doors)
     return {
-        types: ['wall', 'item', 'slab', 'ceiling', 'roof', 'roof-segment', 'window', 'door'],
+        types: ['wall', 'fence', 'item', 'slab', 'ceiling', 'roof', 'roof-segment', 'window', 'door'],
         handleClick: (node, nativeEvent) => {
             let nodeToSelect = node;
             if (node.type === 'roof-segment' && node.parentId) {
@@ -191,6 +197,7 @@ const getStrategy = () => {
         isValid: (node) => {
             const validTypes = [
                 'wall',
+                'fence',
                 'item',
                 'slab',
                 'ceiling',
@@ -245,6 +252,7 @@ export const SelectionManager = () => {
             'level',
             'zone',
             'wall',
+            'fence',
             'item',
             'slab',
             'ceiling',

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

@@ -1,4 +1,4 @@
-import { type BuildingEvent, type BuildingNode, type CeilingEvent, type CeilingNode, type DoorEvent, type DoorNode, type ItemEvent, type ItemNode, type LevelEvent, type LevelNode, type RoofEvent, type RoofNode, type RoofSegmentEvent, type RoofSegmentNode, type SiteEvent, type SiteNode, type SlabEvent, type SlabNode, type StairEvent, type StairNode, type StairSegmentEvent, type StairSegmentNode, type WallEvent, type WallNode, type WindowEvent, type WindowNode, type ZoneEvent, type ZoneNode } from '@pascal-app/core';
+import { type BuildingEvent, type BuildingNode, type CeilingEvent, type CeilingNode, type DoorEvent, type DoorNode, type FenceEvent, type FenceNode, type ItemEvent, type ItemNode, type LevelEvent, type LevelNode, type RoofEvent, type RoofNode, type RoofSegmentEvent, type RoofSegmentNode, type SiteEvent, type SiteNode, type SlabEvent, type SlabNode, type StairEvent, type StairNode, type StairSegmentEvent, type StairSegmentNode, type WallEvent, type WallNode, type WindowEvent, type WindowNode, type ZoneEvent, type ZoneNode } from '@pascal-app/core';
 import type { ThreeEvent } from '@react-three/fiber';
 type NodeConfig = {
     site: {
@@ -13,6 +13,10 @@ type NodeConfig = {
         node: WallNode;
         event: WallEvent;
     };
+    fence: {
+        node: FenceNode;
+        event: FenceEvent;
+    };
     building: {
         node: BuildingNode;
         event: BuildingEvent;

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,EAChB,KAAK,SAAS,EACd,KAAK,QAAQ,EAGb,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAGpD,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;IAC1C,cAAc,EAAE;QAAE,IAAI,EAAE,eAAe,CAAC;QAAC,KAAK,EAAE,gBAAgB,CAAA;KAAE,CAAA;IAClE,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,CAAA;IAC7C,eAAe,EAAE;QAAE,IAAI,EAAE,gBAAgB,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,CAAA;IACrE,MAAM,EAAE;QAAE,IAAI,EAAE,UAAU,CAAC;QAAC,KAAK,EAAE,WAAW,CAAA;KAAE,CAAA;IAChD,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;qBAK1B,UAAU,CAAC,YAAY,CAAC;iBAQ5B,UAAU,CAAC,YAAY,CAAC;wBAIjB,UAAU,CAAC,YAAY,CAAC;wBAIxB,UAAU,CAAC,YAAY,CAAC;uBAIzB,UAAU,CAAC,YAAY,CAAC;uBAIxB,UAAU,CAAC,YAAY,CAAC;uBAIxB,UAAU,CAAC,YAAY,CAAC;EAK9C"}
+{"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,EAChB,KAAK,SAAS,EACd,KAAK,QAAQ,EAGb,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAGpD,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,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,CAAA;IAC7C,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;IAC1C,cAAc,EAAE;QAAE,IAAI,EAAE,eAAe,CAAC;QAAC,KAAK,EAAE,gBAAgB,CAAA;KAAE,CAAA;IAClE,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,CAAA;IAC7C,eAAe,EAAE;QAAE,IAAI,EAAE,gBAAgB,CAAC;QAAC,KAAK,EAAE,iBAAiB,CAAA;KAAE,CAAA;IACrE,MAAM,EAAE;QAAE,IAAI,EAAE,UAAU,CAAC;QAAC,KAAK,EAAE,WAAW,CAAA;KAAE,CAAA;IAChD,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;qBAK1B,UAAU,CAAC,YAAY,CAAC;iBAQ5B,UAAU,CAAC,YAAY,CAAC;wBAIjB,UAAU,CAAC,YAAY,CAAC;wBAIxB,UAAU,CAAC,YAAY,CAAC;uBAIzB,UAAU,CAAC,YAAY,CAAC;uBAIxB,UAAU,CAAC,YAAY,CAAC;uBAIxB,UAAU,CAAC,YAAY,CAAC;EAK9C"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Viewer } from './components/viewer';
+export { SSGI_PARAMS } from './components/viewer/post-processing';
 export { WalkthroughControls } from './components/viewer/walkthrough-controls';
 export { ASSETS_CDN_URL, resolveAssetUrl, resolveCdnUrl } from './lib/asset-url';
 export { SCENE_LAYER, ZONE_LAYER } from './lib/layers';

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,mBAAmB,EAAE,MAAM,0CAA0C,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAChF,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACtD,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,cAAc,EACd,wBAAwB,EACxB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,eAAe,GAChB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAC5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,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,WAAW,EAAE,MAAM,qCAAqC,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAA;AAC9E,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAChF,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACtD,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,cAAc,EACd,wBAAwB,EACxB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,eAAe,GAChB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAC5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA"}

package/dist/index.js

@@ -1,4 +1,5 @@
 export { default as Viewer } from './components/viewer';
+export { SSGI_PARAMS } from './components/viewer/post-processing';
 export { WalkthroughControls } from './components/viewer/walkthrough-controls';
 export { ASSETS_CDN_URL, resolveAssetUrl, resolveCdnUrl } from './lib/asset-url';
 export { SCENE_LAYER, ZONE_LAYER } from './lib/layers';

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

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

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

@@ -1,4 +1,4 @@
-import { sceneRegistry } from '@pascal-app/core';
+import { emitter, sceneRegistry } from '@pascal-app/core';
 import { useEffect } from 'react';
 import useViewer from '../../store/use-viewer';
 export const GuideSystem = () => {
@@ -12,5 +12,30 @@ export const GuideSystem = () => {
             }
         });
     }, [showGuides]);
+    useEffect(() => {
+        const hideForCapture = () => {
+            const guides = sceneRegistry.byType.guide || new Set();
+            guides.forEach((guideId) => {
+                const node = sceneRegistry.nodes.get(guideId);
+                if (node)
+                    node.visible = false;
+            });
+        };
+        const restoreAfterCapture = () => {
+            const showGuidesNow = useViewer.getState().showGuides;
+            const guides = sceneRegistry.byType.guide || new Set();
+            guides.forEach((guideId) => {
+                const node = sceneRegistry.nodes.get(guideId);
+                if (node)
+                    node.visible = showGuidesNow;
+            });
+        };
+        emitter.on('thumbnail:before-capture', hideForCapture);
+        emitter.on('thumbnail:after-capture', restoreAfterCapture);
+        return () => {
+            emitter.off('thumbnail:before-capture', hideForCapture);
+            emitter.off('thumbnail:after-capture', restoreAfterCapture);
+        };
+    }, []);
     return null;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"scan-system.d.ts","sourceRoot":"","sources":["../../../src/systems/scan/scan-system.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,YAatB,CAAA"}
+{"version":3,"file":"scan-system.d.ts","sourceRoot":"","sources":["../../../src/systems/scan/scan-system.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,YAsCtB,CAAA"}

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

@@ -1,4 +1,4 @@
-import { sceneRegistry } from '@pascal-app/core';
+import { emitter, sceneRegistry } from '@pascal-app/core';
 import { useEffect } from 'react';
 import useViewer from '../../store/use-viewer';
 export const ScanSystem = () => {
@@ -12,5 +12,30 @@ export const ScanSystem = () => {
             }
         });
     }, [showScans]);
+    useEffect(() => {
+        const hideForCapture = () => {
+            const scans = sceneRegistry.byType.scan || new Set();
+            scans.forEach((scanId) => {
+                const node = sceneRegistry.nodes.get(scanId);
+                if (node)
+                    node.visible = false;
+            });
+        };
+        const restoreAfterCapture = () => {
+            const showScansNow = useViewer.getState().showScans;
+            const scans = sceneRegistry.byType.scan || new Set();
+            scans.forEach((scanId) => {
+                const node = sceneRegistry.nodes.get(scanId);
+                if (node)
+                    node.visible = showScansNow;
+            });
+        };
+        emitter.on('thumbnail:before-capture', hideForCapture);
+        emitter.on('thumbnail:after-capture', restoreAfterCapture);
+        return () => {
+            emitter.off('thumbnail:before-capture', hideForCapture);
+            emitter.off('thumbnail:after-capture', restoreAfterCapture);
+        };
+    }, []);
     return null;
 };

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":"AAoMA,eAAO,MAAM,UAAU,YAgFtB,CAAA"}
+{"version":3,"file":"wall-cutout.d.ts","sourceRoot":"","sources":["../../../src/systems/wall/wall-cutout.tsx"],"names":[],"mappings":"AAsMA,eAAO,MAAM,UAAU,YAoHtB,CAAA"}

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

@@ -1,6 +1,6 @@
-import { baseMaterial, sceneRegistry, useScene, } from '@pascal-app/core';
+import { baseMaterial, emitter, sceneRegistry, useScene, } from '@pascal-app/core';
 import { useFrame } from '@react-three/fiber';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Color } from 'three';
 import { Fn, float, fract, length, mix, positionLocal, smoothstep, step, vec2 } from 'three/tsl';
 import { MeshStandardNodeMaterial, Vector3 } from 'three/webgpu';
@@ -216,5 +216,39 @@ export const WallCutout = () => {
             lastHighlightKey.current = highlightKey;
         }
     });
+    useEffect(() => {
+        const snapshot = new Map();
+        const restoreForCapture = () => {
+            sceneRegistry.byType.wall.forEach((wallId) => {
+                const wallMesh = sceneRegistry.nodes.get(wallId);
+                if (!wallMesh)
+                    return;
+                const wallNode = useScene.getState().nodes[wallId];
+                if (!wallNode || wallNode.type !== 'wall')
+                    return;
+                const mats = getMaterialsForWall(wallNode);
+                const current = wallMesh.material;
+                snapshot.set(wallMesh, current);
+                if (current === mats.highlightedVisible || current === mats.deleteVisible) {
+                    wallMesh.material = mats.visible;
+                }
+                else if (current === mats.highlightedInvisible || current === mats.deleteInvisible) {
+                    wallMesh.material = mats.invisible;
+                }
+            });
+        };
+        const reapplyAfterCapture = () => {
+            snapshot.forEach((mat, mesh) => {
+                mesh.material = mat;
+            });
+            snapshot.clear();
+        };
+        emitter.on('thumbnail:before-capture', restoreForCapture);
+        emitter.on('thumbnail:after-capture', reapplyAfterCapture);
+        return () => {
+            emitter.off('thumbnail:before-capture', restoreForCapture);
+            emitter.off('thumbnail:after-capture', reapplyAfterCapture);
+        };
+    }, []);
     return null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/viewer",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "3D viewer component for Pascal building editor",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,7 +22,7 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "@pascal-app/core": "^0.1.4",
+    "@pascal-app/core": "^0.5.1",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "react": "^18 || ^19",