Merge branch 'xyflow' into feat/ssr

2023-10-23 12:15:21 +02:00
parent ed5606d870 747c136ced
commit d1589bac17
36 changed files with 534 additions and 204 deletions
--- a/examples/svelte/package.json
+++ b/examples/svelte/package.json
@@ -29,6 +29,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@dagrejs/dagre": "^1.0.4",
 		"@xyflow/svelte": "workspace:^"
 	}
 }
--- a/examples/svelte/src/components/Header/Header.svelte
+++ b/examples/svelte/src/components/Header/Header.svelte
@@ -3,21 +3,22 @@
 	import { page } from '$app/stores';

 	const routes = [
+		'add-node-on-drop',
 		'custom-connection-line',
 		'customnode',
+		'dagre',
 		'drag-n-drop',
 		'edges',
 		'figma',
 		'interaction',
+		'intersections',
 		'overview',
 		'stress',
 		'subflows',
 		'two-way-viewport',
 		'usesvelteflow',
 		'useupdatenodeinternals',
-		'validation',
-		'intersections',
-		'add-node-on-drop'
+		'validation'
 	];

 	const onChange = (event: Event) => {
--- a/examples/svelte/src/routes/dagre/+page.svelte
+++ b/examples/svelte/src/routes/dagre/+page.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import { SvelteFlow, Background, Position, ConnectionLineType, Panel } from '@xyflow/svelte';
+  import type { Edge, Node } from '@xyflow/svelte';
+  import dagre from '@dagrejs/dagre';
+
+  import '@xyflow/svelte/dist/style.css';
+
+  import { initialNodes, initialEdges } from './nodes-and-edges';
+
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+  const nodeWidth = 172;
+  const nodeHeight = 36;
+
+  function getLayoutedElements(nodes: Node[], edges: Edge[], direction = 'TB') {
+    const isHorizontal = direction === 'LR';
+    dagreGraph.setGraph({ rankdir: direction });
+
+    nodes.forEach((node) => {
+      dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+    });
+
+    edges.forEach((edge) => {
+      dagreGraph.setEdge(edge.source, edge.target);
+    });
+
+    dagre.layout(dagreGraph);
+
+    nodes.forEach((node) => {
+      const nodeWithPosition = dagreGraph.node(node.id);
+      node.targetPosition = isHorizontal ? Position.Left : Position.Top;
+      node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
+
+      // We are shifting the dagre node position (anchor=center center) to the top left
+      // so it matches the React Flow node anchor point (top left).
+      node.position = {
+        x: nodeWithPosition.x - nodeWidth / 2,
+        y: nodeWithPosition.y - nodeHeight / 2
+      };
+    });
+
+    return { nodes, edges };
+  }
+
+  const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
+    initialNodes,
+    initialEdges
+  );
+
+  const nodes = writable<Node[]>(layoutedNodes);
+  const edges = writable<Edge[]>(layoutedEdges);
+
+  function onLayout(direction: string) {
+    const layoutedElements = getLayoutedElements($nodes, $edges, direction);
+
+    $nodes = layoutedElements.nodes;
+    $edges = layoutedElements.edges;
+    // nodes.set(layoutedElements.nodes);
+    // edges.set(layoutedElements.edges);
+  }
+</script>
+
+<div style="height:100vh;">
+  <SvelteFlow
+    {nodes}
+    {edges}
+    fitView
+    connectionLineType={ConnectionLineType.SmoothStep}
+    defaultEdgeOptions={{ type: 'smoothstep', animated: true }}
+  >
+    <Panel position="top-right">
+      <button on:click={() => onLayout('TB')}>vertical layout</button>
+      <button on:click={() => onLayout('LR')}>horizontal layout</button>
+    </Panel>
+    <Background />
+  </SvelteFlow>
+</div>
--- a/examples/svelte/src/routes/dagre/nodes-and-edges.ts
+++ b/examples/svelte/src/routes/dagre/nodes-and-edges.ts
@@ -0,0 +1,72 @@
+import type { Node, Edge } from '@xyflow/svelte';
+
+const position = { x: 0, y: 0 };
+const edgeType = 'smoothstep';
+
+export const initialNodes: Node[] = [
+	{
+		id: '1',
+		type: 'input',
+		data: { label: 'input' },
+		position
+	},
+	{
+		id: '2',
+		data: { label: 'node 2' },
+		position
+	},
+	{
+		id: '2a',
+		data: { label: 'node 2a' },
+		position
+	},
+	{
+		id: '2b',
+		data: { label: 'node 2b' },
+		position
+	},
+	{
+		id: '2c',
+		data: { label: 'node 2c' },
+		position
+	},
+	{
+		id: '2d',
+		data: { label: 'node 2d' },
+		position
+	},
+	{
+		id: '3',
+		data: { label: 'node 3' },
+		position
+	},
+	{
+		id: '4',
+		data: { label: 'node 4' },
+		position
+	},
+	{
+		id: '5',
+		data: { label: 'node 5' },
+		position
+	},
+	{
+		id: '6',
+		type: 'output',
+		data: { label: 'output' },
+		position
+	},
+	{ id: '7', type: 'output', data: { label: 'output' }, position }
+];
+
+export const initialEdges: Edge[] = [
+	{ id: 'e12', source: '1', target: '2', type: edgeType, animated: true },
+	{ id: 'e13', source: '1', target: '3', type: edgeType, animated: true },
+	{ id: 'e22a', source: '2', target: '2a', type: edgeType, animated: true },
+	{ id: 'e22b', source: '2', target: '2b', type: edgeType, animated: true },
+	{ id: 'e22c', source: '2', target: '2c', type: edgeType, animated: true },
+	{ id: 'e2c2d', source: '2c', target: '2d', type: edgeType, animated: true },
+	{ id: 'e45', source: '4', target: '5', type: edgeType, animated: true },
+	{ id: 'e56', source: '5', target: '6', type: edgeType, animated: true },
+	{ id: 'e57', source: '5', target: '7', type: edgeType, animated: true }
+];
--- a/examples/svelte/src/routes/overview/CustomEdge.svelte
+++ b/examples/svelte/src/routes/overview/CustomEdge.svelte
@@ -2,7 +2,7 @@
 	import {
 		BaseEdge,
 		EdgeLabelRenderer,
-		useSvelteFlow,
+		useEdges,
 		type EdgeProps,
 		getBezierPath
 	} from '@xyflow/svelte';
@@ -18,10 +18,10 @@
 		targetPosition: $$props.targetPosition
 	});

-	const svelteFlow = useSvelteFlow();
+	const edges = useEdges();

 	function onClick() {
-		svelteFlow.edges.update((eds) => eds.filter((e) => e.id !== $$props.id));
+		edges.update((eds) => eds.filter((e) => e.id !== $$props.id));
 	}
 </script>

