feat: migrate most of graph-manager to svelte-5

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

@@ -1,38 +1,44 @@
 <script lang="ts">
   import type { Node } from "@nodes/types";
   import { getContext, onMount } from "svelte";
-  import { activeNodeId, selectedNodes } from "../graph/stores.js";
-  import { colors } from "../graph/stores";
+  import { colors, getGraphState } from "../graph/state.svelte";
   import { T } from "@threlte/core";
   import { Color, type Mesh } from "three";
   import NodeFrag from "./Node.frag";
   import NodeVert from "./Node.vert";
   import NodeHtml from "./NodeHTML.svelte";
 
-  export let node: Node;
-  export let inView = true;
-  export let z = 2;
+  const graphState = getGraphState();
 
-  $: isActive = $activeNodeId === node.id;
-  $: isSelected = !!$selectedNodes?.has(node.id);
+  type Props = {
+    node: Node;
+    inView: boolean;
+    z: number;
+  };
+  const { node, inView, z }: Props = $props();
+
+  const isActive = $derived(graphState.activeNodeId === node.id);
+  const isSelected = $derived(!!graphState.selectedNodes?.has(node.id));
 
   const updateNodePosition =
     getContext<(n: Node) => void>("updateNodePosition");
 
   const getNodeHeight = getContext<(n: string) => number>("getNodeHeight");
 
-  let meshRef: Mesh;
+  let meshRef: Mesh | undefined = $state();
 
   const height = getNodeHeight?.(node.type);
 
-  $: if (node && meshRef) {
-    node.tmp = node.tmp || {};
-    node.tmp.mesh = meshRef;
-    updateNodePosition?.(node);
-  }
+  $effect(() => {
+    if (node && meshRef) {
+      node.tmp = node.tmp || {};
+      node.tmp.mesh = meshRef;
+      updateNodePosition?.(node);
+    }
+  });
 
-  $: colorBright = $colors["layer-2"];
-  $: colorDark = $colors["layer-1"];
+  const colorBright = $colors["layer-2"];
+  const colorDark = $colors["layer-1"];
 
   onMount(() => {
     node.tmp = node.tmp || {};

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

@@ -60,7 +60,7 @@
     role="button"
     tabindex="0"
     on:mousedown={handleMouseDown}
-  />
+  ></div>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"

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

@@ -3,23 +3,33 @@
   import { getGraphManager } from "../graph/context.js";
   import { Input } from "@nodes/ui";
 
-  export let node: Node;
-  export let input: NodeInput;
-  export let id: string;
+  type Props = {
+    node: Node;
+    input: NodeInput;
+    id: string;
+    elementId?: string;
+  };
+
+  const {
+    node,
+    input,
+    id,
+    elementId = `input-${Math.random().toString(36).substring(7)}`,
+  }: Props = $props();
 
   const graph = getGraphManager();
 
-  let value = node?.props?.[id] ?? input.value;
+  let value = $state(node?.props?.[id] ?? input.value);
 
-  export let elementId: string = `input-${Math.random().toString(36).substring(7)}`;
-
-  $: if (node?.props?.[id] !== value) {
-    node.props = { ...node.props, [id]: value };
-    if (graph) {
-      graph.save();
-      graph.execute();
+  $effect(() => {
+    if (value !== undefined && node?.props?.[id] !== value) {
+      node.props = { ...node.props, [id]: value };
+      if (graph) {
+        graph.save();
+        graph.execute();
+      }
     }
-  }
+  });
 </script>
 
 <Input id="input-{elementId}" {input} bind:value />

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

@@ -6,20 +6,25 @@
   } from "@nodes/types";
   import { getContext } from "svelte";
   import { createNodePath } from "../helpers/index.js";
-  import { possibleSocketIds } from "../graph/stores.js";
   import { getGraphManager } from "../graph/context.js";
   import NodeInput from "./NodeInput.svelte";
+  import { getGraphState } from "../graph/state.svelte.js";
 
-  export let node: NodeType;
-  export let input: NodeInputType;
-  export let id: string;
-  export let isLast = false;
+  type Props = {
+    node: NodeType;
+    input: NodeInputType;
+    id: string;
+    isLast?: boolean;
+  };
+
+  const { node = $bindable(), input, id, isLast }: Props = $props();
 
   const inputType = node?.tmp?.type?.inputs?.[id]!;
 
   const socketId = `${node.id}-${id}`;
 
   const graph = getGraphManager();
+  const graphState = getGraphState();
   const graphId = graph?.id;
   const inputSockets = graph?.inputSockets;
 
@@ -75,7 +80,7 @@
   class="wrapper"
   data-node-type={node.type}
   data-node-input={id}
-  class:disabled={$possibleSocketIds && !$possibleSocketIds.has(socketId)}
+  class:disabled={!graphState.possibleSocketIds.has(socketId)}
 >
   {#key id && graphId}
     <div class="content" class:disabled={$inputSockets?.has(socketId)}>
@@ -91,17 +96,17 @@
       <div
         data-node-socket
         class="large target"
-        on:mousedown={handleMouseDown}
+        onmousedown={handleMouseDown}
         role="button"
         tabindex="0"
-      />
+      ></div>
       <div
         data-node-socket
         class="small target"
-        on:mousedown={handleMouseDown}
+        onmousedown={handleMouseDown}
         role="button"
         tabindex="0"
-      />
+      ></div>
     {/if}
   {/key}
 
@@ -185,8 +190,10 @@
     d: var(--path);
   }
 
-  :global(.hovering-sockets) .large:hover ~ svg path {
-    d: var(--hover-path);
+  :global {
+    .hovering-sockets .large:hover ~ svg path {
+      d: var(--hover-path);
+    }
   }
 
   .content.disabled {