From 64c36470cdc91bd8b6683051fad7c4e340876ab8 Mon Sep 17 00:00:00 2001
From: Ben Chidlow <26830309+fezproof@users.noreply.github.com>
Date: Tue, 17 Sep 2024 13:42:21 +0800
Subject: [PATCH 01/18] Update nodes.ts to allow strong NodeType

Update the NodeBase type to have a stronger NodeType field that can be undefined even if you specifically define it.
---
 packages/system/src/types/nodes.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts
index b405b5ba..ae4bbc27 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -9,7 +9,7 @@ import { Optional } from '../utils/types';
  */
 export type NodeBase<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeType extends string = string
+  NodeType extends string | undefined = string | undefined
 > = {
   /** Unique id of a node */
   id: string;
@@ -20,7 +20,7 @@ export type NodeBase<
   /** Arbitrary data passed to a node */
   data: NodeData;
   /** Type of node defined in nodeTypes */
-  type?: NodeType;
+  type: NodeType;
   /** Only relevant for default, source, target nodeType. controls source position
    * @example 'right', 'left', 'top', 'bottom'
    */

From 37e9f02f80b4632dba4427c2821206874cb9f567 Mon Sep 17 00:00:00 2001
From: fezproof <26830309+fezproof@users.noreply.github.com>
Date: Wed, 18 Sep 2024 11:50:21 +0800
Subject: [PATCH 02/18] Updated `NodeBase` to allow undefined types and still
 handle explicit ones

Updated svelte and react packages to accommodate this
---
 packages/react/src/types/nodes.ts      |  2 +-
 packages/svelte/src/lib/types/nodes.ts |  2 +-
 packages/system/src/types/nodes.ts     | 12 +++++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts
index f4ad2820..4307742d 100644
--- a/packages/react/src/types/nodes.ts
+++ b/packages/react/src/types/nodes.ts
@@ -9,7 +9,7 @@ import { NodeTypes } from './general';
  */
 export type Node<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeType extends string = string
+  NodeType extends string | undefined = undefined
 > = NodeBase<NodeData, NodeType> & {
   style?: CSSProperties;
   className?: string;
diff --git a/packages/svelte/src/lib/types/nodes.ts b/packages/svelte/src/lib/types/nodes.ts
index 0e741c00..021dad70 100644
--- a/packages/svelte/src/lib/types/nodes.ts
+++ b/packages/svelte/src/lib/types/nodes.ts
@@ -15,7 +15,7 @@ export type InternalNode<NodeType extends Node = Node> = InternalNodeBase<NodeTy
  */
 export type Node<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeType extends string = string
+  NodeType extends string | undefined = undefined
 > = NodeBase<NodeData, NodeType> & {
   class?: string;
   style?: string;
diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts
index ae4bbc27..b1d93369 100644
--- a/packages/system/src/types/nodes.ts
+++ b/packages/system/src/types/nodes.ts
@@ -19,8 +19,6 @@ export type NodeBase<
   position: XYPosition;
   /** Arbitrary data passed to a node */
   data: NodeData;
-  /** Type of node defined in nodeTypes */
-  type: NodeType;
   /** Only relevant for default, source, target nodeType. controls source position
    * @example 'right', 'left', 'top', 'bottom'
    */
@@ -63,7 +61,15 @@ export type NodeBase<
     width?: number;
     height?: number;
   };
-};
+} & (undefined extends NodeType
+  ? {
+      /** Type of node defined in nodeTypes */
+      type?: string | undefined;
+    }
+  : {
+      /** Type of node defined in nodeTypes */
+      type: NodeType;
+    });
 
 export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType & {
   measured: {

From dc25f1c833767d8ec8471f673b233c3f20adfe78 Mon Sep 17 00:00:00 2001
From: Tzu-Yu Lee <leejuyuu@gmail.com>
Date: Sat, 17 May 2025 03:00:59 +0800
Subject: [PATCH 03/18] refactor(svelte): change a11y inline styles to classes

In some environments, inline styles are not permitted due to security
issues (e.g. strict CSP). The a11y messages will be visible in these
environments due to browsers blocking inline styles.

Change the inline styles to use classes instead.
---
 .../A11yDescriptions/A11yDescriptions.svelte  | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte b/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
index a26778c1..a9716478 100644
--- a/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
+++ b/packages/svelte/src/lib/components/A11yDescriptions/A11yDescriptions.svelte
@@ -6,14 +6,14 @@
   let { store }: { store: SvelteFlowStore<NodeType, EdgeType> } = $props();
 </script>
 
-<div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} style="display: none;">
+<div id={`${ARIA_NODE_DESC_KEY}-${store.flowId}`} class="a11y-hidden">
   Press enter or space to select a node.
   {#if !store.disableKeyboardA11y}
     You can then use the arrow keys to move the node around.
   {/if}
   Press delete to remove it and escape to cancel.
 </div>
-<div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} style="display: none;">
+<div id={`${ARIA_EDGE_DESC_KEY}-${store.flowId}`} class="a11y-hidden">
   Press enter or space to select an edge. You can then press delete to remove it or escape to
   cancel.
 </div>
@@ -23,8 +23,26 @@
     id={`${ARIA_LIVE_MESSAGE}-${store.flowId}`}
     aria-live="assertive"
     aria-atomic="true"
-    style="position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%);"
+    class="a11y-live-msg"
   >
     {store.ariaLiveMessage}
   </div>
 {/if}
+
+<style>
+  .a11y-hidden {
+    display: none;
+  }
+
+  .a11y-live-msg {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0px, 0px, 0px, 0px);
+    clip-path: inset(100%);
+  }
+</style>

