@pascal-app/viewer 0.3.1 → 0.3.2

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,EAAe,MAAM,kBAAkB,CAAA;AA+ChE,eAAO,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,4CAwB9D,CAAA"}
+{"version":3,"file":"ceiling-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/ceiling/ceiling-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,kBAAkB,CAAA;AAmChE,eAAO,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,4CAoC9D,CAAA"}

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

@@ -1,45 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRegistry } from '@pascal-app/core';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { float, mix, positionWorld, smoothstep } from 'three/tsl';
 import { BackSide, FrontSide, MeshBasicNodeMaterial } from 'three/webgpu';
 import { useNodeEvents } from '../../../hooks/use-node-events';
+import { DEFAULT_CEILING_MATERIAL } from '../../../lib/materials';
 import { NodeRenderer } from '../node-renderer';
-// TSL material that renders differently based on face direction:
-// - Back face (looking up at ceiling from below): solid
-// - Front face (looking down at ceiling from above): 30% opacity
-const ceilingTopMaterial = new MeshBasicNodeMaterial({
-    color: 0xb5_a7_8d,
-    transparent: true,
-    depthWrite: false,
-    side: FrontSide,
-    // Disabled as we only show ceiling grid when needed
-    // alphaTestNode: float(0.4), // Discard pixels with alpha below 0.4 to create grid lines and not affect depth buffer
-});
-const ceilingBottomMaterial = new MeshBasicNodeMaterial({
-    color: 0x99_99_99,
-    transparent: true,
-    side: BackSide,
-});
-// Create grid pattern based on local position
-const gridScale = 5; // Grid cells per meter (1 = 1m grid)
+const gridScale = 5;
 const gridX = positionWorld.x.mul(gridScale).fract();
 const gridY = positionWorld.z.mul(gridScale).fract();
-// Create grid lines - they are at 0 and 1
-const lineWidth = 0.05; // Width of grid lines (0-1 range within cell)
-// Create visible lines at edges (near 0 and near 1)
+const lineWidth = 0.05;
 const lineX = smoothstep(lineWidth, 0, gridX).add(smoothstep(1.0 - lineWidth, 1.0, gridX));
 const lineY = smoothstep(lineWidth, 0, gridY).add(smoothstep(1.0 - lineWidth, 1.0, gridY));
-// Combine: if either X or Y is a line, show the line
 const gridPattern = lineX.max(lineY);
-// Grid lines at 0.6 opacity, spaces at 0.2 opacity
 const gridOpacity = mix(float(0.2), float(0.6), gridPattern);
