@pascal-app/viewer 0.1.1 → 0.1.3

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

@@ -0,0 +1,35 @@
+import type { AnyNode, BaseNode, BuildingNode, LevelNode, ZoneNode } from "@pascal-app/core";
+import type { Object3D } from "three";
+type SelectionPath = {
+    buildingId: BuildingNode["id"] | null;
+    levelId: LevelNode["id"] | null;
+    zoneId: ZoneNode["id"] | null;
+    selectedIds: BaseNode["id"][];
+};
+type Outliner = {
+    selectedObjects: Object3D[];
+    hoveredObjects: Object3D[];
+};
+type ViewerState = {
+    selection: SelectionPath;
+    hoveredId: AnyNode['id'] | ZoneNode['id'] | null;
+    setHoveredId: (id: AnyNode['id'] | ZoneNode['id'] | null) => void;
+    cameraMode: 'perspective' | 'orthographic';
+    setCameraMode: (mode: 'perspective' | 'orthographic') => void;
+    levelMode: 'stacked' | 'exploded' | 'solo' | 'manual';
+    setLevelMode: (mode: 'stacked' | 'exploded' | 'solo' | 'manual') => void;
+    wallMode: 'up' | 'cutaway' | 'down';
+    setWallMode: (mode: 'up' | 'cutaway' | 'down') => void;
+    showScans: boolean;
+    setShowScans: (show: boolean) => void;
+    showGuides: boolean;
+    setShowGuides: (show: boolean) => void;
+    setSelection: (updates: Partial<SelectionPath>) => void;
+    resetSelection: () => void;
+    outliner: Outliner;
+    exportScene: (() => Promise<void>) | null;
+    setExportScene: (fn: (() => Promise<void>) | null) => void;
+};
+declare const useViewer: import("zustand").UseBoundStore<import("zustand").StoreApi<ViewerState>>;
+export default useViewer;
+//# sourceMappingURL=use-viewer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewer.d.ts","sourceRoot":"","sources":["../../src/store/use-viewer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAItC,KAAK,aAAa,GAAG;IACnB,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACtC,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;CAC/B,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,eAAe,EAAE,QAAQ,EAAE,CAAC;IAC5B,cAAc,EAAE,QAAQ,EAAE,CAAC;CAC5B,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,aAAa,CAAA;IACxB,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAChD,YAAY,EAAE,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAEjE,UAAU,EAAE,aAAa,GAAG,cAAc,CAAA;IAC1C,aAAa,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,cAAc,KAAK,IAAI,CAAA;IAE7D,SAAS,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAA;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,KAAK,IAAI,CAAA;IAExE,QAAQ,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,CAAA;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,KAAK,IAAI,CAAA;IAEtD,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAErC,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAGtC,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IACvD,cAAc,EAAE,MAAM,IAAI,CAAA;IAE1B,QAAQ,EAAE,QAAQ,CAAA;IAGlB,WAAW,EAAE,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAA;IACzC,cAAc,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;CAC3D,CAAA;AAED,QAAA,MAAM,SAAS,0EAqDZ,CAAC;AAEJ,eAAe,SAAS,CAAC"}

package/dist/store/use-viewer.js

