@pascal-app/viewer 0.5.1 → 0.7.0

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

@@ -2,11 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useRegistry, useScene } from '@pascal-app/core';
 import { useLayoutEffect, useMemo, useRef } from 'react';
 import { useNodeEvents } from '../../../hooks/use-node-events';
-import { DEFAULT_STAIR_MATERIAL } from '../../../lib/materials';
+import { createMaterial, createMaterialFromPresetRef, DEFAULT_STAIR_MATERIAL, } from '../../../lib/materials';
 export const FenceRenderer = ({ node }) => {
     const ref = useRef(null);
     const handlers = useNodeEvents(node, 'fence');
-    const material = useMemo(() => DEFAULT_STAIR_MATERIAL, []);
+    const material = useMemo(() => {
+        const presetMaterial = createMaterialFromPresetRef(node.materialPreset);
+        if (presetMaterial)
+            return presetMaterial;
+        const mat = node.material;
+        if (!mat)
+            return DEFAULT_STAIR_MATERIAL;
+        return createMaterial(mat);
+    }, [
+        node.materialPreset,
+        node.material,
+        node.material?.preset,
+        node.material?.properties,
+        node.material?.texture,
+    ]);
     useRegistry(node.id, 'fence', ref);
     useLayoutEffect(() => {
         useScene.getState().markDirty(node.id);

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"node-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/renderers/node-renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,OAAO,EAAY,MAAM,kBAAkB,CAAA;AAmBzD,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,mDA0BjE,CAAA"}
+{"version":3,"file":"node-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/renderers/node-renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,OAAO,EAAY,MAAM,kBAAkB,CAAA;AAqBzD,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,mDA4BjE,CAAA"}

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useScene } from '@pascal-app/core';
 import { BuildingRenderer } from './building/building-renderer';
 import { CeilingRenderer } from './ceiling/ceiling-renderer';
+import { ColumnRenderer } from './column/column-renderer';
 import { DoorRenderer } from './door/door-renderer';
 import { FenceRenderer } from './fence/fence-renderer';
 import { GuideRenderer } from './guide/guide-renderer';
@@ -13,6 +14,7 @@ import { RoofSegmentRenderer } from './roof-segment/roof-segment-renderer';
 import { ScanRenderer } from './scan/scan-renderer';
 import { SiteRenderer } from './site/site-renderer';
 import { SlabRenderer } from './slab/slab-renderer';
+import { SpawnRenderer } from './spawn/spawn-renderer';
 import { StairRenderer } from './stair/stair-renderer';
 import { StairSegmentRenderer } from './stair-segment/stair-segment-renderer';
 import { WallRenderer } from './wall/wall-renderer';
@@ -22,5 +24,5 @@ export const NodeRenderer = ({ nodeId }) => {
     const node = useScene((state) => state.nodes[nodeId]);
     if (!node)
         return null;
-    return (_jsxs(_Fragment, { children: [node.type === 'site' && _jsx(SiteRenderer, { node: node }), node.type === 'building' && _jsx(BuildingRenderer, { node: node }), node.type === 'ceiling' && _jsx(CeilingRenderer, { node: node }), node.type === 'level' && _jsx(LevelRenderer, { node: node }), node.type === 'item' && _jsx(ItemRenderer, { node: node }), node.type === 'slab' && _jsx(SlabRenderer, { node: node }), node.type === 'wall' && _jsx(WallRenderer, { node: node }), node.type === 'fence' && _jsx(FenceRenderer, { node: node }), node.type === 'door' && _jsx(DoorRenderer, { node: node }), node.type === 'window' && _jsx(WindowRenderer, { node: node }), node.type === 'zone' && _jsx(ZoneRenderer, { node: node }), node.type === 'roof' && _jsx(RoofRenderer, { node: node }), node.type === 'roof-segment' && _jsx(RoofSegmentRenderer, { node: node }), node.type === 'stair' && _jsx(StairRenderer, { node: node }), node.type === 'stair-segment' && _jsx(StairSegmentRenderer, { node: node }), node.type === 'scan' && _jsx(ScanRenderer, { node: node }), node.type === 'guide' && _jsx(GuideRenderer, { node: node })] }));
+    return (_jsxs(_Fragment, { children: [node.type === 'site' && _jsx(SiteRenderer, { node: node }), node.type === 'building' && _jsx(BuildingRenderer, { node: node }), node.type === 'ceiling' && _jsx(CeilingRenderer, { node: node }), node.type === 'column' && _jsx(ColumnRenderer, { node: node }), node.type === 'level' && _jsx(LevelRenderer, { node: node }), node.type === 'item' && _jsx(ItemRenderer, { node: node }), node.type === 'slab' && _jsx(SlabRenderer, { node: node }), node.type === 'spawn' && _jsx(SpawnRenderer, { node: node }), node.type === 'wall' && _jsx(WallRenderer, { node: node }), node.type === 'fence' && _jsx(FenceRenderer, { node: node }), node.type === 'door' && _jsx(DoorRenderer, { node: node }), node.type === 'window' && _jsx(WindowRenderer, { node: node }), node.type === 'zone' && _jsx(ZoneRenderer, { node: node }), node.type === 'roof' && _jsx(RoofRenderer, { node: node }), node.type === 'roof-segment' && _jsx(RoofSegmentRenderer, { node: node }), node.type === 'stair' && _jsx(StairRenderer, { node: node }), node.type === 'stair-segment' && _jsx(StairSegmentRenderer, { node: node }), node.type === 'scan' && _jsx(ScanRenderer, { node: node }), node.type === 'guide' && _jsx(GuideRenderer, { node: node })] }));
 };

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

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

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

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

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

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

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

@@ -1,21 +1,40 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRegistry } from '@pascal-app/core';
-import { useMemo, useRef } from 'react';
+import { useRegistry, useScene, } from '@pascal-app/core';
+import { useEffect, useMemo, useRef } from 'react';
+import * as THREE from 'three';
 import { useNodeEvents } from '../../../hooks/use-node-events';
