refactor: split ui/runtime/serialized node types

Closes #6
feat: dont use custom edge geometry
2025-12-03 19:18:56 +01:00 · 2025-12-03 10:33:24 +01:00 · 2025-12-02 17:31:58 +01:00 · 2025-12-02 17:27:34 +01:00 · 2025-12-02 16:59:43 +01:00 · 2025-12-02 16:59:29 +01:00
69 changed files with 1785 additions and 1761 deletions
--- a/app/README.md
+++ b/app/README.md
@@ -1,7 +1 @@
-# Tauri + Svelte + Typescript
-
-This template should help get you started developing with Tauri, Svelte and TypeScript in Vite.
-
-## Recommended IDE Setup
-
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer).
+# Nodarium App
--- a/app/package.json
+++ b/app/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@nodes/app",
+  "name": "@nodarium/app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
@@ -10,9 +10,9 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@nodes/registry": "link:../packages/registry",
-    "@nodes/ui": "link:../packages/ui",
-    "@nodes/utils": "link:../packages/utils",
+    "@nodarium/registry": "link:../packages/registry",
+    "@nodarium/ui": "link:../packages/ui",
+    "@nodarium/utils": "link:../packages/utils",
    "@sveltejs/kit": "^2.49.0",
    "@threlte/core": "8.3.0",
    "@threlte/extras": "9.7.0",
