refactor: rename state.svelte.ts to graph-state.svelte.ts

app/src/lib/graph-interface/components/AddMenu.svelte

@@ -2,7 +2,7 @@
   import { HTML } from "@threlte/extras";
   import { onMount } from "svelte";
   import type { NodeInstance, NodeId } from "@nodarium/types";
-  import { getGraphManager, getGraphState } from "../graph/state.svelte";
+  import { getGraphManager, getGraphState } from "../graph-state.svelte";
 
   type Props = {
     onnode: (n: NodeInstance) => void;

app/src/lib/graph-interface/graph-state.svelte.ts

@@ -1,7 +1,7 @@
 import type { NodeInstance, Socket } from "@nodarium/types";
 import { getContext, setContext } from "svelte";
 import { SvelteSet } from "svelte/reactivity";
-import type { GraphManager } from "../graph-manager.svelte";
+import type { GraphManager } from "./graph-manager.svelte";
 import type { OrthographicCamera } from "three";
 
 
@@ -24,7 +24,24 @@ export function setGraphManager(manager: GraphManager) {
 
 export class GraphState {
 
-  constructor(private graph: GraphManager) { }
+  constructor(private graph: GraphManager) {
+    $effect.root(() => {
+      $effect(() => {
+        localStorage.setItem("cameraPosition", `[${this.cameraPosition[0]},${this.cameraPosition[1]},${this.cameraPosition[2]}]`)
+      })
+    })
+    const storedPosition = localStorage.getItem("cameraPosition")
+    if (storedPosition) {
+      try {
+        const d = JSON.parse(storedPosition);
+        this.cameraPosition[0] = d[0];
+        this.cameraPosition[1] = d[1];
+        this.cameraPosition[2] = d[2];
+      } catch (e) {
+        console.log("Failed to parsed stored camera position", e);
+      }
+    }
+  }
 
   width = $state(100);
   height = $state(100);
@@ -80,28 +97,7 @@ export class GraphState {
 
   isBodyFocused = () => document?.activeElement?.nodeName !== "INPUT";
 
-  setCameraTransform(
-    x = this.cameraPosition[0],
-    y = this.cameraPosition[1],
-    z = this.cameraPosition[2],
-  ) {
-    if (this.camera) {
-      this.camera.position.x = x;
-      this.camera.position.z = y;
-      this.camera.zoom = z;
-    }
-    this.cameraPosition = [x, y, z];
-    localStorage.setItem("cameraPosition", JSON.stringify(this.cameraPosition));
-  }
-
-
   updateNodePosition(node: NodeInstance) {
-    if (node.state.ref && node.state.mesh) {
-      if (node.state["x"] !== undefined && node.state["y"] !== undefined) {
-        node.state.ref.style.setProperty("--nx", `${node.state.x * 10}px`);
-        node.state.ref.style.setProperty("--ny", `${node.state.y * 10}px`);
-        node.state.mesh.position.x = node.state.x + 10;
-        node.state.mesh.position.z = node.state.y + this.getNodeHeight(node.type) / 2;
     if (
       node.state.x === node.position[0] &&
       node.state.y === node.position[1]
@@ -109,13 +105,16 @@ export class GraphState {
       delete node.state.x;
       delete node.state.y;
     }
-        this.graph.edges = [...this.graph.edges];
+
+    if (node.state["x"] !== undefined && node.state["y"] !== undefined) {
+      if (node.state.ref) {
+        node.state.ref.style.setProperty("--nx", `${node.state.x * 10}px`);
+        node.state.ref.style.setProperty("--ny", `${node.state.y * 10}px`);
+      }
     } else {
+      if (node.state.ref) {
         node.state.ref.style.setProperty("--nx", `${node.position[0] * 10}px`);
         node.state.ref.style.setProperty("--ny", `${node.position[1] * 10}px`);
-        node.state.mesh.position.x = node.position[0] + 10;
-        node.state.mesh.position.z =
-          node.position[1] + this.getNodeHeight(node.type) / 2;
       }
     }
   }

app/src/lib/graph-interface/graph/Graph.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { Edge, NodeInstance } from "@nodarium/types";
-  import { onMount } from "svelte";
   import { createKeyMap } from "../../helpers/createKeyMap";
   import AddMenu from "../components/AddMenu.svelte";
   import Background from "../background/Background.svelte";
@@ -10,7 +9,7 @@
   import Camera from "../components/Camera.svelte";
   import { Canvas } from "@threlte/core";
   import HelpView from "../components/HelpView.svelte";
-  import { getGraphManager, getGraphState } from "./state.svelte";
+  import { getGraphManager, getGraphState } from "../graph-state.svelte";
   import { HTML } from "@threlte/extras";
   import { FileDropEventManager, MouseEventManager } from "./events";
   import { maxZoom, minZoom } from "./constants";
@@ -93,15 +92,6 @@
     graphState.activeSocket = null;
     graphState.addMenuPosition = null;
   }
-
-  onMount(() => {
-    if (localStorage.getItem("cameraPosition")) {
-      const cPosition = JSON.parse(localStorage.getItem("cameraPosition")!);
-      if (Array.isArray(cPosition)) {
-        graphState.setCameraTransform(cPosition[0], cPosition[1], cPosition[2]);
-      }
-    }
-  });
 </script>
 
 <svelte:window

app/src/lib/graph-interface/graph/Wrapper.svelte

@@ -3,7 +3,11 @@
   import GraphEl from "./Graph.svelte";
   import { GraphManager } from "../graph-manager.svelte";
   import { createKeyMap } from "$lib/helpers/createKeyMap";
-  import { GraphState, setGraphManager, setGraphState } from "./state.svelte";
+  import {
+    GraphState,
+    setGraphManager,
+    setGraphState,
+  } from "../graph-state.svelte";
   import { setupKeymaps } from "../keymaps";
 
   type Props = {

app/src/lib/graph-interface/graph/events.ts

@@ -1,6 +1,6 @@
 import { GraphSchema, type NodeId, type NodeInstance } from "@nodarium/types";
 import type { GraphManager } from "../graph-manager.svelte";
-import type { GraphState } from "./state.svelte";
+import type { GraphState } from "../graph-state.svelte";
 import { animate, lerp } from "$lib/helpers";
 import { snapToGrid as snapPointToGrid } from "../helpers";
 import { maxZoom, minZoom, zoomSpeed } from "./constants";
@@ -455,7 +455,8 @@ export class MouseEventManager {
       this.state.cameraDown[1] -
       (my - this.state.mouseDown[1]) / this.state.cameraPosition[2];
 
-    this.state.setCameraTransform(newX, newY);
+    this.state.cameraPosition[0] = newX;
+    this.state.cameraPosition[1] = newY;
   }
 
 
@@ -486,15 +487,13 @@ export class MouseEventManager {
     const zoomRatio = newZoom / this.state.cameraPosition[2];
 
     // Update camera position and zoom level
-    this.state.setCameraTransform(
-      this.state.mousePosition[0] -
+    this.state.cameraPosition[0] = this.state.mousePosition[0] -
       (this.state.mousePosition[0] - this.state.cameraPosition[0]) /
-      zoomRatio,
-      this.state.mousePosition[1] -
+      zoomRatio;
+    this.state.cameraPosition[1] = this.state.mousePosition[1] -
       (this.state.mousePosition[1] - this.state.cameraPosition[1]) /
       zoomRatio,
-      newZoom,
-    );
+      this.state.cameraPosition[2] = newZoom;
   }
 
 }

app/src/lib/graph-interface/keymaps.ts

@@ -2,7 +2,7 @@ import { animate, lerp } from "$lib/helpers";
 import type { createKeyMap } from "$lib/helpers/createKeyMap";
 import FileSaver from "file-saver";
 import type { GraphManager } from "./graph-manager.svelte";
-import type { GraphState } from "./graph/state.svelte";
+import type { GraphState } from "./graph-state.svelte";
 
 type Keymap = ReturnType<typeof createKeyMap>;
 export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: GraphState) {
@@ -88,11 +88,9 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
       const ease = (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t);
 
       animate(500, (a: number) => {
-        graphState.setCameraTransform(
-          lerp(camX, average[0], ease(a)),
-          lerp(camY, average[1], ease(a)),
-          lerp(camZ, 2, ease(a)),
-        );
+        graphState.cameraPosition[0] = lerp(camX, average[0], ease(a));
+        graphState.cameraPosition[1] = lerp(camY, average[1], ease(a));
+        graphState.cameraPosition[2] = lerp(camZ, 2, ease(a))
         if (graphState.mouseDown) return false;
       });
     },

app/src/lib/graph-interface/node/Node.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { NodeInstance } from "@nodarium/types";
-  import { getGraphState } from "../graph/state.svelte";
+  import { getGraphState } from "../graph-state.svelte";
   import { T } from "@threlte/core";
   import { type Mesh } from "three";
   import NodeFrag from "./Node.frag";
@@ -42,8 +42,8 @@
 </script>
 
 <T.Mesh
-  position.x={node.position[0] + 10}
-  position.z={node.position[1] + height / 2}
+  position.x={(node.state.x ?? node.position[0]) + 10}
+  position.z={(node.state.y ?? node.position[1]) + height / 2}
   position.y={0.8}
   rotation.x={-Math.PI / 2}
   bind:ref={meshRef}

app/src/lib/graph-interface/node/NodeHTML.svelte

@@ -2,7 +2,7 @@
   import type { NodeInstance } from "@nodarium/types";
   import NodeHeader from "./NodeHeader.svelte";
   import NodeParameter from "./NodeParameter.svelte";
-  import { getGraphState } from "../graph/state.svelte";
+  import { getGraphState } from "../graph-state.svelte";
 
   let ref: HTMLDivElement;
 

app/src/lib/graph-interface/node/NodeHeader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getGraphState } from "../graph/state.svelte.js";
+  import { getGraphState } from "../graph-state.svelte";
   import { createNodePath } from "../helpers/index.js";
   import type { NodeInstance } from "@nodarium/types";
 

app/src/lib/graph-interface/node/NodeParameter.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { NodeInput, NodeInstance } from "@nodarium/types";
-  import { createNodePath } from "../helpers/index.js";
+  import { createNodePath } from "../helpers";
   import NodeInputEl from "./NodeInput.svelte";
-  import { getGraphManager, getGraphState } from "../graph/state.svelte.js";
+  import { getGraphManager, getGraphState } from "../graph-state.svelte";
 
   type Props = {
     node: NodeInstance;

app/src/lib/node-store/BreadCrumbs.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { Select } from "@nodarium/ui";
-  import type { Writable } from "svelte/store";
 
-  let activeStore = 0;
-  export let activeId: Writable<string>;
-  $: [activeUser, activeCollection, activeNode] = $activeId.split(`/`);
+  let activeStore = $state(0);
+  let { activeId }: { activeId: string } = $props();
+  const [activeUser, activeCollection, activeNode] = $derived(
+    activeId.split(`/`),
+  );
 </script>
 
 <div class="breadcrumbs">
@@ -12,16 +13,16 @@
     <Select id="root" options={["root"]} bind:value={activeStore}></Select>
     {#if activeCollection}
       <button
-        on:click={() => {
-          $activeId = activeUser;
+        onclick={() => {
+          activeId = activeUser;
         }}
       >
         {activeUser}
       </button>
       {#if activeNode}
         <button
-          on:click={() => {
-            $activeId = `${activeUser}/${activeCollection}`;
+          onclick={() => {
+            activeId = `${activeUser}/${activeCollection}`;
           }}
         >
           {activeCollection}

app/src/lib/node-store/NodeStore.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
-  import { writable } from "svelte/store";
   import BreadCrumbs from "./BreadCrumbs.svelte";
   import DraggableNode from "./DraggableNode.svelte";
   import type { RemoteNodeRegistry } from "@nodarium/registry";
 
-  export let registry: RemoteNodeRegistry;
+  const { registry }: { registry: RemoteNodeRegistry } = $props();
 
-  const activeId = writable("max/plantarium");
+  let activeId = $state("max/plantarium");
   let showBreadCrumbs = false;
 
-  // const activeId = localStore<
-  //   `${string}` | `${string}/${string}` | `${string}/${string}/${string}`
-  // >("nodes.store.activeId", "");
-
-  $: [activeUser, activeCollection, activeNode] = $activeId.split(`/`);
+  const [activeUser, activeCollection, activeNode] = $derived(
+    activeId.split(`/`),
+  );
 </script>
 
 {#if showBreadCrumbs}
@@ -27,8 +24,8 @@
     {:then users}
       {#each users as user}
         <button
-          on:click={() => {
-            $activeId = user.id;
+          onclick={() => {
+            activeId = user.id;
           }}>{user.id}</button
         >
       {/each}
@@ -41,8 +38,8 @@
     {:then user}
       {#each user.collections as collection}
         <button
-          on:click={() => {
-            $activeId = collection.id;
+          onclick={() => {
+            activeId = collection.id;
           }}
         >
           {collection.id.split(`/`)[1]}

app/src/lib/performance/BarSplit.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
-  export let labels: string[] = [];
-  export let values: number[] = [];
+  type Props = {
+    labels: string[];
+    values: number[];
+  };
 
-  $: total = values.reduce((acc, v) => acc + v, 0);
+  const { labels, values }: Props = $props();
+
+  const total = $derived(values.reduce((acc, v) => acc + v, 0));
 
   let colors = ["red", "green", "blue"];
 </script>
@@ -21,10 +25,7 @@
       <div class="text-{colors[i]}">{labels[i]}</div>
     {/each}
   </div>
-
-  <span
-    class="bg-red bg-green bg-yellow bg-blue text-red text-green text-yellow text-blue"
-  ></span>
+  <span class="bg-red bg-green bg-blue text-red text-green text-blue"></span>
 </div>
 
 <style>

app/src/lib/performance/Monitor.svelte

@@ -1,52 +1,59 @@
 <script lang="ts">
-  export let points: number[];
+  type Props = {
+    points: number[];
+    type?: string;
+    title?: string;
+    max?: number;
+    min?: number;
+  };
 
-  export let type = "ms";
-  export let title = "Performance";
-  export let max: number | undefined = undefined;
-  export let min: number | undefined = undefined;
+  let {
+    points,
+    type = "ms",
+    title = "Performance",
+    max,
+    min,
+  }: Props = $props();
 
-  function getMax(m?: number) {
+  let internalMax = $derived(max ?? Math.max(...points));
+  let internalMin = $derived(min ?? Math.min(...points))!;
+
+  const maxText = $derived.by(() => {
     if (type === "%") {
       return 100;
     }
 
-    if (m !== undefined) {
-      if (m < 1) {
-        return Math.floor(m * 100) / 100;
+    if (internalMax !== undefined) {
+      if (internalMax < 1) {
+        return Math.floor(internalMax * 100) / 100;
       }
-      if (m < 10) {
-        return Math.floor(m * 10) / 10;
+      if (internalMax < 10) {
+        return Math.floor(internalMax * 10) / 10;
       }
-      return Math.floor(m);
+      return Math.floor(internalMax);
     }
 
     return 1;
-  }
+  });
 
-  function constructPath() {
-    max = max !== undefined ? max : Math.max(...points);
-    min = min !== undefined ? min : Math.min(...points);
-    const mi = min as number;
-    const ma = max as number;
-    return points
+  const path = $derived(
+    points
       .map((point, i) => {
         const x = (i / (points.length - 1)) * 100;
-        const y = 100 - ((point - mi) / (ma - mi)) * 100;
+        const y =
+          100 - ((point - internalMin) / (internalMax - internalMin)) * 100;
         return `${x},${y}`;
       })
-      .join(" ");
-  }
+      .join(" "),
+  );
 </script>
 
 <div class="wrapper">
   <p>{title}</p>
-  <span class="min">{Math.floor(min || 0)}{type}</span>
-  <span class="max">{getMax(max)}{type}</span>
+  <span class="min">{Math.floor(internalMin || 0)}{type}</span>
+  <span class="max">{maxText}{type}</span>
   <svg preserveAspectRatio="none" viewBox="0 0 100 100">
-    {#key points}
-      <polyline vector-effect="non-scaling-stroke" points={constructPath()} />
-    {/key}
+    <polyline vector-effect="non-scaling-stroke" points={path} />
   </svg>
 </div>
 

app/src/lib/performance/PerformanceViewer.svelte

@@ -2,23 +2,13 @@
   import Monitor from "./Monitor.svelte";
   import { humanizeNumber } from "$lib/helpers";
   import { Checkbox } from "@nodarium/ui";
-  import localStore from "$lib/helpers/localStore";
-  import { type PerformanceData } from "@nodarium/utils";
+  import type { PerformanceData } from "@nodarium/utils";
   import BarSplit from "./BarSplit.svelte";
 
-  export let data: PerformanceData;
+  const { data }: { data: PerformanceData } = $props();
 
-  let activeType = localStore<string>("nodes.performance.active-type", "total");
-  let showAverage = true;
-
-  function getAverage(key: string) {
-    return (
-      data
-        .map((run) => run[key]?.[0])
-        .filter((v) => v !== undefined)
-        .reduce((acc, run) => acc + run, 0) / data.length
-    );
-  }
+  let activeType = $state("total");
+  let showAverage = $state(true);
 
   function round(v: number) {
     if (v < 1) {
@@ -30,45 +20,15 @@
     return Math.floor(v);
   }
 
-  function getAverages() {
-    let lastRun = data.at(-1);
-    if (!lastRun) return {};
-    return Object.keys(lastRun).reduce(
-      (acc, key) => {
-        acc[key] = getAverage(key);
-        return acc;
-      },
-      {} as Record<string, number>,
-    );
+  function getTitle(t: string) {
+    if (t.includes("/")) {
+      return `Node ${t.split("/").slice(-1).join("/")}`;
     }
 
-  function getLast(key: string) {
-    return data.at(-1)?.[key]?.[0] || 0;
-  }
-
-  function getLasts() {
-    return data.at(-1) || {};
-  }
-
-  function getTotalPerformance(onlyLast = false) {
-    if (onlyLast) {
-      return (
-        getLast("runtime") +
-        getLast("update-geometries") +
-        getLast("worker-transfer")
-      );
-    }
-    return (
-      getAverage("runtime") +
-      getAverage("update-geometries") +
-      getAverage("worker-transfer")
-    );
-  }
-
-  function getCacheRatio(onlyLast = false) {
-    let ratio = onlyLast ? getLast("cache-hit") : getAverage("cache-hit");
-
-    return Math.floor(ratio * 100);
+    return t
+      .split("-")
+      .map((v) => v[0].toUpperCase() + v.slice(1))
+      .join(" ");
   }
 
   const viewerKeys = [
@@ -78,10 +38,53 @@
     "split-result",
   ];
 
-  function getPerformanceData(onlyLast: boolean = false) {
-    let data = onlyLast ? getLasts() : getAverages();
+  // --- Small helpers that query `data` directly ---
+  function getAverage(key: string) {
+    const vals = data
+      .map((run) => run[key]?.[0])
+      .filter((v) => v !== undefined) as number[];
 
-    return Object.entries(data)
+    if (vals.length === 0) return 0;
+    return vals.reduce((acc, v) => acc + v, 0) / vals.length;
+  }
+
+  function getLast(key: string) {
+    return data.at(-1)?.[key]?.[0] || 0;
+  }
+
+  const averages = $derived.by(() => {
+    const lr = data.at(-1);
+    if (!lr) return {} as Record<string, number>;
+    return Object.keys(lr).reduce((acc: Record<string, number>, key) => {
+      acc[key] = getAverage(key);
+      return acc;
+    }, {});
+  });
+
+  const lasts = $derived.by(() => data.at(-1) || {});
+
+  const totalPerformance = $derived.by(() => {
+    const onlyLast =
+      getLast("runtime") +
+      getLast("update-geometries") +
+      getLast("worker-transfer");
+    const average =
+      getAverage("runtime") +
+      getAverage("update-geometries") +
+      getAverage("worker-transfer");
+    return { onlyLast, average };
+  });
+
+  const cacheRatio = $derived.by(() => {
+    return {
+      onlyLast: Math.floor(getLast("cache-hit") * 100),
+      average: Math.floor(getAverage("cache-hit") * 100),
+    };
+  });
+
+  const performanceData = $derived.by(() => {
+    const source = showAverage ? averages : lasts;
+    return Object.entries(source)
       .filter(
         ([key]) =>
           !key.startsWith("node/") &&
@@ -90,19 +93,18 @@
           !viewerKeys.includes(key),
       )
       .sort((a, b) => b[1] - a[1]);
-  }
+  });
 
-  function getNodePerformanceData(onlyLast: boolean = false) {
-    let data = onlyLast ? getLasts() : getAverages();
-
-    return Object.entries(data)
+  const nodePerformanceData = $derived.by(() => {
+    const source = showAverage ? averages : lasts;
+    return Object.entries(source)
       .filter(([key]) => key.startsWith("node/"))
       .sort((a, b) => b[1] - a[1]);
-  }
+  });
 
-  function getViewerPerformanceData(onlyLast: boolean = false) {
-    let data = onlyLast ? getLasts() : getAverages();
-    return Object.entries(data)
+  const viewerPerformanceData = $derived.by(() => {
+    const source = showAverage ? averages : lasts;
+    return Object.entries(source)
       .filter(
         ([key]) =>
           key !== "total-vertices" &&
@@ -110,14 +112,29 @@
           viewerKeys.includes(key),
       )
       .sort((a, b) => b[1] - a[1]);
-  }
+  });
 
-  function getTotalPoints() {
+  const splitValues = $derived.by(() => {
+    if (showAverage) {
+      return [
+        getAverage("worker-transfer"),
+        getAverage("runtime"),
+        getAverage("update-geometries"),
+      ];
+    }
+    return [
+      getLast("worker-transfer"),
+      getLast("runtime"),
+      getLast("update-geometries"),
+    ];
+  });
+
+  const totalPoints = $derived.by(() => {
     if (showAverage) {
       return data.map((run) => {
         return (
-          run["runtime"].reduce((acc, v) => acc + v, 0) +
-          run["update-geometries"].reduce((acc, v) => acc + v, 0) +
+          (run["runtime"]?.reduce((acc, v) => acc + v, 0) || 0) +
+          (run["update-geometries"]?.reduce((acc, v) => acc + v, 0) || 0) +
           (run["worker-transfer"]?.reduce((acc, v) => acc + v, 0) || 0)
         );
       });
@@ -125,16 +142,16 @@
 
     return data.map((run) => {
       return (
-        run["runtime"][0] +
-        run["update-geometries"][0] +
+        (run["runtime"]?.[0] || 0) +
+        (run["update-geometries"]?.[0] || 0) +
         (run["worker-transfer"]?.[0] || 0)
       );
     });
-  }
+  });
 
   function constructPoints(key: string) {
     if (key === "total") {
-      return getTotalPoints();
+      return totalPoints;
     }
     return data.map((run) => {
       if (key in run) {
@@ -148,47 +165,33 @@
     });
   }
 
-  function getSplitValues(): number[] {
-    if (showAverage) {
-      return [
-        getAverage("worker-transfer"),
-        getAverage("runtime"),
-        getAverage("update-geometries"),
-      ];
-    }
+  const computedTotalDisplay = $derived.by(() =>
+    round(showAverage ? totalPerformance.average : totalPerformance.onlyLast),
+  );
 
-    return [
-      getLast("worker-transfer"),
-      getLast("runtime"),
-      getLast("update-geometries"),
-    ];
-  }
-
-  function getTitle(t: string) {
-    if (t.includes("/")) {
-      return `Node ${t.split("/").slice(-1).join("/")}`;
-    }
-
-    return t
-      .split("-")
-      .map((v) => v[0].toUpperCase() + v.slice(1))
-      .join(" ");
-  }
+  const computedFps = $derived.by(() =>
+    Math.floor(
+      1000 /
+        (showAverage
+          ? totalPerformance.average || 1
+          : totalPerformance.onlyLast || 1),
+    ),
+  );
 </script>
 
-{#key $activeType && data}
-  {#if $activeType === "cache-hit"}
+{#if data.length !== 0}
+  {#if activeType === "cache-hit"}
     <Monitor
       title="Cache Hits"
-      points={constructPoints($activeType)}
+      points={constructPoints(activeType)}
       min={0}
       max={1}
       type="%"
     />
   {:else}
     <Monitor
-      title={getTitle($activeType)}
-      points={constructPoints($activeType)}
+      title={getTitle(activeType)}
+      points={constructPoints(activeType)}
     />
   {/if}
 
@@ -198,10 +201,9 @@
       <label for="show-total">Show Average</label>
     </div>
 
-    {#if data.length !== 0}
     <BarSplit
       labels={["worker-transfer", "runtime", "update-geometries"]}
-        values={getSplitValues()}
+      values={splitValues}
     />
 
     <h3>General</h3>
@@ -210,27 +212,22 @@
       <tbody>
         <tr>
           <td>
-              {round(getTotalPerformance(!showAverage))}<span>ms</span>
+            {computedTotalDisplay}<span>ms</span>
           </td>
           <td
-              class:active={$activeType === "total"}
-              on:click={() => ($activeType = "total")}
-            >
-              total<span
-                >({Math.floor(
-                  1000 / getTotalPerformance(showAverage),
-                )}fps)</span
+            class:active={activeType === "total"}
+            onclick={() => (activeType = "total")}
           >
+            total<span>({computedFps}fps)</span>
           </td>
         </tr>
-          {#each getPerformanceData(!showAverage) as [key, value]}
+
+        {#each performanceData as [key, value]}
           <tr>
-              <td>
-                {round(value)}<span>ms</span>
-              </td>
+            <td>{round(value)}<span>ms</span></td>
             <td
-                class:active={$activeType === key}
-                on:click={() => ($activeType = key)}
+              class:active={activeType === key}
+              onclick={() => (activeType = key)}
             >
               {key}
             </td>
@@ -242,43 +239,43 @@
           <td>Samples</td>
         </tr>
       </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <h3>Nodes</h3>
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td> {getCacheRatio(!showAverage)}<span>%</span> </td>
-            <td
-              class:active={$activeType === "cache-hit"}
-              on:click={() => ($activeType = "cache-hit")}>cache hits</td
-            >
-          </tr>
-          {#each getNodePerformanceData(!showAverage) as [key, value]}
-            <tr>
-              <td>
-                {round(value)}<span>ms</span>
-              </td>
 
+      <tbody>
+        <tr><td><h3>Nodes</h3></td></tr>
+      </tbody>
+
+      <tbody>
+        <tr>
           <td
-                class:active={$activeType === key}
-                on:click={() => ($activeType = key)}
+            >{showAverage ? cacheRatio.average : cacheRatio.onlyLast}<span
+              >%</span
+            ></td
+          >
+          <td
+            class:active={activeType === "cache-hit"}
+            onclick={() => (activeType = "cache-hit")}
+          >
+            cache hits
+          </td>
+        </tr>
+
+        {#each nodePerformanceData as [key, value]}
+          <tr>
+            <td>{round(value)}<span>ms</span></td>
+            <td
+              class:active={activeType === key}
+              onclick={() => (activeType = key)}
             >
               {key.split("/").slice(-1).join("/")}
             </td>
           </tr>
         {/each}
       </tbody>
+
       <tbody>
-          <tr>
-            <td>
-              <h3>Viewer</h3>
-            </td>
-          </tr>
+        <tr><td><h3>Viewer</h3></td></tr>
       </tbody>
+
       <tbody>
         <tr>
           <td>{humanizeNumber(getLast("total-vertices"))}</td>
@@ -288,14 +285,13 @@
           <td>{humanizeNumber(getLast("total-faces"))}</td>
           <td>Faces</td>
         </tr>
-          {#each getViewerPerformanceData(!showAverage) as [key, value]}
+
+        {#each viewerPerformanceData as [key, value]}
           <tr>
-              <td>
-                {round(value)}<span>ms</span>
-              </td>
+            <td>{round(value)}<span>ms</span></td>
             <td
-                class:active={$activeType === key}
-                on:click={() => ($activeType = key)}
+              class:active={activeType === key}
+              onclick={() => (activeType = key)}
             >
               {key.split("/").slice(-1).join("/")}
             </td>
@@ -303,11 +299,10 @@
         {/each}
       </tbody>
     </table>
-    {:else}
-      <p>No runs available</p>
-    {/if}
   </div>
-{/key}
+{:else}
+  <p>No runs available</p>
+{/if}
 
 <style>
   h3 {

app/src/lib/performance/SmallGraph.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  export let points: number[];
+  const { points }: { points: number[] } = $props();
 
-  function constructPath() {
+  const path = $derived.by(() => {
     const max = Math.max(...points);
     const min = Math.min(...points);
     return points
@@ -11,13 +11,11 @@
         return `${x},${y}`;
       })
       .join(" ");
-  }
+  });
 </script>
 
 <svg preserveAspectRatio="none" viewBox="0 0 100 100">
-  {#key points}
-    <polyline vector-effect="non-scaling-stroke" points={constructPath()} />
-  {/key}
+  <polyline vector-effect="non-scaling-stroke" points={path} />
 </svg>
 
 <style>

app/src/lib/result-viewer/Scene.svelte

@@ -35,6 +35,9 @@
     scene = $bindable(),
   }: Props = $props();
 
+  let geometries = $state.raw<BufferGeometry[]>([]);
+  let center = $state(new Vector3(0, 4, 0));
+
   useTask(
     (delta) => {
       fps.push(1 / delta);
@@ -45,11 +48,13 @@
 
   export const invalidate = function () {
     if (scene) {
-      geometries = scene.children
-        .filter((child) => "geometry" in child && child.isObject3D)
-        .map((child) => {
-          return (child as Mesh).geometry;
+      const geos: BufferGeometry[] = [];
+      scene.traverse(function (child) {
+        if (isMesh(child)) {
+          geos.push(child.geometry);
+        }
       });
+      geometries = geos;
     }
 
     if (geometries && scene && centerCamera) {
@@ -62,9 +67,6 @@
     _invalidate();
   };
 
-  let geometries = $state<BufferGeometry[]>();
-  let center = $state(new Vector3(0, 4, 0));
-
   function isMesh(child: Mesh | any): child is Mesh {
     return child.isObject3D && "material" in child;
   }
@@ -76,7 +78,7 @@
   $effect(() => {
     const wireframe = appSettings.value.debug.wireframe;
     scene.traverse(function (child) {
-      if (isMesh(child) && isMatCapMaterial(child.material)) {
+      if (isMesh(child) && isMatCapMaterial(child.material) && child.visible) {
         child.material.wireframe = wireframe;
       }
     });
@@ -90,6 +92,13 @@
       geo.attributes.position.array[i + 2],
     ] as Vector3Tuple;
   }
+
+  // $effect(() => {
+  //   console.log({
+  //     geometries: $state.snapshot(geometries),
+  //     indices: appSettings.value.debug.showIndices,
+  //   });
+  // });
 </script>
 
 <Camera {center} {centerCamera} />

app/src/lib/settings/app-settings.svelte.ts

@@ -54,7 +54,7 @@ export const AppSettingTypes = {
     },
     useWorker: {
       type: "boolean",
-      label: "Execute runtime in worker",
+      label: "Execute in WebWorker",
       value: true,
     },
     showIndices: {

app/src/lib/sidebar/panels/ActiveNodeSelected.svelte

@@ -64,6 +64,7 @@
     lastPropsHash = propsHash;
 
     if (needsUpdate) {
+      manager.save();
       manager.execute();
     }
   }

app/src/lib/sidebar/panels/ActiveNodeSettings.svelte

@@ -8,17 +8,17 @@
     node: NodeInstance | undefined;
   };
 
-  const { manager, node }: Props = $props();
+  let { manager, node = $bindable() }: Props = $props();
 </script>
 
 {#if node}
   {#key node.id}
     {#if node}
-      <ActiveNodeSelected {manager} {node} />
+      <ActiveNodeSelected {manager} bind:node />
     {:else}
       <p class="mx-4">Active Node has no Settings</p>
     {/if}
   {/key}
 {:else}
-  <p class="mx-4">No active node</p>
+  <p class="mx-4">No node selected</p>
 {/if}

app/src/lib/sidebar/panels/BenchmarkPanel.svelte

@@ -1,9 +1,15 @@
+<script lang="ts" module>
+  let result:
+    | { stdev: number; avg: number; duration: number; samples: number[] }
+    | undefined = $state();
+</script>
+
 <script lang="ts">
-  import localStore from "$lib/helpers/localStore";
   import { Integer } from "@nodarium/ui";
   import { writable } from "svelte/store";
   import { humanizeDuration } from "$lib/helpers";
   import Monitor from "$lib/performance/Monitor.svelte";
+  import { localState } from "$lib/helpers/localState.svelte";
 
   function calculateStandardDeviation(array: number[]) {
     const n = array.length;
@@ -12,18 +18,18 @@
       array.map((x) => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n,
     );
   }
+  type Props = {
+    run: () => Promise<any>;
+  };
 
-  export let run: () => Promise<any>;
+  const { run }: Props = $props();
 
-  let isRunning = false;
-  let amount = localStore<number>("nodes.benchmark.samples", 500);
-  let samples = 0;
+  let isRunning = $state(false);
+  let amount = localState<number>("nodes.benchmark.samples", 500);
+  let samples = $state(0);
   let warmUp = writable(0);
   let warmUpAmount = 10;
-  let state = "";
-  let result:
-    | { stdev: number; avg: number; duration: number; samples: number[] }
-    | undefined;
+  let status = "";
 
   const copyContent = async (text?: string | number) => {
     if (!text) return;
@@ -56,7 +62,7 @@
     let results = [];
 
     // perform run
-    for (let i = 0; i < $amount; i++) {
+    for (let i = 0; i < amount.value; i++) {
       const a = performance.now();
       await run();
       samples = i;
@@ -73,10 +79,9 @@
   }
 </script>
 
-{state}
+{status}
 
 <div class="wrapper" class:running={isRunning}>
-  {#if isRunning}
   {#if result}
     <h3>Finished ({humanizeDuration(result.duration)})</h3>
     <div class="monitor-wrapper">
@@ -85,43 +90,42 @@
     <label for="bench-avg">Average </label>
     <button
       id="bench-avg"
-        on:keydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-        on:click={() => copyContent(result?.avg)}
+      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
+      onclick={() => copyContent(result?.avg)}
       >{Math.floor(result.avg * 100) / 100}</button
     >
     <i
       role="button"
       tabindex="0"
-        on:keydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-        on:click={() => copyContent(result?.avg)}>(click to copy)</i
+      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
+      onclick={() => copyContent(result?.avg)}>(click to copy)</i
     >
     <label for="bench-stdev">Standard Deviation σ</label>
-      <button id="bench-stdev" on:click={() => copyContent(result?.stdev)}
+    <button id="bench-stdev" onclick={() => copyContent(result?.stdev)}
       >{Math.floor(result.stdev * 100) / 100}</button
     >
     <i
       role="button"
       tabindex="0"
-        on:keydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
-        on:click={() => copyContent(result?.stdev + "")}>(click to copy)</i
+      onkeydown={(ev) => ev.key === "Enter" && copyContent(result?.avg)}
+      onclick={() => copyContent(result?.stdev + "")}>(click to copy)</i
     >
     <div>
-        <button on:click={() => (isRunning = false)}>reset</button>
+      <button onclick={() => (isRunning = false)}>reset</button>
     </div>
-    {:else}
+  {:else if isRunning}
     <p>WarmUp ({$warmUp}/{warmUpAmount})</p>
     <progress value={$warmUp} max={warmUpAmount}
       >{Math.floor(($warmUp / warmUpAmount) * 100)}%</progress
     >
-      <p>Progress ({samples}/{$amount})</p>
-      <progress value={samples} max={$amount}
-        >{Math.floor((samples / $amount) * 100)}%</progress
+    <p>Progress ({samples}/{amount.value})</p>
+    <progress value={samples} max={amount.value}
+      >{Math.floor((samples / amount.value) * 100)}%</progress
     >
-    {/if}
   {:else}
     <label for="bench-samples">Samples</label>
-    <Integer id="bench-sample" bind:value={$amount} max={1000} />
-    <button on:click={benchmark} disabled={isRunning}> start </button>
+    <Integer id="bench-sample" bind:value={amount.value} max={1000} />
+    <button onclick={benchmark} disabled={isRunning}> start </button>
   {/if}
 </div>
 

app/src/routes/+page.svelte

@@ -254,7 +254,7 @@
           classes="text-blue-400"
           icon="i-tabler-adjustments"
         >
-          <ActiveNodeSettings {manager} node={activeNode} />
+          <ActiveNodeSettings {manager} bind:node={activeNode} />
         </Panel>
       </Sidebar>
     </Grid.Cell>

packages/registry/src/node-registry-cache.ts

@@ -1,22 +1,22 @@
 import type { AsyncCache } from '@nodarium/types';
 import { openDB, type IDBPDatabase } from 'idb';
 
-export class IndexDBCache implements AsyncCache<ArrayBuffer> {
+export class IndexDBCache implements AsyncCache<unknown> {
 
   size: number = 100;
 
-  db: Promise<IDBPDatabase<ArrayBuffer>>;
-  private _cache = new Map<string, ArrayBuffer>();
+  db: Promise<IDBPDatabase<unknown>>;
+  private _cache = new Map<string, unknown>();
 
   constructor(id: string) {
-    this.db = openDB<ArrayBuffer>('cache/' + id, 1, {
+    this.db = openDB<unknown>('cache/' + id, 1, {
       upgrade(db) {
         db.createObjectStore('keyval');
       },
     });
   }
 
-  async get(key: string) {
+  async get<T>(key: string): Promise<T> {
     let res = this._cache.get(key);
     if (!res) {
       res = await (await this.db).get('keyval', key);
@@ -24,13 +24,33 @@ export class IndexDBCache implements AsyncCache<ArrayBuffer> {
     if (res) {
       this._cache.set(key, res);
     }
+    return res as T;
+  }
+
+  async getArrayBuffer(key: string) {
+    const res = await this.get(key);
+    if (!res) return;
+    if (res instanceof ArrayBuffer) {
       return res;
     }
-  async set(key: string, value: ArrayBuffer) {
+    return
+  }
+
+  async getString(key: string) {
+    const res = await this.get(key);
+    if (!res) return;
+    if (typeof res === "string") {
+      return res;
+    }
+    return
+  }
+
+  async set(key: string, value: unknown) {
     this._cache.set(key, value);
     const db = await this.db;
     await db.put('keyval', value, key);
   }
+
   clear() {
     this.db.then(db => db.clear('keyval'));
   }

packages/registry/src/node-registry-client.ts

@@ -13,32 +13,63 @@ export class RemoteNodeRegistry implements NodeRegistry {
   status: "loading" | "ready" | "error" = "loading";
   private nodes: Map<string, NodeDefinition> = new Map();
 
-  async fetchJson(url: string) {
-    const response = await fetch(`${this.url}/${url}`);
-
-    if (!response.ok) {
-      log.error(`Failed to load ${url}`, { response, url, host: this.url });
-      throw new Error(`Failed to load ${url}`);
-    }
-
-    return response.json();
-  }
-
-  async fetchArrayBuffer(url: string) {
-    const response = await fetch(`${this.url}/${url}`);
-    if (!response.ok) {
-      log.error(`Failed to load ${url}`, { response, url, host: this.url });
-      throw new Error(`Failed to load ${url}`);
-    }
-
-    return response.arrayBuffer();
-  }
 
   constructor(
     private url: string,
-    private cache?: AsyncCache<ArrayBuffer>,
+    private cache?: AsyncCache<ArrayBuffer | string>,
   ) { }
 
+  async fetchJson(url: string, skipCache = false) {
+
+    const finalUrl = `${this.url}/${url}`;
+
+    if (!skipCache && this.cache) {
+      const cachedValue = await this.cache?.get<string>(finalUrl);
+      if (cachedValue) {
+        // fetch again in the background, maybe implement that only refetch after a certain time
+        this.fetchJson(url, true)
+        return JSON.parse(cachedValue);
+      }
+    }
+
+    const response = await fetch(finalUrl);
+
+    if (!response.ok) {
+      log.error(`Failed to load ${url}`, { response, url, host: this.url });
+      throw new Error(`Failed to load ${url}`);
+    }
+
+    const result = await response.json();
+
+    this.cache?.set(finalUrl, JSON.stringify(result));
+
+    return result;
+  }
+
+  async fetchArrayBuffer(url: string, skipCache = false) {
+
+    const finalUrl = `${this.url}/${url}`;
+
+    if (!skipCache && this.cache) {
+      const cachedNode = await this.cache?.get<ArrayBuffer>(finalUrl);
+      if (cachedNode) {
+        // fetch again in the background, maybe implement that only refetch after a certain time
+        this.fetchArrayBuffer(url, true)
+        return cachedNode;
+      }
+    }
+
+    const response = await fetch(finalUrl);
+    if (!response.ok) {
+      log.error(`Failed to load ${url}`, { response, url, host: this.url });
+      throw new Error(`Failed to load ${url}`);
+    }
+
+    const buffer = await response.arrayBuffer();
+    this.cache?.set(finalUrl, buffer);
+    return buffer;
+  }
+
   async fetchUsers() {
     return this.fetchJson(`nodes/users.json`);
   }
@@ -48,7 +79,8 @@ export class RemoteNodeRegistry implements NodeRegistry {
   }
 
   async fetchCollection(userCollectionId: `${string}/${string}`) {
-    return this.fetchJson(`nodes/${userCollectionId}.json`);
+    const col = await this.fetchJson(`nodes/${userCollectionId}.json`);
+    return col
   }
 
   async fetchNodeDefinition(nodeId: `${string}/${string}/${string}`) {
@@ -56,10 +88,6 @@ export class RemoteNodeRegistry implements NodeRegistry {
   }
 
   private async fetchNodeWasm(nodeId: `${string}/${string}/${string}`) {
-    const cachedNode = await this.cache?.get(nodeId);
-    if (cachedNode) {
-      return cachedNode;
-    }
 
     const node = await this.fetchArrayBuffer(`nodes/${nodeId}.wasm`);
     if (!node) {

packages/types/src/components.ts

@@ -83,7 +83,7 @@ export interface AsyncCache<T = unknown> {
    * @param key - The key to get the value for
    * @returns The value for the given key, or undefined if no such value exists
    */
-  get: (key: string) => Promise<T | undefined>;
+  get: <A = T>(key: string) => Promise<A | undefined>;
   /**
    * Set the value for the given key
    * @param key - The key to set the value for