chore: setup linting

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

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { Select } from "@nodarium/ui";
+  import { Select } from '@nodarium/ui';
 
   let activeStore = $state(0);
   let { activeId }: { activeId: string } = $props();
   const [activeUser, activeCollection, activeNode] = $derived(
-    activeId.split(`/`),
+    activeId.split(`/`)
   );
 </script>
 
 <div class="breadcrumbs">
   {#if activeUser}
-    <Select id="root" options={["root"]} bind:value={activeStore}></Select>
+    <Select id="root" options={['root']} bind:value={activeStore}></Select>
     {#if activeCollection}
       <button
         onclick={() => {
@@ -35,7 +35,7 @@
       <span>{activeUser}</span>
     {/if}
   {:else}
-    <Select id="root" options={["root"]} bind:value={activeStore}></Select>
+    <Select id="root" options={['root']} bind:value={activeStore}></Select>
   {/if}
 </div>
 

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

@@ -1,39 +1,44 @@
 <script lang="ts">
-  import NodeHtml from "$lib/graph-interface/node/NodeHTML.svelte";
-  import type { NodeDefinition, NodeId, NodeInstance } from "@nodarium/types";
+  import NodeHtml from '$lib/graph-interface/node/NodeHTML.svelte';
+  import type { NodeDefinition, NodeId, NodeInstance } from '@nodarium/types';
+  import { onMount } from 'svelte';
 
   const { node }: { node: NodeDefinition } = $props();
 
   let dragging = $state(false);
 
-  let nodeData = $state<NodeInstance>({
-    id: 0,
-    type: node.id as unknown as NodeId,
-    position: [0, 0] as [number, number],
-    props: {},
-    state: {
-      type: node,
-    },
-  });
+  let nodeData = $state<NodeInstance>(null!);
 
   function handleDragStart(e: DragEvent) {
     dragging = true;
     const box = (e?.target as HTMLElement)?.getBoundingClientRect();
     if (e.dataTransfer === null) return;
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("data/node-id", node.id.toString());
-    if (nodeData.props) {
-      e.dataTransfer.setData("data/node-props", JSON.stringify(nodeData.props));
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('data/node-id', node.id.toString());
+    if (nodeData?.props) {
+      e.dataTransfer.setData('data/node-props', JSON.stringify(nodeData.props));
     }
     e.dataTransfer.setData(
-      "data/node-offset-x",
-      Math.round(box.left - e.clientX).toString(),
+      'data/node-offset-x',
+      Math.round(box.left - e.clientX).toString()
     );
     e.dataTransfer.setData(
-      "data/node-offset-y",
-      Math.round(box.top - e.clientY).toString(),
+      'data/node-offset-y',
+      Math.round(box.top - e.clientY).toString()
     );
   }
+
+  onMount(() => {
+    nodeData = {
+      id: 0,
+      type: node.id as unknown as NodeId,
+      position: [0, 0] as [number, number],
+      props: {},
+      state: {
+        type: node
+      }
+    };
+  });
 </script>
 
 <div class="node-wrapper" class:dragging>
@@ -46,7 +51,7 @@
     tabindex="0"
     ondragstart={handleDragStart}
   >
-    <NodeHtml bind:node={nodeData} inView={true} position={"relative"} z={5} />
+    <NodeHtml bind:node={nodeData} inView={true} position="relative" z={5} />
   </div>
 </div>
 

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import BreadCrumbs from "./BreadCrumbs.svelte";
-  import DraggableNode from "./DraggableNode.svelte";
-  import type { RemoteNodeRegistry } from "@nodarium/registry";
+  import type { RemoteNodeRegistry } from '$lib/node-registry/index';
+  import BreadCrumbs from './BreadCrumbs.svelte';
+  import DraggableNode from './DraggableNode.svelte';
 
   const { registry }: { registry: RemoteNodeRegistry } = $props();
 
-  let activeId = $state("max/plantarium");
+  let activeId = $state('max/plantarium');
   let showBreadCrumbs = false;
 
   const [activeUser, activeCollection, activeNode] = $derived(
-    activeId.split(`/`),
+    activeId.split(`/`)
   );
 </script>
 
@@ -22,12 +22,14 @@
     {#await registry.fetchUsers()}
       <div>Loading Users...</div>
     {:then users}
-      {#each users as user}
+      {#each users as user (user.id)}
         <button
           onclick={() => {
             activeId = user.id;
-          }}>{user.id}</button
+          }}
         >
+          {user.id}
+        </button>
       {/each}
     {:catch error}
       <div>{error.message}</div>
@@ -36,7 +38,7 @@
     {#await registry.fetchUser(activeUser)}
       <div>Loading User...</div>
     {:then user}
-      {#each user.collections as collection}
+      {#each user.collections as collection (collection)}
         <button
           onclick={() => {
             activeId = collection.id;
@@ -52,7 +54,7 @@
     {#await registry.fetchCollection(`${activeUser}/${activeCollection}`)}
       <div>Loading Collection...</div>
     {:then collection}
-      {#each collection.nodes as node}
+      {#each collection.nodes as node (node.id)}
         {#await registry.fetchNodeDefinition(node.id)}
           <div>Loading Node... {node.id}</div>
         {:then node}