@@ -0,0 +1,46 @@
+"use client";
+import { create } from "zustand";
+const useViewer = create()((set, get) => ({
+    selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
+    hoveredId: null,
+    setHoveredId: (id) => set({ hoveredId: id }),
+    cameraMode: "perspective",
+    setCameraMode: (mode) => set({ cameraMode: mode }),
+    levelMode: "stacked",
+    setLevelMode: (mode) => set({ levelMode: mode }),
+    wallMode: 'cutaway',
+    setWallMode: (mode) => set({ wallMode: mode }),
+    showScans: true,
+    setShowScans: (show) => set({ showScans: show }),
+    showGuides: true,
+    setShowGuides: (show) => set({ showGuides: show }),
+    setSelection: (updates) => set((state) => {
+        const newSelection = { ...state.selection, ...updates };
+        // Hierarchy Guard: If we change a high-level parent, reset the children
+        if (updates.buildingId !== undefined) {
+            newSelection.levelId = null;
+            newSelection.zoneId = null;
+            newSelection.selectedIds = [];
+        }
+        else if (updates.levelId !== undefined) {
+            newSelection.zoneId = null;
+            newSelection.selectedIds = [];
+        }
+        else if (updates.zoneId !== undefined) {
+            newSelection.selectedIds = [];
+        }
+        return { selection: newSelection };
+    }),
+    resetSelection: () => set({
+        selection: {
+            buildingId: null,
+            levelId: null,
+            zoneId: null,
+            selectedIds: [],
+        },
+    }),
+    outliner: { selectedObjects: [], hoveredObjects: [] },
+    exportScene: null,
+    setExportScene: (fn) => set({ exportScene: fn }),
+}));
+export default useViewer;

package/dist/systems/guide/guide-system.d.ts

@@ -0,0 +1,2 @@
+export declare const GuideSystem: () => null;
+//# sourceMappingURL=guide-system.d.ts.map

package/dist/systems/guide/guide-system.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"guide-system.d.ts","sourceRoot":"","sources":["../../../src/systems/guide/guide-system.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,YAavB,CAAA"}

package/dist/systems/guide/guide-system.js

@@ -0,0 +1,16 @@
+import { sceneRegistry } from '@pascal-app/core';
+import { useEffect } from 'react';
+import useViewer from '../../store/use-viewer';
+export const GuideSystem = () => {
+    const showGuides = useViewer((state) => state.showGuides);
+    useEffect(() => {
+        const guides = sceneRegistry.byType.guide || new Set();
+        guides.forEach((guideId) => {
+            const node = sceneRegistry.nodes.get(guideId);
+            if (node) {
+                node.visible = showGuides;
+            }
+        });
+    }, [showGuides]);
+    return null;
+};

package/dist/systems/level/level-system.d.ts

@@ -0,0 +1,2 @@
+export declare const LevelSystem: () => null;
+//# sourceMappingURL=level-system.d.ts.map

package/dist/systems/level/level-system.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"level-system.d.ts","sourceRoot":"","sources":["../../../src/systems/level/level-system.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,YAkBvB,CAAA"}

package/dist/systems/level/level-system.js

@@ -0,0 +1,23 @@
+import { sceneRegistry, useScene } from '@pascal-app/core';
+import { useFrame } from '@react-three/fiber';
+import { lerp } from 'three/src/math/MathUtils.js';
+import useViewer from '../../store/use-viewer';
+const LEVEL_HEIGHT = 2.5;
+const EXPLODED_GAP = 5;
+export const LevelSystem = () => {
+    useFrame((_, delta) => {
+        const levelMode = useViewer.getState().levelMode;
+        const selectedLevel = useViewer.getState().selection.levelId;
+        sceneRegistry.byType.level.forEach((levelId) => {
+            const obj = sceneRegistry.nodes.get(levelId);
+            if (obj) {
+                const level = useScene.getState().nodes[levelId];
+                const targetY = (level.level || 0) *
+                    (LEVEL_HEIGHT + (levelMode === 'exploded' ? EXPLODED_GAP : 0));
+                obj.position.y = lerp(obj.position.y, targetY, delta * 3);
+                obj.visible = levelMode !== 'solo' || level?.id === selectedLevel || !selectedLevel;
+            }
+        });
+    });
+    return null;
+};

package/dist/systems/scan/scan-system.d.ts

@@ -0,0 +1,2 @@
+export declare const ScanSystem: () => null;
+//# sourceMappingURL=scan-system.d.ts.map

package/dist/systems/scan/scan-system.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scan-system.d.ts","sourceRoot":"","sources":["../../../src/systems/scan/scan-system.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,YAatB,CAAA"}

package/dist/systems/scan/scan-system.js

