From 5421349c791739557fafd0403db736aa3648e22c Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Fri, 8 Nov 2024 02:38:19 +0100
Subject: [PATCH] feat: migrate some more stuff to svelte-5, mainly app
 settings

---
 app/package.json                              |   1 -
 app/src/lib/graph-interface/graph-manager.ts  |  19 +--
 .../lib/graph-interface/graph/Graph.svelte    |   7 +-
 .../lib/graph-interface/graph/Wrapper.svelte  |  10 +-
 app/src/lib/graph-interface/graph/colors.ts   |   1 -
 .../lib/graph-interface/graph/state.svelte.ts |   9 +-
 .../lib/graph-interface/node/NodeHTML.svelte  |   1 -
 .../graph-interface/node/NodeHeader.svelte    |   4 +-
 .../graph-interface/node/NodeParameter.svelte |   8 +-
 app/src/lib/helpers/deepMerge.ts              |  24 +++
 app/src/lib/helpers/localState.svelte.ts      |  11 ++
 app/src/lib/node-store/DraggableNode.svelte   |   1 +
 app/src/lib/node-store/NodeStore.svelte       |   5 +-
 .../performance/SmallPerformanceViewer.svelte |  63 ++++----
 app/src/lib/result-viewer/Scene.svelte        |  32 ++--
 .../src => app/src/lib/runtime}/index.ts      |   1 +
 .../lib/runtime}/remote-runtime-executor.ts   |   0
 .../lib/runtime}/runtime-executor-cache.ts    |   0
 .../src/lib/runtime}/runtime-executor.ts      |   0
 .../worker-runtime-executor-backend.ts        |   0
 .../lib/runtime}/worker-runtime-executor.ts   |   5 +-
 app/src/lib/settings/Settings.svelte          |   1 +
 app/src/lib/settings/app-settings.svelte.ts   | 153 ++++++++++++++++++
 .../settings/panels/ActiveNodeSettings.svelte |   2 +-
 .../lib/settings/panels/ExportSettings.svelte |   3 +
 .../lib/settings/panels/NestedSettings.svelte | 128 +++++++++------
 app/src/routes/+page.svelte                   |  11 +-
 nodes/max/plantarium/gravity/src/input.json   |   2 +
 nodes/max/plantarium/vec3/src/input.json      |   3 +
 packages/runtime/package.json                 |  21 ---
 packages/types/src/settings.ts                |   7 +
 packages/ui/src/lib/app.css                   |   3 -
 packages/ui/src/lib/elements/Checkbox.svelte  |   3 +-
 packages/ui/src/lib/elements/Select.svelte    |   1 -
 34 files changed, 375 insertions(+), 165 deletions(-)
 create mode 100644 app/src/lib/helpers/deepMerge.ts
 create mode 100644 app/src/lib/helpers/localState.svelte.ts
 rename {packages/runtime/src => app/src/lib/runtime}/index.ts (99%)
 rename {packages/runtime/src => app/src/lib/runtime}/remote-runtime-executor.ts (100%)
 rename {packages/runtime/src => app/src/lib/runtime}/runtime-executor-cache.ts (100%)
 rename {packages/runtime/src => app/src/lib/runtime}/runtime-executor.ts (100%)
 rename {packages/runtime/src => app/src/lib/runtime}/worker-runtime-executor-backend.ts (100%)
 rename {packages/runtime/src => app/src/lib/runtime}/worker-runtime-executor.ts (84%)
 create mode 100644 app/src/lib/settings/app-settings.svelte.ts
 delete mode 100644 packages/runtime/package.json
 create mode 100644 packages/types/src/settings.ts

diff --git a/app/package.json b/app/package.json
index f6eeaeb..f27c68c 100644
--- a/app/package.json
+++ b/app/package.json
@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@nodes/registry": "link:../packages/registry",
-    "@nodes/runtime": "link:../packages/runtime",
     "@nodes/ui": "link:../packages/ui",
     "@nodes/utils": "link:../packages/utils",
     "@sveltejs/kit": "^2.7.4",
diff --git a/app/src/lib/graph-interface/graph-manager.ts b/app/src/lib/graph-interface/graph-manager.ts
index 3e8c5db..c962126 100644
--- a/app/src/lib/graph-interface/graph-manager.ts
+++ b/app/src/lib/graph-interface/graph-manager.ts
@@ -29,16 +29,22 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
 
   private _nodes: Map<number, Node> = new Map();
   nodes: Writable<Map<number, Node>> = writable(new Map());
-  settingTypes: Record<string, NodeInput> = {};
-  settings: Record<string, unknown> = {};
+
   private _edges: Edge[] = [];
   edges: Writable<Edge[]> = writable([]);
 
+  settingTypes: Record<string, NodeInput> = {};
+  settings: Record<string, unknown> = {};
+
   currentUndoGroup: number | null = null;
 
   inputSockets: Writable<Set<string>> = writable(new Set());
 
   history: HistoryManager = new HistoryManager();
