@pascal-app/viewer 0.6.0 → 0.8.0

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

@@ -2,25 +2,11 @@ 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 { createMaterial, createMaterialFromPresetRef, DEFAULT_STAIR_MATERIAL, } from '../../../lib/materials';
+import { DEFAULT_STAIR_MATERIAL } from '../../../lib/materials';
 export const FenceRenderer = ({ node }) => {
     const ref = useRef(null);
     const handlers = useNodeEvents(node, 'fence');
-    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.materialPreset,
-        node.material,
-        node.material?.preset,
-        node.material?.properties,
-        node.material?.texture,
-    ]);
+    const material = useMemo(() => DEFAULT_STAIR_MATERIAL, []);
     useRegistry(node.id, 'fence', ref);
     useLayoutEffect(() => {
         useScene.getState().markDirty(node.id);

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

@@ -12,7 +12,7 @@ export const GuideRenderer = ({ node }) => {
     const ref = useRef(null);
     useRegistry(node.id, 'guide', ref);
     const resolvedUrl = useAssetUrl(node.url);
-    return (_jsx("group", { position: node.position, ref: ref, rotation: [0, node.rotation[1], 0], visible: showGuides, children: resolvedUrl && (_jsx(Suspense, { children: _jsx(GuidePlane, { opacity: node.opacity, scale: node.scale, url: resolvedUrl }) })) }));
+    return (_jsx("group", { position: node.position, ref: ref, rotation: [0, node.rotation[1], 0], visible: showGuides && node.visible !== false, children: resolvedUrl && (_jsx(Suspense, { children: _jsx(GuidePlane, { opacity: node.opacity, scale: node.scale, url: resolvedUrl }) })) }));
 };
 const GuidePlane = ({ url, scale, opacity }) => {
     const tex = useLoader(TextureLoader, url);

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

@@ -1 +1 @@
-{"version":3,"file":"item-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/item/item-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EAKd,MAAM,kBAAkB,CAAA;AAkCzB,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAiBxD,CAAA"}
+{"version":3,"file":"item-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/item/item-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,QAAQ,EAKd,MAAM,kBAAkB,CAAA;AAmCzB,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAiBxD,CAAA"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { baseMaterial, glassMaterial, useInteractive, useRegistry, useScene, } from '@pascal-app/core';
+import { useInteractive, useRegistry, useScene, } from '@pascal-app/core';
 import { useAnimations } from '@react-three/drei';
 import { Clone } from '@react-three/drei/core/Clone';
 import { useGLTF } from '@react-three/drei/core/Gltf';
@@ -10,6 +10,7 @@ import { positionLocal, smoothstep, time } from 'three/tsl';
 import { MeshStandardNodeMaterial } from 'three/webgpu';
 import { useNodeEvents } from '../../../hooks/use-node-events';
 import { resolveCdnUrl } from '../../../lib/asset-url';
+import { baseMaterial, glassMaterial } from '../../../lib/materials';
 import { useItemLightPool } from '../../../store/use-item-light-pool';
 import { ErrorBoundary } from '../../error-boundary';
 import { NodeRenderer } from '../node-renderer';

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

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useScene } from '@pascal-app/core';
 import { BuildingRenderer } from './building/building-renderer';
 import { CeilingRenderer } from './ceiling/ceiling-renderer';
+import { ColumnRenderer } from './column/column-renderer';
 import { DoorRenderer } from './door/door-renderer';
 import { FenceRenderer } from './fence/fence-renderer';
 import { GuideRenderer } from './guide/guide-renderer';
@@ -13,6 +14,7 @@ import { RoofSegmentRenderer } from './roof-segment/roof-segment-renderer';
 import { ScanRenderer } from './scan/scan-renderer';
 import { SiteRenderer } from './site/site-renderer';
 import { SlabRenderer } from './slab/slab-renderer';
+import { SpawnRenderer } from './spawn/spawn-renderer';
 import { StairRenderer } from './stair/stair-renderer';
 import { StairSegmentRenderer } from './stair-segment/stair-segment-renderer';
 import { WallRenderer } from './wall/wall-renderer';
@@ -22,5 +24,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 === '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 })] }));
+    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 === 'column' && _jsx(ColumnRenderer, { 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 === 'spawn' && _jsx(SpawnRenderer, { 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/roof/roof-renderer.d.ts.map

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

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

@@ -21,19 +21,7 @@ export const RoofRenderer = ({ node }) => {
         geometry.addGroup(0, 0, 3);
         return geometry;
     }, []);
-    const customMaterial = useMemo(() => getRoofMaterialArray(node), [
-        node.materialPreset,
-        node.material,
-        node.material?.preset,
-        node.material?.properties,
-        node.material?.texture,
-        node.topMaterial,
-        node.topMaterialPreset,
-        node.edgeMaterial,
-        node.edgeMaterialPreset,
-        node.wallMaterial,
-        node.wallMaterialPreset,
-    ]);
+    const customMaterial = useMemo(() => getRoofMaterialArray(node), [node]);
     const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials;
     useEffect(() => {
         return () => {

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

@@ -1 +1 @@
-{"version":3,"file":"roof-segment-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/roof-segment/roof-segment-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,eAAe,EAAyB,MAAM,kBAAkB,CAAA;AAQ7G,eAAO,MAAM,mBAAmB,GAAI,UAAU;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,4CAgEtE,CAAA"}
+{"version":3,"file":"roof-segment-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/roof-segment/roof-segment-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAA;AAQzB,eAAO,MAAM,mBAAmB,GAAI,UAAU;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,4CAgDtE,CAAA"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRegistry, useScene } from '@pascal-app/core';
+import { useRegistry, useScene, } from '@pascal-app/core';
 import { useEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { useNodeEvents } from '../../../hooks/use-node-events';
@@ -12,7 +12,9 @@ export const RoofSegmentRenderer = ({ node }) => {
     useRegistry(node.id, 'roof-segment', ref);
     const handlers = useNodeEvents(node, 'roof-segment');
     const debugColors = useViewer((s) => s.debugColors);
-    const parentNode = node.parentId ? nodes[node.parentId] : undefined;
+    const parentNode = node.parentId
+        ? nodes[node.parentId]
+        : undefined;
     const placeholderGeometry = useMemo(() => {
         const geometry = new THREE.BufferGeometry();
         geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3));
@@ -27,24 +29,7 @@ export const RoofSegmentRenderer = ({ node }) => {
             return null;
         }
         return parentNode ? getRoofMaterialArray(parentNode) : null;
-    }, [
-        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?.topMaterial,
-        parentNode?.topMaterialPreset,
-        parentNode?.edgeMaterial,
-        parentNode?.edgeMaterialPreset,
-        parentNode?.wallMaterial,
-        parentNode?.wallMaterialPreset,
-    ]);
+    }, [node, parentNode]);
     const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials;
     useEffect(() => {
         return () => {

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

@@ -1 +1 @@
-{"version":3,"file":"slab-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/slab/slab-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,QAAQ,EAAe,MAAM,kBAAkB,CAAA;AAWrF,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CA0DxD,CAAA"}
+{"version":3,"file":"slab-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/slab/slab-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,QAAQ,EAAe,MAAM,kBAAkB,CAAA;AA+CrF,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAuCxD,CAAA"}

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

@@ -4,32 +4,49 @@ import { useEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { useNodeEvents } from '../../../hooks/use-node-events';
 import { applyMaterialPresetToMaterials, createMaterial, DEFAULT_SLAB_MATERIAL, } from '../../../lib/materials';
+const slabMaterialCache = new Map();
+function getSlabMaterial(cacheKey, params) {
+    const cached = slabMaterialCache.get(cacheKey);
+    if (cached)
+        return cached;
+    const preset = getMaterialPresetByRef(params.materialPreset);
+    const slabMaterial = preset
+        ? new THREE.MeshStandardMaterial()
+        : params.material
+            ? createMaterial(params.material).clone()
+            : DEFAULT_SLAB_MATERIAL.clone();
+    if (preset) {
+        // Apply the preset to the slab-owned material so async texture loads update
+        // the instance we actually render after refresh as well.
+        applyMaterialPresetToMaterials(slabMaterial, preset);
+    }
+    // Slabs participate in the WebGPU MRT scene pass. Keeping them opaque avoids
+    // pipeline variants that can fail when geometry is regenerated while a
+    // transparent/custom material is attached.
+    slabMaterial.transparent = false;
+    slabMaterial.opacity = 1;
+    slabMaterial.alphaMap = null;
+    slabMaterial.side = THREE.DoubleSide;
+    slabMaterial.depthWrite = true;
+    slabMaterial.needsUpdate = true;
+    slabMaterialCache.set(cacheKey, slabMaterial);
+    return slabMaterial;
+}
 export const SlabRenderer = ({ node }) => {
     const ref = useRef(null);
     useRegistry(node.id, 'slab', ref);
     const handlers = useNodeEvents(node, 'slab');
     const material = useMemo(() => {
-        const preset = getMaterialPresetByRef(node.materialPreset);
-        const slabMaterial = preset
-            ? new THREE.MeshStandardMaterial()
-            : node.material
-                ? createMaterial(node.material).clone()
-                : DEFAULT_SLAB_MATERIAL.clone();
-        if (preset) {
-            // Apply the preset to the slab-owned material so async texture loads update
-            // the instance we actually render after refresh as well.
-            applyMaterialPresetToMaterials(slabMaterial, preset);
-        }
-        // Slabs participate in the WebGPU MRT scene pass. Keeping them opaque avoids
-        // pipeline variants that can fail when geometry is regenerated while a
-        // transparent/custom material is attached.
-        slabMaterial.transparent = false;
-        slabMaterial.opacity = 1;
-        slabMaterial.alphaMap = null;
-        slabMaterial.side = THREE.DoubleSide;
-        slabMaterial.depthWrite = true;
-        slabMaterial.needsUpdate = true;
-        return slabMaterial;
+        const resolvedMaterial = node.material;
+        const resolvedMaterialPreset = node.materialPreset;
+        const cacheKey = JSON.stringify({
+            material: resolvedMaterial ?? null,
+            materialPreset: resolvedMaterialPreset ?? null,
+        });
+        return getSlabMaterial(cacheKey, {
+            material: resolvedMaterial,
+            materialPreset: resolvedMaterialPreset,
+        });
     }, [
         node.material,
         node.material?.preset,
@@ -37,10 +54,5 @@ export const SlabRenderer = ({ node }) => {
         node.material?.texture,
         node.materialPreset,
     ]);
-    useEffect(() => {
-        return () => {
-            material.dispose();
-        };
-    }, [material]);
     return (_jsx("mesh", { castShadow: true, receiveShadow: true, ref: ref, ...handlers, material: material, visible: node.visible, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
 };

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLiveTransforms, useRegistry } from '@pascal-app/core';
+import { useMemo, useRef } from 'react';
+import { Color, Shape } from 'three';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+import useViewer from '../../../store/use-viewer';
+const SPAWN_COLOR = new Color('#22c55e');
+export const SpawnRenderer = ({ node }) => {
+    const ref = useRef(null);
+    const handlers = useNodeEvents(node, 'spawn');
+    const liveTransform = useLiveTransforms((state) => state.get(node.id));
+    const walkthroughMode = useViewer((state) => state.walkthroughMode);
+    useRegistry(node.id, 'spawn', ref);
+    const materialProps = useMemo(() => ({
+        color: SPAWN_COLOR,
+        emissive: SPAWN_COLOR,
+        emissiveIntensity: 0.08,
+        metalness: 0.03,
+        roughness: 0.42,
+    }), []);
+    const arrowShape = useMemo(() => {
+        const shape = new Shape();
+        // Positive local Y becomes negative world Z after the -90deg X rotation below,
+        // so this tip points "forward" for the player/spawn direction.
+        shape.moveTo(0, 0.24);
+        shape.lineTo(-0.18, -0.14);
+        shape.lineTo(0.18, -0.14);
+        shape.closePath();
+        return shape;
+    }, []);
+    return (_jsxs("group", { position: liveTransform?.position ?? node.position, ref: ref, rotation: [0, liveTransform?.rotation ?? node.rotation, 0], visible: !walkthroughMode, children: [_jsxs("mesh", { position: [0, 0.09, 0], rotation: [-Math.PI / 2, 0, 0], ...handlers, children: [_jsx("ringGeometry", { args: [0.34, 0.48, 48] }), _jsx("meshStandardMaterial", { ...materialProps })] }), _jsxs("mesh", { position: [0, 0.1, -0.52], rotation: [-Math.PI / 2, 0, 0], ...handlers, children: [_jsx("shapeGeometry", { args: [arrowShape] }), _jsx("meshStandardMaterial", { ...materialProps })] }), _jsxs("mesh", { position: [0, 0.41, 0], ...handlers, children: [_jsx("boxGeometry", { args: [0.3, 0.54, 0.16] }), _jsx("meshStandardMaterial", { ...materialProps })] }), _jsxs("mesh", { position: [0, 0.83, 0], ...handlers, children: [_jsx("boxGeometry", { args: [0.18, 0.18, 0.18] }), _jsx("meshStandardMaterial", { ...materialProps })] })] }));
+};

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,EAEL,KAAK,SAAS,EAIf,MAAM,kBAAkB,CAAA;AA0CzB,eAAO,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,4CAiG1D,CAAA"}
+{"version":3,"file":"stair-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/stair/stair-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,kBAAkB,CAAA;AA8CzB,eAAO,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,4CA2E1D,CAAA"}

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

@@ -3,8 +3,8 @@ 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, createMaterialFromPresetRef, DEFAULT_STAIR_MATERIAL } from '../../../lib/materials';
-import { getStairRailingMaterial, getStairBodyMaterials, } from '../../../systems/stair/stair-materials';
+import { createMaterial, createMaterialFromPresetRef, DEFAULT_STAIR_MATERIAL, } from '../../../lib/materials';
+import { getStairBodyMaterials, getStairRailingMaterial, } from '../../../systems/stair/stair-materials';
 import { NodeRenderer } from '../node-renderer';
 export const StairRenderer = ({ node }) => {
     const ref = useRef(null);
@@ -29,26 +29,8 @@ export const StairRenderer = ({ node }) => {
         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 straightBodyMaterials = useMemo(() => getStairBodyMaterials(node), [node]);
+    const railingMaterial = useMemo(() => getStairRailingMaterial(node), [node]);
     const straightPlaceholderGeometry = useMemo(() => {
         const geometry = new THREE.BufferGeometry();
         geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3));
@@ -61,7 +43,7 @@ export const StairRenderer = ({ node }) => {
             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] }));
+    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 ? null : (_jsx(CurvedStairBody, { bodyMaterials: straightBodyMaterials, stair: node })), _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);
@@ -125,7 +107,7 @@ function StairRailings({ stair, material }) {
                             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)
+                if (!(previousPath && segmentPath.connectFromPrevious))
                     return null;
                 if (previousPath.layout.segment.segmentType === 'landing')
                     return null;
@@ -209,7 +191,7 @@ function CurvedStairBody({ stair, bodyMaterials, }) {
     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: sideMaterial, name: "stair-side", 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, material: sideMaterial, name: "stair-side", position: [0, spiralColumnHeight / 2, 0], receiveShadow: true, children: _jsx("cylinderGeometry", { args: [spiralColumnRadius, spiralColumnRadius, spiralColumnHeight, 10] }) })) : null, Array.from({ length: stepCount }).map((_, index) => {
                 const currentHeight = stepHeight * (index + 1);
                 const actualStepHeight = isSpiral
                     ? thickness

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,EAAkC,KAAK,gBAAgB,EAAyB,MAAM,kBAAkB,CAAA;AAM/G,eAAO,MAAM,oBAAoB,GAAI,UAAU;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,4CA4DxE,CAAA"}
+{"version":3,"file":"stair-segment-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/stair-segment/stair-segment-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EAGtB,MAAM,kBAAkB,CAAA;AAMzB,eAAO,MAAM,oBAAoB,GAAI,UAAU;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,4CA6DxE,CAAA"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRegistry, useScene } from '@pascal-app/core';
+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';
@@ -12,7 +12,9 @@ export const StairSegmentRenderer = ({ node }) => {
         useScene.getState().markDirty(node.id);
     }, [node.id]);
     const handlers = useNodeEvents(node, 'stair-segment');
-    const parentNode = node.parentId ? nodes[node.parentId] : undefined;
+    const parentNode = node.parentId
+        ? nodes[node.parentId]
+        : undefined;
     const material = useMemo(() => {
         return getStraightStairSegmentBodyMaterials(node, parentNode);
     }, [

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

@@ -1 +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"}
+{"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,CAiC7C,CAAA;AAED,eAAe,YAAY,CAAA"}

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

@@ -1,7 +1,8 @@
 import { useThree } from '@react-three/fiber';
 import { useLayoutEffect } from 'react';
 const FrameLimiter = ({ fps = 50 }) => {
-    const { advance, set, frameloop: initFrameloop } = useThree();
+    const { advance, set, frameloop: initFrameloop, scene, clock } = useThree();
+    const renderer = useThree((state) => state.gl);
     useLayoutEffect(() => {
         let elapsed = 0;
         let then = 0;
@@ -17,8 +18,11 @@ const FrameLimiter = ({ fps = 50 }) => {
                 then = t - (elapsed % interval);
             }
         }
+        // Set frameloop to never, it will shut down the default render loop
         set({ frameloop: 'never' });
+        // Kick off custom render loop
         raf = requestAnimationFrame(tick);
+        // Restore initial setting
         return () => {
             if (raf) {
                 cancelAnimationFrame(raf);

package/dist/components/viewer/index.d.ts

@@ -1,13 +1,16 @@
 import { type ThreeToJSXElements } from '@react-three/fiber';
 import * as THREE from 'three/webgpu';
+import { type HoverStyles } from './post-processing';
 declare module '@react-three/fiber' {
     interface ThreeElements extends ThreeToJSXElements<typeof THREE> {
     }
 }
 interface ViewerProps {
     children?: React.ReactNode;
+    hoverStyles?: HoverStyles;
     selectionManager?: 'default' | 'custom';
     perf?: boolean;
+    useBvh?: boolean;
 }
 declare const Viewer: React.FC<ViewerProps>;
 export default Viewer;

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,kBAAkB,EAAsB,MAAM,oBAAoB,CAAA;AAEhG,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AAwBrC,OAAuB,EAAwB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AA+B1F,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAc,SAAQ,kBAAkB,CAAC,OAAO,KAAK,CAAC;KAAG;CACpE;AAkFD,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwGjC,CAAA;AASD,eAAe,MAAM,CAAA"}

package/dist/components/viewer/index.js

@@ -1,22 +1,33 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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';
 import * as THREE from 'three/webgpu';
 import useViewer from '../../store/use-viewer';
+import { CeilingSystem } from '../../systems/ceiling/ceiling-system';
+import { DoorAnimationSystem } from '../../systems/door/door-animation-system';
+import { DoorSystem } from '../../systems/door/door-system';
+import { FenceSystem } from '../../systems/fence/fence-system';
 import { GuideSystem } from '../../systems/guide/guide-system';
+import { ItemSystem } from '../../systems/item/item-system';
 import { ItemLightSystem } from '../../systems/item-light/item-light-system';
 import { LevelSystem } from '../../systems/level/level-system';
+import { RoofSystem } from '../../systems/roof/roof-system';
 import { ScanSystem } from '../../systems/scan/scan-system';
+import { SlabSystem } from '../../systems/slab/slab-system';
+import { StairSystem } from '../../systems/stair/stair-system';
 import { WallCutout } from '../../systems/wall/wall-cutout';
+import { WallSystem } from '../../systems/wall/wall-system';
+import { WindowAnimationSystem } from '../../systems/window/window-animation-system';
+import { WindowSystem } from '../../systems/window/window-system';
 import { ZoneSystem } from '../../systems/zone/zone-system';
+import { ErrorBoundary } from '../error-boundary';
 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';
+import PostProcessing, { DEFAULT_HOVER_STYLES } from './post-processing';
 import { SelectionManager } from './selection-manager';
 import { ViewerCamera } from './viewer-camera';
 function AnimatedBackground({ isDark }) {
@@ -41,40 +52,99 @@ function AnimatedBackground({ isDark }) {
     return null;
 }
 extend(THREE);
+// R3F's <Canvas> useLayoutEffect has no deps, so any re-render (theme switch,
+// parent re-render, StrictMode double-mount) re-invokes `configure()`. With a
+// sync `gl` factory that's harmless — the renderer is created once and reused.
+// With an async factory (WebGPURenderer needs `await init()`), two configure
+// calls can race: both see `state.gl == null` and both create a renderer. The
+// first to resolve gets `setSize`/`setDpr` called on it; the second overwrites
+// `state.gl` but R3F's store already holds the new size/dpr, so the new
+// renderer is never resized and stays at the canvas's 300×150 default.
+//
+// Caching by canvas guarantees both branches return the same instance, so
+// "duplicate" configure calls become no-ops on an already-sized renderer.
+// We cache the in-flight Promise (not just the resolved renderer) so two
+// concurrent configure() calls await the same init instead of creating two
+// renderers in parallel and only caching the second.
+const WEBGPU_RENDERER_CACHE = new WeakMap();
 function GPUDeviceWatcher() {
     const gl = useThree((s) => s.gl);
     useEffect(() => {
         const backend = gl.backend;
         const device = backend?.device;
-        if (!device)
+        if (!device) {
+            console.warn('[viewer] No WebGPU device on backend — running on a fallback renderer.', {
+                backend: backend?.constructor?.name ?? 'unknown',
+                rendererType: gl.constructor?.name ?? 'unknown',
+            });
             return;
+        }
+        console.log('[viewer] WebGPU device ready', {
+            label: device.label,
+            features: Array.from(device.features ?? []),
+        });
         device.lost.then((info) => {
-            console.error(`[viewer] WebGPU device lost: reason="${info.reason ?? 'unknown'}", message="${info.message ?? ''}". ` +
+            console.error(`[viewer] WebGPU device lost: reason="${info.reason}", message="${info.message}". ` +
                 'The page must be reloaded to recover the GPU context.');
         });
+        // Uncaptured errors are normally silent (only console-warned by Chrome at
+        // best). Pipe them to console.error so silent mobile crashes show up.
+        const onUncapturedError = (event) => {
+            console.error('[viewer] WebGPU uncaptured error:', event.error.message, event.error);
+        };
+        device.addEventListener('uncapturederror', onUncapturedError);
+        return () => {
+            device.removeEventListener('uncapturederror', onUncapturedError);
+        };
     }, [gl]);
     return null;
 }
-const Viewer = ({ children, selectionManager = 'default', perf = false, }) => {
+const Viewer = ({ children, hoverStyles = DEFAULT_HOVER_STYLES, selectionManager = 'default', perf = false, useBvh = true, }) => {
     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], frameloop: "never", gl: async (props) => {
-            const renderer = new THREE.WebGPURenderer(props);
-            renderer.toneMapping = THREE.ACESFilmicToneMapping;
-            renderer.toneMappingExposure = 0.9;
-            // 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: {
+    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: ((props) => {
+            const canvas = props.canvas;
+            const cached = canvas ? WEBGPU_RENDERER_CACHE.get(canvas) : undefined;
+            if (cached)
+                return cached;
+            // Surface the env we're about to ask WebGPU for — catches "no
+            // navigator.gpu" / "adapter request failed" silently failing in
+            // mobile WebViews where WebGPU is gated behind flags.
+            const hasGpu = typeof navigator !== 'undefined' && 'gpu' in navigator;
+            console.log('[viewer] Creating WebGPURenderer', {
+                hasNavigatorGPU: hasGpu,
+                ua: typeof navigator !== 'undefined' ? navigator.userAgent : 'n/a',
+            });
+            const promise = (async () => {
+                try {
+                    const renderer = new THREE.WebGPURenderer(props);
+                    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+                    renderer.toneMappingExposure = 0.9;
+                    await renderer.init();
+                    console.log('[viewer] WebGPURenderer ready', {
+                        backend: renderer.backend?.constructor?.name,
+                        isWebGPU: renderer.isWebGPURenderer === true,
+                    });
+                    return renderer;
+                }
+                catch (err) {
+                    // Drop the failed promise from the cache so a future Canvas
+                    // mount on the same DOM can retry instead of inheriting the
+                    // rejection forever.
+                    if (canvas)
+                        WEBGPU_RENDERER_CACHE.delete(canvas);
+                    console.error('[viewer] WebGPURenderer init failed', err);
+                    throw err;
+                }
+            })();
+            if (canvas)
+                WEBGPU_RENDERER_CACHE.set(canvas, promise);
+            return promise;
+        }), resize: {
             debounce: 100,
         }, shadows: {
             type: THREE.PCFShadowMap,
             enabled: true,
-        }, 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] }));
+        }, children: [_jsx(FrameLimiter, { fps: 50 }), _jsx(ViewerCamera, {}), _jsx(GPUDeviceWatcher, {}), _jsxs(ErrorBoundary, { fallback: null, scope: "viewer-scene", children: [_jsx(Lights, {}), useBvh ? (_jsx(Bvh, { children: _jsx(SceneRenderer, {}) })) : (_jsx(SceneRenderer, {})), _jsx(LevelSystem, {}), _jsx(GuideSystem, {}), _jsx(ScanSystem, {}), _jsx(WallCutout, {}), _jsx(CeilingSystem, {}), _jsx(DoorAnimationSystem, {}), _jsx(WindowAnimationSystem, {}), _jsx(DoorSystem, {}), _jsx(FenceSystem, {}), _jsx(ItemSystem, {}), _jsx(RoofSystem, {}), _jsx(SlabSystem, {}), _jsx(StairSystem, {}), _jsx(WallSystem, {}), _jsx(WindowSystem, {}), _jsx(ZoneSystem, {}), _jsx(PostProcessing, { hoverStyles: hoverStyles }), _jsx(ItemLightSystem, {}), selectionManager === 'default' && _jsx(SelectionManager, {}), perf && _jsx(PerfMonitor, {}), children] })] }));
 };
 const DebugRenderer = () => {
     useFrame(({ gl, scene, camera }) => {