data persist

apps/editor/components/ui/sidebar/app-sidebar.tsx

@@ -27,6 +27,7 @@ import {
 import { cn } from "@/lib/utils";
 import useEditor from "@/store/use-editor";
 import { useViewer } from "@pascal-app/viewer";
+import { SettingsPanel } from "./panels/settings-panel";
 import { SitePanel } from "./panels/site-panel";
 import { ZonePanel } from "./panels/zone-panel";
 
@@ -83,13 +84,8 @@ export function AppSidebar() {
         return <ZonePanel />;
       // case "collections":
       //   return <CollectionsPanel />;
-      // case "settings":
+      case "settings":
-      //   return (
+        return <SettingsPanel />;
-      //     <SettingsPanel
-      //       onOpenHelp={() => setIsHelpOpen(true)}
-      //       onOpenJsonInspector={() => setIsJsonInspectorOpen(true)}
-      //     />
-      //   );
       default:
         return null;
     }

apps/editor/components/ui/sidebar/panels/settings-panel/index.tsx

@@ -0,0 +1,34 @@
+import { useScene } from "@pascal-app/core";
+import { useViewer } from "@pascal-app/viewer";
+import { Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/primitives/button";
+
+export function SettingsPanel() {
+  const clearScene = useScene((state) => state.clearScene);
+  const resetSelection = useViewer((state) => state.resetSelection);
+
+  const handleResetToDefault = () => {
+    clearScene();
+    resetSelection();
+  };
+
+  return (
+    <div className="flex flex-col gap-6 p-3">
+      {/* Danger Zone */}
+      <div className="space-y-2">
+        <label className="font-medium text-destructive text-xs uppercase">
+          Danger Zone
+        </label>
+
+        <Button
+          className="w-full justify-start gap-2"
+          onClick={handleResetToDefault}
+          variant="destructive"
+        >
+          <Trash2 className="size-4" />
+          Clear & Start New
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -1,52 +1,55 @@
-"use client";
+'use client'
 
-import { temporal } from "zundo";
+import { temporal } from 'zundo'
-import { create } from "zustand";
+import { create } from 'zustand'
-import { BuildingNode, ItemNode, type Zone } from "../schema";
+import { persist } from 'zustand/middleware'
-import { LevelNode } from "../schema/nodes/level";
+import { BuildingNode, type Zone } from '../schema'
-import { WallNode } from "../schema/nodes/wall";
+import { LevelNode } from '../schema/nodes/level'
-import type { AnyNode, AnyNodeId } from "../schema/types";
+import type { AnyNode, AnyNodeId } from '../schema/types'
-import * as nodeActions from "./actions/node-actions";
+import * as nodeActions from './actions/node-actions'
-import * as zoneActions from "./actions/zone-actions";
+import * as zoneActions from './actions/zone-actions'
 
 export type SceneState = {
   // 1. The Data: A flat dictionary of all nodes
-  nodes: Record<AnyNodeId, AnyNode>;
+  nodes: Record<AnyNodeId, AnyNode>
-  zones: Record<Zone["id"], Zone>;
+  zones: Record<Zone['id'], Zone>
 
   // 2. The Root: Which nodes are at the top level?
-  rootNodeIds: AnyNodeId[];
+  rootNodeIds: AnyNodeId[]
-  zoneIds: Zone["id"][];
+  zoneIds: Zone['id'][]
 
   // 3. The "Dirty" Set: For the Wall/Physics systems
-  dirtyNodes: Set<AnyNodeId>;
+  dirtyNodes: Set<AnyNodeId>
 
   // Actions
-  loadScene: () => void;
+  loadScene: () => void
-  markDirty: (id: AnyNodeId) => void;
+  clearScene: () => void
-  clearDirty: (id: AnyNodeId) => void;
 
-  createNode: (node: AnyNode, parentId?: AnyNodeId) => void;
+  markDirty: (id: AnyNodeId) => void
-  createNodes: (ops: { node: AnyNode; parentId?: AnyNodeId }[]) => void;
+  clearDirty: (id: AnyNodeId) => void
 
-  updateNode: (id: AnyNodeId, data: Partial<AnyNode>) => void;
+  createNode: (node: AnyNode, parentId?: AnyNodeId) => void
-  updateNodes: (updates: { id: AnyNodeId; data: Partial<AnyNode> }[]) => void;
+  createNodes: (ops: { node: AnyNode; parentId?: AnyNodeId }[]) => void
 
-  deleteNode: (id: AnyNodeId) => void;
+  updateNode: (id: AnyNodeId, data: Partial<AnyNode>) => void
-  deleteNodes: (ids: AnyNodeId[]) => void;
+  updateNodes: (updates: { id: AnyNodeId; data: Partial<AnyNode> }[]) => void
+
+  deleteNode: (id: AnyNodeId) => void
+  deleteNodes: (ids: AnyNodeId[]) => void
 
   // Zone actions
-  createZone: (zone: Zone) => void;
+  createZone: (zone: Zone) => void
-  createZones: (zones: Zone[]) => void;
+  createZones: (zones: Zone[]) => void
-  updateZone: (id: Zone["id"], data: Partial<Zone>) => void;
+  updateZone: (id: Zone['id'], data: Partial<Zone>) => void
-  updateZones: (updates: { id: Zone["id"]; data: Partial<Zone> }[]) => void;
+  updateZones: (updates: { id: Zone['id']; data: Partial<Zone> }[]) => void
-  deleteZone: (id: Zone["id"]) => void;
+  deleteZone: (id: Zone['id']) => void
-  deleteZones: (ids: Zone["id"][]) => void;
+  deleteZones: (ids: Zone['id'][]) => void
-};
+}
 
 // type PartializedStoreState = Pick<SceneState, 'rootNodeIds' | 'nodes'>;
 
 const useScene = create<SceneState>()(
+  persist(
     temporal(
       (set, get) => ({
         // 1. Flat dictionary of all nodes
@@ -60,113 +63,63 @@ const useScene = create<SceneState>()(
         // 3. Dirty set
         dirtyNodes: new Set<AnyNodeId>(),
 
+        clearScene: () => {
+          set({
+            nodes: {},
+            rootNodeIds: [],
+            zones: {},
+            zoneIds: [],
+            dirtyNodes: new Set<AnyNodeId>(),
+          })
+          get().loadScene() // Default scene
+        },
+
         loadScene: () => {
+          if (get().rootNodeIds.length > 0) {
+           // Assign all nodes as dirty to force re-validation
+            Object.values(get().nodes).forEach((node) => {
+              get().markDirty(node.id)
+            }) 
+            return // Scene already loaded
+          }
+
           const building = BuildingNode.parse({
             children: [],
-        });
+          })
 
           const level0 = LevelNode.parse({
             level: 0,
             children: [],
-        });
+          })
-        const level1 = LevelNode.parse({
-          level: 1,
-          children: [],
-        });
-        const level2 = LevelNode.parse({
-          level: 2,
-          children: [],
-        });
 
-        const wall0 = WallNode.parse({
+          building.children.push(level0.id)
-          start: [0, 0],
-          end: [5, 0],
-          children: [],
-          parentId: level0.id,
-        });
-
-        const wall1 = WallNode.parse({
-          start: [0, 0],
-          end: [0, 5],
-          children: [],
-          parentId: level0.id,
-        });
-
-        const wall2 = WallNode.parse({
-          start: [5, 5],
-          end: [0, 5],
-          children: [],
-          parentId: level0.id,
-        });
-
-        const wall3 = WallNode.parse({
-          start: [5, 5],
-          end: [5, 0],
-          children: [],
-          parentId: level1.id,
-        });
-
-        const window1 = ItemNode.parse({
-          type: "item",
-          name: "Window",
-          position: [2.5, 0.5, 0],
-          parentId: wall3.id,
-          asset: {
-            id: "window-round",
-            name: "Round Window",
-            thumbnail: "/items/window-small/thumbnail.png",
-            category: "windows",
-            attachTo: "wall",
-            src: "/items/window-small/model.glb",
-          },
-        });
-
-        wall3.children.push(window1.id);
-
-        level0.children.push(wall0.id, wall1.id, wall2.id);
-        level1.children.push(wall3.id);
-
-        building.children.push(level0.id, level1.id, level2.id);
 
           // Define all nodes flat
           const nodes: Record<AnyNodeId, AnyNode> = {
             [building.id]: building,
             [level0.id]: level0,
-          [level1.id]: level1,
+          }
-          [level2.id]: level2,
-          [wall0.id]: wall0,
-          [wall1.id]: wall1,
-          [wall2.id]: wall2,
-          [wall3.id]: wall3,
-          [window1.id]: window1,
-        };
 
           // Root nodes are the levels
-        const rootNodeIds = [building.id];
+          const rootNodeIds = [building.id]
 
-        get().dirtyNodes.add(wall0.id);
+          set({ nodes, rootNodeIds })
-        get().dirtyNodes.add(wall1.id);
-        get().dirtyNodes.add(wall2.id);
-        get().dirtyNodes.add(wall3.id);
-        set({ nodes, rootNodeIds });
         },
 
         markDirty: (id) => {
-        get().dirtyNodes.add(id);
+          get().dirtyNodes.add(id)
         },
 
         clearDirty: (id) => {
-        get().dirtyNodes.delete(id);
+          get().dirtyNodes.delete(id)
         },
 
         createNodes: (ops) => nodeActions.createNodesAction(set, get, ops),
         createNode: (node, parentId) =>
           nodeActions.createNodesAction(set, get, [{ node, parentId }]),
 
-      updateNodes: (updates) =>
+        updateNodes: (updates) => nodeActions.updateNodesAction(set, get, updates),
-        nodeActions.updateNodesAction(set, get, updates),
+        updateNode: (id, data) => nodeActions.updateNodesAction(set, get, [{ id, data }]),
-      updateNode: (id, data) =>
-        nodeActions.updateNodesAction(set, get, [{ id, data }]),
 
         // --- DELETE ---
 
@@ -180,34 +133,55 @@ const useScene = create<SceneState>()(
         createZone: (zone) => zoneActions.createZonesAction(set, get, [zone]),
 
         updateZones: (updates) => zoneActions.updateZonesAction(set, get, updates),
-      updateZone: (id, data) =>
+        updateZone: (id, data) => zoneActions.updateZonesAction(set, get, [{ id, data }]),
-        zoneActions.updateZonesAction(set, get, [{ id, data }]),
 
         deleteZones: (ids) => zoneActions.deleteZonesAction(set, get, ids),
         deleteZone: (id) => zoneActions.deleteZonesAction(set, get, [id]),
       }),
       {
         partialize: (state) => {
-        const { nodes, rootNodeIds } = state; // Only track nodes and rootNodeIds in history
+          const { nodes, rootNodeIds } = state // Only track nodes and rootNodeIds in history
-        return { nodes, rootNodeIds };
+          return { nodes, rootNodeIds }
         },
         limit: 50, // Limit to last 50 actions
       },
     ),
-);
+    {
+      name: 'editor-storage',
+      partialize: (state) => ({
+        nodes: state.nodes,
+        rootNodeIds: state.rootNodeIds,
+        zones: state.zones,
+        zoneIds: state.zoneIds,
+      }),
+      onRehydrateStorage: (state) => {
+        console.log('hydration starts')
 
-export default useScene;
+        // optional
+        return (state, error) => {
+          if (error) {
+            console.log('an error happened during hydration', error)
+          } else {
+            console.log('hydration finished')
+          }
+        }
+      },
+    },
+  ),
+)
+
+export default useScene
 
 // Subscribe to the temporal store (Undo/Redo events)
 useScene.temporal.subscribe((state, prevState) => {
   // Check if we just jumped in time (Undo/Redo)
   // If the 'nodes' object changed but it wasn't a normal 'set'
-  const currentNodes = useScene.getState().nodes;
+  const currentNodes = useScene.getState().nodes
 
   // Trigger a full scene re-validation
   Object.values(currentNodes).forEach((node) => {
-    if (node.type === "wall") {
+    if (node.type === 'wall') {
-      useScene.getState().markDirty(node.id);
+      useScene.getState().markDirty(node.id)
     }
-  });
+  })
-});
+})

packages/viewer/src/components/renderers/item/item-renderer.tsx

@@ -39,6 +39,7 @@ const ModelRenderer = ({ node }: { node: ItemNode }) => {
       if ((child as Mesh).isMesh) {
         child.castShadow = true
         child.receiveShadow = true
+        // TODO: do it with a shared material 
         child.material = new MeshStandardNodeMaterial({
           color: 0xffffff,
           roughness: 0.8,