@@ -0,0 +1,16 @@
+import { sceneRegistry } from '@pascal-app/core';
+import { useEffect } from 'react';
+import useViewer from '../../store/use-viewer';
+export const ScanSystem = () => {
+    const showScans = useViewer((state) => state.showScans);
+    useEffect(() => {
+        const scans = sceneRegistry.byType.scan || new Set();
+        scans.forEach((scanId) => {
+            const node = sceneRegistry.nodes.get(scanId);
+            if (node) {
+                node.visible = showScans;
+            }
+        });
+    }, [showScans]);
+    return null;
+};

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

@@ -0,0 +1,2 @@
+export declare const WallCutout: () => null;
+//# sourceMappingURL=wall-cutout.d.ts.map

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

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

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

@@ -0,0 +1,103 @@
+import { sceneRegistry, useScene } from '@pascal-app/core';
+import { useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+import { Fn, float, fract, length, mix, positionLocal, smoothstep, step, vec2 } from 'three/tsl';
+import { MeshStandardNodeMaterial, Vector3 } from 'three/webgpu';
+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 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 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,
+});
+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);
+    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) ||
+            lastWallMode.current !== wallMode ||
+            sceneRegistry.byType.wall.size !== lastNumberOfWalls.current) {
+            // Camera has moved, update cutout logic here
+            // Update last known positions and time
+            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 {
+                        // Back side
+                        if (wallNode.backSide === 'exterior' && wallNode.frontSide !== 'exterior') {
+                            hideWall = true;
+                        }
+                    }
+                }
+                ;
+                wallMesh.material = hideWall ? invsibleWallMaterial : wallMaterial;
+            });
+            lastWallMode.current = wallMode;
+            lastNumberOfWalls.current = sceneRegistry.byType.wall.size;
+        }
+    });
+    return null;
+};

package/package.json

@@ -1,51 +1,55 @@
 {
   "name": "@pascal-app/viewer",
-  "version": "0.1.1",
-  "description": "React Three Fiber component for viewing Pascal 3D scenes",
-  "private": false,
+  "version": "0.1.3",
+  "description": "3D viewer component for Pascal building editor",
   "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "default": "./dist/index.js"
     }
   },
   "files": [
     "dist",
-    "types.d.ts"
+    "README.md"
   ],
-  "sideEffects": false,
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@react-spring/three": "^10.0.0",
-    "@react-three/csg": "^4.0.0",
-    "@react-three/uikit": "^1.0.0",
-    "clsx": "^2.1.1",
-    "immer": "^10.2.0",
-    "mitt": "^3.0.1",
-    "nanoid": "^5.1.6",
-    "tailwind-merge": "^3.4.0",
-    "three-custom-shader-material": "^6.1.0",
-    "zod": "^4.2.1",
-    "zustand": "^5.0.9"
+    "build": "tsc --declaration --emitDeclarationOnly && tsc",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "three": ">=0.156",
-    "@react-three/fiber": ">=9.0.0",
-    "@react-three/drei": ">=10.0.0"
+    "@pascal-app/core": "^0.1.3",
+    "@react-three/drei": "^10",
+    "@react-three/fiber": "^9",
+    "react": "^18 || ^19",
+    "three": "^0.182"
+  },
+  "dependencies": {
+    "zustand": "^5"
   },
   "devDependencies": {
-    "@pascal/core": "0.1.0",
-    "@types/react": "^19.0.0",
-    "tsup": "^8.5.1"
-  }
+    "@repo/typescript-config": "*",
+    "@types/react": "^19.2.2",
+    "typescript": "5.9.2",
+    "@types/three": "^0.182.0"
+  },
+  "keywords": [
+    "3d",
+    "building",
+    "editor",
+    "viewer",
+    "architecture",
+    "webgpu",
+    "three.js",
+    "react-three-fiber"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/pascal-editor.git",
+    "directory": "packages/viewer"
+  },
+  "license": "MIT"
 }