use generics across the library

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

@@ -1,7 +1,7 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { EdgeWrapper } from '$lib/components/EdgeWrapper';
   import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
-  import type { EdgeEvents } from '$lib/types';
+  import type { Node, Edge, EdgeEvents } from '$lib/types';
   import type { SvelteFlowStore } from '$lib/store/types';
 
   let {
@@ -10,7 +10,7 @@
     onedgecontextmenu,
     onedgepointerenter,
     onedgepointerleave
-  }: { store: SvelteFlowStore } & EdgeEvents = $props();
+  }: { store: SvelteFlowStore<NodeType, EdgeType> } & EdgeEvents<EdgeType> = $props();
 </script>
 
 <svg class="svelte-flow__marker">

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

@@ -1,9 +1,9 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { onDestroy } from 'svelte';
 
   import { NodeWrapper } from '$lib/components/NodeWrapper';
 
-  import type { NodeEvents } from '$lib/types';
+  import type { Node, Edge, NodeEvents } from '$lib/types';
   import type { SvelteFlowStore } from '$lib/store/types';
 
   let {
@@ -17,7 +17,10 @@
     onnodedrag,
     onnodedragstart,
     onnodedragstop
-  }: { store: SvelteFlowStore; nodeClickDistance?: number } & NodeEvents = $props();
+  }: {
+    store: SvelteFlowStore<NodeType, EdgeType>;
+    nodeClickDistance?: number;
+  } & NodeEvents<NodeType> = $props();
 
   const resizeObserver: ResizeObserver | null =
     typeof ResizeObserver === 'undefined'

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

@@ -38,7 +38,7 @@
   }
 </script>
 
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { SelectionMode, getEventPosition, getNodesInside } from '@xyflow/system';
 
   import type { Node, Edge } from '$lib/types';
@@ -51,7 +51,7 @@
     onpaneclick,
     onpanecontextmenu,
     children
-  }: PaneProps = $props();
+  }: PaneProps<NodeType, EdgeType> = $props();
 
   // svelte-ignore non_reactive_update
   let container: HTMLDivElement;

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

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
-import type { PaneEvents } from '$lib/types';
+import type { Node, Edge, PaneEvents } from '$lib/types';
 import type { SvelteFlowStore } from '$lib/store/types';
 
-export type PaneProps = {
-  store: SvelteFlowStore;
+export type PaneProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  store: SvelteFlowStore<NodeType, EdgeType>;
   panOnDrag?: boolean | number[];
   selectionOnDrag?: boolean;
   children: Snippet;

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

@@ -3,7 +3,7 @@
   import type { Snippet } from 'svelte';
   import { type SvelteFlowRestProps } from '$lib/store/types';
   import { toPxString } from '$lib/utils';
-  import type { Node, Edge, NodeTypes } from '$lib/types';
+  import type { Node, Edge } from '$lib/types';
 
   let {
     width,

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

@@ -45,9 +45,9 @@ import type { EdgeEvents, NodeEvents, NodeSelectionEvents, PaneEvents } from '$l
 export type SvelteFlowProps<
   NodeType extends Node = Node,
   EdgeType extends Edge = Edge
-> = NodeEvents &
-  NodeSelectionEvents &
-  EdgeEvents &
+> = NodeEvents<NodeType> &
+  NodeSelectionEvents<NodeType> &
+  EdgeEvents<EdgeType> &
   PaneEvents & {
     /** The id of the flow
      *

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

@@ -1,8 +1,12 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import type { SvelteFlowStore } from '$lib/store/types';
+  import type { Node, Edge } from '$lib/types';
   import type { Snippet } from 'svelte';
 
-  let { store = $bindable(), children }: { store: SvelteFlowStore; children: Snippet } = $props();
+  let {
+    store = $bindable(),
+    children
+  }: { store: SvelteFlowStore<NodeType, EdgeType>; children: Snippet } = $props();
 </script>
 
 <div

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

@@ -1,8 +1,9 @@
-<script lang="ts">
+<script lang="ts" generics="NodeType extends Node = Node, EdgeType extends Edge = Edge">
   import { PanOnScrollMode, type PanZoomInstance, type Transform } from '@xyflow/system';
 
   import zoom from '$lib/actions/zoom';
   import type { ZoomProps } from './types';
+  import type { Node, Edge } from '$lib/types';
 
   let {
     store = $bindable(),
@@ -19,7 +20,7 @@
     onmoveend,
     oninit,
     children
-  }: ZoomProps = $props();
+  }: ZoomProps<NodeType, EdgeType> = $props();
 
   let panOnDragActive = $derived(store.panActivationKeyPressed || panOnDrag);
   let panOnScrollActive = $derived(store.panActivationKeyPressed || panOnScroll);

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

@@ -1,9 +1,10 @@
 import type { SvelteFlowStore } from '$lib/store/types';
+import type { Edge, Node } from '$lib/types';
 import type { OnMoveStart, OnMove, OnMoveEnd, PanOnScrollMode } from '@xyflow/system';
 import type { Snippet } from 'svelte';
 
-export type ZoomProps = {
-  store: SvelteFlowStore;
+export type ZoomProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
+  store: SvelteFlowStore<NodeType, EdgeType>;
   panOnScrollMode: PanOnScrollMode;
   preventScrolling: boolean;
   zoomOnScroll: boolean;