@pascal-app/viewer 0.1.2 → 0.1.3

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

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

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

@@ -0,0 +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,4CAYhE,CAAA"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRegistry } from '@pascal-app/core';
+import { useRef } from 'react';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+import { NodeRenderer } from '../node-renderer';
+export const BuildingRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, node.type, ref);
+    const handlers = useNodeEvents(node, 'building');
+    return (_jsx("group", { ref: ref, ...handlers, children: node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))) }));
+};

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

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

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

@@ -0,0 +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;AAoBhE,eAAO,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,4CAe9D,CAAA"}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRegistry } from '@pascal-app/core';
+import { useRef } from 'react';
+import { faceDirection, float, mix } from 'three/tsl';
+import { DoubleSide, MeshStandardNodeMaterial } from 'three/webgpu';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+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 ceilingMaterial = new MeshStandardNodeMaterial({
+    color: 0xffffff,
+    side: DoubleSide,
+    transparent: true,
+});
+// faceDirection is 1.0 for front face, -1.0 for back face
+// We want: front face (top, looking down) = 0.3 opacity, back face (bottom, looking up) = 1.0 opacity
+ceilingMaterial.opacityNode = mix(float(1.0), float(0.3), faceDirection.greaterThan(0.0));
+export const CeilingRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, 'ceiling', ref);
+    const handlers = useNodeEvents(node, 'ceiling');
+    return (_jsxs("mesh", { ref: ref, material: ceilingMaterial, ...handlers, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId)))] }));
+};

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

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

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

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

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRegistry } from '@pascal-app/core';
+import { useLoader } from '@react-three/fiber';
+import { Suspense, useMemo, useRef } from 'react';
+import { DoubleSide, TextureLoader } from 'three';
+import { float, texture } from 'three/tsl';
+import { MeshBasicNodeMaterial } from 'three/webgpu';
+import { useAssetUrl } from '../../../hooks/use-asset-url';
+export const GuideRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, 'guide', ref);
+    const resolvedUrl = useAssetUrl(node.url);
+    return (_jsx("group", { ref: ref, position: node.position, rotation: [0, node.rotation[1], 0], children: resolvedUrl && (_jsx(Suspense, { children: _jsx(GuidePlane, { url: resolvedUrl, scale: node.scale, opacity: node.opacity }) })) }));
+};
+const GuidePlane = ({ url, scale, opacity }) => {
+    const tex = useLoader(TextureLoader, url);
+    const { width, height, material } = useMemo(() => {
+        const img = tex.image;
+        const w = img.width || 1;
+        const h = img.height || 1;
+        const aspect = w / h;
+        // Default: 10 meters wide, height from aspect ratio
+        const planeWidth = 10 * scale;
+        const planeHeight = (10 / aspect) * scale;
+        const normalizedOpacity = opacity / 100;
+        const mat = new MeshBasicNodeMaterial({
+            transparent: true,
+            colorNode: texture(tex),
+            opacityNode: float(normalizedOpacity),
+            side: DoubleSide,
+            depthWrite: false,
+        });
+        return { width: planeWidth, height: planeHeight, material: mat };
+    }, [tex, scale, opacity]);
+    return (_jsx("mesh", { rotation: [-Math.PI / 2, 0, 0], material: material, raycast: () => { }, frustumCulled: false, children: _jsx("planeGeometry", { args: [width, height], boundingBox: null, boundingSphere: null }) }));
+};

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

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

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

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

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRegistry, useScene } from '@pascal-app/core';
+import { Clone } from '@react-three/drei/core/Clone';
+import { useGLTF } from '@react-three/drei/core/Gltf';
+import { Suspense, useEffect, useMemo, useRef } from 'react';
+import { DoubleSide, MeshStandardNodeMaterial } from 'three/webgpu';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+// Shared materials to avoid creating new instances for every mesh
+const defaultMaterial = new MeshStandardNodeMaterial({
+    color: 0xffffff,
+    roughness: 1,
+    metalness: 0,
+});
+const glassMaterial = new MeshStandardNodeMaterial({
+    name: 'glass',
+    color: 'lightgray',
+    roughness: 0.8,
+    metalness: 0,
+    transparent: true,
+    opacity: 0.35,
+    side: DoubleSide,
+    depthWrite: false,
+});
+const getMaterialForOriginal = (original) => {
+    if (original.name.toLowerCase() === 'glass') {
+        return glassMaterial;
+    }
+    return defaultMaterial;
+};
+export const ItemRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, node.type, ref);
+    return (_jsx("group", { position: node.position, rotation: node.rotation, ref: ref, visible: node.visible, children: _jsx(Suspense, { children: _jsx(ModelRenderer, { node: node }) }) }));
+};
+const ModelRenderer = ({ node }) => {
+    const { scene, nodes } = useGLTF(node.asset.src);
+    if (nodes.cutout) {
+        nodes.cutout.visible = false;
+    }
+    const handlers = useNodeEvents(node, 'item');
+    useEffect(() => {
+        if (!node.parentId)
+            return;
+        useScene.getState().dirtyNodes.add(node.parentId);
+    }, [node.parentId]);
+    useMemo(() => {
+        scene.traverse((child) => {
+            if (child.isMesh) {
+                const mesh = child;
+                if (mesh.name === 'cutout') {
+                    child.visible = false;
+                    return;
+                }
+                let hasGlass = false;
+                // Handle both single material and material array cases
+                if (Array.isArray(mesh.material)) {
+                    mesh.material = mesh.material.map((mat) => getMaterialForOriginal(mat));
+                    hasGlass = mesh.material.some(mat => mat.name === 'glass');
+                }
+                else {
+                    mesh.material = getMaterialForOriginal(mesh.material);
+                    hasGlass = mesh.material.name === 'glass';
+                }
+                mesh.castShadow = !hasGlass;
+                mesh.receiveShadow = !hasGlass;
+            }
+        });
+    }, [scene]);
+    return (_jsx(Clone, { object: scene, scale: node.asset.scale, position: node.asset.offset, rotation: node.asset.rotation, ...handlers }));
+};

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRegistry } from '@pascal-app/core';
+import { useRef } from 'react';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+import { NodeRenderer } from '../node-renderer';
+export const LevelRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, node.type, ref);
+    const handlers = useNodeEvents(node, 'level');
+    return (_jsx("group", { ref: ref, ...handlers, children: node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))) }));
+};

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

