@pascal-app/viewer 0.5.1 → 0.6.0

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

@@ -1,24 +1,67 @@
 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 { useRegistry, useScene, } from '@pascal-app/core';
+import { useEffect, 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 { createMaterial, createMaterialFromPresetRef, DEFAULT_STAIR_MATERIAL } from '../../../lib/materials';
+import { getStairRailingMaterial, getStairBodyMaterials, } from '../../../systems/stair/stair-materials';
 import { NodeRenderer } from '../node-renderer';
 export const StairRenderer = ({ node }) => {
     const ref = useRef(null);
+    const isSegmentBasedStair = node.stairType === 'straight';
     useRegistry(node.id, 'stair', ref);
     useLayoutEffect(() => {
         useScene.getState().markDirty(node.id);
     }, [node.id]);
     const handlers = useNodeEvents(node, 'stair');
     const material = useMemo(() => {
+        const presetMaterial = createMaterialFromPresetRef(node.materialPreset);
+        if (presetMaterial)
+            return presetMaterial;
         const mat = node.material;
         if (!mat)
             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] }) }), 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))) })] }));
+    }, [
+        node.materialPreset,
+        node.material,
+        node.material?.preset,
+        node.material?.properties,
+        node.material?.texture,
+    ]);
+    const straightBodyMaterials = useMemo(() => getStairBodyMaterials(node), [
+        node.material,
+        node.materialPreset,
+        node.railingMaterial,
+        node.railingMaterialPreset,
+        node.sideMaterial,
+        node.sideMaterialPreset,
+        node.treadMaterial,
+        node.treadMaterialPreset,
+    ]);
+    const railingMaterial = useMemo(() => getStairRailingMaterial(node), [
+        node.material,
+        node.materialPreset,
+        node.railingMaterial,
+        node.railingMaterialPreset,
+        node.sideMaterial,
+        node.sideMaterialPreset,
+        node.treadMaterial,
+        node.treadMaterialPreset,
+    ]);
+    const straightPlaceholderGeometry = useMemo(() => {
+        const geometry = new THREE.BufferGeometry();
+        geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3));
+        geometry.addGroup(0, 0, 0);
+        geometry.addGroup(0, 0, 1);
+        return geometry;
+    }, []);
+    useEffect(() => {
+        return () => {
+            straightPlaceholderGeometry.dispose();
+        };
+    }, [straightPlaceholderGeometry]);
+    return (_jsxs("group", { "position-x": node.position[0], "position-z": node.position[2], ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers, children: [isSegmentBasedStair ? (_jsx("mesh", { castShadow: true, geometry: straightPlaceholderGeometry, material: straightBodyMaterials, name: "merged-stair", receiveShadow: true })) : null, !isSegmentBasedStair ? _jsx(CurvedStairBody, { bodyMaterials: straightBodyMaterials, stair: node }) : null, _jsx(StairRailings, { material: railingMaterial, stair: node }), isSegmentBasedStair ? (_jsx("group", { name: "segments-wrapper", visible: false, children: (node.children ?? []).map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))) })) : null] }));
 };
 function StairRailings({ stair, material }) {
     const nodes = useScene((state) => state.nodes);
@@ -60,7 +103,7 @@ function StairRailings({ stair, material }) {
                         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) => {
+                return (_jsxs("group", { children: [sidePoints.map((point, pointIndex) => (_jsx("mesh", { castShadow: true, geometry: BALUSTER_GEOMETRY, material: material, name: "stair-railing-baluster", 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;
@@ -71,7 +114,11 @@ function StairRailings({ stair, material }) {
     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) => {
+    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, name: "stair-railing-baluster", 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;
@@ -94,23 +141,43 @@ function StairRailings({ stair, material }) {
                         const lastPoint = entry.points[entry.points.length - 1];
                         return {
                             entry,
-                            distance: lastPoint ? distance3(toWorldRailPoint(previousPath.layout, lastPoint), currentWorldPoint) : Number.POSITIVE_INFINITY,
+                            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
+                    const previousPoint = 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}`));
+                    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);
+const STAIR_TREAD_MATERIAL_INDEX = 0;
+const STAIR_SIDE_MATERIAL_INDEX = 1;
 function RailSegment({ start, end, radius, material, }) {
     const startVector = useMemo(() => new THREE.Vector3(...start), [start]);
     const endVector = useMemo(() => new THREE.Vector3(...end), [end]);
@@ -118,9 +185,10 @@ function RailSegment({ start, end, radius, material, }) {
     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)] }));
+    return (_jsx("mesh", { castShadow: true, geometry: RAIL_GEOMETRY, material: material, name: "stair-railing-rail", 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 }) {
+function CurvedStairBody({ stair, bodyMaterials, }) {
+    const sideMaterial = bodyMaterials[1];
     const stepCount = Math.max(2, Math.round(stair.stepCount ?? 10));
     const totalRise = Math.max(stair.totalRise ?? 2.5, 0.1);
     const stepHeight = totalRise / stepCount;
@@ -135,34 +203,47 @@ function CurvedStairBody({ stair, material }) {
     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)
+        ? 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) => {
+    return (_jsxs("group", { name: isSpiral ? 'spiral-stair' : 'curved-stair', children: [isSpiral && (stair.showCenterColumn ?? true) ? (_jsx("mesh", { castShadow: true, receiveShadow: true, material: sideMaterial, name: "stair-side", 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 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 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),
+                return (_jsxs("group", { "position-y": stepY, children: [isSpiral && (stair.showStepSupports ?? true) ? (_jsx("mesh", { castShadow: true, material: sideMaterial, name: "stair-side", 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),
+                                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] }));
+                                ] }) })) : null, _jsx(CurvedStepMesh, { endAngle: endAngle, innerRadius: innerRadius, material: bodyMaterials, 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: bodyMaterials, 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 });
+    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);
@@ -173,8 +254,30 @@ function buildCurvedStepGeometry(innerRadius, outerRadius, startAngle, endAngle,
     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 uvs = [];
+    const triangleMaterialIndices = [];
     const pointOnArc = (radius, angle, y) => new THREE.Vector3(Math.cos(angle) * radius, y, Math.sin(angle) * radius);
-    const pushTriangle = (a, b, c, normal) => {
+    const pushUv = (point, normal, materialIndex) => {
+        if (materialIndex === STAIR_TREAD_MATERIAL_INDEX) {
+            const angle = Math.atan2(point.z, point.x);
+            const arcOffset = (angle - startAngle) * Math.max((innerRadius + outerRadius) * 0.5, 0.01);
+            uvs.push(arcOffset, Math.sqrt(point.x * point.x + point.z * point.z) - innerRadius);
+            return;
+        }
+        const absX = Math.abs(normal.x);
+        const absY = Math.abs(normal.y);
+        const absZ = Math.abs(normal.z);
+        if (absY >= absX && absY >= absZ) {
+            uvs.push(point.x, point.z);
+        }
+        else if (absX >= absZ) {
+            uvs.push(point.z, point.y);
+        }
+        else {
+            uvs.push(point.x, point.y);
+        }
+    };
+    const pushTriangle = (a, b, c, normal, materialIndex) => {
         const edgeAB = b.clone().sub(a);
         const edgeAC = c.clone().sub(a);
         const faceNormal = edgeAB.cross(edgeAC);
@@ -182,11 +285,13 @@ function buildCurvedStepGeometry(innerRadius, outerRadius, startAngle, endAngle,
         for (const point of ordered) {
             positions.push(point.x, point.y, point.z);
             normals.push(normal.x, normal.y, normal.z);
+            pushUv(point, normal, materialIndex);
         }
+        triangleMaterialIndices.push(materialIndex);
     };
-    const pushQuad = (a, b, c, d, normal) => {
-        pushTriangle(a, b, c, normal);
-        pushTriangle(a, c, d, normal);
+    const pushQuad = (a, b, c, d, normal, materialIndex) => {
+        pushTriangle(a, b, c, normal, materialIndex);
+        pushTriangle(a, c, d, normal, materialIndex);
     };
     const upNormal = new THREE.Vector3(0, 1, 0);
     const downNormal = new THREE.Vector3(0, -1, 0);
@@ -206,10 +311,10 @@ function buildCurvedStepGeometry(innerRadius, outerRadius, startAngle, endAngle,
         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);
+        pushQuad(innerStartTop, outerStartTop, outerEndTop, innerEndTop, upNormal, STAIR_TREAD_MATERIAL_INDEX);
+        pushQuad(innerStartBottom, innerEndBottom, outerEndBottom, outerStartBottom, downNormal, STAIR_SIDE_MATERIAL_INDEX);
+        pushQuad(innerStartBottom, innerStartTop, innerEndTop, innerEndBottom, innerNormal, STAIR_SIDE_MATERIAL_INDEX);
+        pushQuad(outerStartBottom, outerEndBottom, outerEndTop, outerStartTop, outerNormal, STAIR_SIDE_MATERIAL_INDEX);
     }
     const startInnerBottom = pointOnArc(innerRadius, startAngle, y0);
     const startOuterBottom = pointOnArc(outerRadius, startAngle, y0);
@@ -221,11 +326,27 @@ function buildCurvedStepGeometry(innerRadius, outerRadius, startAngle, endAngle,
     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);
+    pushQuad(startInnerBottom, startOuterBottom, startOuterTop, startInnerTop, startNormal, STAIR_SIDE_MATERIAL_INDEX);
+    pushQuad(endInnerBottom, endInnerTop, endOuterTop, endOuterBottom, endNormal, STAIR_SIDE_MATERIAL_INDEX);
     const geometry = new THREE.BufferGeometry();
     geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
     geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+    geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
+    geometry.clearGroups();
+    let currentMaterial = triangleMaterialIndices[0];
+    let groupStart = 0;
+    for (let triangleIndex = 1; triangleIndex < triangleMaterialIndices.length; triangleIndex++) {
+        const materialIndex = triangleMaterialIndices[triangleIndex];
+        if (materialIndex === currentMaterial)
+            continue;
+        geometry.addGroup(groupStart * 3, (triangleIndex - groupStart) * 3, currentMaterial);
+        groupStart = triangleIndex;
+        currentMaterial = materialIndex;
+    }
+    if (triangleMaterialIndices.length > 0) {
+        geometry.addGroup(groupStart * 3, (triangleMaterialIndices.length - groupStart) * 3, currentMaterial ?? STAIR_SIDE_MATERIAL_INDEX);
+    }
+    geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(uvs.slice(), 2));
     geometry.computeVertexNormals();
     return geometry;
 }
@@ -281,7 +402,8 @@ function buildStairRailPaths(segments, railingMode) {
                     ? ['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'),
+                    !(previousLayout?.segment.segmentType === 'landing' &&
+                        layout.segment.segmentType === 'landing'),
             };
         });
     }
@@ -310,7 +432,9 @@ function buildStairRailPaths(segments, railingMode) {
             nextAttachmentSide === railingMode) ||
             suppressMiddleLandingOnPreferredTurnSide;
         const landingContinuesOnPreferredSide = layout.segment.segmentType === 'landing'
-            ? nextAttachmentSide == null || nextAttachmentSide === 'front' || nextAttachmentSide === railingMode
+            ? nextAttachmentSide == null ||
+                nextAttachmentSide === 'front' ||
+                nextAttachmentSide === railingMode
             : true;
         const sideCandidates = suppressLandingRailing
             ? []
@@ -395,8 +519,12 @@ function buildSegmentRailPath(layouts, layoutIndex, side, landingInset) {
     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 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'
@@ -428,7 +556,9 @@ function buildSegmentRailPath(layouts, layoutIndex, side, landingInset) {
     return {
         side,
         points: [
-            ...(previousLayout?.segment.segmentType === 'landing' ? [] : [[flightStartX, stepHeight > 0 ? stepHeight : 0, flightSideOffset]]),
+            ...(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),
@@ -452,7 +582,10 @@ function computeSegmentTransforms(segments) {
     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 });
+            transforms.push({
+                position: [currentPos.x, currentPos.y, currentPos.z],
+                rotation: currentRot,
+            });
             continue;
         }
         const prev = segments[i - 1];

package/dist/components/renderers/stair-segment/stair-segment-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stair-segment-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/stair-segment/stair-segment-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAyB,MAAM,kBAAkB,CAAA;AAM/E,eAAO,MAAM,oBAAoB,GAAI,UAAU;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,4CA8BxE,CAAA"}
+{"version":3,"file":"stair-segment-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/stair-segment/stair-segment-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,gBAAgB,EAAyB,MAAM,kBAAkB,CAAA;AAM/G,eAAO,MAAM,oBAAoB,GAAI,UAAU;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,4CA4DxE,CAAA"}

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

@@ -1,20 +1,49 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRegistry, useScene } from '@pascal-app/core';
-import { useLayoutEffect, useMemo, useRef } from 'react';
+import { useEffect, 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 { getStraightStairSegmentBodyMaterials } from '../../../systems/stair/stair-materials';
 export const StairSegmentRenderer = ({ node }) => {
     const ref = useRef(null);
+    const nodes = useScene((state) => state.nodes);
     useRegistry(node.id, 'stair-segment', ref);
     useLayoutEffect(() => {
         useScene.getState().markDirty(node.id);
     }, [node.id]);
     const handlers = useNodeEvents(node, 'stair-segment');
+    const parentNode = node.parentId ? nodes[node.parentId] : undefined;
     const material = useMemo(() => {
-        const mat = node.material;
-        if (!mat)
-            return DEFAULT_STAIR_MATERIAL;
-        return createMaterial(mat);
-    }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
-    return (_jsx("mesh", { material: material, position: node.position, ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
+        return getStraightStairSegmentBodyMaterials(node, parentNode);
+    }, [
+        node.materialPreset,
+        node.material,
+        node.material?.preset,
+        node.material?.properties,
+        node.material?.texture,
+        parentNode?.materialPreset,
+        parentNode?.material,
+        parentNode?.material?.preset,
+        parentNode?.material?.properties,
+        parentNode?.material?.texture,
+        parentNode?.railingMaterialPreset,
+        parentNode?.railingMaterial,
+        parentNode?.sideMaterialPreset,
+        parentNode?.sideMaterial,
+        parentNode?.treadMaterialPreset,
+        parentNode?.treadMaterial,
+    ]);
+    const placeholderGeometry = useMemo(() => {
+        const geometry = new THREE.BufferGeometry();
+        geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3));
+        geometry.addGroup(0, 0, 0);
+        geometry.addGroup(0, 0, 1);
+        return geometry;
+    }, []);
+    useEffect(() => {
+        return () => {
+            placeholderGeometry.dispose();
+        };
+    }, [placeholderGeometry]);
+    return (_jsx("mesh", { geometry: placeholderGeometry, material: material, position: node.position, ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"wall-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/wall/wall-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAOvE,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CA6BxD,CAAA"}
+{"version":3,"file":"wall-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/wall/wall-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAOvE,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAwBxD,CAAA"}

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

@@ -1,8 +1,8 @@
 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 { useLayoutEffect, useRef } from 'react';
 import { useNodeEvents } from '../../../hooks/use-node-events';
-import { createMaterial, DEFAULT_WALL_MATERIAL } from '../../../lib/materials';
+import { getVisibleWallMaterials } from '../../../systems/wall/wall-materials';
 import { NodeRenderer } from '../node-renderer';
 export const WallRenderer = ({ node }) => {
     const ref = useRef(null);
@@ -11,11 +11,6 @@ export const WallRenderer = ({ node }) => {
         useScene.getState().markDirty(node.id);
     }, [node.id]);
     const handlers = useNodeEvents(node, 'wall');
-    const material = useMemo(() => {
-        const mat = node.material;
-        if (!mat)
-            return DEFAULT_WALL_MATERIAL;
-        return createMaterial(mat);
-    }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
-    return (_jsxs("mesh", { castShadow: true, material: material, receiveShadow: true, ref: ref, visible: node.visible, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("mesh", { name: "collision-mesh", visible: false, ...handlers, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }), node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId)))] }));
+    const material = getVisibleWallMaterials(node);
+    return (_jsxs("mesh", { castShadow: true, material: material, receiveShadow: true, ref: ref, visible: node.visible, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("mesh", { name: "collision-mesh", visible: false, ...handlers, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }), node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, `${node.id}:${childId}`)))] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"window-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/window/window-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAM/D,eAAO,MAAM,cAAc,GAAI,UAAU;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,4CA2B5D,CAAA"}
+{"version":3,"file":"window-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/window/window-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAMzE,eAAO,MAAM,cAAc,GAAI,UAAU;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,4CA8B5D,CAAA"}

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

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRegistry } from '@pascal-app/core';
-import { useMemo, useRef } from 'react';
+import { useRegistry, useScene } from '@pascal-app/core';
+import { useLayoutEffect, useMemo, useRef } from 'react';
 import { useNodeEvents } from '../../../hooks/use-node-events';
 import { createMaterial, DEFAULT_WINDOW_MATERIAL } from '../../../lib/materials';
 export const WindowRenderer = ({ node }) => {
     const ref = useRef(null);
     useRegistry(node.id, 'window', ref);
+    useLayoutEffect(() => {
+        useScene.getState().markDirty(node.id);
+    }, [node.id]);
     const handlers = useNodeEvents(node, 'window');
     const isTransient = !!node.metadata?.isTransient;
     const material = useMemo(() => {

package/dist/components/viewer/frame-limiter.d.ts

@@ -0,0 +1,6 @@
+type FrameLimiterProps = {
+    fps?: number;
+};
+declare const FrameLimiter: React.FC<FrameLimiterProps>;
+export default FrameLimiter;
+//# sourceMappingURL=frame-limiter.d.ts.map

package/dist/components/viewer/frame-limiter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-limiter.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/frame-limiter.tsx"],"names":[],"mappings":"AAGA,KAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgC7C,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/components/viewer/frame-limiter.js

@@ -0,0 +1,31 @@
+import { useThree } from '@react-three/fiber';
+import { useLayoutEffect } from 'react';
+const FrameLimiter = ({ fps = 50 }) => {
+    const { advance, set, frameloop: initFrameloop } = useThree();
+    useLayoutEffect(() => {
+        let elapsed = 0;
+        let then = 0;
+        let i = 0;
+        let raf = null;
+        const interval = 1000 / fps;
+        function tick(t) {
+            raf = requestAnimationFrame(tick);
+            elapsed = t - then;
+            if (elapsed > interval) {
+                advance(i);
+                i += elapsed / 1000 - (elapsed % interval) / 1000;
+                then = t - (elapsed % interval);
+            }
+        }
+        set({ frameloop: 'never' });
+        raf = requestAnimationFrame(tick);
+        return () => {
+            if (raf) {
+                cancelAnimationFrame(raf);
+            }
+            set({ frameloop: initFrameloop });
+        };
+    }, [fps, advance, set, initFrameloop]);
+    return null;
+};
+export default FrameLimiter;

package/dist/components/viewer/ground-occluder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ground-occluder.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/ground-occluder.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,+CA+F1B,CAAA"}
+{"version":3,"file":"ground-occluder.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/ground-occluder.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,+CAuG1B,CAAA"}

package/dist/components/viewer/ground-occluder.js

@@ -31,7 +31,11 @@ export const GroundOccluder = () => {
         // reveal their footprint on the level-zero ground material.
         const polygons = [];
         Object.values(nodes).forEach((node) => {
-            if (!(node.type === 'slab' && node.visible && node.polygon.length >= 3)) {
+            if (!(node.type === 'slab' &&
+                node.visible &&
+                node.polygon.length >= 3 &&
+                // Only recessed slabs should punch through the ground plane.
+                (node.elevation ?? 0.05) < 0)) {
                 return;
             }
             if (Number.isFinite(lowestLevelIndex)) {

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":"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"}
+{"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;AA2CrC,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAc,SAAQ,kBAAkB,CAAC,OAAO,KAAK,CAAC;KAAG;CACpE;AAwCD,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,CAsEjC,CAAA;AASD,eAAe,MAAM,CAAA"}

package/dist/components/viewer/index.js

@@ -13,6 +13,7 @@ import { ScanSystem } from '../../systems/scan/scan-system';
 import { WallCutout } from '../../systems/wall/wall-cutout';
 import { ZoneSystem } from '../../systems/zone/zone-system';
 import { SceneRenderer } from '../renderers/scene-renderer';
+import FrameLimiter from './frame-limiter';
 import { Lights } from './lights';
 import { PerfMonitor } from './perf-monitor';
 import PostProcessing from './post-processing';
@@ -40,13 +41,6 @@ function AnimatedBackground({ isDark }) {
     return null;
 }
 extend(THREE);
-/**
- * Monitors the WebGPU device for loss events and logs them.
- * WebGPU device loss can happen when:
- *  - Tab is backgrounded and OS reclaims GPU
- *  - Driver crash or GPU reset
- *  - Browser security policy kills the context
- */
 function GPUDeviceWatcher() {
     const gl = useThree((s) => s.gl);
     useEffect(() => {
@@ -55,7 +49,7 @@ function GPUDeviceWatcher() {
         if (!device)
             return;
         device.lost.then((info) => {
-            console.error(`[viewer] WebGPU device lost: reason="${info.reason}", message="${info.message}". ` +
+            console.error(`[viewer] WebGPU device lost: reason="${info.reason ?? 'unknown'}", message="${info.message ?? ''}". ` +
                 'The page must be reloaded to recover the GPU context.');
         });
     }, [gl]);
@@ -63,18 +57,24 @@ function GPUDeviceWatcher() {
 }
 const Viewer = ({ children, selectionManager = 'default', perf = false, }) => {
     const theme = useViewer((state) => state.theme);
-    return (_jsxs(Canvas, { camera: { position: [50, 50, 50], fov: 50 }, className: `transition-colors duration-700 ${theme === 'dark' ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`, dpr: [1, 1.5], gl: (props) => {
+    return (_jsxs(Canvas, { camera: { position: [50, 50, 50], fov: 50 }, className: `transition-colors duration-700 ${theme === 'dark' ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`, dpr: [1, 1.5], frameloop: "never", gl: async (props) => {
             const renderer = new THREE.WebGPURenderer(props);
             renderer.toneMapping = THREE.ACESFilmicToneMapping;
             renderer.toneMappingExposure = 0.9;
-            // renderer.init() // Only use when using <DebugRenderer />
+            // Awaiting init() is required when the browser falls back to the
+            // WebGL2 backend (Safari without the WebGPU flag, older Chrome on
+            // machines without a WebGPU device). In native WebGPU mode the
+            // init resolves almost instantly. Without this await, the first
+            // render throws "Renderer: .render() called before the backend is
+            // initialized" from the post-processing fallback path.
+            await renderer.init();
             return renderer;
         }, resize: {
             debounce: 100,
         }, 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(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] }));
+        }, children: [_jsx(FrameLimiter, { fps: 50 }), _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,YAmTzB,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;AAuBD,QAAA,MAAM,oBAAoB,YAoSzB,CAAA;AAED,eAAe,oBAAoB,CAAA"}