code organization

apps/editor/components/editor.tsx

@@ -7,7 +7,7 @@ import {
   useScene,
   WallNode,
 } from "@pascal-app/core";
-import { Viewer } from "@pascal-app/viewer";
+import { useViewer, Viewer } from "@pascal-app/viewer";
 import { Stats } from "@react-three/drei";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useEffect, useMemo, useRef } from "react";
@@ -264,8 +264,8 @@ const Selector = () => {
 };
 
 const LevelModeSwitcher = () => {
-  const setLevelMode = useScene((state) => state.setLevelMode);
-  const levelMode = useScene((state) => state.levelMode);
+  const setLevelMode = useViewer((state) => state.setLevelMode);
+  const levelMode = useViewer((state) => state.levelMode);
 
   return (
     <div className="absolute top-4 left-4 z-10 flex gap-2">

bun.lock

@@ -7,6 +7,7 @@
         "@react-three/drei": "^10",
         "@react-three/fiber": "^9",
         "three": "^0.182.0",
+        "zustand": "^5.0.10",
       },
       "devDependencies": {
         "@biomejs/biome": "^2.3.11",
@@ -47,7 +48,6 @@
         "mitt": "^3.0.1",
         "nanoid": "^5.1.6",
         "zod": "^4.3.5",
-        "zustand": "^5.0.10",
       },
       "devDependencies": {
         "@repo/typescript-config": "*",

package.json

@@ -15,7 +15,8 @@
   "dependencies": {
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
-    "three": "^0.182.0"
+    "three": "^0.182.0",
+    "zustand": "^5.0.10"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.11",

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) {