migrating hooks, fixed colorMode

2024-12-17 11:43:36 +01:00
parent efa163203c
commit 0e5df96ecc
29 changed files with 396 additions and 399 deletions
--- a/examples/svelte/package.json
+++ b/examples/svelte/package.json
@@ -13,9 +13,9 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.9.0",
-		"@typescript-eslint/eslint-plugin": "^8.17.0",
-		"@typescript-eslint/parser": "^8.17.0",
+		"@sveltejs/kit": "^2.11.1",
+		"@typescript-eslint/eslint-plugin": "^8.18.0",
+		"@typescript-eslint/parser": "^8.18.0",
 		"eslint": "^8.53.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
@@ -30,7 +30,7 @@
 	"type": "module",
 	"dependencies": {
 		"@dagrejs/dagre": "^1.1.4",
-		"@sveltejs/vite-plugin-svelte": "^5.0.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.2",
 		"@xyflow/svelte": "workspace:^"
 	}
 }
--- a/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
+++ b/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import {
 		SvelteFlow,
+		useConnection,
+		useHandleConnections,
 		useSvelteFlow,
 		type Edge,
 		type Node,
@@ -28,6 +30,10 @@

 	const { screenToFlowPosition, flowToScreenPosition } = $derived(useSvelteFlow());

+	const connections = useHandleConnections({ nodeId: '0', type: 'source' });
+
+	$inspect(connections.current);
+
 	const handleConnectEnd: OnConnectEnd = (event) => {
 		if (!connectingNodeId) return;

@@ -55,12 +61,14 @@
 				origin: [0.5, 0.0]
 			};

-			nodes.push(newNode);
-			// edges.push({
-			// 	source: connectingNodeId,
-			// 	target: id,
-			// 	id: `${connectingNodeId}--${id}`
-			// });
+			nodes = [...nodes, newNode];
+
+			const newEdge = {
+				source: connectingNodeId,
+				target: id,
+				id: `${connectingNodeId}--${id}`
+			};
+			edges = [...edges, newEdge];
 		}
 	};
 </script>
--- a/examples/svelte/src/routes/examples/color-mode/+page.svelte
+++ b/examples/svelte/src/routes/examples/color-mode/+page.svelte
@@ -35,18 +35,18 @@
 		{ id: 'A-D', source: 'A', target: 'D' }
 	]);

-	let colorMode: ColorMode = $state('dark');
+	let colorMode: ColorMode = $state('system');
 </script>

-<SvelteFlow bind:nodes bind:edges {colorMode} fitView>
+<SvelteFlow bind:nodes bind:edges {colorMode} colorModeSSR={'dark'} fitView>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />

 	<Panel>
 		<select bind:value={colorMode} data-testid="colormode-select">
-			<option value="light">light</option>
 			<option value="dark">dark</option>
+			<option value="light">light</option>
 			<option value="system">system</option>
 		</select>
 	</Panel>
--- a/examples/svelte/src/routes/examples/custom-connection-line/ConnectionLine.svelte
+++ b/examples/svelte/src/routes/examples/custom-connection-line/ConnectionLine.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { getBezierPath, useConnection } from '@xyflow/svelte';

