fix: some svelte 5 issues

app/package.json

@@ -13,34 +13,34 @@
     "@nodes/registry": "link:../packages/registry",
     "@nodes/ui": "link:../packages/ui",
     "@nodes/utils": "link:../packages/utils",
-    "@sveltejs/kit": "^2.7.4",
+    "@sveltejs/kit": "^2.12.2",
     "@threlte/core": "8.0.0-next.23",
     "@threlte/extras": "9.0.0-next.33",
-    "@types/three": "^0.169.0",
-    "@unocss/reset": "^0.63.6",
-    "comlink": "^4.4.1",
+    "@types/three": "^0.171.0",
+    "@unocss/reset": "^0.65.2",
+    "comlink": "^4.4.2",
     "file-saver": "^2.0.5",
-    "idb": "^8.0.0",
+    "idb": "^8.0.1",
     "jsondiffpatch": "^0.6.0",
-    "three": "^0.170.0"
+    "three": "^0.171.0"
   },
   "devDependencies": {
-    "@iconify-json/tabler": "^1.2.7",
+    "@iconify-json/tabler": "^1.2.13",
     "@nodes/types": "link:../packages/types",
     "@sveltejs/adapter-static": "^3.0.6",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
     "@types/file-saver": "^2.0.7",
-    "@unocss/preset-icons": "^0.63.6",
-    "svelte": "^5.1.9",
-    "svelte-check": "^4.0.5",
+    "@unocss/preset-icons": "^0.65.2",
+    "svelte": "^5.14.4",
+    "svelte-check": "^4.1.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.6.3",
-    "unocss": "^0.63.6",
-    "vite": "^5.4.10",
+    "typescript": "^5.7.2",
+    "unocss": "^0.65.2",
+    "vite": "^6.0.4",
     "vite-plugin-comlink": "^5.1.0",
-    "vite-plugin-glsl": "^1.3.0",
+    "vite-plugin-glsl": "^1.3.1",
     "vite-plugin-wasm": "^3.3.0",
-    "vitest": "^2.1.4"
+    "vitest": "^2.1.8"
   }
 }

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 };

app/src/lib/node-store/DraggableNode.svelte

@@ -3,7 +3,6 @@
   import type { NodeDefinition } from "@nodes/types";
 
   export let node: NodeDefinition;
-  console.log(node);
 
   let dragging = false;
 

package.json

@@ -6,5 +6,6 @@
     "dev:nodes": "pnpm -r --parallel  --filter './nodes/**' dev",
     "build:deploy": "pnpm build && cp -r ./packages/ui/storybook-static ./app/build/ui",
     "dev": "pnpm -r --filter 'app' --filter './packages/node-registry' dev"
-  }
+  },
+  "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
 }