@pascal-app/viewer 0.3.0 → 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/components/viewer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAYA,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;AA+BD,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0DjC,CAAA;AASD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAkB,KAAK,kBAAkB,EAAsB,MAAM,oBAAoB,CAAA;AAEhG,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AA0CrC,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAc,SAAQ,kBAAkB,CAAC,OAAO,KAAK,CAAC;KAAG;CACpE;AA+BD,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6DjC,CAAA;AASD,eAAe,MAAM,CAAA"}

package/dist/components/viewer/index.js

@@ -13,7 +13,6 @@ import { ScanSystem } from '../../systems/scan/scan-system';
 import { WallCutout } from '../../systems/wall/wall-cutout';
 import { ZoneSystem } from '../../systems/zone/zone-system';
 import { SceneRenderer } from '../renderers/scene-renderer';
-import { GroundOccluder } from './ground-occluder';
 import { Lights } from './lights';
 import { PerfMonitor } from './perf-monitor';
 import PostProcessing from './post-processing';
@@ -68,11 +67,14 @@ const Viewer = ({ children, selectionManager = 'default', perf = false, }) => {
             const renderer = new THREE.WebGPURenderer(props);
             renderer.toneMapping = THREE.ACESFilmicToneMapping;
             renderer.toneMappingExposure = 0.9;
+            // renderer.init() // Only use when using <DebugRenderer />
             return renderer;
+        }, resize: {
+            debounce: 100,
         }, shadows: {
             type: THREE.PCFShadowMap,
             enabled: true,
-        }, children: [_jsx(GroundOccluder, {}), _jsx(ViewerCamera, {}), _jsx(Lights, {}), _jsx(Bvh, { children: _jsx(SceneRenderer, {}) }), _jsx(LevelSystem, {}), _jsx(GuideSystem, {}), _jsx(ScanSystem, {}), _jsx(WallCutout, {}), _jsx(CeilingSystem, {}), _jsx(DoorSystem, {}), _jsx(ItemSystem, {}), _jsx(RoofSystem, {}), _jsx(SlabSystem, {}), _jsx(WallSystem, {}), _jsx(WindowSystem, {}), _jsx(ZoneSystem, {}), _jsx(PostProcessing, {}), _jsx(GPUDeviceWatcher, {}), _jsx(ItemLightSystem, {}), selectionManager === 'default' && _jsx(SelectionManager, {}), perf && _jsx(PerfMonitor, {}), children] }));
+        }, children: [_jsx(ViewerCamera, {}), _jsx(Lights, {}), _jsx(Bvh, { children: _jsx(SceneRenderer, {}) }), _jsx(LevelSystem, {}), _jsx(GuideSystem, {}), _jsx(ScanSystem, {}), _jsx(WallCutout, {}), _jsx(CeilingSystem, {}), _jsx(DoorSystem, {}), _jsx(ItemSystem, {}), _jsx(RoofSystem, {}), _jsx(SlabSystem, {}), _jsx(WallSystem, {}), _jsx(WindowSystem, {}), _jsx(ZoneSystem, {}), _jsx(PostProcessing, {}), _jsx(GPUDeviceWatcher, {}), _jsx(ItemLightSystem, {}), selectionManager === 'default' && _jsx(SelectionManager, {}), perf && _jsx(PerfMonitor, {}), children] }));
 };
 const DebugRenderer = () => {
     useFrame(({ gl, scene, camera }) => {

package/dist/components/viewer/post-processing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"post-processing.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/post-processing.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAA;AAQD,QAAA,MAAM,oBAAoB,YA4RzB,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"post-processing.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/post-processing.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAA;AAQD,QAAA,MAAM,oBAAoB,YAkRzB,CAAA;AAED,eAAe,oBAAoB,CAAA"}

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

@@ -3,9 +3,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Color, Layers, UnsignedByteType } from 'three';
 import { outline } from 'three/addons/tsl/display/OutlineNode.js';
 import { ssgi } from 'three/addons/tsl/display/SSGINode.js';
-import { traa } from 'three/addons/tsl/display/TRAANode.js';
 import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js';
-import { add, colorToDirection, diffuseColor, directionToColor, float, mix, mrt, normalView, oscSine, output, pass, sample, time, uniform, vec4, velocity, } from 'three/tsl';
+import { add, colorToDirection, diffuseColor, directionToColor, float, mix, mrt, normalView, oscSine, output, pass, sample, time, uniform, vec4, } from 'three/tsl';
 import { RenderPipeline } from 'three/webgpu';
 import { SCENE_LAYER, ZONE_LAYER } from '../../lib/layers';
 import useViewer from '../../store/use-viewer';
@@ -93,64 +92,58 @@ const PostProcessingPasses = () => {
         outliner.selectedObjects.length = 0;
         outliner.hoveredObjects.length = 0;
         try {
-            // Scene pass with MRT for SSGI
             const scenePass = pass(scene, camera);
-            scenePass.setMRT(mrt({
-                output,
-                diffuseColor,
-                normal: directionToColor(normalView),
-                velocity,
-            }));
-            // Get texture outputs
-            const scenePassColor = scenePass.getTextureNode('output');
-            const scenePassDiffuse = scenePass.getTextureNode('diffuseColor');
-            const scenePassDepth = scenePass.getTextureNode('depth');
-            const scenePassNormal = scenePass.getTextureNode('normal');
-            const scenePassVelocity = scenePass.getTextureNode('velocity');
-            // Optimize texture bandwidth
-            const diffuseTexture = scenePass.getTexture('diffuseColor');
-            diffuseTexture.type = UnsignedByteType;
-            const normalTexture = scenePass.getTexture('normal');
-            normalTexture.type = UnsignedByteType;
-            // Extract normal from color-encoded texture
-            const sceneNormal = sample((uv) => {
-                return colorToDirection(scenePassNormal.sample(uv));
-            });
             const zonePass = pass(scene, camera);
             zonePass.setLayers(zoneLayers);
-            // SSGI Pass (cast to PerspectiveCamera for SSGI)
-            const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, camera);
-            giPass.sliceCount.value = SSGI_PARAMS.sliceCount;
-            giPass.stepCount.value = SSGI_PARAMS.stepCount;
-            giPass.radius.value = SSGI_PARAMS.radius;
-            giPass.expFactor.value = SSGI_PARAMS.expFactor;
-            giPass.thickness.value = SSGI_PARAMS.thickness;
-            giPass.backfaceLighting.value = SSGI_PARAMS.backfaceLighting;
-            giPass.aoIntensity.value = SSGI_PARAMS.aoIntensity;
-            giPass.giIntensity.value = SSGI_PARAMS.giIntensity;
-            giPass.useLinearThickness.value = SSGI_PARAMS.useLinearThickness;
-            giPass.useScreenSpaceSampling.value = SSGI_PARAMS.useScreenSpaceSampling;
-            giPass.useTemporalFiltering = SSGI_PARAMS.useTemporalFiltering;
-            const giTexture = giPass.getTextureNode();
-            // DenoiseNode only denoises RGB — alpha is passed through unchanged.
-            // SSGI packs AO into alpha, so we remap it into RGB before denoising.
-            // convertToTexture() inside denoise() will call rtt() on this vec4 node automatically.
-            const aoAsRgb = vec4(giTexture.a, giTexture.a, giTexture.a, float(1));
-            const denoisePass = denoise(aoAsRgb, scenePassDepth, sceneNormal, camera);
-            denoisePass.index.value = 0;
-            denoisePass.radius.value = 4;
-            const gi = giPass.rgb;
-            const ao = denoisePass.r;
-            // const gi = giPass.rgb;
-            // const ao = giPass.a;
+            const scenePassColor = scenePass.getTextureNode('output');
             // Background detection via alpha: renderer clears with alpha=0 (setClearAlpha(0) in useFrame),
             // so background pixels have scenePassColor.a=0 while geometry pixels have output.a=1.
             // WebGPU only applies clearColorValue to MRT attachment 0 (output), so scenePassColor.a
             // is the reliable geometry mask — no normals, no flicker.
             const hasGeometry = scenePassColor.a;
             const contentAlpha = hasGeometry.max(zonePass.a);
-            // Composite: scene * AO + diffuse * GI
-            const compositePass = vec4(add(scenePassColor.rgb.mul(ao), add(zonePass.rgb, scenePassDiffuse.rgb.mul(gi))), contentAlpha);
+            let sceneColor = scenePassColor;
+            if (SSGI_PARAMS.enabled) {
+                // MRT only needed for SSGI (diffuse for GI, normal for SSGI sampling)
+                scenePass.setMRT(mrt({
+                    output,
+                    diffuseColor,
+                    normal: directionToColor(normalView),
+                }));
+                const scenePassDiffuse = scenePass.getTextureNode('diffuseColor');
+                const scenePassDepth = scenePass.getTextureNode('depth');
+                const scenePassNormal = scenePass.getTextureNode('normal');
+                // Optimize texture bandwidth
+                const diffuseTexture = scenePass.getTexture('diffuseColor');
+                diffuseTexture.type = UnsignedByteType;
+                const normalTexture = scenePass.getTexture('normal');
+                normalTexture.type = UnsignedByteType;
+                // Extract normal from color-encoded texture
+                const sceneNormal = sample((uv) => colorToDirection(scenePassNormal.sample(uv)));
+                const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, camera);
+                giPass.sliceCount.value = SSGI_PARAMS.sliceCount;
+                giPass.stepCount.value = SSGI_PARAMS.stepCount;
+                giPass.radius.value = SSGI_PARAMS.radius;
+                giPass.expFactor.value = SSGI_PARAMS.expFactor;
+                giPass.thickness.value = SSGI_PARAMS.thickness;
+                giPass.backfaceLighting.value = SSGI_PARAMS.backfaceLighting;
+                giPass.aoIntensity.value = SSGI_PARAMS.aoIntensity;
+                giPass.giIntensity.value = SSGI_PARAMS.giIntensity;
+                giPass.useLinearThickness.value = SSGI_PARAMS.useLinearThickness;
+                giPass.useScreenSpaceSampling.value = SSGI_PARAMS.useScreenSpaceSampling;
+                giPass.useTemporalFiltering = SSGI_PARAMS.useTemporalFiltering;
+                const giTexture = giPass.getTextureNode();
+                // DenoiseNode only denoises RGB — alpha is passed through unchanged.
+                // SSGI packs AO into alpha, so we remap it into RGB before denoising.
+                const aoAsRgb = vec4(giTexture.a, giTexture.a, giTexture.a, float(1));
+                const denoisePass = denoise(aoAsRgb, scenePassDepth, sceneNormal, camera);
+                denoisePass.index.value = 0;
+                denoisePass.radius.value = 4;
+                const gi = giPass.rgb;
+                const ao = denoisePass.r;
+                // Composite: scene * AO + diffuse * GI
+                sceneColor = vec4(add(scenePassColor.rgb.mul(ao), add(zonePass.rgb, scenePassDiffuse.rgb.mul(gi))), contentAlpha);
+            }
             function generateSelectedOutlinePass() {
                 const edgeStrength = uniform(3);
                 const edgeGlow = uniform(0);
@@ -193,18 +186,8 @@ const PostProcessingPasses = () => {
             }
             const selectedOutlinePass = generateSelectedOutlinePass();
             const hoverOutlinePass = generateHoverOutlinePass();
-            // Combine composite with outlines BEFORE applying TRAA
-            const compositeWithOutlines = SSGI_PARAMS.enabled
-                ? vec4(add(compositePass.rgb, selectedOutlinePass.add(hoverOutlinePass)), compositePass.a)
-                : vec4(add(scenePassColor.rgb, selectedOutlinePass.add(hoverOutlinePass)), scenePassColor.a);
-            // TRAA (Temporal Reprojection Anti-Aliasing) - applied AFTER combining everything
-            const traaOutput = traa(compositeWithOutlines, scenePassDepth, scenePassVelocity, camera);
-            // For zone-over-background pixels, scenePassDepth=1.0 (no scene geometry) causes TRAA
-            // to output black. Use hasGeometry to blend: geometry pixels use traaRgb, all others
-            // (zones over background, pure background) use compositePass.rgb directly.
-            const traaRgb = traaOutput.rgb;
-            const colorSource = mix(compositePass.rgb, traaRgb, hasGeometry);
-            const finalOutput = vec4(mix(bgUniform.current, colorSource, contentAlpha), float(1));
+            const compositeWithOutlines = vec4(add(sceneColor.rgb, selectedOutlinePass.add(hoverOutlinePass)), sceneColor.a);
+            const finalOutput = vec4(mix(bgUniform.current, compositeWithOutlines.rgb, contentAlpha), float(1));
             const renderPipeline = new RenderPipeline(renderer);
             renderPipeline.outputNode = finalOutput;
             renderPipelineRef.current = renderPipeline;

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/store/use-viewer.d.ts

@@ -40,8 +40,8 @@ type ViewerState = {
     setSelection: (updates: Partial<SelectionPath>) => void;
     resetSelection: () => void;
     outliner: Outliner;
-    exportScene: (() => Promise<void>) | null;
-    setExportScene: (fn: (() => Promise<void>) | null) => void;
+    exportScene: ((format?: 'glb' | 'stl' | 'obj') => Promise<void>) | null;
+    setExportScene: (fn: ((format?: 'glb' | 'stl' | 'obj') => Promise<void>) | null) => void;
     debugColors: boolean;
     setDebugColors: (enabled: boolean) => void;
     cameraDragging: boolean;

package/dist/store/use-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-viewer.d.ts","sourceRoot":"","sources":["../../src/store/use-viewer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-viewer.d.ts","sourceRoot":"","sources":["../../src/store/use-viewer.ts"],"names":[],"mappings":"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"}

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.0",
+  "version": "0.3.2",
   "description": "3D viewer component for Pascal building editor",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -1,12 +0,0 @@
-import type { ThreeEvent } from "@react-three/fiber";
-export declare function useGridEvents(): {
-    onPointerDown: (e: ThreeEvent<PointerEvent>) => void;
-    onPointerUp: (e: ThreeEvent<PointerEvent>) => void;
-    onClick: (e: ThreeEvent<PointerEvent>) => void;
-    onPointerEnter: (e: ThreeEvent<PointerEvent>) => void;
-    onPointerLeave: (e: ThreeEvent<PointerEvent>) => void;
-    onPointerMove: (e: ThreeEvent<PointerEvent>) => void;
-    onDoubleClick: (e: ThreeEvent<PointerEvent>) => void;
-    onContextMenu: (e: ThreeEvent<PointerEvent>) => void;
-};
-//# sourceMappingURL=use-grid-events.d.ts.map

package/dist/hooks/use-grid-events.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-grid-events.d.ts","sourceRoot":"","sources":["../../src/hooks/use-grid-events.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,wBAAgB,aAAa;uBAYN,UAAU,CAAC,YAAY,CAAC;qBAI1B,UAAU,CAAC,YAAY,CAAC;iBAI5B,UAAU,CAAC,YAAY,CAAC;wBAIjB,UAAU,CAAC,YAAY,CAAC;wBACxB,UAAU,CAAC,YAAY,CAAC;uBACzB,UAAU,CAAC,YAAY,CAAC;uBACxB,UAAU,CAAC,YAAY,CAAC;uBACxB,UAAU,CAAC,YAAY,CAAC;EAE9C"}

package/dist/hooks/use-grid-events.js

@@ -1,33 +0,0 @@
-import { emitter } from "@pascal-app/core";
-export function useGridEvents() {
-    const emit = (suffix, e) => {
-        const eventKey = `grid:${suffix}`;
-        const payload = {
-            position: [e.point.x, e.point.y, e.point.z],
-            nativeEvent: e,
-        };
-        emitter.emit(eventKey, payload);
-    };
-    return {
-        onPointerDown: (e) => {
-            if (e.button !== 0)
-                return;
-            emit("pointerdown", e);
-        },
-        onPointerUp: (e) => {
-            if (e.button !== 0)
-                return;
-            emit("pointerup", e);
-        },
-        onClick: (e) => {
-            if (e.button !== 0)
-                return;
-            emit("click", e);
-        },
-        onPointerEnter: (e) => emit("enter", e),
-        onPointerLeave: (e) => emit("leave", e),
-        onPointerMove: (e) => emit("move", e),
-        onDoubleClick: (e) => emit("double-click", e),
-        onContextMenu: (e) => emit("context-menu", e),
-    };
-}