-// faceDirection is 1.0 for front face, -1.0 for back face
-// Front face (top, looking down): grid pattern, Back face (bottom, looking up): solid
-ceilingTopMaterial.opacityNode = gridOpacity;
+function createCeilingMaterials(color = '#999999') {
+    const topMaterial = new MeshBasicNodeMaterial({
+        color,
+        transparent: true,
+        depthWrite: false,
+        side: FrontSide,
+    });
+    topMaterial.opacityNode = gridOpacity;
+    const bottomMaterial = new MeshBasicNodeMaterial({
+        color,
+        transparent: true,
+        side: BackSide,
+    });
+    return { topMaterial, bottomMaterial };
+}
 export const CeilingRenderer = ({ node }) => {
     const ref = useRef(null);
     useRegistry(node.id, 'ceiling', ref);
     const handlers = useNodeEvents(node, 'ceiling');
-    return (_jsxs("mesh", { material: ceilingBottomMaterial, ref: ref, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("mesh", { material: ceilingTopMaterial, name: "ceiling-grid", ...handlers, scale: 0, visible: false, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }), node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId)))] }));
+    const materials = useMemo(() => {
+        const mat = node.material;
+        if (mat) {
+            const props = mat.properties;
+            const color = props?.color || '#999999';
+            return createCeilingMaterials(color);
+        }
+        return {
+            topMaterial: createCeilingMaterials().topMaterial,
+            bottomMaterial: DEFAULT_CEILING_MATERIAL,
+        };
+    }, [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;AAK7D,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAsBxD,CAAA"}
+{"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"}

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

@@ -1,11 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useRegistry } from '@pascal-app/core';
-import { useRef } from 'react';
+import { 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);
     const handlers = useNodeEvents(node, 'door');
     const isTransient = !!node.metadata?.isTransient;
-    return (_jsxs("mesh", { castShadow: true, position: node.position, receiveShadow: true, ref: ref, rotation: node.rotation, visible: node.visible, ...(isTransient ? {} : handlers), children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("meshStandardMaterial", { color: "#d1d5db" })] }));
+    const material = useMemo(() => {
+        const mat = node.material;
+        if (!mat)
+            return DEFAULT_DOOR_MATERIAL;
+        return createMaterial(mat);
+    }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
+    return (_jsx("mesh", { castShadow: true, material: material, position: node.position, receiveShadow: true, ref: ref, rotation: node.rotation, visible: node.visible, ...(isTransient ? {} : handlers), children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
 };

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;AAQ7D,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CA+BxD,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,4CAkCxD,CAAA"}

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRegistry } from '@pascal-app/core';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { useNodeEvents } from '../../../hooks/use-node-events';
+import { createMaterial } from '../../../lib/materials';
 import useViewer from '../../../store/use-viewer';
 import { NodeRenderer } from '../node-renderer';
 import { roofDebugMaterials, roofMaterials } from './roof-materials';
@@ -10,5 +11,12 @@ export const RoofRenderer = ({ node }) => {
     useRegistry(node.id, 'roof', ref);
     const handlers = useNodeEvents(node, 'roof');
     const debugColors = useViewer((s) => s.debugColors);
-    return (_jsxs("group", { position: node.position, ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers, children: [_jsx("mesh", { castShadow: true, material: debugColors ? roofDebugMaterials : roofMaterials, 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))) })] }));
+    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 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))) })] }));
 };

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;AAOpE,eAAO,MAAM,mBAAmB,GAAI,UAAU;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,4CAqBtE,CAAA"}
+{"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"}

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRegistry } from '@pascal-app/core';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { useNodeEvents } from '../../../hooks/use-node-events';
+import { createMaterial } from '../../../lib/materials';
 import useViewer from '../../../store/use-viewer';
 import { roofDebugMaterials, roofMaterials } from '../roof/roof-materials';
 export const RoofSegmentRenderer = ({ node }) => {
@@ -9,5 +10,12 @@ export const RoofSegmentRenderer = ({ node }) => {
     useRegistry(node.id, 'roof-segment', ref);
     const handlers = useNodeEvents(node, 'roof-segment');
     const debugColors = useViewer((s) => s.debugColors);
-    return (_jsx("mesh", { material: debugColors ? roofDebugMaterials : roofMaterials, position: node.position, ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
+    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 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] }) }));
 };

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;AAK7D,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CAcxD,CAAA"}
+{"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"}

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

@@ -1,10 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useRegistry } from '@pascal-app/core';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { useNodeEvents } from '../../../hooks/use-node-events';
+import { 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');
-    return (_jsxs("mesh", { castShadow: true, receiveShadow: true, ref: ref, ...handlers, visible: node.visible, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("meshStandardMaterial", { color: "#e5e5e5" })] }));
+    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]);
+    return (_jsx("mesh", { castShadow: true, receiveShadow: true, ref: ref, ...handlers, visible: node.visible, material: material, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
 };

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;AAMvE,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,4CA0BxD,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,4CA6BxD,CAAA"}

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

@@ -1,15 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRegistry, useScene } from '@pascal-app/core';
-import { useLayoutEffect, useRef } from 'react';
+import { useLayoutEffect, useMemo, useRef } from 'react';
 import { useNodeEvents } from '../../../hooks/use-node-events';
+import { createMaterial, DEFAULT_WALL_MATERIAL } from '../../../lib/materials';
 import { NodeRenderer } from '../node-renderer';
 export const WallRenderer = ({ node }) => {
     const ref = useRef(null);
     useRegistry(node.id, 'wall', ref);
-    // Mark dirty on mount so WallSystem rebuilds geometry when wall (re)appears
     useLayoutEffect(() => {
         useScene.getState().markDirty(node.id);
     }, [node.id]);
     const handlers = useNodeEvents(node, 'wall');
-    return (_jsxs("mesh", { castShadow: true, 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 = 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, receiveShadow: true, ref: ref, visible: node.visible, material: material, 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)))] }));
 };

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;AAK/D,eAAO,MAAM,cAAc,GAAI,UAAU;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,4CAsB5D,CAAA"}
+{"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"}

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

@@ -1,11 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useRegistry } from '@pascal-app/core';
-import { useRef } from 'react';
+import { 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);
     const handlers = useNodeEvents(node, 'window');
     const isTransient = !!node.metadata?.isTransient;