+  execute = throttle(() => {
+    if (this.loaded === false) return;
+    this.emit("result", this.serialize());
+  }, 10);
 
   constructor(public registry: NodeRegistry) {
     super();
@@ -53,7 +59,6 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
       }
       this.inputSockets.set(s);
     });
-    this.execute = throttle(() => this._execute(), 10);
   }
 
   serialize(): Graph {
@@ -67,7 +72,6 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
     const edges = this._edges.map(edge => [edge[0].id, edge[1], edge[2].id, edge[3]]) as Graph["edges"];
     const serialized = { id: this.graph.id, settings: this.settings, nodes, edges };
     logger.groupEnd();
-    console.log({ serialized });
 
     return clone(serialized);
   }
@@ -86,11 +90,6 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
   }
 
 
-  execute() { }
-  _execute() {
-    if (this.loaded === false) return;
-    this.emit("result", this.serialize());
-  }
 
   getNodeDefinitions() {
     return this.registry.getAllNodes();
@@ -111,9 +110,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph, "result": any, "
     return [...nodes.values()];
   }
 
-
   getEdgesBetweenNodes(nodes: Node[]): [number, number, number, string][] {
-
     const edges = [];
     for (const node of nodes) {
       const children = node.tmp?.children || [];
diff --git a/app/src/lib/graph-interface/graph/Graph.svelte b/app/src/lib/graph-interface/graph/Graph.svelte
index b06cfbd..b51f7fc 100644
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
@@ -21,11 +21,10 @@
   import HelpView from "../HelpView.svelte";
   import FileSaver from "file-saver";
   import { Canvas } from "@threlte/core";
+  import { getGraphManager } from "./context.js";
 
   const state = getGraphState();
 
-  export let manager: GraphManager;
-
   export let snapToGrid = true;
   export let showGrid = true;
   export let showHelp = false;
@@ -33,7 +32,8 @@
   let keymap =
     getContext<ReturnType<typeof createKeyMap>>("keymap") || createKeyMap([]);
 
-  setContext("graphManager", manager);
+  const manager = getGraphManager();
+
   const status = manager.status;
   const nodes = manager.nodes;
   const edges = manager.edges;
@@ -965,6 +965,7 @@
 <style>
   .graph-wrapper {
     position: relative;
+    z-index: 0;
     transition: opacity 0.3s ease;
     height: 100%;
   }
diff --git a/app/src/lib/graph-interface/graph/Wrapper.svelte b/app/src/lib/graph-interface/graph/Wrapper.svelte
index 1bd8080..078a509 100644
--- a/app/src/lib/graph-interface/graph/Wrapper.svelte
+++ b/app/src/lib/graph-interface/graph/Wrapper.svelte
@@ -8,6 +8,9 @@
   import { createKeyMap } from "$lib/helpers/createKeyMap";
   import { GraphState } from "./state.svelte";
 
+  const state = new GraphState();
+  setContext("graphState", state);
+
   type Props = {
     graph: Graph;
     registry: NodeRegistry;
@@ -38,10 +41,9 @@
   }: Props = $props();
 
   export const keymap = createKeyMap([]);
-  export const manager = new GraphManager(registry);
 
-  const state = new GraphState();
-  setContext("graphState", state);
+  export const manager = new GraphManager(registry);
+  setContext("graphManager", manager);
 
   $effect(() => {
     if (state.activeNodeId !== -1) {
@@ -75,4 +77,4 @@
   manager.load(graph);
 </script>
 
-<GraphEl {manager} bind:showGrid bind:snapToGrid bind:showHelp />
+<GraphEl bind:showGrid bind:snapToGrid bind:showHelp />
diff --git a/app/src/lib/graph-interface/graph/colors.ts b/app/src/lib/graph-interface/graph/colors.ts
index fc6ddff..8720d9c 100644
--- a/app/src/lib/graph-interface/graph/colors.ts
+++ b/app/src/lib/graph-interface/graph/colors.ts
@@ -18,7 +18,6 @@ let lastStyle = "";
 
 function updateColors() {
   if (!("getComputedStyle" in globalThis)) return;
-  console.log("updateColors")
   const style = getComputedStyle(document.body.parentElement!);
   let hash = "";
   for (const v of variables) {
diff --git a/app/src/lib/graph-interface/graph/state.svelte.ts b/app/src/lib/graph-interface/graph/state.svelte.ts
index 942d7cb..05bfa67 100644
--- a/app/src/lib/graph-interface/graph/state.svelte.ts
+++ b/app/src/lib/graph-interface/graph/state.svelte.ts
@@ -8,12 +8,7 @@ export function getGraphState() {
 export class GraphState {
 
   activeNodeId = $state(-1);
-
   selectedNodes = $state(new Set<number>());
-  clearSelection() {
-    this.selectedNodes = new Set();
-  }
-
   activeSocket = $state<Socket | null>(null);
   hoveredSocket = $state<Socket | null>(null);
   possibleSockets = $state<Socket[]>([]);
@@ -21,6 +16,10 @@ export class GraphState {
     this.possibleSockets.map((s) => `${s.node.id}-${s.index}`),
   ));
 
+  clearSelection() {
+    this.selectedNodes = new Set();
+  }
+
 }
 
 export { colors } from "./colors";
diff --git a/app/src/lib/graph-interface/node/NodeHTML.svelte b/app/src/lib/graph-interface/node/NodeHTML.svelte
index 61c30fc..0e8fff2 100644
--- a/app/src/lib/graph-interface/node/NodeHTML.svelte
+++ b/app/src/lib/graph-interface/node/NodeHTML.svelte
@@ -3,7 +3,6 @@
   import NodeHeader from "./NodeHeader.svelte";
   import NodeParameter from "./NodeParameter.svelte";
   import { getContext, onMount } from "svelte";
-  import Page from "../../../routes/+page.svelte";
   export let isActive = false;
   export let isSelected = false;
   export let inView = true;
diff --git a/app/src/lib/graph-interface/node/NodeHeader.svelte b/app/src/lib/graph-interface/node/NodeHeader.svelte
index 09d9f58..eef2a6e 100644
--- a/app/src/lib/graph-interface/node/NodeHeader.svelte
+++ b/app/src/lib/graph-interface/node/NodeHeader.svelte
@@ -26,8 +26,8 @@
   const aspectRatio = 0.25;
 
   const path = createNodePath({
-    depth: 7,
-    height: 40,
+    depth: 5,
+    height: 29,
     y: 50,
     cornerTop,
     rightBump,
diff --git a/app/src/lib/graph-interface/node/NodeParameter.svelte b/app/src/lib/graph-interface/node/NodeParameter.svelte
index f627cf8..62f1f3d 100644
--- a/app/src/lib/graph-interface/node/NodeParameter.svelte
+++ b/app/src/lib/graph-interface/node/NodeParameter.svelte
@@ -59,9 +59,9 @@
     aspectRatio,
   });
   const pathDisabled = createNodePath({
-    depth: 0,
-    height: 15,
-    y: 50,
+    depth: 4.5,
+    height: 14,
+    y: 50.5,
     cornerBottom,
     leftBump,
     aspectRatio,
@@ -80,7 +80,7 @@
   class="wrapper"
   data-node-type={node.type}
   data-node-input={id}
-  class:disabled={!graphState.possibleSocketIds.has(socketId)}
+  class:disabled={!graphState?.possibleSocketIds.has(socketId)}
 >
   {#key id && graphId}
     <div class="content" class:disabled={$inputSockets?.has(socketId)}>
diff --git a/app/src/lib/helpers/deepMerge.ts b/app/src/lib/helpers/deepMerge.ts
new file mode 100644
index 0000000..5d9737a
--- /dev/null
+++ b/app/src/lib/helpers/deepMerge.ts
@@ -0,0 +1,24 @@
+export function isObject(item: Record<string, unknown> | unknown): item is Record<string, unknown> {
+  return (typeof item === 'object' && !Array.isArray(item));
+}
+
+type Object = Record<string, unknown>;
+
+export function mergeDeep<T extends Object>(target: T, ...sources: Object[]): T {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (source === undefined) return target;
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        if (isObject(target[key])) mergeDeep(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+
+  return mergeDeep(target, ...sources);
+}
diff --git a/app/src/lib/helpers/localState.svelte.ts b/app/src/lib/helpers/localState.svelte.ts
new file mode 100644
index 0000000..8daa19a
--- /dev/null
+++ b/app/src/lib/helpers/localState.svelte.ts
@@ -0,0 +1,11 @@
+export function localState<T>(key: string, defaultValue: T): T {
+  const stored = localStorage.getItem(key)
+  const state = $state(stored ? JSON.parse(stored) : defaultValue)
+  $effect.root(() => {
+    $effect(() => {
+      const value = $state.snapshot(state);
+      localStorage.setItem(key, JSON.stringify(value));
+    });
+  });
+  return state;
+}
diff --git a/app/src/lib/node-store/DraggableNode.svelte b/app/src/lib/node-store/DraggableNode.svelte
index 82fa680..4f2dce8 100644
--- a/app/src/lib/node-store/DraggableNode.svelte
+++ b/app/src/lib/node-store/DraggableNode.svelte
@@ -3,6 +3,7 @@
   import type { NodeDefinition } from "@nodes/types";
 
   export let node: NodeDefinition;
+  console.log(node);
 
   let dragging = false;
 
diff --git a/app/src/lib/node-store/NodeStore.svelte b/app/src/lib/node-store/NodeStore.svelte
index 0dcadba..39fbf62 100644
--- a/app/src/lib/node-store/NodeStore.svelte
+++ b/app/src/lib/node-store/NodeStore.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import localStore from "$lib/helpers/localStore";
-  import type { RemoteNodeRegistry } from "$lib/node-registry-client";
   import { writable } from "svelte/store";
   import BreadCrumbs from "./BreadCrumbs.svelte";
   import DraggableNode from "./DraggableNode.svelte";
+  import type { RemoteNodeRegistry } from "@nodes/registry";
 
   export let registry: RemoteNodeRegistry;
 
@@ -58,7 +57,7 @@
     {:then collection}
       {#each collection.nodes as node}
         {#await registry.fetchNodeDefinition(node.id)}
-          <div>Loading...</div>
+          <div>Loading... {node.id}</div>
         {:then node}
           {#if node}
             <DraggableNode {node} />
diff --git a/app/src/lib/performance/SmallPerformanceViewer.svelte b/app/src/lib/performance/SmallPerformanceViewer.svelte
index 3b9b2d1..80d2910 100644
--- a/app/src/lib/performance/SmallPerformanceViewer.svelte
+++ b/app/src/lib/performance/SmallPerformanceViewer.svelte
@@ -25,44 +25,42 @@
 <div class="wrapper">
   <table>
     <tbody>
-    <tr on:click={() => ($open.runtime = !$open.runtime)}>
-      <td>{$open.runtime ? "-" : "+"} runtime </td>
-      <td>{humanizeDuration(runtime || 1000)}</td>
-    </tr>
-    {#if $open.runtime}
-      <tr>
-        <td colspan="2">
-          <SmallGraph points={getPoints($store, "runtime")} />
+      <tr on:click={() => ($open.runtime = !$open.runtime)}>
+        <td>{$open.runtime ? "-" : "+"} runtime </td>
+        <td>{humanizeDuration(runtime || 1000)}</td>
+      </tr>
+      {#if $open.runtime}
+        <tr>
+          <td colspan="2">
+            <SmallGraph points={getPoints($store, "runtime")} />
+          </td>
+        </tr>
+      {/if}
+
+      <tr on:click={() => ($open.fps = !$open.fps)}>
+        <td>{$open.fps ? "-" : "+"} fps </td>
+        <td>
+          {Math.floor(fps[fps.length - 1])}fps
         </td>
       </tr>
-    {/if}
+      {#if $open.fps}
+        <tr>
+          <td colspan="2">
+            <SmallGraph points={fps} />
+          </td>
+        </tr>
+      {/if}
 
-    <tr on:click={() => ($open.fps = !$open.fps)}>
-      <td>{$open.fps ? "-" : "+"} fps </td>
-      <td>
-        {#if fps[fps.length - 1] > 5}
-          {Math.floor(1000 / fps[fps.length - 1])}fps
-        {/if}
-      </td>
-    </tr>
-    {#if $open.fps}
       <tr>
-        <td colspan="2">
-          <SmallGraph points={fps} />
-        </td>
+        <td>vertices </td>
+        <td>{humanizeNumber(vertices || 0)}</td>
       </tr>
-    {/if}
 
-    <tr>
-      <td>vertices </td>
-      <td>{humanizeNumber(vertices || 0)}</td>
-    </tr>
-
-    <tr>
-      <td>faces </td>
-      <td>{humanizeNumber(faces || 0)}</td>
-    </tr>
-      </tbody>
+      <tr>
+        <td>faces </td>
+        <td>{humanizeNumber(faces || 0)}</td>
+      </tr>
+    </tbody>
   </table>
 </div>
 
@@ -71,6 +69,7 @@
     position: absolute;
     top: 10px;
     left: 10px;
+    z-index: 2;
     background: var(--layer-0);
     border: solid thin var(--outline);
     border-collapse: collapse;
diff --git a/app/src/lib/result-viewer/Scene.svelte b/app/src/lib/result-viewer/Scene.svelte
index 11e8dbe..917937c 100644
--- a/app/src/lib/result-viewer/Scene.svelte
+++ b/app/src/lib/result-viewer/Scene.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { T, useThrelte } from "@threlte/core";
+  import { T, useTask, useThrelte } from "@threlte/core";
   import { MeshLineGeometry, MeshLineMaterial, Text } from "@threlte/extras";
   import {
     type Group,
@@ -8,23 +8,29 @@
     type Vector3Tuple,
     Box3,
     Mesh,
-    MeshMatcapMaterial,
     MeshBasicMaterial,
   } from "three";
   import { AppSettings } from "../settings/app-settings";
   import Camera from "./Camera.svelte";
 
-  const threlte = useThrelte();
+  const { renderStage, invalidate: _invalidate } = useThrelte();
 
   export let fps: number[] = [];
-  let renderer = threlte.renderer;
-  let rendererRender = renderer.render;
-  renderer.render = function (scene, camera) {
-    const a = performance.now();
-    rendererRender.call(renderer, scene, camera);
-    fps.push(performance.now() - a);
-    fps = fps.slice(-100);
-  };
+  // let renderer = threlte.renderer;
+  // let rendererRender = renderer.render;
+  // renderer.render = function (scene, camera) {
+  //   const a = performance.now();
+  //   rendererRender.call(renderer, scene, camera);
+  //   fps.push(performance.now() - a);
+  //   fps = fps.slice(-100);
+  // };
+  useTask(
+    (delta) => {
+      fps.push(1 / delta);
+      fps = fps.slice(-100);
+    },
+    { stage: renderStage, autoInvalidate: false },
+  );
 
   export const invalidate = function () {
     if (scene) {
@@ -44,7 +50,7 @@
         .max(new Vector3(-4, -4, -4))
         .min(new Vector3(4, 4, 4));
     }
-    threlte.invalidate();
+    _invalidate();
   };
 
   let geometries: BufferGeometry[] = [];
@@ -68,7 +74,7 @@
         child.material.wireframe = $AppSettings.wireframe;
       }
     });
-    threlte.invalidate();
+    invalidate();
   }
 
   function getPosition(geo: BufferGeometry, i: number) {
diff --git a/packages/runtime/src/index.ts b/app/src/lib/runtime/index.ts
similarity index 99%
rename from packages/runtime/src/index.ts
rename to app/src/lib/runtime/index.ts
index 6feae3f..2058a7f 100644
--- a/packages/runtime/src/index.ts
+++ b/app/src/lib/runtime/index.ts
@@ -1,3 +1,4 @@
 export * from "./runtime-executor"
 export * from "./runtime-executor-cache"
 export * from "./worker-runtime-executor"
+
diff --git a/packages/runtime/src/remote-runtime-executor.ts b/app/src/lib/runtime/remote-runtime-executor.ts
similarity index 100%
rename from packages/runtime/src/remote-runtime-executor.ts
rename to app/src/lib/runtime/remote-runtime-executor.ts
diff --git a/packages/runtime/src/runtime-executor-cache.ts b/app/src/lib/runtime/runtime-executor-cache.ts
similarity index 100%
rename from packages/runtime/src/runtime-executor-cache.ts
rename to app/src/lib/runtime/runtime-executor-cache.ts
diff --git a/packages/runtime/src/runtime-executor.ts b/app/src/lib/runtime/runtime-executor.ts
similarity index 100%
rename from packages/runtime/src/runtime-executor.ts
rename to app/src/lib/runtime/runtime-executor.ts
diff --git a/packages/runtime/src/worker-runtime-executor-backend.ts b/app/src/lib/runtime/worker-runtime-executor-backend.ts
similarity index 100%
rename from packages/runtime/src/worker-runtime-executor-backend.ts
rename to app/src/lib/runtime/worker-runtime-executor-backend.ts
diff --git a/packages/runtime/src/worker-runtime-executor.ts b/app/src/lib/runtime/worker-runtime-executor.ts
similarity index 84%
rename from packages/runtime/src/worker-runtime-executor.ts
rename to app/src/lib/runtime/worker-runtime-executor.ts
index 721e161..48cccd7 100644
--- a/packages/runtime/src/worker-runtime-executor.ts
+++ b/app/src/lib/runtime/worker-runtime-executor.ts
@@ -1,9 +1,10 @@
 /// <reference types="vite-plugin-comlink/client" />
-
 import type { Graph, RuntimeExecutor } from "@nodes/types";
 
+
 export class WorkerRuntimeExecutor implements RuntimeExecutor {
-  private worker = new ComlinkWorker<typeof import('./worker-runtime-executor-backend.ts')>(new URL("worker-runtime-executor-backend.ts", import.meta.url));
+  private worker = new ComlinkWorker<typeof import('./worker-runtime-executor-backend.ts')>(new URL(`./worker-runtime-executor-backend.ts`, import.meta.url));
+
   constructor() {
     console.log(import.meta.url)
   }
diff --git a/app/src/lib/settings/Settings.svelte b/app/src/lib/settings/Settings.svelte
index bdddad7..1a97b0c 100644
--- a/app/src/lib/settings/Settings.svelte
+++ b/app/src/lib/settings/Settings.svelte
@@ -94,6 +94,7 @@
 
   .content {
     background: var(--layer-1);
+    z-index: 10;
     position: relative;
     max-height: 100vh;
     overflow-y: auto;
diff --git a/app/src/lib/settings/app-settings.svelte.ts b/app/src/lib/settings/app-settings.svelte.ts
new file mode 100644
index 0000000..268f803
--- /dev/null
+++ b/app/src/lib/settings/app-settings.svelte.ts
@@ -0,0 +1,153 @@
+import { localState } from "$lib/helpers/localState.svelte";
+import type { NodeInput } from "@nodes/types";
+
+const themes = ["dark", "light", "catppuccin", "solarized", "high-contrast", "nord", "dracula"];
+
+export const AppSettingTypes = {
+  theme: {
+    type: "select",
+    options: themes,
+    label: "Theme",
+    value: themes[0],
+  },
+  showGrid: {
+    type: "boolean",
+    label: "Show Grid",
+    value: true,
+  },
+  centerCamera: {
+    type: "boolean",
+    label: "Center Camera",
+    value: true
+  },
+  nodeInterface: {
+    title: "Node Interface",
+    showNodeGrid: {
+      type: "boolean",
+      label: "Show Grid",
+      value: true
+    },
+    snapToGrid: {
+      type: "boolean",
+      label: "Snap to Grid",
+      value: true
+    },
+    showHelp: {
+      type: "boolean",
+      label: "Show Help",
+      value: false
+    }
+  },
+  debug: {
+    wireframe: {
+      type: "boolean",
+      label: "Wireframe",
+      value: false,
+    },
+    useWorker: {
+      type: "boolean",
+      label: "Execute runtime in worker",
+      value: true,
+    },
+    showIndices: {
+      type: "boolean",
+      label: "Show Indices",
+      value: false,
+    },
+    showPerformancePanel: {
+      type: "boolean",
+      label: "Show Performance Panel",
+      value: false,
+    },
+    showBenchmarkPanel: {
+      type: "boolean",
+      label: "Show Benchmark Panel",
+      value: false,
+    },
+    showVertices: {
+      type: "boolean",
+      label: "Show Vertices",
+      value: false,
+    },
+    showStemLines: {
+      type: "boolean",
+      label: "Show Stem Lines",
+      value: false,
+    },
+    stressTest: {
+      title: "Stress Test",
+      amount: {
+        type: "integer",
+        min: 2,
+        max: 15
+      },
+      loadGrid: {
+        type: "button",
+        label: "Load Grid"
+      },
+      loadTree: {
+        type: "button",
+        label: "Load Tree"
+      },
+      lottaFaces: {
+        type: "button",
+        label: "Load 'lots of faces'"
+      },
+      lottaNodes: {
+        type: "button",
+        label: "Load 'lots of nodes'"
+      },
+      lottaNodesAndFaces: {
+        type: "button",
+        label: "Load 'lots of nodes and faces'"
+      }
+    },
+  }
+} as const
+
+type IsInputDefinition<T> = T extends NodeInput ? T : never;
+type HasTitle = { title: string };
+type ExtractSettingsValues<T> = {
+  [K in keyof T]: T[K] extends HasTitle
+  ? ExtractSettingsValues<Omit<T[K], 'title'>>
+  : T[K] extends IsInputDefinition<T[K]>
+  ? T[K] extends { value: any }
+  ? T[K]['value']
+  : never
+  : T[K] extends Record<string, any>
+  ? ExtractSettingsValues<T[K]>
+  : never;
+};
+
+function settingsToStore<T>(settings: T): ExtractSettingsValues<T> {
+  const result = {} as any;
+  for (const key in settings) {
+    const value = settings[key];
+    if (value && typeof value === 'object') {
+      if ('value' in value) {
+        result[key] = value.value;
+      } else {
+        result[key] = settingsToStore(value);
+      }
+    }
+  }
+  return result;
+}
+
+export const appSettings = localState("app-settings", settingsToStore(AppSettingTypes));
+
+$effect.root(() => {
+  $effect(() => {
+    const { theme } = $state.snapshot(appSettings);
+    const classes = document.body.parentElement?.classList;
+    const newClassName = `theme-${theme}`;
+    if (classes) {
+      for (const className of classes) {
+        if (className.startsWith("theme-") && className !== newClassName) {
+          classes.remove(className);
+        }
+      }
+    }
+    document.body?.parentElement?.classList.add(newClassName);
+  });
+});
diff --git a/app/src/lib/settings/panels/ActiveNodeSettings.svelte b/app/src/lib/settings/panels/ActiveNodeSettings.svelte
index ce6ce1f..9189a63 100644
--- a/app/src/lib/settings/panels/ActiveNodeSettings.svelte
+++ b/app/src/lib/settings/panels/ActiveNodeSettings.svelte
@@ -11,7 +11,7 @@
   function filterInputs(inputs: Record<string, NodeInput>) {
     return Object.fromEntries(
       Object.entries(inputs)
-        .filter(([key, value]) => {
+        .filter(([_key, value]) => {
           return value.hidden === true;
         })
         .map(([key, value]) => {
diff --git a/app/src/lib/settings/panels/ExportSettings.svelte b/app/src/lib/settings/panels/ExportSettings.svelte
index 13ffaad..00597cc 100644
--- a/app/src/lib/settings/panels/ExportSettings.svelte
+++ b/app/src/lib/settings/panels/ExportSettings.svelte
@@ -3,6 +3,7 @@
   import type { OBJExporter } from "three/addons/exporters/OBJExporter.js";
   import type { GLTFExporter } from "three/addons/exporters/GLTFExporter.js";
   import FileSaver from "file-saver";
+  import { appSettings } from "../app-settings.svelte";
 
   // Download
   const download = (
@@ -51,6 +52,8 @@
     // download .obj file
     download(result, "plant", "text/plain", "obj");
   }
+
+
 </script>
 
 <div class="p-2">
diff --git a/app/src/lib/settings/panels/NestedSettings.svelte b/app/src/lib/settings/panels/NestedSettings.svelte
index 82c8fed..bf1914d 100644
--- a/app/src/lib/settings/panels/NestedSettings.svelte
+++ b/app/src/lib/settings/panels/NestedSettings.svelte
@@ -1,70 +1,100 @@
 <script lang="ts">
-  import localStore from "$lib/helpers/localStore";
+  import NestedSettings from "./NestedSettings.svelte";
+  import {localState} from "$lib/helpers/localState.svelte";
   import type { NodeInput } from "@nodes/types";
   import Input from "@nodes/ui";
-  import type { Writable } from "svelte/store";
 
-  type Button = { type: "button"; label?: string; callback: () => void };
+  type Button = { type: "button"; label?: string };
 
   type InputType = NodeInput | Button;
 
   interface Nested {
-    [key: string]: (Nested & { __title?: string }) | InputType;
+    [key: string]: (Nested & { title?: string }) | InputType;
   }
 
-  export let id: string;
+  type Props = {
+    id: string;
+    key?: string;
+    value: Record<string, unknown> | string | number | boolean;
+    type: Nested;
+    depth?: number;
+  };
 
-  $: expandedDetails = localStore<Record<string, boolean>>(
-    `nodes.settings.expanded.${id}`,
-    {},
-  );
+  let { id, key = "", value = $bindable(), type, depth = 0 }: Props = $props();
 
-  export let settings: Nested;
-  export let store: Writable<Record<string, any>>;
-  export let depth = 0;
-
-  const keys = Object.keys(settings).filter((key) => key !== "__title");
   function isNodeInput(v: InputType | Nested): v is InputType {
     return v && "type" in v;
   }
+
+  let internalValue = $state(Array.isArray(type?.[key]?.options) ? type[key]?.options?.indexOf(value?.[key]) : value?.[key]);
+
+  let openSections = localState("open-details", {});
+  let open = $state(openSections[id]);
+  if(depth > 0 && !isNodeInput(type[key])){
+    $effect(() => {
+      if(open !== undefined){}
+      openSections[id] = open;
+      });
+    }
+  
+
+  $effect(() => {
+    if(key === "" || internalValue === undefined) return;
+    if(isNodeInput(type[key]) && Array.isArray(type[key]?.options) && typeof internalValue === "number"){
+       value[key] = type[key].options?.[internalValue];
+    }else{
+       value[key] = internalValue;
+    }
+  })
 </script>
 
-{#if $store}
-  {#each keys as key}
-    {@const value = settings[key]}
-    <div class="wrapper" class:first-level={depth === 0}>
-      {#if value !== undefined && isNodeInput(value)}
-        <div
-          class="input input-{settings[key].type}"
-          data-node-type={value?.__node_type || null}
-          data-node-input={value?.__node_input || null}
-        >
-          {#if value.type === "button"}
-            <button on:click={() => value?.callback?.()}
-              >{value.label || key}</button
-            >
-          {:else if "setting" in value && value.setting !== undefined}
-            <label for={key}>{settings[key].label || key}</label>
-            <Input id={key} input={value} bind:value={$store[value?.setting]} />
-          {:else}
-            <label for={key}>{settings[key].label || key}</label>
-            <Input id={key} input={value} bind:value={$store[key]} />
-          {/if}
-        </div>
-      {:else}
-        {#if depth > 0}
-          <hr />
-        {/if}
+{#if key && isNodeInput(type?.[key]) }
+  <div class="input input-{type[key].type}">
+    {#if type[key].type === "button"}
+      <button onclick={() => console.log(type[key])}>
+        {type[key].label || key}
+      </button>
+    {:else}
+      <label for={id}>{type[key].label || key}</label>
+      <Input id={id} input={type[key]} bind:value={internalValue} />
+    {/if}
+  </div>
+{:else}
+  {#if depth === 0}
+    {#each Object.keys(type).filter((key) => key !== "title") as childKey}
+      <NestedSettings
+        id={`${id}.${childKey}`}
+        key={childKey}
+        value={value as Record<string, unknown>}
+        type={type as Nested}
+        depth={depth + 1}
+      />
+    {/each}
+  {#if depth > 0}
+    <hr />
+  {/if}
+  {:else if key && type?.[key]}
+  {#if depth > 0}
+    <hr />
+  {/if}
+    <details bind:open>
+      <summary>{type[key]?.title||key}</summary>
+      <div class="content">
+        {#each Object.keys(type[key]).filter((key) => key !== "title") as childKey}
+          <NestedSettings
+            id={`${id}.${childKey}`}
+            key={childKey}
+            value={value[key] as Record<string, unknown>}
+            type={type[key] as Nested}
+            depth={depth + 1}
+          />
+        {/each}
+      </div>
+    </details>
+
+
+  {/if}
 
-        <details bind:open={$expandedDetails[key]}>
-          <summary>{settings[key]?.__title || key}</summary>
-          <div class="content">
-            <svelte:self settings={settings[key]} {store} depth={depth + 1} />
-          </div>
-        </details>
-      {/if}
-    </div>
-  {/each}
 {/if}
 
 <style>
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index e021aa7..0fa1b5d 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -6,11 +6,11 @@
   import Viewer from "$lib/result-viewer/Viewer.svelte";
   import Settings from "$lib/settings/Settings.svelte";
   import { AppSettingTypes, AppSettings } from "$lib/settings/app-settings";
-  import { writable, type Writable } from "svelte/store";
+  import { appSettings as _appSettings, AppSettingTypes as _AppSettingTypes} from "$lib/settings/app-settings.svelte";
+  import { writable } from "svelte/store";
   import Keymap from "$lib/settings/panels/Keymap.svelte";
   import { createKeyMap } from "$lib/helpers/createKeyMap";
   import NodeStore from "$lib/node-store/NodeStore.svelte";
-  import type { GraphManager } from "$lib/graph-interface/graph-manager";
   import ActiveNodeSettings from "$lib/settings/panels/ActiveNodeSettings.svelte";
   import PerformanceViewer from "$lib/performance/PerformanceViewer.svelte";
   import Panel from "$lib/settings/Panel.svelte";
@@ -22,12 +22,11 @@
     MemoryRuntimeCache,
     WorkerRuntimeExecutor,
     MemoryRuntimeExecutor,
-  } from "@nodes/runtime";
+  } from "$lib/runtime";
   import { IndexDBCache, RemoteNodeRegistry } from "@nodes/registry";
   import { createPerformanceStore } from "@nodes/utils";
   import BenchmarkPanel from "$lib/settings/panels/BenchmarkPanel.svelte";
   import { debounceAsyncFunction } from "$lib/helpers";
-  import type { Component } from "svelte";
 
   let performanceStore = createPerformanceStore();
 
@@ -160,8 +159,8 @@
           <Panel id="general" title="General" icon="i-tabler-settings">
             <NestedSettings
               id="general"
-              store={AppSettings}
-              settings={AppSettingTypes}
+              value={_appSettings}
+              type={_AppSettingTypes}
             />
           </Panel>
           <Panel
diff --git a/nodes/max/plantarium/gravity/src/input.json b/nodes/max/plantarium/gravity/src/input.json
index 77db494..df6b806 100644
--- a/nodes/max/plantarium/gravity/src/input.json
+++ b/nodes/max/plantarium/gravity/src/input.json
@@ -11,11 +11,13 @@
       "type": "float",
       "min": 0,
       "max": 1
+      "value": 1,
     },
     "curviness": {
       "type": "float",
       "hidden": true,
       "min": 0,
+      "value": 0.5,
       "max": 1
     },
     "depth": {
diff --git a/nodes/max/plantarium/vec3/src/input.json b/nodes/max/plantarium/vec3/src/input.json
index 1991792..eaf61c7 100644
--- a/nodes/max/plantarium/vec3/src/input.json
+++ b/nodes/max/plantarium/vec3/src/input.json
@@ -6,14 +6,17 @@
   "inputs": {
     "0": {
       "type": "float",
+      "value": 0,
       "label": ""
     },
     "1": {
       "type": "float",
+      "value": 0,
       "label": ""
     },
     "2": {
       "type": "float",
+      "value": 0,
       "label": ""
     }
   }
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
deleted file mode 100644
index 3843a03..0000000
--- a/packages/runtime/package.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "name": "@nodes/runtime",
-  "version": "0.0.0",
-  "description": "",
-  "main": "src/index.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@nodes/registry": "link:../registry",
-    "@nodes/types": "link:../types",
-    "@nodes/utils": "link:../utils"
-  },
-  "devDependencies": {
-    "comlink": "^4.4.1",
-    "vite-plugin-comlink": "^5.1.0"
-  }
-}
diff --git a/packages/types/src/settings.ts b/packages/types/src/settings.ts
new file mode 100644
index 0000000..75380b4
--- /dev/null
+++ b/packages/types/src/settings.ts
@@ -0,0 +1,7 @@
+type ExtractValues<T> = {
+  [K in keyof T]: T[K] extends { value: infer V }
+    ? V
+    : T[K] extends object
+    ? ExtractValues<T[K]>
+    : never;
+};
diff --git a/packages/ui/src/lib/app.css b/packages/ui/src/lib/app.css
index c626232..de087f3 100644
--- a/packages/ui/src/lib/app.css
+++ b/packages/ui/src/lib/app.css
@@ -47,9 +47,6 @@ html {
   --neutral-800: #111111;
   --neutral-900: #060606;
 
-  /* Secondary color */
-  --secondary-color: #6c757d;
-
   --layer-0: var(--neutral-900);
   --layer-1: var(--neutral-500);
   --layer-2: var(--neutral-400);
diff --git a/packages/ui/src/lib/elements/Checkbox.svelte b/packages/ui/src/lib/elements/Checkbox.svelte
index c54070f..8010391 100644
--- a/packages/ui/src/lib/elements/Checkbox.svelte
+++ b/packages/ui/src/lib/elements/Checkbox.svelte
@@ -4,7 +4,7 @@
 		id?: string;
 	}
 
-	let { value = $bindable(), id = '' }: Props = $props();
+	let { value = $bindable(false), id = '' }: Props = $props();
 	$effect(() => {
 		if (typeof value === 'string') {
 			value = value === 'true';
@@ -98,4 +98,3 @@
 		display: block;
 	}
 </style>
-
diff --git a/packages/ui/src/lib/elements/Select.svelte b/packages/ui/src/lib/elements/Select.svelte
index c657512..39fc11f 100644
--- a/packages/ui/src/lib/elements/Select.svelte
+++ b/packages/ui/src/lib/elements/Select.svelte
@@ -25,4 +25,3 @@
 		border: none;
 	}
 </style>
-