make viewport bindable

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

@@ -64,6 +64,7 @@
     children,
     nodes = $bindable([]),
     edges = $bindable([]),
+    viewport = $bindable(undefined),
     ...props
   }: SvelteFlowProps = $props();
 
@@ -93,6 +94,12 @@
     },
     set edges(newEdges) {
       edges = newEdges;
+    },
+    get viewport() {
+      return viewport;
+    },
+    set viewport(newViewport) {
+      viewport = newViewport;
     }
   });
 

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

@@ -35,7 +35,7 @@ import type {
   IsValidConnection,
   DefaultNodeOptions
 } from '$lib/types';
-import type { Writable } from 'svelte/store';
+
 import type { Snippet } from 'svelte';
 import type { EdgeEvents, NodeEvents, NodeSelectionEvents, PaneEvents } from '$lib/types/events';
 
@@ -168,8 +168,8 @@ export type SvelteFlowProps = NodeEvents &
      * };
      */
     initialViewport?: Viewport;
-    /** Custom viewport writable to be used instead of internal one */
-    viewport?: Writable<Viewport>;
+    /** Custom viewport to be used instead of internal one */
+    viewport?: Viewport;
     /** The radius around a handle where you drop a connection line to create a new edge.
      * @default 20
      */