-import { createMaterial } from '../../../lib/materials';
 import useViewer from '../../../store/use-viewer';
+import { getRoofMaterialArray } from '../../../systems/roof/roof-materials';
 import { roofDebugMaterials, roofMaterials } from '../roof/roof-materials';
 export const RoofSegmentRenderer = ({ node }) => {
     const ref = useRef(null);
+    const nodes = useScene((state) => state.nodes);
     useRegistry(node.id, 'roof-segment', ref);
     const handlers = useNodeEvents(node, 'roof-segment');
     const debugColors = useViewer((s) => s.debugColors);
+    const parentNode = node.parentId
+        ? nodes[node.parentId]
+        : undefined;
+    const placeholderGeometry = useMemo(() => {
+        const geometry = new THREE.BufferGeometry();
+        geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3));
+        geometry.addGroup(0, 0, 0);
+        geometry.addGroup(0, 0, 1);
+        geometry.addGroup(0, 0, 2);
+        geometry.addGroup(0, 0, 3);
+        return geometry;
+    }, []);
     const customMaterial = useMemo(() => {
-        const mat = node.material;
-        if (!mat)
+        if (node.material !== undefined || typeof node.materialPreset === 'string') {
             return null;
-        return createMaterial(mat);
-    }, [node.material, node.material?.preset, node.material?.properties, node.material?.texture]);
+        }
+        return parentNode ? getRoofMaterialArray(parentNode) : null;
+    }, [node, parentNode]);
     const material = debugColors ? roofDebugMaterials : customMaterial || roofMaterials;
-    return (_jsx("mesh", { material: material, position: node.position, ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers, children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
+    useEffect(() => {
+        return () => {
+            placeholderGeometry.dispose();
+        };
+    }, [placeholderGeometry]);
+    return (_jsx("mesh", { geometry: placeholderGeometry, material: material, position: node.position, ref: ref, "rotation-y": node.rotation, visible: node.visible, ...handlers }));
 };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"stair-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/stair/stair-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAgD,MAAM,kBAAkB,CAAA;AAqC/G,eAAO,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,4CAwC1D,CAAA"}
+{"version":3,"file":"stair-renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/renderers/stair/stair-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,kBAAkB,CAAA;AA8CzB,eAAO,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,4CA2E1D,CAAA"}