--- a/examples/svelte/src/styles/base.css
+++ b/examples/svelte/src/styles/base.css
@@ -1,8 +0,0 @@
-/* this gets exported as style.css and can be used for the default theming */
-@import '../../../system/src/styles/init.css';
-@import '../../../system/src/styles/base.css';
-
-.svelte-flow__edge-label {
-  text-align: center;
-  position: absolute;
-}
--- a/examples/svelte/src/styles/style.css
+++ b/examples/svelte/src/styles/style.css
@@ -1,8 +0,0 @@
-/* this gets exported as style.css and can be used for the default theming */
-@import '../../../system/src/styles/init.css';
-@import '../../../system/src/styles/style.css';
-
-.svelte-flow__edge-label {
-  text-align: center;
-  position: absolute;
-}
--- a/packages/react/src/additional-components/Background/Background.tsx
+++ b/packages/react/src/additional-components/Background/Background.tsx
@@ -46,6 +46,8 @@ function Background({
    ? [scaledSize / offset, scaledSize / offset]
    : [patternDimensions[0] / offset, patternDimensions[1] / offset];

+  const _patternId = `${patternId}${id ? id : ''}`;
+
  return (
    <svg
      className={cc(['react-flow__background', className])}
@@ -61,7 +63,7 @@ function Background({
      data-testid="rf__background"
    >
      <pattern
-        id={patternId + id}
+        id={_patternId}
        x={transform[0] % scaledGap[0]}
        y={transform[1] % scaledGap[1]}
        width={scaledGap[0]}
@@ -80,7 +82,7 @@ function Background({
          />
        )}
      </pattern>
-      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId + id})`} />
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${_patternId})`} />
    </svg>
  );
 }
--- a/packages/react/src/components/Nodes/wrapNode.tsx
+++ b/packages/react/src/components/Nodes/wrapNode.tsx
@@ -69,8 +69,9 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
    const onContextMenuHandler = getMouseHandler(id, store.getState, onContextMenu);
    const onDoubleClickHandler = getMouseHandler(id, store.getState, onDoubleClick);
    const onSelectNodeHandler = (event: MouseEvent) => {
-      const { selectNodesOnDrag } = store.getState();
-      if (isSelectable && (!selectNodesOnDrag || !isDraggable)) {
+      const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
+
+      if (isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0)) {
        // this handler gets called within the drag start event when selectNodesOnDrag=true
        handleNodeClick({
          id,
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,3 +1,29 @@
+## 0.0.24
+
+- update node automatically when `type`, `sourcePosition` or `targetPosition` option changes
+- prevent dev tool warnings when using built-in node types
+- updates `useSvelteFlow` hook:
+- add node type "group"
+- add `class` prop for BaseEdge
+- add `id` prop for Background
+- add `selected` prop for MiniMap Node
+- rename Controls prop `showInteractive` to `showLock`
+
+## 0.0.23
+
+- updates `useSvelteFlow` hook:
+  - add `screenToFlowCoordinate` and `flowToScreenCoordinate`
+  - add `getConnectedEdges`, `getIncomers` and `getOutgoers`
+  - add `deleteElements`
+  - add `fitBounds`
+  - add `getIntersectingNodes` and `isNodeIntersecting`
+- add `useConnection` hook
+- add `useNodes` hook
+- add `useEdges` hook
+- add `viewport` prop (writable viewport)
+- fix selection style
+- fix Background component with lines variant
+
 ## 0.0.22

 - add `connectionLine` slot for rendering a custom connection line 
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@xyflow/svelte",
-  "version": "0.0.22",
+  "version": "0.0.24",
  "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
  "keywords": [
    "svelte",
@@ -36,6 +36,7 @@
  "sideEffects": [
    "*.css"
  ],
+  "license": "MIT",
  "publishConfig": {
    "access": "public"
  },
--- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+++ b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
@@ -14,6 +14,8 @@
  export let markerEnd: $$Props['markerEnd'] = undefined;
  export let style: $$Props['style'] = undefined;
  export let interactionWidth: $$Props['interactionWidth'] = 20;
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>

 <path
--- a/packages/svelte/src/lib/components/BaseEdge/types.ts
+++ b/packages/svelte/src/lib/components/BaseEdge/types.ts
@@ -10,4 +10,5 @@ export type BaseEdgeProps = Pick<
  labelY?: number;
  markerStart?: string;
  markerEnd?: string;
+  class?: string;
 };
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -6,7 +6,7 @@

  import { useStore } from '$lib/store';
  import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
-  import type { EdgeLayouted } from '$lib/types';
+  import type { EdgeLayouted, Edge } from '$lib/types';

  type $$Props = EdgeLayouted;

@@ -39,7 +39,10 @@
  export { className as class };

  const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    edgeclick: { edge: Edge; event: MouseEvent | TouchEvent };
+    edgecontextmenu: { edge: Edge; event: MouseEvent };
+  }>();

  $: edgeComponent = $edgeTypes[type!] || BezierEdge;
  $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
@@ -51,12 +54,18 @@
    }

    const edge = $edges.find((e) => e.id === id);
-    dispatch('edgeclick', { event, edge });
+
+    if (edge) {
+      dispatch('edgeclick', { event, edge });
+    }
  }

  function onContextMenu(event: MouseEvent) {
    const edge = $edges.find((e) => e.id === id);
-    dispatch('edgecontextmenu', { event, edge });
+
+    if (edge) {
+      dispatch('edgecontextmenu', { event, edge });
+    }
  }
 </script>

--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
  import { getContext, createEventDispatcher } from 'svelte';
  import cc from 'classcat';
-  import { Position, XYHandle, isMouseEvent } from '@xyflow/system';
+  import {
+    Position,
+    XYHandle,
+    isMouseEvent,
+    type Connection,
+    type HandleType
+  } from '@xyflow/system';

  import { useStore } from '$lib/store';
  import type { HandleComponentProps } from '$lib/types';
@@ -26,7 +32,18 @@
  $: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;

  const handleId = id || null;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    connect: { connection: Connection };
+    connectstart: {
+      event: MouseEvent | TouchEvent;
+      nodeId: string | null;
+      handleId: string | null;
+      handleType: HandleType | null;
+    };
+    connectend: {
+      event: MouseEvent | TouchEvent;
+    };
+  }>();

  const store = useStore();
  const {
--- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
@@ -17,14 +17,9 @@
    class="selection-wrapper nopan"
    style="width: {rect.width}px; height: {rect.height}px; transform: translate({rect.x}px, {rect.y}px)"
    use:drag={{ disabled: false, store }}
-  />
-  <Selection
-    isVisible={$selectionRectMode === 'nodes'}
-    width={rect.width}
-    height={rect.height}
-    x={rect.x}
-    y={rect.y}
-  />
+  >
+    <Selection width="100%" height="100%" x={0} y={0} />
+  </div>
 {/if}

 <style>
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -9,13 +9,14 @@
    type ComponentType
  } from 'svelte';
  import cc from 'classcat';
-  import { errorMessages, type NodeProps } from '@xyflow/system';
+  import { get, writable } from 'svelte/store';
+  import { errorMessages, Position, type NodeProps } from '@xyflow/system';

  import drag from '$lib/actions/drag';
  import { useStore } from '$lib/store';
  import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
  import type { NodeWrapperProps } from './types';