@@ -0,0 +1,5 @@
+import { type AnyNode } from '@pascal-app/core';
+export declare const NodeRenderer: ({ nodeId }: {
+    nodeId: AnyNode["id"];
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=node-renderer.d.ts.map

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

@@ -0,0 +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;AAYzD,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,mDAmBjE,CAAA"}

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScene } from '@pascal-app/core';
+import { BuildingRenderer } from './building/building-renderer';
+import { CeilingRenderer } from './ceiling/ceiling-renderer';
+import { GuideRenderer } from './guide/guide-renderer';
+import { ItemRenderer } from './item/item-renderer';
+import { LevelRenderer } from './level/level-renderer';
+import { RoofRenderer } from './roof/roof-renderer';
+import { ScanRenderer } from './scan/scan-renderer';
+import { SlabRenderer } from './slab/slab-renderer';
+import { WallRenderer } from './wall/wall-renderer';
+import { ZoneRenderer } from './zone/zone-renderer';
+export const NodeRenderer = ({ nodeId }) => {
+    const node = useScene((state) => state.nodes[nodeId]);
+    if (!node)
+        return null;
+    return (_jsxs(_Fragment, { children: [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 === 'zone' && _jsx(ZoneRenderer, { node: node }), node.type === 'roof' && _jsx(RoofRenderer, { 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

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

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRegistry } from '@pascal-app/core';
+import { useRef } from 'react';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+export const RoofRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, 'roof', ref);
+    const handlers = useNodeEvents(node, 'roof');
+    return (_jsxs("mesh", { ref: ref, castShadow: true, receiveShadow: true, position: node.position, "rotation-y": node.rotation, visible: node.visible, ...handlers, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("meshStandardMaterial", { color: "white" })] }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"scan-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/scan/scan-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,4CAoBxD,CAAA"}

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRegistry } from '@pascal-app/core';
+import { Suspense, useMemo, useRef } from 'react';
+import { useAssetUrl } from '../../../hooks/use-asset-url';
+import { useGLTFKTX2 } from '../../../hooks/use-gltf-ktx2';
+export const ScanRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, 'scan', ref);
+    const resolvedUrl = useAssetUrl(node.url);
+    return (_jsx("group", { ref: ref, position: node.position, rotation: node.rotation, scale: [node.scale, node.scale, node.scale], children: resolvedUrl && (_jsx(Suspense, { children: _jsx(ScanModel, { url: resolvedUrl, opacity: node.opacity }) })) }));
+};
+const ScanModel = ({ url, opacity }) => {
+    const gltf = useGLTFKTX2(url);
+    const scene = gltf.scene;
+    useMemo(() => {
+        const normalizedOpacity = opacity / 100;
+        const isTransparent = normalizedOpacity < 1;
+        const updateMaterial = (material) => {
+            if (isTransparent) {
+                material.transparent = true;
+                material.opacity = normalizedOpacity;
+            }
+            else {
+                material.transparent = false;
+                material.opacity = 1;
+            }
+            material.needsUpdate = true;
+        };
+        scene.traverse((child) => {
+            if (child.isMesh) {
+                const mesh = child;
+                // Disable raycasting
+                mesh.raycast = () => { };
+                // Exclude from bounding box calculations
+                mesh.geometry.boundingBox = null;
+                mesh.geometry.boundingSphere = null;
+                mesh.frustumCulled = false;
+                if (Array.isArray(mesh.material)) {
+                    mesh.material.forEach((material) => {
+                        updateMaterial(material);
+                    });
+                }
+                else {
+                    updateMaterial(mesh.material);
+                }
+            }
+        });
+    }, [scene, opacity]);
+    return _jsx("primitive", { object: scene });
+};

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

@@ -0,0 +1,2 @@
+export declare const SceneRenderer: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=scene-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scene-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/renderers/scene-renderer.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,+CAUzB,CAAC"}

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

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useScene } from "@pascal-app/core";
+import { NodeRenderer } from "./node-renderer";
+export const SceneRenderer = () => {
+    const rootNodes = useScene((state) => state.rootNodeIds);
+    return (_jsx("group", { name: "scene-renderer", children: rootNodes.map((nodeId) => (_jsx(NodeRenderer, { nodeId: nodeId }, nodeId))) }));
+};

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRegistry } from '@pascal-app/core';
+import { useRef } from 'react';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+export const SlabRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, 'slab', ref);
+    const handlers = useNodeEvents(node, 'slab');
+    return (_jsxs("mesh", { ref: ref, castShadow: true, receiveShadow: true, ...handlers, visible: node.visible, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("meshStandardMaterial", { color: "#e5e5e5" })] }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"wall-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/wall/wall-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,4CAoBxD,CAAA"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRegistry } from '@pascal-app/core';
+import { useRef } from 'react';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+import { NodeRenderer } from '../node-renderer';
+export const WallRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, 'wall', ref);
+    const handlers = useNodeEvents(node, 'wall');
+    return (_jsxs("mesh", { ref: ref, castShadow: true, receiveShadow: true, visible: node.visible, children: [_jsx("boxGeometry", { args: [0, 0, 0] }), _jsx("mesh", { name: "collision-mesh", ...handlers, visible: false, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }), node.children.map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId)))] }));
+};

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

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

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

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

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

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRegistry } from '@pascal-app/core';
+import { Html } from '@react-three/drei';
+import { useMemo, useRef } from 'react';
+import { BufferGeometry, Color, DoubleSide, Float32BufferAttribute, Shape } from 'three';
+import { color, float, uv } from 'three/tsl';
+import { MeshBasicNodeMaterial } from 'three/webgpu';
+import { useNodeEvents } from '../../../hooks/use-node-events';
+const Y_OFFSET = 0.01;
+const WALL_HEIGHT = 2.3;
+/**
+ * Creates a gradient material for zone walls using TSL
+ * Gradient goes from zone color at bottom to transparent at top
+ */
+const createWallGradientMaterial = (zoneColor) => {
+    const baseColor = color(new Color(zoneColor));
+    // Use UV y coordinate for vertical gradient (0 at bottom, 1 at top)
+    const gradientT = uv().y;
+    // Fade opacity from 0.6 at bottom to 0 at top
+    const opacity = float(0.6).mul(float(1).sub(gradientT));
+    return new MeshBasicNodeMaterial({
+        transparent: true,
+        colorNode: baseColor,
+        opacityNode: opacity,
+        side: DoubleSide,
+        depthWrite: false,
+        depthTest: false,
+    });
+};
+/**
+ * Creates a floor material for zones using TSL
+ */
+const createFloorMaterial = (zoneColor) => {
+    const baseColor = color(new Color(zoneColor));
+    return new MeshBasicNodeMaterial({
+        transparent: true,
+        colorNode: baseColor,
+        opacityNode: float(0.15),
+        side: DoubleSide,
+        depthWrite: false,
+    });
+};
+/**
+ * Creates wall geometry for zone borders
+ * Each wall segment is a vertical quad from one polygon point to the next
+ */
+const createWallGeometry = (polygon) => {
+    const geometry = new BufferGeometry();
+    if (polygon.length < 2)
+        return geometry;
+    const positions = [];
+    const uvs = [];
+    const indices = [];
+    // Create a wall segment for each edge of the polygon
+    for (let i = 0; i < polygon.length; i++) {
+        const current = polygon[i];
+        const next = polygon[(i + 1) % polygon.length];
+        const baseIndex = i * 4;
+        // Four vertices per wall segment (two triangles forming a quad)
+        // Bottom-left
+        positions.push(current[0], Y_OFFSET, current[1]);
+        uvs.push(0, 0);
+        // Bottom-right
+        positions.push(next[0], Y_OFFSET, next[1]);
+        uvs.push(1, 0);
+        // Top-right
+        positions.push(next[0], Y_OFFSET + WALL_HEIGHT, next[1]);
+        uvs.push(1, 1);
+        // Top-left
+        positions.push(current[0], Y_OFFSET + WALL_HEIGHT, current[1]);
+        uvs.push(0, 1);
+        // Two triangles for the quad
+        indices.push(baseIndex, baseIndex + 1, baseIndex + 2, baseIndex, baseIndex + 2, baseIndex + 3);
+    }
+    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    geometry.setAttribute('uv', new Float32BufferAttribute(uvs, 2));
+    geometry.setIndex(indices);
+    geometry.computeVertexNormals();
+    return geometry;
+};
+export const ZoneRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, 'zone', ref);
+    // Create floor shape from polygon
+    const floorShape = useMemo(() => {
+        if (!node?.polygon || node.polygon.length < 3)
+            return null;
+        const shape = new Shape();
+        const firstPt = node.polygon[0];
+        // Shape is in X-Y plane, we rotate it to X-Z plane
+        // Negate Y (which becomes Z) to get correct orientation
+        shape.moveTo(firstPt[0], -firstPt[1]);
+        for (let i = 1; i < node.polygon.length; i++) {
+            const pt = node.polygon[i];
+            shape.lineTo(pt[0], -pt[1]);
+        }
+        shape.closePath();
+        return shape;
+    }, [node?.polygon]);
+    // Create wall geometry from polygon
+    const wallGeometry = useMemo(() => {
+        if (!node?.polygon || node.polygon.length < 2)
+            return null;
+        return createWallGeometry(node.polygon);
+    }, [node?.polygon]);
+    // Calculate polygon centroid for label positioning using the geometric centroid formula
+    // This correctly handles polygons regardless of vertex distribution along edges
+    const centroid = useMemo(() => {
+        if (!node?.polygon || node.polygon.length < 3)
+            return [0, 0];
+        const polygon = node.polygon;
+        let signedArea = 0;
+        let cx = 0;
+        let cz = 0;
+        for (let i = 0; i < polygon.length; i++) {
+            const [x0, z0] = polygon[i];
+            const [x1, z1] = polygon[(i + 1) % polygon.length];
+            // Cross product for signed area
+            const cross = x0 * z1 - x1 * z0;
+            signedArea += cross;
+            cx += (x0 + x1) * cross;
+            cz += (z0 + z1) * cross;
+        }
+        signedArea /= 2;
+        const factor = 1 / (6 * signedArea);
+        return [cx * factor, cz * factor];
+    }, [node?.polygon]);
+    // Create materials
+    const floorMaterial = useMemo(() => {
+        if (!node?.color)
+            return null;
+        return createFloorMaterial(node.color);
+    }, [node?.color]);
+    const wallMaterial = useMemo(() => {
+        if (!node?.color)
+            return null;
+        return createWallGradientMaterial(node.color);
+    }, [node?.color]);
+    const handlers = useNodeEvents(node, 'zone');
+    if (!node || !floorShape || !wallGeometry || !floorMaterial || !wallMaterial) {
+        return null;
+    }
+    return (_jsxs("group", { ref: ref, ...handlers, children: [_jsx(Html, { name: "label", position: [centroid[0], 1, centroid[1]], style: {
+                    pointerEvents: 'none'
+                }, children: _jsx("div", { style: {
+                        transform: 'translate3d(-50%, -50%, 0)',
+                        width: 'max-content',
+                        color: 'white',
+                        textShadow: `-1px -1px 0 ${node.color}, 1px -1px 0 ${node.color}, -1px 1px 0 ${node.color}, 1px 1px 0 ${node.color}`,
+                        display: 'flex',
+                        gap: '8px',
+                        alignItems: 'center',
+                    }, children: node.name }) }), _jsx("mesh", { position: [0, Y_OFFSET, 0], rotation: [-Math.PI / 2, 0, 0], material: floorMaterial, children: _jsx("shapeGeometry", { args: [floorShape] }) }), _jsx("mesh", { geometry: wallGeometry, material: wallMaterial })] }));
+};

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

