feat: update some more components to svelte 5

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

@@ -23,7 +23,7 @@
   const isSelected = $derived(graphState.selectedNodes.has(node.id));
   let strokeColor = $state(colors.selected);
   $effect(() => {
-    appSettings.theme;
+    appSettings.value.theme;
     strokeColor = isSelected
       ? colors.selected
       : isActive

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

@@ -57,7 +57,7 @@
 
   {#each parameters as [key, value], i}
     <NodeParameter
-      {node}
+      bind:node
       id={key}
       input={value}
       isLast={i == parameters.length - 1}

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

@@ -3,7 +3,7 @@
   import type { Node, Socket } from "@nodes/types";
   import { getContext } from "svelte";
 
-  const { node = $bindable<Node>() } = $props();
+  const { node }: { node: Node } = $props();
 
   const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket");
   const getSocketPosition =

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

@@ -17,7 +17,7 @@
     isLast?: boolean;
   };
 
-  const { node, input, id, isLast }: Props = $props();
+  let { node = $bindable(), input, id, isLast }: Props = $props();
 
   const inputType = node?.tmp?.type?.inputs?.[id]!;
 
@@ -87,7 +87,7 @@
         <label for={elementId}>{input.label || id}</label>
       {/if}
       {#if inputType.external !== true}
-        <NodeInput {elementId} {node} {input} {id} />
+        <NodeInput {elementId} bind:node {input} {id} />
       {/if}
     </div>