-  import { writable } from 'svelte/store';
+  import type { Node } from '$lib/types';

  interface $$Props extends NodeWrapperProps {}

@@ -42,25 +43,63 @@
  export { className as class };

  const store = useStore();
-  const { nodeTypes, addSelectedNodes } = store;
+  const { nodeTypes, nodeDragThreshold, addSelectedNodes, updateNodeDimensions } = store;
+  const nodeType = type || 'default';

  let nodeRef: HTMLDivElement;
-  const nodeTypeValid = !!$nodeTypes[type!];
+  const nodeTypeValid = !!$nodeTypes[nodeType];

  if (!nodeTypeValid) {
    console.warn('003', errorMessages['error003'](type!));
-    type = 'default';
  }

-  const nodeComponent: ComponentType<SvelteComponent<NodeProps>> = $nodeTypes[type!] || DefaultNode;
+  const nodeComponent: ComponentType<SvelteComponent<NodeProps>> =
+    $nodeTypes[nodeType] || DefaultNode;
  const selectNodesOnDrag = false;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    nodeclick: { node: Node; event: MouseEvent | TouchEvent };
+    nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
+    nodedrag: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodedragstart: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodedragstop: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
+    nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
+    nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
+  }>();
  const connectableStore = writable(connectable);
+  let prevType: string | undefined = undefined;
+  let prevSourcePosition: Position | undefined = undefined;
+  let prevTargetPosition: Position | undefined = undefined;

  $: {
    connectableStore.set(!!connectable);
  }

+  $: {
+    // if type, sourcePosition or targetPosition changes,
+    // we need to re-calculate the handle positions
+    const doUpdate =
+      (prevType && nodeType !== prevType) ||
+      (prevSourcePosition && sourcePosition !== prevSourcePosition) ||
+      (prevTargetPosition && targetPosition !== prevTargetPosition);
+
+    if (doUpdate) {
+      requestAnimationFrame(() =>
+        updateNodeDimensions([
+          {
+            id,
+            nodeElement: nodeRef,
+            forceUpdate: true
+          }
+        ])
+      );
+    }
+
+    prevType = nodeType;
+    prevSourcePosition = sourcePosition;
+    prevTargetPosition = targetPosition;
+  }
+
  setContext('svelteflow__node_id', id);
  setContext('svelteflow__node_connectable', connectableStore);

@@ -73,7 +112,7 @@
  });

  function onSelectNodeHandler(event: MouseEvent | TouchEvent) {
-    if (selectable && (!selectNodesOnDrag || !draggable)) {
+    if (selectable && (!selectNodesOnDrag || !draggable || get(nodeDragThreshold) > 0)) {
      // this handler gets called within the drag start event when selectNodesOnDrag=true
      addSelectedNodes([id]);
    }
@@ -108,7 +147,7 @@
    }}
    bind:this={nodeRef}
    data-id={id}
-    class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])}
+    class={cc(['svelte-flow__node', `svelte-flow__node-${nodeType}`, className])}
    class:dragging
    class:selected
    class:draggable
--- a/packages/svelte/src/lib/components/Selection/Selection.svelte
+++ b/packages/svelte/src/lib/components/Selection/Selection.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
  export let x: number | null = 0;
  export let y: number | null = 0;
-  export let width: number | null = 0;
-  export let height: number | null = 0;
+  export let width: number | string | null = 0;
+  export let height: number | string | null = 0;
  export let isVisible: boolean = true;
 </script>

 {#if isVisible}
  <div
    class="svelte-flow__selection"
-    style="width: {width}px; height: {height}px; transform: translate({x}px, {y}px)"
+    style:width={typeof width === 'string' ? width : `${width}px`}
+    style:height={typeof height === 'string' ? height : `${height}px`}
+    style:transform={`translate(${x}px, ${y}px)`}
  />
 {/if}

--- a/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/DefaultNode.svelte
@@ -8,6 +8,28 @@
  export let data: $$Props['data'] = { label: 'Node' };
  export let targetPosition: $$Props['targetPosition'] = Position.Top;
  export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
+
+  // unused props - we need to list them here in order to prevent warnings
+  export let id: $$Props['id'] = '';
+  export let selected: $$Props['selected'] = undefined;
+  export let type: $$Props['type'] = undefined;
+  export let zIndex: $$Props['zIndex'] = undefined;
+  export let dragging: $$Props['dragging'] = false;
+  export let dragHandle: $$Props['dragHandle'] = undefined;
+  export let xPos: $$Props['xPos'] = 0;
+  export let yPos: $$Props['yPos'] = 0;
+  export let isConnectable: $$Props['isConnectable'] = undefined;
+
+  // @todo: there must be a better way to do this
+  id;
+  selected;
+  type;
+  zIndex;
+  dragging;
+  dragHandle;
+  xPos;
+  yPos;
+  isConnectable;
 </script>

 <Handle type="target" position={targetPosition} on:connectstart on:connect on:connectend />
--- a/packages/svelte/src/lib/components/nodes/GroupNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/GroupNode.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { NodeProps } from '@xyflow/system';
+
+  interface $$Props extends NodeProps<{}> {}
+
+  // unused props - we need to list them here in order to prevent warnings
+  export let id: $$Props['id'] = '';
+  export let data: $$Props['data'] = {};
+  export let selected: $$Props['selected'] = undefined;
+  export let sourcePosition: $$Props['sourcePosition'] = undefined;
+  export let targetPosition: $$Props['targetPosition'] = undefined;
+  export let type: $$Props['type'] = undefined;
+  export let zIndex: $$Props['zIndex'] = undefined;
+  export let dragging: $$Props['dragging'] = false;
+  export let dragHandle: $$Props['dragHandle'] = undefined;
+  export let xPos: $$Props['xPos'] = 0;
+  export let yPos: $$Props['yPos'] = 0;
+  export let isConnectable: $$Props['isConnectable'] = undefined;
+
+  // @todo: there must be a better way to do this
+  id;
+  data;
+  selected;
+  sourcePosition;
+  targetPosition;
+  type;
+  zIndex;
+  dragging;
+  dragHandle;
+  xPos;
+  yPos;
+  isConnectable;
+</script>
--- a/packages/svelte/src/lib/components/nodes/InputNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/InputNode.svelte
@@ -7,6 +7,30 @@

  export let data: $$Props['data'] = { label: 'Node' };
  export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
+
+  // unused props - we need to list them here in order to prevent warnings
+  export let id: $$Props['id'] = '';
+  export let selected: $$Props['selected'] = undefined;
+  export let targetPosition: $$Props['targetPosition'] = undefined;
+  export let type: $$Props['type'] = undefined;
+  export let zIndex: $$Props['zIndex'] = undefined;
+  export let dragging: $$Props['dragging'] = false;
+  export let dragHandle: $$Props['dragHandle'] = undefined;
+  export let xPos: $$Props['xPos'] = 0;
+  export let yPos: $$Props['yPos'] = 0;
+  export let isConnectable: $$Props['isConnectable'] = undefined;
+
+  // @todo: there must be a better way to do this
+  id;
+  selected;
+  targetPosition;
+  type;
+  zIndex;
+  dragging;
+  dragHandle;
+  xPos;
+  yPos;
+  isConnectable;
 </script>

 {data?.label}
--- a/packages/svelte/src/lib/components/nodes/OutputNode.svelte
+++ b/packages/svelte/src/lib/components/nodes/OutputNode.svelte
@@ -7,6 +7,30 @@

  export let data: $$Props['data'] = { label: 'Node' };
  export let targetPosition: $$Props['targetPosition'] = Position.Top;
+
+  // unused props - we need to list them here in order to prevent warnings
+  export let id: $$Props['id'] = '';
+  export let selected: $$Props['selected'] = undefined;
+  export let sourcePosition: $$Props['sourcePosition'] = undefined;
+  export let type: $$Props['type'] = undefined;
+  export let zIndex: $$Props['zIndex'] = undefined;
+  export let dragging: $$Props['dragging'] = false;
+  export let dragHandle: $$Props['dragHandle'] = undefined;
+  export let xPos: $$Props['xPos'] = 0;
+  export let yPos: $$Props['yPos'] = 0;
+  export let isConnectable: $$Props['isConnectable'] = undefined;
+
+  // @todo: there must be a better way to do this
+  id;
+  selected;
+  sourcePosition;
+  type;
+  zIndex;
+  dragging;
+  dragHandle;
+  xPos;
+  yPos;
+  isConnectable;
 </script>

 {data?.label}
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -29,7 +29,34 @@
          ($elementsSelectable && typeof edge.selectable === 'undefined')
        )}