-    return (_jsxs("mesh", { castShadow: true, position: node.position, receiveShadow: true, ref: ref, rotation: node.rotation, visible: node.visible, ...(isTransient ? {} : handlers), children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("meshStandardMaterial", { color: "#d1d5db" })] }));
+    const material = useMemo(() => {
+        const mat = node.material;
+        if (!mat)
+            return DEFAULT_WINDOW_MATERIAL;
+        return createMaterial(mat);
+    }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
+    return (_jsx("mesh", { castShadow: true, material: material, position: node.position, receiveShadow: true, ref: ref, rotation: node.rotation, visible: node.visible, ...(isTransient ? {} : handlers), children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
 };

package/dist/hooks/use-gltf-ktx2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-gltf-ktx2.d.ts","sourceRoot":"","sources":["../../src/hooks/use-gltf-ktx2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAU3C,QAAA,MAAM,WAAW,GAAI,MAAM,MAAM,KAAG,UAAU,CAAC,OAAO,OAAO,CA2B5D,CAAA;AACD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"use-gltf-ktx2.d.ts","sourceRoot":"","sources":["../../src/hooks/use-gltf-ktx2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAU3C,QAAA,MAAM,WAAW,GAAI,MAAM,MAAM,KAAG,UAAU,CAAC,OAAO,OAAO,CA2B5D,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Viewer } from './components/viewer';
 export { ASSETS_CDN_URL, resolveAssetUrl, resolveCdnUrl } from './lib/asset-url';
 export { SCENE_LAYER, ZONE_LAYER } from './lib/layers';
+export { clearMaterialCache, createDefaultMaterial, createMaterial, DEFAULT_CEILING_MATERIAL, DEFAULT_DOOR_MATERIAL, DEFAULT_ROOF_MATERIAL, DEFAULT_SLAB_MATERIAL, DEFAULT_WALL_MATERIAL, DEFAULT_WINDOW_MATERIAL, disposeMaterial, } from './lib/materials';
 export { default as useViewer } from './store/use-viewer';
 export { InteractiveSystem } from './systems/interactive/interactive-system';
 export { snapLevelsToTruePositions } from './systems/level/level-utils';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAChF,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAC5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAChF,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACtD,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,cAAc,EACd,wBAAwB,EACxB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,eAAe,GAChB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAA;AAC5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA"}

package/dist/index.js

@@ -1,6 +1,7 @@
 export { default as Viewer } from './components/viewer';
 export { ASSETS_CDN_URL, resolveAssetUrl, resolveCdnUrl } from './lib/asset-url';
 export { SCENE_LAYER, ZONE_LAYER } from './lib/layers';
+export { clearMaterialCache, createDefaultMaterial, createMaterial, DEFAULT_CEILING_MATERIAL, DEFAULT_DOOR_MATERIAL, DEFAULT_ROOF_MATERIAL, DEFAULT_SLAB_MATERIAL, DEFAULT_WALL_MATERIAL, DEFAULT_WINDOW_MATERIAL, disposeMaterial, } from './lib/materials';
 export { default as useViewer } from './store/use-viewer';
 export { InteractiveSystem } from './systems/interactive/interactive-system';
 export { snapLevelsToTruePositions } from './systems/level/level-utils';

package/dist/lib/materials.d.ts

@@ -0,0 +1,13 @@
+import { type MaterialSchema } from '@pascal-app/core';
+import * as THREE from 'three';
+export declare function createMaterial(material?: MaterialSchema): THREE.MeshStandardMaterial;
+export declare function createDefaultMaterial(color?: string, roughness?: number): THREE.MeshStandardMaterial;
+export declare const DEFAULT_WALL_MATERIAL: THREE.MeshStandardMaterial;
+export declare const DEFAULT_SLAB_MATERIAL: THREE.MeshStandardMaterial;
+export declare const DEFAULT_DOOR_MATERIAL: THREE.MeshStandardMaterial;
+export declare const DEFAULT_WINDOW_MATERIAL: THREE.MeshStandardMaterial;
+export declare const DEFAULT_CEILING_MATERIAL: THREE.MeshStandardMaterial;
+export declare const DEFAULT_ROOF_MATERIAL: THREE.MeshStandardMaterial;
+export declare function disposeMaterial(material: THREE.Material): void;
+export declare function clearMaterialCache(): void;
+//# sourceMappingURL=materials.d.ts.map

package/dist/lib/materials.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"materials.d.ts","sourceRoot":"","sources":["../../src/lib/materials.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,cAAc,EAAmB,MAAM,kBAAkB,CAAA;AAChG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,wBAAgB,cAAc,CAAC,QAAQ,CAAC,EAAE,cAAc,GAAG,KAAK,CAAC,oBAAoB,CAmBpF;AAED,wBAAgB,qBAAqB,CACnC,KAAK,GAAE,MAAkB,EACzB,SAAS,GAAE,MAAY,GACtB,KAAK,CAAC,oBAAoB,CAO5B;AAED,eAAO,MAAM,qBAAqB,4BAAwC,CAAA;AAC1E,eAAO,MAAM,qBAAqB,4BAAwC,CAAA;AAC1E,eAAO,MAAM,qBAAqB,4BAAwC,CAAA;AAC1E,eAAO,MAAM,uBAAuB,4BAOlC,CAAA;AACF,eAAO,MAAM,wBAAwB,4BAAyC,CAAA;AAC9E,eAAO,MAAM,qBAAqB,4BAAyC,CAAA;AAE3E,wBAAgB,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,IAAI,CAE9D;AAED,wBAAgB,kBAAkB,IAAI,IAAI,CAKzC"}

package/dist/lib/materials.js

@@ -0,0 +1,58 @@
+import { resolveMaterial } from '@pascal-app/core';
+import * as THREE from 'three';
+const sideMap = {
+    front: THREE.FrontSide,
+    back: THREE.BackSide,
+    double: THREE.DoubleSide,
+};
+const materialCache = new Map();
+function getCacheKey(props) {
+    return `${props.color}-${props.roughness}-${props.metalness}-${props.opacity}-${props.transparent}-${props.side}`;
+}
+export function createMaterial(material) {
+    const props = resolveMaterial(material);
+    const cacheKey = getCacheKey(props);
+    if (materialCache.has(cacheKey)) {
+        return materialCache.get(cacheKey);
+    }
+    const threeMaterial = new THREE.MeshStandardMaterial({
+        color: props.color,
+        roughness: props.roughness,
+        metalness: props.metalness,
+        opacity: props.opacity,
+        transparent: props.transparent,
+        side: sideMap[props.side],
+    });
+    materialCache.set(cacheKey, threeMaterial);
+    return threeMaterial;
+}
+export function createDefaultMaterial(color = '#ffffff', roughness = 0.9) {
+    return new THREE.MeshStandardMaterial({
+        color,
+        roughness,
+        metalness: 0,
+        side: THREE.FrontSide,
+    });
+}
+export const DEFAULT_WALL_MATERIAL = createDefaultMaterial('#ffffff', 0.9);
+export const DEFAULT_SLAB_MATERIAL = createDefaultMaterial('#e5e5e5', 0.8);
+export const DEFAULT_DOOR_MATERIAL = createDefaultMaterial('#8b4513', 0.7);
+export const DEFAULT_WINDOW_MATERIAL = new THREE.MeshStandardMaterial({
+    color: '#87ceeb',
+    roughness: 0.1,
+    metalness: 0.1,
+    opacity: 0.3,
+    transparent: true,
+    side: THREE.DoubleSide,
+});
+export const DEFAULT_CEILING_MATERIAL = createDefaultMaterial('#f5f5dc', 0.95);
+export const DEFAULT_ROOF_MATERIAL = createDefaultMaterial('#808080', 0.85);
+export function disposeMaterial(material) {
+    material.dispose();
+}
+export function clearMaterialCache() {
+    for (const material of materialCache.values()) {
+        material.dispose();
+    }
+    materialCache.clear();
+}

package/dist/systems/wall/wall-cutout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wall-cutout.d.ts","sourceRoot":"","sources":["../../../src/systems/wall/wall-cutout.tsx"],"names":[],"mappings":"AAgDA,eAAO,MAAM,UAAU,YAgEtB,CAAA"}
+{"version":3,"file":"wall-cutout.d.ts","sourceRoot":"","sources":["../../../src/systems/wall/wall-cutout.tsx"],"names":[],"mappings":"AAmIA,eAAO,MAAM,UAAU,YAiFtB,CAAA"}

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

@@ -7,92 +7,162 @@ import useViewer from '../../store/use-viewer';
 const tmpVec = new Vector3();
 const u = new Vector3();
 const v = new Vector3();
-// Dot pattern shader
 const dotPattern = Fn(() => {
-    // Create a repeating grid pattern based on world position
-    const scale = float(0.1); // Dot grid spacing (10cm)
-    const dotSize = float(0.3); // Size of dots relative to grid
-    // Use XY coordinates for pattern on wall face
+    const scale = float(0.1);
+    const dotSize = float(0.3);
     const uv = vec2(positionLocal.x, positionLocal.y).div(scale);
     const gridUV = fract(uv);
-    // Distance from center of grid cell (creates circular dots)
     const dist = length(gridUV.sub(0.5));
-    // Create dots: 1 where we want dots, 0 elsewhere
     const dots = step(dist, dotSize.mul(0.5));
-    // Vertical fade: fade out as Y increases (from bottom to top)
-    const fadeHeight = float(2.5); // Fade over 2.5 meters
+    const fadeHeight = float(2.5);
     const yFade = float(1).sub(smoothstep(float(0), fadeHeight, positionLocal.y));
     return dots.mul(yFade);
 });
-const invsibleWallMaterial = new MeshStandardNodeMaterial({
-    transparent: true,
-    opacityNode: mix(float(0.0), float(0.24), dotPattern()),
-    color: 'white',
-    depthWrite: false,
-    emissive: 'white',
-});
-const wallMaterial = new MeshStandardNodeMaterial({
-    color: 'white',
-    roughness: 1,
-    metalness: 0,
-});
+const wallMaterialCache = new Map();
+function getMaterialHash(wallNode) {
+    if (!wallNode.material)
+        return 'none';
+    const mat = wallNode.material;
+    if (mat.preset && mat.preset !== 'custom') {
+        return `preset-${mat.preset}`;
+    }
+    if (mat.properties) {
+        return `props-${mat.properties.color}-${mat.properties.roughness}-${mat.properties.metalness}`;
+    }
+    return 'default';
+}
+const presetColors = {
+    white: '#ffffff',
+    brick: '#8b4513',
+    concrete: '#808080',
+    wood: '#deb887',
+    glass: '#87ceeb',
+    metal: '#c0c0c0',
+    plaster: '#f5f5dc',
+    tile: '#dcdcdc',
+    marble: '#f5f5f5',
+};
+function getPresetColor(preset) {
+    return presetColors[preset] ?? '#ffffff';
+}
+function getMaterialsForWall(wallNode) {
+    const cacheKey = wallNode.id;
+    const materialHash = getMaterialHash(wallNode);
+    const existing = wallMaterialCache.get(cacheKey);
+    if (existing && existing.materialHash === materialHash) {
+        return existing;
+    }
+    if (existing) {
+        existing.visible.dispose();
+        existing.invisible.dispose();
+    }
+    let userColor = '#ffffff';
+    if (wallNode.material?.properties?.color) {
+        userColor = wallNode.material.properties.color;
+    }
+    else if (wallNode.material?.preset && wallNode.material.preset !== 'custom') {
+        userColor = getPresetColor(wallNode.material.preset);
+    }
+    const visibleMat = new MeshStandardNodeMaterial({
+        color: userColor,
+        roughness: 1,
+        metalness: 0,
+    });
+    const invisibleMat = new MeshStandardNodeMaterial({
+        transparent: true,
+        opacityNode: mix(float(0.0), float(0.24), dotPattern()),
+        color: userColor,
+        depthWrite: false,
+        emissive: userColor,
+    });
+    const result = { visible: visibleMat, invisible: invisibleMat, materialHash };
+    wallMaterialCache.set(cacheKey, result);
+    return result;
+}
+function getWallHideState(wallNode, wallMesh, wallMode, cameraDir) {
+    let hideWall = wallNode.frontSide === 'interior' && wallNode.backSide === 'interior';
+    if (wallMode === 'up') {
+        hideWall = false;
+    }
+    else if (wallMode === 'down') {
+        hideWall = true;
+    }
+    else {
+        wallMesh.getWorldDirection(v);
+        if (v.dot(cameraDir) < 0) {
+            if (wallNode.frontSide === 'exterior' && wallNode.backSide !== 'exterior') {
+                hideWall = true;
+            }
+        }
+        else if (wallNode.backSide === 'exterior' && wallNode.frontSide !== 'exterior') {
+            hideWall = true;
+        }
+    }
+    return hideWall;
+}
 export const WallCutout = () => {
     const lastCameraPosition = useRef(new Vector3());
     const lastCameraTarget = useRef(new Vector3());
     const lastUpdateTime = useRef(0);
     const lastWallMode = useRef(useViewer.getState().wallMode);
     const lastNumberOfWalls = useRef(0);
+    const lastWallMaterials = useRef(new Map());
     useFrame(({ camera, clock }) => {
         const wallMode = useViewer.getState().wallMode;
         const currentTime = clock.elapsedTime;
         const currentCameraPosition = camera.position;
         camera.getWorldDirection(tmpVec);
         tmpVec.add(currentCameraPosition);
-        // Throttle: only update if camera moved significantly AND enough time passed
         const distanceMoved = currentCameraPosition.distanceTo(lastCameraPosition.current);
         const directionChanged = tmpVec.distanceTo(lastCameraTarget.current);
         const timeSinceUpdate = currentTime - lastUpdateTime.current;
-        // Update if moved > 0.5m OR direction changed > 0.3 AND at least 100ms passed
-        if (((distanceMoved > 0.5 || directionChanged > 0.3) && timeSinceUpdate > 0.1) ||
+        const shouldUpdate = ((distanceMoved > 0.5 || directionChanged > 0.3) && timeSinceUpdate > 0.1) ||
             lastWallMode.current !== wallMode ||
-            sceneRegistry.byType.wall.size !== lastNumberOfWalls.current) {
-            // Camera has moved, update cutout logic here
-            // Update last known positions and time
+            sceneRegistry.byType.wall.size !== lastNumberOfWalls.current;
+        const walls = sceneRegistry.byType.wall;
+        const currentWallIds = new Set();
+        walls.forEach((wallId) => {
+            const wallMesh = sceneRegistry.nodes.get(wallId);
+            if (!wallMesh)
+                return;
+            const wallNode = useScene.getState().nodes[wallId];
+            if (!wallNode || wallNode.type !== 'wall')
+                return;
+            currentWallIds.add(wallId);
+            const hideWall = getWallHideState(wallNode, wallMesh, wallMode, u);
+            if (shouldUpdate) {
+                const materials = getMaterialsForWall(wallNode);
+                wallMesh.material = hideWall ? materials.invisible : materials.visible;
+            }
+            else {
+                const currentMaterial = wallMesh.material;
+                const materials = wallMaterialCache.get(wallId);
+                if (!materials ||
+                    currentMaterial !== (hideWall ? materials.invisible : materials.visible)) {
+                    const newMaterials = getMaterialsForWall(wallNode);
+                    wallMesh.material = hideWall ? newMaterials.invisible : newMaterials.visible;
+                }
+            }
+        });
+        if (shouldUpdate) {
             lastCameraPosition.current.copy(currentCameraPosition);
             lastCameraTarget.current.copy(tmpVec);
             lastUpdateTime.current = currentTime;
             camera.getWorldDirection(u);
-            const walls = sceneRegistry.byType.wall;
-            walls.forEach((wallId) => {
-                const wallMesh = sceneRegistry.nodes.get(wallId);
-                if (!wallMesh)
-                    return;
-                const wallNode = useScene.getState().nodes[wallId];
-                if (!wallNode || wallNode.type !== 'wall')
-                    return;
-                let hideWall = wallNode.frontSide === 'interior' && wallNode.backSide === 'interior';
-                if (wallMode === 'up') {
-                    hideWall = false;
-                }
-                else if (wallMode === 'down') {
-                    hideWall = true;
-                }
-                else {
-                    wallMesh.getWorldDirection(v);
-                    if (v.dot(u) < 0) {
-                        // Front side
-                        if (wallNode.frontSide === 'exterior' && wallNode.backSide !== 'exterior') {
-                            hideWall = true;
-                        }
-                    }
-                    else if (wallNode.backSide === 'exterior' && wallNode.frontSide !== 'exterior') {
-                        // Back side
-                        hideWall = true;
-                    }
+            if (lastWallMode.current !== wallMode) {
+                wallMaterialCache.clear();
+            }
+            for (const [wallId, mats] of lastWallMaterials.current) {
+                if (!currentWallIds.has(wallId)) {
+                    mats.visible.dispose();
+                    mats.invisible.dispose();
+                    wallMaterialCache.delete(wallId);
                 }
-                ;
-                wallMesh.material = hideWall ? invsibleWallMaterial : wallMaterial;
-            });
+            }
+            lastWallMaterials.current.clear();
+            for (const [wallId, mats] of wallMaterialCache) {
+                lastWallMaterials.current.set(wallId, mats);
+            }
             lastWallMode.current = wallMode;
             lastNumberOfWalls.current = sceneRegistry.byType.wall.size;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/viewer",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "3D viewer component for Pascal building editor",
   "type": "module",
   "main": "./dist/index.js",