@@ -26,7 +26,7 @@
  },
  "devDependencies": {
    "@iconify-json/tabler": "^1.2.23",
-    "@nodes/types": "link:../packages/types",
+    "@nodarium/types": "link:../packages/types",
    "@sveltejs/adapter-static": "^3.0.10",
    "@sveltejs/vite-plugin-svelte": "^6.2.1",
    "@tsconfig/svelte": "^5.0.6",
--- a/app/src/lib/graph-interface/components/AddMenu.svelte
+++ b/app/src/lib/graph-interface/components/AddMenu.svelte
@@ -1,21 +1,25 @@
 <script lang="ts">
-  import type { GraphManager } from "./graph-manager.svelte";
  import { HTML } from "@threlte/extras";
  import { onMount } from "svelte";
-  import type { NodeType } from "@nodes/types";
+  import type { NodeInstance, NodeId } from "@nodarium/types";
+  import { getGraphManager, getGraphState } from "../graph/state.svelte";

  type Props = {
-    position: [x: number, y: number] | null;
-    graph: GraphManager;
+    onnode: (n: NodeInstance) => void;
  };

-  let { position = $bindable(), graph }: Props = $props();
+  const { onnode }: Props = $props();
+
+  const graph = getGraphManager();
+  const graphState = getGraphState();

  let input: HTMLInputElement;
  let value = $state<string>();
-  let activeNodeId = $state<NodeType>();
+  let activeNodeId = $state<NodeId>();

-  const allNodes = graph.getNodeDefinitions();
+  const allNodes = graphState.activeSocket
+    ? graph.getPossibleNodes(graphState.activeSocket)
+    : graph.getNodeDefinitions();

  function filterNodes() {
    return allNodes.filter((node) => node.id.includes(value ?? ""));
@@ -25,7 +29,7 @@
  $effect(() => {
    if (nodes) {
      if (activeNodeId === undefined) {
-        activeNodeId = nodes[0].id;
+        activeNodeId = nodes?.[0]?.id;
      } else if (nodes.length) {
        const node = nodes.find((node) => node.id === activeNodeId);
        if (!node) {
@@ -35,11 +39,22 @@
    }
  });

+  function handleNodeCreation(nodeType: NodeInstance["type"]) {
+    if (!graphState.addMenuPosition) return;
+    onnode?.({
+      id: -1,
+      type: nodeType,
+      position: [...graphState.addMenuPosition],
+      props: {},
+      state: {},
+    });
+  }
+
  function handleKeyDown(event: KeyboardEvent) {
    event.stopImmediatePropagation();

    if (event.key === "Escape") {
-      position = null;
+      graphState.addMenuPosition = null;
      return;
    }

@@ -56,9 +71,8 @@
    }

    if (event.key === "Enter") {
-      if (activeNodeId && position) {
-        graph.createNode({ type: activeNodeId, position, props: {} });
-        position = null;
+      if (activeNodeId && graphState.addMenuPosition) {
+        handleNodeCreation(activeNodeId);
      }
      return;
    }
@@ -70,7 +84,11 @@
  });
 </script>

-<HTML position.x={position?.[0]} position.z={position?.[1]} transform={false}>
+<HTML
+  position.x={graphState.addMenuPosition?.[0]}
+  position.z={graphState.addMenuPosition?.[1]}
+  transform={false}
+>
  <div class="add-menu-wrapper">
    <div class="header">
      <input
@@ -95,18 +113,10 @@
          aria-selected={node.id === activeNodeId}
          onkeydown={(event) => {
            if (event.key === "Enter") {
-              if (position) {
-                graph.createNode({ type: node.id, position, props: {} });
-                position = null;
-              }
-            }
-          }}
-          onmousedown={() => {
-            if (position) {
-              graph.createNode({ type: node.id, position, props: {} });
-              position = null;
+              handleNodeCreation(node.id);
            }
          }}
+          onmousedown={() => handleNodeCreation(node.id)}
          onfocus={() => {
            activeNodeId = node.id;
          }}
--- a/app/src/lib/graph-interface/components/BoxSelection.svelte
+++ b/app/src/lib/graph-interface/components/BoxSelection.svelte
--- a/app/src/lib/graph-interface/components/Camera.svelte
+++ b/app/src/lib/graph-interface/components/Camera.svelte
--- a/app/src/lib/graph-interface/components/HelpView.svelte
+++ b/app/src/lib/graph-interface/components/HelpView.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { NodeDefinition, NodeRegistry } from "@nodes/types";
-  import { onDestroy, onMount } from "svelte";
+  import type { NodeDefinition, NodeRegistry } from "@nodarium/types";
+  import { onMount } from "svelte";

  let mx = $state(0);
  let my = $state(0);
--- a/app/src/lib/graph-interface/edges/Edge.svelte
+++ b/app/src/lib/graph-interface/edges/Edge.svelte
@@ -5,15 +5,17 @@
    color: colors.edge.clone(),
    toneMapped: false,
  });
+
+  let lineColor = $state(colors.edge.clone().convertSRGBToLinear());
+
  $effect.root(() => {
    $effect(() => {
      appSettings.value.theme;
      circleMaterial.color = colors.edge.clone().convertSRGBToLinear();
+      lineColor = colors.edge.clone().convertSRGBToLinear();
    });
  });

-  const lineCache = new Map<number, BufferGeometry>();
-
  const curve = new CubicBezierCurve(
    new Vector2(0, 0),
    new Vector2(0, 0),
@@ -24,46 +26,36 @@

 <script lang="ts">
  import { T } from "@threlte/core";
-  import { MeshLineMaterial } from "@threlte/extras";
-  import { BufferGeometry, MeshBasicMaterial, Vector3 } from "three";
+  import { MeshLineGeometry, MeshLineMaterial } from "@threlte/extras";
+  import { MeshBasicMaterial, Vector3 } from "three";
  import { CubicBezierCurve } from "three/src/extras/curves/CubicBezierCurve.js";
  import { Vector2 } from "three/src/math/Vector2.js";
-  import { createEdgeGeometry } from "./createEdgeGeometry.js";
  import { appSettings } from "$lib/settings/app-settings.svelte";

  type Props = {
-    from: { x: number; y: number };
-    to: { x: number; y: number };
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
    z: number;
  };

-  const { from, to, z }: Props = $props();
+  const { x1, y1, x2, y2, z }: Props = $props();

-  let geometry: BufferGeometry | null = $state(null);
+  const thickness = $derived(Math.max(0.001, 0.00082 * Math.exp(0.055 * z)));

-  const lineColor = $derived(
-    appSettings.value.theme && colors.edge.clone().convertSRGBToLinear(),
-  );
+  let points = $state<Vector3[]>([]);

-  let lastId: number | null = null;
-
-  const primeA = 31;
-  const primeB = 37;
+  let lastId: string | null = null;

  function update() {
-    const new_x = to.x - from.x;
-    const new_y = to.y - from.y;
-    const curveId = new_x * primeA + new_y * primeB;
+    const new_x = x2 - x1;
+    const new_y = y2 - y1;
+    const curveId = `${x1}-${y1}-${x2}-${y2}`;
    if (lastId === curveId) {
      return;
    }
-
-    const mid = new Vector2(new_x / 2, new_y / 2);
-
-    if (lineCache.has(curveId)) {
-      geometry = lineCache.get(curveId)!;
-      return;
-    }
+    lastId = curveId;

    const length = Math.floor(
      Math.sqrt(Math.pow(new_x, 2) + Math.pow(new_y, 2)) / 4,
@@ -72,29 +64,26 @@
    const samples = Math.max(length * 16, 10);

    curve.v0.set(0, 0);
-    curve.v1.set(mid.x, 0);
-    curve.v2.set(mid.x, new_y);
+    curve.v1.set(new_x / 2, 0);
+    curve.v2.set(new_x / 2, new_y);
    curve.v3.set(new_x, new_y);

-    const points = curve
+    points = curve
      .getPoints(samples)
      .map((p) => new Vector3(p.x, 0, p.y))
      .flat();
-
-    geometry = createEdgeGeometry(points);
-    lineCache.set(curveId, geometry);
  }

  $effect(() => {
-    if (from || to) {
+    if (x1 || x2 || y1 || y2) {
      update();
    }
  });
 </script>

 <T.Mesh
-  position.x={from.x}
-  position.z={from.y}
+  position.x={x1}
+  position.z={y1}
  position.y={0.8}
  rotation.x={-Math.PI / 2}
  material={circleMaterial}
@@ -103,8 +92,8 @@
 </T.Mesh>

 <T.Mesh
-  position.x={to.x}
-  position.z={to.y}
+  position.x={x2}
+  position.z={y2}
  position.y={0.8}
  rotation.x={-Math.PI / 2}
  material={circleMaterial}
@@ -112,11 +101,7 @@
  <T.CircleGeometry args={[0.5, 16]} />
 </T.Mesh>

-{#if geometry}
-  <T.Mesh position.x={from.x} position.z={from.y} position.y={0.1} {geometry}>
-    <MeshLineMaterial
-      width={Math.max(z * 0.00012, 0.00003)}
-      color={lineColor}
-    />
-  </T.Mesh>
-{/if}
+<T.Mesh position.x={x1} position.z={y1} position.y={0.1}>
+  <MeshLineGeometry {points} />
+  <MeshLineMaterial width={thickness} color={lineColor} />
+</T.Mesh>
--- a/app/src/lib/graph-interface/edges/FloatingEdge.svelte
+++ b/app/src/lib/graph-interface/edges/FloatingEdge.svelte
@@ -1,12 +0,0 @@
-<script lang="ts">
-  import Edge from "./Edge.svelte";
-
-  type Props = {
-    from: { x: number; y: number };
-    to: { x: number; y: number };
-    z: number;
-  };
-  const { from, to, z }: Props = $props();
-</script>
-
-<Edge {from} {to} {z} />
--- a/app/src/lib/graph-interface/edges/createEdgeGeometry.ts
+++ b/app/src/lib/graph-interface/edges/createEdgeGeometry.ts
@@ -1,116 +0,0 @@
-import { BufferAttribute, BufferGeometry, Vector3 } from 'three';
-import { setXY, setXYZ, setXYZW, setXYZXYZ } from './utils.js';
-
-
-export function createEdgeGeometry(points: Vector3[]) {
-
-  const length = points[0].distanceTo(points[points.length - 1]);
-
-  const startRadius = 8;
-  const constantWidth = 2;
-  const taperFraction = 0.8 / length;
-
-  function ease(t: number) {
-    return t * t * (3 - 2 * t);
-  }
-  let shapeFunction = (alpha: number) => {
-    if (alpha < taperFraction) {
-      const easedAlpha = ease(alpha / taperFraction);
-      return startRadius + (constantWidth - startRadius) * easedAlpha;
-    } else if (alpha > 1 - taperFraction) {
-      const easedAlpha = ease((alpha - (1 - taperFraction)) / taperFraction);
-      return constantWidth + (startRadius - constantWidth) * easedAlpha;
-    } else {
-      return constantWidth;
-    }
-  };
-
-  // When the component first runs we create the buffer geometry and allocate the buffer attributes
-  let pointCount = points.length
-  let counters: number[] = []
-  let counterIndex = 0
-  let side: number[] = []
-  let widthArray: number[] = []
-  let doubleIndex = 0
-  let uvArray: number[] = []
-  let uvIndex = 0
-  let indices: number[] = []
-  let indicesIndex = 0
-
-
-
-  for (let j = 0; j < pointCount; j++) {
-    const c = j / points.length
-    counters[counterIndex + 0] = c
-    counters[counterIndex + 1] = c
-    counterIndex += 2
-
-    setXY(side, doubleIndex, 1, -1)
-    let width = shapeFunction((j / (pointCount - 1)))
-    setXY(widthArray, doubleIndex, width, width)
-    doubleIndex += 2
-
-    setXYZW(uvArray, uvIndex, j / (pointCount - 1), 0, j / (pointCount - 1), 1)
-    uvIndex += 4
-
-    if (j < pointCount - 1) {
-      const n = j * 2
-      setXYZ(indices, indicesIndex, n + 0, n + 1, n + 2)
-      setXYZ(indices, indicesIndex + 3, n + 2, n + 1, n + 3)
-      indicesIndex += 6
-    }
-  }
-
-  const geometry = new BufferGeometry()
-  // create these buffer attributes at the correct length but leave them empty for now
-  geometry.setAttribute('position', new BufferAttribute(new Float32Array(pointCount * 6), 3))
-  geometry.setAttribute('previous', new BufferAttribute(new Float32Array(pointCount * 6), 3))
-  geometry.setAttribute('next', new BufferAttribute(new Float32Array(pointCount * 6), 3))
-  // create and populate these buffer attributes
-  geometry.setAttribute('counters', new BufferAttribute(new Float32Array(counters), 1))
-  geometry.setAttribute('side', new BufferAttribute(new Float32Array(side), 1))
-  geometry.setAttribute('width', new BufferAttribute(new Float32Array(widthArray), 1))
-  geometry.setAttribute('uv', new BufferAttribute(new Float32Array(uvArray), 2))
-  geometry.setIndex(new BufferAttribute(new Uint16Array(indices), 1))
-
-
-
-  let positions: number[] = []
-  let previous: number[] = []
-  let next: number[] = []
-  let positionIndex = 0
-  let previousIndex = 0
-  let nextIndex = 0
-  setXYZXYZ(previous, previousIndex, points[0].x, points[0].y, points[0].z)
-  previousIndex += 6
-  for (let j = 0; j < pointCount; j++) {
-    const p = points[j]
-    setXYZXYZ(positions, positionIndex, p.x, p.y, p.z)
-    positionIndex += 6
-    if (j < pointCount - 1) {
-      setXYZXYZ(previous, previousIndex, p.x, p.y, p.z)
-      previousIndex += 6
-    }
-    if (j > 0 && j + 1 <= pointCount) {
-      setXYZXYZ(next, nextIndex, p.x, p.y, p.z)
-      nextIndex += 6
-    }
-  }
-  setXYZXYZ(
-    next,
-    nextIndex,
-    points[pointCount - 1].x,
-    points[pointCount - 1].y,
-    points[pointCount - 1].z
-  )
-  const positionAttribute = (geometry.getAttribute('position') as BufferAttribute).set(positions)
-  const previousAttribute = (geometry.getAttribute('previous') as BufferAttribute).set(previous)
-  const nextAttribute = (geometry.getAttribute('next') as BufferAttribute).set(next)
-  positionAttribute.needsUpdate = true
-  previousAttribute.needsUpdate = true
-  nextAttribute.needsUpdate = true
-  geometry.computeBoundingSphere()
-
-  return geometry;
-
-}
--- a/app/src/lib/graph-interface/graph-manager.svelte.ts
+++ b/app/src/lib/graph-interface/graph-manager.svelte.ts
@@ -1,21 +1,22 @@
 import type {
  Edge,
  Graph,
-  Node,
+  NodeInstance,
+  NodeDefinition,
  NodeInput,
  NodeRegistry,
-  NodeType,
+  NodeId,
  Socket,
-} from "@nodes/types";
-import { fastHashString } from "@nodes/utils";
+} from "@nodarium/types";
+import { fastHashString } from "@nodarium/utils";
 import { SvelteMap } from "svelte/reactivity";
 import EventEmitter from "./helpers/EventEmitter";
-import { createLogger } from "@nodes/utils";
+import { createLogger } from "@nodarium/utils";
 import throttle from "$lib/helpers/throttle";
 import { HistoryManager } from "./history-manager";

 const logger = createLogger("graph-manager");
-// logger.mute();
+logger.mute();

 const clone =
  "structuredClone" in self
@@ -32,6 +33,27 @@ function areSocketsCompatible(
  return inputs === output;
 }

+function areEdgesEqual(firstEdge: Edge, secondEdge: Edge) {
+
+  if (firstEdge[0].id !== secondEdge[0].id) {
+    return false;
+  }
+
+  if (firstEdge[1] !== secondEdge[1]) {
+    return false
+  }
+
+  if (firstEdge[2].id !== secondEdge[2].id) {
+    return false
+  }
+
+  if (firstEdge[3] !== secondEdge[3]) {
+    return false
+  }
+
+  return true
+}
+
 export class GraphManager extends EventEmitter<{
  save: Graph;
  result: any;
@@ -46,7 +68,7 @@ export class GraphManager extends EventEmitter<{
  graph: Graph = { id: 0, nodes: [], edges: [] };
  id = $state(0);

-  nodes = new SvelteMap<number, Node>();
+  nodes = new SvelteMap<number, NodeInstance>();

  edges = $state<Edge[]>([]);

@@ -79,7 +101,7 @@ export class GraphManager extends EventEmitter<{
      position: [...node.position],
      type: node.type,
      props: node.props,
-    })) as Node[];
+    })) as NodeInstance[];
    const edges = this.edges.map((edge) => [
      edge[0].id,
      edge[1],
@@ -88,7 +110,7 @@ export class GraphManager extends EventEmitter<{
    ]) as Graph["edges"];
    const serialized = {
      id: this.graph.id,
-      settings: this.settings,
+      settings: $state.snapshot(this.settings),
      nodes,
      edges,
    };
@@ -111,14 +133,14 @@ export class GraphManager extends EventEmitter<{
    return this.registry.getAllNodes();
  }

-  getLinkedNodes(node: Node) {
-    const nodes = new Set<Node>();
+  getLinkedNodes(node: NodeInstance) {
+    const nodes = new Set<NodeInstance>();
    const stack = [node];
    while (stack.length) {
      const n = stack.pop();
      if (!n) continue;
      nodes.add(n);
-      const children = this.getChildrenOfNode(n);
+      const children = this.getChildren(n);
      const parents = this.getParentsOfNode(n);
      const newNodes = [...children, ...parents].filter((n) => !nodes.has(n));
      stack.push(...newNodes);
@@ -126,10 +148,10 @@ export class GraphManager extends EventEmitter<{
    return [...nodes.values()];
  }

-  getEdgesBetweenNodes(nodes: Node[]): [number, number, number, string][] {
+  getEdgesBetweenNodes(nodes: NodeInstance[]): [number, number, number, string][] {
    const edges = [];
    for (const node of nodes) {
-      const children = node.tmp?.children || [];
+      const children = node.state?.children || [];
      for (const child of children) {
        if (nodes.includes(child)) {
          const edge = this.edges.find(
@@ -152,15 +174,15 @@ export class GraphManager extends EventEmitter<{

  private _init(graph: Graph) {
    const nodes = new Map(
-      graph.nodes.map((node: Node) => {
+      graph.nodes.map((node) => {
        const nodeType = this.registry.getNode(node.type);
+        const n = node as NodeInstance;
        if (nodeType) {
-          node.tmp = {
-            random: (Math.random() - 0.5) * 2,
+          n.state = {
            type: nodeType,
          };
        }
-        return [node.id, node];
+        return [node.id, n];
      }),
    );

@@ -170,12 +192,10 @@ export class GraphManager extends EventEmitter<{
      if (!from || !to) {
        throw new Error("Edge references non-existing node");
      }
-      from.tmp = from.tmp || {};
-      from.tmp.children = from.tmp.children || [];
-      from.tmp.children.push(to);
-      to.tmp = to.tmp || {};
-      to.tmp.parents = to.tmp.parents || [];
-      to.tmp.parents.push(from);
+      from.state.children = from.state.children || [];
+      from.state.children.push(to);
+      to.state.parents = to.state.parents || [];
+      to.state.parents.push(from);
      return [from, edge[1], to, edge[3]] as Edge;
    });

@@ -211,9 +231,10 @@ export class GraphManager extends EventEmitter<{
        this.status = "error";
        return;
      }
-      node.tmp = node.tmp || {};
-      node.tmp.random = (Math.random() - 0.5) * 2;
-      node.tmp.type = nodeType;
+      // Turn into runtime node
+      const n = node as NodeInstance;
+      n.state = {};
+      n.state.type = nodeType;
    }

    // load settings
@@ -272,7 +293,7 @@ export class GraphManager extends EventEmitter<{
    return this.registry.getNode(id);
  }

-  async loadNode(id: NodeType) {
+  async loadNodeType(id: NodeId) {
    await this.registry.load([id]);
    const nodeType = this.registry.getNode(id);

@@ -297,33 +318,32 @@ export class GraphManager extends EventEmitter<{
    }

    this.settings = settingValues;
-    console.log("GraphManager.setSettings", settingValues);
    this.settingTypes = settingTypes;
    this.emit("settings", { types: settingTypes, values: settingValues });
  }

-  getChildrenOfNode(node: Node) {
+  getChildren(node: NodeInstance) {
    const children = [];
-    const stack = node.tmp?.children?.slice(0);
+    const stack = node.state?.children?.slice(0);
    while (stack?.length) {
      const child = stack.pop();
      if (!child) continue;
      children.push(child);
-      stack.push(...(child.tmp?.children || []));
+      stack.push(...(child.state?.children || []));
    }
    return children;
  }

-  getNodesBetween(from: Node, to: Node): Node[] | undefined {
+  getNodesBetween(from: NodeInstance, to: NodeInstance): NodeInstance[] | undefined {
    //  < - - - - from
    const toParents = this.getParentsOfNode(to);
    //  < - - - - from - - - - to
    const fromParents = this.getParentsOfNode(from);
    if (toParents.includes(from)) {
-      const fromChildren = this.getChildrenOfNode(from);
+      const fromChildren = this.getChildren(from);
      return toParents.filter((n) => fromChildren.includes(n));
    } else if (fromParents.includes(to)) {
-      const toChildren = this.getChildrenOfNode(to);
+      const toChildren = this.getChildren(to);
      return fromParents.filter((n) => toChildren.includes(n));
    } else {
      // these two nodes are not connected
@@ -331,7 +351,7 @@ export class GraphManager extends EventEmitter<{
    }
  }

-  removeNode(node: Node, { restoreEdges = false } = {}) {
+  removeNode(node: NodeInstance, { restoreEdges = false } = {}) {
    const edgesToNode = this.edges.filter((edge) => edge[2].id === node.id);
    const edgesFromNode = this.edges.filter((edge) => edge[0].id === node.id);
    for (const edge of [...edgesToNode, ...edgesFromNode]) {
@@ -344,8 +364,8 @@ export class GraphManager extends EventEmitter<{

      for (const [to, toSocket] of inputSockets) {
        for (const [from, fromSocket] of outputSockets) {
-          const outputType = from.tmp?.type?.outputs?.[fromSocket];
-          const inputType = to?.tmp?.type?.inputs?.[toSocket]?.type;
+          const outputType = from.state?.type?.outputs?.[fromSocket];
+          const inputType = to?.state?.type?.inputs?.[toSocket]?.type;
          if (outputType === inputType) {
            this.createEdge(from, fromSocket, to, toSocket, {
              applyUpdate: false,
@@ -361,19 +381,32 @@ export class GraphManager extends EventEmitter<{
    this.save();
  }

-  createNodeId() {
-    const max = Math.max(0, ...this.nodes.keys());
-    return max + 1;
+  smartConnect(from: NodeInstance, to: NodeInstance): Edge | undefined {
+    const inputs = Object.entries(to.state?.type?.inputs ?? {});
+    const outputs = from.state?.type?.outputs ?? [];
+    for (let i = 0; i < inputs.length; i++) {
+      const [inputName, input] = inputs[0];
+      for (let o = 0; o < outputs.length; o++) {
+        const output = outputs[0];
+        if (input.type === output) {
+          return this.createEdge(from, o, to, inputName);
+        }
+      }
+    }
  }

-  createGraph(nodes: Node[], edges: [number, number, number, string][]) {
+  createNodeId() {
+    return Math.max(0, ...this.nodes.keys()) + 1;
+  }
+
+  createGraph(nodes: NodeInstance[], edges: [number, number, number, string][]) {
    // map old ids to new ids
    const idMap = new Map<number, number>();

-    const startId = this.createNodeId();
+    let startId = this.createNodeId()

-    nodes = nodes.map((node, i) => {
-      const id = startId + i;
+    nodes = nodes.map((node) => {
+      const id = startId++;
      idMap.set(node.id, id);
      const type = this.registry.getNode(node.type);
      if (!type) {
@@ -390,13 +423,11 @@ export class GraphManager extends EventEmitter<{
        throw new Error("Edge references non-existing node");
      }

-      to.tmp = to.tmp || {};
-      to.tmp.parents = to.tmp.parents || [];
-      to.tmp.parents.push(from);
+      to.state.parents = to.state.parents || [];
+      to.state.parents.push(from);

-      from.tmp = from.tmp || {};
-      from.tmp.children = from.tmp.children || [];
-      from.tmp.children.push(to);
+      from.state.children = from.state.children || [];
+      from.state.children.push(to);

      return [from, edge[1], to, edge[3]] as Edge;
    });
@@ -416,9 +447,9 @@ export class GraphManager extends EventEmitter<{
    position,
    props = {},
  }: {
-    type: Node["type"];
-    position: Node["position"];
-    props: Node["props"];
+    type: NodeInstance["type"];
+    position: NodeInstance["position"];
+    props: NodeInstance["props"];
  }) {
    const nodeType = this.registry.getNode(type);
    if (!nodeType) {
@@ -426,26 +457,29 @@ export class GraphManager extends EventEmitter<{
      return;
    }

-    const node: Node = {
+    const node: NodeInstance = $state({
      id: this.createNodeId(),
      type,
      position,
-      tmp: { type: nodeType },
+      state: { type: nodeType },
      props,
-    };
+    });

    this.nodes.set(node.id, node);

    this.save();
+
+    return node
  }

  createEdge(
-    from: Node,
+    from: NodeInstance,
    fromSocket: number,
-    to: Node,
+    to: NodeInstance,
    toSocket: string,
    { applyUpdate = true } = {},
-  ) {
+  ): Edge | undefined {
+
    const existingEdges = this.getEdgesToNode(to);

    // check if this exact edge already exists
@@ -458,10 +492,10 @@ export class GraphManager extends EventEmitter<{
    }

    // check if socket types match
-    const fromSocketType = from.tmp?.type?.outputs?.[fromSocket];
-    const toSocketType = [to.tmp?.type?.inputs?.[toSocket]?.type];
-    if (to.tmp?.type?.inputs?.[toSocket]?.accepts) {
-      toSocketType.push(...(to?.tmp?.type?.inputs?.[toSocket]?.accepts || []));
+    const fromSocketType = from.state?.type?.outputs?.[fromSocket];
+    const toSocketType = [to.state?.type?.inputs?.[toSocket]?.type];
+    if (to.state?.type?.inputs?.[toSocket]?.accepts) {
+      toSocketType.push(...(to?.state?.type?.inputs?.[toSocket]?.accepts || []));
    }

    if (!areSocketsCompatible(fromSocketType, toSocketType)) {
@@ -478,24 +512,21 @@ export class GraphManager extends EventEmitter<{
      this.removeEdge(edgeToBeReplaced, { applyDeletion: false });
    }

-    if (applyUpdate) {
-      this.edges.push([from, fromSocket, to, toSocket]);
-    } else {
-      this.edges.push([from, fromSocket, to, toSocket]);
-    }
+    const edge = [from, fromSocket, to, toSocket] as Edge;

-    from.tmp = from.tmp || {};
-    from.tmp.children = from.tmp.children || [];
-    from.tmp.children.push(to);
+    this.edges.push(edge);

-    to.tmp = to.tmp || {};
-    to.tmp.parents = to.tmp.parents || [];
-    to.tmp.parents.push(from);
+    from.state.children = from.state.children || [];
+    from.state.children.push(to);
+    to.state.parents = to.state.parents || [];
+    to.state.parents.push(from);

    if (applyUpdate) {
      this.save();
    }
    this.execute();
+
+    return edge;
  }

  undo() {
@@ -531,9 +562,9 @@ export class GraphManager extends EventEmitter<{
    logger.log("saving graphs", state);
  }

-  getParentsOfNode(node: Node) {
+  getParentsOfNode(node: NodeInstance) {
    const parents = [];
-    const stack = node.tmp?.parents?.slice(0);
+    const stack = node.state?.parents?.slice(0);
    while (stack?.length) {
      if (parents.length > 1000000) {
        logger.warn("Infinite loop detected");
@@ -542,21 +573,51 @@ export class GraphManager extends EventEmitter<{
      const parent = stack.pop();
      if (!parent) continue;
      parents.push(parent);
-      stack.push(...(parent.tmp?.parents || []));
+      stack.push(...(parent.state?.parents || []));
    }
    return parents.reverse();
  }

-  getPossibleSockets({ node, index }: Socket): [Node, string | number][] {
-    const nodeType = node?.tmp?.type;
+  getPossibleNodes(socket: Socket): NodeDefinition[] {
+    const allDefinitions = this.getNodeDefinitions();
+
+    const nodeType = socket.node.state?.type;
+    if (!nodeType) {
+      return [];
+    }
+
+    const definitions = typeof socket.index === "string"
+      ? allDefinitions.filter(s => {
+        return s.outputs?.find(_s => Object
+          .values(nodeType?.inputs || {})
+          .map(s => s.type)
+          .includes(_s as NodeInput["type"])
+        )
+      })
+      : allDefinitions.filter(s => Object
+        .values(s.inputs ?? {})
+        .find(s => {
+          if (s.hidden) return false;
+          if (nodeType.outputs?.includes(s.type)) {
+            return true
+          }
+          return s.accepts?.find(a => nodeType.outputs?.includes(a))
+        }))
+
+    return definitions
+
+  }
+
+  getPossibleSockets({ node, index }: Socket): [NodeInstance, string | number][] {
+    const nodeType = node?.state?.type;
    if (!nodeType) return [];

-    const sockets: [Node, string | number][] = [];
+    const sockets: [NodeInstance, string | number][] = [];

    // if index is a string, we are an input looking for outputs
    if (typeof index === "string") {
      // filter out self and child nodes
-      const children = new Set(this.getChildrenOfNode(node).map((n) => n.id));
+      const children = new Set(this.getChildren(node).map((n) => n.id));
      const nodes = this.getAllNodes().filter(
        (n) => n.id !== node.id && !children.has(n.id),
      );
@@ -564,7 +625,7 @@ export class GraphManager extends EventEmitter<{
      const ownType = nodeType?.inputs?.[index].type;

      for (const node of nodes) {
-        const nodeType = node?.tmp?.type;
+        const nodeType = node?.state?.type;
        const inputs = nodeType?.outputs;
        if (!inputs) continue;
        for (let index = 0; index < inputs.length; index++) {
@@ -592,7 +653,7 @@ export class GraphManager extends EventEmitter<{
      const ownType = nodeType.outputs?.[index];

      for (const node of nodes) {
-        const inputs = node?.tmp?.type?.inputs;
+        const inputs = node?.state?.type?.inputs;
        if (!inputs) continue;
        for (const key in inputs) {
          const otherType = [inputs[key].type];
@@ -624,32 +685,30 @@ export class GraphManager extends EventEmitter<{
      (e) =>
        e[0].id === id0 && e[1] === sid0 && e[2].id === id2 && e[3] === sid2,
    );
+
    if (!_edge) return;

-    edge[0].tmp = edge[0].tmp || {};
-    if (edge[0].tmp.children) {
-      edge[0].tmp.children = edge[0].tmp.children.filter(
-        (n: Node) => n.id !== id2,
+    if (edge[0].state.children) {
+      edge[0].state.children = edge[0].state.children.filter(
+        (n: NodeInstance) => n.id !== id2,
      );
    }

-    edge[2].tmp = edge[2].tmp || {};
-    if (edge[2].tmp.parents) {
-      edge[2].tmp.parents = edge[2].tmp.parents.filter(
-        (n: Node) => n.id !== id0,
+    if (edge[2].state.parents) {
+      edge[2].state.parents = edge[2].state.parents.filter(
+        (n: NodeInstance) => n.id !== id0,
      );
    }

+    this.edges = this.edges.filter((e) => !areEdgesEqual(e, edge));
    if (applyDeletion) {
-      this.edges = this.edges.filter((e) => e !== _edge);
      this.execute();
      this.save();
-    } else {
-      this.edges = this.edges.filter((e) => e !== _edge);
    }
+
  }

-  getEdgesToNode(node: Node) {
+  getEdgesToNode(node: NodeInstance) {
    return this.edges
      .filter((edge) => edge[2].id === node.id)
      .map((edge) => {
@@ -658,10 +717,10 @@ export class GraphManager extends EventEmitter<{
        if (!from || !to) return;
        return [from, edge[1], to, edge[3]] as const;
      })
-      .filter(Boolean) as unknown as [Node, number, Node, string][];
+      .filter(Boolean) as unknown as [NodeInstance, number, NodeInstance, string][];
  }

-  getEdgesFromNode(node: Node) {
+  getEdgesFromNode(node: NodeInstance) {
    return this.edges
      .filter((edge) => edge[0].id === node.id)
      .map((edge) => {
@@ -670,6 +729,6 @@ export class GraphManager extends EventEmitter<{
        if (!from || !to) return;
        return [from, edge[1], to, edge[3]] as const;
      })
-      .filter(Boolean) as unknown as [Node, number, Node, string][];
+      .filter(Boolean) as unknown as [NodeInstance, number, NodeInstance, string][];
  }
 }
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
--- a/app/src/lib/graph-interface/graph/GraphView.svelte
+++ b/app/src/lib/graph-interface/graph/GraphView.svelte
@@ -1,102 +0,0 @@
-<script lang="ts">
-  import type { Edge as EdgeType, Node as NodeType } from "@nodes/types";
-  import { HTML } from "@threlte/extras";
-  import Edge from "../edges/Edge.svelte";
-  import Node from "../node/Node.svelte";
-  import { getContext, onMount } from "svelte";
-  import { getGraphState } from "./state.svelte";
-  import { useThrelte } from "@threlte/core";
-  import { appSettings } from "$lib/settings/app-settings.svelte";
-
-  type Props = {
-    nodes: Map<number, NodeType>;
-    edges: EdgeType[];
-    cameraPosition: [number, number, number];
-  };
-
-  const { nodes, edges, cameraPosition = [0, 0, 4] }: Props = $props();
-
-  const { invalidate } = useThrelte();
-
-  $effect(() => {
-    appSettings.value.theme;
-    invalidate();
-  });
-
-  const graphState = getGraphState();
-
-  const isNodeInView = getContext<(n: NodeType) => boolean>("isNodeInView");
-
-  const getSocketPosition =
-    getContext<(node: NodeType, index: string | number) => [number, number]>(
-      "getSocketPosition",
-    );
-
-  const edgePositions = $derived(
-    edges.map((edge) => {
-      const fromNode = nodes.get(edge[0].id);
-      const toNode = nodes.get(edge[2].id);
-
-      // This check is important because nodes might not be there during some transitions.
-      if (!fromNode || !toNode) {
-        return [0, 0, 0, 0];
-      }
-
-      const pos1 = getSocketPosition(fromNode, edge[1]);
-      const pos2 = getSocketPosition(toNode, edge[3]);
-      return [pos1[0], pos1[1], pos2[0], pos2[1]];
-    }),
-  );
-
-  onMount(() => {
-    for (const node of nodes.values()) {
-      if (node?.tmp?.ref) {
-        node.tmp.ref.style.setProperty("--nx", `${node.position[0] * 10}px`);
-        node.tmp.ref.style.setProperty("--ny", `${node.position[1] * 10}px`);
-      }
-    }
-  });
-</script>
-
-{#each edgePositions as edge (`${edge.join("-")}`)}
-  {@const [x1, y1, x2, y2] = edge}
-  <Edge
-    z={cameraPosition[2]}
-    from={{
-      x: x1,
-      y: y1,
-    }}
-    to={{
-      x: x2,
-      y: y2,
-    }}
-  />
-{/each}
-
-<HTML transform={false}>
-  <div
-    role="tree"
-    id="graph"
-    tabindex="0"
-    class="wrapper"
-    style:transform={`scale(${cameraPosition[2] * 0.1})`}
-    class:hovering-sockets={graphState.activeSocket}
-  >
-    {#each nodes.values() as node (node.id)}
-      <Node
-        {node}
-        inView={cameraPosition && isNodeInView(node)}
-        z={cameraPosition[2]}
-      />
-    {/each}
-  </div>
-</HTML>
-
-<style>
-  .wrapper {
-    position: absolute;
-    z-index: 100;
-    width: 0px;
-    height: 0px;
-  }
-</style>
--- a/app/src/lib/graph-interface/graph/Wrapper.svelte
+++ b/app/src/lib/graph-interface/graph/Wrapper.svelte
@@ -1,14 +1,10 @@
 <script lang="ts">
-  import type { Graph, Node, NodeRegistry } from "@nodes/types";
+  import type { Graph, NodeInstance, NodeRegistry } from "@nodarium/types";
  import GraphEl from "./Graph.svelte";
  import { GraphManager } from "../graph-manager.svelte";
-  import { setContext } from "svelte";
-  import { debounce } from "$lib/helpers";
  import { createKeyMap } from "$lib/helpers/createKeyMap";
-  import { GraphState } from "./state.svelte";
-
-  const graphState = new GraphState();
-  setContext("graphState", graphState);
+  import { GraphState, setGraphManager, setGraphState } from "./state.svelte";
+  import { setupKeymaps } from "../keymaps";

  type Props = {
    graph: Graph;
@@ -16,7 +12,7 @@

    settings?: Record<string, any>;

-    activeNode?: Node;
+    activeNode?: NodeInstance;
    showGrid?: boolean;
    snapToGrid?: boolean;
    showHelp?: boolean;
@@ -31,8 +27,8 @@
    registry,
    settings = $bindable(),
    activeNode = $bindable(),
-    showGrid,
-    snapToGrid,
+    showGrid = $bindable(true),
+    snapToGrid = $bindable(true),
    showHelp = $bindable(false),
    settingTypes = $bindable(),
    onsave,
@@ -40,10 +36,20 @@
  }: Props = $props();

  export const keymap = createKeyMap([]);
-  setContext("keymap", keymap);

  export const manager = new GraphManager(registry);
-  setContext("graphManager", manager);
+  setGraphManager(manager);
+
+  const graphState = new GraphState(manager);
+  $effect(() => {
+    graphState.showGrid = showGrid;
+    graphState.snapToGrid = snapToGrid;
+    graphState.showHelp = showHelp;
+  });
+
+  setGraphState(graphState);
+
+  setupKeymaps(keymap, manager, graphState);

  $effect(() => {
    if (graphState.activeNodeId !== -1) {
@@ -53,13 +59,16 @@
    }
  });

-  const updateSettings = debounce((s: Record<string, any>) => {
-    manager.setSettings(s);
-  }, 200);
+  $effect(() => {
+    if (!graphState.addMenuPosition) {
+      graphState.edgeEndPosition = null;
+      graphState.activeSocket = null;
+    }
+  });

  $effect(() => {
    if (settingTypes && settings) {
-      updateSettings(settings);
+      manager.setSettings(settings);
    }
  });

@@ -75,4 +84,4 @@
  manager.load(graph);
 </script>

-<GraphEl bind:showGrid bind:snapToGrid bind:showHelp />
+<GraphEl {keymap} />
--- a/app/src/lib/graph-interface/graph/constants.ts
+++ b/app/src/lib/graph-interface/graph/constants.ts
@@ -0,0 +1,3 @@
+export const minZoom = 1;
+export const maxZoom = 40;
+export const zoomSpeed = 2;
--- a/app/src/lib/graph-interface/graph/context.ts
+++ b/app/src/lib/graph-interface/graph/context.ts
@@ -1,6 +0,0 @@
-import type { GraphManager } from "../graph-manager.svelte";
-import { getContext } from "svelte";
-
-export function getGraphManager(): GraphManager {
-  return getContext("graphManager");
-}
--- a/app/src/lib/graph-interface/graph/events.ts
+++ b/app/src/lib/graph-interface/graph/events.ts
@@ -0,0 +1,500 @@
+import { GraphSchema, type NodeId, type NodeInstance } from "@nodarium/types";
+import type { GraphManager } from "../graph-manager.svelte";
+import type { GraphState } from "./state.svelte";
+import { animate, lerp } from "$lib/helpers";
+import { snapToGrid as snapPointToGrid } from "../helpers";
+import { maxZoom, minZoom, zoomSpeed } from "./constants";
+
+
+export class FileDropEventManager {
+
+  constructor(
+    private graph: GraphManager,
+    private state: GraphState
+  ) { }
+
+  handleFileDrop(event: DragEvent) {
+    event.preventDefault();
+    this.state.isDragging = false;
+    if (!event.dataTransfer) return;
+    const nodeId = event.dataTransfer.getData("data/node-id") as NodeId;
+    let mx = event.clientX - this.state.rect.x;
+    let my = event.clientY - this.state.rect.y;
+
+    if (nodeId) {
+      let nodeOffsetX = event.dataTransfer.getData("data/node-offset-x");
+      let nodeOffsetY = event.dataTransfer.getData("data/node-offset-y");
+      if (nodeOffsetX && nodeOffsetY) {
+        mx += parseInt(nodeOffsetX);
+        my += parseInt(nodeOffsetY);
+      }
+
+      let props = {};
+      let rawNodeProps = event.dataTransfer.getData("data/node-props");
+      if (rawNodeProps) {
+        try {
+          props = JSON.parse(rawNodeProps);
+        } catch (e) { }
+      }
+
+      const pos = this.state.projectScreenToWorld(mx, my);
+      this.graph.registry.load([nodeId]).then(() => {
+        this.graph.createNode({
+          type: nodeId,
+          props,
+          position: pos,
+        });
+      });
+    } else if (event.dataTransfer.files.length) {
+      const file = event.dataTransfer.files[0];
+
+      if (file.type === "application/wasm") {
+        const reader = new FileReader();
+        reader.onload = async (e) => {
+          const buffer = e.target?.result;
+          if (buffer?.constructor === ArrayBuffer) {
+            const nodeType = await this.graph.registry.register(buffer);
+
+            this.graph.createNode({
+              type: nodeType.id,
+              props: {},
+              position: this.state.projectScreenToWorld(mx, my),
+            });
+          }
+        };
+        reader.readAsArrayBuffer(file);
+      } else if (file.type === "application/json") {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const buffer = e.target?.result as ArrayBuffer;
+          if (buffer) {
+            const state = GraphSchema.parse(JSON.parse(buffer.toString()));
+            this.graph.load(state);
+          }
+        };
+        reader.readAsText(file);
+      }
+    }
+  }
+
+  handleMouseLeave() {
+    this.state.isDragging = false;
+    this.state.isPanning = false;
+  }
+
+  handleDragEnter(e: DragEvent) {
+    e.preventDefault();
+    this.state.isDragging = true;
+    this.state.isPanning = false;
+  }
+
+  handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    this.state.isDragging = true;
+    this.state.isPanning = false;
+  }
+
+  handleDragEnd(e: DragEvent) {
+    e.preventDefault();
+    this.state.isDragging = true;
+    this.state.isPanning = false;
+  }
+
+  getEventListenerProps() {
+    return {
+      ondragenter: (ev: DragEvent) => this.handleDragEnter(ev),
+      ondragover: (ev: DragEvent) => this.handleDragOver(ev),
+      ondragexit: (ev: DragEvent) => this.handleDragEnd(ev),
+      ondrop: (ev: DragEvent) => this.handleFileDrop(ev),
+      onmouseleave: () => this.handleMouseLeave(),
+    }
+  }
+}
+
+
+export class MouseEventManager {
+
+
+  constructor(
+    private graph: GraphManager,
+    private state: GraphState
+  ) { }
+
+
+  handleMouseUp(event: MouseEvent) {
+    this.state.isPanning = false;
+    if (!this.state.mouseDown) return;
+
+    const activeNode = this.graph.getNode(this.state.activeNodeId);
+
+    const clickedNodeId = this.state.getNodeIdFromEvent(event);
+
+    if (clickedNodeId !== -1) {
+      if (activeNode) {
+        if (!activeNode?.state?.isMoving && !event.ctrlKey && !event.shiftKey) {
+          this.state.activeNodeId = clickedNodeId;
+          this.state.clearSelection();
+        }
+      }
+    }
+
+    if (activeNode?.state?.isMoving) {
+      activeNode.state = activeNode.state || {};
+      activeNode.state.isMoving = false;
+      if (this.state.snapToGrid) {
+        const snapLevel = this.state.getSnapLevel();
+        activeNode.position[0] = snapPointToGrid(
+          activeNode?.state?.x ?? activeNode.position[0],
+          5 / snapLevel,
+        );
+        activeNode.position[1] = snapPointToGrid(
+          activeNode?.state?.y ?? activeNode.position[1],
+          5 / snapLevel,
+        );
+      } else {
+        activeNode.position[0] = activeNode?.state?.x ?? activeNode.position[0];
+        activeNode.position[1] = activeNode?.state?.y ?? activeNode.position[1];
+      }
+      const nodes = [
+        ...[...(this.state.selectedNodes?.values() || [])].map((id) =>
+          this.graph.getNode(id),
+        ),
+      ] as NodeInstance[];
+
+      const vec = [
+        activeNode.position[0] - (activeNode?.state.x || 0),
+        activeNode.position[1] - (activeNode?.state.y || 0),
+      ];
+
+      for (const node of nodes) {
+        if (!node) continue;
+        node.state = node.state || {};
+        const { x, y } = node.state;
+        if (x !== undefined && y !== undefined) {
+          node.position[0] = x + vec[0];
+          node.position[1] = y + vec[1];
+        }
+      }
+      nodes.push(activeNode);
+      animate(500, (a: number) => {
+        for (const node of nodes) {
+          if (
+            node?.state &&
+            node.state["x"] !== undefined &&
+            node.state["y"] !== undefined
+          ) {
+            node.state.x = lerp(node.state.x, node.position[0], a);
+            node.state.y = lerp(node.state.y, node.position[1], a);
+            this.state.updateNodePosition(node);
+            if (node?.state?.isMoving) {
+              return false;
+            }
+          }
+        }
+      });
+      this.graph.save();
+    } else if (this.state.hoveredSocket && this.state.activeSocket) {
+      if (
+        typeof this.state.hoveredSocket.index === "number" &&
+        typeof this.state.activeSocket.index === "string"
+      ) {
+        this.graph.createEdge(
+          this.state.hoveredSocket.node,
+          this.state.hoveredSocket.index || 0,
+          this.state.activeSocket.node,
+          this.state.activeSocket.index,
+        );
+      } else if (
+        typeof this.state.activeSocket.index == "number" &&
+        typeof this.state.hoveredSocket.index === "string"
+      ) {
+        this.graph.createEdge(
+          this.state.activeSocket.node,
+          this.state.activeSocket.index || 0,
+          this.state.hoveredSocket.node,
+          this.state.hoveredSocket.index,
+        );
+      }
+      this.graph.save();
+    } else if (this.state.activeSocket && event.ctrlKey) {
+      // Handle automatic adding of nodes on ctrl+mouseUp
+      this.state.edgeEndPosition = [
+        this.state.mousePosition[0],
+        this.state.mousePosition[1],
+      ];
+
+      if (typeof this.state.activeSocket.index === "number") {
+        this.state.addMenuPosition = [
+          this.state.mousePosition[0],
+          this.state.mousePosition[1] - 25 / this.state.cameraPosition[2],
+        ];
+      } else {
+        this.state.addMenuPosition = [
+          this.state.mousePosition[0] - 155 / this.state.cameraPosition[2],
+          this.state.mousePosition[1] - 25 / this.state.cameraPosition[2],
+        ];
+      }
+      return;
+    }
+
+    // check if camera moved
+    if (
+      clickedNodeId === -1 &&
+      !this.state.boxSelection &&
+      this.state.cameraDown[0] === this.state.cameraPosition[0] &&
+      this.state.cameraDown[1] === this.state.cameraPosition[1] &&
+      this.state.isBodyFocused()
+    ) {
+      this.state.activeNodeId = -1;
+      this.state.clearSelection();
+    }
+
+    this.state.mouseDown = null;
+    this.state.boxSelection = false;
+    this.state.activeSocket = null;
+    this.state.possibleSockets = [];
+    this.state.hoveredSocket = null;
+    this.state.addMenuPosition = null;
+  }
+
+
+  handleMouseDown(event: MouseEvent) {
+    if (this.state.mouseDown) return;
+    this.state.edgeEndPosition = null;
+
+    if (event.target instanceof HTMLElement) {
+      if (
+        event.target.nodeName !== "CANVAS" &&
+        !event.target.classList.contains("node") &&
+        !event.target.classList.contains("content")
+      ) {
+        return;
+      }
+    }
+
+    let mx = event.clientX - this.state.rect.x;
+    let my = event.clientY - this.state.rect.y;
+
+    this.state.mouseDown = [mx, my];
+    this.state.cameraDown[0] = this.state.cameraPosition[0];
+    this.state.cameraDown[1] = this.state.cameraPosition[1];
+
+    const clickedNodeId = this.state.getNodeIdFromEvent(event);
+    this.state.mouseDownNodeId = clickedNodeId;
+
+    // if we clicked on a node
+    if (clickedNodeId !== -1) {
+      if (this.state.activeNodeId === -1) {
+        this.state.activeNodeId = clickedNodeId;
+        // if the selected node is the same as the clicked node
+      } else if (this.state.activeNodeId === clickedNodeId) {
+        //$activeNodeId = -1;
+        // if the clicked node is different from the selected node and secondary
+      } else if (event.ctrlKey) {
+        this.state.selectedNodes.add(this.state.activeNodeId);
+        this.state.selectedNodes.delete(clickedNodeId);
+        this.state.activeNodeId = clickedNodeId;
+        // select the node
+      } else if (event.shiftKey) {
+        const activeNode = this.graph.getNode(this.state.activeNodeId);
+        const newNode = this.graph.getNode(clickedNodeId);
+        if (activeNode && newNode) {
+          const edge = this.graph.getNodesBetween(activeNode, newNode);
+          if (edge) {
+            this.state.selectedNodes.clear();
+            for (const node of edge) {
+              this.state.selectedNodes.add(node.id);
+            }
+            this.state.selectedNodes.add(clickedNodeId);
+          }
+        }
+      } else if (!this.state.selectedNodes.has(clickedNodeId)) {
+        this.state.activeNodeId = clickedNodeId;
+        this.state.clearSelection();
+      }
+    } else if (event.ctrlKey) {
+      this.state.boxSelection = true;
+    }
+
+    const node = this.graph.getNode(this.state.activeNodeId);
+    if (!node) return;
+    node.state = node.state || {};
+    node.state.downX = node.position[0];
+    node.state.downY = node.position[1];
+
+    if (this.state.selectedNodes) {
+      for (const nodeId of this.state.selectedNodes) {
+        const n = this.graph.getNode(nodeId);
+        if (!n) continue;
+        n.state = n.state || {};
+        n.state.downX = n.position[0];
+        n.state.downY = n.position[1];
+      }
+    }
+
+    this.state.edgeEndPosition = null;
+  }
+
+
+  handleMouseMove(event: MouseEvent) {
+    let mx = event.clientX - this.state.rect.x;
+    let my = event.clientY - this.state.rect.y;
+
+    this.state.mousePosition = this.state.projectScreenToWorld(mx, my);
+    this.state.hoveredNodeId = this.state.getNodeIdFromEvent(event);
+
+    if (!this.state.mouseDown) return;
+
+    // we are creating a new edge here
+    if (this.state.activeSocket || this.state.possibleSockets?.length) {
+      let smallestDist = 1000;
+      let _socket;
+      for (const socket of this.state.possibleSockets) {
+        const dist = Math.sqrt(
+          (socket.position[0] - this.state.mousePosition[0]) ** 2 +
+          (socket.position[1] - this.state.mousePosition[1]) ** 2,
+        );
+        if (dist < smallestDist) {
+          smallestDist = dist;
+          _socket = socket;
+        }
+      }
+
+      if (_socket && smallestDist < 0.9) {
+        this.state.mousePosition = _socket.position;
+        this.state.hoveredSocket = _socket;
+      } else {
+        this.state.hoveredSocket = null;
+      }
+      return;
+    }
+
+    // handle box selection
+    if (this.state.boxSelection) {
+      event.preventDefault();
+      event.stopPropagation();
+      const mouseD = this.state.projectScreenToWorld(
+        this.state.mouseDown[0],
+        this.state.mouseDown[1],
+      );
+      const x1 = Math.min(mouseD[0], this.state.mousePosition[0]);
+      const x2 = Math.max(mouseD[0], this.state.mousePosition[0]);
+      const y1 = Math.min(mouseD[1], this.state.mousePosition[1]);
+      const y2 = Math.max(mouseD[1], this.state.mousePosition[1]);
+      for (const node of this.graph.nodes.values()) {
+        if (!node?.state) continue;
+        const x = node.position[0];
+        const y = node.position[1];
+        const height = this.state.getNodeHeight(node.type);
+        if (x > x1 - 20 && x < x2 && y > y1 - height && y < y2) {
+          this.state.selectedNodes?.add(node.id);
+        } else {
+          this.state.selectedNodes?.delete(node.id);
+        }
+      }
+      return;
+    }
+
+    // here we are handling dragging of nodes
+    if (this.state.activeNodeId !== -1 && this.state.mouseDownNodeId !== -1) {
+      const node = this.graph.getNode(this.state.activeNodeId);
+      if (!node || event.buttons !== 1) return;
+
+      node.state = node.state || {};
+
+      const oldX = node.state.downX || 0;
+      const oldY = node.state.downY || 0;
+
+      let newX =
+        oldX + (mx - this.state.mouseDown[0]) / this.state.cameraPosition[2];
+      let newY =
+        oldY + (my - this.state.mouseDown[1]) / this.state.cameraPosition[2];
+
+      if (event.ctrlKey) {
+        const snapLevel = this.state.getSnapLevel();
+        if (this.state.snapToGrid) {
+          newX = snapPointToGrid(newX, 5 / snapLevel);
+          newY = snapPointToGrid(newY, 5 / snapLevel);
+        }
+      }
+
+      if (!node.state.isMoving) {
+        const dist = Math.sqrt((oldX - newX) ** 2 + (oldY - newY) ** 2);
+        if (dist > 0.2) {
+          node.state.isMoving = true;
+        }
+      }
+
+      const vecX = oldX - newX;
+      const vecY = oldY - newY;
+
+      if (this.state.selectedNodes?.size) {
+        for (const nodeId of this.state.selectedNodes) {
+          const n = this.graph.getNode(nodeId);
+          if (!n?.state) continue;
+          n.state.x = (n?.state?.downX || 0) - vecX;
+          n.state.y = (n?.state?.downY || 0) - vecY;
+          this.state.updateNodePosition(n);
+        }
+      }
+
+      node.state.x = newX;
+      node.state.y = newY;
+
+      this.state.updateNodePosition(node);
+
+      return;
+    }
+
+    // here we are handling panning of camera
+    this.state.isPanning = true;
+    let newX =
+      this.state.cameraDown[0] -
+      (mx - this.state.mouseDown[0]) / this.state.cameraPosition[2];
+    let newY =
+      this.state.cameraDown[1] -
+      (my - this.state.mouseDown[1]) / this.state.cameraPosition[2];
+
+    this.state.setCameraTransform(newX, newY);
+  }
+
+
+  handleMouseScroll(event: WheelEvent) {
+    const bodyIsFocused =
+      document.activeElement === document.body ||
+      document.activeElement === this.state.wrapper ||
+      document?.activeElement?.id === "graph";
+    if (!bodyIsFocused) return;
+
+    // Define zoom speed and clamp it between -1 and 1
+    const isNegative = event.deltaY < 0;
+    const normalizedDelta = Math.abs(event.deltaY * 0.01);
+    const delta = Math.pow(0.95, zoomSpeed * normalizedDelta);
+
+    // Calculate new zoom level and clamp it between minZoom and maxZoom
+    const newZoom = Math.max(
+      minZoom,
+      Math.min(
+        maxZoom,
+        isNegative
+          ? this.state.cameraPosition[2] / delta
+          : this.state.cameraPosition[2] * delta,
+      ),
+    );
+
+    // Calculate the ratio of the new zoom to the original zoom
+    const zoomRatio = newZoom / this.state.cameraPosition[2];
+
+    // Update camera position and zoom level
+    this.state.setCameraTransform(
+      this.state.mousePosition[0] -
+      (this.state.mousePosition[0] - this.state.cameraPosition[0]) /
+      zoomRatio,
+      this.state.mousePosition[1] -
+      (this.state.mousePosition[1] - this.state.cameraPosition[1]) /
+      zoomRatio,
+      newZoom,
+    );
+  }
+
+}
--- a/app/src/lib/graph-interface/graph/state.svelte.ts
+++ b/app/src/lib/graph-interface/graph/state.svelte.ts
@@ -1,12 +1,70 @@
-import type { Socket } from "@nodes/types";
-import { getContext } from "svelte";
+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 { OrthographicCamera } from "three";

+
+const graphStateKey = Symbol("graph-state");
 export function getGraphState() {
-  return getContext<GraphState>("graphState");
+  return getContext<GraphState>(graphStateKey);
+}
+export function setGraphState(graphState: GraphState) {
+  return setContext(graphStateKey, graphState)
+}
+
+const graphManagerKey = Symbol("graph-manager");
+export function getGraphManager() {
+  return getContext<GraphManager>(graphManagerKey)
+}
+
+export function setGraphManager(manager: GraphManager) {
+  return setContext(graphManagerKey, manager);
 }

 export class GraphState {
+
+  constructor(private graph: GraphManager) { }
+
+  width = $state(100);
+  height = $state(100);
+
+  wrapper = $state<HTMLDivElement>(null!);
+  rect: DOMRect = $derived(
+    (this.wrapper && this.width && this.height) ? this.wrapper.getBoundingClientRect() : new DOMRect(0, 0, 0, 0),
+  );
+
+  camera = $state<OrthographicCamera>(null!);
+  cameraPosition: [number, number, number] = $state([0, 0, 4]);
+
+  clipboard: null | {
+    nodes: NodeInstance[];
+    edges: [number, number, number, string][];
+  } = null;
+
+  cameraBounds = $derived([
+    this.cameraPosition[0] - this.width / this.cameraPosition[2] / 2,
+    this.cameraPosition[0] + this.width / this.cameraPosition[2] / 2,
+    this.cameraPosition[1] - this.height / this.cameraPosition[2] / 2,
+    this.cameraPosition[1] + this.height / this.cameraPosition[2] / 2,
+  ]);
+
+  boxSelection = $state(false);
+  edgeEndPosition = $state<[number, number] | null>();
+  addMenuPosition = $state<[number, number] | null>(null);
+
+  snapToGrid = $state(false);
+  showGrid = $state(true)
+  showHelp = $state(false)
+
+  cameraDown = [0, 0];
+  mouseDownNodeId = -1;
+
+  isPanning = $state(false);
+  isDragging = $state(false);
+  hoveredNodeId = $state(-1);
+  mousePosition = $state([0, 0]);
+  mouseDown = $state<[number, number] | null>(null);
  activeNodeId = $state(-1);
  selectedNodes = new SvelteSet<number>();
  activeSocket = $state<Socket | null>(null);
@@ -15,7 +73,241 @@ export class GraphState {
  possibleSocketIds = $derived(
    new Set(this.possibleSockets.map((s) => `${s.node.id}-${s.index}`)),
  );
+
  clearSelection() {
    this.selectedNodes.clear();
  }
+
+  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]
+        ) {
+          delete node.state.x;
+          delete node.state.y;
+        }
+        this.graph.edges = [...this.graph.edges];
+      } else {
+        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;
+      }
+    }
+  }
+
+  getSnapLevel() {
+    const z = this.cameraPosition[2];
+    if (z > 66) {
+      return 8;
+    } else if (z > 55) {
+      return 4;
+    } else if (z > 11) {
+      return 2;
+    } else {
+    }
+    return 1;
+  }
+
+  getSocketPosition(
+    node: NodeInstance,
+    index: string | number,
+  ): [number, number] {
+    if (typeof index === "number") {
+      return [
+        (node?.state?.x ?? node.position[0]) + 20,
+        (node?.state?.y ?? node.position[1]) + 2.5 + 10 * index,
+      ];
+    } else {
+      const _index = Object.keys(node.state?.type?.inputs || {}).indexOf(index);
+      return [
+        node?.state?.x ?? node.position[0],
+        (node?.state?.y ?? node.position[1]) + 10 + 10 * _index,
+      ];
+    }
+  }
+
+  private nodeHeightCache: Record<string, number> = {};
+  getNodeHeight(nodeTypeId: string) {
+    if (nodeTypeId in this.nodeHeightCache) {
+      return this.nodeHeightCache[nodeTypeId];
+    }
+    const node = this.graph.getNodeType(nodeTypeId);
+    if (!node?.inputs) {
+      return 5;
+    }
+    const height =
+      5 +
+      10 *
+      Object.keys(node.inputs).filter(
+        (p) =>
+          p !== "seed" &&
+          node?.inputs &&
+          !("setting" in node?.inputs?.[p]) &&
+          node.inputs[p].hidden !== true,
+      ).length;
+    this.nodeHeightCache[nodeTypeId] = height;
+    return height;
+  }
+
+  copyNodes() {
+    if (this.activeNodeId === -1 && !this.selectedNodes?.size)
+      return;
+    let nodes = [
+      this.activeNodeId,
+      ...(this.selectedNodes?.values() || []),
+    ]
+      .map((id) => this.graph.getNode(id))
+      .filter(b => !!b);
+
+    const edges = this.graph.getEdgesBetweenNodes(nodes);
+    nodes = nodes.map((node) => ({
+      ...node,
+      position: [
+        this.mousePosition[0] - node.position[0],
+        this.mousePosition[1] - node.position[1],
+      ],
+      tmp: undefined,
+    }));
+
+    this.clipboard = {
+      nodes: nodes,
+      edges: edges,
+    };
+  }
+
+  pasteNodes() {
+    if (!this.clipboard) return;
+
+    const nodes = this.clipboard.nodes
+      .map((node) => {
+        node.position[0] = this.mousePosition[0] - node.position[0];
+        node.position[1] = this.mousePosition[1] - node.position[1];
+        return node;
+      })
+      .filter(Boolean) as NodeInstance[];
+
+    const newNodes = this.graph.createGraph(nodes, this.clipboard.edges);
+    this.selectedNodes.clear();
+    for (const node of newNodes) {
+      this.selectedNodes.add(node.id);
+    }
+  }
+
+
+  setDownSocket(socket: Socket) {
+    this.activeSocket = socket;
+
+    let { node, index, position } = socket;
+
+    // remove existing edge
+    if (typeof index === "string") {
+      const edges = this.graph.getEdgesToNode(node);
+      for (const edge of edges) {
+        if (edge[3] === index) {
+          node = edge[0];
+          index = edge[1];
+          position = this.getSocketPosition(node, index);
+          this.graph.removeEdge(edge);
+          break;
+        }
+      }
+    }
+
+    this.mouseDown = position;
+    this.activeSocket = {
+      node,
+      index,
+      position,
+    };
+
+    this.possibleSockets = this.graph
+      .getPossibleSockets(this.activeSocket)
+      .map(([node, index]) => {
+        return {
+          node,
+          index,
+          position: this.getSocketPosition(node, index),
+        };
+      });
+  };
+
+
+  projectScreenToWorld(x: number, y: number): [number, number] {
+    return [
+      this.cameraPosition[0] +
+      (x - this.width / 2) / this.cameraPosition[2],
+      this.cameraPosition[1] +
+      (y - this.height / 2) / this.cameraPosition[2],
+    ];
+  }
+
+  getNodeIdFromEvent(event: MouseEvent) {
+    let clickedNodeId = -1;
+
+    let mx = event.clientX - this.rect.x;
+    let my = event.clientY - this.rect.y;
+
+    if (event.button === 0) {
+      // check if the clicked element is a node
+      if (event.target instanceof HTMLElement) {
+        const nodeElement = event.target.closest(".node");
+        const nodeId = nodeElement?.getAttribute?.("data-node-id");
+        if (nodeId) {
+          clickedNodeId = parseInt(nodeId, 10);
+        }
+      }
+
+      // if we do not have an active node,
+      // we are going to check if we clicked on a node by coordinates
+      if (clickedNodeId === -1) {
+        const [downX, downY] = this.projectScreenToWorld(mx, my);
+        for (const node of this.graph.nodes.values()) {
+          const x = node.position[0];
+          const y = node.position[1];
+          const height = this.getNodeHeight(node.type);
+          if (downX > x && downX < x + 20 && downY > y && downY < y + height) {
+            clickedNodeId = node.id;
+            break;
+          }
+        }
+      }
+    }
+    return clickedNodeId;
+  }
+
+  isNodeInView(node: NodeInstance) {
+    const height = this.getNodeHeight(node.type);
+    const width = 20;
+    return (
+      node.position[0] > this.cameraBounds[0] - width &&
+      node.position[0] < this.cameraBounds[1] &&
+      node.position[1] > this.cameraBounds[2] - height &&
+      node.position[1] < this.cameraBounds[3]
+    );
+  };
 }
--- a/app/src/lib/graph-interface/history-manager.ts
+++ b/app/src/lib/graph-interface/history-manager.ts
@@ -1,7 +1,7 @@
 import { create, type Delta } from "jsondiffpatch";
-import type { Graph } from "@nodes/types";
+import type { Graph } from "@nodarium/types";
 import { clone } from "./helpers/index.js";
-import { createLogger } from "@nodes/utils";
+import { createLogger } from "@nodarium/utils";

 const diff = create({
  objectHash: function (obj, index) {
@@ -16,7 +16,7 @@ const diff = create({
 });

 const log = createLogger("history");
-// log.mute();
+log.mute();

 export class HistoryManager {
  index: number = -1;
--- a/app/src/lib/graph-interface/keymaps.ts
+++ b/app/src/lib/graph-interface/keymaps.ts
@@ -0,0 +1,192 @@
+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";
+
+type Keymap = ReturnType<typeof createKeyMap>;
+export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: GraphState) {
+
+
+  keymap.addShortcut({
+    key: "l",
+    description: "Select linked nodes",
+    callback: () => {
+      const activeNode = graph.getNode(graphState.activeNodeId);
+      if (activeNode) {
+        const nodes = graph.getLinkedNodes(activeNode);
+        graphState.selectedNodes.clear();
+        for (const node of nodes) {
+          graphState.selectedNodes.add(node.id);
+        }
+      }
+    },
+  });
+
+
+  keymap.addShortcut({
+    key: "?",
+    description: "Toggle Help",
+    callback: () => {
+      // TODO: fix this
+      // showHelp = !showHelp;
+    },
+  });
+
+  keymap.addShortcut({
+    key: "c",
+    ctrl: true,
+    description: "Copy active nodes",
+    callback: () => graphState.copyNodes(),
+  });
+
+  keymap.addShortcut({
+    key: "v",
+    ctrl: true,
+    description: "Paste nodes",
+    callback: () => graphState.pasteNodes(),
+  });
+
+  keymap.addShortcut({
+    key: "Escape",
+    description: "Deselect nodes",
+    callback: () => {
+      graphState.activeNodeId = -1;
+      graphState.clearSelection();
+      graphState.edgeEndPosition = null;
+      (document.activeElement as HTMLElement)?.blur();
+    },
+  });
+
+  keymap.addShortcut({
+    key: "A",
+    shift: true,
+    description: "Add new Node",
+    callback: () => {
+      graphState.addMenuPosition = [graphState.mousePosition[0], graphState.mousePosition[1]];
+    },
+  });
+
+  keymap.addShortcut({
+    key: ".",
+    description: "Center camera",
+    callback: () => {
+      if (!graphState.isBodyFocused()) return;
+
+      const average = [0, 0];
+      for (const node of graph.nodes.values()) {
+        average[0] += node.position[0];
+        average[1] += node.position[1];
+      }
+      average[0] = average[0] ? average[0] / graph.nodes.size : 0;
+      average[1] = average[1] ? average[1] / graph.nodes.size : 0;
+
+      const camX = graphState.cameraPosition[0];
+      const camY = graphState.cameraPosition[1];
+      const camZ = graphState.cameraPosition[2];
+
+      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)),
+        );
+        if (graphState.mouseDown) return false;
+      });
+    },
+  });
+
+  keymap.addShortcut({
+    key: "a",
+    ctrl: true,
+    preventDefault: true,
+    description: "Select all nodes",
+    callback: () => {
+      if (!graphState.isBodyFocused()) return;
+      for (const node of graph.nodes.keys()) {
+        graphState.selectedNodes.add(node);
+      }
+    },
+  });
+
+  keymap.addShortcut({
+    key: "z",
+    ctrl: true,
+    description: "Undo",
+    callback: () => {
+      if (!graphState.isBodyFocused()) return;
+      graph.undo();
+      for (const node of graph.nodes.values()) {
+        graphState.updateNodePosition(node);
+      }
+    },
+  });
+
+  keymap.addShortcut({
+    key: "y",
+    ctrl: true,
+    description: "Redo",
+    callback: () => {
+      graph.redo();
+      for (const node of graph.nodes.values()) {
+        graphState.updateNodePosition(node);
+      }
+    },
+  });
+
+  keymap.addShortcut({
+    key: "s",
+    ctrl: true,
+    description: "Save",
+    preventDefault: true,
+    callback: () => {
+      const state = graph.serialize();
+      const blob = new Blob([JSON.stringify(state)], {
+        type: "application/json;charset=utf-8",
+      });
+      FileSaver.saveAs(blob, "nodarium-graph.json");
+    },
+  });
+
+  keymap.addShortcut({
+    key: ["Delete", "Backspace", "x"],
+    description: "Delete selected nodes",
+    callback: (event) => {
+      if (!graphState.isBodyFocused()) return;
+      graph.startUndoGroup();
+      if (graphState.activeNodeId !== -1) {
+        const node = graph.getNode(graphState.activeNodeId);
+        if (node) {
+          graph.removeNode(node, { restoreEdges: event.ctrlKey });
+          graphState.activeNodeId = -1;
+        }
+      }
+      if (graphState.selectedNodes) {
+        for (const nodeId of graphState.selectedNodes) {
+          const node = graph.getNode(nodeId);
+          if (node) {
+            graph.removeNode(node, { restoreEdges: event.ctrlKey });
+          }
+        }
+        graphState.clearSelection();
+      }
+      graph.saveUndoGroup();
+    },
+  });
+
+  keymap.addShortcut({
+    key: "f",
+    description: "Smart Connect Nodes",
+    callback: () => {
+      const nodes = [...graphState.selectedNodes.values()]
+        .map((g) => graph.getNode(g))
+        .filter((n) => !!n);
+      const edge = graph.smartConnect(nodes[0], nodes[1]);
+      if (!edge) graph.smartConnect(nodes[1], nodes[0]);
+    },
+  });
+
+
+}
--- a/app/src/lib/graph-interface/node/Node.svelte
+++ b/app/src/lib/graph-interface/node/Node.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import type { Node } from "@nodes/types";
-  import { getContext, onMount } from "svelte";
+  import type { NodeInstance } from "@nodarium/types";
  import { getGraphState } from "../graph/state.svelte";
  import { T } from "@threlte/core";
  import { type Mesh } from "three";
@@ -13,42 +12,32 @@
  const graphState = getGraphState();

  type Props = {
-    node: Node;
+    node: NodeInstance;
    inView: boolean;
    z: number;
  };
-  let { node = $bindable(), inView, z }: Props = $props();
+  let { node, inView, z }: Props = $props();

  const isActive = $derived(graphState.activeNodeId === node.id);
  const isSelected = $derived(graphState.selectedNodes.has(node.id));
-  let strokeColor = $state(colors.selected);
-  $effect(() => {
-    appSettings.value.theme;
-    strokeColor = isSelected
-      ? colors.selected
-      : isActive
-        ? colors.active
-        : colors.outline;
-  });
-
-  const updateNodePosition =
-    getContext<(n: Node) => void>("updateNodePosition");
-
-  const getNodeHeight = getContext<(n: string) => number>("getNodeHeight");
+  const strokeColor = $derived(
+    appSettings.value.theme &&
+      (isSelected
+        ? colors.selected
+        : isActive
+          ? colors.active
+          : colors.outline),
+  );

  let meshRef: Mesh | undefined = $state();

-  const height = getNodeHeight?.(node.type);
+  const height = graphState.getNodeHeight(node.type);

  $effect(() => {
-    if (!node?.tmp) node.tmp = {};
-    node.tmp.mesh = meshRef;
-  });
-
-  onMount(() => {
-    if (!node.tmp) node.tmp = {};
-    node.tmp.mesh = meshRef;
-    updateNodePosition?.(node);
+    if (meshRef && !node.state?.mesh) {
+      node.state.mesh = meshRef;
+      graphState.updateNodePosition(node);
+    }
  });
 </script>

@@ -78,4 +67,4 @@
  />
 </T.Mesh>

-<NodeHtml bind:node {inView} {isActive} {isSelected} {z} />
+<NodeHtml {node} {inView} {isActive} {isSelected} {z} />
--- a/app/src/lib/graph-interface/node/NodeHTML.svelte
+++ b/app/src/lib/graph-interface/node/NodeHTML.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
-  import type { Node } from "@nodes/types";
+  import type { NodeInstance, SerializedNode } from "@nodarium/types";
  import NodeHeader from "./NodeHeader.svelte";
  import NodeParameter from "./NodeParameter.svelte";
-  import { getContext, onMount } from "svelte";
+  import { getGraphState } from "../graph/state.svelte";

  let ref: HTMLDivElement;

+  const graphState = getGraphState();
+
  type Props = {
-    node: Node;
+    node: SerializedNode | NodeInstance;
    position?: "absolute" | "fixed" | "relative";
    isActive?: boolean;
    isSelected?: boolean;
@@ -24,21 +26,25 @@
    z = 2,
  }: Props = $props();

-  const zOffset = (node.tmp?.random || 0) * 0.5;
+  // If we dont have a random offset, all nodes becom visible at the same zoom level -> stuttering
+  const zOffset = Math.random() - 0.5;
  const zLimit = 2 - zOffset;

-  const parameters = Object.entries(node?.tmp?.type?.inputs || {}).filter(
-    (p) =>
-      p[1].type !== "seed" && !("setting" in p[1]) && p[1]?.hidden !== true,
-  );
+  const parameters =
+    "state" in node
+      ? Object.entries(node.state?.type?.inputs || {}).filter(
+          (p) =>
+            p[1].type !== "seed" &&
+            !("setting" in p[1]) &&
+            p[1]?.hidden !== true,
+        )
+      : [];

-  const updateNodePosition =
-    getContext<(n: Node) => void>("updateNodePosition");
-
-  onMount(() => {
-    node.tmp = node.tmp || {};
-    node.tmp.ref = ref;
-    updateNodePosition?.(node);
+  $effect(() => {
+    if ("state" in node && !node.state.ref) {
+      node.state.ref = ref;
+      graphState?.updateNodePosition(node);
+    }
  });
 </script>

--- a/app/src/lib/graph-interface/node/NodeHeader.svelte
+++ b/app/src/lib/graph-interface/node/NodeHeader.svelte
@@ -1,28 +1,27 @@
 <script lang="ts">
+  import { getGraphState } from "../graph/state.svelte.js";
  import { createNodePath } from "../helpers/index.js";
-  import type { Node, Socket } from "@nodes/types";
-  import { getContext } from "svelte";
+  import type { NodeInstance, SerializedNode } from "@nodarium/types";

-  const { node }: { node: Node } = $props();
+  const graphState = getGraphState();

-  const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket");
-  const getSocketPosition =
-    getContext<(node: Node, index: number) => [number, number]>(
-      "getSocketPosition",
-    );
+  const { node }: { node: NodeInstance | SerializedNode } = $props();

  function handleMouseDown(event: MouseEvent) {
    event.stopPropagation();
    event.preventDefault();
-    setDownSocket?.({
-      node,
-      index: 0,
-      position: getSocketPosition?.(node, 0),
-    });
+    if ("state" in node) {
+      graphState.setDownSocket?.({
+        node,
+        index: 0,
+        position: graphState.getSocketPosition?.(node, 0),
+      });
+    }
  }

  const cornerTop = 10;
-  const rightBump = !!node?.tmp?.type?.outputs?.length;
+  const rightBump =
+    "state" in node ? !!node?.state?.type?.outputs?.length : false;
  const aspectRatio = 0.25;

  const path = createNodePath({
@@ -33,14 +32,6 @@
    rightBump,
    aspectRatio,
  });
-  // const pathDisabled = createNodePath({
-  //   depth: 0,
-  //   height: 15,
-  //   y: 50,
-  //   cornerTop,
-  //   rightBump,
-  //   aspectRatio,
-  // });
  const pathHover = createNodePath({
    depth: 8.5,
    height: 50,
--- a/app/src/lib/graph-interface/node/NodeInput.svelte
+++ b/app/src/lib/graph-interface/node/NodeInput.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-  import type { Node, NodeInput } from "@nodes/types";
-  import { getGraphManager } from "../graph/context.js";
-  import { Input } from "@nodes/ui";
+  import type { NodeInstance, NodeInput } from "@nodarium/types";
+  import { Input } from "@nodarium/ui";
+  import type { GraphManager } from "../graph-manager.svelte";

  type Props = {
-    node: Node;
+    node: NodeInstance;
    input: NodeInput;
    id: string;
    elementId?: string;
+    graph?: GraphManager;
  };

  const {
@@ -15,10 +16,9 @@
    input,
    id,
    elementId = `input-${Math.random().toString(36).substring(7)}`,
+    graph,
  }: Props = $props();

-  const graph = getGraphManager();
-
  function getDefaultValue() {
    if (node?.props?.[id] !== undefined) return node?.props?.[id] as number;
    if ("value" in input && input?.value !== undefined)
--- a/app/src/lib/graph-interface/node/NodeParameter.svelte
+++ b/app/src/lib/graph-interface/node/NodeParameter.svelte
@@ -1,51 +1,44 @@
 <script lang="ts">
  import type {
    NodeInput as NodeInputType,
-    Socket,
-    Node as NodeType,
-  } from "@nodes/types";
-  import { getContext } from "svelte";
+    NodeInstance,
+    SerializedNode,
+  } from "@nodarium/types";
  import { createNodePath } from "../helpers/index.js";
-  import { getGraphManager } from "../graph/context.js";
  import NodeInput from "./NodeInput.svelte";
-  import { getGraphState } from "../graph/state.svelte.js";
+  import { getGraphManager, getGraphState } from "../graph/state.svelte.js";

  type Props = {
-    node: NodeType;
+    node: NodeInstance | SerializedNode;
    input: NodeInputType;
    id: string;
    isLast?: boolean;
  };

+  const graph = getGraphManager();
+
  let { node = $bindable(), input, id, isLast }: Props = $props();

-  const inputType = node?.tmp?.type?.inputs?.[id]!;
+  const inputType = node?.state?.type?.inputs?.[id]!;

  const socketId = `${node.id}-${id}`;

-  const graph = getGraphManager();
  const graphState = getGraphState();
  const graphId = graph?.id;

  const elementId = `input-${Math.random().toString(36).substring(7)}`;

-  const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket");
-  const getSocketPosition =
-    getContext<(node: NodeType, index: string) => [number, number]>(
-      "getSocketPosition",
-    );
-
  function handleMouseDown(ev: MouseEvent) {
    ev.preventDefault();
    ev.stopPropagation();
-    setDownSocket?.({
+    graphState.setDownSocket({
      node,
      index: id,
-      position: getSocketPosition?.(node, id),
+      position: graphState.getSocketPosition?.(node, id),
    });
  }

-  const leftBump = node.tmp?.type?.inputs?.[id].internal !== true;
+  const leftBump = node.state?.type?.inputs?.[id].internal !== true;
  const cornerBottom = isLast ? 5 : 0;
  const aspectRatio = 0.5;

@@ -87,18 +80,12 @@
        <label for={elementId}>{input.label || id}</label>
      {/if}
      {#if inputType.external !== true}
-        <NodeInput {elementId} bind:node {input} {id} />
+        <NodeInput {graph} {elementId} bind:node {input} {id} />
      {/if}
    </div>

-    {#if node?.tmp?.type?.inputs?.[id]?.internal !== true}
-      <div
-        data-node-socket
-        class="large target"
-        onmousedown={handleMouseDown}
-        role="button"
-        tabindex="0"
-      ></div>
+    {#if node?.state?.type?.inputs?.[id]?.internal !== true}
+      <div data-node-socket class="large target"></div>
      <div
        data-node-socket
        class="small target"
--- a/app/src/lib/graph-interface/types.ts
+++ b/app/src/lib/graph-interface/types.ts
@@ -1,20 +0,0 @@
-import type { Node, NodeDefinition } from "@nodes/types";
-
-export type GraphNode = Node & {
-  tmp?: {
-    depth?: number;
-    mesh?: any;
-    random?: number;
-    parents?: Node[];
-    children?: Node[];
-    inputNodes?: Record<string, Node>;
-    type?: NodeDefinition;
-    downX?: number;
-    downY?: number;
-    x?: number;
-    y?: number;
-    ref?: HTMLElement;
-    visible?: boolean;
-    isMoving?: boolean;
-  };
-};
--- a/app/src/lib/graph-templates/grid.ts
+++ b/app/src/lib/graph-templates/grid.ts
@@ -1,4 +1,4 @@
-import type { Graph } from "@nodes/types";
+import type { Graph } from "@nodarium/types";

 export function grid(width: number, height: number) {

@@ -16,9 +16,6 @@ export function grid(width: number, height: number) {

    graph.nodes.push({
      id: i,
-      tmp: {
-        visible: false,
-      },
      position: [x * 30, y * 40],
      props: i == 0 ? { value: 0 } : { op_type: 0, a: 1, b: 0.05 },
      type: i == 0 ? "max/plantarium/float" : "max/plantarium/math",
@@ -29,9 +26,6 @@ export function grid(width: number, height: number) {

  graph.nodes.push({
    id: amount,
-    tmp: {
-      visible: false,
-    },
    position: [width * 30, (height - 1) * 40],
    type: "max/plantarium/output",
    props: {},
--- a/app/src/lib/graph-templates/tree.ts
+++ b/app/src/lib/graph-templates/tree.ts
@@ -1,8 +1,8 @@
-import type { Graph, Node } from "@nodes/types";
+import type { Graph, SerializedNode } from "@nodarium/types";

 export function tree(depth: number): Graph {

-  const nodes: Node[] = [
+  const nodes: SerializedNode[] = [
    {
      id: 0,
      type: "max/plantarium/output",
--- a/app/src/lib/node-registry.ts
+++ b/app/src/lib/node-registry.ts
@@ -1,4 +1,4 @@
-import { createWasmWrapper } from "@nodes/utils";
+import { createWasmWrapper } from "@nodarium/utils";
 import fs from "fs/promises";
 import path from "path";

--- a/app/src/lib/node-store/BreadCrumbs.svelte
+++ b/app/src/lib/node-store/BreadCrumbs.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Select } from "@nodes/ui";
+  import { Select } from "@nodarium/ui";
  import type { Writable } from "svelte/store";

  let activeStore = 0;
--- a/app/src/lib/node-store/DraggableNode.svelte
+++ b/app/src/lib/node-store/DraggableNode.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
  import NodeHtml from "$lib/graph-interface/node/NodeHTML.svelte";
-  import type { NodeDefinition } from "@nodes/types";
+  import type { SerializedNode } from "@nodarium/types";

-  export let node: NodeDefinition;
+  const { node }: { node: SerializedNode } = $props();

-  let dragging = false;
+  let dragging = $state(false);

-  let nodeData = {
+  let nodeData = $state({
    id: 0,
    type: node?.id,
    position: [0, 0] as [number, number],
@@ -14,14 +14,14 @@
    tmp: {
      type: node,
    },
-  };
+  });

  function handleDragStart(e: DragEvent) {
    dragging = true;
    const box = (e?.target as HTMLElement)?.getBoundingClientRect();
    if (e.dataTransfer === null) return;
    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("data/node-id", node.id);
+    e.dataTransfer.setData("data/node-id", node.id.toString());
    if (nodeData.props) {
      e.dataTransfer.setData("data/node-props", JSON.stringify(nodeData.props));
    }
@@ -38,13 +38,13 @@

 <div class="node-wrapper" class:dragging>
  <div
-    on:dragend={() => {
+    ondragend={() => {
      dragging = false;
    }}
    draggable={true}
    role="button"
    tabindex="0"
-    on:dragstart={handleDragStart}
+    ondragstart={handleDragStart}
  >
    <NodeHtml inView={true} position={"relative"} z={5} bind:node={nodeData} />
  </div>
--- a/app/src/lib/node-store/NodeStore.svelte
+++ b/app/src/lib/node-store/NodeStore.svelte
@@ -2,7 +2,7 @@
  import { writable } from "svelte/store";
  import BreadCrumbs from "./BreadCrumbs.svelte";
  import DraggableNode from "./DraggableNode.svelte";
-  import type { RemoteNodeRegistry } from "@nodes/registry";
+  import type { RemoteNodeRegistry } from "@nodarium/registry";

  export let registry: RemoteNodeRegistry;

--- a/app/src/lib/node-store/Spinner.svelte
+++ b/app/src/lib/node-store/Spinner.svelte
@@ -1,6 +1,3 @@
-<script lang="ts">
-</script>
-
 <span class="spinner"></span>

 <style>
--- a/app/src/lib/performance/PerformanceViewer.svelte
+++ b/app/src/lib/performance/PerformanceViewer.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
  import Monitor from "./Monitor.svelte";
  import { humanizeNumber } from "$lib/helpers";
-  import { Checkbox } from "@nodes/ui";
+  import { Checkbox } from "@nodarium/ui";
  import localStore from "$lib/helpers/localStore";
-  import { type PerformanceData } from "@nodes/utils";
+  import { type PerformanceData } from "@nodarium/utils";
  import BarSplit from "./BarSplit.svelte";

  export let data: PerformanceData;
--- a/app/src/lib/performance/SmallPerformanceViewer.svelte
+++ b/app/src/lib/performance/SmallPerformanceViewer.svelte
@@ -2,7 +2,7 @@
  import { humanizeDuration, humanizeNumber } from "$lib/helpers";
  import localStore from "$lib/helpers/localStore";
  import SmallGraph from "./SmallGraph.svelte";
-  import type { PerformanceData, PerformanceStore } from "@nodes/utils";
+  import type { PerformanceData, PerformanceStore } from "@nodarium/utils";

  export let store: PerformanceStore;

@@ -25,7 +25,10 @@
 <div class="wrapper">
  <table>
    <tbody>
-      <tr on:click={() => ($open.runtime = !$open.runtime)}>
+      <tr
+        style="cursor:pointer;"
+        on:click={() => ($open.runtime = !$open.runtime)}
+      >
        <td>{$open.runtime ? "-" : "+"} runtime </td>
        <td>{humanizeDuration(runtime || 1000)}</td>
      </tr>
@@ -37,7 +40,7 @@
        </tr>
      {/if}

-      <tr on:click={() => ($open.fps = !$open.fps)}>
+      <tr style="cursor:pointer;" on:click={() => ($open.fps = !$open.fps)}>
        <td>{$open.fps ? "-" : "+"} fps </td>
        <td>
          {Math.floor(fps[fps.length - 1])}fps
@@ -74,9 +77,6 @@
    border: solid thin var(--outline);
    border-collapse: collapse;
  }
-  tr {
-    cursor: pointer;
-  }
  td {
    padding: 4px;
    padding-inline: 8px;
--- a/app/src/lib/result-viewer/Viewer.svelte
+++ b/app/src/lib/result-viewer/Viewer.svelte
@@ -2,8 +2,8 @@
  import { Canvas } from "@threlte/core";
  import Scene from "./Scene.svelte";
  import { Vector3 } from "three";
-  import { decodeFloat, splitNestedArray } from "@nodes/utils";
-  import type { PerformanceStore } from "@nodes/utils";
+  import { decodeFloat, splitNestedArray } from "@nodarium/utils";
+  import type { PerformanceStore } from "@nodarium/utils";
  import { appSettings } from "$lib/settings/app-settings.svelte";
  import SmallPerformanceViewer from "$lib/performance/SmallPerformanceViewer.svelte";
  import { MeshMatcapMaterial, TextureLoader, type Group } from "three";
--- a/app/src/lib/result-viewer/geometryPool.ts
+++ b/app/src/lib/result-viewer/geometryPool.ts
@@ -1,4 +1,4 @@
-import { fastHashArrayBuffer } from "@nodes/utils";
+import { fastHashArrayBuffer } from "@nodarium/utils";
 import {
  BufferAttribute,
  BufferGeometry,
@@ -206,19 +206,16 @@ export function createInstancedGeometryPool(
      existingInstance &&
      instanceCount > existingInstance.geometry.userData.count
    ) {
-      console.log("recreating instance");
      scene.remove(existingInstance);
      instances.splice(instances.indexOf(existingInstance), 1);
      existingInstance = new InstancedMesh(geometry, material, instanceCount);
      scene.add(existingInstance);
      instances.push(existingInstance);
    } else if (!existingInstance) {
-      console.log("creating instance");
      existingInstance = new InstancedMesh(geometry, material, instanceCount);
      scene.add(existingInstance);
      instances.push(existingInstance);
    } else {
-      console.log("updating instance");
      existingInstance.count = instanceCount;
    }

--- a/app/src/lib/result-viewer/updateGeometries.ts
+++ b/app/src/lib/result-viewer/updateGeometries.ts
--- a/app/src/lib/runtime/remote-runtime-executor.ts
+++ b/app/src/lib/runtime/remote-runtime-executor.ts
@@ -1,4 +1,4 @@
-import type { Graph, RuntimeExecutor } from "@nodes/types";
+import type { Graph, RuntimeExecutor } from "@nodarium/types";

 export class RemoteRuntimeExecutor implements RuntimeExecutor {

--- a/app/src/lib/runtime/runtime-executor-cache.ts
+++ b/app/src/lib/runtime/runtime-executor-cache.ts
@@ -1,4 +1,4 @@
-import { type SyncCache } from "@nodes/types";
+import { type SyncCache } from "@nodarium/types";

 export class MemoryRuntimeCache implements SyncCache {

--- a/app/src/lib/runtime/runtime-executor.ts
+++ b/app/src/lib/runtime/runtime-executor.ts
@@ -1,22 +1,22 @@
 import type {
  Graph,
-  Node,
  NodeDefinition,
  NodeInput,
  NodeRegistry,
  RuntimeExecutor,
  SyncCache,
-} from "@nodes/types";
+} from "@nodarium/types";
 import {
  concatEncodedArrays,
  createLogger,
  encodeFloat,
  fastHashArrayBuffer,
  type PerformanceStore,
-} from "@nodes/utils";
+} from "@nodarium/utils";
+import type { RuntimeNode } from "./types";

 const log = createLogger("runtime-executor");
-// log.mute();
+log.mute();

 function getValue(input: NodeInput, value?: unknown) {
  if (value === undefined && "value" in input) {
@@ -58,14 +58,16 @@ function getValue(input: NodeInput, value?: unknown) {
 export class MemoryRuntimeExecutor implements RuntimeExecutor {
  private definitionMap: Map<string, NodeDefinition> = new Map();

-  private randomSeed = Math.floor(Math.random() * 100000000);
+  private seed = Math.floor(Math.random() * 100000000);

  perf?: PerformanceStore;

  constructor(
    private registry: NodeRegistry,
    private cache?: SyncCache<Int32Array>,
-  ) {}
+  ) {
+    this.cache = undefined;
+  }

  private async getNodeDefinitions(graph: Graph) {
    if (this.registry.status !== "ready") {
@@ -90,18 +92,27 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
    // First, lets check if all nodes have a definition
    this.definitionMap = await this.getNodeDefinitions(graph);

-    const outputNode = graph.nodes.find((node) =>
+    const graphNodes = graph.nodes.map(node => {
+      const n = node as RuntimeNode;
+      n.state = {
+        depth: 0,
+        children: [],
+        parents: [],
+        inputNodes: {},
+      }
+      return n
+    })
+
+
+    const outputNode = graphNodes.find((node) =>
      node.type.endsWith("/output"),
-    ) as Node;
+    );
    if (!outputNode) {
      throw new Error("No output node found");
    }

-    outputNode.tmp = outputNode.tmp || {};
-    outputNode.tmp.depth = 0;
-
-    const nodeMap = new Map<number, Node>(
-      graph.nodes.map((node) => [node.id, node]),
+    const nodeMap = new Map(
+      graphNodes.map((node) => [node.id, node]),
    );

    // loop through all edges and assign the parent and child nodes to each node
@@ -110,14 +121,9 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
      const parent = nodeMap.get(parentId);
      const child = nodeMap.get(childId);
      if (parent && child) {
-        parent.tmp = parent.tmp || {};
-        parent.tmp.children = parent.tmp.children || [];
-        parent.tmp.children.push(child);
-        child.tmp = child.tmp || {};
-        child.tmp.parents = child.tmp.parents || [];
-        child.tmp.parents.push(parent);
-        child.tmp.inputNodes = child.tmp.inputNodes || {};
-        child.tmp.inputNodes[childInput] = parent;
+        parent.state.children.push(child);
+        child.state.parents.push(parent);
+        child.state.inputNodes[childInput] = parent;
      }
    }

@@ -128,20 +134,10 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
    while (stack.length) {
      const node = stack.pop();
      if (!node) continue;
-      node.tmp = node.tmp || {};
-      if (node?.tmp?.depth === undefined) {
-        node.tmp.depth = 0;
-      }
-      if (node?.tmp?.parents !== undefined) {
-        for (const parent of node.tmp.parents) {
-          parent.tmp = parent.tmp || {};
-          if (parent.tmp?.depth === undefined) {
-            parent.tmp.depth = node.tmp.depth + 1;
-            stack.push(parent);
-          } else {
-            parent.tmp.depth = Math.max(parent.tmp.depth, node.tmp.depth + 1);
-          }
-        }
+      for (const parent of node.state.parents) {
+        parent.state = parent.state || {};
+        parent.state.depth = node.state.depth + 1;
+        stack.push(parent);
      }
      nodes.push(node);
    }
@@ -173,16 +169,20 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {

    // we execute the nodes from the bottom up
    const sortedNodes = nodes.sort(
-      (a, b) => (b.tmp?.depth || 0) - (a.tmp?.depth || 0),
+      (a, b) => (b.state?.depth || 0) - (a.state?.depth || 0),
    );

    // here we store the intermediate results of the nodes
    const results: Record<string, Int32Array> = {};

+    if (settings["randomSeed"]) {
+      this.seed = Math.floor(Math.random() * 100000000);
+    }
+
    for (const node of sortedNodes) {
      const node_type = this.definitionMap.get(node.type)!;

-      if (!node_type || !node.tmp || !node_type.execute) {
+      if (!node_type || !node.state || !node_type.execute) {
        log.warn(`Node ${node.id} has no definition`);
        continue;
      }
@@ -193,11 +193,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
      const inputs = Object.entries(node_type.inputs || {}).map(
        ([key, input]) => {
          if (input.type === "seed") {
-            if (settings["randomSeed"] === true) {
-              return Math.floor(Math.random() * 100000000);
-            } else {
-              return this.randomSeed;
-            }
+            return this.seed;
          }

          // If the input is linked to a setting, we use that value
@@ -206,7 +202,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
          }

          // check if the input is connected to another node
-          const inputNode = node.tmp?.inputNodes?.[key];
+          const inputNode = node.state.inputNodes[key];
          if (inputNode) {
            if (results[inputNode.id] === undefined) {
              throw new Error(
--- a/app/src/lib/runtime/types.ts
+++ b/app/src/lib/runtime/types.ts
@@ -0,0 +1,10 @@
+import type { SerializedNode } from "@nodarium/types";
+
+type RuntimeState = {
+  depth: number
+  parents: RuntimeNode[],
+  children: RuntimeNode[],
+  inputNodes: Record<string, RuntimeNode>
+}
+
+export type RuntimeNode = SerializedNode & { state: RuntimeState }
--- a/app/src/lib/runtime/worker-runtime-executor-backend.ts
+++ b/app/src/lib/runtime/worker-runtime-executor-backend.ts
@@ -1,13 +1,12 @@
 import { MemoryRuntimeExecutor } from "./runtime-executor";
-import { RemoteNodeRegistry, IndexDBCache } from "@nodes/registry";
-import type { Graph } from "@nodes/types";
-import { createPerformanceStore } from "@nodes/utils";
-import { MemoryRuntimeCache } from "./runtime-executor-cache";
+import { RemoteNodeRegistry, IndexDBCache } from "@nodarium/registry";
+import type { Graph } from "@nodarium/types";
+import { createPerformanceStore } from "@nodarium/utils";

-const cache = new MemoryRuntimeCache();
 const indexDbCache = new IndexDBCache("node-registry");
 const nodeRegistry = new RemoteNodeRegistry("", indexDbCache);
-const executor = new MemoryRuntimeExecutor(nodeRegistry, cache);
+
+const executor = new MemoryRuntimeExecutor(nodeRegistry);

 const performanceStore = createPerformanceStore();
 executor.perf = performanceStore;
--- a/app/src/lib/runtime/worker-runtime-executor.ts
+++ b/app/src/lib/runtime/worker-runtime-executor.ts
@@ -1,5 +1,5 @@
 /// <reference types="vite-plugin-comlink/client" />
-import type { Graph, RuntimeExecutor } from "@nodes/types";
+import type { Graph, RuntimeExecutor } from "@nodarium/types";


 export class WorkerRuntimeExecutor implements RuntimeExecutor {
--- a/app/src/lib/settings/NestedSettings.svelte
+++ b/app/src/lib/settings/NestedSettings.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
  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 { NodeInput } from "@nodarium/types";
+  import Input from "@nodarium/ui";

-  type Button = { type: "button"; label?: string };
+  type Button = { type: "button"; callback: () => void; label?: string };

  type InputType = NodeInput | Button;

@@ -99,7 +99,7 @@
      Array.isArray((node as any).options) &&
      typeof internalValue === "number"
    ) {
-      value[key] = (node as any).options[internalValue] as any;
+      value[key] = (node as any)?.options?.[internalValue] as any;
    } else {
      value[key] = internalValue as any;
    }
@@ -110,11 +110,13 @@
  <!-- Leaf input -->
  <div class="input input-{type[key].type}" class:first-level={depth === 1}>
    {#if type[key].type === "button"}
-      <button onclick={() => type[key].callback()}>
+      <button onclick={() => "callback" in type[key] && type[key].callback()}>
        {type[key].label || key}
      </button>
    {:else}
-      <label for={id}>{type[key].label || key}</label>
+      {#if type[key].label !== ""}
+        <label for={id}>{type[key].label || key}</label>
+      {/if}
      <Input {id} input={type[key]} bind:value={internalValue} />
    {/if}
  </div>
@@ -194,6 +196,10 @@
    padding-bottom: 1px;
  }

+  button {
+    cursor: pointer;
+  }
+
  hr {
    position: absolute;
    margin: 0;
--- a/app/src/lib/settings/app-settings.svelte.ts
+++ b/app/src/lib/settings/app-settings.svelte.ts
@@ -1,6 +1,4 @@
 import { localState } from "$lib/helpers/localState.svelte";
-import type { NodeInput } from "@nodes/types";
-import type { SettingsType } from ".";

 const themes = [
  "dark",
@@ -10,7 +8,7 @@ const themes = [
  "high-contrast",
  "nord",
  "dracula",
-];
+] as const;

 export const AppSettingTypes = {
  theme: {
@@ -49,11 +47,6 @@ export const AppSettingTypes = {
  },
  debug: {
    title: "Debug",
-    amount: {
-      type: "number",
-      label: "Amount",
-      value: 4,
-    },
    wireframe: {
      type: "boolean",
      label: "Wireframe",
@@ -89,6 +82,11 @@ export const AppSettingTypes = {
      label: "Show Stem Lines",
      value: false,
    },
+    showGraphJson: {
+      type: "boolean",
+      label: "Show Graph Source",
+      value: false,
+    },
    stressTest: {
      title: "Stress Test",
      amount: {
@@ -119,32 +117,23 @@ export const AppSettingTypes = {
      },
    },
  },
-} as const satisfies SettingsType;
+} as const;

-type IsInputDefinition<T> = T extends NodeInput ? T : never;
-type HasTitle = { title: string };
+type SettingsToStore<T> =
+  T extends { value: infer V }
+  ? V extends readonly string[]
+  ? V[number]
+  : V
+  : T extends any[]
+  ? {}
+  : T extends object
+  ? {
+    [K in keyof T as T[K] extends object ? K : never]:
+    SettingsToStore<T[K]>
+  }
+  : never;

-type Widen<T> = T extends boolean
-  ? boolean
-  : T extends number
-    ? number
-    : T extends string
-      ? string
-      : T;
-
-type ExtractSettingsValues<T> = {
-  -readonly [K in keyof T]: T[K] extends HasTitle
-    ? ExtractSettingsValues<Omit<T[K], "title">>
-    : T[K] extends IsInputDefinition<T[K]>
-      ? T[K] extends { value: infer V }
-        ? Widen<V>
-        : never
-      : T[K] extends Record<string, any>
-        ? ExtractSettingsValues<T[K]>
-        : never;
-};
-
-export function settingsToStore<T>(settings: T): ExtractSettingsValues<T> {
+export function settingsToStore<T>(settings: T): SettingsToStore<T> {
  const result = {} as any;
  for (const key in settings) {
    const value = settings[key];
--- a/app/src/lib/settings/index.ts
+++ b/app/src/lib/settings/index.ts
@@ -1,4 +1,4 @@
-import type { NodeInput } from "@nodes/types";
+import type { NodeInput } from "@nodarium/types";

 type Button = { type: "button"; label?: string };

--- a/app/src/lib/sidebar/Sidebar.svelte
+++ b/app/src/lib/sidebar/Sidebar.svelte
@@ -116,7 +116,7 @@
    align-items: center;
    border-bottom: solid thin var(--outline);
    border-left: solid thin var(--outline);
-    background: var(--layer-0);
+    background: var(--layer-1);
  }

  .tabs > button > span {
@@ -124,7 +124,7 @@
  }

  .tabs > button.active {
-    background: var(--layer-1);
+    background: var(--layer-2);
  }

  .tabs > button.active span {
--- a/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
+++ b/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-  import type { Node, NodeInput } from "@nodes/types";
+  import type { NodeInstance, NodeInput } from "@nodarium/types";
  import NestedSettings from "$lib/settings/NestedSettings.svelte";
  import type { GraphManager } from "$lib/graph-interface/graph-manager.svelte";

  type Props = {
    manager: GraphManager;
-    node: Node;
+    node: NodeInstance;
  };

-  const { manager, node }: Props = $props();
+  const { manager, node = $bindable() }: Props = $props();

-  const nodeDefinition = filterInputs(node.tmp?.type?.inputs);
  function filterInputs(inputs?: Record<string, NodeInput>) {
    const _inputs = $state.snapshot(inputs);
    return Object.fromEntries(
@@ -20,18 +19,19 @@
        })
        .map(([key, value]) => {
          //@ts-ignore
-          value.__node_type = node?.tmp?.type.id;
+          value.__node_type = node.state?.type.id;
          //@ts-ignore
          value.__node_input = key;
          return [key, value];
        }),
    );
  }
+  const nodeDefinition = filterInputs(node.state?.type?.inputs);

  type Store = Record<string, number | number[]>;
  let store = $state<Store>(createStore(node?.props, nodeDefinition));
  function createStore(
-    props: Node["props"],
+    props: NodeInstance["props"],
    inputs: Record<string, NodeInput>,
  ): Store {
    const store: Store = {};
@@ -75,8 +75,12 @@
  });
 </script>

-<NestedSettings
-  id="activeNodeSettings"
-  bind:value={store}
-  type={nodeDefinition}
-/>
+{#if Object.keys(nodeDefinition).length}
+  <NestedSettings
+    id="activeNodeSettings"
+    bind:value={store}
+    type={nodeDefinition}
+  />
+{:else}
+  <p class="mx-4">Node has no settings</p>
+{/if}
--- a/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
+++ b/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import type { Node } from "@nodes/types";
+  import type { NodeInstance } from "@nodarium/types";
  import type { GraphManager } from "$lib/graph-interface/graph-manager.svelte";
  import ActiveNodeSelected from "./ActiveNodeSelected.svelte";

  type Props = {
    manager: GraphManager;
-    node: Node | undefined;
+    node: NodeInstance | undefined;
  };

  const { manager, node }: Props = $props();
--- a/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
+++ b/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import localStore from "$lib/helpers/localStore";
-  import { Integer } from "@nodes/ui";
+  import { Integer } from "@nodarium/ui";
  import { writable } from "svelte/store";
  import { humanizeDuration } from "$lib/helpers";
  import Monitor from "$lib/performance/Monitor.svelte";
--- a/app/src/lib/sidebar/panels/GraphSource.svelte
+++ b/app/src/lib/sidebar/panels/GraphSource.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Graph } from "$lib/types";
+
+  const { graph }: { graph: Graph } = $props();
+
+  function convert(g: Graph): string {
+    return JSON.stringify(
+      {
+        ...g,
+        nodes: g.nodes.map((n: any) => ({ ...n, tmp: undefined })),
+      },
+      null,
+      2,
+    );
+  }
+</script>
+
+<pre>
+  {convert(graph)}
+</pre>
--- a/app/src/lib/sidebar/panels/Keymap.svelte
+++ b/app/src/lib/sidebar/panels/Keymap.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import type { createKeyMap } from "$lib/helpers/createKeyMap";
-  import { ShortCut } from "@nodes/ui";
+  import { ShortCut } from "@nodarium/ui";
  import { get } from "svelte/store";

  type Props = {
@@ -11,7 +11,6 @@
  };

  let { keymaps }: Props = $props();
-  console.log({ keymaps });
 </script>

 <table class="wrapper">
--- a/app/src/lib/types.ts
+++ b/app/src/lib/types.ts
@@ -1,8 +1,6 @@
 import type {
  Graph,
-  Node as NodeType,
  NodeDefinition,
  NodeInput,
-  RuntimeExecutor,
-} from "@nodes/types";
+} from "@nodarium/types";
 export type { Graph, NodeDefinition, NodeInput };
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import "@nodes/ui/app.css";
+  import "@nodarium/ui/app.css";
  import "virtual:uno.css";
  import "@unocss/reset/normalize.css";
 </script>
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -2,7 +2,7 @@
  import Grid from "$lib/grid";
  import GraphInterface from "$lib/graph-interface";
  import * as templates from "$lib/graph-templates";
-  import type { Graph, Node } from "@nodes/types";
+  import type { Graph, NodeInstance } from "@nodarium/types";
  import Viewer from "$lib/result-viewer/Viewer.svelte";
  import {
    appSettings,
@@ -23,10 +23,11 @@
    WorkerRuntimeExecutor,
    MemoryRuntimeExecutor,
  } from "$lib/runtime";
-  import { IndexDBCache, RemoteNodeRegistry } from "@nodes/registry";
-  import { createPerformanceStore } from "@nodes/utils";
+  import { IndexDBCache, RemoteNodeRegistry } from "@nodarium/registry";
+  import { createPerformanceStore } from "@nodarium/utils";
  import BenchmarkPanel from "$lib/sidebar/panels/BenchmarkPanel.svelte";
  import { debounceAsyncFunction } from "$lib/helpers";
+  import GraphSource from "$lib/sidebar/panels/GraphSource.svelte";

  let performanceStore = createPerformanceStore();

@@ -41,7 +42,7 @@
    appSettings.value.debug.useWorker ? workerRuntime : memoryRuntime,
  );

-  let activeNode = $state<Node | undefined>(undefined);
+  let activeNode = $state<NodeInstance | undefined>(undefined);
  let scene = $state<Group>(null!);

  let graph = $state(
@@ -49,6 +50,9 @@
      ? JSON.parse(localStorage.getItem("graph")!)
      : templates.defaultPlant,
  );
+  function handleSave(graph: Graph) {
+    localStorage.setItem("graph", JSON.stringify(graph));
+  }

  let graphInterface = $state<ReturnType<typeof GraphInterface>>(null!);
  let viewerComponent = $state<ReturnType<typeof Viewer>>();
@@ -65,7 +69,7 @@
    {
      key: "r",
      description: "Regenerate the plant model",
-      callback: randomGenerate,
+      callback: () => randomGenerate(),
    },
  ]);
  let graphSettings = $state<Record<string, any>>({});
@@ -85,69 +89,68 @@
  });

  let runIndex = 0;
-  const handleUpdate = debounceAsyncFunction(
-    async (g: Graph, s: Record<string, any> = graphSettings) => {
-      runIndex++;
-      performanceStore.startRun();
-      try {
-        let a = performance.now();
-        const graphResult = await runtime.execute(
-          $state.snapshot(g),
-          $state.snapshot(s),
-        );
-        let b = performance.now();

-        if (appSettings.value.debug.useWorker) {
-          let perfData = await runtime.getPerformanceData();
-          let lastRun = perfData?.at(-1);
-          if (lastRun?.total) {
-            lastRun.runtime = lastRun.total;
-            delete lastRun.total;
-            performanceStore.mergeData(lastRun);
-            performanceStore.addPoint(
-              "worker-transfer",
-              b - a - lastRun.runtime[0],
-            );
-          }
+  async function update(
+    g: Graph,
+    s: Record<string, any> = $state.snapshot(graphSettings),
+  ) {
+    runIndex++;
+    performanceStore.startRun();
+    try {
+      let a = performance.now();
+      const graphResult = await runtime.execute(g, s);
+      let b = performance.now();
+
+      if (appSettings.value.debug.useWorker) {
+        let perfData = await runtime.getPerformanceData();
+        let lastRun = perfData?.at(-1);
+        if (lastRun?.total) {
+          lastRun.runtime = lastRun.total;
+          delete lastRun.total;
+          performanceStore.mergeData(lastRun);
+          performanceStore.addPoint(
+            "worker-transfer",
+            b - a - lastRun.runtime[0],
+          );
        }
-        viewerComponent?.update(graphResult);
-      } catch (error) {
-        console.log("errors", error);
-      } finally {
-        performanceStore.stopRun();
      }
-    },
-  );
+      viewerComponent?.update(graphResult);
+    } catch (error) {
+      console.log("errors", error);
+    } finally {
+      performanceStore.stopRun();
+    }
+  }
+
+  const handleUpdate = debounceAsyncFunction(update);

  $effect(() => {
    //@ts-ignore
    AppSettingTypes.debug.stressTest.loadGrid.callback = () => {
-      graph = templates.grid(
-        appSettings.value.debug.amount.value,
-        appSettings.value.debug.amount.value,
+      manager.load(
+        templates.grid(
+          appSettings.value.debug.stressTest.amount,
+          appSettings.value.debug.stressTest.amount,
+        ),
      );
    };
    //@ts-ignore
    AppSettingTypes.debug.stressTest.loadTree.callback = () => {
-      graph = templates.tree(appSettings.value.debug.amount.value);
+      manager.load(templates.tree(appSettings.value.debug.stressTest.amount));
    };
    //@ts-ignore
    AppSettingTypes.debug.stressTest.lottaFaces.callback = () => {
-      graph = templates.lottaFaces;
+      manager.load(templates.lottaFaces as unknown as Graph);
    };
    //@ts-ignore
    AppSettingTypes.debug.stressTest.lottaNodes.callback = () => {
-      graph = templates.lottaNodes;
+      manager.load(templates.lottaNodes as unknown as Graph);
    };
    //@ts-ignore
    AppSettingTypes.debug.stressTest.lottaNodesAndFaces.callback = () => {
-      graph = templates.lottaNodesAndFaces;
+      manager.load(templates.lottaNodesAndFaces as unknown as Graph);
    };
  });
-
-  function handleSave(graph: Graph) {
-    localStorage.setItem("graph", JSON.stringify(graph));
-  }
 </script>

 <svelte:document onkeydown={applicationKeymap.handleKeyboardEvent} />
@@ -193,7 +196,7 @@
          <Keymap
            keymaps={[
              { keymap: applicationKeymap, title: "Application" },
-              { keymap: graphInterface.keymap, title: "Node-Editor" },
+              { keymap: graphInterface?.keymap, title: "Node-Editor" },
            ]}
          />
        </Panel>
@@ -219,6 +222,14 @@
            <PerformanceViewer data={$performanceStore} />
          {/if}
        </Panel>
+        <Panel
+          id="graph-source"
+          title="Graph Source"
+          hidden={!appSettings.value.debug.showGraphJson}
+          icon="i-tabler-code"
+        >
+          <GraphSource {graph} />
+        </Panel>
        <Panel
          id="benchmark"
          title="Benchmark"
--- a/package.json
+++ b/package.json
@@ -8,5 +8,5 @@
    "build:deploy": "pnpm build",
    "dev": "pnpm -r --filter 'app' --filter './packages/node-registry' dev"
  },
-  "packageManager": "pnpm@10.23.0"
+  "packageManager": "pnpm@10.24.0"
 }
--- a/packages/registry/package.json
+++ b/packages/registry/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@nodes/registry",
+  "name": "@nodarium/registry",
  "version": "0.0.0",
  "description": "",
  "main": "src/index.ts",
@@ -10,8 +10,8 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
-    "@nodes/types": "link:../types",
-    "@nodes/utils": "link:../utils",
+    "@nodarium/types": "link:../types",
+    "@nodarium/utils": "link:../utils",
    "idb": "^8.0.3"
  }
 }
--- a/packages/registry/src/node-registry-cache.ts
+++ b/packages/registry/src/node-registry-cache.ts
@@ -1,4 +1,4 @@
-import type { AsyncCache } from '@nodes/types';
+import type { AsyncCache } from '@nodarium/types';
 import { openDB, type IDBPDatabase } from 'idb';

 export class IndexDBCache implements AsyncCache<ArrayBuffer> {
--- a/packages/registry/src/node-registry-client.ts
+++ b/packages/registry/src/node-registry-client.ts
@@ -3,11 +3,11 @@ import {
  type AsyncCache,
  type NodeDefinition,
  type NodeRegistry,
-} from "@nodes/types";
-import { createLogger, createWasmWrapper } from "@nodes/utils";
+} from "@nodarium/types";
+import { createLogger, createWasmWrapper } from "@nodarium/utils";

 const log = createLogger("node-registry");
-// log.mute();
+log.mute();

 export class RemoteNodeRegistry implements NodeRegistry {
  status: "loading" | "ready" | "error" = "loading";
@@ -37,7 +37,7 @@ export class RemoteNodeRegistry implements NodeRegistry {
  constructor(
    private url: string,
    private cache?: AsyncCache<ArrayBuffer>,
-  ) {}
+  ) { }

  async fetchUsers() {
    return this.fetchJson(`nodes/users.json`);
@@ -56,17 +56,17 @@ export class RemoteNodeRegistry implements NodeRegistry {
  }

  private async fetchNodeWasm(nodeId: `${string}/${string}/${string}`) {
-    const cachedNode = this.cache?.get(nodeId);
-    if(cachedNode){
+    const cachedNode = await this.cache?.get(nodeId);
+    if (cachedNode) {
      return cachedNode;
    }

-    const node = this.fetchArrayBuffer(`nodes/${nodeId}.wasm`);
-    if (node) {
-      return node;
+    const node = await this.fetchArrayBuffer(`nodes/${nodeId}.wasm`);
+    if (!node) {
+      throw new Error(`Failed to load node wasm ${nodeId}`);
    }

-    throw new Error(`Failed to load node wasm ${nodeId}`);
+    return node;
  }

  async load(nodeIds: `${string}/${string}/${string}`[]) {
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@nodes/types",
+  "name": "@nodarium/types",
  "version": "0.0.0",
  "description": "",
  "main": "src/index.ts",
--- a/packages/types/src/components.ts
+++ b/packages/types/src/components.ts
@@ -1,4 +1,4 @@
-import type { Graph, NodeDefinition, NodeType } from "./types";
+import type { Graph, NodeDefinition, NodeId } from "./types";

 export interface NodeRegistry {
  /**
@@ -13,13 +13,13 @@ export interface NodeRegistry {
   * @throws An error if the nodes could not be loaded
   * @remarks This method should be called before calling getNode or getAllNodes
   */
-  load: (nodeIds: NodeType[]) => Promise<NodeDefinition[]>;
+  load: (nodeIds: NodeId[]) => Promise<NodeDefinition[]>;
  /**
   * Get a node by id
   * @param id - The id of the node to get
   * @returns The node with the given id, or undefined if no such node exists
   */
-  getNode: (id: NodeType | string) => NodeDefinition | undefined;
+  getNode: (id: NodeId | string) => NodeDefinition | undefined;
  /**
   * Get all nodes
   * @returns An array of all nodes
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -6,10 +6,11 @@ export type {
  AsyncCache,
 } from "./components";
 export type {
-  Node,
+  SerializedNode,
+  NodeInstance,
  NodeDefinition,
  Socket,
-  NodeType,
+  NodeId,
  Edge,
  Graph,
 } from "./types";
--- a/packages/types/src/types.ts
+++ b/packages/types/src/types.ts
@@ -1,34 +1,35 @@
 import { z } from "zod";
 import { NodeInputSchema } from "./inputs";

-export const NodeTypeSchema = z
+export const NodeIdSchema = z
  .string()
  .regex(/^[^/]+\/[^/]+\/[^/]+$/, "Invalid NodeId format")
  .transform((value) => value as `${string}/${string}/${string}`);

-export type NodeType = z.infer<typeof NodeTypeSchema>;
+export type NodeId = z.infer<typeof NodeIdSchema>;

-export type Node = {
-  tmp?: {
-    depth?: number;
-    mesh?: any;
-    random?: number;
-    parents?: Node[];
-    children?: Node[];
-    inputNodes?: Record<string, Node>;
-    type?: NodeDefinition;
-    downX?: number;
-    downY?: number;
-    x?: number;
-    y?: number;
-    ref?: HTMLElement;
-    visible?: boolean;
-    isMoving?: boolean;
-  };
-} & z.infer<typeof NodeSchema>;
+export type NodeRuntimeState = {
+  depth?: number;
+  mesh?: any;
+  parents?: NodeInstance[];
+  children?: NodeInstance[];
+  inputNodes?: Record<string, NodeInstance>;
+  type?: NodeDefinition;
+  downX?: number;
+  downY?: number;
+  x?: number;
+  y?: number;
+  ref?: HTMLElement;
+  visible?: boolean;
+  isMoving?: boolean;
+};
+
+export type NodeInstance = {
+  state: NodeRuntimeState;
+} & SerializedNode;

 export const NodeDefinitionSchema = z.object({
-  id: NodeTypeSchema,
+  id: NodeIdSchema,
  inputs: z.record(z.string(), NodeInputSchema).optional(),
  outputs: z.array(z.string()).optional(),
  meta: z
@@ -41,7 +42,7 @@ export const NodeDefinitionSchema = z.object({

 export const NodeSchema = z.object({
  id: z.number(),
-  type: NodeTypeSchema,
+  type: NodeIdSchema,
  props: z
    .record(z.string(), z.union([z.number(), z.array(z.number())]))
    .optional(),
@@ -54,17 +55,20 @@ export const NodeSchema = z.object({
  position: z.tuple([z.number(), z.number()]),
 });

+
+export type SerializedNode = z.infer<typeof NodeSchema>;
+
 export type NodeDefinition = z.infer<typeof NodeDefinitionSchema> & {
  execute(input: Int32Array): Int32Array;
 };

 export type Socket = {
-  node: Node;
+  node: NodeInstance;
  index: number | string;
  position: [number, number];
 };

-export type Edge = [Node, number, Node, string];
+export type Edge = [NodeInstance, number, NodeInstance, string];

 export const GraphSchema = z.object({
  id: z.number(),
@@ -79,4 +83,4 @@ export const GraphSchema = z.object({
  edges: z.array(z.tuple([z.number(), z.number(), z.number(), z.string()])),
 });

-export type Graph = z.infer<typeof GraphSchema> & { nodes: Node[] };
+export type Graph = z.infer<typeof GraphSchema>;
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@nodes/ui",
+  "name": "@nodarium/ui",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite dev",
@@ -53,7 +53,7 @@
    "typescript": "^5.9.3",
    "vite": "^7.2.4",
    "vitest": "^4.0.13",
-    "@nodes/types": "link:../types"
+    "@nodarium/types": "link:../types"
  },
  "svelte": "./dist/index.js",
  "types": "./dist/index.d.ts",
--- a/packages/ui/src/lib/Input.svelte
+++ b/packages/ui/src/lib/Input.svelte
@@ -4,7 +4,7 @@
 	import Integer from './elements/Integer.svelte';
 	import Select from './elements/Select.svelte';

-	import type { NodeInput } from '@nodes/types';
+	import type { NodeInput } from '@nodarium/types';
 	import Vec3 from './elements/Vec3.svelte';

 	interface Props {
@@ -27,4 +27,3 @@
 {:else if input.type === 'vec3'}
 	<Vec3 {id} bind:value />
 {/if}
-
--- a/packages/ui/src/lib/ShortCut.svelte
+++ b/packages/ui/src/lib/ShortCut.svelte
@@ -1,44 +1,39 @@
 <script lang="ts">
-  interface Props {
-    ctrl?: boolean;
-    shift?: boolean;
-    alt?: boolean;
-    key: string | string[];
-  }
+	interface Props {
+		ctrl?: boolean;
+		shift?: boolean;
+		alt?: boolean;
+		key: string | string[];
+	}

-  let {
-    ctrl = false,
-    shift = false,
-    alt = false,
-    key
-  }: Props = $props();
+	let { ctrl = false, shift = false, alt = false, key }: Props = $props();
 </script>

 <div class="command">
-  {#if ctrl}
-    <span>Ctrl</span>
-  {/if}
-  {#if shift}
-    <span>Shift</span>
-  {/if}
-  {#if alt}
-    <span>Alt</span>
-  {/if}
-  {key}
+	{#if ctrl}
+		<span>Ctrl</span>
+	{/if}
+	{#if shift}
+		<span>Shift</span>
+	{/if}
+	{#if alt}
+		<span>Alt</span>
+	{/if}
+	{key}
 </div>

 <style>
-  .command {
-    background: var(--layer-2);
-    padding: 0.4em;
-    font-size: 0.8em;
-    border-radius: 0.3em;
-    white-space: nowrap;
-    width: fit-content;
-  }
+	.command {
+		background: var(--layer-2);
+		padding: 0.4em;
+		font-size: 0.8em;
+		border-radius: 0.3em;
+		white-space: nowrap;
+		width: fit-content;
+	}

-  span::after {
-    content: " +";
-    opacity: 0.5;
-  }
+	span::after {
+		content: ' +';
+		opacity: 0.5;
+	}
 </style>
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@nodes/utils",
+  "name": "@nodarium/utils",
  "version": "0.0.1",
  "description": "",
  "main": "src/index.ts",
@@ -10,7 +10,7 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
-    "@nodes/types": "link:../types"
+    "@nodarium/types": "link:../types"
  },
  "devDependencies": {
    "vite": "^7.2.4",
--- a/packages/utils/src/wasm-wrapper.ts
+++ b/packages/utils/src/wasm-wrapper.ts
@@ -1,5 +1,5 @@
 //@ts-nocheck
-import { NodeDefinition } from "@nodes/types";
+import { NodeDefinition } from "@nodarium/types";

 const cachedTextDecoder = new TextDecoder("utf-8", {
  ignoreBOM: true,
@@ -10,16 +10,16 @@ const cachedTextEncoder = new TextEncoder();
 const encodeString =
  typeof cachedTextEncoder.encodeInto === "function"
    ? function (arg, view) {
-        return cachedTextEncoder.encodeInto(arg, view);
-      }
+      return cachedTextEncoder.encodeInto(arg, view);
+    }
    : function (arg, view) {
-        const buf = cachedTextEncoder.encode(arg);
-        view.set(buf);
-        return {
-          read: arg.length,
-          written: buf.length,
-        };
+      const buf = cachedTextEncoder.encode(arg);
+      view.set(buf);
+      return {
+        read: arg.length,
+        written: buf.length,
      };
+    };

 function createWrapper() {
  let wasm: any;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,13 +10,13 @@ importers:

  app:
    dependencies:
-      '@nodes/registry':
+      '@nodarium/registry':
        specifier: link:../packages/registry
        version: link:../packages/registry
-      '@nodes/ui':
+      '@nodarium/ui':
        specifier: link:../packages/ui
        version: link:../packages/ui
-      '@nodes/utils':
+      '@nodarium/utils':
        specifier: link:../packages/utils
        version: link:../packages/utils
      '@sveltejs/kit':
@@ -53,7 +53,7 @@ importers:
      '@iconify-json/tabler':
        specifier: ^1.2.23
        version: 1.2.23
-      '@nodes/types':
+      '@nodarium/types':
        specifier: link:../packages/types
        version: link:../packages/types
      '@sveltejs/adapter-static':
@@ -130,10 +130,10 @@ importers:

  packages/registry:
    dependencies:
-      '@nodes/types':
+      '@nodarium/types':
        specifier: link:../types
        version: link:../types
-      '@nodes/utils':
+      '@nodarium/utils':
        specifier: link:../utils
        version: link:../utils
      idb:
@@ -165,7 +165,7 @@ importers:
        specifier: ^9.7.0
        version: 9.7.0(@types/three@0.181.0)(svelte@5.43.14)(three@0.181.2)
    devDependencies:
-      '@nodes/types':
+      '@nodarium/types':
        specifier: link:../types
        version: link:../types
      '@storybook/addon-essentials':
@@ -240,7 +240,7 @@ importers:

  packages/utils:
    dependencies:
-      '@nodes/types':
+      '@nodarium/types':
        specifier: link:../types
        version: link:../types
    devDependencies:
Author	SHA1	Message	Date
Max Richter	7ae1fae3b9	refactor: split ui/runtime/serialized node types Closes #6	2025-12-03 19:18:56 +01:00
Max Richter	1126cf8f9f	feat: dont use custom edge geometry All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m55s Details	2025-12-03 10:33:24 +01:00
Max Richter	ef479d0557	chore: update All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 3m50s Details	2025-12-02 17:31:58 +01:00
Max Richter	a1c926c3cf	fix: better handle randomGeneration	2025-12-02 17:27:34 +01:00
Max Richter	ca8b1e15ac	chore: cleanup edge and node code All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m8s Details	2025-12-02 16:59:43 +01:00
Max Richter	4878d02705	refactor: remove unneeded random var in node	2025-12-02 16:59:29 +01:00
Max Richter	2b4c81f557	fix: make sure new nodes are reactive Closes #7	2025-12-02 16:59:11 +01:00
Max Richter	d178f812fb	refactor: move event handlers to own classes	2025-12-02 16:58:31 +01:00
Max Richter	669a2c7991	docs: remove placeholder content in readme	2025-12-02 15:20:26 +01:00
Max Richter	becd7a1eb3	fix: make sure we do not pass svelte state into comlink cant clone proxies	2025-12-02 15:20:13 +01:00
Max Richter	d140f42468	feat: better a18n for node parameters Dunno of a18n would even be possible for the node graph	2025-12-02 15:19:48 +01:00
Max Richter	be835e5cff	fix: better stroke width and color for edges	2025-12-02 15:00:41 +01:00
Max Richter	6229becfd8	fix: display add menu at correct position All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m58s Details	2025-12-01 22:39:43 +01:00
Max Richter	af944cefaa	chore: disable cache from runtime executor	2025-12-01 22:39:06 +01:00
Max Richter	a1ea56093c	fix: correctly handle node wrapper resizing All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m57s Details	2025-12-01 19:48:40 +01:00
Max Richter	1850e21810	fix: make clipboard work	2025-12-01 19:30:44 +01:00
Max Richter	7e51cc5ea1	chore: some updates All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 1m58s Details	2025-12-01 18:29:47 +01:00
Max Richter	1ea544e765	chore: rename @nodes -> @nodarium for everything All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 3m33s Details	2025-12-01 17:03:14 +01:00
Max Richter	e5658b8a7e	feat: initial auto connect nodes All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m35s Details	2025-11-26 17:27:32 +01:00
Max Richter	d3a9b3f056	fix: make node wasm loading work All checks were successful Deploy to GitHub Pages / build_site (push) Successful in 2m32s Details	2025-11-26 12:10:25 +01:00