-        <EdgeWrapper {...edge} type={edgeType} {selectable} on:edgeclick on:edgecontextmenu />
+        <EdgeWrapper
+          id={edge.id}
+          source={edge.source}
+          target={edge.target}
+          data={edge.data}
+          style={edge.style}
+          animated={edge.animated}
+          selected={edge.selected}
+          hidden={edge.hidden}
+          label={edge.label}
+          labelStyle={edge.labelStyle}
+          markerStart={edge.markerStart}
+          markerEnd={edge.markerEnd}
+          sourceHandle={edge.sourceHandle}
+          targetHandle={edge.targetHandle}
+          sourceX={edge.sourceX}
+          sourceY={edge.sourceY}
+          targetX={edge.targetX}
+          targetY={edge.targetY}
+          sourcePosition={edge.sourcePosition}
+          targetPosition={edge.targetPosition}
+          ariaLabel={edge.ariaLabel}
+          class={edge.class}
+          type={edgeType}
+          {selectable}
+          on:edgeclick
+          on:edgecontextmenu
+        />
      {/each}
    </g>
  </svg>
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -41,7 +41,14 @@

  export let panOnDrag: $$Props['panOnDrag'] = undefined;

-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    paneclick: {
+      event: MouseEvent | TouchEvent;
+    };
+    panecontextmenu: {
+      event: MouseEvent;
+    };
+  }>();
  const {
    nodes,
    edges,
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -85,25 +85,4 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
  onMove?: OnMove;
  onMoveEnd?: OnMoveEnd;
  onError?: OnError;
-
-  'on:nodeclick'?: CustomEvent<{ event: MouseEvent | TouchEvent; node: Node }>;
-  'on:nodemouseenter'?: CustomEvent<{ event: MouseEvent; node: Node }>;
-  'on:nodemousemove'?: CustomEvent<{ event: MouseEvent; node: Node }>;
-  'on:nodemouseleave'?: CustomEvent<{ event: MouseEvent; node: Node }>;
-  'on:edgeclick'?: CustomEvent<{ event: MouseEvent; edge: Edge }>;
-  'on:edgecontextmenu'?: CustomEvent<{ event: MouseEvent; edge: Edge }>;
-  'on:connectstart'?: CustomEvent<{
-    event: MouseEvent | TouchEvent;
-    nodeId?: string;
-    handleId?: string;
-    handleType?: HandleType;
-  }>;
-  'on:connect'?: CustomEvent<{ connection: Connection }>;
-  'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
-  'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
-  'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>;
-  'on:nodedragstart'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodedrag'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodedragstop'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodecontextmenu'?: CustomEvent<{ event: MouseEvent; node: NodeBase }>;
 };
--- a/packages/svelte/src/lib/plugins/Background/Background.svelte
+++ b/packages/svelte/src/lib/plugins/Background/Background.svelte
@@ -16,6 +16,7 @@

  type $$Props = BackgroundProps;

+  export let id: $$Props['id'] = undefined;
  export let variant: $$Props['variant'] = BackgroundVariant.Dots;
  export let gap: $$Props['gap'] = 20;
  export let size: $$Props['size'] = 1;
@@ -32,7 +33,7 @@
  const isCross = variant === BackgroundVariant.Cross;
  const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!];

-  $: patternId = `background-pattern-${$flowId}`;
+  $: patternId = `background-pattern-${$flowId}-${id ? id : ''}`;
  $: scaledGap = [gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1];
  $: scaledSize = patternSize * $viewport.zoom;
  $: patternDimensions = (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number];
