code organization

packages/core/package.json

@@ -25,7 +25,6 @@
     "dedent": "^1.7.1",
     "mitt": "^3.0.1",
     "nanoid": "^5.1.6",
-    "zod": "^4.3.5",
-    "zustand": "^5.0.10"
+    "zod": "^4.3.5"
   }
 }

packages/core/src/index.ts

@@ -1,5 +1,5 @@
 // Store
-export { default as useScene } from "./store/useScene";
+export { default as useScene } from "./store/use-scene";
 
 // Hooks
 export {
@@ -8,7 +8,7 @@ export {
 } from "./hooks/scene-registry/scene-registry";
 
 // Systems
-export { LevelSystem } from "./systems/level/level-system";
+export { LevelSystem } from "../../viewer/src/systems/level/level-system";
 export { WallSystem } from "./systems/wall/wall-system";
 
 // Events

packages/core/src/store/use-scene.ts

@@ -20,9 +20,6 @@ type SceneState = {
   loadScene: () => void;
   markDirty: (id: AnyNodeId) => void;
   clearDirty: (id: AnyNodeId) => void;
-
-  levelMode: "stacked" | "exploded" | "solo" | "manual";
-  setLevelMode: (mode: "stacked" | "exploded" | "solo" | "manual") => void;
 };
 
 const useScene = create<SceneState>()((set, get) => ({
@@ -117,9 +114,6 @@ const useScene = create<SceneState>()((set, get) => ({
   clearDirty: (id) => {
     get().dirtyNodes.delete(id);
   },
-
-  levelMode: "exploded",
-  setLevelMode: (mode) => set({ levelMode: mode }),
 }));
 
 useScene.getState().loadScene();

packages/core/src/systems/wall/wall-system.tsx

@@ -2,7 +2,7 @@ import { useFrame } from "@react-three/fiber";
 import * as THREE from "three";
 import { sceneRegistry } from "../../hooks/scene-registry/scene-registry";
 import { AnyNode, WallNode } from "../../schema";
-import useScene from "../../store/useScene";
+import useScene from "../../store/use-scene";
 
 export const WallSystem = () => {
   const { nodes, dirtyNodes, clearDirty } = useScene();

packages/core/tsconfig.json

@@ -4,6 +4,6 @@
     "outDir": "dist",
     "rootDir": "src"
   },
-  "include": ["src"],
+  "include": ["src", "../viewer/src/systems/level"],
   "exclude": ["node_modules", "dist"]
 }

packages/viewer/src/index.ts

@@ -1 +1,3 @@
 export { default as Viewer } from "./components/viewer/viewer";
+
+export { default as useViewer } from "./store/use-viewer";

packages/viewer/src/store/use-viewer.ts

@@ -0,0 +1,21 @@
+"use client";
+
+import { LevelNode } from "@pascal-app/core";
+import { create } from "zustand";
+
+type ViewerState = {
+  levelMode: "stacked" | "exploded" | "solo" | "manual";
+  setLevelMode: (mode: "stacked" | "exploded" | "solo" | "manual") => void;
+
+  currentLevelId: LevelNode["id"] | null;
+  setCurrentLevelId: (id: LevelNode["id"] | null) => void;
+};
+
+const useViewer = create<ViewerState>()((set, get) => ({
+  levelMode: "exploded",
+  setLevelMode: (mode) => set({ levelMode: mode }),
+  currentLevelId: null,
+  setCurrentLevelId: (id) => set({ currentLevelId: id }),
+}));
+
+export default useViewer;

packages/viewer/src/systems/level/level-system.tsx

@@ -1,15 +1,14 @@
+import { LevelNode, sceneRegistry, useScene } from "@pascal-app/core";
 import { useFrame } from "@react-three/fiber";
 import { lerp } from "three/src/math/MathUtils.js";
-import { sceneRegistry } from "../../hooks/scene-registry/scene-registry";
-import { LevelNode } from "../../schema";
-import useScene from "../../store/useScene";
+import useViewer from "../../store/use-viewer";
 
 const LEVEL_HEIGHT = 2.5;
 const EXPLODED_GAP = 5;
 
 export const LevelSystem = () => {
   useFrame((_, delta) => {
-    const levelMode = useScene.getState().levelMode;
+    const levelMode = useViewer.getState().levelMode;
     sceneRegistry.byType.level.forEach((levelId) => {
       const obj = sceneRegistry.nodes.get(levelId);
       if (obj) {