Make derivedWarning an error and bind store instances

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -5,7 +5,7 @@
   import type { SvelteFlowStore } from '$lib/store/types';
 
   let {
-    store,
+    store = $bindable(),
     onedgeclick,
     onedgecontextmenu,
     onedgepointerenter,
@@ -20,7 +20,7 @@
 
   {#each store.visible.edges.values() as edge (edge.id)}
     <EdgeWrapper
-      {store}
+      bind:store
       {edge}
       {onedgeclick}
       {onedgecontextmenu}

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -7,7 +7,7 @@
   import type { SvelteFlowStore } from '$lib/store/types';
 
   let {
-    store,
+    store = $bindable(),
     nodeClickDistance,
     onnodeclick,
     onnodecontextmenu,
@@ -46,7 +46,7 @@
 <div class="svelte-flow__nodes">
   {#each store.visible.nodes.values() as node (node.id)}
     <NodeWrapper
-      {store}
+      bind:store
       {node}
       {resizeObserver}
       {nodeClickDistance}

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

@@ -45,7 +45,7 @@
   import type { PaneProps } from './types';
 
   let {
-    store,
+    store = $bindable(),
     panOnDrag = true,
     selectionOnDrag,
     onpaneclick,

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

@@ -69,7 +69,8 @@
     ...props
   }: SvelteFlowProps & HTMLAttributes<HTMLDivElement> = $props();
 
-  const store = createStore({
+  // svelte-ignore non_reactive_update
+  let store = createStore({
     props,
     width,
     height,
@@ -122,7 +123,7 @@
   rest={props}
 >
   <KeyHandler
-    {store}
+    bind:store
     {selectionKey}
     {deleteKey}
     {panActivationKey}
@@ -130,7 +131,7 @@
     {zoomActivationKey}
   />
   <Zoom
-    {store}
+    bind:store
     {panOnScrollMode}
     {preventScrolling}
     {zoomOnScroll}
@@ -144,17 +145,17 @@
     {onmoveend}
     {oninit}
   >
-    <Pane {store} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
-      <ViewportComponent {store}>
+    <Pane bind:store {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
+      <ViewportComponent bind:store>
         <EdgeRenderer
-          {store}
+          bind:store
           {onedgeclick}
           {onedgecontextmenu}
           {onedgepointerenter}
           {onedgepointerleave}
         />
         <ConnectionLine
-          {store}
+          bind:store
           type={connectionLineType}
           LineComponent={connectionLineComponent}
           containerStyle={connectionLineContainerStyle}
@@ -163,7 +164,7 @@
         <div class="svelte-flow__edgelabel-renderer"></div>
         <div class="svelte-flow__viewport-portal"></div>
         <NodeRenderer
-          {store}
+          bind:store
           {nodeClickDistance}
           {onnodeclick}
           {onnodecontextmenu}
@@ -175,7 +176,7 @@
           {onnodedragstop}
         />
         <NodeSelection
-          {store}
+          bind:store
           {onselectionclick}
           {onselectioncontextmenu}
           {onnodedrag}

packages/svelte/src/lib/container/Viewport/Viewport.svelte

@@ -2,7 +2,7 @@
   import type { SvelteFlowStore } from '$lib/store/types';
   import type { Snippet } from 'svelte';
 
-  let { store, children }: { store: SvelteFlowStore; children: Snippet } = $props();
+  let { store = $bindable(), children }: { store: SvelteFlowStore; children: Snippet } = $props();
 </script>
 
 <div

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -5,7 +5,7 @@
   import type { ZoomProps } from './types';
 
   let {
-    store,
+    store = $bindable(),
     panOnScrollMode = PanOnScrollMode.Free,
     preventScrolling = true,
     zoomOnScroll = true,