feat: better handle node position updates

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

@@ -42,8 +42,8 @@
 </script>
 
 <T.Mesh
-  position.x={node.position[0] + 10}
+  position.x={(node.state.x ?? node.position[0]) + 10}
-  position.z={node.position[1] + height / 2}
+  position.z={(node.state.y ?? node.position[1]) + height / 2}
   position.y={0.8}
   rotation.x={-Math.PI / 2}
   bind:ref={meshRef}

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

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { Select } from "@nodarium/ui";
-  import type { Writable } from "svelte/store";
 
-  let activeStore = 0;
+  let activeStore = $state(0);
-  export let activeId: Writable<string>;
+  let { activeId }: { activeId: string } = $props();
-  $: [activeUser, activeCollection, activeNode] = $activeId.split(`/`);
+  const [activeUser, activeCollection, activeNode] = $derived(
+    activeId.split(`/`),
+  );
 </script>
 
 <div class="breadcrumbs">
@@ -12,16 +13,16 @@
     <Select id="root" options={["root"]} bind:value={activeStore}></Select>
     {#if activeCollection}
       <button
-        on:click={() => {
+        onclick={() => {
-          $activeId = activeUser;
+          activeId = activeUser;
         }}
       >
         {activeUser}
       </button>
       {#if activeNode}
         <button
-          on:click={() => {
+          onclick={() => {
-            $activeId = `${activeUser}/${activeCollection}`;
+            activeId = `${activeUser}/${activeCollection}`;
           }}
         >
           {activeCollection}

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

@@ -1,19 +1,16 @@
 <script lang="ts">
-  import { writable } from "svelte/store";
   import BreadCrumbs from "./BreadCrumbs.svelte";
   import DraggableNode from "./DraggableNode.svelte";
   import type { RemoteNodeRegistry } from "@nodarium/registry";
 
-  export let registry: RemoteNodeRegistry;
+  const { registry }: { registry: RemoteNodeRegistry } = $props();
 
-  const activeId = writable("max/plantarium");
+  let activeId = $state("max/plantarium");
   let showBreadCrumbs = false;
 
-  // const activeId = localStore<
+  const [activeUser, activeCollection, activeNode] = $derived(
-  //   `${string}` | `${string}/${string}` | `${string}/${string}/${string}`
+    activeId.split(`/`),
-  // >("nodes.store.activeId", "");
+  );
-
-  $: [activeUser, activeCollection, activeNode] = $activeId.split(`/`);
 </script>
 
 {#if showBreadCrumbs}
@@ -27,8 +24,8 @@
     {:then users}
       {#each users as user}
         <button
-          on:click={() => {
+          onclick={() => {
-            $activeId = user.id;
+            activeId = user.id;
           }}>{user.id}</button
         >
       {/each}
@@ -41,8 +38,8 @@
     {:then user}
       {#each user.collections as collection}
         <button
-          on:click={() => {
+          onclick={() => {
-            $activeId = collection.id;
+            activeId = collection.id;
           }}
         >
           {collection.id.split(`/`)[1]}