feat: update some more components to svelte 5

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

@@ -4,31 +4,36 @@
   import { onMount } from "svelte";
   import type { NodeType } from "@nodes/types";
 
-  export let position: [x: number, y: number] | null;
+  type Props = {
+    position: [x: number, y: number] | null;
+    graph: GraphManager;
+  };
 
-  export let graph: GraphManager;
+  let { position = $bindable(), graph }: Props = $props();
 
   let input: HTMLInputElement;
-  let value: string = "";
-  let activeNodeId: NodeType | undefined = undefined;
+  let value = $state<string>();
+  let activeNodeId = $state<NodeType>();
 
   const allNodes = graph.getNodeDefinitions();
 
   function filterNodes() {
-    return allNodes.filter((node) => node.id.includes(value));
+    return allNodes.filter((node) => node.id.includes(value ?? ""));
   }
 
-  $: nodes = value === "" ? allNodes : filterNodes();
-  $: if (nodes) {
-    if (activeNodeId === undefined) {
-      activeNodeId = nodes[0].id;
-    } else if (nodes.length) {
-      const node = nodes.find((node) => node.id === activeNodeId);
-      if (!node) {
+  const nodes = $derived(value === "" ? allNodes : filterNodes());
+  $effect(() => {
+    if (nodes) {
+      if (activeNodeId === undefined) {
         activeNodeId = nodes[0].id;
+      } else if (nodes.length) {
+        const node = nodes.find((node) => node.id === activeNodeId);
+        if (!node) {
+          activeNodeId = nodes[0].id;
+        }
       }
     }
-  }
+  });
 
   function handleKeyDown(event: KeyboardEvent) {
     event.stopImmediatePropagation();
@@ -75,7 +80,7 @@
         role="searchbox"
         placeholder="Search..."
         disabled={false}
-        on:keydown={handleKeyDown}
+        onkeydown={handleKeyDown}
         bind:value
         bind:this={input}
       />
@@ -88,7 +93,7 @@
           role="treeitem"
           tabindex="0"
           aria-selected={node.id === activeNodeId}
-          on:keydown={(event) => {
+          onkeydown={(event) => {
             if (event.key === "Enter") {
               if (position) {
                 graph.createNode({ type: node.id, position, props: {} });
@@ -96,17 +101,17 @@
               }
             }
           }}
-          on:mousedown={() => {
+          onmousedown={() => {
             if (position) {
               graph.createNode({ type: node.id, position, props: {} });
               position = null;
             }
           }}
-          on:focus={() => {
+          onfocus={() => {
             activeNodeId = node.id;
           }}
           class:selected={node.id === activeNodeId}
-          on:mouseover={() => {
+          onmouseover={() => {
             activeNodeId = node.id;
           }}
         >

app/src/lib/graph-interface/background/Background.svelte

@@ -54,8 +54,9 @@
         },
       }}
       uniforms.camPos.value={cameraPosition}
-      uniforms.backgroundColor.value={appSettings.theme && colors["layer-0"]}
-      uniforms.lineColor.value={appSettings.theme && colors["outline"]}
+      uniforms.backgroundColor.value={appSettings.value.theme &&
+        colors["layer-0"]}
+      uniforms.lineColor.value={appSettings.value.theme && colors["outline"]}
       uniforms.zoomLimits.value={[minZoom, maxZoom]}
       uniforms.dimensions.value={[width, height]}
     />

app/src/lib/graph-interface/edges/Edge.svelte

@@ -7,7 +7,7 @@
   });
   $effect.root(() => {
     $effect(() => {
-      appSettings.theme;
+      appSettings.value.theme;
       circleMaterial.color = colors.edge.clone().convertSRGBToLinear();
     });
   });
@@ -42,7 +42,7 @@
   let geometry: BufferGeometry | null = $state(null);
 
   const lineColor = $derived(
-    appSettings.theme && colors.edge.clone().convertSRGBToLinear(),
+    appSettings.value.theme && colors.edge.clone().convertSRGBToLinear(),
   );
 
   let lastId: number | null = null;
@@ -114,6 +114,9 @@
 
 {#if geometry}
   <T.Mesh position.x={from.x} position.z={from.y} position.y={0.1} {geometry}>
-    <MeshLineMaterial width={Math.max(z * 0.0001, 0.00001)} color={lineColor} />
+    <MeshLineMaterial
+      width={Math.max(z * 0.00012, 0.00003)}
+      color={lineColor}
+    />
   </T.Mesh>
 {/if}

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

@@ -19,7 +19,7 @@
   const { invalidate } = useThrelte();
 
   $effect(() => {
-    appSettings.theme;
+    appSettings.value.theme;
     invalidate();
   });
 

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

@@ -12,21 +12,23 @@ const variables = [
   "edge",
 ] as const;
 
-function getColor(variable: typeof variables[number]) {
+function getColor(variable: (typeof variables)[number]) {
   const style = getComputedStyle(document.body.parentElement!);
   let color = style.getPropertyValue(`--${variable}`);
   return new Color().setStyle(color, LinearSRGBColorSpace);
 }
 
-export const colors = Object.fromEntries(variables.map(v => [v, getColor(v)])) as Record<typeof variables[number], Color>;
+export const colors = Object.fromEntries(
+  variables.map((v) => [v, getColor(v)]),
+) as Record<(typeof variables)[number], Color>;
 
 $effect.root(() => {
   $effect(() => {
-    if (!appSettings.theme || !("getComputedStyle" in globalThis)) return;
+    if (!appSettings.value.theme || !("getComputedStyle" in globalThis)) return;
     const style = getComputedStyle(document.body.parentElement!);
     for (const v of variables) {
       const hex = style.getPropertyValue(`--${v}`);
       colors[v].setStyle(hex, LinearSRGBColorSpace);
     }
   });
-})
+});

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>