@pascal-app/viewer 0.5.0 → 0.6.0

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,4CAiBhE,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/ceiling/ceiling-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ceiling-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/ceiling/ceiling-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAgC,MAAM,kBAAkB,CAAA;AAkCjF,eAAO,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,4CA6B9D,CAAA"}
+{"version":3,"file":"ceiling-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/ceiling/ceiling-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAwD,MAAM,kBAAkB,CAAA;AAkCzG,eAAO,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,4CA8B9D,CAAA"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { resolveMaterial, useRegistry } from '@pascal-app/core';
+import { getMaterialPresetByRef, resolveMaterial, useRegistry } from '@pascal-app/core';
 import { useMemo, useRef } from 'react';
 import { float, mix, positionWorld, smoothstep } from 'three/tsl';
 import { BackSide, FrontSide, MeshBasicNodeMaterial } from 'three/webgpu';
@@ -33,9 +33,10 @@ export const CeilingRenderer = ({ node }) => {
     useRegistry(node.id, 'ceiling', ref);
     const handlers = useNodeEvents(node, 'ceiling');
     const materials = useMemo(() => {
-        const props = resolveMaterial(node.material);
+        const preset = getMaterialPresetByRef(node.materialPreset);
+        const props = preset?.mapProperties ?? resolveMaterial(node.material);
         const color = props.color || '#999999';
         return createCeilingMaterials(color);
-    }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
+    }, [node.materialPreset, node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
     return (_jsxs("mesh", { material: materials.bottomMaterial, ref: ref, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("mesh", { material: materials.topMaterial, name: "ceiling-grid", ...handlers, scale: 0, visible: false, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }), node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId)))] }));
 };

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

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

package/dist/components/renderers/door/door-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_DOOR_MATERIAL } from '../../../lib/materials';
 export const DoorRenderer = ({ node }) => {
     const ref = useRef(null);
     useRegistry(node.id, 'door', ref);
+    useLayoutEffect(() => {
+        useScene.getState().markDirty(node.id);
+    }, [node.id]);
     const handlers = useNodeEvents(node, 'door');
     const isTransient = !!node.metadata?.isTransient;
     const material = useMemo(() => {

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;AAUxE,eAAO,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,4CA2B1D,CAAA"}

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

@@ -0,0 +1,29 @@
+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';
+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,
+    ]);
+    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/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,4CAkCxD,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,4CAgExD,CAAA"}

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRegistry } from '@pascal-app/core';
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import * as THREE from 'three';
 import { useNodeEvents } from '../../../hooks/use-node-events';
-import { createMaterial } from '../../../lib/materials';
 import useViewer from '../../../store/use-viewer';
+import { getRoofMaterialArray } from '../../../systems/roof/roof-materials';
 import { NodeRenderer } from '../node-renderer';
 import { roofDebugMaterials, roofMaterials } from './roof-materials';
 export const RoofRenderer = ({ node }) => {
@@ -11,12 +12,33 @@ export const RoofRenderer = ({ node }) => {
     useRegistry(node.id, 'roof', ref);
     const handlers = useNodeEvents(node, 'roof');
     const debugColors = useViewer((s) => s.debugColors);
-    const customMaterial = useMemo(() => {
-        const mat = node.material;
-        if (!mat)
-            return null;
-        return createMaterial(mat);
-    }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
+    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);
+        geometry.addGroup(0, 0, 2);
+        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 material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials;
-    return (_jsxs("group", { position: node.position, ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers, children: [_jsx("mesh", { castShadow: true, material: material, name: "merged-roof", 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))) })] }));
+    useEffect(() => {
+        return () => {
+            placeholderGeometry.dispose();
+        };
+    }, [placeholderGeometry]);
+    return (_jsxs("group", { position: node.position, ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers, children: [_jsx("mesh", { castShadow: true, geometry: placeholderGeometry, material: material, name: "merged-roof", receiveShadow: true }), _jsx("group", { name: "segments-wrapper", visible: false, children: (node.children ?? []).map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))) })] }));
 };

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,EAAE,KAAK,eAAe,EAAe,MAAM,kBAAkB,CAAA;AAQpE,eAAO,MAAM,mBAAmB,GAAI,UAAU;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,4CA6BtE,CAAA"}
+{"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"}

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

