first working version with using $state for nodes & edges

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -40,7 +40,7 @@
   );
 
   let store = useStore();
-  let { edges } = store;
+  // let { edges } = store;
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
     const isMouseTriggered = isMouseEvent(event);
@@ -91,7 +91,8 @@
   $effect.pre(() => {
     // connectionLookup is not reactive, so we use edges to get notified about updates
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    $edges;
+    // $edges;
+    store.edges;
     if (onconnect || ondisconnect) {
       let connections = store.connectionLookup.get(`${nodeId}-${type}-${handleId}`);
 

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -20,7 +20,7 @@
     zoomActivationKey = isMacOs() ? 'Meta' : 'Control'
   }: KeyHandlerProps = $props();
 
-  const { nodes: _nodes, edges: _edges } = store;
+  // const { nodes: _nodes, edges: _edges } = store;
 
   function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
     return key !== null && typeof key === 'object';
@@ -66,22 +66,22 @@
   }
 
   async function handleDelete() {
-    const nodes = get(_nodes);
-    const edges = get(_edges);
-    const selectedNodes = nodes.filter((node) => node.selected);
-    const selectedEdges = edges.filter((edge) => edge.selected);
+    // const nodes = get(_nodes);
+    // const edges = get(_edges);
+    const selectedNodes = store.nodes.filter((node) => node.selected);
+    const selectedEdges = store.edges.filter((edge) => edge.selected);
 
     const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
       nodesToRemove: selectedNodes,
       edgesToRemove: selectedEdges,
-      nodes,
-      edges,
+      nodes: store.nodes,
+      edges: store.edges,
       onBeforeDelete: store.onbeforedelete
     });
 
     if (matchingNodes.length || matchingEdges.length) {
-      _nodes.update((nds) => nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.id)));
-      _edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id)));
+      // _nodes.update((nds) => nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.id)));
+      // _edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id)));
 
       store.ondelete?.({
         nodes: matchingNodes,

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -15,24 +15,24 @@
     onselectioncontextmenu
   }: NodeSelectionProps = $props();
 
-  const { nodes } = store;
+  // const { nodes } = store;
 
   let bounds: Rect | null = $derived.by(() => {
     if (store.selectionRectMode === 'nodes') {
       // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      $nodes;
+      store.nodes;
       return getInternalNodesBounds(store.nodeLookup, { filter: (node) => !!node.selected });
     }
     return null;
   });
 
   function oncontextmenu(event: MouseEvent | TouchEvent) {
-    const selectedNodes = $nodes.filter((n) => n.selected);
+    const selectedNodes = store.nodes.filter((n) => n.selected);
     onselectioncontextmenu?.({ nodes: selectedNodes, event });
   }
 
   function onclick(event: MouseEvent | TouchEvent) {
-    const selectedNodes = $nodes.filter((n) => n.selected);
+    const selectedNodes = store.nodes.filter((n) => n.selected);
     onselectionclick?.({ nodes: selectedNodes, event });
   }
 </script>