@@ -0,0 +1,13 @@
+import { type ThreeToJSXElements } from '@react-three/fiber';
+import * as THREE from 'three/webgpu';
+declare module '@react-three/fiber' {
+    interface ThreeElements extends ThreeToJSXElements<typeof THREE> {
+    }
+}
+interface ViewerProps {
+    children?: React.ReactNode;
+    selectionManager?: 'default' | 'custom';
+}
+declare const Viewer: React.FC<ViewerProps>;
+export default Viewer;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5E,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AAWrC,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAc,SAAQ,kBAAkB,CAAC,OAAO,KAAK,CAAC;KAAG;CACpE;AAID,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CACxC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4CjC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/components/viewer/index.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CeilingSystem, ItemSystem, RoofSystem, SlabSystem, WallSystem } from '@pascal-app/core';
+import { Bvh } from '@react-three/drei';
+import { Canvas, extend } from '@react-three/fiber';
+import * as THREE from 'three/webgpu';
+import { GuideSystem } from '../../systems/guide/guide-system';
+import { LevelSystem } from '../../systems/level/level-system';
+import { ScanSystem } from '../../systems/scan/scan-system';
+import { WallCutout } from '../../systems/wall/wall-cutout';
+import { SceneRenderer } from '../renderers/scene-renderer';
+import { Lights } from './lights';
+import PostProcessing from './post-processing';
+import { SelectionManager } from './selection-manager';
+import { ViewerCamera } from './viewer-camera';
+extend(THREE);
+const Viewer = ({ children, selectionManager = 'default' }) => {
+    return (_jsxs(Canvas, { className: 'bg-[#fafafa]', gl: async (props) => {
+            const renderer = new THREE.WebGPURenderer(props);
+            await renderer.init();
+            renderer.toneMapping = THREE.ACESFilmicToneMapping;
+            renderer.toneMappingExposure = 0.9;
+            return renderer;
+        }, shadows: {
+            type: THREE.PCFShadowMap,
+            enabled: true,
+        }, camera: { position: [50, 50, 50], fov: 50 }, children: [_jsx("color", { attach: "background", args: ['#fafafa'] }), _jsx(ViewerCamera, {}), _jsx(Lights, {}), _jsx(Bvh, { children: _jsx(SceneRenderer, {}) }), _jsx(LevelSystem, {}), _jsx(GuideSystem, {}), _jsx(ScanSystem, {}), _jsx(WallCutout, {}), _jsx(CeilingSystem, {}), _jsx(ItemSystem, {}), _jsx(RoofSystem, {}), _jsx(SlabSystem, {}), _jsx(WallSystem, {}), _jsx(PostProcessing, {}), selectionManager === 'default' && _jsx(SelectionManager, {}), children] }));
+};
+export default Viewer;

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

