fix: some svelte 5 issues

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

@@ -9,7 +9,7 @@
     $effect(() => {
       appSettings.theme;
       circleMaterial.color = colors.edge.clone().convertSRGBToLinear();
-    })
+    });
   });
 
   const lineCache = new Map<number, BufferGeometry>();
@@ -25,23 +25,25 @@
 <script lang="ts">
   import { T } from "@threlte/core";
   import { MeshLineMaterial } from "@threlte/extras";
-  import { BufferGeometry,  MeshBasicMaterial, Vector3 } from "three";
+  import { BufferGeometry, 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";
+  import { appSettings } from "$lib/settings/app-settings.svelte";
 
   type Props = {
     from: { x: number; y: number };
     to: { x: number; y: number };
-    z:number;
+    z: number;
   };
 
   const { from, to, z }: Props = $props();
 
-  let geometry: BufferGeometry|null = $state(null);
+  let geometry: BufferGeometry | null = $state(null);
 
-  const lineColor = $derived(appSettings.theme && colors.edge.clone().convertSRGBToLinear());
+  const lineColor = $derived(
+    appSettings.theme && colors.edge.clone().convertSRGBToLinear(),
+  );
 
   let lastId: number | null = null;
 
@@ -81,8 +83,7 @@
 
     geometry = createEdgeGeometry(points);
     lineCache.set(curveId, geometry);
-  };
-
+  }
 
   $effect(() => {
     if (from || to) {
@@ -113,6 +114,6 @@
 
 {#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.0001, 0.00001)} color={lineColor} />
   </T.Mesh>
 {/if}

app/src/lib/graph-interface/edges/createEdgeGeometry.ts

@@ -6,7 +6,7 @@ export function createEdgeGeometry(points: Vector3[]) {
 
   const length = points[0].distanceTo(points[points.length - 1]);
 
-  const startRadius = 10.5;
+  const startRadius = 8;
   const constantWidth = 2;
   const taperFraction = 0.8 / length;
 

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

@@ -1,5 +1,5 @@
 import { appSettings } from "$lib/settings/app-settings.svelte";
-import { Color } from "three";
+import { Color, LinearSRGBColorSpace } from "three";
 
 const variables = [
   "layer-0",
@@ -15,7 +15,7 @@ const variables = [
 function getColor(variable: typeof variables[number]) {
   const style = getComputedStyle(document.body.parentElement!);
   let color = style.getPropertyValue(`--${variable}`);
-  return new Color().setStyle(color);
+  return new Color().setStyle(color, LinearSRGBColorSpace);
 }
 
 export const colors = Object.fromEntries(variables.map(v => [v, getColor(v)])) as Record<typeof variables[number], Color>;
@@ -25,7 +25,8 @@ $effect.root(() => {
     if (!appSettings.theme || !("getComputedStyle" in globalThis)) return;
     const style = getComputedStyle(document.body.parentElement!);
     for (const v of variables) {
-      colors[v].setStyle(style.getPropertyValue(`--${v}`));
+      const hex = style.getPropertyValue(`--${v}`);
+      colors[v].setStyle(hex, LinearSRGBColorSpace);
     }
   });
 })

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

@@ -25,10 +25,10 @@
   $effect(() => {
     appSettings.theme;
     strokeColor = isSelected
-      ? colors.selected.clone()
+      ? colors.selected
       : isActive
-        ? colors.active.clone()
-        : colors.outline.clone();
+        ? colors.active
+        : colors.outline;
   });
 
   const updateNodePosition =

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

@@ -8,8 +8,7 @@
 
   type Props = {
     node: Node;
-
-    position?: "absolute" | "fixed";
+    position?: "absolute" | "fixed" | "relative";
     isActive?: boolean;
     isSelected?: boolean;
     inView?: boolean;
@@ -17,7 +16,7 @@
   };
 
   let {
-    node,
+    node = $bindable(),
     position = "absolute",
     isActive = false,
     isSelected = false,

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

@@ -19,8 +19,19 @@
 
   const graph = getGraphManager();
 
-  let value = $state(node?.props?.[id] ?? input.value);
+  function getDefaultValue() {
+    if (node?.props?.[id] !== undefined) return node?.props?.[id] as number;
+    if ("value" in input && input?.value !== undefined)
+      return input?.value as number;
+    if (input.type === "boolean") return 0;
+    if (input.type === "float") return 0.5;
+    if (input.type === "integer") return 0;
+    if (input.type === "select") return 0;
+    return 0;
+  }
 
+  let value = $state(getDefaultValue());
+  $inspect({ nodeId: node.type, id, value });
   $effect(() => {
     if (value !== undefined && node?.props?.[id] !== value) {
       node.props = { ...node.props, [id]: value };