@@ -1,21 +1,55 @@
 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 { useEffect, useMemo, useRef } from 'react';
+import * as THREE from 'three';
 import { useNodeEvents } from '../../../hooks/use-node-events';
-import { createMaterial } from '../../../lib/materials';
 import useViewer from '../../../store/use-viewer';
+import { getRoofMaterialArray } from '../../../systems/roof/roof-materials';
 import { roofDebugMaterials, roofMaterials } from '../roof/roof-materials';
 export const RoofSegmentRenderer = ({ node }) => {
     const ref = useRef(null);
+    const nodes = useScene((state) => state.nodes);
     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 placeholderGeometry = useMemo(() => {
+        const geometry = new THREE.BufferGeometry();
+        geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3));
+        geometry.addGroup(0, 0, 0);
+        geometry.addGroup(0, 0, 1);
+        geometry.addGroup(0, 0, 2);
+        geometry.addGroup(0, 0, 3);
+        return geometry;
+    }, []);
     const customMaterial = useMemo(() => {
-        const mat = node.material;
-        if (!mat)
+        if (node.material !== undefined || typeof node.materialPreset === 'string') {
             return null;
-        return createMaterial(mat);
-    }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
+        }
+        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,
+    ]);
     const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials;
-    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] }) }));
+    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/site/site-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/site/site-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAwC,MAAM,kBAAkB,CAAA;AAmCtF,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,mDAgHxD,CAAA"}
+{"version":3,"file":"site-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/site/site-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAwC,MAAM,kBAAkB,CAAA;AAmCtF,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,mDAyHxD,CAAA"}

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

@@ -43,7 +43,13 @@ export const SiteRenderer = ({ node }) => {
             lowestLevelIndex = Math.min(lowestLevelIndex, n.level);
         });
         const next = nodeList
-            .filter((n) => n.type === 'slab' && n.visible && n.polygon.length >= 3)
+            .filter((n) => n.type === 'slab' &&
+            n.visible &&
+            n.polygon.length >= 3 &&
+            // Only recessed slabs should punch through the site ground.
+            // Positive slabs are real floor geometry and should not create a
+            // ghost footprint in the background ground fill.
+            (n.elevation ?? 0.05) < 0)
             .filter((n) => {
             if (!Number.isFinite(lowestLevelIndex))
                 return true;

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,EAAE,KAAK,QAAQ,EAAe,MAAM,kBAAkB,CAAA;AAM7D,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAyBxD,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;AAWrF,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CA0DxD,CAAA"}

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

@@ -1,17 +1,46 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRegistry } from '@pascal-app/core';
-import { useMemo, useRef } from 'react';
+import { getMaterialPresetByRef, useRegistry } from '@pascal-app/core';
+import { useEffect, useMemo, useRef } from 'react';
+import * as THREE from 'three';
 import { useNodeEvents } from '../../../hooks/use-node-events';
-import { createMaterial, DEFAULT_SLAB_MATERIAL } from '../../../lib/materials';
+import { applyMaterialPresetToMaterials, createMaterial, DEFAULT_SLAB_MATERIAL, } from '../../../lib/materials';
 export const SlabRenderer = ({ node }) => {
     const ref = useRef(null);
     useRegistry(node.id, 'slab', ref);
     const handlers = useNodeEvents(node, 'slab');
     const material = useMemo(() => {
-        const mat = node.material;
-        if (!mat)
-            return DEFAULT_SLAB_MATERIAL;
-        return createMaterial(mat);
-    }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
+        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;
+    }, [
+        node.material,
+        node.material?.preset,
+        node.material?.properties,
+        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/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,EAEL,KAAK,SAAS,EAIf,MAAM,kBAAkB,CAAA;AA0CzB,eAAO,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,4CAiG1D,CAAA"}