From 6b9767cd89f2258b9e83340606bc84a1421ab857 Mon Sep 17 00:00:00 2001
From: Abbey Yacoe <abbey@xyflow.com>
Date: Mon, 19 May 2025 11:04:38 +0200
Subject: [PATCH 04/18] docs(CONTRIBUTING): update links

---
 CONTRIBUTING.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a6710280..dfd9ac5d 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -20,19 +20,19 @@ That being said, our libraries are only interesting because of the people who ma
 
 The things we need the most help for the library and its community are:
 
-**🐛 Bug reports:** We simply can’t catch them all. Check [existing issues](https://github.com/wbkd/react-flow/issues/new/choose) and discussion first, then [create a new issue](https://github.com/wbkd/react-flow/issues/new/choose) to tell us what’s up.
+**🐛 Bug reports:** We simply can’t catch them all. Check [existing issues](https://github.com/xyflow/xyflow/issues/) and discussion first, then [create a new issue](https://github.com/xyflow/xyflow/issues/new/choose) to tell us what’s up.
 
-**💬 Answering questions** in our [Discord Server](https://discord.gg/Bqt6xrs) and [Github discussions](https://github.com/wbkd/react-flow/discussions).
+**💬 Answering questions** in our [Discord Server](https://discord.gg/Bqt6xrs) and [Github discussions](https://github.com/xyflow/xyflow/discussions).
 
 🎬 **Create tutorials**. Send them to us and we’ll happily share them!
 
-**✏️ Edit our [Docs](https://reactflow.dev/docs/introduction/)**: Make changes in the [react-flow-docs repo](https://github.com/wbkd/react-flow-docs), or click the "edit this page” button that lives on every doc site.
+**✏️ Edit our [Docs](https://reactflow.dev/learn/concepts/introduction/)**: Make changes in our [web repo](https://github.com/xyflow/web), where our docs live.
 
-All interactions should be done with care following our [Code of Conduct](https://github.com/wbkd/react-flow/blob/main/CODE_OF_CONDUCT.md).
+All interactions should be done with care following our [Code of Conduct](https://github.com/xyflow/xyflow/blob/main/CODE_OF_CONDUCT.md).
 
 ## Enhancements
 
-If you have an idea or suggestion for an enhancement to the React Flow or Svelte Flow library, please use the [New Features](https://github.com/wbkd/react-flow/discussions/categories/new-features) discussion section. If you want to build it yourself, **please reach out to us before you dive into a new pull request.** The direction of React Flow/ Svelte Flow and which new features are added are discussed in our Discord Server and in [this Github discussions section](https://github.com/wbkd/react-flow/discussions/categories/new-features), and in the end they are decided by the core team.
+If you have an idea or suggestion for an enhancement to the React Flow or Svelte Flow library, please use the [New Features](https://github.com/xyflow/xyflow/discussions/categories/new-features) discussion section. If you want to build it yourself, **please reach out to us before you dive into a new pull request.** The direction of React Flow/ Svelte Flow and which new features are added are discussed in our Discord Server and in [this Github discussions section](https://github.com/xyflow/xyflow/discussions/categories/new-features), and in the end they are decided by the core team.
 
 Talking to us first about the enhancement you want to build will be the most likely way to get your pull request into the library (see Our Contributing Philosophy above). We would hate to see you write code you’re proud of, just to learn that we’ve already been working on the same thing, or that we feel doesn’t fit into the core library.
 

From 9bf278181abf617a83afa503e09845bc1f07662b Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 19 May 2025 11:43:17 +0200
Subject: [PATCH 05/18] remove unnecessarly setting nodesInitialized

---
 packages/svelte/src/lib/store/index.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts
index 4312b2b3..657fdce2 100644
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -108,10 +108,6 @@ export function createStore<NodeType extends Node = Node, EdgeType extends Edge
     }
 
     store.nodes = store.nodes.map((node) => newNodes.get(node.id) ?? node);
-
-    if (!store.nodesInitialized) {
-      store.nodesInitialized = true;
-    }
   }
 
   function fitView(options?: FitViewOptions) {

From a67bfc09d5b352b5ff3b896c9a9e7138f2c4b20c Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 19 May 2025 11:45:04 +0200
Subject: [PATCH 06/18] chore(changeset)

---
 .changeset/hip-fireants-change.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hip-fireants-change.md

diff --git a/.changeset/hip-fireants-change.md b/.changeset/hip-fireants-change.md
new file mode 100644
index 00000000..90137725
--- /dev/null
+++ b/.changeset/hip-fireants-change.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Fix setting nodesInitialized multiple times

From 9691d2c070f28407c49e7faeb6613085be8b18a6 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 19 May 2025 13:14:27 +0200
Subject: [PATCH 07/18] feat(viewport-options): add ease #3189

---
 .../react/src/examples/UseReactFlow/index.tsx | 12 +++++-
 .../routes/examples/usesvelteflow/Flow.svelte |  2 +-
 .../examples/usesvelteflow/Sidebar.svelte     |  3 +-
 packages/react/src/hooks/useViewportHelper.ts |  6 +--
 packages/react/src/types/general.ts           |  5 +++
 .../src/lib/hooks/useSvelteFlow.svelte.ts     |  9 +++--
 packages/system/src/types/general.ts          |  2 +
 packages/system/src/types/panzoom.ts          |  1 +
 packages/system/src/utils/graph.ts            |  2 +-
 packages/system/src/xypanzoom/XYPanZoom.ts    | 37 ++++++++++---------
 packages/system/src/xypanzoom/utils.ts        | 10 ++++-
 11 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/examples/react/src/examples/UseReactFlow/index.tsx b/examples/react/src/examples/UseReactFlow/index.tsx
index cf6ae59f..3e1d8f92 100644
--- a/examples/react/src/examples/UseReactFlow/index.tsx
+++ b/examples/react/src/examples/UseReactFlow/index.tsx
@@ -170,7 +170,6 @@ const UseZoomPanHelperFlow = () => {
       onConnect={onConnect}
       onPaneClick={onPaneClick}
       fitView
-      fitViewOptions={{ duration: 1200, padding: 0.2 }}
       maxZoom={Infinity}
     >
       <Panel position="top-right">
@@ -183,7 +182,16 @@ const UseZoomPanHelperFlow = () => {
             console.log('fit view success');
           }}
         >
-          fitView
+          fitView default
+        </button>
+        <button
+          onClick={async () => {
+            console.log('fit view start');
+            await fitView({ duration: 1200, padding: 0.3, ease: (t) => +t });
+            console.log('fit view success');
+          }}
+        >
+          fitView linear
         </button>
         <button onClick={onAddNode}>add node</button>
         <button onClick={onResetNodes}>reset nodes</button>
diff --git a/examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte
index aa37a49a..cab0bdde 100644
--- a/examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte
+++ b/examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte
@@ -44,7 +44,7 @@
 </script>
 
 <main>
-	<SvelteFlow bind:nodes bind:edges fitView>
+	<SvelteFlow bind:nodes bind:edges fitView maxZoom={4}>
 		<Controls />
 		<Background variant={BackgroundVariant.Dots} />
 		<MiniMap />
diff --git a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
index c64131f0..6c56e10a 100644
--- a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
+++ b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
@@ -30,7 +30,8 @@
 	<button onclick={() => zoomIn()}>zoom in</button>
 	<button onclick={() => zoomOut({ duration: 1000 })}>zoom out transition</button>
 	<button onclick={() => setZoom(2)}>set zoom</button>
-	<button onclick={() => fitView()}>fitView</button>
+	<button onclick={() => fitView({ duration: 600 })}>fitView</button>
+	<button onclick={() => fitView({ duration: 600, ease: (t) => +t })}>fitView linear</button>
 	<button onclick={() => setCenter(0, 0)}>setCenter 0, 0</button>
 	<button onclick={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
 	<button onclick={() => console.log(getViewport())}>getViewport</button>
diff --git a/packages/react/src/hooks/useViewportHelper.ts b/packages/react/src/hooks/useViewportHelper.ts
index a88bd3fc..3f115152 100644
--- a/packages/react/src/hooks/useViewportHelper.ts
+++ b/packages/react/src/hooks/useViewportHelper.ts
@@ -53,7 +53,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
             y: viewport.y ?? tY,
             zoom: viewport.zoom ?? tZoom,
           },
-          { duration: options?.duration }
+          options
         );
 
         return Promise.resolve(true);
@@ -78,7 +78,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
             y: centerY,
             zoom: nextZoom,
           },
-          { duration: options?.duration }
+          { duration: options?.duration, ease: options?.ease }
         );
 
         return Promise.resolve(true);
@@ -91,7 +91,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
           return Promise.resolve(false);
         }
 
-        await panZoom.setViewport(viewport, { duration: options?.duration });
+        await panZoom.setViewport(viewport, { duration: options?.duration, ease: options?.ease });
 
         return Promise.resolve(true);
       },
diff --git a/packages/react/src/types/general.ts b/packages/react/src/types/general.ts
index 98302a86..80acc45c 100644
--- a/packages/react/src/types/general.ts
+++ b/packages/react/src/types/general.ts
@@ -149,6 +149,7 @@ export type ViewportHelperFunctions = {
    *
    * @param viewport - the viewport to set
    * @param options.duration - optional duration. If set, a transition will be applied
+   * @param options.ease - optional ease function.
    */
   setViewport: SetViewport;
   /**
@@ -164,6 +165,8 @@ export type ViewportHelperFunctions = {
    * @param x - x position
    * @param y - y position
    * @param options.zoom - optional zoom
+   * @param options.duration - optional duration. If set, a transition will be applied
+   * @param options.ease - optional ease function.
    */
   setCenter: SetCenter;
   /**
@@ -173,6 +176,8 @@ export type ViewportHelperFunctions = {
    *
    * @param bounds - the bounds ({ x: number, y: number, width: number, height: number }) to fit the view to
    * @param options.padding - optional padding
+   * @param options.duration - optional duration. If set, a transition will be applied
+   * @param options.ease - optional ease function.
    */
   fitBounds: FitBounds;
   /**
diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
index e3dcf1f4..d56b3992 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
@@ -360,7 +360,7 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
           y: nextViewport.y ?? currentViewport.y,
           zoom: nextViewport.zoom ?? currentViewport.zoom
         },
-        { duration: options?.duration }
+        options
       );
 
       return Promise.resolve(true);
@@ -380,7 +380,7 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
           y: store.height / 2 - y * nextZoom,
           zoom: nextZoom
         },
-        { duration: options?.duration }
+        { duration: options?.duration, ease: options?.ease }
       );
 
       return Promise.resolve(true);
@@ -402,7 +402,10 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
         options?.padding ?? 0.1
       );
 
-      await store.panZoom.setViewport(viewport, { duration: options?.duration });
+      await store.panZoom.setViewport(viewport, {
+        duration: options?.duration,
+        ease: options?.ease
+      });
 
       return Promise.resolve(true);
     },
diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts
index d15a4b54..a2f0f9c8 100644
--- a/packages/system/src/types/general.ts
+++ b/packages/system/src/types/general.ts
@@ -130,6 +130,7 @@ export type FitViewOptionsBase<NodeType extends NodeBase = NodeBase> = {
   minZoom?: number;
   maxZoom?: number;
   duration?: number;
+  ease?: (t: number) => number;
   nodes?: (NodeType | { id: string })[];
 };
 
@@ -173,6 +174,7 @@ export enum PanOnScrollMode {
  */
 export type ViewportHelperFunctionOptions = {
   duration?: number;
+  ease?: (t: number) => number;
 };
 
 export type SetCenterOptions = ViewportHelperFunctionOptions & {
diff --git a/packages/system/src/types/panzoom.ts b/packages/system/src/types/panzoom.ts
index a2577505..1738bc50 100644
--- a/packages/system/src/types/panzoom.ts
+++ b/packages/system/src/types/panzoom.ts
@@ -20,6 +20,7 @@ export type PanZoomParams = {
 
 export type PanZoomTransformOptions = {
   duration?: number;
+  ease?: (t: number) => number;
 };
 
 export type OnPanZoom = (event: MouseEvent | TouchEvent | null, viewport: Viewport) => void;
diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index 9bd7beff..386eac79 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -378,7 +378,7 @@ export async function fitViewport<
     options?.padding ?? 0.1
   );
 
-  await panZoom.setViewport(viewport, { duration: options?.duration });
+  await panZoom.setViewport(viewport, { duration: options?.duration, ease: options?.ease });
 
   return Promise.resolve(true);
 }
diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts
index 93bc79f8..b30ec8f5 100644
--- a/packages/system/src/xypanzoom/XYPanZoom.ts
+++ b/packages/system/src/xypanzoom/XYPanZoom.ts
@@ -19,6 +19,7 @@ import {
   createZoomOnScrollHandler,
 } from './eventhandler';
 import { createFilter } from './filter';
+import { transition } from 'd3-transition';
 
 export type ZoomPanValues = {
   isZoomingOrPanning: boolean;
@@ -79,7 +80,7 @@ export function XYPanZoom({
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
         d3ZoomInstance?.transform(
-          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+          getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           transform
         );
       });
@@ -114,22 +115,22 @@ export function XYPanZoom({
 
     const wheelHandler = isPanOnScroll
       ? createPanOnScrollHandler({
-        zoomPanValues,
-        noWheelClassName,
-        d3Selection,
-        d3Zoom: d3ZoomInstance,
-        panOnScrollMode,
-        panOnScrollSpeed,
-        zoomOnPinch,
-        onPanZoomStart,
-        onPanZoom,
-        onPanZoomEnd,
-      })
+          zoomPanValues,
+          noWheelClassName,
+          d3Selection,
+          d3Zoom: d3ZoomInstance,
+          panOnScrollMode,
+          panOnScrollSpeed,
+          zoomOnPinch,
+          onPanZoomStart,
+          onPanZoom,
+          onPanZoomEnd,
+        })
       : createZoomOnScrollHandler({
-        noWheelClassName,
-        preventScrolling,
-        d3ZoomHandler,
-      });
+          noWheelClassName,
+          preventScrolling,
+          d3ZoomHandler,
+        });
 
     d3Selection.on('wheel.zoom', wheelHandler, { passive: false });
 
@@ -243,7 +244,7 @@ export function XYPanZoom({
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
         d3ZoomInstance?.scaleTo(
-          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+          getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           zoom
         );
       });
@@ -256,7 +257,7 @@ export function XYPanZoom({
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
         d3ZoomInstance?.scaleBy(
-          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+          getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           factor
         );
       });
diff --git a/packages/system/src/xypanzoom/utils.ts b/packages/system/src/xypanzoom/utils.ts
index fbd0324d..b6fd71f3 100644
--- a/packages/system/src/xypanzoom/utils.ts
+++ b/packages/system/src/xypanzoom/utils.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
+import { transition } from 'd3-transition';
 
 import { type D3SelectionInstance, type Viewport } from '../types';
 import { isMacOs } from '../utils';
@@ -21,14 +22,19 @@ export const isWrappedWithClass = (event: any, className: string | undefined) =>
 export const isRightClickPan = (panOnDrag: boolean | number[], usedButton: number) =>
   usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2);
 
-export const getD3Transition = (selection: D3SelectionInstance, duration = 0, onEnd = () => {}) => {
+// taken from d3-ease: https://github.com/d3/d3-ease/blob/main/src/cubic.js
+const defaultEase = (t: number) => ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;
+
+export const getD3Transition = (selection: D3SelectionInstance, duration = 0, ease = defaultEase, onEnd = () => {}) => {
   const hasDuration = typeof duration === 'number' && duration > 0;
 
   if (!hasDuration) {
     onEnd();
   }
 
-  return hasDuration ? selection.transition().duration(duration).on('end', onEnd) : selection;
+  console.log(ease);
+
+  return hasDuration ? selection.transition().duration(duration).ease(ease).on('end', onEnd) : selection;
 };
 
 export const wheelDelta = (event: any) => {

From 6ce44a05c829068ff5a8416ce3fa4ee6e0eced48 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 19 May 2025 13:15:39 +0200
Subject: [PATCH 08/18] chore(changeset): add

---
 .changeset/late-taxis-press.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/late-taxis-press.md

diff --git a/.changeset/late-taxis-press.md b/.changeset/late-taxis-press.md
new file mode 100644
index 00000000..d263bb08
--- /dev/null
+++ b/.changeset/late-taxis-press.md
@@ -0,0 +1,7 @@
+---
+'@xyflow/react': minor
+'@xyflow/svelte': minor
+'@xyflow/system': minor
+---
+
+Add an ease option to all function that alter the viewport

From ce9814ddcef753c8cf4a23e70c6fe7a4b10f6cf2 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 19 May 2025 15:19:11 +0200
Subject: [PATCH 09/18] feat(viewport-options): add interpolate

---
 .../src/routes/examples/usesvelteflow/Sidebar.svelte      | 4 +++-
 packages/react/src/hooks/useViewportHelper.ts             | 8 ++++++--
 packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts     | 5 +++--
 packages/system/package.json                              | 2 ++
 packages/system/src/types/general.ts                      | 2 ++
 packages/system/src/types/panzoom.ts                      | 1 +
 packages/system/src/utils/graph.ts                        | 6 +++++-
 packages/system/src/xypanzoom/XYPanZoom.ts                | 7 ++++---
 packages/system/src/xypanzoom/utils.ts                    | 2 --
 pnpm-lock.yaml                                            | 6 ++++++
 10 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
index 6c56e10a..3b687eb3 100644
--- a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
+++ b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
@@ -31,7 +31,9 @@
 	<button onclick={() => zoomOut({ duration: 1000 })}>zoom out transition</button>
 	<button onclick={() => setZoom(2)}>set zoom</button>
 	<button onclick={() => fitView({ duration: 600 })}>fitView</button>
-	<button onclick={() => fitView({ duration: 600, ease: (t) => +t })}>fitView linear</button>
+	<button onclick={() => fitView({ duration: 600, ease: (t) => +t, interpolate: 'linear' })}
+		>fitView linear</button
+	>
 	<button onclick={() => setCenter(0, 0)}>setCenter 0, 0</button>
 	<button onclick={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
 	<button onclick={() => console.log(getViewport())}>getViewport</button>
diff --git a/packages/react/src/hooks/useViewportHelper.ts b/packages/react/src/hooks/useViewportHelper.ts
index 3f115152..fc01a150 100644
--- a/packages/react/src/hooks/useViewportHelper.ts
+++ b/packages/react/src/hooks/useViewportHelper.ts
@@ -78,7 +78,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
             y: centerY,
             zoom: nextZoom,
           },
-          { duration: options?.duration, ease: options?.ease }
+          { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate }
         );
 
         return Promise.resolve(true);
@@ -91,7 +91,11 @@ const useViewportHelper = (): ViewportHelperFunctions => {
           return Promise.resolve(false);
         }
 
-        await panZoom.setViewport(viewport, { duration: options?.duration, ease: options?.ease });
+        await panZoom.setViewport(viewport, {
+          duration: options?.duration,
+          ease: options?.ease,
+          interpolate: options?.interpolate,
+        });
 
         return Promise.resolve(true);
       },
diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
index d56b3992..82c66064 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
@@ -380,7 +380,7 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
           y: store.height / 2 - y * nextZoom,
           zoom: nextZoom
         },
-        { duration: options?.duration, ease: options?.ease }
+        { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate }
       );
 
       return Promise.resolve(true);
@@ -404,7 +404,8 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
 
       await store.panZoom.setViewport(viewport, {
         duration: options?.duration,
-        ease: options?.ease
+        ease: options?.ease,
+        interpolate: options?.interpolate
       });
 
       return Promise.resolve(true);
diff --git a/packages/system/package.json b/packages/system/package.json
index 9405859e..3ae79f39 100644
--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -51,10 +51,12 @@
   },
   "dependencies": {
     "@types/d3-drag": "^3.0.7",
+    "@types/d3-interpolate": "^3.0.4",
     "@types/d3-selection": "^3.0.10",
     "@types/d3-transition": "^3.0.8",
     "@types/d3-zoom": "^3.0.8",
     "d3-drag": "^3.0.0",
+    "d3-interpolate": "^3.0.1",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0"
   },
diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts
index a2f0f9c8..4e7cf910 100644
--- a/packages/system/src/types/general.ts
+++ b/packages/system/src/types/general.ts
@@ -131,6 +131,7 @@ export type FitViewOptionsBase<NodeType extends NodeBase = NodeBase> = {
   maxZoom?: number;
   duration?: number;
   ease?: (t: number) => number;
+  interpolate?: 'smooth' | 'linear';
   nodes?: (NodeType | { id: string })[];
 };
 
@@ -175,6 +176,7 @@ export enum PanOnScrollMode {
 export type ViewportHelperFunctionOptions = {
   duration?: number;
   ease?: (t: number) => number;
+  interpolate?: 'smooth' | 'linear';
 };
 
 export type SetCenterOptions = ViewportHelperFunctionOptions & {
diff --git a/packages/system/src/types/panzoom.ts b/packages/system/src/types/panzoom.ts
index 1738bc50..ae968fc8 100644
--- a/packages/system/src/types/panzoom.ts
+++ b/packages/system/src/types/panzoom.ts
@@ -21,6 +21,7 @@ export type PanZoomParams = {
 export type PanZoomTransformOptions = {
   duration?: number;
   ease?: (t: number) => number;
+  interpolate?: 'smooth' | 'linear';
 };
 
 export type OnPanZoom = (event: MouseEvent | TouchEvent | null, viewport: Viewport) => void;
diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index 386eac79..402067d2 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -378,7 +378,11 @@ export async function fitViewport<
     options?.padding ?? 0.1
   );
 
-  await panZoom.setViewport(viewport, { duration: options?.duration, ease: options?.ease });
+  await panZoom.setViewport(viewport, {
+    duration: options?.duration,
+    ease: options?.ease,
+    interpolate: options?.interpolate,
+  });
 
   return Promise.resolve(true);
 }
diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts
index b30ec8f5..0c1a8e12 100644
--- a/packages/system/src/xypanzoom/XYPanZoom.ts
+++ b/packages/system/src/xypanzoom/XYPanZoom.ts
@@ -1,5 +1,6 @@
 import { type ZoomTransform, zoom, zoomTransform } from 'd3-zoom';
 import { select } from 'd3-selection';
+import { interpolateZoom, interpolate } from 'd3-interpolate';
 
 import {
   type CoordinateExtent,
@@ -79,7 +80,7 @@ export function XYPanZoom({
   function setTransform(transform: ZoomTransform, options?: PanZoomTransformOptions) {
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
-        d3ZoomInstance?.transform(
+        d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).transform(
           getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           transform
         );
@@ -243,7 +244,7 @@ export function XYPanZoom({
   function scaleTo(zoom: number, options?: PanZoomTransformOptions) {
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
-        d3ZoomInstance?.scaleTo(
+        d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleTo(
           getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           zoom
         );
@@ -256,7 +257,7 @@ export function XYPanZoom({
   function scaleBy(factor: number, options?: PanZoomTransformOptions) {
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
-        d3ZoomInstance?.scaleBy(
+        d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleBy(
           getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           factor
         );
diff --git a/packages/system/src/xypanzoom/utils.ts b/packages/system/src/xypanzoom/utils.ts
index b6fd71f3..22382bd5 100644
--- a/packages/system/src/xypanzoom/utils.ts
+++ b/packages/system/src/xypanzoom/utils.ts
@@ -32,8 +32,6 @@ export const getD3Transition = (selection: D3SelectionInstance, duration = 0, ea
     onEnd();
   }
 
-  console.log(ease);
-
   return hasDuration ? selection.transition().duration(duration).ease(ease).on('end', onEnd) : selection;
 };
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c962a91e..d47c4673 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -372,6 +372,9 @@ importers:
       '@types/d3-drag':
         specifier: ^3.0.7
         version: 3.0.7
+      '@types/d3-interpolate':
+        specifier: ^3.0.4
+        version: 3.0.4
       '@types/d3-selection':
         specifier: ^3.0.10
         version: 3.0.10
@@ -384,6 +387,9 @@ importers:
       d3-drag:
         specifier: ^3.0.0
         version: 3.0.0
+      d3-interpolate:
+        specifier: ^3.0.1
+        version: 3.0.1
       d3-selection:
         specifier: ^3.0.0
         version: 3.0.0

From 5025b8206ba1112cf8d834034ed47bc93bd0b9b6 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 19 May 2025 15:23:00 +0200
Subject: [PATCH 10/18] chore(changeset): update

---
 .changeset/late-taxis-press.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/late-taxis-press.md b/.changeset/late-taxis-press.md
index d263bb08..e48f797b 100644
--- a/.changeset/late-taxis-press.md
+++ b/.changeset/late-taxis-press.md
@@ -4,4 +4,4 @@
 '@xyflow/system': minor
 ---
 
-Add an ease option to all function that alter the viewport
+Add an `ease` and `interpolate` option to all function that alter the viewport

From 5224a1a252eee59ffc48fffd74872206e19207f3 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 20 May 2025 08:56:10 +0200
Subject: [PATCH 11/18] chore(changeset): add

---
 .changeset/nine-crabs-help.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nine-crabs-help.md

diff --git a/.changeset/nine-crabs-help.md b/.changeset/nine-crabs-help.md
new file mode 100644
index 00000000..747174ac
--- /dev/null
+++ b/.changeset/nine-crabs-help.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Change a11y description inline styles to classes

From 43388a18e88abc3747cd272af73dbb5ba647483c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 20 May 2025 10:10:03 +0200
Subject: [PATCH 12/18] refactor(node-type): adjust

---
 packages/react/src/types/nodes.ts      | 2 +-
 packages/svelte/src/lib/types/nodes.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts
index 9214778c..8dc213d7 100644
--- a/packages/react/src/types/nodes.ts
+++ b/packages/react/src/types/nodes.ts
@@ -12,7 +12,7 @@ import { NodeTypes } from './general';
  */
 export type Node<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeType extends string | undefined = undefined
+  NodeType extends string | undefined = string | undefined
 > = NodeBase<NodeData, NodeType> & {
   style?: CSSProperties;
   className?: string;
diff --git a/packages/svelte/src/lib/types/nodes.ts b/packages/svelte/src/lib/types/nodes.ts
index 266f7cc3..f861c13b 100644
--- a/packages/svelte/src/lib/types/nodes.ts
+++ b/packages/svelte/src/lib/types/nodes.ts
@@ -16,7 +16,7 @@ export type InternalNode<NodeType extends Node = Node> = InternalNodeBase<NodeTy
  */
 export type Node<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeType extends string | undefined = undefined
+  NodeType extends string | undefined = string | undefined
 > = NodeBase<NodeData, NodeType> & {
   class?: ClassValue;
   style?: string;

From dba6faf20e7ec2524d5270d177331d3bd260f3ac Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 20 May 2025 11:19:09 +0200
Subject: [PATCH 13/18] chore(changeset): add

---
 .changeset/grumpy-spiders-play.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/grumpy-spiders-play.md

diff --git a/.changeset/grumpy-spiders-play.md b/.changeset/grumpy-spiders-play.md
new file mode 100644
index 00000000..cf7d295f
--- /dev/null
+++ b/.changeset/grumpy-spiders-play.md
@@ -0,0 +1,7 @@
+---
+'@xyflow/react': minor
+'@xyflow/svelte': minor
+'@xyflow/system': minor
+---
+
+Improve typing for Nodes

From 0920cc513927a1d068426d46f285bb4ff0f39169 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 26 May 2025 10:19:59 +0200
Subject: [PATCH 14/18] fix EdgeProps data type

---
 packages/svelte/src/lib/types/edges.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts
index c903512a..7ae205de 100644
--- a/packages/svelte/src/lib/types/edges.ts
+++ b/packages/svelte/src/lib/types/edges.ts
@@ -85,8 +85,6 @@ export type EdgeProps<EdgeType extends Edge = Edge> = Omit<
   'sourceHandle' | 'targetHandle'
 > &
   EdgePosition & {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    data?: any;
     type: string;
     markerStart?: string;
     markerEnd?: string;

From 4a582e2371066170b12f3df947f24fe233b542cd Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 26 May 2025 10:20:38 +0200
Subject: [PATCH 15/18] chore(changeset)

---
 .changeset/friendly-monkeys-fry.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/friendly-monkeys-fry.md

diff --git a/.changeset/friendly-monkeys-fry.md b/.changeset/friendly-monkeys-fry.md
new file mode 100644
index 00000000..5da27a70
--- /dev/null
+++ b/.changeset/friendly-monkeys-fry.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Fix data in EdgeProps not typed correctly

From 61e39363e3a85081725660580ae610938d9e2e80 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 26 May 2025 16:37:44 +0200
Subject: [PATCH 16/18] export additional types

---
 packages/svelte/src/lib/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 158c78fd..095c8b87 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -55,10 +55,10 @@ export type {
   EdgeTypes,
   DefaultEdgeOptions
 } from '$lib/types/edges';
-export type { FitViewOptions, OnBeforeDelete } from '$lib/types/general';
+export type * from '$lib/types/general';
 export type { Node, NodeTypes, BuiltInNode, NodeProps, InternalNode } from '$lib/types/nodes';
-export type { SvelteFlowStore } from '$lib/store/types';
 export * from '$lib/types/events';
+export type { SvelteFlowStore } from '$lib/store/types';
 
 // system types
 export {

From 93aefe71fb199d0e3463aca38a4564252ab8cbf4 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 26 May 2025 16:38:23 +0200
Subject: [PATCH 17/18] chore(changeset)

---
 .changeset/tough-rivers-tell.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tough-rivers-tell.md

diff --git a/.changeset/tough-rivers-tell.md b/.changeset/tough-rivers-tell.md
new file mode 100644
index 00000000..d2e2e7e4
--- /dev/null
+++ b/.changeset/tough-rivers-tell.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Export missing callback types

From 18d940f2063d636bb5e7c85f661b10c1c4c1a206 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20M=C3=B6ller?= <chrtze@gmail.com>
Date: Tue, 27 May 2025 14:35:18 +0200
Subject: [PATCH 18/18] chore: change readme maintainers section

---
 README.md | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 585dac0e..3ed80c4b 100644
--- a/README.md
+++ b/README.md
@@ -159,16 +159,9 @@ For releasing packages we are using [changesets](https://github.com/changesets/c
 3. changset creates a PR that bumps all packages based on the changesets 
 4. merge changeset PR if you want to release to Github and npm
 
-## The xyflow team
-
-React Flow and Svelte Flow are maintained by the team behind [xyflow](https://xyflow.com). If you need help or want to talk to us about a collaboration, reach out through our [contact form](https://xyflow.com/contact) or by joining our [Discord Server](https://discord.gg/Bqt6xrs).
-
-- Christopher • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze)
-- Hayleigh • [Twitter](https://twitter.com/hayleighdotdev) • [Github](https://github.com/hayleigh-dot-dev)
-- Abbey • [Github](https://github.com/printerscanner)
-- Moritz • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick)
-- Peter • [Github](https://github.com/peterkogo)
+## Built by [xyflow](https://xyflow.com)
 
+React Flow and Svelte Flow are maintained by the [xyflow team](https://xyflow.com/about). If you need help or want to talk to us about a collaboration, reach out through our [contact form](https://xyflow.com/contact) or by joining our [Discord Server](https://discord.gg/Bqt6xrs).
 
 ## License