@@ -0,0 +1,2 @@
+export declare function Lights(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=lights.d.ts.map

package/dist/components/viewer/lights.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lights.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/lights.tsx"],"names":[],"mappings":"AAGA,wBAAgB,MAAM,4CAgDrB"}

package/dist/components/viewer/lights.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+export function Lights() {
+    const lightRef = useRef(null);
+    const shadowCamera = useRef(null);
+    const shadowCameraSize = 50; // The "area" around the camera to shadow
+    // useHelper(lightRef, DirectionalLightHelper, 1, 'red')
+    // useHelper(shadowCamera, CameraHelper)
+    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: lightRef, position: [10, 10, 10], castShadow: true, intensity: 4, "shadow-bias": -0.002, "shadow-normalBias": 0.3, "shadow-mapSize": [1024, 1024], "shadow-radius": 3, "shadow-intensity": 0.4, children: _jsx("orthographicCamera", { ref: shadowCamera, attach: "shadow-camera", near: 1, far: 100, left: -shadowCameraSize, right: shadowCameraSize, top: shadowCameraSize, bottom: -shadowCameraSize }) }), _jsx("directionalLight", { position: [-10, 10, -10], intensity: 0.75 }), _jsx("directionalLight", { position: [-10, 10, 10], intensity: 1 }), _jsx("ambientLight", { intensity: 0.5, color: 'white' })] }));
+}