code organization

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

@@ -0,0 +1,24 @@
+import { LevelNode, 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;
+    sceneRegistry.byType.level.forEach((levelId) => {
+      const obj = sceneRegistry.nodes.get(levelId);
+      if (obj) {
+        const level = useScene.getState().nodes[levelId as LevelNode["id"]];
+        const targetY =
+          ((level as any).level || 0) *
+          (LEVEL_HEIGHT + (levelMode === "stacked" ? 0 : EXPLODED_GAP));
+        obj.position.y = lerp(obj.position.y, targetY, delta * 3);
+      }
+    });
+  });
+  return null;
+};