cleaning up Svelte 4 leftovers

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -7,7 +7,6 @@
       if (event.target !== container) {
         return;
       }
-
       handler?.(event);
     };
   }
@@ -17,7 +16,7 @@
       const isSelected = ids.includes(item.id);
 
       if (item.selected !== isSelected) {
-        item.selected = isSelected;
+        return { ...item, selected: isSelected };
       }
 
       return item;
@@ -33,7 +32,6 @@
     getConnectedEdges
   } from '@xyflow/system';
 
-  import { useStore } from '$lib/store';
   import type { Node, Edge, InternalNode } from '$lib/types';
   import type { PaneProps } from './types';
   let {
@@ -45,8 +43,6 @@
     children
   }: PaneProps = $props();
 
-  // const { nodes, edges } = store;
-
   // svelte-ignore non_reactive_update
   let container: HTMLDivElement;
   let containerBounds: DOMRect | null = null;
@@ -143,14 +139,14 @@
       prevSelectedNodeIds.length !== selectedNodeIds.length ||
       selectedNodeIds.some((id) => !prevSelectedNodeIds.includes(id))
     ) {
-      // store.nodes.update((nodes) => nodes.map(toggleSelected(selectedNodeIds)));
+      store.nodes = store.nodes.map(toggleSelected(selectedNodeIds));
     }
 
     if (
       prevSelectedEdgeIds.length !== selectedEdgeIds.length ||
       selectedEdgeIds.some((id) => !prevSelectedEdgeIds.includes(id))
     ) {
-      // store.edges.update((edges) => edges.map(toggleSelected(selectedEdgeIds)));
+      store.edges = store.edges.map(toggleSelected(selectedEdgeIds));
     }
 
     store.selectionRectMode = 'user';

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -1,6 +1,3 @@
-<!-- TODO: why is this neccessary for types to work?? -->
-<svelte:options runes={true} />
-
 <script lang="ts">
   import { getContext, setContext, onDestroy } from 'svelte';
   import cc from 'classcat';
@@ -19,7 +16,7 @@
   import { key, createStore } from '$lib/store';
   import type { SvelteFlowProps } from './types';
   import { useColorModeClass } from '$lib/hooks/useColorModeClass';
-  import { type ProviderContext, type ContainerSignals, type StoreContext } from '$lib/store/types';
+  import { type ProviderContext, type StoreContext } from '$lib/store/types';
 
   let {
     style,
@@ -62,7 +59,6 @@
     panOnScroll = false,
     panOnDrag = true,
     selectionOnDrag = true,
-    defaultEdgeOptions,
     connectionLineContainerStyle = '',
     connectionLineStyle = '',
     attributionPosition,
@@ -101,11 +97,13 @@
     }
   });
 
+  // Set store for provider context
   const providerContext = getContext<ProviderContext>(key);
   if (providerContext) {
     providerContext.setStore(store);
   }
 
+  // Overwrite store context to give children direct access
   setContext(key, {
     provider: false,
     getStore() {

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -31,7 +31,8 @@ import type {
   OnDelete,
   OnEdgeCreate,
   OnBeforeDelete,
-  IsValidConnection
+  IsValidConnection,
+  DefaultNodeOptions
 } from '$lib/types';
 import type { Writable } from 'svelte/store';
 import type { Snippet } from 'svelte';
@@ -301,6 +302,22 @@ export type SvelteFlowProps = NodeEvents &
      * }
      */
     defaultEdgeOptions?: DefaultEdgeOptions;
+    /** Defaults to be applied to all new nodes that are added to the flow.
+     *
+     * Properties on a new nodes will override these defaults if they exist.
+     * @example
+     * const defaultNodeOptions = {
+     *  type: 'customNodeType',
+     *  position: {x: 0, y: 0}
+     *  data: { label: 'custom label' },
+     *  hidden: false,
+     *  deletable: true,
+     *  selected: false,
+     *  focusable: true,
+     *  zIndex: 12,
+     * }
+     */
+    defaultNodeOptions?: DefaultNodeOptions;
     /** Sets a fixed width for the flow */
     width?: number;
     /** Sets a fixed height for the flow */