refactor: split ui/runtime/serialized node types

Closes #6

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import type { Node } from "@nodarium/types";
-  import { 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,7 +12,7 @@
   const graphState = getGraphState();
 
   type Props = {
-    node: Node;
+    node: NodeInstance;
     inView: boolean;
     z: number;
   };
@@ -35,9 +34,8 @@
   const height = graphState.getNodeHeight(node.type);
 
   $effect(() => {
-    if (!node.tmp) node.tmp = {};
-    if (meshRef && !node.tmp?.mesh) {
-      node.tmp.mesh = meshRef;
+    if (meshRef && !node.state?.mesh) {
+      node.state.mesh = meshRef;
       graphState.updateNodePosition(node);
     }
   });

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

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import type { Node } from "@nodarium/types";
+  import type { NodeInstance, SerializedNode } from "@nodarium/types";
   import NodeHeader from "./NodeHeader.svelte";
   import NodeParameter from "./NodeParameter.svelte";
-  import { onMount } from "svelte";
   import { getGraphState } from "../graph/state.svelte";
 
   let ref: HTMLDivElement;
@@ -10,7 +9,7 @@
   const graphState = getGraphState();
 
   type Props = {
-    node: Node;
+    node: SerializedNode | NodeInstance;
     position?: "absolute" | "fixed" | "relative";
     isActive?: boolean;
     isSelected?: boolean;
@@ -31,15 +30,21 @@
   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,
+        )
+      : [];
 
-  onMount(() => {
-    node.tmp = node.tmp || {};
-    node.tmp.ref = ref;
-    graphState?.updateNodePosition(node);
+  $effect(() => {
+    if ("state" in node && !node.state.ref) {
+      node.state.ref = ref;
+      graphState?.updateNodePosition(node);
+    }
   });
 </script>
 

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

@@ -1,24 +1,27 @@
 <script lang="ts">
   import { getGraphState } from "../graph/state.svelte.js";
   import { createNodePath } from "../helpers/index.js";
-  import type { Node } from "@nodarium/types";
+  import type { NodeInstance, SerializedNode } from "@nodarium/types";
 
   const graphState = getGraphState();
 
-  const { node }: { node: Node } = $props();
+  const { node }: { node: NodeInstance | SerializedNode } = $props();
 
   function handleMouseDown(event: MouseEvent) {
     event.stopPropagation();
     event.preventDefault();
-    graphState.setDownSocket?.({
-      node,
-      index: 0,
-      position: graphState.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({
@@ -29,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,

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { Node, NodeInput } from "@nodarium/types";
+  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;

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

@@ -1,14 +1,15 @@
 <script lang="ts">
   import type {
     NodeInput as NodeInputType,
-    Node as NodeType,
+    NodeInstance,
+    SerializedNode,
   } from "@nodarium/types";
   import { createNodePath } from "../helpers/index.js";
   import NodeInput from "./NodeInput.svelte";
   import { getGraphManager, getGraphState } from "../graph/state.svelte.js";
 
   type Props = {
-    node: NodeType;
+    node: NodeInstance | SerializedNode;
     input: NodeInputType;
     id: string;
     isLast?: boolean;
@@ -18,7 +19,7 @@
 
   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}`;
 
@@ -37,7 +38,7 @@
     });
   }
 
-  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;
 
@@ -83,7 +84,7 @@
       {/if}
     </div>
 
-    {#if node?.tmp?.type?.inputs?.[id]?.internal !== true}
+    {#if node?.state?.type?.inputs?.[id]?.internal !== true}
       <div data-node-socket class="large target"></div>
       <div
         data-node-socket