-	const connection = $derived(useConnection());
+	const connection = useConnection();

 	let path: string | null = $derived.by(() => {
-		if (connection.inProgress) {
-			const { from, to, fromPosition, toPosition } = connection;
+		if (connection.current.inProgress) {
+			const { from, to, fromPosition, toPosition } = connection.current;
 			const pathParams = {
 				sourceX: from.x,
 				sourceY: from.y,
@@ -21,6 +21,6 @@
 	});
 </script>

-{#if connection.inProgress}
-	<path d={path} fill="none" stroke={connection.fromHandle.id} />
+{#if connection.current.inProgress}
+	<path d={path} fill="none" stroke={connection.current.fromHandle.id} />
 {/if}
--- a/examples/svelte/src/routes/examples/dagre/+page.svelte
+++ b/examples/svelte/src/routes/examples/dagre/+page.svelte
@@ -1,5 +1,4 @@
 <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';
--- a/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte
+++ b/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -15,7 +14,7 @@
 	import ButtonEdge from './ButtonEdge.svelte';
 	import CustomBezierEdge from './CustomBezierEdge.svelte';

-	const nodes = writable([
+	let nodes = $state.raw([
 		{
 			id: '1',
 			type: 'input',
@@ -55,7 +54,7 @@
 		}
 	]);

-	const edges = writable([
+	let edges = $state.raw([
 		{
 			id: 'e1-2',
 			source: '1',
@@ -142,12 +141,12 @@
 		return `edge-${connection.source}-${connection.target}}`;
 	}

-	$inspect($edges);
+	$inspect(edges);
 </script>

 <SvelteFlow
-	{nodes}
-	{edges}
+	bind:nodes
+	bind:edges
 	{edgeTypes}
 	fitView
 	nodeDragThreshold={2}
--- a/examples/svelte/src/routes/examples/figma/+page.svelte
+++ b/examples/svelte/src/routes/examples/figma/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -21,7 +20,7 @@
 	const onMove = (e: any) => console.log('move', e);
 	const onMoveEnd = (e: any) => console.log('move end', e);

-	const nodes = writable([
+	let nodes = $state.raw([
 		{
 			id: '1',
 			type: 'input',
@@ -34,15 +33,15 @@
 		{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' }
 	]);

-	const edges = writable([
+	let edges = $state.raw([
 		{ id: 'e1-2', source: '1', target: '2', animated: true },
 		{ id: 'e1-3', source: '1', target: '3' }
 	]);
 </script>

 <SvelteFlow
-	{nodes}
-	{edges}
+	bind:nodes
+	bind:edges
 	fitView
 	selectionMode={SelectionMode.Partial}
 	selectionOnDrag
--- a/examples/svelte/src/routes/examples/handle-connect/+page.svelte
+++ b/examples/svelte/src/routes/examples/handle-connect/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -20,7 +19,7 @@
 		multi: MultiHandleNode
 	};

-	const nodes = writable<Node[]>([
+	let nodes = $state.raw<Node[]>([
 		{
 			id: '1',
 			type: 'single',
@@ -60,7 +59,7 @@
 		}
 	]);

-	const edges = writable<Edge[]>([
+	let edges = $state.raw<Edge[]>([
 		{
 			id: 'e1-2',
 			source: '1',
@@ -87,7 +86,7 @@
 	]);
 </script>

-<SvelteFlow {nodes} {edges} {nodeTypes} fitView colorMode="dark">
+<SvelteFlow bind:nodes bind:edges {nodeTypes} fitView colorMode="dark">
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />
--- a/examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte
+++ b/examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte
@@ -27,7 +27,7 @@

 	const connections = useHandleConnections({ nodeId: id, type: 'target' });

-	$inspect('connections', $connections);
+	$inspect(connections.current);
 </script>

 <div class="custom">
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -56,11 +56,11 @@
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.9.0",
+    "@sveltejs/kit": "^2.11.1",
    "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^5.0.1",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
    "autoprefixer": "^10.4.20",
    "cssnano": "^7.0.6",
    "dotenv": "^16.4.7",
--- a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
+++ b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { get } from 'svelte/store';
  import {
    shortcut,
    type ShortcutEventDetail,
@@ -7,7 +6,6 @@
  } from '@svelte-put/shortcut';
  import { getElementsToRemove, isInputDOMNode, isMacOs } from '@xyflow/system';

-  import { useStore } from '$lib/store';
  import type { KeyHandlerProps } from './types';
  import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';

--- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
@@ -15,8 +15,6 @@
    onselectioncontextmenu
  }: NodeSelectionProps = $props();

-  // const { nodes } = store;
-
  let bounds: Rect | null = $derived.by(() => {
    if (store.selectionRectMode === 'nodes') {
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -8,7 +8,7 @@
  import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';

  import type { ConnectableContext, NodeWrapperProps } from './types';
-  import type { Node, NodeEvents } from '$lib/types';
+  import type { NodeEvents } from '$lib/types';

  let {
    store,
--- a/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
+++ b/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte
@@ -7,7 +7,7 @@

  let { children }: SvelteFlowProviderProps = $props();

-  let store = $state.raw(createStore({ props: {} }));
+  let store = $state.raw(createStore({ props: {}, nodes: [], edges: [] }));

  setContext(key, {
    provider: true,
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -34,6 +34,7 @@

  import type { Node, Edge, InternalNode } from '$lib/types';
  import type { PaneProps } from './types';
+
  let {
    store,
    panOnDrag = true,
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -3,6 +3,7 @@
  import cc from 'classcat';
  import { PanOnScrollMode } from '@xyflow/system';

+  import { key, createStore } from '$lib/store';
  import { Zoom } from '$lib/container/Zoom';
  import { Pane } from '$lib/container/Pane';
  import { Viewport as ViewportComponent } from '$lib/container/Viewport';
@@ -13,9 +14,7 @@
  import { KeyHandler } from '$lib/components/KeyHandler';
  import { ConnectionLine } from '$lib/components/ConnectionLine';
  import { Attribution } from '$lib/components/Attribution';
-  import { key, createStore } from '$lib/store';
  import type { SvelteFlowProps } from './types';
-  import { useColorModeClass } from '$lib/hooks/useColorModeClass';
  import { type ProviderContext, type StoreContext } from '$lib/store/types';

  let {
@@ -114,91 +113,86 @@
  onDestroy(() => {
    store.reset();
  });
-
-  let colorModeClass = $derived(useColorModeClass(store.colorMode));
 </script>

-<!-- TODO: this is the only hack in the library so far. Can we get rid of it? -->
-{#if store.adoptNodes && store.adoptEdges}
-  <div
-    bind:this={domNode}
-    bind:clientWidth
-    bind:clientHeight
-    style:width
-    style:height
-    {style}
-    class={cc(['svelte-flow', className, $colorModeClass])}
-    data-testid="svelte-flow__wrapper"
-    {...props}
-    role="application"
+<div
+  bind:this={domNode}
+  bind:clientWidth
+  bind:clientHeight
+  style:width
+  style:height
+  {style}
+  class={cc(['svelte-flow', className, store.colorMode])}
+  data-testid="svelte-flow__wrapper"
+  {...props}
+  role="application"
+>
+  <KeyHandler
+    {store}
+    {selectionKey}
+    {deleteKey}
+    {panActivationKey}
+    {multiSelectionKey}
+    {zoomActivationKey}
+  />
+  <Zoom
+    {store}
+    {onMoveStart}
+    {onMove}
+    {onMoveEnd}
+    {panOnScrollMode}
+    {preventScrolling}
+    {zoomOnScroll}
+    {zoomOnDoubleClick}
+    {zoomOnPinch}
+    {panOnScroll}
+    {panOnDrag}
+    {paneClickDistance}
  >
-    <KeyHandler
-      {store}
-      {selectionKey}
-      {deleteKey}
-      {panActivationKey}
-      {multiSelectionKey}
-      {zoomActivationKey}
-    />
-    <Zoom
-      {store}
-      {onMoveStart}
-      {onMove}
-      {onMoveEnd}
-      {panOnScrollMode}
-      {preventScrolling}
-      {zoomOnScroll}
-      {zoomOnDoubleClick}
-      {zoomOnPinch}
-      {panOnScroll}
-      {panOnDrag}
-      {paneClickDistance}
-    >
-      <Pane {store} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
-        <ViewportComponent {store}>
-          <EdgeRenderer
-            {store}
-            {onedgeclick}
-            {onedgecontextmenu}
-            {onedgemouseenter}
-            {onedgemouseleave}
-          />
-          <ConnectionLine
-            {store}
-            containerStyle={connectionLineContainerStyle}
-            style={connectionLineStyle}
-            {connectionLine}
-          />
-          <div class="svelte-flow__edgelabel-renderer"></div>
-          <div class="svelte-flow__viewport-portal"></div>
-          <NodeRenderer
-            {store}
-            {nodeClickDistance}
-            {onnodeclick}
-            {onnodecontextmenu}
-            {onnodemouseenter}
-            {onnodemousemove}
-            {onnodemouseleave}
-            {onnodedrag}
-            {onnodedragstart}
-            {onnodedragstop}
-          />
-          <NodeSelection
-            {store}
-            {onselectionclick}
-            {onselectioncontextmenu}
-            {onnodedrag}
-            {onnodedragstart}
-            {onnodedragstop}
-          />
-        </ViewportComponent>
-        <UserSelection />
-      </Pane>
-    </Zoom>
-    <Attribution {proOptions} position={attributionPosition} />
-    {@render children?.()}
-  </div>
-{/if}
+    <Pane {store} {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
+      <ViewportComponent {store}>
+        <EdgeRenderer
+          {store}
+          {onedgeclick}
+          {onedgecontextmenu}
+          {onedgemouseenter}
+          {onedgemouseleave}
+        />
+        <ConnectionLine
+          {store}
+          containerStyle={connectionLineContainerStyle}
+          style={connectionLineStyle}
+          {connectionLine}
+        />
+        <div class="svelte-flow__edgelabel-renderer"></div>
+        <div class="svelte-flow__viewport-portal"></div>
+        <NodeRenderer
+          {store}
+          {nodeClickDistance}
+          {onnodeclick}
+          {onnodecontextmenu}
+          {onnodemouseenter}
+          {onnodemousemove}
+          {onnodemouseleave}
+          {onnodedrag}
+          {onnodedragstart}
+          {onnodedragstop}
+        />
+        <NodeSelection
+          {store}
+          {onselectionclick}
+          {onselectioncontextmenu}
+          {onnodedrag}
+          {onnodedragstart}
+          {onnodedragstop}
+        />
+      </ViewportComponent>
+      <UserSelection />
+    </Pane>
+  </Zoom>
+  <Attribution {proOptions} position={attributionPosition} />
+  {@render children?.()}
+</div>

 <style>
  .svelte-flow {
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -17,7 +17,8 @@ import type {
  ColorMode,
  OnConnect,
  OnConnectStart,
-  OnConnectEnd
+  OnConnectEnd,
+  ColorModeClass
 } from '@xyflow/system';

 import type {
@@ -327,6 +328,8 @@ export type SvelteFlowProps = NodeEvents &
     * @example 'system' | 'light' | 'dark'
     */
    colorMode?: ColorMode;
+    /** Fallback color mode for SSR if colorMode is set to 'system' */
+    colorModeSSR?: ColorModeClass;
    /** Class to be applied to the flow container */
    class?: string;
    /** Styles to be applied to the flow container */
--- a/packages/svelte/src/lib/container/Zoom/Zoom.svelte
+++ b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
@@ -2,7 +2,6 @@
  import { onMount } from 'svelte';
  import { PanOnScrollMode, type PanZoomInstance, type Transform } from '@xyflow/system';

-  import { useStore } from '$lib/store';
  import zoom from '$lib/actions/zoom';
  import type { ZoomProps } from './types';

--- a/packages/svelte/src/lib/hooks/useColorMode.ts
+++ b/packages/svelte/src/lib/hooks/useColorMode.ts
@@ -0,0 +1,14 @@
+import type { ColorModeClass } from '@xyflow/system';
+import { useStore } from './useStore';
+
+/**
+ * Hook for receiving the current color mode class 'dark' or 'light'.
+ *
+ */
+export function useColorMode(): { current: ColorModeClass } {
+  const { colorMode } = $derived(useStore());
+
+  return {
+    current: colorMode
+  };
+}
--- a/packages/svelte/src/lib/hooks/useColorModeClass.ts
+++ b/packages/svelte/src/lib/hooks/useColorModeClass.ts
@@ -1,38 +0,0 @@
-import type { ColorMode, ColorModeClass } from '@xyflow/system';
-import { readable, type Readable } from 'svelte/store';
-
-function getMediaQuery() {
-  if (typeof window === 'undefined' || !window.matchMedia) {
-    return null;
-  }
-
-  return window.matchMedia('(prefers-color-scheme: dark)');
-}
-
-/**
- * Hook for receiving the current color mode class 'dark' or 'light'.
- *
- * @internal
- * @param colorMode - The color mode to use ('dark', 'light' or 'system')
- */
-export function useColorModeClass(colorMode: ColorMode = 'light'): Readable<ColorModeClass> {
-  const colorModeClass = readable<ColorModeClass>('light', (set) => {
-    if (colorMode !== 'system') {
-      set(colorMode);
-
-      return;
-    }
-
-    const mediaQuery = getMediaQuery();
-    const updateColorModeClass = () => set(mediaQuery?.matches ? 'dark' : 'light');
-
-    set(mediaQuery?.matches ? 'dark' : 'light');
-    mediaQuery?.addEventListener('change', updateColorModeClass);
-
-    return () => {
-      mediaQuery?.removeEventListener('change', updateColorModeClass);
-    };
-  });
-
-  return colorModeClass;
-}
--- a/packages/svelte/src/lib/hooks/useConnection.svelte.ts
+++ b/packages/svelte/src/lib/hooks/useConnection.svelte.ts
@@ -0,0 +1,19 @@
+import { useStore } from '$lib/store';
+
+import type { ConnectionState } from '@xyflow/system';
+
+/**
+ * Hook for receiving the current connection.
+ *
+ * @public
+ * @returns current connection as a readable store
+ */
+export function useConnection(): { current: ConnectionState } {
+  const { connection } = $derived(useStore());
+
+  return {
+    get current() {
+      return connection;
+    }
+  };
+}
--- a/packages/svelte/src/lib/hooks/useConnection.ts
+++ b/packages/svelte/src/lib/hooks/useConnection.ts
@@ -1,18 +0,0 @@
-import { useStore } from '$lib/store';
-
-import type { ConnectionState } from '@xyflow/system';
-import { derivedWarning } from './derivedWarning.svelte';
-
-/**
- * Hook for receiving the current connection.
- *
- * @public
- * @returns current connection as a readable store
- */
-export function useConnection(): ConnectionState {
-  if (process.env.NODE_ENV === 'development') {
-    derivedWarning('useConnection', true);
-  }
-
-  return useStore().connection;
-}
--- a/packages/svelte/src/lib/hooks/useHandleConnections.svelte.ts
+++ b/packages/svelte/src/lib/hooks/useHandleConnections.svelte.ts
@@ -0,0 +1,52 @@
+import { areConnectionMapsEqual, type HandleConnection, type HandleType } from '@xyflow/system';
+
+import { useStore } from '$lib/store';
+import { getContext } from 'svelte';
+
+export type useHandleConnectionsParams = {
+  type: HandleType;
+  nodeId?: string;
+  id?: string | null;
+};
+
+const initialConnections: HandleConnection[] = [];
+
+/**
+ *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ *
+ * @public
+ * @param param.nodeId
+ * @param param.type - handle type 'source' or 'target'
+ * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
+ * @returns an array with connections
+ */
+export function useHandleConnections({
+  type,
+  nodeId: _nodeId,
+  id = null
+}: useHandleConnectionsParams) {
+  const { edges, connectionLookup } = $derived(useStore());
+
+  const contextNodeId = getContext<string>('svelteflow__node_id');
+  const nodeId = _nodeId ?? contextNodeId;
+
+  let prevConnections: Map<string, HandleConnection> | undefined = new Map();
+  let connectionsArray: HandleConnection[] = initialConnections;
+
+  const connections = $derived.by(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    edges;
+    const nextConnections = connectionLookup.get(`${nodeId}-${type}-${id || null}`);
+    if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
+      prevConnections = nextConnections;
+      connectionsArray = Array.from(nextConnections?.values() || initialConnections);
+    }
+    return connectionsArray;
+  });
+
+  return {
+    get current() {
+      return connections;
+    }
+  };
+}
--- a/packages/svelte/src/lib/hooks/useHandleConnections.ts
+++ b/packages/svelte/src/lib/hooks/useHandleConnections.ts
@@ -1,44 +0,0 @@
-import { derived } from 'svelte/store';
-import { areConnectionMapsEqual, type HandleConnection, type HandleType } from '@xyflow/system';
-
-import { useStore } from '$lib/store';
-import { getContext } from 'svelte';
-
-export type useHandleConnectionsParams = {
-  type: HandleType;
-  nodeId?: string;
-  id?: string | null;
-};
-
-const initialConnections: HandleConnection[] = [];
-
-/**
- *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
- *
- * @public
- * @param param.nodeId
- * @param param.type - handle type 'source' or 'target'
- * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
- * @returns an array with connections
- */
-export function useHandleConnections({ type, nodeId, id = null }: useHandleConnectionsParams) {
-  const { edges, connectionLookup } = useStore();
-
-  const _nodeId = getContext<string>('svelteflow__node_id');
-  const currentNodeId = nodeId ?? _nodeId;
-
-  let prevConnections: Map<string, HandleConnection> | undefined = undefined;
-
-  return derived(
-    [edges, connectionLookup],
-    ([, connectionLookup], set) => {
-      const nextConnections = connectionLookup.get(`${currentNodeId}-${type}-${id || null}`);
-
-      if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
-        prevConnections = nextConnections;
-        set(Array.from(prevConnections?.values() || []));
-      }
-    },
-    initialConnections
-  );
-}
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -33,9 +33,9 @@ export * from '$lib/utils';
 //hooks
 export * from '$lib/hooks/useSvelteFlow';
 export * from '$lib/hooks/useUpdateNodeInternals';
-export * from '$lib/hooks/useConnection';
+export * from '$lib/hooks/useConnection.svelte';
 export * from '$lib/hooks/useNodesEdges';
-export * from '$lib/hooks/useHandleConnections';
+export * from '$lib/hooks/useHandleConnections.svelte';
 export * from '$lib/hooks/useNodesData';
 export * from '$lib/hooks/useInternalNode';
 export { useInitialized, useNodesInitialized } from '$lib/hooks/useInitialized';
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -218,20 +218,37 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
    store.panZoom?.setClickDistance(distance);
  }

-  function deselect<T extends Node | Edge>(element: T) {
-    return element.selected ? { ...element, selected: false } : element;
+  function deselect<T extends Node | Edge>(
+    elements: T[],
+    elementsToDeselect: Set<string> | null = null
+  ): [boolean, T[]] {
+    let deselected = false;
+
+    const newElements = elements.map((element) => {
+      const shouldDeselect = elementsToDeselect ? elementsToDeselect.has(element.id) : true;
+
+      if (shouldDeselect && element.selected) {
+        deselected = true;
+        return { ...element, selected: false };
+      }
+      return element;
+    });
+
+    return [deselected, newElements];
  }

  function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
    const nodesToDeselect = params?.nodes ? new Set(params.nodes.map((node) => node.id)) : null;
-    store.nodes = store.nodes.map((node) =>
-      !nodesToDeselect || nodesToDeselect.has(node.id) ? deselect(node) : node
-    );
+    const [nodesDeselected, newNodes] = deselect(store.nodes, nodesToDeselect);
+    if (nodesDeselected) {
+      store.nodes = newNodes;
+    }

    const edgesToDeselect = params?.edges ? new Set(params.edges.map((node) => node.id)) : null;
-    store.edges = store.edges.map((edge) =>
-      !edgesToDeselect || edgesToDeselect.has(edge.id) ? deselect(edge) : edge
-    );
+    const [edgesDeselected, newEdges] = deselect(store.edges, edgesToDeselect);
+    if (edgesDeselected) {
+      store.edges = newEdges;
+    }
  }

  function addSelectedNodes(ids: string[]) {
@@ -252,9 +269,7 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
    });

    if (!isMultiSelection) {
-      store.edges = store.edges.map((edge) => {
-        return edge.selected ? { ...edge, selected: false } : edge;
-      });
+      unselectNodesAndEdges({ nodes: [] });
    }
  }

@@ -272,7 +287,7 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
    });

    if (!isMultiSelection) {
-      store.nodes = store.nodes.map(deselect);
+      unselectNodesAndEdges({ edges: [] });
    }
  }

--- a/packages/svelte/src/lib/store/initial-store.svelte.ts
+++ b/packages/svelte/src/lib/store/initial-store.svelte.ts
@@ -22,12 +22,12 @@ import {
  type NodeLookup,
  type ConnectionState,
  getInternalNodesBounds,
-  type ColorMode,
  createMarkerIds,
  type EdgeLookup,
  type ConnectionLookup,
  type ParentLookup,
-  pointToRendererPoint
+  pointToRendererPoint,
+  type ColorModeClass
 } from '@xyflow/system';

 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -55,6 +55,7 @@ import type {
 } from '$lib/types';

 import type { StoreSignals } from './types';
+import { MediaQuery } from 'svelte/reactivity';

 export const initialNodeTypes = {
  input: InputNode,
@@ -74,14 +75,29 @@ export const getInitialStore = (signals: StoreSignals) => {
  // We use a class here, because Svelte adds getters & setter for us.
  // Inline classes have some performance implications but we just call it once (max twice).
  class SvelteFlowStore {
-    get nodes() {
+    _nodes: Node[] = $derived.by(() => {
+      adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
+        nodeExtent: this.nodeExtent,
+        nodeOrigin: this.nodeOrigin,
+        elevateNodesOnSelect: false,
+        checkEquality: true
+      });
      return signals.nodes;
+    });
+
+    _edges: Edge[] = $derived.by(() => {
+      updateConnectionLookup(this.connectionLookup, this.edgeLookup, signals.edges);
+      return signals.edges;
+    });
+
+    get nodes() {
+      return this._nodes;
    }
    set nodes(nodes) {
      signals.nodes = nodes;
    }
    get edges() {
-      return signals.edges;
+      return this._edges;
    }
    set edges(edges) {
      signals.edges = edges;
@@ -91,20 +107,6 @@ export const getInitialStore = (signals: StoreSignals) => {
    connectionLookup: ConnectionLookup = new Map();
    edgeLookup: EdgeLookup = new Map();

-    adoptNodes: true = $derived.by(() => {
-      adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
-        nodeExtent: this.nodeExtent,
-        nodeOrigin: this.nodeOrigin,
-        elevateNodesOnSelect: false,
-        checkEquality: true
-      });
-      return true;
-    });
-    adoptEdges: true = $derived.by(() => {
-      updateConnectionLookup(this.connectionLookup, this.edgeLookup, signals.edges);
-      return true;
-    });
-
    domNode: HTMLDivElement | null = $derived(signals.domNode ?? signals.domNode ?? null);
    width: number = $derived(signals.width ?? signals.props.width ?? 0);
    height: number = $derived(signals.height ?? signals.props.height ?? 0);
@@ -212,7 +214,17 @@ export const getInitialStore = (signals: StoreSignals) => {

      return initialized;
    });
-    colorMode: ColorMode = $derived(signals.props.colorMode ?? 'light');
+    prefersDark = new MediaQuery(
+      '(prefers-color-scheme: dark)',
+      signals.props.colorModeSSR === 'dark'
+    );
+    colorMode: ColorModeClass = $derived(
+      signals.props.colorMode === 'system'
+        ? this.prefersDark.current
+          ? 'dark'
+          : 'light'
+        : (signals.props.colorMode ?? 'light')
+    );

    constructor() {
      // Process intial fitView here
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -172,24 +172,24 @@ importers:
        specifier: ^1.1.4
        version: 1.1.4
      '@sveltejs/vite-plugin-svelte':
-        specifier: ^5.0.1
-        version: 5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
+        specifier: ^5.0.2
+        version: 5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
      '@xyflow/svelte':
        specifier: workspace:^
        version: link:../../packages/svelte
    devDependencies:
      '@sveltejs/adapter-auto':
        specifier: ^3.3.1
-        version: 3.3.1(@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))
+        version: 3.3.1(@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))
      '@sveltejs/kit':
-        specifier: ^2.9.0
-        version: 2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
+        specifier: ^2.11.1
+        version: 2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
      '@typescript-eslint/eslint-plugin':
-        specifier: ^8.17.0
-        version: 8.17.0(@typescript-eslint/parser@8.17.0(eslint@8.53.0)(typescript@5.6.3))(eslint@8.53.0)(typescript@5.6.3)
+        specifier: ^8.18.0
+        version: 8.18.0(@typescript-eslint/parser@8.18.0(eslint@8.53.0)(typescript@5.6.3))(eslint@8.53.0)(typescript@5.6.3)
      '@typescript-eslint/parser':
-        specifier: ^8.17.0
-        version: 8.17.0(eslint@8.53.0)(typescript@5.6.3)
+        specifier: ^8.18.0
+        version: 8.18.0(eslint@8.53.0)(typescript@5.6.3)
      eslint:
        specifier: ^8.53.0
        version: 8.53.0
@@ -299,22 +299,22 @@ importers:
    devDependencies:
      '@sveltejs/adapter-auto':
        specifier: ^3.3.1
-        version: 3.3.1(@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))
+        version: 3.3.1(@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))
      '@sveltejs/kit':
-        specifier: ^2.9.0
-        version: 2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
+        specifier: ^2.11.1
+        version: 2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
      '@sveltejs/package':
        specifier: ^2.3.7
        version: 2.3.7(svelte@5.9.0)(typescript@5.6.3)
      '@sveltejs/vite-plugin-svelte':
-        specifier: ^5.0.1
-        version: 5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
+        specifier: ^5.0.2
+        version: 5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
      '@typescript-eslint/eslint-plugin':
-        specifier: ^8.17.0
-        version: 8.17.0(@typescript-eslint/parser@8.17.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3)
+        specifier: ^8.18.0
+        version: 8.18.0(@typescript-eslint/parser@8.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3)
      '@typescript-eslint/parser':
-        specifier: ^8.17.0
-        version: 8.17.0(eslint@8.57.0)(typescript@5.6.3)
+        specifier: ^8.18.0
+        version: 8.18.0(eslint@8.57.0)(typescript@5.6.3)
      autoprefixer:
        specifier: ^10.4.20
        version: 10.4.20(postcss@8.4.49)
@@ -1827,8 +1827,8 @@ packages:
    peerDependencies:
      '@sveltejs/kit': ^2.0.0

-  '@sveltejs/kit@2.9.0':
-    resolution: {integrity: sha512-W3E7ed3ChB6kPqRs2H7tcHp+Z7oiTFC6m+lLyAQQuyXeqw6LdNuuwEUla+5VM0OGgqQD+cYD6+7Xq80vVm17Vg==}
+  '@sveltejs/kit@2.11.1':
+    resolution: {integrity: sha512-dAiHDEd+AOm20eYdMPV1a2eKBOc0s/7XsSs7PCoNv2kKS7BAoVRC9uzR+FQmxLtp8xuEo9z8CtrMQoszkThltQ==}
    engines: {node: '>=18.13'}
    hasBin: true
    peerDependencies:
@@ -1866,8 +1866,8 @@ packages:
      svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0
      vite: ^4.0.0

-  '@sveltejs/vite-plugin-svelte@5.0.1':
-    resolution: {integrity: sha512-D5l5+STmywGoLST07T9mrqqFFU+xgv5fqyTWM+VbxTvQ6jujNn4h3lQNCvlwVYs4Erov8i0K5Rwr3LQtmBYmBw==}
+  '@sveltejs/vite-plugin-svelte@5.0.2':
+    resolution: {integrity: sha512-GElAxQMlznx1pRdodtkmiyBZcjlaJntJ8APa2hBhnbUAJqKAFGdmwjRPJhh+2DMxwARRLBzQIs/iZ5EbR4X/og==}
    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
    peerDependencies:
      svelte: ^5.0.0
@@ -2116,16 +2116,13 @@ packages:
      typescript:
        optional: true

-  '@typescript-eslint/eslint-plugin@8.17.0':
-    resolution: {integrity: sha512-HU1KAdW3Tt8zQkdvNoIijfWDMvdSweFYm4hWh+KwhPstv+sCmWb89hCIP8msFm9N1R/ooh9honpSuvqKWlYy3w==}
+  '@typescript-eslint/eslint-plugin@8.18.0':
+    resolution: {integrity: sha512-NR2yS7qUqCL7AIxdJUQf2MKKNDVNaig/dEB0GBLU7D+ZdHgK1NoH/3wsgO3OnPVipn51tG3MAwaODEGil70WEw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
      eslint: ^8.57.0 || ^9.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <5.8.0'

  '@typescript-eslint/parser@8.0.0':
    resolution: {integrity: sha512-pS1hdZ+vnrpDIxuFXYQpLTILglTjSYJ9MbetZctrUawogUsPdz31DIIRZ9+rab0LhYNTsk88w4fIzVheiTbWOQ==}
@@ -2137,22 +2134,19 @@ packages:
      typescript:
        optional: true

-  '@typescript-eslint/parser@8.17.0':
-    resolution: {integrity: sha512-Drp39TXuUlD49F7ilHHCG7TTg8IkA+hxCuULdmzWYICxGXvDXmDmWEjJYZQYgf6l/TFfYNE167m7isnc3xlIEg==}
+  '@typescript-eslint/parser@8.18.0':
+    resolution: {integrity: sha512-hgUZ3kTEpVzKaK3uNibExUYm6SKKOmTU2BOxBSvOYwtJEPdVQ70kZJpPjstlnhCHcuc2WGfSbpKlb/69ttyN5Q==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <5.8.0'

  '@typescript-eslint/scope-manager@8.0.0':
    resolution: {integrity: sha512-V0aa9Csx/ZWWv2IPgTfY7T4agYwJyILESu/PVqFtTFz9RIS823mAze+NbnBI8xiwdX3iqeQbcTYlvB04G9wyQw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@typescript-eslint/scope-manager@8.17.0':
-    resolution: {integrity: sha512-/ewp4XjvnxaREtqsZjF4Mfn078RD/9GmiEAtTeLQ7yFdKnqwTOgRMSvFz4et9U5RiJQ15WTGXPLj89zGusvxBg==}
+  '@typescript-eslint/scope-manager@8.18.0':
+    resolution: {integrity: sha512-PNGcHop0jkK2WVYGotk/hxj+UFLhXtGPiGtiaWgVBVP1jhMoMCHlTyJA+hEj4rszoSdLTK3fN4oOatrL0Cp+Xw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

  '@typescript-eslint/type-utils@8.0.0':
@@ -2164,22 +2158,19 @@ packages:
      typescript:
        optional: true

-  '@typescript-eslint/type-utils@8.17.0':
-    resolution: {integrity: sha512-q38llWJYPd63rRnJ6wY/ZQqIzPrBCkPdpIsaCfkR3Q4t3p6sb422zougfad4TFW9+ElIFLVDzWGiGAfbb/v2qw==}
+  '@typescript-eslint/type-utils@8.18.0':
+    resolution: {integrity: sha512-er224jRepVAVLnMF2Q7MZJCq5CsdH2oqjP4dT7K6ij09Kyd+R21r7UVJrF0buMVdZS5QRhDzpvzAxHxabQadow==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <5.8.0'

  '@typescript-eslint/types@8.0.0':
    resolution: {integrity: sha512-wgdSGs9BTMWQ7ooeHtu5quddKKs5Z5dS+fHLbrQI+ID0XWJLODGMHRfhwImiHoeO2S5Wir2yXuadJN6/l4JRxw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@typescript-eslint/types@8.17.0':
-    resolution: {integrity: sha512-gY2TVzeve3z6crqh2Ic7Cr+CAv6pfb0Egee7J5UAVWCpVvDI/F71wNfolIim4FE6hT15EbpZFVUj9j5i38jYXA==}
+  '@typescript-eslint/types@8.18.0':
+    resolution: {integrity: sha512-FNYxgyTCAnFwTrzpBGq+zrnoTO4x0c1CKYY5MuUTzpScqmY5fmsh2o3+57lqdI3NZucBDCzDgdEbIaNfAjAHQA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

  '@typescript-eslint/typescript-estree@8.0.0':
@@ -2191,14 +2182,11 @@ packages:
      typescript:
        optional: true

-  '@typescript-eslint/typescript-estree@8.17.0':
-    resolution: {integrity: sha512-JqkOopc1nRKZpX+opvKqnM3XUlM7LpFMD0lYxTqOTKQfCWAmxw45e3qlOCsEqEB2yuacujivudOFpCnqkBDNMw==}
+  '@typescript-eslint/typescript-estree@8.18.0':
+    resolution: {integrity: sha512-rqQgFRu6yPkauz+ms3nQpohwejS8bvgbPyIDq13cgEDbkXt4LH4OkDMT0/fN1RUtzG8e8AKJyDBoocuQh8qNeg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <5.8.0'

  '@typescript-eslint/utils@8.0.0':
    resolution: {integrity: sha512-k/oS/A/3QeGLRvOWCg6/9rATJL5rec7/5s1YmdS0ZU6LHveJyGFwBvLhSRBv6i9xaj7etmosp+l+ViN1I9Aj/Q==}
@@ -2206,22 +2194,19 @@ packages:
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0

-  '@typescript-eslint/utils@8.17.0':
-    resolution: {integrity: sha512-bQC8BnEkxqG8HBGKwG9wXlZqg37RKSMY7v/X8VEWD8JG2JuTHuNK0VFvMPMUKQcbk6B+tf05k+4AShAEtCtJ/w==}
+  '@typescript-eslint/utils@8.18.0':
+    resolution: {integrity: sha512-p6GLdY383i7h5b0Qrfbix3Vc3+J2k6QWw6UMUeY5JGfm3C5LbZ4QIZzJNoNOfgyRe0uuYKjvVOsO/jD4SJO+xg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <5.8.0'

  '@typescript-eslint/visitor-keys@8.0.0':
    resolution: {integrity: sha512-oN0K4nkHuOyF3PVMyETbpP5zp6wfyOvm7tWhTMfoqxSSsPmJIh6JNASuZDlODE8eE+0EB9uar+6+vxr9DBTYOA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@typescript-eslint/visitor-keys@8.17.0':
-    resolution: {integrity: sha512-1Hm7THLpO6ww5QU6H/Qp+AusUUl+z/CAm3cNZZ0jQvon9yicgO7Rwd+/WWRpMKLYV6p2UvdbR27c86rzCPpreg==}
+  '@typescript-eslint/visitor-keys@8.18.0':
+    resolution: {integrity: sha512-pCh/qEA8Lb1wVIqNvBke8UaRjJ6wrAWkJO5yyIbs8Yx6TNGYyfNjOo61tLv+WwLvoLPp4BQ8B7AHKijl8NGUfw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

  '@ungap/structured-clone@1.2.0':
@@ -2975,6 +2960,15 @@ packages:
      supports-color:
        optional: true

+  debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
  decamelize-keys@1.1.1:
    resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
    engines: {node: '>=0.10.0'}
@@ -4225,12 +4219,12 @@ packages:
  magic-string@0.30.10:
    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}

-  magic-string@0.30.12:
-    resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
-
  magic-string@0.30.14:
    resolution: {integrity: sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==}

+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
  magic-string@0.30.5:
    resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
    engines: {node: '>=12'}
@@ -6456,10 +6450,10 @@ packages:
      vite:
        optional: true

-  vitefu@1.0.3:
-    resolution: {integrity: sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==}
+  vitefu@1.0.4:
+    resolution: {integrity: sha512-y6zEE3PQf6uu/Mt6DTJ9ih+kyJLr4XcSgHR2zUkM8SWDhuixEJxfJ6CZGMHh1Ec3vPLoEA0IHU5oWzVqw8ulow==}
    peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
    peerDependenciesMeta:
      vite:
        optional: true
@@ -7915,21 +7909,21 @@ snapshots:
    dependencies:
      svelte: 5.9.0

-  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))':
+  '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))':
    dependencies:
-      '@sveltejs/kit': 2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
+      '@sveltejs/kit': 2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
      import-meta-resolve: 4.1.0

-  '@sveltejs/kit@2.9.0(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
+  '@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
    dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
+      '@sveltejs/vite-plugin-svelte': 5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
      '@types/cookie': 0.6.0
      cookie: 0.6.0
      devalue: 5.1.1
      esm-env: 1.2.1
      import-meta-resolve: 4.1.0
      kleur: 4.1.5
-      magic-string: 0.30.12
+      magic-string: 0.30.14
      mrmime: 2.0.0
      sade: 1.8.1
      set-cookie-parser: 2.6.0
@@ -7958,9 +7952,9 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
    dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
+      '@sveltejs/vite-plugin-svelte': 5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
      debug: 4.3.7
      svelte: 5.9.0
      vite: 6.0.3(@types/node@20.14.6)(terser@5.31.0)
@@ -7981,16 +7975,16 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
+  '@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))':
    dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.1(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
-      debug: 4.3.7
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)))(svelte@5.9.0)(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
+      debug: 4.4.0
      deepmerge: 4.3.1
      kleur: 4.1.5
-      magic-string: 0.30.14
+      magic-string: 0.30.17
      svelte: 5.9.0
      vite: 6.0.3(@types/node@20.14.6)(terser@5.31.0)
-      vitefu: 1.0.3(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
+      vitefu: 1.0.4(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0))
    transitivePeerDependencies:
      - supports-color

@@ -8238,38 +8232,36 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/eslint-plugin@8.17.0(@typescript-eslint/parser@8.17.0(eslint@8.53.0)(typescript@5.6.3))(eslint@8.53.0)(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@8.18.0(@typescript-eslint/parser@8.18.0(eslint@8.53.0)(typescript@5.6.3))(eslint@8.53.0)(typescript@5.6.3)':
    dependencies:
      '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 8.17.0(eslint@8.53.0)(typescript@5.6.3)
-      '@typescript-eslint/scope-manager': 8.17.0
-      '@typescript-eslint/type-utils': 8.17.0(eslint@8.53.0)(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.17.0(eslint@8.53.0)(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.17.0
+      '@typescript-eslint/parser': 8.18.0(eslint@8.53.0)(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/type-utils': 8.18.0(eslint@8.53.0)(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.18.0(eslint@8.53.0)(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.18.0
      eslint: 8.53.0
      graphemer: 1.4.0
      ignore: 5.3.1
      natural-compare: 1.4.0
      ts-api-utils: 1.3.0(typescript@5.6.3)
-    optionalDependencies:
      typescript: 5.6.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/eslint-plugin@8.17.0(@typescript-eslint/parser@8.17.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@8.18.0(@typescript-eslint/parser@8.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3)':
    dependencies:
      '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 8.17.0(eslint@8.57.0)(typescript@5.6.3)
-      '@typescript-eslint/scope-manager': 8.17.0
-      '@typescript-eslint/type-utils': 8.17.0(eslint@8.57.0)(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.17.0(eslint@8.57.0)(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.17.0
+      '@typescript-eslint/parser': 8.18.0(eslint@8.57.0)(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/type-utils': 8.18.0(eslint@8.57.0)(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.18.0(eslint@8.57.0)(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.18.0
      eslint: 8.57.0
      graphemer: 1.4.0
      ignore: 5.3.1
      natural-compare: 1.4.0
      ts-api-utils: 1.3.0(typescript@5.6.3)
-    optionalDependencies:
      typescript: 5.6.3
    transitivePeerDependencies:
      - supports-color
@@ -8287,28 +8279,26 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/parser@8.17.0(eslint@8.53.0)(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.18.0(eslint@8.53.0)(typescript@5.6.3)':
    dependencies:
-      '@typescript-eslint/scope-manager': 8.17.0
-      '@typescript-eslint/types': 8.17.0
-      '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.17.0
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.18.0
      debug: 4.3.7
      eslint: 8.53.0
-    optionalDependencies:
      typescript: 5.6.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/parser@8.17.0(eslint@8.57.0)(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.18.0(eslint@8.57.0)(typescript@5.6.3)':
    dependencies:
-      '@typescript-eslint/scope-manager': 8.17.0
-      '@typescript-eslint/types': 8.17.0
-      '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.6.3)
-      '@typescript-eslint/visitor-keys': 8.17.0
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 8.18.0
      debug: 4.3.7
      eslint: 8.57.0
-    optionalDependencies:
      typescript: 5.6.3
    transitivePeerDependencies:
      - supports-color
@@ -8318,10 +8308,10 @@ snapshots:
      '@typescript-eslint/types': 8.0.0
      '@typescript-eslint/visitor-keys': 8.0.0

-  '@typescript-eslint/scope-manager@8.17.0':
+  '@typescript-eslint/scope-manager@8.18.0':
    dependencies:
-      '@typescript-eslint/types': 8.17.0
-      '@typescript-eslint/visitor-keys': 8.17.0
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/visitor-keys': 8.18.0

  '@typescript-eslint/type-utils@8.0.0(eslint@8.43.0)(typescript@5.1.3)':
    dependencies:
@@ -8335,33 +8325,31 @@ snapshots:
      - eslint
      - supports-color

-  '@typescript-eslint/type-utils@8.17.0(eslint@8.53.0)(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@8.18.0(eslint@8.53.0)(typescript@5.6.3)':
    dependencies:
-      '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.17.0(eslint@8.53.0)(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.18.0(eslint@8.53.0)(typescript@5.6.3)
      debug: 4.3.7
      eslint: 8.53.0
      ts-api-utils: 1.3.0(typescript@5.6.3)
-    optionalDependencies:
      typescript: 5.6.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/type-utils@8.17.0(eslint@8.57.0)(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@8.18.0(eslint@8.57.0)(typescript@5.6.3)':
    dependencies:
-      '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.17.0(eslint@8.57.0)(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.6.3)
+      '@typescript-eslint/utils': 8.18.0(eslint@8.57.0)(typescript@5.6.3)
      debug: 4.3.7
      eslint: 8.57.0
      ts-api-utils: 1.3.0(typescript@5.6.3)
-    optionalDependencies:
      typescript: 5.6.3
    transitivePeerDependencies:
      - supports-color

  '@typescript-eslint/types@8.0.0': {}

-  '@typescript-eslint/types@8.17.0': {}
+  '@typescript-eslint/types@8.18.0': {}

  '@typescript-eslint/typescript-estree@8.0.0(typescript@5.1.3)':
    dependencies:
@@ -8378,17 +8366,16 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/typescript-estree@8.17.0(typescript@5.6.3)':
+  '@typescript-eslint/typescript-estree@8.18.0(typescript@5.6.3)':
    dependencies:
-      '@typescript-eslint/types': 8.17.0
-      '@typescript-eslint/visitor-keys': 8.17.0
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/visitor-keys': 8.18.0
      debug: 4.3.7
      fast-glob: 3.3.2
      is-glob: 4.0.3
      minimatch: 9.0.5
      semver: 7.6.3
      ts-api-utils: 1.3.0(typescript@5.6.3)
-    optionalDependencies:
      typescript: 5.6.3
    transitivePeerDependencies:
      - supports-color
@@ -8404,26 +8391,24 @@ snapshots:
      - supports-color
      - typescript

-  '@typescript-eslint/utils@8.17.0(eslint@8.53.0)(typescript@5.6.3)':
+  '@typescript-eslint/utils@8.18.0(eslint@8.53.0)(typescript@5.6.3)':
    dependencies:
      '@eslint-community/eslint-utils': 4.4.0(eslint@8.53.0)
-      '@typescript-eslint/scope-manager': 8.17.0
-      '@typescript-eslint/types': 8.17.0
-      '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.6.3)
      eslint: 8.53.0
-    optionalDependencies:
      typescript: 5.6.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/utils@8.17.0(eslint@8.57.0)(typescript@5.6.3)':
+  '@typescript-eslint/utils@8.18.0(eslint@8.57.0)(typescript@5.6.3)':
    dependencies:
      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
-      '@typescript-eslint/scope-manager': 8.17.0
-      '@typescript-eslint/types': 8.17.0
-      '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.6.3)
      eslint: 8.57.0
-    optionalDependencies:
      typescript: 5.6.3
    transitivePeerDependencies:
      - supports-color
@@ -8433,9 +8418,9 @@ snapshots:
      '@typescript-eslint/types': 8.0.0
      eslint-visitor-keys: 3.4.3

-  '@typescript-eslint/visitor-keys@8.17.0':
+  '@typescript-eslint/visitor-keys@8.18.0':
    dependencies:
-      '@typescript-eslint/types': 8.17.0
+      '@typescript-eslint/types': 8.18.0
      eslint-visitor-keys: 4.2.0

  '@ungap/structured-clone@1.2.0': {}
@@ -9384,6 +9369,10 @@ snapshots:
    dependencies:
      ms: 2.1.3

+  debug@4.4.0:
+    dependencies:
+      ms: 2.1.3
+
  decamelize-keys@1.1.1:
    dependencies:
      decamelize: 1.2.0
@@ -11005,11 +10994,11 @@ snapshots:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.4.15

-  magic-string@0.30.12:
+  magic-string@0.30.14:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.0

-  magic-string@0.30.14:
+  magic-string@0.30.17:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.0

@@ -13077,7 +13066,7 @@ snapshots:
      esrap: 1.2.3
      is-reference: 3.0.3
      locate-character: 3.0.0
-      magic-string: 0.30.14
+      magic-string: 0.30.17
      zimmerframe: 1.1.2

  svgo@3.0.2:
@@ -13530,7 +13519,7 @@ snapshots:
    optionalDependencies:
      vite: 4.5.3(@types/node@20.14.6)(terser@5.31.0)

-  vitefu@1.0.3(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)):
+  vitefu@1.0.4(vite@6.0.3(@types/node@20.14.6)(terser@5.31.0)):
    optionalDependencies:
      vite: 6.0.3(@types/node@20.14.6)(terser@5.31.0)