--- a/packages/svelte/src/lib/plugins/Background/types.ts
+++ b/packages/svelte/src/lib/plugins/Background/types.ts
@@ -5,6 +5,7 @@ export enum BackgroundVariant {
 }

 export type BackgroundProps = {
+  id?: string;
  bgColor?: string;
  patternColor?: string;
  patternClass?: string;
--- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
@@ -15,7 +15,7 @@
  export let position: $$Props['position'] = 'bottom-left';
  export let showZoom: $$Props['showZoom'] = true;
  export let showFitView: $$Props['showFitView'] = true;
-  export let showInteractive: $$Props['showInteractive'] = true;
+  export let showLock: $$Props['showLock'] = true;
  export let buttonBgColor: $$Props['buttonBgColor'] = undefined;
  export let buttonBgColorHover: $$Props['buttonBgColorHover'] = undefined;
  export let buttonColor: $$Props['buttonColor'] = undefined;
@@ -101,7 +101,7 @@
      <FitViewIcon />
    </ControlButton>
  {/if}
-  {#if showInteractive}
+  {#if showLock}
    <ControlButton
      class="svelte-flow__controls-interactive"
      on:click={onToggleInteractivity}
--- a/packages/svelte/src/lib/plugins/Controls/types.ts
+++ b/packages/svelte/src/lib/plugins/Controls/types.ts
@@ -4,7 +4,7 @@ export type ControlsProps = {
  position?: PanelPosition;
  showZoom?: boolean;
  showFitView?: boolean;
-  showInteractive?: boolean;
+  showLock?: boolean;
  buttonBgColor?: string;
  buttonBgColorHover?: string;
  buttonColor?: string;
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -121,6 +121,7 @@
            y={pos.y}
            width={node.width}
            height={node.height}
+            selected={node.selected}
            color={nodeColorFunc(node)}
            borderRadius={nodeBorderRadius}
            strokeColor={nodeStrokeColorFunc(node)}
--- a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
@@ -10,12 +10,14 @@
  export let shapeRendering: string;
  export let strokeColor: string;
  export let strokeWidth: number = 2;
+  export let selected: boolean = false;
  let className: string = '';
  export { className as class };
 </script>

 <rect
  class={cc(['svelte-flow__minimap-node', className])}
+  class:selected
  {x}
  {y}
  rx={borderRadius}
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -20,6 +20,7 @@ import {
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
 import InputNode from '$lib/components/nodes/InputNode.svelte';
 import OutputNode from '$lib/components/nodes/OutputNode.svelte';
+import GroupNode from '$lib/components/nodes/GroupNode.svelte';
 import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
 import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
@@ -31,7 +32,8 @@ import { initConnectionProps, type ConnectionProps } from './derived-connection-
 export const initialNodeTypes = {
  input: InputNode,
  output: OutputNode,
-  default: DefaultNode
+  default: DefaultNode,
+  group: GroupNode
 };

 export const initialEdgeTypes = {
--- a/packages/svelte/src/lib/types/edges.ts
+++ b/packages/svelte/src/lib/types/edges.ts
@@ -10,13 +10,11 @@ import type {

 import type { Node } from '$lib/types';

-export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> & {
+export type DefaultEdge<EdgeData = any> = Omit<EdgeBase<EdgeData>, 'focusable'> & {
  label?: string;
  labelStyle?: string;
  style?: string;
  class?: string;
-  sourceNode?: Node;
-  targetNode?: Node;
 };

 type SmoothStepEdgeType<T> = DefaultEdge<T> & {
@@ -47,7 +45,7 @@ export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &

 export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;

-export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
+export type DefaultEdgeOptions = Omit<DefaultEdgeOptionsBase<Edge>, 'focusable'>;

 export type EdgeLayouted = Pick<
  Edge,
@@ -72,6 +70,8 @@ export type EdgeLayouted = Pick<
  | 'class'
 > &
  EdgePosition & {
+    sourceNode?: Node;
+    targetNode?: Node;
    sourceHandleId?: string | null;
    targetHandleId?: string | null;
  };
--- a/packages/svelte/src/styles/style.css
+++ b/packages/svelte/src/styles/style.css
@@ -7,3 +7,11 @@
  position: absolute;
  font-size: 10px;
 }
+
+.svelte-flow__nodes {
+  z-index: 0;
+}
+
+.svelte-flow__edgelabel-renderer {
+  z-index: 0;
+}
--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@xyflow/system",
-  "version": "0.0.7",
+  "version": "0.0.8",
  "description": "xyflow core system that powers React Flow and Svelte Flow.",
  "keywords": [
    "node-based UI",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,10 +16,10 @@ importers:
        version: registry.npmjs.org/@changesets/cli@2.26.1
      '@typescript-eslint/eslint-plugin':
        specifier: latest
-        version: registry.npmjs.org/@typescript-eslint/eslint-plugin@6.5.0(@typescript-eslint/parser@6.7.5)(eslint@8.42.0)(typescript@5.1.3)
+        version: registry.npmjs.org/@typescript-eslint/eslint-plugin@6.8.0(@typescript-eslint/parser@6.8.0)(eslint@8.42.0)(typescript@5.1.3)
      '@typescript-eslint/parser':
        specifier: latest
-        version: registry.npmjs.org/@typescript-eslint/parser@6.7.5(eslint@8.42.0)(typescript@5.1.3)
+        version: registry.npmjs.org/@typescript-eslint/parser@6.8.0(eslint@8.42.0)(typescript@5.1.3)
      concurrently:
        specifier: ^7.6.0
        version: registry.npmjs.org/concurrently@7.6.0
@@ -187,6 +187,9 @@ importers:

  examples/svelte:
    dependencies:
+      '@dagrejs/dagre':
+        specifier: ^1.0.4
+        version: registry.npmjs.org/@dagrejs/dagre@1.0.4
      '@xyflow/svelte':
        specifier: workspace:^
        version: link:../../packages/svelte
@@ -454,7 +457,7 @@ importers:
        version: registry.npmjs.org/eslint-config-prettier@8.8.0(eslint@8.42.0)
      eslint-config-turbo:
        specifier: latest
-        version: registry.npmjs.org/eslint-config-turbo@1.10.13(eslint@8.42.0)
+        version: registry.npmjs.org/eslint-config-turbo@1.10.15(eslint@8.42.0)
      eslint-plugin-react:
        specifier: latest
        version: registry.npmjs.org/eslint-plugin-react@7.33.2(eslint@8.42.0)
@@ -1218,6 +1221,21 @@ packages:
      - supports-color
    dev: true

+  registry.npmjs.org/@dagrejs/dagre@1.0.4:
+    resolution: {integrity: sha512-jrEore+HhW1yg1Rsd9H1PPMcoEOD4bVh0WCXc6GqzyzubnJj4GaWGg8ETOrskTd/3n/g5LOzumGM4CCgpNLJNw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@dagrejs/dagre/-/dagre-1.0.4.tgz}
+    name: '@dagrejs/dagre'
+    version: 1.0.4
+    dependencies:
+      '@dagrejs/graphlib': registry.npmjs.org/@dagrejs/graphlib@2.1.13
+    dev: false
+
+  registry.npmjs.org/@dagrejs/graphlib@2.1.13:
+    resolution: {integrity: sha512-calbMa7Gcyo+/t23XBaqQqon8LlgE9regey4UVoikoenKBXvUnCUL3s9RP6USCxttfr0XWVICtYUuKMdehKqMw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@dagrejs/graphlib/-/graphlib-2.1.13.tgz}
+    name: '@dagrejs/graphlib'
+    version: 2.1.13
+    engines: {node: '>17.0.0'}
+    dev: false
+
  registry.npmjs.org/@esbuild/android-arm64@0.18.20:
    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz}
    name: '@esbuild/android-arm64'
@@ -3008,11 +3026,11 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/eslint-plugin@6.5.0(@typescript-eslint/parser@6.7.5)(eslint@8.42.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-2pktILyjvMaScU6iK3925uvGU87E+N9rh372uGZgiMYwafaw9SXq86U04XPq3UH6tzRvNgBsub6x2DacHc33lw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.5.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/6.5.0
+  registry.npmjs.org/@typescript-eslint/eslint-plugin@6.8.0(@typescript-eslint/parser@6.8.0)(eslint@8.42.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-GosF4238Tkes2SHPQ1i8f6rMtG6zlKwMEB0abqSJ3Npvos+doIlc/ATG+vX1G9coDF3Ex78zM3heXHLyWEwLUw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.8.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/eslint-plugin/6.8.0
    name: '@typescript-eslint/eslint-plugin'
-    version: 6.5.0
+    version: 6.8.0
    engines: {node: ^16.0.0 || >=18.0.0}
    peerDependencies:
      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
@@ -3023,11 +3041,11 @@ packages:
        optional: true
    dependencies:
      '@eslint-community/regexpp': registry.npmjs.org/@eslint-community/regexpp@4.6.2
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser@6.7.5(eslint@8.42.0)(typescript@5.1.3)
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager@6.5.0
-      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils@6.5.0(eslint@8.42.0)(typescript@5.1.3)
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils@6.5.0(eslint@8.42.0)(typescript@5.1.3)
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys@6.5.0
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser@6.8.0(eslint@8.42.0)(typescript@5.1.3)
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager@6.8.0
+      '@typescript-eslint/type-utils': registry.npmjs.org/@typescript-eslint/type-utils@6.8.0(eslint@8.42.0)(typescript@5.1.3)
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils@6.8.0(eslint@8.42.0)(typescript@5.1.3)
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys@6.8.0
      debug: registry.npmjs.org/debug@4.3.4(supports-color@8.1.1)
      eslint: registry.npmjs.org/eslint@8.42.0
      graphemer: registry.npmjs.org/graphemer@1.4.0
@@ -3063,11 +3081,11 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/parser@6.7.5(eslint@8.42.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-bIZVSGx2UME/lmhLcjdVc7ePBwn7CLqKarUBL4me1C5feOd663liTGjMBGVcGr+BhnSLeP4SgwdvNnnkbIdkCw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.7.5.tgz}
-    id: registry.npmjs.org/@typescript-eslint/parser/6.7.5
+  registry.npmjs.org/@typescript-eslint/parser@6.8.0(eslint@8.42.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-5tNs6Bw0j6BdWuP8Fx+VH4G9fEPDxnVI7yH1IAPkQH5RUtvKwRoqdecAPdQXv4rSOADAaz1LFBZvZG7VbXivSg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.8.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/parser/6.8.0
    name: '@typescript-eslint/parser'
-    version: 6.7.5
+    version: 6.8.0
    engines: {node: ^16.0.0 || >=18.0.0}
    peerDependencies:
      eslint: ^7.0.0 || ^8.0.0
@@ -3076,10 +3094,10 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager@6.7.5
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.7.5
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree@6.7.5(typescript@5.1.3)
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys@6.7.5
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager@6.8.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.8.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree@6.8.0(typescript@5.1.3)
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys@6.8.0
      debug: registry.npmjs.org/debug@4.3.4(supports-color@8.1.1)
      eslint: registry.npmjs.org/eslint@8.42.0
      typescript: registry.npmjs.org/typescript@5.1.3
@@ -3097,24 +3115,14 @@ packages:
      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys@5.60.0
    dev: true

-  registry.npmjs.org/@typescript-eslint/scope-manager@6.5.0:
-    resolution: {integrity: sha512-A8hZ7OlxURricpycp5kdPTH3XnjG85UpJS6Fn4VzeoH4T388gQJ/PGP4ole5NfKt4WDVhmLaQ/dBLNDC4Xl/Kw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.5.0.tgz}
+  registry.npmjs.org/@typescript-eslint/scope-manager@6.8.0:
+    resolution: {integrity: sha512-xe0HNBVwCph7rak+ZHcFD6A+q50SMsFwcmfdjs9Kz4qDh5hWhaPhFjRs/SODEhroBI5Ruyvyz9LfwUJ624O40g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.8.0.tgz}
    name: '@typescript-eslint/scope-manager'
-    version: 6.5.0
+    version: 6.8.0
    engines: {node: ^16.0.0 || >=18.0.0}
    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.5.0
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys@6.5.0
-    dev: true
-
-  registry.npmjs.org/@typescript-eslint/scope-manager@6.7.5:
-    resolution: {integrity: sha512-GAlk3eQIwWOJeb9F7MKQ6Jbah/vx1zETSDw8likab/eFcqkjSD7BI75SDAeC5N2L0MmConMoPvTsmkrg71+B1A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.7.5.tgz}
-    name: '@typescript-eslint/scope-manager'
-    version: 6.7.5
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.7.5
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys@6.7.5
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.8.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys@6.8.0
    dev: true

  registry.npmjs.org/@typescript-eslint/type-utils@5.60.0(eslint@8.43.0)(typescript@5.1.3):
@@ -3140,11 +3148,11 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/type-utils@6.5.0(eslint@8.42.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-f7OcZOkRivtujIBQ4yrJNIuwyCQO1OjocVqntl9dgSIZAdKqicj3xFDqDOzHDlGCZX990LqhLQXWRnQvsapq8A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.5.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/type-utils/6.5.0
+  registry.npmjs.org/@typescript-eslint/type-utils@6.8.0(eslint@8.42.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-RYOJdlkTJIXW7GSldUIHqc/Hkto8E+fZN96dMIFhuTJcQwdRoGN2rEWA8U6oXbLo0qufH7NPElUb+MceHtz54g==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.8.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/type-utils/6.8.0
    name: '@typescript-eslint/type-utils'
-    version: 6.5.0
+    version: 6.8.0
    engines: {node: ^16.0.0 || >=18.0.0}
    peerDependencies:
      eslint: ^7.0.0 || ^8.0.0
@@ -3153,8 +3161,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree@6.5.0(typescript@5.1.3)
-      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils@6.5.0(eslint@8.42.0)(typescript@5.1.3)
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree@6.8.0(typescript@5.1.3)
+      '@typescript-eslint/utils': registry.npmjs.org/@typescript-eslint/utils@6.8.0(eslint@8.42.0)(typescript@5.1.3)
      debug: registry.npmjs.org/debug@4.3.4(supports-color@8.1.1)
      eslint: registry.npmjs.org/eslint@8.42.0
      ts-api-utils: registry.npmjs.org/ts-api-utils@1.0.1(typescript@5.1.3)
@@ -3170,17 +3178,10 @@ packages:
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  registry.npmjs.org/@typescript-eslint/types@6.5.0:
-    resolution: {integrity: sha512-eqLLOEF5/lU8jW3Bw+8auf4lZSbbljHR2saKnYqON12G/WsJrGeeDHWuQePoEf9ro22+JkbPfWQwKEC5WwLQ3w==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-6.5.0.tgz}
+  registry.npmjs.org/@typescript-eslint/types@6.8.0:
+    resolution: {integrity: sha512-p5qOxSum7W3k+llc7owEStXlGmSl8FcGvhYt8Vjy7FqEnmkCVlM3P57XQEGj58oqaBWDQXbJDZxwUWMS/EAPNQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-6.8.0.tgz}
    name: '@typescript-eslint/types'
-    version: 6.5.0
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dev: true
-
-  registry.npmjs.org/@typescript-eslint/types@6.7.5:
-    resolution: {integrity: sha512-WboQBlOXtdj1tDFPyIthpKrUb+kZf2VroLZhxKa/VlwLlLyqv/PwUNgL30BlTVZV1Wu4Asu2mMYPqarSO4L5ZQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/types/-/types-6.7.5.tgz}
-    name: '@typescript-eslint/types'
-    version: 6.7.5
+    version: 6.8.0
    engines: {node: ^16.0.0 || >=18.0.0}
    dev: true

@@ -3208,11 +3209,11 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/@typescript-eslint/typescript-estree@6.5.0(typescript@5.1.3):
-    resolution: {integrity: sha512-q0rGwSe9e5Kk/XzliB9h2LBc9tmXX25G0833r7kffbl5437FPWb2tbpIV9wAATebC/018pGa9fwPDuvGN+LxWQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.5.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/typescript-estree/6.5.0
+  registry.npmjs.org/@typescript-eslint/typescript-estree@6.8.0(typescript@5.1.3):
+    resolution: {integrity: sha512-ISgV0lQ8XgW+mvv5My/+iTUdRmGspducmQcDw5JxznasXNnZn3SKNrTRuMsEXv+V/O+Lw9AGcQCfVaOPCAk/Zg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.8.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/typescript-estree/6.8.0
    name: '@typescript-eslint/typescript-estree'
-    version: 6.5.0
+    version: 6.8.0
    engines: {node: ^16.0.0 || >=18.0.0}
    peerDependencies:
      typescript: '*'
@@ -3220,32 +3221,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.5.0
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys@6.5.0
-      debug: registry.npmjs.org/debug@4.3.4(supports-color@8.1.1)
-      globby: registry.npmjs.org/globby@11.1.0
-      is-glob: registry.npmjs.org/is-glob@4.0.3
-      semver: registry.npmjs.org/semver@7.5.4
-      ts-api-utils: registry.npmjs.org/ts-api-utils@1.0.1(typescript@5.1.3)
-      typescript: registry.npmjs.org/typescript@5.1.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  registry.npmjs.org/@typescript-eslint/typescript-estree@6.7.5(typescript@5.1.3):
-    resolution: {integrity: sha512-NhJiJ4KdtwBIxrKl0BqG1Ur+uw7FiOnOThcYx9DpOGJ/Abc9z2xNzLeirCG02Ig3vkvrc2qFLmYSSsaITbKjlg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.7.5.tgz}
-    id: registry.npmjs.org/@typescript-eslint/typescript-estree/6.7.5
-    name: '@typescript-eslint/typescript-estree'
-    version: 6.7.5
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.7.5
-      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys@6.7.5
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.8.0
+      '@typescript-eslint/visitor-keys': registry.npmjs.org/@typescript-eslint/visitor-keys@6.8.0
      debug: registry.npmjs.org/debug@4.3.4(supports-color@8.1.1)
      globby: registry.npmjs.org/globby@11.1.0
      is-glob: registry.npmjs.org/is-glob@4.0.3
@@ -3279,11 +3256,11 @@ packages:
      - typescript
    dev: true

-  registry.npmjs.org/@typescript-eslint/utils@6.5.0(eslint@8.42.0)(typescript@5.1.3):
-    resolution: {integrity: sha512-9nqtjkNykFzeVtt9Pj6lyR9WEdd8npPhhIPM992FWVkZuS6tmxHfGVnlUcjpUP2hv8r4w35nT33mlxd+Be1ACQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.5.0.tgz}
-    id: registry.npmjs.org/@typescript-eslint/utils/6.5.0
+  registry.npmjs.org/@typescript-eslint/utils@6.8.0(eslint@8.42.0)(typescript@5.1.3):
+    resolution: {integrity: sha512-dKs1itdE2qFG4jr0dlYLQVppqTE+Itt7GmIf/vX6CSvsW+3ov8PbWauVKyyfNngokhIO9sKZeRGCUo1+N7U98Q==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.8.0.tgz}
+    id: registry.npmjs.org/@typescript-eslint/utils/6.8.0
    name: '@typescript-eslint/utils'
-    version: 6.5.0
+    version: 6.8.0
    engines: {node: ^16.0.0 || >=18.0.0}
    peerDependencies:
      eslint: ^7.0.0 || ^8.0.0
@@ -3291,9 +3268,9 @@ packages:
      '@eslint-community/eslint-utils': registry.npmjs.org/@eslint-community/eslint-utils@4.4.0(eslint@8.42.0)
      '@types/json-schema': registry.npmjs.org/@types/json-schema@7.0.12
      '@types/semver': registry.npmjs.org/@types/semver@7.5.0
-      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager@6.5.0
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.5.0
-      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree@6.5.0(typescript@5.1.3)
+      '@typescript-eslint/scope-manager': registry.npmjs.org/@typescript-eslint/scope-manager@6.8.0
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.8.0
+      '@typescript-eslint/typescript-estree': registry.npmjs.org/@typescript-eslint/typescript-estree@6.8.0(typescript@5.1.3)
      eslint: registry.npmjs.org/eslint@8.42.0
      semver: registry.npmjs.org/semver@7.5.4
    transitivePeerDependencies:
@@ -3311,23 +3288,13 @@ packages:
      eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys@3.4.3
    dev: true

-  registry.npmjs.org/@typescript-eslint/visitor-keys@6.5.0:
-    resolution: {integrity: sha512-yCB/2wkbv3hPsh02ZS8dFQnij9VVQXJMN/gbQsaaY+zxALkZnxa/wagvLEFsAWMPv7d7lxQmNsIzGU1w/T/WyA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.5.0.tgz}
+  registry.npmjs.org/@typescript-eslint/visitor-keys@6.8.0:
+    resolution: {integrity: sha512-oqAnbA7c+pgOhW2OhGvxm0t1BULX5peQI/rLsNDpGM78EebV3C9IGbX5HNZabuZ6UQrYveCLjKo8Iy/lLlBkkg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.8.0.tgz}
    name: '@typescript-eslint/visitor-keys'
-    version: 6.5.0
+    version: 6.8.0
    engines: {node: ^16.0.0 || >=18.0.0}
    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.5.0
-      eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys@3.4.3
-    dev: true
-
-  registry.npmjs.org/@typescript-eslint/visitor-keys@6.7.5:
-    resolution: {integrity: sha512-3MaWdDZtLlsexZzDSdQWsFQ9l9nL8B80Z4fImSpyllFC/KLqWQRdEcB+gGGO+N3Q2uL40EsG66wZLsohPxNXvg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.7.5.tgz}
-    name: '@typescript-eslint/visitor-keys'
-    version: 6.7.5
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.7.5
+      '@typescript-eslint/types': registry.npmjs.org/@typescript-eslint/types@6.8.0
      eslint-visitor-keys: registry.npmjs.org/eslint-visitor-keys@3.4.3
    dev: true

@@ -5378,7 +5345,7 @@ packages:
      eslint: registry.npmjs.org/eslint@8.43.0
      eslint-import-resolver-node: registry.npmjs.org/eslint-import-resolver-node@0.3.9
      eslint-import-resolver-typescript: registry.npmjs.org/eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.60.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.28.1)(eslint@8.43.0)
-      eslint-plugin-import: registry.npmjs.org/eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.7.5)(eslint@8.43.0)
+      eslint-plugin-import: registry.npmjs.org/eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.8.0)(eslint@8.43.0)
      eslint-plugin-jsx-a11y: registry.npmjs.org/eslint-plugin-jsx-a11y@6.7.1(eslint@8.43.0)
      eslint-plugin-react: registry.npmjs.org/eslint-plugin-react@7.33.2(eslint@8.43.0)
      eslint-plugin-react-hooks: registry.npmjs.org/eslint-plugin-react-hooks@4.6.0(eslint@8.43.0)
@@ -5412,16 +5379,16 @@ packages:
      eslint: registry.npmjs.org/eslint@8.43.0
    dev: true

-  registry.npmjs.org/eslint-config-turbo@1.10.13(eslint@8.42.0):
-    resolution: {integrity: sha512-Ffa0SxkRCPMtfUX/HDanEqsWoLwZTQTAXO9W4IsOtycb2MzJDrVcLmoFW5sMwCrg7gjqbrC4ZJoD+1SPPzIVqg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-1.10.13.tgz}
-    id: registry.npmjs.org/eslint-config-turbo/1.10.13
+  registry.npmjs.org/eslint-config-turbo@1.10.15(eslint@8.42.0):
+    resolution: {integrity: sha512-76mpx2x818JZE26euen14utYcFDxOahZ9NaWA+6Xa4pY2ezVKVschuOxS96EQz3o3ZRSmcgBOapw/gHbN+EKxQ==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-1.10.15.tgz}
+    id: registry.npmjs.org/eslint-config-turbo/1.10.15
    name: eslint-config-turbo
-    version: 1.10.13
+    version: 1.10.15
    peerDependencies:
      eslint: '>6.6.0'
    dependencies:
      eslint: registry.npmjs.org/eslint@8.42.0
-      eslint-plugin-turbo: registry.npmjs.org/eslint-plugin-turbo@1.10.13(eslint@8.42.0)
+      eslint-plugin-turbo: registry.npmjs.org/eslint-plugin-turbo@1.10.15(eslint@8.42.0)
    dev: true

  registry.npmjs.org/eslint-import-resolver-node@0.3.9:
@@ -5450,7 +5417,7 @@ packages:
      enhanced-resolve: registry.npmjs.org/enhanced-resolve@5.15.0
      eslint: registry.npmjs.org/eslint@8.43.0
      eslint-module-utils: registry.npmjs.org/eslint-module-utils@2.8.0(@typescript-eslint/parser@5.60.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.43.0)
-      eslint-plugin-import: registry.npmjs.org/eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.7.5)(eslint@8.43.0)
+      eslint-plugin-import: registry.npmjs.org/eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.8.0)(eslint@8.43.0)
      fast-glob: registry.npmjs.org/fast-glob@3.3.1
      get-tsconfig: registry.npmjs.org/get-tsconfig@4.7.2
      is-core-module: registry.npmjs.org/is-core-module@2.13.0
@@ -5495,7 +5462,7 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/eslint-module-utils@2.8.0(@typescript-eslint/parser@6.7.5)(eslint-import-resolver-node@0.3.9)(eslint@8.43.0):
+  registry.npmjs.org/eslint-module-utils@2.8.0(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-node@0.3.9)(eslint@8.43.0):
    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz}
    id: registry.npmjs.org/eslint-module-utils/2.8.0
    name: eslint-module-utils
@@ -5519,7 +5486,7 @@ packages:
      eslint-import-resolver-webpack:
        optional: true
    dependencies:
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser@6.7.5(eslint@8.42.0)(typescript@5.1.3)
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser@6.8.0(eslint@8.42.0)(typescript@5.1.3)
      debug: registry.npmjs.org/debug@3.2.7(supports-color@8.1.1)
      eslint: registry.npmjs.org/eslint@8.43.0
      eslint-import-resolver-node: registry.npmjs.org/eslint-import-resolver-node@0.3.9
@@ -5527,7 +5494,7 @@ packages:
      - supports-color
    dev: true

-  registry.npmjs.org/eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.7.5)(eslint@8.43.0):
+  registry.npmjs.org/eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.8.0)(eslint@8.43.0):
    resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz}
    id: registry.npmjs.org/eslint-plugin-import/2.28.1
    name: eslint-plugin-import
@@ -5540,7 +5507,7 @@ packages:
      '@typescript-eslint/parser':
        optional: true
    dependencies:
-      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser@6.7.5(eslint@8.42.0)(typescript@5.1.3)
+      '@typescript-eslint/parser': registry.npmjs.org/@typescript-eslint/parser@6.8.0(eslint@8.42.0)(typescript@5.1.3)
      array-includes: registry.npmjs.org/array-includes@3.1.6
      array.prototype.findlastindex: registry.npmjs.org/array.prototype.findlastindex@1.2.3
      array.prototype.flat: registry.npmjs.org/array.prototype.flat@1.3.1
@@ -5549,7 +5516,7 @@ packages:
      doctrine: registry.npmjs.org/doctrine@2.1.0
      eslint: registry.npmjs.org/eslint@8.43.0
      eslint-import-resolver-node: registry.npmjs.org/eslint-import-resolver-node@0.3.9
-      eslint-module-utils: registry.npmjs.org/eslint-module-utils@2.8.0(@typescript-eslint/parser@6.7.5)(eslint-import-resolver-node@0.3.9)(eslint@8.43.0)
+      eslint-module-utils: registry.npmjs.org/eslint-module-utils@2.8.0(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-node@0.3.9)(eslint@8.43.0)
      has: registry.npmjs.org/has@1.0.3
      is-core-module: registry.npmjs.org/is-core-module@2.13.0
      is-glob: registry.npmjs.org/is-glob@4.0.3
@@ -5712,11 +5679,11 @@ packages:
      - ts-node
    dev: true

-  registry.npmjs.org/eslint-plugin-turbo@1.10.13(eslint@8.42.0):
-    resolution: {integrity: sha512-el4AAmn0zXmvHEyp1h0IQMfse10Vy8g5Vbg4IU3+vD9CSj5sDbX07iFVt8sCKg7og9Q5FAa9mXzlCf7t4vYgzg==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.13.tgz}
-    id: registry.npmjs.org/eslint-plugin-turbo/1.10.13
+  registry.npmjs.org/eslint-plugin-turbo@1.10.15(eslint@8.42.0):
+    resolution: {integrity: sha512-Tv4QSKV/U56qGcTqS/UgOvb9HcKFmWOQcVh3HEaj7of94lfaENgfrtK48E2CckQf7amhKs1i+imhCsNCKjkQyA==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.15.tgz}
+    id: registry.npmjs.org/eslint-plugin-turbo/1.10.15
    name: eslint-plugin-turbo
-    version: 1.10.13
+    version: 1.10.15
    peerDependencies:
      eslint: '>6.6.0'
    dependencies: