From a944160395a9d2b6f89ee9c5104964d0d23cf916 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 14:02:06 +0700
Subject: [PATCH 01/26] Upgrade to Svelte 5.0

Upgrade `src/lib/components/Anchor/Anchor.svelte`, `src/lib/components/ContrastTheme/ContrastTheme.svelte`, and `src/lib/components/Controls/Controls.svelte` to Svelte 5.0 syntax.

* **Reactivity Syntax**: Replace `let` with `$state` for reactive variables. Replace `$:` with `$derived` or `$effect` for reactive statements.
* **Props**: Use `$props` to declare props with destructuring.
* **Event Handling**: Replace `on:click` with `onclick` for event handlers. Replace `createEventDispatcher` with callback props.
* **Other Changes**: Refactor various functions and variables to align with the new syntax and structure of Svelte 5.0.
---
 src/lib/components/Anchor/Anchor.svelte       | 289 ++++++------
 .../ContrastTheme/ContrastTheme.svelte        |  96 ++--
 src/lib/components/Controls/Controls.svelte   |  40 +-
 src/lib/components/Drawer/Drawer.svelte       | 108 +++--
 src/lib/components/Edge/Edge.svelte           | 445 +++++++++---------
 src/lib/components/Editor/Editor.svelte       |  53 +--
 src/lib/components/FlowChart/FlowChart.svelte |  22 +-
 src/lib/components/Group/Group.svelte         |  20 +-
 src/lib/components/Minimap/Minimap.svelte     | 118 +++--
 src/lib/components/Node/InternalNode.svelte   |  86 ++--
 src/lib/components/Node/Node.svelte           | 354 +++++++-------
 src/lib/components/Resizer/Resizer.svelte     | 222 ++++-----
 .../components/ThemeToggle/ThemeToggle.svelte |  76 ++-
 .../data/ColorPicker/ColorWheel.svelte        | 106 ++---
 src/lib/components/data/Knob/Knob.svelte      | 178 +++----
 .../data/RadioGroup/RadioGroup.svelte         |  30 +-
 src/lib/components/data/Toggle/Toggle.svelte  |  18 +-
 src/lib/containers/Graph/Graph.svelte         | 358 +++++++-------
 src/lib/containers/Svelvet/Svelvet.svelte     | 348 ++++----------
 src/routes/+page.svelte                       |  26 +-
 20 files changed, 1400 insertions(+), 1593 deletions(-)

diff --git a/src/lib/components/Anchor/Anchor.svelte b/src/lib/components/Anchor/Anchor.svelte
index 9beeffb15..6f3404adf 100644
--- a/src/lib/components/Anchor/Anchor.svelte
+++ b/src/lib/components/Anchor/Anchor.svelte
@@ -5,7 +5,6 @@
 	import { onMount, getContext, onDestroy, afterUpdate } from 'svelte';
 	import { writable, get } from 'svelte/store';
 	import { createEdge, createAnchor, generateOutput } from '$lib/utils/creators';
-	import { createEventDispatcher } from 'svelte';
 	import type {
 		Graph,
 		Node,
@@ -59,65 +58,47 @@
 	const anchorsMounted = getContext<Writable<number>>('anchorsMounted');
 	const flowChart = getContext<object>('flowchart') || undefined;
 
-	export let bgColor: CSSColorString | null = null;
-	export let id: string | number = 0;
-	export let input = false;
-	export let output = false;
-	/**
-	 * @default dependent on `input` and `output` props
-	 * @description When `true`, the Anchor will accept multiple connections. This is set to true by default
-	 * for output anchors or anchors that have not specified an input/output prop.
-	 */
-	export let multiple = output ? true : input ? false : true;
-	/**
-	 * @default 'false'
-	 * @description When `true`, the Anchor will dynamically change its direction
-	 * based on the relative positioning of connected Nodes
-	 */
-	export let dynamic = nodeDynamic || false;
-	export let edge: ComponentType | null = null;
-	export let inputsStore: InputStore | null = null;
-	export let key: string | number | null = null;
-	export let outputStore: OutputStore | null = null;
-	export let connections: Connections = [];
-	export let edgeColor:
-		| Writable<CSSColorString | null>
-		| CustomWritable<CSSColorString>
-		| Readable<CSSColorString> = writable(null);
-	export let edgeLabel = '';
-	/**
-	 * @default 'false'
-	 * @description When `true`, connections and disconnections are not allowed. Updates the cursor on hover.
-	 */
-	export let locked = false;
-	/**
-	 * @default 'false'
-	 * @description When `true`, mouse up events on the parent Node will trigger connections to this Anchor. If this value
-	 * is true for multiple Anchors, connections will be assigned in order, unless an Anchor is set to accept multiple connections.
-	 */
-	export let nodeConnect = false;
-	export let edgeStyle: EdgeStyle | null = null;
-	export let endStyles: Array<EndStyle> = [null, null];
-	/**
-	 * @default 'false'
-	 * @description When `true`, the default Anchor will not be rendered. It is not necessary to set this to true
-	 * when passing custom Anchors as children. It likely only makes sense to use this
-	 * in combination with the  `nodeConnect` prop.
-	 */
-	export let invisible = false;
-	export let direction: Direction =
-		graphDirection === 'TD' ? (input ? 'north' : 'south') : input ? 'west' : 'east';
-	export let title = '';
-
-	const dispatchConnection = createEventDispatcher<{ connection: AnchorConnectionEvent }>();
-	const dispatchDisconnection = createEventDispatcher();
-
-	let anchorElement: HTMLDivElement;
-	let tracking = false;
-	let hovering = false;
-	let previousConnectionCount = 0;
-	let type: InputType = input === output ? null : input ? 'input' : 'output';
-	let assignedConnections: Connections = [];
+	$props = {
+		bgColor: null,
+		id: 0,
+		input: false,
+		output: false,
+		multiple: output ? true : input ? false : true,
+		dynamic: nodeDynamic || false,
+		edge: null,
+		inputsStore: null,
+		key: null,
+		outputStore: null,
+		connections: [],
+		edgeColor: writable(null),
+		edgeLabel: '',
+		locked: false,
+		nodeConnect: false,
+		edgeStyle: null,
+		endStyles: [null, null],
+		invisible: false,
+		direction: graphDirection === 'TD' ? (input ? 'north' : 'south') : input ? 'west' : 'east',
+		title: ''
+	};
+
+	const dispatchConnection = (event: CustomEvent<{ connection: AnchorConnectionEvent }>) => {
+		const customEvent = new CustomEvent('connection', { detail: event.detail });
+		dispatchEvent(customEvent);
+	};
+
+	const dispatchDisconnection = (event: CustomEvent) => {
+		const customEvent = new CustomEvent('disconnection', { detail: event.detail });
+		dispatchEvent(customEvent);
+	};
+
+	let anchorElement;
+	$state = {
+		tracking: false,
+		hovering: false,
+		previousConnectionCount: 0,
+		type: input === output ? null : input ? 'input' : 'output',
+		assignedConnections: []
+	};
 
 	const nodeEdge = node.edge;
 	const anchors = node.anchors;
@@ -126,8 +107,8 @@
 	const rotating = node.rotating;
 	const nodeLevelConnections = node.connections;
 
-	$: connecting = $connectingFrom?.anchor === anchor;
-	$: connectedAnchors = anchor && anchor.connected;
+	$derived connecting = $connectingFrom?.anchor === anchor;
+	$derived connectedAnchors = anchor && anchor.connected;
 
 	const anchorKey: AnchorKey = `A-${id || anchors.count() + 1}/${node.id}`;
 	const anchor = createAnchor(
@@ -156,14 +137,14 @@
 		}, 0);
 
 		if ($nodeLevelConnections?.length && !input) {
-			const remainingConnections: Connections = [];
-			let first: number | null = null;
+			const remainingConnections = [];
+			let first = null;
 			$nodeLevelConnections.forEach((connection, i) => {
 				if (!connection) return;
 				if (first === null) first = i;
 
 				if ((i - first) % outputCount === 0) {
-					assignedConnections.push(connection);
+					 $state.assignedConnections.push(connection);
 					remainingConnections.push(null);
 				} else {
 					remainingConnections.push(connection);
@@ -184,67 +165,71 @@
 		cancelAnimationFrame(animationFrameId);
 	});
 
-	$: dynamicDirection = anchor?.direction;
-
-	$: if (dynamic && anchorElement) changeAnchorSide(anchorElement, $dynamicDirection, node);
+	$derived dynamicDirection = anchor?.direction;
 
-	// $: if (!input && $anchorsMounted && $anchorsMounted === node.anchors.count()) {
-	// 	console.log('Popping');
-	// 	const poppedConnections = $nodeLevelConnections?.pop();
-	// 	if (poppedConnections) connections.push(poppedConnections);
-	// 	connections = connections;
-	// }
+	$effect(() => {
+		if (dynamic && anchorElement) changeAnchorSide(anchorElement, $dynamicDirection, node);
+	});
 
-	$: if ($mounted === nodeStore.count() && connections.length) {
-		checkDirectConnections();
-	}
+	$effect(() => {
+		if ($mounted === nodeStore.count() && connections.length) {
+			checkDirectConnections();
+		}
+	});
 
-	$: if (nodeConnect && $nodeConnectEvent) {
-		handleMouseUp($nodeConnectEvent);
-	}
+	$effect(() => {
+		if (nodeConnect && $nodeConnectEvent) {
+			handleMouseUp($nodeConnectEvent);
+		}
+	});
 
-	// If the user has specifcied connections, we check once all nodes have mounted
-	$: if ($mounted === nodeStore.count() && assignedConnections.length) {
-		checkNodeLevelConnections();
-	}
+	$effect(() => {
+		if ($mounted === nodeStore.count() && $state.assignedConnections.length) {
+			checkNodeLevelConnections();
+		}
+	});
 
-	// If an anchor is added to the store, we update all anchor positions
-	$: if (anchorElement) {
-		$anchors;
-		$connectedAnchors;
-		$dynamicDirection;
-		anchor.recalculatePosition();
-	}
+	$effect(() => {
+		if (anchorElement) {
+			$anchors;
+			$connectedAnchors;
+			$dynamicDirection;
+			anchor.recalculatePosition();
+		}
+	});
 
-	// If the parent node is resizing, we actively track the position of the anchor
-	$: if (!tracking && ($resizingWidth || $resizingHeight || $rotating)) {
-		tracking = true;
-		trackPosition();
-	} else if (!$resizingWidth && !$resizingHeight && tracking && !$rotating) {
-		tracking = false;
-		cancelAnimationFrame(animationFrameId);
-	}
+	$effect(() => {
+		if (! $state.tracking && ($resizingWidth || $resizingHeight || $rotating)) {
+			 $state.tracking = true;
+			trackPosition();
+		} else if (!$resizingWidth && !$resizingHeight &&  $state.tracking && !$rotating) {
+			 $state.tracking = false;
+			cancelAnimationFrame(animationFrameId);
+		}
+	});
 
-	// This fires the connection/disconnection events
-	// We track previous connections and fire a correct event accordingly
-	$: if ($connectedAnchors) {
-		if ($connectedAnchors.size < previousConnectionCount) {
-			// Need to add additional detail for disconnections here
-			dispatchDisconnection('disconnection', { node, anchor });
-		} else if ($connectedAnchors.size > previousConnectionCount) {
-			const anchorArray = Array.from($connectedAnchors);
-			const lastConnection = anchorArray[anchorArray.length - 1];
-			dispatchConnection('connection', {
-				node,
-				anchor,
-				connectedNode: lastConnection.node,
-				connectedAnchor: lastConnection
-			});
+	$effect(() => {
+		if ($connectedAnchors) {
+			if ($connectedAnchors.size <  $state.previousConnectionCount) {
+				// Need to add additional detail for disconnections here
+				dispatchDisconnection(new CustomEvent('disconnection', { detail: { node, anchor } }));
+			} else if ($connectedAnchors.size >  $state.previousConnectionCount) {
+				const anchorArray = Array.from($connectedAnchors);
+				const lastConnection = anchorArray[anchorArray.length - 1];
+				dispatchConnection(new CustomEvent('connection', {
+					detail: {
+						node,
+						anchor,
+						connectedNode: lastConnection.node,
+						connectedAnchor: lastConnection
+					}
+				}));
+			}
+			 $state.previousConnectionCount = $connectedAnchors.size;
 		}
-		previousConnectionCount = $connectedAnchors.size;
-	}
+	});
 
-	function touchBasedConnection(e: TouchEvent) {
+	function touchBasedConnection(e) {
 		edgeStore.delete('cursor');
 
 		const touchPosition = {
@@ -262,9 +247,9 @@
 
 		if (!parentElement) return;
 
-		const compoundId: AnchorKey = parentElement.id as AnchorKey;
+		const compoundId = parentElement.id;
 
-		const nodeId = compoundId.split('/')[1] as NodeKey;
+		const nodeId = compoundId.split('/')[1];
 
 		const connectingAnchor = nodeStore.get(nodeId)?.anchors.get(compoundId);
 
@@ -275,7 +260,7 @@
 		attemptConnection(anchor, connectingAnchor, e);
 	}
 
-	function attemptConnection(source: Anchor, target: Anchor, e: MouseEvent | TouchEvent) {
+	function attemptConnection(source, target, e) {
 		const success = connectAnchors(source, target);
 
 		if (success) {
@@ -287,7 +272,7 @@
 		}
 	}
 
-	function handleMouseUp(e: MouseEvent | TouchEvent) {
+	function handleMouseUp(e) {
 		// Touchend events fire on the original element rather than the "curent one"
 		// So we need to check for this case and retieve the anchor to connect to
 		if ('changedTouches' in e && connecting) {
@@ -310,7 +295,7 @@
 		if ($connectingFrom) connectEdge(e);
 	}
 
-	function handleClick(e: MouseEvent | TouchEvent) {
+	function handleClick(e) {
 		if (locked) return; // Return if the anchor is locked
 
 		// If the Anchor being clicked has connections
@@ -348,8 +333,8 @@
 		}
 	}
 
-	function createCursorEdge(source: Anchor, target: Anchor, disconnect = false) {
-		const edgeConfig: EdgeConfig = {
+	function createCursorEdge(source, target, disconnect = false) {
+		const edgeConfig = {
 			color: edgeColor,
 			label: { text: edgeLabel }
 		};
@@ -364,7 +349,7 @@
 		edgeStore.add(newEdge, 'cursor');
 	}
 
-	function connectEdge(e: MouseEvent | TouchEvent) {
+	function connectEdge(e) {
 		// Delete the temporary edge
 		edgeStore.delete('cursor');
 
@@ -380,8 +365,8 @@
 		anchor.recalculatePosition();
 
 		// Create edge
-		let source: Anchor;
-		let target: Anchor;
+		let source;
+		let target;
 
 		if (input === output) {
 			if (connectingType === 'input') {
@@ -404,12 +389,12 @@
 
 	// Updates the connected anchors set on source and target
 	// Creates the edge and add it to the store
-	function connectAnchors(source: Anchor, target: Anchor) {
+	function connectAnchors(source, target) {
 		// Don't connect an anchor to itself
 		if (source === target) return false;
 		// Don't connect if the anchors are already connected
 		if (get(source.connected).has(anchor)) return false;
-		const edgeConfig: EdgeConfig = {
+		const edgeConfig = {
 			color: edgeColor,
 			label: { text: edgeLabel }
 		};
@@ -417,11 +402,11 @@
 		// get edge style from flowchart if edge is defined in flowchart
 		if (flowChart) {
 			// check if source is in flowchart and target is a child of the source
-			const sourceId: string = source.node.id.slice(2);
+			const sourceId = source.node.id.slice(2);
 			const sourceInFlowchart = flowChart.nodeList[sourceId]; // type flowchart node obj
 			// if source is in flowchart
 			if (sourceInFlowchart) {
-				const targetId: string = target.node.id.slice(2);
+				const targetId = target.node.id.slice(2);
 				const targetInSourceChildren = sourceInFlowchart.children.filter(
 					(child) => child.node.id === targetId
 				)[0];
@@ -470,7 +455,7 @@
 			$inputsStore[key] = writable(get($inputsStore[key]));
 	}
 
-	function clearLinking(connectionMade: boolean) {
+	function clearLinking(connectionMade) {
 		if (connectionMade || !$nodeConnectEvent) {
 			$connectingFrom = null;
 			$nodeConnectEvent = null;
@@ -479,7 +464,7 @@
 
 	// This just repeatedly calls updatePosition until cancelled
 	function trackPosition() {
-		if (!tracking) return;
+		if (! $state.tracking) return;
 		if (anchorElement) anchor.recalculatePosition();
 		animationFrameId = requestAnimationFrame(trackPosition);
 	}
@@ -512,9 +497,7 @@
 		if (source.type === 'output') {
 			createCursorEdge(source, cursorAnchor, true);
 			disconnectStore();
-			const store: ReturnType<typeof generateOutput> = source.store as ReturnType<
-				typeof generateOutput
-			>;
+			const store = source.store;
 			$connectingFrom = { anchor: source, store, key: null };
 		} else {
 			createCursorEdge(source, cursorAnchor, true);
@@ -523,12 +506,12 @@
 	}
 
 	function checkNodeLevelConnections() {
-		assignedConnections.forEach((connection, index) => {
+		 $state.assignedConnections.forEach((connection, index) => {
 			if (!connection) return;
 			const connected = processConnection(connection);
 			if (connected) connections[index] = null;
 		});
-		assignedConnections = assignedConnections.filter((connection) => connection !== null);
+		 $state.assignedConnections =  $state.assignedConnections.filter((connection) => connection !== null);
 	}
 
 	function checkDirectConnections() {
@@ -541,8 +524,8 @@
 		// connections = connections.filter((connection) => connection !== null);
 	}
 
-	export function disconnect(target: [string | number, string | number]) {
-		const nodekey: NodeKey = `N-${target[0]}`;
+	export function disconnect(target) {
+		const nodekey = `N-${target[0]}`;
 		const node = nodeStore.get(nodekey);
 		if (!node) return;
 		const targetAnchor = node.anchors.get(`A-${target[1]}/N-${target[0]}`);
@@ -552,10 +535,10 @@
 		edgeStore.delete(edgeKey[0]);
 	}
 
-	const processConnection = (connection: [string | number, string | number] | string | number) => {
-		let nodeId: string;
-		let anchorId: string | null;
-		let anchorToConnect: Anchor | null = null;
+	const processConnection = (connection) => {
+		let nodeId;
+		let anchorId;
+		let anchorToConnect = null;
 
 		if (Array.isArray(connection)) {
 			nodeId = connection[0].toString();
@@ -566,7 +549,7 @@
 		}
 
 		//Convert to node key used in store/DOM
-		const nodekey: NodeKey = `N-${nodeId}`;
+		const nodekey = `N-${nodeId}`;
 		// Look up node in store
 		const nodeToConnect = nodeStore.get(nodekey);
 		if (!nodeToConnect) {
@@ -581,7 +564,7 @@
 			if (!anchors.length) {
 				return false;
 			}
-			anchorToConnect = anchors.reduce<Anchor | null>((a, b) => {
+			anchorToConnect = anchors.reduce((a, b) => {
 				if (!a && b.type === 'output') return null;
 				if (b.type === 'output') return a;
 				if (!a) return b;
@@ -590,7 +573,7 @@
 			}, null);
 		} else {
 			// Create anchor key
-			const anchorKey: AnchorKey = `A-${anchorId}/${nodekey}`;
+			const anchorKey = `A-${anchorId}/${nodekey}`;
 			// Look up anchor in store
 			anchorToConnect = nodeToConnect.anchors.get(anchorKey) || null;
 		}
@@ -632,12 +615,12 @@
 	tabindex="0"
 	class:locked
 	title={title || ''}
-	on:mouseenter={() => (hovering = true)}
-	on:mouseleave={() => (hovering = false)}
-	on:mousedown|stopPropagation|preventDefault={handleClick}
-	on:mouseup|stopPropagation={handleMouseUp}
-	on:touchstart|stopPropagation|preventDefault={handleClick}
-	on:touchend|stopPropagation={handleMouseUp}
+	onmouseenter={() => ( $state.hovering = true)}
+	onmouseleave={() => ( $state.hovering = false)}
+	onmousedown|stopPropagation|preventDefault={handleClick}
+	onmouseup|stopPropagation={handleMouseUp}
+	ontouchstart|stopPropagation|preventDefault={handleClick}
+	ontouchend|stopPropagation={handleMouseUp}
 	bind:this={anchorElement}
 >
 	<slot linked={$connectedAnchors?.size >= 1} {hovering} {connecting}>
diff --git a/src/lib/components/ContrastTheme/ContrastTheme.svelte b/src/lib/components/ContrastTheme/ContrastTheme.svelte
index a3ef422b0..ce94f9fb5 100644
--- a/src/lib/components/ContrastTheme/ContrastTheme.svelte
+++ b/src/lib/components/ContrastTheme/ContrastTheme.svelte
@@ -1,86 +1,90 @@
 <script lang="ts">
 	import type { CSSColorString } from '$lib/types';
 
-	export let contrastThemes = [
-		'Change Theme',
-		'Black/White',
-		'Yellow/Black',
-		'Black/Yellow',
-		'Black/Green',
-		'Blue/Yellow',
-		'Yellow/Blue',
-		'Grayscale',
-		'Black/Pink',
-		'Custom'
-	];
-	export let corner = 'NE';
-	export let bgColor: CSSColorString | null = null;
-	export let textColor: CSSColorString | null = null;
-	export let nodeColor: CSSColorString | null = null;
-	export let edgeColor: CSSColorString | null = null;
-
-	let current = contrastThemes[0];
-	let isCustomTheme = false;
+	$props = {
+		contrastThemes: [
+			'Change Theme',
+			'Black/White',
+			'Yellow/Black',
+			'Black/Yellow',
+			'Black/Green',
+			'Blue/Yellow',
+			'Yellow/Blue',
+			'Grayscale',
+			'Black/Pink',
+			'Custom'
+		],
+		corner: 'NE',
+		bgColor: null,
+		textColor: null,
+		nodeColor: null,
+		edgeColor: null
+	};
+
+	$state = {
+		current: $props.contrastThemes[0],
+		isCustomTheme: false
+	};
 
 	function changeTheme(event: { target: { value: any } }) {
 		const selectedTheme = event.target.value;
 
 		if (selectedTheme === 'Custom') {
-			isCustomTheme = true;
+			$state.isCustomTheme = true;
 		} else {
-			isCustomTheme = false;
-			bgColor = null;
-			textColor = null;
-			nodeColor = null;
-			edgeColor = null;
-			current = selectedTheme;
+			$state.isCustomTheme = false;
+			$props.bgColor = null;
+			$props.textColor = null;
+			$props.nodeColor = null;
+			$props.edgeColor = null;
+			$state.current = selectedTheme;
 			document.documentElement.setAttribute('svelvet-theme', selectedTheme);
 			updateCustomTheme();
 		}
-		localStorage.setItem('currentTheme', current);
+		localStorage.setItem('currentTheme', $state.current);
 	}
 
 	function updateCustomTheme() {
-		document.documentElement.style.setProperty('--default-background-color', bgColor);
-		document.documentElement.style.setProperty('--default-text-color', textColor);
-		document.documentElement.style.setProperty('--default-node-color', nodeColor);
-		document.documentElement.style.setProperty('--default-edge-color', edgeColor);
+		document.documentElement.style.setProperty('--default-background-color', $props.bgColor);
+		document.documentElement.style.setProperty('--default-text-color', $props.textColor);
+		document.documentElement.style.setProperty('--default-node-color', $props.nodeColor);
+		document.documentElement.style.setProperty('--default-edge-color', $props.edgeColor);
 	}
 </script>
 
-<div class="contrast-wrapper" class:NE={corner === 'NE'} on:input={updateCustomTheme}>
+<div class="contrast-wrapper" class:NE={$props.corner === 'NE'} oninput={updateCustomTheme}>
 	<label for="themeSelector" class="visually-hidden" aria-hidden="true">Select Theme:</label>
-	<select id="themeSelector" on:change={changeTheme} aria-live="polite" aria-label="Select Theme">
-		{#each contrastThemes as contrast (contrast)}
-			<option value={contrast} aria-selected={current === contrast}>{contrast}</option>
+	<select id="themeSelector" onchange={changeTheme} aria-live="polite" aria-label="Select Theme">
+		{#each $props.contrastThemes as contrast (contrast)}
+			<option value={contrast} aria-selected={$state.current === contrast}>{contrast}</option>
 		{/each}
 	</select>
 
-	{#if isCustomTheme}
+	{#if $state.isCustomTheme}
 		<div>
 			<label for="customBgColor">BackGround</label>
-			<input type="color" id="customBgColor" bind:value={bgColor} />
+			<input type="color" id="customBgColor" bind:value={$props.bgColor} />
 		</div>
 		<div>
 			<label for="customTextColor">Text</label>
-			<input type="color" id="customTextColor" bind:value={textColor} />
+			<input type="color" id="customTextColor" bind:value={$props.textColor} />
 		</div>
 		<div>
 			<label for="customTextColor">Node</label>
-			<input type="color" id="customNodeColor" bind:value={nodeColor} />
+			<input type="color" id="customNodeColor" bind:value={$props.nodeColor} />
 		</div>
 		<div>
 			<label for="customTextColor">Edge</label>
-			<input type="color" id="customEdgeColor" bind:value={edgeColor} />
+			<input type="color" id="customEdgeColor" bind:value={$props.edgeColor} />
 		</div>
 		<button
-			on:click={() => {
-				isCustomTheme = false;
-				current = contrastThemes[0];
-				document.documentElement.setAttribute('svelvet-theme', current);
+			onclick={() => {
+				$state.isCustomTheme = false;
+				$state.current = $props.contrastThemes[0];
+				document.documentElement.setAttribute('svelvet-theme', $state.current);
 				let themeSelector = document.getElementById('themeSelector');
 				if (themeSelector) {
-					themeSelector.value = current;
+					themeSelector.value = $state.current;
 				}
 			}}>Close</button
 		>
diff --git a/src/lib/components/Controls/Controls.svelte b/src/lib/components/Controls/Controls.svelte
index 161e2ed97..ea63cd52f 100644
--- a/src/lib/components/Controls/Controls.svelte
+++ b/src/lib/components/Controls/Controls.svelte
@@ -7,11 +7,13 @@
 	import { tracking } from '$lib/stores';
 	import Icon from '$lib/assets/icons/Icon.svelte';
 
-	export let increment = 0.1;
-	export let horizontal = false;
-	export let bgColor: CSSColorString | null = null;
-	export let iconColor: CSSColorString | null = null;
-	export let corner = 'SW';
+	$props = {
+		increment: 0.1,
+		horizontal: false,
+		bgColor: null,
+		iconColor: null,
+		corner: 'SW'
+	};
 
 	const transforms = getContext<Graph['transforms']>('transforms');
 	const dimensions = getContext<Graph['dimensions']>('dimensions');
@@ -21,7 +23,7 @@
 
 	const { translation } = transforms;
 
-	const hidden = $groups.hidden.nodes;
+	$derived hidden = $groups.hidden.nodes;
 
 	const nodeBounds = bounds.nodeBounds;
 
@@ -30,11 +32,11 @@
 	}
 
 	function zoomIn() {
-		zoomAndTranslate(-1, dimensions, transforms, increment);
+		zoomAndTranslate(-1, dimensions, transforms, $props.increment);
 	}
 
 	function zoomOut() {
-		zoomAndTranslate(1, dimensions, transforms, increment);
+		zoomAndTranslate(1, dimensions, transforms, $props.increment);
 	}
 
 	function fitView() {
@@ -53,34 +55,34 @@
 
 <nav
 	class="graph-controls"
-	class:SW={corner === 'SW'}
-	class:NE={corner === 'NE'}
-	class:SE={corner === 'SE'}
-	class:NW={corner === 'NW'}
+	class:SW={$props.corner === 'SW'}
+	class:NE={$props.corner === 'NE'}
+	class:SE={$props.corner === 'SE'}
+	class:NW={$props.corner === 'NW'}
 	aria-label="navigation"
 >
 	<slot {zoomIn} {zoomOut} {fitView} {lock} {unhideAll}>
 		<div
 			class="controls-wrapper"
 			class:horizontal
-			style:--prop-controls-background-color={bgColor}
-			style:--prop-controls-text-color={iconColor}
+			style:--prop-controls-background-color={$props.bgColor}
+			style:--prop-controls-text-color={$props.iconColor}
 		>
 			{#if $hidden.size > 0}
-				<button class="unhide" on:mousedown|stopPropagation={unhideAll}>
+				<button class="unhide" onclick={unhideAll}>
 					<Icon icon="visibility_off" />
 				</button>
 			{/if}
-			<button class="zoom-in" on:mousedown|stopPropagation={zoomIn} on:touchstart={zoomIn}>
+			<button class="zoom-in" onclick={zoomIn}>
 				<Icon icon="zoom_in" />
 			</button>
-			<button class="zoom-out" on:mousedown|stopPropagation={zoomOut} on:touchstart={zoomOut}>
+			<button class="zoom-out" onclick={zoomOut}>
 				<Icon icon="zoom_out" />
 			</button>
-			<button class="reset" on:mousedown|stopPropagation={fitView} on:touchstart={fitView}>
+			<button class="reset" onclick={fitView}>
 				<Icon icon="filter_center_focus" />
 			</button>
-			<button class="lock" on:mousedown|stopPropagation={lock} on:touchstart={lock}>
+			<button class="lock" onclick={lock}>
 				<Icon icon={$locked ? 'lock_open' : 'lock'} />
 			</button>
 		</div>
diff --git a/src/lib/components/Drawer/Drawer.svelte b/src/lib/components/Drawer/Drawer.svelte
index 88ca1c510..711341114 100644
--- a/src/lib/components/Drawer/Drawer.svelte
+++ b/src/lib/components/Drawer/Drawer.svelte
@@ -5,64 +5,68 @@
 	import { defaultNodePropsStore } from './DrawerNode.svelte';
 
 	// Props
-	export let width = 0;
-	export let height = 0;
-	export let minimap = false;
-	export let translation: XYPair = { x: 0, y: 0 };
-	export let controls = false;
-	export let edge: ComponentType | null = null;
-	export let edgeStyle: EdgeStyle = 'bezier';
-	export let snapTo = 0;
-	export let editable = false;
-	export let fitView: boolean | 'resize' = false;
-	export let locked = false;
-	export let zoom = 1;
-	export let theme = 'light';
-	export let mermaid = '';
-	export let mermaidConfig: Record<string, NodeConfig> = {};
-	export let TD = false;
-	export let disableSelection = false;
-	export let raiseEdgesOnSelect: boolean | 'source' | 'target' = false;
-	export let modifier: 'alt' | 'ctrl' | 'shift' | 'meta' = 'meta';
-	export let trackpadPan = false;
-	export let toggle = false;
+	$props = {
+		width: 0,
+		height: 0,
+		minimap: false,
+		translation: { x: 0, y: 0 },
+		controls: false,
+		edge: null,
+		edgeStyle: 'bezier',
+		snapTo: 0,
+		editable: false,
+		fitView: false,
+		locked: false,
+		zoom: 1,
+		theme: 'light',
+		mermaid: '',
+		mermaidConfig: {},
+		TD: false,
+		disableSelection: false,
+		raiseEdgesOnSelect: false,
+		modifier: 'meta',
+		trackpadPan: false,
+		toggle: false
+	};
 
 	// Store props in object to be passed to svelvet
 	const svelvetProps: SvelvetConfig = {
-		width,
-		height,
-		minimap,
-		translation,
-		controls,
-		edge,
-		edgeStyle,
-		snapTo,
-		editable,
-		fitView,
-		locked,
-		zoom,
-		theme,
-		mermaid,
-		mermaidConfig,
-		TD,
-		disableSelection,
-		raiseEdgesOnSelect,
-		modifier,
-		trackpadPan,
-		toggle
+		width: $props.width,
+		height: $props.height,
+		minimap: $props.minimap,
+		translation: $props.translation,
+		controls: $props.controls,
+		edge: $props.edge,
+		edgeStyle: $props.edgeStyle,
+		snapTo: $props.snapTo,
+		editable: $props.editable,
+		fitView: $props.fitView,
+		locked: $props.locked,
+		zoom: $props.zoom,
+		theme: $props.theme,
+		mermaid: $props.mermaid,
+		mermaidConfig: $props.mermaidConfig,
+		TD: $props.TD,
+		disableSelection: $props.disableSelection,
+		raiseEdgesOnSelect: $props.raiseEdgesOnSelect,
+		modifier: $props.modifier,
+		trackpadPan: $props.trackpadPan,
+		toggle: $props.toggle
 	};
 
 	// Array of default and custom nodes, anchors
-	let defaultNodes: NodeDrawerConfig[] = [];
-	let dropped_in: boolean;
+	$state = {
+		defaultNodes: [],
+		dropped_in: false
+	};
 
 	// Drag and drop events
 	const handleDragEnter = (): void => {
-		if (!dropped_in) dropped_in = true;
+		if (!$state.dropped_in) $state.dropped_in = true;
 	};
 
 	const handleDragLeave = (): void => {
-		dropped_in = false;
+		$state.dropped_in = false;
 	};
 
 	const onDragOver = (e: DragEvent): boolean => {
@@ -81,20 +85,20 @@
 		const target = e.target as HTMLElement;
 		target.dispatchEvent(moveEvent);
 
-		defaultNodes = $defaultNodePropsStore;
+		$state.defaultNodes = $defaultNodePropsStore;
 	};
 </script>
 
 <div
 	role="presentation"
 	class="drop_zone"
-	on:dragenter={handleDragEnter}
-	on:dragleave={handleDragLeave}
-	on:dragover={onDragOver}
-	on:drop={handleDrop}
+	ondragenter={handleDragEnter}
+	ondragleave={handleDragLeave}
+	ondragover={onDragOver}
+	ondrop={handleDrop}
 >
 	<Svelvet {...svelvetProps} drawer>
-		{#each defaultNodes as { anchors, edgeProps, ...nodeProps }}
+		{#each $state.defaultNodes as { anchors, edgeProps, ...nodeProps }}
 			{#if anchors}
 				<Node {...nodeProps} drop="cursor">
 					<slot slot="anchorWest">
diff --git a/src/lib/components/Edge/Edge.svelte b/src/lib/components/Edge/Edge.svelte
index 9bfad9632..20abcf3f0 100644
--- a/src/lib/components/Edge/Edge.svelte
+++ b/src/lib/components/Edge/Edge.svelte
@@ -31,29 +31,24 @@
 	const edgesAboveNode = getContext('edgesAboveNode');
 
 	// Props
-	export let edge: WritableEdge = getContext<WritableEdge>('edge');
-	export let straight = edgeStyle === 'straight';
-	export let step = edgeStyle === 'step';
-	export let start = endStyles[0];
-	export let end = endStyles[1];
-	export let animate = false;
-	export let label = '';
-	export let enableHover = false;
-	export let edgeClick: null | (() => void) = null;
-	/**
-	 * @default 0.5
-	 * @type number
-	 * @description The position of the label along the edge. 0 is the source, 1 is the target.
-	 */
-	export let labelPosition = 0.5;
-
-	// Styling via props/objects will likely be deprecated
-	export let width: number | null = null;
-	export let color: CSSColorString | null = null;
-	export let labelColor: CSSColorString | null = null;
-	export let textColor: CSSColorString | null = null;
-	export let cornerRadius = 8;
-	export let targetColor: CSSColorString | null = null;
+	$props = {
+		edge: getContext<WritableEdge>('edge'),
+		straight: edgeStyle === 'straight',
+		step: edgeStyle === 'step',
+		start: endStyles[0],
+		end: endStyles[1],
+		animate: false,
+		label: '',
+		enableHover: false,
+		edgeClick: null,
+		labelPosition: 0.5,
+		width: null,
+		color: null,
+		labelColor: null,
+		textColor: null,
+		cornerRadius: 8,
+		targetColor: null
+	};
 
 	// External stores
 	const source = edge.source;
@@ -74,143 +69,167 @@
 	const edgeKey = edge.id;
 
 	// Reactive variables
-	let path: string;
-	let DOMPath: SVGPathElement; // The SVG path element used for calculating the midpoint of the curve for labels
-	let labelPoint = { x: 0, y: 0 };
-	let tracking = false; // Boolean that stops/starts tracking the path midpoint
-	let prefersVertical = false;
-	let sourceAbove = false;
-	let sourceLeft = false;
-	let hovering = false;
-	let edgeElement: SVGElement;
-
-	// Reactive declarations
-	$: dynamic = $sourceDynamic || $targetDynamic;
-	$: edgeColor = source?.edgeColor || target?.edgeColor || null;
-	$: edgeLabel = edge.label?.text;
-	$: finalColor = color || $edgeColor || null;
-	$: labelText = label || $edgeLabel || '';
-	$: renderLabel = labelText || $$slots.label; // Boolean that determines whether or not to render the label
-
-	// Subscriptions
-	$: sourcePosition = $sourcePositionStore;
-	$: targetPosition = $targetPositionStore;
-	$: sourceNodePosition = $sourceNodePositionStore;
-	$: targetNodePosition = $targetNodePositionStore;
-
-	//Reactive declarations
-	$: sourceX = sourcePosition.x;
-	$: sourceY = sourcePosition.y;
-	$: targetX = targetPosition.x;
-	$: targetY = targetPosition.y;
-
-	// The distances between the points
-	$: deltaX = targetX - sourceX;
-	$: deltaY = targetY - sourceY;
-	$: anchorWidth = Math.abs(deltaX);
-	$: anchorHeight = Math.abs(deltaY);
-
-	// Strength of curvature
-	$: maxCurveDisplaceX = Math.max(30, Math.min(600, anchorWidth / 2));
-	$: maxCurveDisplaceY = Math.max(30, Math.min(600, anchorHeight / 2));
-
-	// Helper XY pair to offset the control points
-	$: sourceControlVector = rotateVector(directionVectors[$sourceDirection], $sourceRotation || 0);
-	$: targetControlVector = rotateVector(directionVectors[$targetDirection], $targetRotation || 0);
-
-	// Calculating the control points for the bezier curve
-	$: sourceControlX = sourceX + sourceControlVector.x * maxCurveDisplaceX;
-	$: sourceControlY = sourceY + sourceControlVector.y * maxCurveDisplaceY;
-	$: targetControlX = targetX + targetControlVector.x * maxCurveDisplaceX;
-	$: targetControlY = targetY + targetControlVector.y * maxCurveDisplaceY;
-
-	// Constructing the control point element of the path string
-	$: controlPointString = `C ${sourceControlX}, ${sourceControlY} ${targetControlX}, ${targetControlY}`;
-
-	// The full SVG path string
-	$: if (!step || edgeKey === 'cursor' || $edgeType === 'bezier') {
-		path = `M ${sourceX}, ${sourceY} ${!straight ? controlPointString : ''} ${targetX}, ${targetY}`;
-	}
-
-	// We only want to recalculate the path midpoints if the source or target is moving
-	// And we only want to recalculate the path midpoints if there is a label
-	$: if (renderLabel && !tracking && ($sourceMoving || $targetMoving || edgeKey === 'cursor')) {
-		tracking = true;
-		trackPath();
-	} else if (tracking && !$sourceMoving && !$targetMoving && edgeKey !== 'cursor') {
-		tracking = false;
-		cancelAnimationFrame(animationFrameId);
-	}
-
-	$: if (dynamic && source.node && target.node) {
-		const nodeXDelta = targetNodePosition.x - sourceNodePosition.x;
-		const nodeYDelta = targetNodePosition.y - sourceNodePosition.y;
-		sourceAbove = nodeYDelta > 0;
-		sourceLeft = nodeXDelta > 0;
-		let borderDeltaY;
-		let borderDeltaX;
-		if (sourceAbove) {
-			const sourceHeight = get(source.node.dimensions.height);
-			const sourceBottom = sourceNodePosition.y + sourceHeight;
-			borderDeltaY = targetNodePosition.y - sourceBottom;
-		} else {
-			const targetHeight = get(target.node.dimensions.height);
-			const targetBottom = targetNodePosition.y + targetHeight;
-			borderDeltaY = sourceNodePosition.y - targetBottom;
+	$state = {
+		path: '',
+		DOMPath: null,
+		labelPoint: { x: 0, y: 0 },
+		tracking: false,
+		prefersVertical: false,
+		sourceAbove: false,
+		sourceLeft: false,
+		hovering: false,
+		edgeElement: null,
+		sourcePosition: null,
+		targetPosition: null,
+		sourceNodePosition: null,
+		targetNodePosition: null,
+		sourceX: 0,
+		sourceY: 0,
+		targetX: 0,
+		targetY: 0,
+		deltaX: 0,
+		deltaY: 0,
+		anchorWidth: 0,
+		anchorHeight: 0,
+		maxCurveDisplaceX: 0,
+		maxCurveDisplaceY: 0,
+		sourceControlVector: null,
+		targetControlVector: null,
+		sourceControlX: 0,
+		sourceControlY: 0,
+		targetControlX: 0,
+		targetControlY: 0,
+		controlPointString: '',
+		sourceZIndex: 0,
+		targetZIndex: 0,
+		maxZIndex: 0,
+		zIndex: 0
+	};
+
+	$derived dynamic = $sourceDynamic || $targetDynamic;
+	$derived edgeColor = source?.edgeColor || target?.edgeColor || null;
+	$derived edgeLabel = edge.label?.text;
+	$derived finalColor = color || $edgeColor || null;
+	$derived labelText = label || $edgeLabel || '';
+	$derived renderLabel = labelText || $$slots.label;
+
+	$derived sourcePosition = $sourcePositionStore;
+	$derived targetPosition = $targetPositionStore;
+	$derived sourceNodePosition = $sourceNodePositionStore;
+	$derived targetNodePosition = $targetNodePositionStore;
+
+	$derived sourceX = sourcePosition.x;
+	$derived sourceY = sourcePosition.y;
+	$derived targetX = targetPosition.x;
+	$derived targetY = targetPosition.y;
+
+	$derived deltaX = targetX - sourceX;
+	$derived deltaY = targetY - sourceY;
+	$derived anchorWidth = Math.abs(deltaX);
+	$derived anchorHeight = Math.abs(deltaY);
+
+	$derived maxCurveDisplaceX = Math.max(30, Math.min(600, anchorWidth / 2));
+	$derived maxCurveDisplaceY = Math.max(30, Math.min(600, anchorHeight / 2));
+
+	$derived sourceControlVector = rotateVector(directionVectors[$sourceDirection], $sourceRotation || 0);
+	$derived targetControlVector = rotateVector(directionVectors[$targetDirection], $targetRotation || 0);
+
+	$derived sourceControlX = sourceX + sourceControlVector.x * maxCurveDisplaceX;
+	$derived sourceControlY = sourceY + sourceControlVector.y * maxCurveDisplaceY;
+	$derived targetControlX = targetX + targetControlVector.x * maxCurveDisplaceX;
+	$derived targetControlY = targetY + targetControlVector.y * maxCurveDisplaceY;
+
+	$derived controlPointString = `C ${sourceControlX}, ${sourceControlY} ${targetControlX}, ${targetControlY}`;
+
+	$effect(() => {
+		if (!step || edgeKey === 'cursor' || $edgeType === 'bezier') {
+			$state.path = `M ${sourceX}, ${sourceY} ${!straight ? controlPointString : ''} ${targetX}, ${targetY}`;
 		}
-		if (sourceLeft) {
-			const sourceWidth = get(source.node.dimensions.width);
-			const sourceRight = sourceNodePosition.x + sourceWidth;
-			borderDeltaX = targetNodePosition.x - sourceRight;
-		} else {
-			const targetWidth = get(target.node.dimensions.width);
-			const targetRight = targetNodePosition.x + targetWidth;
-			borderDeltaX = sourceNodePosition.x - targetRight;
+	});
+
+	$effect(() => {
+		if (renderLabel && !$state.tracking && ($sourceMoving || $targetMoving || edgeKey === 'cursor')) {
+			$state.tracking = true;
+			trackPath();
+		} else if ($state.tracking && !$sourceMoving && !$targetMoving && edgeKey !== 'cursor') {
+			$state.tracking = false;
+			cancelAnimationFrame(animationFrameId);
 		}
+	});
 
-		prefersVertical = borderDeltaY > borderDeltaX;
-	}
+	$effect(() => {
+		if (dynamic && source.node && target.node) {
+			const nodeXDelta = targetNodePosition.x - sourceNodePosition.x;
+			const nodeYDelta = targetNodePosition.y - sourceNodePosition.y;
+			$state.sourceAbove = nodeYDelta > 0;
+			$state.sourceLeft = nodeXDelta > 0;
+			let borderDeltaY;
+			let borderDeltaX;
+			if ($state.sourceAbove) {
+				const sourceHeight = get(source.node.dimensions.height);
+				const sourceBottom = sourceNodePosition.y + sourceHeight;
+				borderDeltaY = targetNodePosition.y - sourceBottom;
+			} else {
+				const targetHeight = get(target.node.dimensions.height);
+				const targetBottom = targetNodePosition.y + targetHeight;
+				borderDeltaY = sourceNodePosition.y - targetBottom;
+			}
+			if ($state.sourceLeft) {
+				const sourceWidth = get(source.node.dimensions.width);
+				const sourceRight = sourceNodePosition.x + sourceWidth;
+				borderDeltaX = targetNodePosition.x - sourceRight;
+			} else {
+				const targetWidth = get(target.node.dimensions.width);
+				const targetRight = targetNodePosition.x + targetWidth;
+				borderDeltaX = sourceNodePosition.x - targetRight;
+			}
 
-	$: if (dynamic) {
-		let newSourceDirection: Direction;
-		let newTargetDirection: Direction;
-		if (prefersVertical) {
-			newSourceDirection = sourceAbove ? 'south' : 'north';
-			newTargetDirection = sourceAbove ? 'north' : 'south';
-		} else {
-			newSourceDirection = sourceLeft ? 'east' : 'west';
-			newTargetDirection = sourceLeft ? 'west' : 'east';
+			$state.prefersVertical = borderDeltaY > borderDeltaX;
 		}
-		if ($sourceDynamic) $sourceDirection = newSourceDirection;
-		if ($targetDynamic) $targetDirection = newTargetDirection;
-	}
+	});
+
+	$effect(() => {
+		if (dynamic) {
+			let newSourceDirection: Direction;
+			let newTargetDirection: Direction;
+			if ($state.prefersVertical) {
+				newSourceDirection = $state.sourceAbove ? 'south' : 'north';
+				newTargetDirection = $state.sourceAbove ? 'north' : 'south';
+			} else {
+				newSourceDirection = $state.sourceLeft ? 'east' : 'west';
+				newTargetDirection = $state.sourceLeft ? 'west' : 'east';
+			}
+			if ($sourceDynamic) $sourceDirection = newSourceDirection;
+			if ($targetDynamic) $targetDirection = newTargetDirection;
+		}
+	});
+
 	edge.rendered.set(true);
-	// Lifecycle methods
+
 	onMount(() => {
 		setTimeout(() => {
-			if (DOMPath) {
-				labelPoint = calculatePath(DOMPath, labelPosition);
+			if ($state.DOMPath) {
+				$state.labelPoint = calculatePath($state.DOMPath, labelPosition);
 			}
 		}, 0);
-		moveEdge(edgeElement);
+		moveEdge($state.edgeElement);
 	});
 
 	afterUpdate(() => {
-		if (DOMPath) {
-			labelPoint = calculatePath(DOMPath, labelPosition);
+		if ($state.DOMPath) {
+			$state.labelPoint = calculatePath($state.DOMPath, labelPosition);
 		}
 	});
 
 	onDestroy(() => {
-		edgeElement.remove();
+		$state.edgeElement.remove();
 		cancelAnimationFrame(animationFrameId);
 	});
 
-	// Track the path in sync with browser animation frames
 	function trackPath() {
-		if (!tracking) return;
-		if (DOMPath) {
-			labelPoint = calculatePath(DOMPath, labelPosition);
+		if (!$state.tracking) return;
+		if ($state.DOMPath) {
+			$state.labelPoint = calculatePath($state.DOMPath, labelPosition);
 		}
 		animationFrameId = requestAnimationFrame(trackPath);
 	}
@@ -229,74 +248,76 @@
 		});
 	}
 
-	$: if (step && edgeKey !== 'cursor' && !($edgeType && $edgeType === 'bezier')) {
-		const sourceObject = {
-			x: sourceX,
-			y: sourceY,
-			direction: directionVectors[$sourceDirection]
-		};
-		const targetObject = {
-			x: targetX,
-			y: targetY,
-			direction: directionVectors[$targetDirection]
-		};
-
-		const steps = calculateStepPath(sourceObject, targetObject, stepBuffer);
-
-		const buildArcStringIfNeeded = (
-			step: { x: number; y: number },
-			index: number,
-			radius: number
-		) => {
-			if (index < steps.length - 1) {
-				const arcStringKey = buildArcStringKey(step, steps[index + 1]);
-				return constructArcString(radius, arcStringKey);
-			}
-			return '';
-		};
-
-		path = steps.reduce((string, step, index) => {
-			const directionX = Math.sign(step.x);
-			const directionY = Math.sign(step.y);
-			let xStep = step.x;
-			let yStep = step.y;
-			let arcString = '';
-
-			if (cornerRadius) {
-				const nextStep = steps[index + 1] || { x: 0, y: 0 };
-				const previousStep = steps[index - 1] || { x: 0, y: 0 };
-
-				const radiusX = calculateRadius(step.x, nextStep.x, cornerRadius);
-				const radiusY = calculateRadius(nextStep.y, step.y, cornerRadius);
-				const previousRadiusX = calculateRadius(previousStep.x, step.x, cornerRadius);
-				const previousRadiusY = calculateRadius(previousStep.y, step.y, cornerRadius);
-				const previousRadius = Math.min(previousRadiusX, previousRadiusY);
-				const radius = Math.min(radiusX, radiusY);
-
-				if (step.x) {
-					xStep = step.x - (radius + previousRadius) * directionX;
-				} else {
-					yStep = step.y - (radius + previousRadius) * directionY;
+	$effect(() => {
+		if (step && edgeKey !== 'cursor' && !($edgeType && $edgeType === 'bezier')) {
+			const sourceObject = {
+				x: sourceX,
+				y: sourceY,
+				direction: directionVectors[$sourceDirection]
+			};
+			const targetObject = {
+				x: targetX,
+				y: targetY,
+				direction: directionVectors[$targetDirection]
+			};
+
+			const steps = calculateStepPath(sourceObject, targetObject, stepBuffer);
+
+			const buildArcStringIfNeeded = (
+				step: { x: number; y: number },
+				index: number,
+				radius: number
+			) => {
+				if (index < steps.length - 1) {
+					const arcStringKey = buildArcStringKey(step, steps[index + 1]);
+					return constructArcString(radius, arcStringKey);
+				}
+				return '';
+			};
+
+			$state.path = steps.reduce((string, step, index) => {
+				const directionX = Math.sign(step.x);
+				const directionY = Math.sign(step.y);
+				let xStep = step.x;
+				let yStep = step.y;
+				let arcString = '';
+
+				if (cornerRadius) {
+					const nextStep = steps[index + 1] || { x: 0, y: 0 };
+					const previousStep = steps[index - 1] || { x: 0, y: 0 };
+
+					const radiusX = calculateRadius(step.x, nextStep.x, cornerRadius);
+					const radiusY = calculateRadius(nextStep.y, step.y, cornerRadius);
+					const previousRadiusX = calculateRadius(previousStep.x, step.x, cornerRadius);
+					const previousRadiusY = calculateRadius(previousStep.y, step.y, cornerRadius);
+					const previousRadius = Math.min(previousRadiusX, previousRadiusY);
+					const radius = Math.min(radiusX, radiusY);
+
+					if (step.x) {
+						xStep = step.x - (radius + previousRadius) * directionX;
+					} else {
+						yStep = step.y - (radius + previousRadius) * directionY;
+					}
+
+					arcString = buildArcStringIfNeeded(step, index, radius);
 				}
 
-				arcString = buildArcStringIfNeeded(step, index, radius);
-			}
-
-			return buildPath(string, xStep, yStep, arcString);
-		}, `M ${sourceX}, ${sourceY}`);
-	}
+				return buildPath(string, xStep, yStep, arcString);
+			}, `M ${sourceX}, ${sourceY}`);
+		}
+	});
 
-	$: sourceZIndex = source.node.zIndex || 0;
-	$: targetZIndex = target.node.zIndex || 0;
-	$: maxZIndex = Math.max($sourceZIndex, $targetZIndex);
+	$derived sourceZIndex = source.node.zIndex || 0;
+	$derived targetZIndex = target.node.zIndex || 0;
+	$derived maxZIndex = Math.max($sourceZIndex, $targetZIndex);
 
-	$: zIndex =
+	$derived zIndex =
 		edgesAboveNode === 'all'
 			? 100000
 			: edgesAboveNode
-			? maxZIndex
+			? $state.maxZIndex
 			: raiseEdgesOnSelect === true
-			? maxZIndex - 1
+			? $state.maxZIndex - 1
 			: raiseEdgesOnSelect === 'source'
 			? $sourceZIndex - 1
 			: raiseEdgesOnSelect === 'target'
@@ -305,7 +326,7 @@
 </script>
 
 {#if source && target}
-	<svg class="edges-wrapper" style:z-index={zIndex} bind:this={edgeElement}>
+	<svg class="edges-wrapper" style:z-index={$state.zIndex} bind:this={$state.edgeElement}>
 		{#if start || end}
 			<defs>
 				<marker
@@ -317,7 +338,7 @@
 					refY="5"
 					orient="auto"
 				>
-					<polygon class="arrow" points="0 0, 15 5, 0 10" style:--prop-edge-color={finalColor} />
+					<polygon class="arrow" points="0 0, 15 5, 0 10" style:--prop-edge-color={$state.finalColor} />
 				</marker>
 				<marker
 					id={edgeKey + '-start-arrow'}
@@ -328,7 +349,7 @@
 					refY="5"
 					orient="auto"
 				>
-					<polygon class="arrow" points="0 5, 15 0, 15 10" style:--prop-edge-color={finalColor} />
+					<polygon class="arrow" points="0 5, 15 0, 15 10" style:--prop-edge-color={$state.finalColor} />
 				</marker>
 			</defs>
 		{/if}
@@ -337,21 +358,21 @@
 			id={edgeKey + '-target'}
 			class="target"
 			class:cursor={edgeKey === 'cursor' || (!edgeClick && !enableHover)}
-			style:cursor={edgeClick || hovering ? 'pointer' : 'move'}
-			style:--prop-target-edge-color={edgeClick || hovering ? targetColor || null : 'transparent'}
-			d={path}
-			on:mousedown={edgeClick}
-			on:mouseenter={() => (hovering = true)}
-			on:mouseleave={() => (hovering = false)}
-			bind:this={DOMPath}
+			style:cursor={edgeClick || $state.hovering ? 'pointer' : 'move'}
+			style:--prop-target-edge-color={edgeClick || $state.hovering ? targetColor || null : 'transparent'}
+			d={$state.path}
+			onmousedown={edgeClick}
+			onmouseenter={() => ($state.hovering = true)}
+			onmouseleave={() => ($state.hovering = false)}
+			bind:this={$state.DOMPath}
 		/>
 		<slot {path} {destroy} {hovering}>
 			<path
 				id={edgeKey}
 				class="edge"
 				class:animate
-				d={path}
-				style:--prop-edge-color={finalColor}
+				d={$state.path}
+				style:--prop-edge-color={$state.finalColor}
 				marker-end={end === 'arrow' ? `url(#${edgeKey + '-end-arrow'})` : ''}
 				marker-start={start === 'arrow' ? `url(#${edgeKey + '-start-arrow'})` : ''}
 				style:--prop-stroke-width={width ? width + 'px' : null}
@@ -359,7 +380,7 @@
 		</slot>
 
 		{#if renderLabel}
-			<foreignObject x={labelPoint.x} y={labelPoint.y} width="100%" height="100%">
+			<foreignObject x={$state.labelPoint.x} y={$state.labelPoint.y} width="100%" height="100%">
 				<span class="label-wrapper">
 					<slot name="label" {destroy} {hovering}>
 						<div
diff --git a/src/lib/components/Editor/Editor.svelte b/src/lib/components/Editor/Editor.svelte
index edb91c3f7..68f22f695 100644
--- a/src/lib/components/Editor/Editor.svelte
+++ b/src/lib/components/Editor/Editor.svelte
@@ -9,40 +9,41 @@
 	import type { CSSColorString, Node as SvelvetNode } from '$lib/types';
 	import Node from '../Node/Node.svelte';
 
-	export let editing: SvelvetNode;
+	$props = {
+		editing: null
+	};
+
 	const graph = getContext<Graph>('graph');
 	setContext<Graph>('graph', graph);
-	setContext<Writable<string | null>>('textStore', editing.label);
-	setContext<Writable<CSSColorString | null>>('colorStore', editing.bgColor);
+	setContext<Writable<string | null>>('textStore', $props.editing.label);
+	setContext<Writable<CSSColorString | null>>('colorStore', $props.editing.bgColor);
+
+	$state = {
+		editorPosition: { x: 150, y: 50 },
+		resizeOptions: { width: 10, height: 10 }
+	};
 
-	let editorPosition = { x: 150, y: 50 };
-	let resizeOptions = { width: 10, height: 10 };
-	$: cursor = graph.cursor;
+	$derived cursor = $graph.cursor;
 
 	function handleContextMenu(event: MouseEvent) {
 		event.preventDefault();
-		editorPosition = { x: event.clientX, y: event.clientY };
-		graph.editing.set(editing);
+		$state.editorPosition = { x: event.clientX, y: event.clientY };
+		$graph.editing.set($props.editing);
 	}
 
 	function deleteNode() {
-		graph.nodes.delete(editing.id); //uncommenting this gets rid of the duplication error, however now the nodes are still physically there
-		graph.editing.set(null);
+		$graph.nodes.delete($props.editing.id);
+		$graph.editing.set(null);
 	}
-	//troubleshooting notes -- each time created, new instance of N (n-1.n-2.n-3)  -- n1 red,n2 green, n3 blue --> delete them all, recreate nodes has n1 as Red,Blue n2 as Green,Blue, n3 as Blue,Blue and then when you go a 4th time you finally just get one blue
-	//seems like every new instance of N1,N2,N3 are carrying over data/nodes from its previous occurence, the node ID is not reset
 
 	function resizeNode() {
-		const nodeId = editing.id;
-		const node = graph.nodes.get(nodeId);
+		const nodeId = $props.editing.id;
+		const node = $graph.nodes.get(nodeId);
 
-		// Check if the node exists
 		if (node) {
-			// Get the current width and height values from writable stores
 			const currentWidth = node.dimensions.width;
 			const currentHeight = node.dimensions.height;
 
-			// Open a prompt for users to input width and height, using the current values as placeholders
 			const newWidth = prompt(
 				'Enter new width (for example:250):',
 				currentWidth ? currentWidth.toString() : ''
@@ -52,34 +53,26 @@
 				currentHeight ? currentHeight.toString() : ''
 			);
 
-			// Check if the user clicked Cancel or didn't input values
 			if (newWidth === null || newHeight === null) {
 				return;
 			}
 
-			// Update the node's dimensions using the set method of writable
 			node.dimensions.width.set(parseInt(newWidth, 10) || 0);
 			node.dimensions.height.set(parseInt(newHeight, 10) || 0);
 
-			// Optionally, you can also update the Resizer properties if needed
 			node.resizingWidth.set(true);
 			node.resizingHeight.set(true);
 		}
 	}
 </script>
 
-<Node zIndex={Infinity} position={editorPosition} bgColor="white" id="editor">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-
-	<div on:contextmenu={handleContextMenu} class="editor">
+<Node zIndex={Infinity} position={$state.editorPosition} bgColor="white" id="editor">
+	<div oncontextmenu={handleContextMenu} class="editor">
 		<span style="color:white; font-size:45px">Editor</span>
-		<button on:click={() => graph.editing.set(null)} style="position:absolute; top:10px;right:10px;"
-			>X</button
-		>
-		<!-- <Slider parameterStore={editing.dimensions.width} max={1000} label="" /> -->
+		<button onclick={() => $graph.editing.set(null)} style="position:absolute; top:10px;right:10px;">X</button>
 		<TextField placeholder={'Node Label'} />
-		<button on:click={deleteNode}>Delete Node</button>
-		<button on:click={resizeNode}>Resize Node</button>
+		<button onclick={deleteNode}>Delete Node</button>
+		<button onclick={resizeNode}>Resize Node</button>
 	</div>
 </Node>
 
diff --git a/src/lib/components/FlowChart/FlowChart.svelte b/src/lib/components/FlowChart/FlowChart.svelte
index 06fd65389..e368dab74 100644
--- a/src/lib/components/FlowChart/FlowChart.svelte
+++ b/src/lib/components/FlowChart/FlowChart.svelte
@@ -5,9 +5,11 @@
 	import { onMount, getContext, setContext } from 'svelte';
 	import { flowChartDrawer } from '$lib/utils/drawers/flowchartDrawer';
 	import { flowChartParser } from '$lib/utils/helpers/parser';
-	export let mermaid = '';
-	export let mermaidConfig: Record<string, NodeConfig> = {};
-	const flowChart: FlowChart = flowChartParser(mermaid);
+	$props = {
+		mermaid: '',
+		mermaidConfig: {}
+	};
+	const flowChart: FlowChart = flowChartParser($props.mermaid);
 
 	setContext('flowchart', flowChart);
 
@@ -17,22 +19,24 @@
 	const MIN_X_SPACE = 100;
 	const MIN_Y_SPACE = 100;
 
-	let nodeList: Record<NodeKey, NodeType>;
+	$state = {
+		nodeList: {} as Record<NodeKey, NodeType>
+	};
 
 	onMount(() => {
-		graph.nodes.subscribe((nodes) => (nodeList = Object.fromEntries(nodes)));
+		graph.nodes.subscribe((nodes) => ($state.nodeList = Object.fromEntries(nodes)));
 		let y = 0;
 		for (const row of grid) {
 			let x = 0;
 			let maxHeight = -Infinity;
 			for (const node of row) {
 				if (!node.ignore) {
-					nodeList[`N-${node.id}`].position.update(() => {
+					$state.nodeList[`N-${node.id}`].position.update(() => {
 						return { x, y };
 					});
 
-					nodeList[`N-${node.id}`].dimensions.width.subscribe((width: number) => (x += width));
-					nodeList[`N-${node.id}`].dimensions.height.subscribe(
+					$state.nodeList[`N-${node.id}`].dimensions.width.subscribe((width: number) => (x += width));
+					$state.nodeList[`N-${node.id}`].dimensions.height.subscribe(
 						(height: number) => (maxHeight = Math.max(maxHeight, height))
 					);
 				}
@@ -50,7 +54,7 @@
 				label={node.label}
 				id={node.id}
 				TD={true}
-				{...mermaidConfig[node.id]}
+				{...$props.mermaidConfig[node.id]}
 				connections={node.children.map((id) => [id, '1'])}
 			/>
 		{/if}
diff --git a/src/lib/components/Group/Group.svelte b/src/lib/components/Group/Group.svelte
index f7ac87327..1ad39dad8 100644
--- a/src/lib/components/Group/Group.svelte
+++ b/src/lib/components/Group/Group.svelte
@@ -4,24 +4,26 @@
 	import { writable } from 'svelte/store';
 	import { getRandomColor } from '$lib/utils';
 
-	export let width: number;
-	export let height: number;
-	export let position: XYPair;
-	export let color: CSSColorString = getRandomColor();
-	export let groupName: string | number;
+	$props = {
+		width: 0,
+		height: 0,
+		position: null,
+		color: getRandomColor(),
+		groupName: ''
+	};
 
 	const graph = getContext<Graph>('graph');
-	const groupKey: GroupKey = `${groupName}/${graph.id}`;
+	const groupKey: GroupKey = `${$props.groupName}/${graph.id}`;
 
 	setContext('group', groupKey);
 
-	const writablePosition = writable(position);
+	const writablePosition = writable($props.position);
 
 	const groupBox: GroupBox = {
 		group: writable(groupKey),
-		dimensions: { width: writable(width), height: writable(height) },
+		dimensions: { width: writable($props.width), height: writable($props.height) },
 		position: writablePosition,
-		color: writable(color),
+		color: writable($props.color),
 		moving: writable(false)
 	};
 	graph.groupBoxes.add(groupBox, groupKey);
diff --git a/src/lib/components/Minimap/Minimap.svelte b/src/lib/components/Minimap/Minimap.svelte
index cbae810ae..8af958305 100644
--- a/src/lib/components/Minimap/Minimap.svelte
+++ b/src/lib/components/Minimap/Minimap.svelte
@@ -6,69 +6,67 @@
 	import type { Node } from '$lib/types';
 	import { calculateRelativeCursor } from '$lib/utils';
 
-	let graph: Graph = getContext<Graph>('graph');
-
-	export let width = 100;
-	export let height = width;
-	export let mapColor: CSSColorString | null = null;
-	export let nodeColor: CSSColorString | null = null;
-	export let borderColor: CSSColorString | null = null;
-	export let corner: Corner = 'SE';
-	export let hideable = false;
-
-	const buffer = 0.9;
-	const maxWidth = width * buffer;
-	const maxHeight = height * buffer;
-
-	const graphBounds = graph.bounds.graphBounds;
-	$: bounds = $graphBounds;
-	$: top = bounds.top;
-	$: left = bounds.left;
-	$: right = bounds.right;
-	$: bottom = bounds.bottom;
-
-	const nodes = graph.nodes;
-	const groups = graph.groups;
-	const transforms = graph.transforms;
-	const dimensions = graph.dimensions;
-	const hidden = $groups.hidden.nodes;
-	const scale = transforms.scale;
-	const translation = transforms.translation;
-	const groupBoxes = graph.groupBoxes;
-
-	$: graphWidth = $dimensions.width;
-	$: graphHeight = $dimensions.height;
-
-	$: boundsWidth = right - left;
-	$: boundsHeight = bottom - top;
-	$: boundsRatio = boundsWidth / boundsHeight;
-
-	$: minimapRatio = width / height;
-
-	$: window = calculateRelativeCursor(e, 0, 0, graphWidth, graphHeight, $scale, $translation);
-
-	$: windowWidth = graphWidth / boundsWidth / $scale;
-	$: windowHeight = graphHeight / boundsHeight / $scale;
-
-	$: windowTop = (window.y - top) / boundsHeight;
-	$: windowLeft = (window.x - left) / boundsWidth;
-
-	const e = { clientX: 0, clientY: 0 };
-
-	$: windowStyle = `
+	$state = {
+		graph: getContext<Graph>('graph'),
+		width: 100,
+		height: width,
+		mapColor: null,
+		nodeColor: null,
+		borderColor: null,
+		corner: 'SE',
+		hideable: false,
+		buffer: 0.9,
+		maxWidth: width * buffer,
+		maxHeight: height * buffer,
+		graphBounds: graph.bounds.graphBounds,
+		nodes: graph.nodes,
+		groups: graph.groups,
+		transforms: graph.transforms,
+		dimensions: graph.dimensions,
+		hidden: $groups.hidden.nodes,
+		scale: transforms.scale,
+		translation: transforms.translation,
+		groupBoxes: graph.groupBoxes,
+		e: { clientX: 0, clientY: 0 }
+	};
+
+	$derived bounds = $graphBounds;
+	$derived top = bounds.top;
+	$derived left = bounds.left;
+	$derived right = bounds.right;
+	$derived bottom = bounds.bottom;
+	$derived graphWidth = $dimensions.width;
+	$derived graphHeight = $dimensions.height;
+	$derived boundsWidth = right - left;
+	$derived boundsHeight = bottom - top;
+	$derived boundsRatio = boundsWidth / boundsHeight;
+	$derived minimapRatio = width / height;
+	$derived window = calculateRelativeCursor(e, 0, 0, graphWidth, graphHeight, $scale, $translation);
+	$derived windowWidth = graphWidth / boundsWidth / $scale;
+	$derived windowHeight = graphHeight / boundsHeight / $scale;
+	$derived windowTop = (window.y - top) / boundsHeight;
+	$derived windowLeft = (window.x - left) / boundsWidth;
+	$derived windowStyle = `
 		top: ${windowTopPx + windowTop * scaledBoundsHeight}px;
 		left: ${windowLeftPx + windowLeft * scaledBoundsWidth}px;
 		width: ${windowWidth * scaledBoundsWidth}px;
 		height: ${windowHeight * scaledBoundsHeight}px;`;
-
-	$: landscape = boundsRatio >= minimapRatio;
-	$: boundsScale = landscape ? maxWidth / boundsWidth : maxHeight / boundsHeight;
-
-	$: windowLeftPx = (width - scaledBoundsWidth) / 2;
-	$: windowTopPx = (height - scaledBoundsHeight) / 2;
-
-	$: scaledBoundsWidth = boundsWidth * boundsScale;
-	$: scaledBoundsHeight = boundsHeight * boundsScale;
+	$derived landscape = boundsRatio >= minimapRatio;
+	$derived boundsScale = landscape ? maxWidth / boundsWidth : maxHeight / boundsHeight;
+	$derived windowLeftPx = (width - scaledBoundsWidth) / 2;
+	$derived windowTopPx = (height - scaledBoundsHeight) / 2;
+	$derived scaledBoundsWidth = boundsWidth * boundsScale;
+	$derived scaledBoundsHeight = boundsHeight * boundsScale;
+
+	$props = {
+		width,
+		height,
+		mapColor,
+		nodeColor,
+		borderColor,
+		corner,
+		hideable
+	};
 
 	function toggleHidden(node: Node) {
 		if ($hidden.has(node)) {
@@ -76,7 +74,7 @@
 		} else {
 			$hidden.add(node);
 		}
-		$hidden = $hidden;
+		 $hidden = $hidden;
 	}
 </script>
 
diff --git a/src/lib/components/Node/InternalNode.svelte b/src/lib/components/Node/InternalNode.svelte
index d8e0c519e..df3cdd6bf 100644
--- a/src/lib/components/Node/InternalNode.svelte
+++ b/src/lib/components/Node/InternalNode.svelte
@@ -2,7 +2,6 @@
 	import { initialClickPosition, tracking } from '$lib/stores';
 	import { captureGroup } from '$lib/utils';
 	import { getContext, onDestroy, onMount, setContext } from 'svelte';
-	import { createEventDispatcher } from 'svelte';
 	import { get, writable } from 'svelte/store';
 	import type { Writable } from 'svelte/store';
 	import type { Node, Graph } from '$lib/types';
@@ -16,24 +15,29 @@
 	const duplicate = getContext<Writable<boolean>>('duplicate');
 	const graphDOMElement = getContext<Writable<HTMLElement>>('graphDOMElement');
 
-	const dispatch = createEventDispatcher();
+	const dispatch = (eventName, detail) => {
+		const event = new CustomEvent(eventName, { detail });
+		dispatchEvent(event);
+	};
 
 	// Props
-	export let node: Node;
-	export let isDefault: boolean;
-	export let useDefaults: boolean;
-	export let center: boolean;
-	export let nodeStore: Graph['nodes'];
-	export let locked: Graph['locked'];
-	export let groups: Graph['groups'];
-	export let maxZIndex: Graph['maxZIndex'];
-	export let centerPoint: Graph['center'];
-	export let cursor: Graph['cursor'];
-	export let initialNodePositions: Graph['initialNodePositions'];
-	export let activeGroup: Graph['activeGroup'];
-	export let editing: Graph['editing'];
-	export let dimensionsProvided = false;
-	export let title: string;
+	$props = {
+		node: null,
+		isDefault: false,
+		useDefaults: false,
+		center: false,
+		nodeStore: null,
+		locked: null,
+		groups: null,
+		maxZIndex: null,
+		centerPoint: null,
+		cursor: null,
+		initialNodePositions: null,
+		activeGroup: null,
+		editing: null,
+		dimensionsProvided: false,
+		title: ''
+	};
 
 	// Local stores
 	const anchorsMounted = writable(0);
@@ -61,21 +65,20 @@
 	const resized = writable(false);
 
 	// Reactive variables
-	// let collapsed = false; //not being used
-
-	// Subscriptions
-	$: actualPosition = $position;
-
-	// Reactive declarations
-	$: selected = $selectedNodes.has(node); // Used as class directive
-	$: hidden = $hiddenNodes.has(node); // Used as class directive
-	$: fixedSizing = dimensionsProvided || $resized;
+	$state = {
+		actualPosition: $position,
+		selected: $selectedNodes.has(node),
+		hidden: $hiddenNodes.has(node),
+		fixedSizing: dimensionsProvided || $resized
+	};
 
 	// If the node is selected and the duplicate key pair is pressed
 	// Dispatch the duplicate event
-	$: if (selected && $duplicate) {
-		dispatch('duplicate', node);
-	}
+	$effect(() => {
+		if ($state.selected && $duplicate) {
+			dispatch('duplicate', node);
+		}
+	});
 
 	setContext<Node>('node', node);
 	setContext<Writable<number>>('anchorsMounted', anchorsMounted);
@@ -100,7 +103,7 @@
 	onDestroy(() => {
 		// Remove the node from the selected nodes group
 		// If it is selected
-		if (selected) {
+		if ($state.selected) {
 			$selectedNodes.delete(node);
 			$selectedNodes = $selectedNodes;
 		}
@@ -109,7 +112,7 @@
 	});
 
 	function toggleSelected() {
-		if (selected) {
+		if ($state.selected) {
 			if (node) $selectedNodes.delete(node);
 			$selectedNodes = $selectedNodes;
 		} else {
@@ -190,11 +193,11 @@
 		}
 
 		// If you click on a node that is already selected
-		if (!e.shiftKey && selected) {
+		if (!e.shiftKey && $state.selected) {
 			$activeGroup = 'selected';
 		} else {
 			// If you click on a new node outside of the current group, clear the group
-			if (!e.shiftKey && !selected && !e.shiftKey) {
+			if (!e.shiftKey && !$state.selected && !e.shiftKey) {
 				$selectedNodes.clear();
 				$selectedNodes = $selectedNodes;
 			}
@@ -235,19 +238,19 @@
 	}
 </script>
 
-{#if !hidden}
+{#if !$state.hidden}
 	<div
 		{id}
 		class="svelvet-node"
 		role="button"
-		class:selected
+		class:selected={$state.selected}
 		class:locked={$locked || $nodeLock}
 		style:top="{actualPosition.y}px"
 		style:left="{actualPosition.x}px"
 		style:z-index={$zIndex}
 		{title}
-		style:width={fixedSizing ? $widthStore + 'px' : 'fit-content'}
-		style:height={fixedSizing ? $heightStore + 'px' : 'fit-content'}
+		style:width={$state.fixedSizing ? $widthStore + 'px' : 'fit-content'}
+		style:height={$state.fixedSizing ? $heightStore + 'px' : 'fit-content'}
 		style:transform="rotate({$rotation}deg)"
 		style:--prop-background-color={$bgColor || (isDefault || useDefaults ? null : 'transparent')}
 		style:--prop-text-color={$textColor}
@@ -259,12 +262,13 @@
 			? null
 			: '0px'}
 		style:--prop-border-width={$borderWidth || (isDefault || useDefaults ? null : '0px')}
-		on:contextmenu|preventDefault|stopPropagation
-		on:mouseup={onMouseUp}
-		use:grabHandle
+		oncontextmenu|preventDefault|stopPropagation
+		onmouseup={onMouseUp}
+		onmousedown={handleNodeClicked}
+		ontouchstart={handleNodeClicked}
 		tabindex={0}
 	>
-		{#if !fixedSizing}
+		{#if !$state.fixedSizing}
 			<div
 				style:width="fit-content"
 				style:height="fit-content"
diff --git a/src/lib/components/Node/Node.svelte b/src/lib/components/Node/Node.svelte
index d3db5a9e3..69c5ac45f 100644
--- a/src/lib/components/Node/Node.svelte
+++ b/src/lib/components/Node/Node.svelte
@@ -14,167 +14,125 @@
 	const graph = getContext<Graph>('graph');
 	const group: GroupKey = getContext('group');
 
-	//const storedNode = JSON.parse(localStorage.getItem('state'))?.nodes?[id]
-	/**
-	 * @default { x: 0, y: 0 }
-	 * @description The position of the Node. These correspond to pixel values
-	 * at default graph scale. This prop newly features two way data binding. Please report any issues
-	 * on GitHub.
-	 */
-	export let position = { x: 0, y: 0 };
-	export let drop: 'cursor' | 'center' | false = false;
-	/**
-	 * @type { width: number, height: number}
-	 * @description Used to set the initial dimensions of the Node. Primarily used for default Nodes,
-	 * but can be used with custom Nodes as well. This value does not currently feature two way binding
-	 */
-	export let dimensions: InitialDimensions | null = null;
-	/**
-	 * @default current node count
-	 * @type string | number
-	 * @description The id of the Node. This value does not currently feature two way binding
-	 */
-	export let id: string | number = 0;
-	export let bgColor: CSSColorString | null = null;
-	export let borderRadius: number | null = null;
-	export let borderColor: CSSColorString | null = null;
-	export let borderWidth: number | null = null;
-	export let selectionColor: CSSColorString | null = null;
-	export let textColor: CSSColorString | null = null;
-	export let resizable = false;
-	export let label = '';
-	/**
-	 * @default 1
-	 * @type number
-	 * @description The number of input anchors on a default Nodes. This value features two way binding,
-	 */
-	export let inputs = 1;
-	/**
-	 * @default 1
-	 * @type number
-	 * @description The number of output anchors on a default Node. This value features two way binding,
-	 */
-	export let outputs = 1;
-	export let width: number | null = null;
-	export let height: number | null = null;
-	export let TD = false;
-	export let LR = false;
-	export let zIndex = 1;
-	export let editable = true;
-	export let locked = false;
-	export let rotation = 0;
-	export let edge: ComponentType | null = null;
-	/**
-	 * @default []
-	 * @type Array<string | number | [string | number, string | number]>
-	 * @description This prop is used to set the initial connections of a Node. It is an array of "connections",
-	 * connections are either Node IDs, which can be strings or numbers, or a tuple of a Node ID and an Anchor ID. This does
-	 * not feature two way data binding. Please use the let:connect and let:disconnect methods
-	 * on the Node component to imperatively add and remove connections.
-	 */
-	export let connections: Connections = [];
-	/**
-	 * @default false
-	 * @type boolean
-	 * @description When true, the a custom Node will use the default styling provided by Svelvet.
-	 */
-	export let useDefaults = false;
-	/**
-	 * @default false
-	 * @type boolean
-	 * @description When true, the Node is placed in the center of the viewport on mount.
-	 */
-	export let center = false;
-	/**
-	 * @default false
-	 * @type boolean
-	 * @description This prop can be set to true to make the Anchors dynamically realign themselves
-	 * based on the relative position of the source and target nodes.
-	 */
-	export let dynamic = false;
-	export let title = '';
+	$props = {
+		position: { x: 0, y: 0 },
+		drop: 'cursor',
+		dimensions: null,
+		id: 0,
+		bgColor: null,
+		borderRadius: null,
+		borderColor: null,
+		borderWidth: null,
+		selectionColor: null,
+		textColor: null,
+		resizable: false,
+		label: '',
+		inputs: 1,
+		outputs: 1,
+		width: null,
+		height: null,
+		TD: false,
+		LR: false,
+		zIndex: 1,
+		editable: true,
+		locked: false,
+		rotation: 0,
+		edge: null,
+		connections: [],
+		useDefaults: false,
+		center: false,
+		dynamic: false,
+		title: ''
+	};
 
 	//External stores
 	const nodes = graph.nodes;
 
-	setContext('dynamic', dynamic);
+	setContext('dynamic', $props.dynamic);
 
-	let node: NodeType;
-	let isDefault = true;
+	$state = {
+		node: null,
+		isDefault: true,
+		priorPosition: $props.position
+	};
 
 	onMount(() => {
-		const direction = TD ? 'TD' : LR ? 'LR' : graph.direction;
+		const direction = $props.TD ? 'TD' : $props.LR ? 'LR' : graph.direction;
 
 		const groupBox = graph.groupBoxes.get(group);
 
 		const nodeCount = graph.nodes.count() + 1;
 
-		isDefault = !$$slots.default;
+		$state.isDefault = !$$slots.default;
 		if ($$slots.anchorWest || $$slots.anchorEast || $$slots.anchorNorth || $$slots.anchorSouth)
-			isDefault = false;
+			$state.isDefault = false;
 
-		const initialDimensions: InitialDimensions = dimensions
-			? dimensions
-			: width || height
-			? { width: width || height || 200, height: height || width || 100 }
-			: isDefault
+		const initialDimensions: InitialDimensions = $props.dimensions
+			? $props.dimensions
+			: $props.width || $props.height
+			? { width: $props.width || $props.height || 200, height: $props.height || $props.width || 100 }
+			: $state.isDefault
 			? { width: 200, height: 100 }
 			: { width: 0, height: 0 };
 
 		const config: NodeConfig = {
-			id: id || nodeCount,
+			id: $props.id || nodeCount,
 			position:
-				drop === 'cursor'
+				$props.drop === 'cursor'
 					? { x: get(graph.cursor).x, y: get(graph.cursor).y }
 					: groupBox
-					? { x: get(groupBox.position).x + position.x, y: get(groupBox.position).y + position.y }
-					: position,
+					? { x: get(groupBox.position).x + $props.position.x, y: get(groupBox.position).y + $props.position.y }
+					: $props.position,
 			dimensions: initialDimensions,
-			editable: editable || graph.editable,
-			label,
+			editable: $props.editable || graph.editable,
+			label: $props.label,
 			group,
-			resizable,
-			inputs,
-			outputs,
-			zIndex,
+			resizable: $props.resizable,
+			inputs: $props.inputs,
+			outputs: $props.outputs,
+			zIndex: $props.zIndex,
 			direction,
-			locked,
-			rotation
+			locked: $props.locked,
+			rotation: $props.rotation
 		};
-		if (connections.length) config.connections = connections;
-		if (borderWidth) config.borderWidth = borderWidth;
-		if (borderRadius) config.borderRadius = borderRadius;
-		if (borderColor) config.borderColor = borderColor;
-		if (selectionColor) config.selectionColor = selectionColor;
-		if (textColor) config.textColor = textColor;
-		if (bgColor) config.bgColor = bgColor;
-		if (edge) config.edge = edge;
-		node = createNode(config);
+		if ($props.connections.length) config.connections = $props.connections;
+		if ($props.borderWidth) config.borderWidth = $props.borderWidth;
+		if ($props.borderRadius) config.borderRadius = $props.borderRadius;
+		if ($props.borderColor) config.borderColor = $props.borderColor;
+		if ($props.selectionColor) config.selectionColor = $props.selectionColor;
+		if ($props.textColor) config.textColor = $props.textColor;
+		if ($props.bgColor) config.bgColor = $props.bgColor;
+		if ($props.edge) config.edge = $props.edge;
+		$state.node = createNode(config);
 
 		if (groupBox) {
 			graph.groups.update((groups) => {
 				const nodes = get(groups[group].nodes);
-				groups[group].nodes.set(new Set([...nodes, node]));
+				groups[group].nodes.set(new Set([...nodes, $state.node]));
 				return groups;
 			});
 		}
 
-		graph.nodes.add(node, node.id);
+		graph.nodes.add($state.node, $state.node.id);
 	});
 
-	$: node && node.connections.set(connections);
+	$effect(() => {
+		if ($state.node) {
+			$state.node.connections.set($props.connections);
+		}
+	});
 
 	onDestroy(() => {
-		graph.nodes.delete(node.id);
+		graph.nodes.delete($state.node.id);
 	});
 
 	function connect(connections: number | string | [number | string, number | string]) {
-		if (!node) return;
-		node.connections.set([connections]);
+		if (!$state.node) return;
+		$state.node.connections.set([connections]);
 	}
 
 	function disconnect(connections: number | string | Connections) {
-		if (!node) return;
+		if (!$state.node) return;
 		const adjustedConnections = Array.isArray(connections) ? connections : [connections];
 
 		adjustedConnections.forEach((connection) => {
@@ -187,7 +145,7 @@
 			if (anchorKey) {
 				specificAnchor = otherNode.anchors.get(anchorKey);
 			}
-			const matchingEdgeKeys = graph.edges.match(node, otherNode, specificAnchor);
+			const matchingEdgeKeys = graph.edges.match($state.node, otherNode, specificAnchor);
 			if (matchingEdgeKeys.length)
 				graph.edges.delete(matchingEdgeKeys[matchingEdgeKeys.length - 1]);
 		});
@@ -196,84 +154,108 @@
 	setContext('connect', connect);
 	setContext('disconnect', disconnect);
 
-	// All these functions below essentially enable data binding to the props
-	// We should not recommend developers utilize this, but it is a nice feature
-	$: if (node) {
-		node.bgColor.set(bgColor);
-	}
-	$: if (node) {
-		node.label.set(label);
-	}
-	$: if (node) {
-		node.textColor.set(textColor);
-	}
-	$: if (node) {
-		node.borderColor.set(borderColor);
-	}
-	$: if (node) {
-		node.selectionColor.set(selectionColor);
-	}
-	$: if (node) {
-		node.resizable.set(resizable);
-	}
-	$: if (node) {
-		node.editable.set(editable);
-	}
-	$: if (node) {
-		node.locked.set(locked);
-	}
-	$: if (node) {
-		node.inputs.set(inputs);
-	}
-	$: if (node) {
-		node.outputs.set(outputs);
-	}
-	$: if (node) {
-		node.zIndex.set(zIndex);
-	}
-
-	$: nodePosition = node && node?.position;
+	$effect(() => {
+		if ($state.node) {
+			$state.node.bgColor.set($props.bgColor);
+		}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.label.set($props.label);
+		}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.textColor.set($props.textColor);
+		}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.borderColor.set($props.borderColor);
+		}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.selectionColor.set($props.selectionColor);
+		}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.resizable.set($props.resizable);
+		}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.editable.set($props.editable);
+		}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.locked.set($props.locked);
+		}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.inputs.set($props.inputs);
+		}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.outputs.set($props.outputs);
+		}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.zIndex.set($props.zIndex);
+		}
+	});
 
-	let priorPosition = position;
+	$derived nodePosition = $state.node && $state.node?.position;
 
-	$: if (node) {
-		const { x: priorX, y: priorY } = priorPosition;
-		const { x: nodeX, y: nodeY } = $nodePosition;
-		const { x: propX, y: propY } = position;
+	$effect(() => {
+		if ($state.node) {
+			const { x: priorX, y: priorY } = $state.priorPosition;
+			const { x: nodeX, y: nodeY } = $nodePosition;
+			const { x: propX, y: propY } = $props.position;
 
-		const areDifferent = propX !== nodeX || propY !== nodeY;
+			const areDifferent = propX !== nodeX || propY !== nodeY;
 
-		const propChanged = propX !== priorX || propY !== priorY;
+			const propChanged = propX !== priorX || propY !== priorY;
 
-		if (areDifferent) {
-			if (propChanged) {
-				priorPosition = position;
-				node.position.set(position);
-			} else {
-				priorPosition = $nodePosition;
-				position = $nodePosition;
+			if (areDifferent) {
+				if (propChanged) {
+					$state.priorPosition = $props.position;
+					$state.node.position.set($props.position);
+				} else {
+					$state.priorPosition = $nodePosition;
+					$props.position = $nodePosition;
+				}
 			}
 		}
-	}
-	$: if (node) {
-		node.inputs.set(inputs);
-	}
-	$: if (node) {
-		node.outputs.set(outputs);
-	}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.inputs.set($props.inputs);
+		}
+	});
+	$effect(() => {
+		if ($state.node) {
+			$state.node.outputs.set($props.outputs);
+		}
+	});
 </script>
 
-{#if node && $nodes.get(node.id)}
+{#if $state.node && $nodes.get($state.node.id)}
 	<InternalNode
-		{node}
-		center={center || drop === 'center'}
-		{isDefault}
-		{useDefaults}
-		dimensionsProvided={!!dimensions || !!width || !!height || isDefault || false}
+		node={$state.node}
+		center={$props.center || $props.drop === 'center'}
+		isDefault={$state.isDefault}
+		useDefaults={$props.useDefaults}
+		dimensionsProvided={!!$props.dimensions || !!$props.width || !!$props.height || $state.isDefault || false}
 		nodeStore={graph.nodes}
 		locked={graph.locked}
 		groups={graph.groups}
-		{title}
+		title={$props.title}
 		maxZIndex={graph.maxZIndex}
 		centerPoint={graph.center}
 		cursor={graph.cursor}
@@ -288,8 +270,8 @@
 		let:selected
 		let:grabHandle
 	>
-		<slot {selected} {grabHandle} {disconnect} {connect} {node} {destroy}>
-			{#if isDefault}
+		<slot {selected} {grabHandle} {disconnect} {connect} node={$state.node} {destroy}>
+			{#if $state.isDefault}
 				<DefaultNode {selected} on:connection on:disconnection />
 			{/if}
 		</slot>
diff --git a/src/lib/components/Resizer/Resizer.svelte b/src/lib/components/Resizer/Resizer.svelte
index 9b63f6111..e7a4e243f 100644
--- a/src/lib/components/Resizer/Resizer.svelte
+++ b/src/lib/components/Resizer/Resizer.svelte
@@ -12,23 +12,28 @@
 	const node = getContext<Node>('node');
 	const resized = getContext<Writable<boolean>>('resized');
 
-	export let width = false;
-	export let height = false;
-	export let rotation = false;
-	export let minHeight = 0;
-	export let minWidth = 0;
-
-	let DOMnode: HTMLElement;
-
-	let left = width;
-	let right = width;
-	let top = height;
-	let bottom = height;
+	$props = {
+		width: false,
+		height: false,
+		rotation: false,
+		minHeight: 0,
+		minWidth: 0
+	};
 
-	let both = width && height;
-	let startingRotation = 0;
-	let initialClickAngle = 0;
-	let initialNodePosition = get(node.position);
+	$state = {
+		DOMnode: null,
+		left: $props.width,
+		right: $props.width,
+		top: $props.height,
+		bottom: $props.height,
+		both: $props.width && $props.height,
+		startingRotation: 0,
+		initialClickAngle: 0,
+		initialNodePosition: get(node.position),
+		initialWidth: 0,
+		initialHeight: 0,
+		direction: 1
+	};
 
 	const position = node.position;
 
@@ -43,88 +48,89 @@
 
 	const cursor = graph.cursor;
 
-	let initialWidth: number;
-	let initialHeight: number;
+	$derived x = $position.x;
+	$derived y = $position.y;
 
-	let direction = 1;
-
-	$: x = $position.x;
-	$: y = $position.y;
-
-	$: centerPoint = {
+	$derived centerPoint = {
 		x: x + $widthStore / 2,
 		y: y + $heightStore / 2
 	};
 
-	$: if ($resizingHeight) {
-		const initialClick = get(initialClickPosition);
-		const cursorPosition = $cursor;
-		const newHeight = Math.max(
-			minHeight,
-			initialHeight + (cursorPosition.y - initialClick.y) * direction
-		);
-		if (newHeight > minHeight) {
-			resized.set(true);
-			$heightStore = newHeight;
-		} else {
-			resized.set(false);
-		}
+	$effect(() => {
+		if ($resizingHeight) {
+			const initialClick = get(initialClickPosition);
+			const cursorPosition = $cursor;
+			const newHeight = Math.max(
+				$props.minHeight,
+				$state.initialHeight + (cursorPosition.y - initialClick.y) * $state.direction
+			);
+			if (newHeight > $props.minHeight) {
+				resized.set(true);
+				$heightStore = newHeight;
+			} else {
+				resized.set(false);
+			}
 
-		if (direction === -1) {
-			$position = {
-				x: initialNodePosition.x,
-				y: initialNodePosition.y + cursorPosition.y - initialClick.y
-			};
-		}
-		if ($nodeRotation !== 0) {
-			node.position.update((pos) => {
-				return {
-					y: initialNodePosition.y - (newHeight - initialHeight) / 2,
-					x: pos.x
+			if ($state.direction === -1) {
+				$position = {
+					x: $state.initialNodePosition.x,
+					y: $state.initialNodePosition.y + cursorPosition.y - initialClick.y
 				};
-			});
+			}
+			if ($nodeRotation !== 0) {
+				node.position.update((pos) => {
+					return {
+						y: $state.initialNodePosition.y - (newHeight - $state.initialHeight) / 2,
+						x: pos.x
+					};
+				});
+			}
 		}
-	}
+	});
 
-	$: if ($resizingWidth) {
-		const initialClick = get(initialClickPosition);
-		const cursorPosition = $cursor;
-		const newWidth = Math.max(
-			minWidth,
-			initialWidth + (cursorPosition.x - initialClick.x) * direction
-		);
-		if (newWidth > minWidth) {
-			resized.set(true);
-			$widthStore = newWidth;
-		} else {
-			resized.set(false);
-		}
+	$effect(() => {
+		if ($resizingWidth) {
+			const initialClick = get(initialClickPosition);
+			const cursorPosition = $cursor;
+			const newWidth = Math.max(
+				$props.minWidth,
+				$state.initialWidth + (cursorPosition.x - initialClick.x) * $state.direction
+			);
+			if (newWidth > $props.minWidth) {
+				resized.set(true);
+				$widthStore = newWidth;
+			} else {
+				resized.set(false);
+			}
 
-		if (direction === -1) {
-			$position = {
-				x: initialNodePosition.x + cursorPosition.x - initialClick.x,
-				y: initialNodePosition.y
-			};
-		}
-		if ($nodeRotation !== 0) {
-			node.position.update((pos) => {
-				return {
-					x: initialNodePosition.x - (newWidth - initialWidth) / 2,
-					y: pos.y
+			if ($state.direction === -1) {
+				$position = {
+					x: $state.initialNodePosition.x + cursorPosition.x - initialClick.x,
+					y: $state.initialNodePosition.y
 				};
-			});
+			}
+			if ($nodeRotation !== 0) {
+				node.position.update((pos) => {
+					return {
+						x: $state.initialNodePosition.x - (newWidth - $state.initialWidth) / 2,
+						y: pos.y
+					};
+				});
+			}
 		}
-	}
+	});
 
-	$: if ($rotating) {
-		$cursor;
-		$nodeRotation = calculateRotation();
-	}
+	$effect(() => {
+		if ($rotating) {
+			$cursor;
+			$nodeRotation = calculateRotation();
+		}
+	});
 
 	onMount(() => {
 		try {
-			DOMnode = document.querySelector(`#${node.id}`) as HTMLElement;
-			if (DOMnode) [minWidth, minHeight] = calculateFitContentWidth(DOMnode);
+			$state.DOMnode = document.querySelector(`#${node.id}`) as HTMLElement;
+			if ($state.DOMnode) [$props.minWidth, $props.minHeight] = calculateFitContentWidth($state.DOMnode);
 		} catch (e) {
 			// eslint-disable-next-line no-console
 			console.error(e);
@@ -139,22 +145,22 @@
 			e.stopPropagation();
 			e.preventDefault();
 			if (dimensions.left || dimensions.top) {
-				direction = -1;
+				$state.direction = -1;
 			} else {
-				direction = 1;
+				$state.direction = 1;
 			}
 
 			resizing.set(true);
 			$initialClickPosition = get(cursor);
-			initialWidth = $widthStore;
-			initialHeight = $heightStore;
-			initialNodePosition = $position;
+			$state.initialWidth = $widthStore;
+			$state.initialHeight = $heightStore;
+			$state.initialNodePosition = $position;
 
 			dimensions.both ? ($resizingWidth = true) : ($resizingWidth = false);
 			$resizingWidth = dimensions.left || dimensions.right || dimensions.both || false;
 			$resizingHeight = dimensions.top || dimensions.bottom || dimensions.both || false;
 
-			if (DOMnode) [minWidth, minHeight] = calculateFitContentWidth(DOMnode);
+			if ($state.DOMnode) [$props.minWidth, $props.minHeight] = calculateFitContentWidth($state.DOMnode);
 			window.addEventListener('mouseup', removeResize);
 		};
 
@@ -181,15 +187,15 @@
 			e.preventDefault();
 
 			//Capture current node rotation
-			startingRotation = $nodeRotation;
+			$state.startingRotation = $nodeRotation;
 
 			//Capture current click position
 			$initialClickPosition = get(cursor);
 
 			// Calculate the initial angle
-			const initialDeltaX = $initialClickPosition.x - centerPoint.x;
-			const initialDeltaY = $initialClickPosition.y - centerPoint.y;
-			initialClickAngle = Math.atan2(initialDeltaY, initialDeltaX);
+			const initialDeltaX = $initialClickPosition.x - $centerPoint.x;
+			const initialDeltaY = $initialClickPosition.y - $centerPoint.y;
+			$state.initialClickAngle = Math.atan2(initialDeltaY, initialDeltaX);
 
 			$rotating = true;
 			window.addEventListener('mouseup', removeRotation);
@@ -211,14 +217,14 @@
 
 	function calculateRotation() {
 		const cursorPosition = get(cursor);
-		const currentDeltaX = cursorPosition.x - centerPoint.x;
-		const currentDeltaY = cursorPosition.y - centerPoint.y;
+		const currentDeltaX = cursorPosition.x - $centerPoint.x;
+		const currentDeltaY = cursorPosition.y - $centerPoint.y;
 
 		const currentAngle = Math.atan2(currentDeltaY, currentDeltaX);
 
-		const angleDifference = initialClickAngle - currentAngle;
+		const angleDifference = $state.initialClickAngle - currentAngle;
 
-		const newAngle = startingRotation - radiansToDegrees(angleDifference);
+		const newAngle = $state.startingRotation - radiansToDegrees(angleDifference);
 		return newAngle;
 	}
 
@@ -227,25 +233,25 @@
 	}
 
 	beforeUpdate(() => {
-		if (DOMnode) [minWidth, minHeight] = calculateFitContentWidth(DOMnode);
-		if ($widthStore < minWidth) resized.set(false);
-		if ($heightStore < minHeight) resized.set(false);
+		if ($state.DOMnode) [$props.minWidth, $props.minHeight] = calculateFitContentWidth($state.DOMnode);
+		if ($widthStore < $props.minWidth) resized.set(false);
+		if ($heightStore < $props.minHeight) resized.set(false);
 	});
 </script>
 
-{#if width}
-	<div use:resizeHandler={{ left }} class:width class="left" />
-	<div use:resizeHandler={{ right }} class:width class="right" />
+{#if $props.width}
+	<div use:resizeHandler={{ left: $state.left }} class:width class="left" />
+	<div use:resizeHandler={{ right: $state.right }} class:width class="right" />
 {/if}
 
-{#if height}
-	<div use:resizeHandler={{ top }} class:height class="top" />
-	<div use:resizeHandler={{ bottom }} class:height class="bottom" />
+{#if $props.height}
+	<div use:resizeHandler={{ top: $state.top }} class:height class="top" />
+	<div use:resizeHandler={{ bottom: $state.bottom }} class:height class="bottom" />
 {/if}
-{#if both}
-	<div use:resizeHandler={{ both }} class:both />
+{#if $state.both}
+	<div use:resizeHandler={{ both: $state.both }} class:both />
 {/if}
-{#if rotation}
+{#if $props.rotation}
 	<div use:rotateHandler class:rotation />
 {/if}
 
diff --git a/src/lib/components/ThemeToggle/ThemeToggle.svelte b/src/lib/components/ThemeToggle/ThemeToggle.svelte
index acde69981..0524c6330 100644
--- a/src/lib/components/ThemeToggle/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle/ThemeToggle.svelte
@@ -5,43 +5,31 @@
 	import { graphStore } from '$lib/stores';
 	import { get } from 'svelte/store';
 
-	export let main = 'light';
-	export let alt = 'dark';
-	// export let highContrast = 'highContrast';
-	/**
-	 * @deprecated
-	 * @default 'light_mode'
-	 * @description (Do not use. Will be deprecated in the next major release.) This prop accepts a string that corresponds to the the name of an icon from the Material Icons library.
-	 * @link https://fonts.google.com/icons
-	 */
-	export let mainIcon = 'light_mode';
-	/**
-	 * @deprecated
-	 * @default 'dark_mode'
-	 * @description (Do not use. Will be deprecated in the next major release.) This prop accepts a string that corresponds to the the name of an icon from the Material Icons library.
-	 *  @link https://fonts.google.com/icons
-	 */
-	export let altIcon = 'dark_mode';
-	export let corner = 'NE';
-	export let bgColor: CSSColorString | null = null;
-	export let iconColor: CSSColorString | null = null;
-
-	let current = main;
+	$props = {
+		main: 'light',
+		alt: 'dark',
+		mainIcon: 'light_mode',
+		altIcon: 'dark_mode',
+		corner: 'NE',
+		bgColor: null,
+		iconColor: null
+	};
+
+	$state = {
+		current: $props.main
+	};
 
 	function toggleTheme() {
 		const currentTheme = document.documentElement.getAttribute('svelvet-theme');
 		let newTheme;
-		if (!currentTheme || currentTheme === main) {
-			newTheme = alt;
-		}
-		// else if (currentTheme === alt) {
-		// 	newTheme = highContrast;
-		// }
-		else {
-			newTheme = main;
+		if (!currentTheme || currentTheme === $props.main) {
+			newTheme = $props.alt;
+			$state.current = $props.alt;
+		} else {
+			newTheme = $props.main;
+			$state.current = $props.main;
 		}
-		current = newTheme;
-		document.documentElement.setAttribute('svelvet-theme', currentTheme === main ? alt : main);
+		document.documentElement.setAttribute('svelvet-theme', newTheme);
 
 		// Save the current theme to Local Storage
 		localStorage.setItem('currentTheme', newTheme);
@@ -51,11 +39,11 @@
 		const savedTheme = localStorage.getItem('currentTheme');
 		if (savedTheme) {
 			document.documentElement.setAttribute('svelvet-theme', savedTheme);
-			current = savedTheme;
+			$state.current = savedTheme;
 		} else {
 			// If no theme is saved in Local Storage, set the default theme (main) as the initial theme
-			document.documentElement.setAttribute('svelvet-theme', main);
-			current = main;
+			document.documentElement.setAttribute('svelvet-theme', $props.main);
+			$state.current = $props.main;
 		}
 	});
 
@@ -79,20 +67,20 @@
 
 <div
 	class="controls-wrapper"
-	style:--prop-theme-toggle-color={bgColor}
-	style:--prop-theme-toggle-text-color={iconColor}
-	class:SW={corner === 'SW'}
-	class:NE={corner === 'NE'}
-	class:SE={corner === 'SE'}
-	class:NW={corner === 'NW'}
+	style:--prop-theme-toggle-color={$props.bgColor}
+	style:--prop-theme-toggle-text-color={$props.iconColor}
+	class:SW={$props.corner === 'SW'}
+	class:NE={$props.corner === 'NE'}
+	class:SE={$props.corner === 'SE'}
+	class:NW={$props.corner === 'NW'}
 >
-	<button on:mousedown|stopPropagation={toggleTheme} on:touchstart|stopPropagation={toggleTheme}>
-		<span class="material-symbols-outlined">{current === main ? altIcon : mainIcon}</span>
+	<button onclick={toggleTheme} ontouchstart={toggleTheme}>
+		<span class="material-symbols-outlined">{$state.current === $props.main ? $props.altIcon : $props.mainIcon}</span>
 	</button>
 
 	<button
 		class="save-button NW"
-		on:click={() => {
+		onclick={() => {
 			getJSONState(graph);
 		}}>Save</button
 	>
diff --git a/src/lib/components/data/ColorPicker/ColorWheel.svelte b/src/lib/components/data/ColorPicker/ColorWheel.svelte
index 2dc549024..5ac87c467 100644
--- a/src/lib/components/data/ColorPicker/ColorWheel.svelte
+++ b/src/lib/components/data/ColorPicker/ColorWheel.svelte
@@ -17,20 +17,22 @@
 
 	const rotation = node.rotation;
 	const cursor = graph.cursor;
-	$: cursorX = $cursor.x;
-	$: cursorY = $cursor.y;
+	$derived cursorX = $cursor.x;
+	$derived cursorY = $cursor.y;
 
-	export let size = 200;
-	export let parameterStore: CustomWritable<CSSColorString>;
-
-	let { pickerX, pickerY } = colorToPickerXY($parameterStore, size);
-
-	let picker: HTMLDivElement;
-	let picking = false;
-	let wheel = true;
+	$props = {
+		size: 200,
+		parameterStore: null
+	};
 
-	let wheelTop = 0;
-	let wheelLeft = 0;
+	$state = {
+		pickerX: colorToPickerXY($props.parameterStore, $props.size).pickerX,
+		pickerY: colorToPickerXY($props.parameterStore, $props.size).pickerY,
+		picking: false,
+		wheel: true,
+		wheelTop: 0,
+		wheelLeft: 0
+	};
 
 	const updatePosition = () => {
 		if (!picker) return;
@@ -51,47 +53,50 @@
 			translation
 		);
 
-		wheelTop = scaled.y;
-		wheelLeft = scaled.x;
+		$state.wheelTop = scaled.y;
+		$state.wheelLeft = scaled.x;
 	};
 
-	$: if (picking) {
-		const offsetX = cursorX - wheelLeft;
-		const offsetY = cursorY - wheelTop;
-		const radius = size / 2;
-		const dx = offsetX - radius;
-		const dy = offsetY - radius;
-
-		const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
-		const normalizedDistance = Math.min(distanceFromCenter, radius);
-		const angle = Math.atan2(dy, dx);
-
-		const nodeRotationInRadians = $rotation * (Math.PI / 180);
-		const rotatedAngle = angle - nodeRotationInRadians;
-
-		const rotatedHue = (((rotatedAngle + Math.PI) / (2 * Math.PI)) * 360) % 360;
-		const adjustedHue =
-			rotatedHue >= 0 ? (rotatedHue > 360 ? 360 - rotatedHue : rotatedHue) : 360 + rotatedHue;
-		const saturation = roundNum((normalizedDistance / radius) * 100);
-		const pickedColor: CSSColorString = `hsl(${roundNum(adjustedHue)}, ${saturation}%, ${
-			50 + (100 - saturation) / 2
-		}%)`;
-		const picker = colorToPickerXY(pickedColor, size);
-		pickerX = picker.pickerX;
-		pickerY = picker.pickerY;
-		$parameterStore = pickedColor;
-	}
+	$effect(() => {
+		if ($state.picking) {
+			const offsetX = $cursorX - $state.wheelLeft;
+			const offsetY = $cursorY - $state.wheelTop;
+			const radius = $props.size / 2;
+			const dx = offsetX - radius;
+			const dy = offsetY - radius;
+
+			const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
+			const normalizedDistance = Math.min(distanceFromCenter, radius);
+			const angle = Math.atan2(dy, dx);
+
+			const nodeRotationInRadians = $rotation * (Math.PI / 180);
+			const rotatedAngle = angle - nodeRotationInRadians;
+
+			const rotatedHue = (((rotatedAngle + Math.PI) / (2 * Math.PI)) * 360) % 360;
+			const adjustedHue =
+				rotatedHue >= 0 ? (rotatedHue > 360 ? 360 - rotatedHue : rotatedHue) : 360 + rotatedHue;
+			const saturation = roundNum((normalizedDistance / radius) * 100);
+			const pickedColor: CSSColorString = `hsl(${roundNum(adjustedHue)}, ${saturation}%, ${
+				50 + (100 - saturation) / 2
+			}%)`;
+			const picker = colorToPickerXY(pickedColor, $props.size);
+			$state.pickerX = picker.pickerX;
+			$state.pickerY = picker.pickerY;
+			$props.parameterStore = pickedColor;
+		}
+	});
+
 	function downUp(node: HTMLDivElement) {
 		function onMouseDown(e: MouseEvent) {
 			e.stopPropagation();
 			e.preventDefault();
 			updatePosition();
-			picking = true;
+			$state.picking = true;
 			window.addEventListener('mouseup', onMouseUp);
 		}
 
 		function onMouseUp() {
-			picking = false;
+			$state.picking = false;
 			window.removeEventListener('mouseup', onMouseUp);
 		}
 
@@ -103,6 +108,7 @@
 			}
 		};
 	}
+
 	function colorToPickerXY(
 		color: CSSColorString,
 		size: number
@@ -181,14 +187,14 @@
 
 <div class="wrapper">
 	<div
-		class:picking
-		class:wheel
+		class:picking={$state.picking}
+		class:wheel={$state.wheel}
 		bind:this={picker}
 		use:downUp
-		style:width={size ? `${size}px` : '100%'}
+		style:width={$props.size ? `${$props.size}px` : '100%'}
 		style:aspect-ratio={1 / 1}
 	>
-		<div class="cursor" style:top="{pickerY}px" style:left="{pickerX}px" />
+		<div class="cursor" style:top="{$state.pickerY}px" style:left="{$state.pickerX}px" />
 	</div>
 </div>
 
@@ -213,12 +219,4 @@
 		cursor: crosshair;
 		position: relative;
 	}
-
-	/* .line {
-		position: relative;
-		width: 200px;
-		height: 30px;
-		border-radius: 6px;
-		background: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
-	} */
 </style>
diff --git a/src/lib/components/data/Knob/Knob.svelte b/src/lib/components/data/Knob/Knob.svelte
index 77699ba04..2bc810901 100644
--- a/src/lib/components/data/Knob/Knob.svelte
+++ b/src/lib/components/data/Knob/Knob.svelte
@@ -11,75 +11,29 @@
 	 * @default 60
 	 * @description Minimum angle allowed when interacting with the knob rotation.
 	 */
-	export let minDegree = 60;
-	/**
-	 * @default 300
-	 * @description Maximum angle allowed when interacting with the knob rotation.
-	 */
-	export let maxDegree = 300;
-	/**
-	 * @default 'No default value'
-	 * @description This is the store that contains the output value of the knob.
-	 * The initial value should be passed as a property when creating the component.
-	 */
-	export let parameterStore: CustomWritable<number>;
-	/**
-	 * @default 0
-	 * @description Minimum allowable output value of parameterStore.
-	 */
-	export let min = 0;
-	/**
-	 * @default 100
-	 * @description Maximum allowable output value of parameterStore.
-	 */
-	export let max = 100;
-	/**
-	 * @default 0
-	 * @description Recommendation to set step to a value that is a factor of the set the range (max - min).
-	 */
-	export let step = 1;
-	/**
-	 * @default 'Value'
-	 * @description Label for the knob compoent.
-	 */
-	export let label = 'Value';
-	/**
-	 * @default 0
-	 * @description Precision in decimal places for the output value.
-	 */
-	export let fixed = 0;
-	/**
-	 * @default null
-	 * @description Text color.
-	 */
-	export let fontColor: CSSColorString | null = null;
-	/**
-	 * @default 'lightblue'
-	 * @description Knob background color.
-	 */
-	export let knobColor: CSSColorString | null = 'lightblue';
-	/**
-	 * @default 'white'
-	 * @description Color for the output value displayed at the center of the knob.
-	 */
-	export let knobValueColor: CSSColorString | null = 'white';
-	/**
-	 * @default '#666565'
-	 * @description Color for indicator symbol displaying the current rotational position of the knob.
-	 */
-	export let indicatorColor: CSSColorString | null = '#666565';
-
-	$parameterStore =
-		$parameterStore < min
-			? min
-			: $parameterStore > max
-			? max
-			: Math.floor(($parameterStore - min) / step) * step + min;
-
-	$: currentDegree =
-		((($parameterStore as number) - min) / (max - min)) * (maxDegree - minDegree) + minDegree;
-
-	$: connected = typeof parameterStore.set !== 'function';
+	$props = {
+		minDegree: 60,
+		maxDegree: 300,
+		parameterStore: null,
+		min: 0,
+		max: 100,
+		step: 1,
+		label: 'Value',
+		fixed: 0,
+		fontColor: null,
+		knobColor: 'lightblue',
+		knobValueColor: 'white',
+		indicatorColor: '#666565'
+	};
+
+	$state = {
+		currentDegree: ((($props.parameterStore as number) - $props.min) / ($props.max - $props.min)) * ($props.maxDegree - $props.minDegree) + $props.minDegree,
+		connected: typeof $props.parameterStore.set !== 'function',
+		sliderWidth: 0,
+		rotating: false,
+		previousValue: $props.parameterStore,
+		curAngle: `rotate(${((($props.parameterStore as number) - $props.min) / ($props.max - $props.min)) * ($props.maxDegree - $props.minDegree) + $props.minDegree}deg`
+	};
 
 	const graph = getContext<Graph>('graph');
 
@@ -87,35 +41,31 @@
 	const selected = $groups.selected;
 	const activeGroup = graph.activeGroup;
 
-	// TODO: need to rename these variables
-	let sliderWidth: number; // Width of knob on DOM (relative to scale)
 	let knobWrapperElement: HTMLDivElement;
 	let knobElement: HTMLDivElement;
-	let rotating = false;
 
 	// Grab cursor from store
-	$: cursor = graph.cursor;
+	$derived cursor = graph.cursor;
 
 	//Grab scale/zoom value of graph
-	$: scale = graph.transforms.scale;
+	$derived scale = graph.transforms.scale;
 
-	$: translation = graph.transforms.translation;
+	$derived translation = graph.transforms.translation;
 
-	// when the knob is rotating
-	$: if (rotating) {
-		calculateNewAngle($cursor.x, $cursor.y); // need to pass these arguments to trigger updates
-	}
+	$effect(() => {
+		if ($state.rotating) {
+			calculateNewAngle($cursor.x, $cursor.y); // need to pass these arguments to trigger updates
+		}
+	});
 
 	// Begin rotating on mousedown
 	function startRotate(e: MouseEvent) {
 		e.stopPropagation();
 		e.preventDefault();
 		window.addEventListener('mouseup', stopRotate, { once: true });
-		rotating = true;
+		 $state.rotating = true;
 	}
 
-	let previousValue = $parameterStore;
-
 	function startTouchRotate(e: TouchEvent) {
 		$activeGroup = null;
 		selected.nodes.set(new Set());
@@ -123,16 +73,16 @@
 		e.stopPropagation();
 		e.preventDefault();
 		window.addEventListener('touchend', stopRotate, { once: true });
-		rotating = true;
+		 $state.rotating = true;
 	}
 
 	function stopRotate() {
-		if (previousValue === $parameterStore) {
+		if ( $state.previousValue === $props.parameterStore) {
 			knobElement.focus();
 		} else {
-			previousValue = $parameterStore;
+			 $state.previousValue = $props.parameterStore;
 		}
-		rotating = false;
+		 $state.rotating = false;
 		window.removeEventListener('mouseup', stopRotate);
 	}
 
@@ -147,25 +97,23 @@
 	}
 
 	// Update the value based on the direction and increment
-	function updateValue(delta: number, increment = ((maxDegree - minDegree) / (max - min)) * step) {
+	function updateValue(delta: number, increment = (( $props.maxDegree -  $props.minDegree) / ( $props.max -  $props.min)) *  $props.step) {
 		// ADD SETTIMEOUT FOR SCROLL TO SLOW DOWN KNOB INPUT UPDATES
-		currentDegree = roundNum(
-			Math.max(minDegree, Math.min(currentDegree + delta * increment, maxDegree)),
+		 $state.currentDegree = roundNum(
+			Math.max( $props.minDegree, Math.min( $state.currentDegree + delta * increment,  $props.maxDegree)),
 			3
 		);
-		$parameterStore =
-			((clamp(currentDegree) - minDegree) / (maxDegree - minDegree)) * (max - min) + min;
+		$props.parameterStore =
+			((clamp( $state.currentDegree) -  $props.minDegree) / ( $props.maxDegree -  $props.minDegree)) * ( $props.max -  $props.min) +  $props.min;
 	}
 
-	$: curAngle = `rotate(${currentDegree}deg`;
-
 	export function clamp(num: number): number {
-		const increment = ((maxDegree - minDegree) / (max - min)) * step;
-		const degreeRoundToStep = Math.round((num - minDegree) / increment) * increment + minDegree;
-		const degree = Math.min(Math.max(degreeRoundToStep, minDegree), maxDegree);
+		const increment = (( $props.maxDegree -  $props.minDegree) / ( $props.max -  $props.min)) *  $props.step;
+		const degreeRoundToStep = Math.round((num -  $props.minDegree) / increment) * increment +  $props.minDegree;
+		const degree = Math.min(Math.max(degreeRoundToStep,  $props.minDegree),  $props.maxDegree);
 		//this is a band-aid solution
 		//currentDegree should be updating when parameterStore updates within calculateNewAngle
-		currentDegree = degree;
+		 $state.currentDegree = degree;
 		return degree;
 	}
 
@@ -187,36 +135,36 @@
 				? 270 + Math.atan(-relativeY / relativeX) * (180 / Math.PI)
 				: relativeX < 0 && relativeY < 0
 				? 90 - Math.atan(-relativeY / -relativeX) * (180 / Math.PI)
-				: currentDegree;
+				:  $state.currentDegree;
 		// caculate the new parameterstore based on clamp(angle)
 		// a round-off error (see wiki: 'https://en.wikipedia.org/wiki/Round-off_error')
 		// occurs for particular values depending on their angle due to
 		// a computer's limited precision of floating-point number representation.
 		// To circumvent this issue, toFixed is used to adjust output to desired accuracy
-		$parameterStore = Number(
-			(((clamp(angle) - minDegree) / (maxDegree - minDegree)) * (max - min) + min).toFixed(fixed)
+		$props.parameterStore = Number(
+			(((clamp(angle) -  $props.minDegree) / ( $props.maxDegree -  $props.minDegree)) * ( $props.max -  $props.min) +  $props.min).toFixed( $props.fixed)
 		);
 	}
 </script>
 
-{#if !connected}
+{#if !$state.connected}
 	<!-- this div is wrapping the knob section -->
-	<div class="wrapper" style:color={fontColor} bind:this={knobWrapperElement}>
-		<div class="knob-container" bind:offsetWidth={sliderWidth} style:transform={curAngle}>
+	<div class="wrapper" style:color={$props.fontColor} bind:this={knobWrapperElement}>
+		<div class="knob-container" bind:offsetWidth={$state.sliderWidth} style:transform={$state.curAngle}>
 			<div
 				tabindex={0}
 				id="knob"
 				class="knob"
 				aria-label="knob component"
 				role="slider"
-				aria-valuemin={min}
-				aria-valuemax={max}
-				aria-valuenow={$parameterStore}
-				style:background={knobColor}
-				on:wheel|stopPropagation|preventDefault={(event) => {
+				aria-valuemin={$props.min}
+				aria-valuemax={$props.max}
+				aria-valuenow={$props.parameterStore}
+				style:background={$props.knobColor}
+				onwheel|stopPropagation|preventDefault={(event) => {
 					updateValue(Math.sign(event.deltaY));
 				}}
-				on:keydown|stopPropagation={(e) => {
+				onkeydown|stopPropagation={(e) => {
 					const { key } = e;
 
 					if (isArrow(key)) {
@@ -227,17 +175,17 @@
 				use:rotatable
 				bind:this={knobElement}
 			/>
-			<div class="indicator" style:background={indicatorColor} />
+			<div class="indicator" style:background={$props.indicatorColor} />
 		</div>
-		<div class="knob-value" style:color={knobValueColor}>
-			{$parameterStore.toFixed(fixed)}
+		<div class="knob-value" style:color={$props.knobValueColor}>
+			{$props.parameterStore.toFixed($props.fixed)}
 		</div>
 	</div>
 {:else}
 	<div class="wrapper connected">
-		<div class="knob connected" style:--percentage="10%" aria-label={label}>
-			<p>{label}</p>
-			<p>{currentDegree}</p>
+		<div class="knob connected" style:--percentage="10%" aria-label={$props.label}>
+			<p>{$props.label}</p>
+			<p>{$state.currentDegree}</p>
 		</div>
 	</div>
 {/if}
diff --git a/src/lib/components/data/RadioGroup/RadioGroup.svelte b/src/lib/components/data/RadioGroup/RadioGroup.svelte
index 60260d3ee..cf2214964 100644
--- a/src/lib/components/data/RadioGroup/RadioGroup.svelte
+++ b/src/lib/components/data/RadioGroup/RadioGroup.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
 	import type { CustomWritable } from '$lib/types';
 
-	export let options: Array<string>;
-	export let parameterStore: CustomWritable<string>;
+	$props = {
+		options: [],
+		parameterStore: null
+	};
 
-	// Local state for radio group selection
-	let initial = 0;
+	$state = {
+		initial: 0
+	};
 
-	// We want to update the store with the text value, not the index
-	$: $parameterStore = options[initial];
+	$effect(() => {
+		$props.parameterStore = $props.options[$state.initial];
+	});
 
 	const slugify = (str = '') => str.toLowerCase().replace(/ /g, '-').replace(/./g, '');
 
@@ -20,22 +24,22 @@
 		if (key !== 'Tab') event.preventDefault();
 		event.stopPropagation();
 		if (key === 'ArrowRight' || key === 'ArrowDown') {
-			initial = (initial + 1) % options.length;
+			$state.initial = ($state.initial + 1) % $props.options.length;
 		} else if (key === 'ArrowLeft' || key === 'ArrowUp') {
-			initial = (initial - 1 + options.length) % options.length;
+			$state.initial = ($state.initial - 1 + $props.options.length) % $props.options.length;
 		}
 	}
 </script>
 
-<div class="radio-group" role="radiogroup" on:keydown={cycleThroughGroup} tabindex={0}>
-	{#each options as label, index}
+<div class="radio-group" role="radiogroup" onkeydown={cycleThroughGroup} tabindex={0}>
+	{#each $props.options as label, index}
 		<button
-			on:mousedown|stopPropagation={() => {
-				initial = index;
+			onmousedown|stopPropagation={() => {
+				$state.initial = index;
 			}}
 		>
 			<label class="option-wrapper">
-				<input class="option" type="radio" id={slugify(label)} bind:group={initial} value={index} />
+				<input class="option" type="radio" id={slugify(label)} bind:group={$state.initial} value={index} />
 				<p>{label}</p>
 			</label>
 		</button>
diff --git a/src/lib/components/data/Toggle/Toggle.svelte b/src/lib/components/data/Toggle/Toggle.svelte
index 1c3aa4286..9775cfad0 100644
--- a/src/lib/components/data/Toggle/Toggle.svelte
+++ b/src/lib/components/data/Toggle/Toggle.svelte
@@ -2,34 +2,36 @@
 	import type { CustomWritable } from '$lib/types';
 	import type { CSSColorString } from '$lib/types';
 
-	export let parameterStore: CustomWritable<boolean>;
-	export let color: CSSColorString | null = 'limegreen';
+	$props = {
+		parameterStore: null,
+		color: 'limegreen'
+	};
 
 	const handleKeyToggle = (event: KeyboardEvent) => {
 		event.stopPropagation();
 		if (event.key === 'Enter') {
-			$parameterStore = !$parameterStore;
+			$state.parameterStore = !$state.parameterStore;
 		}
 	};
 	const handleClickToggle = (event: MouseEvent) => {
 		event.stopPropagation();
-		$parameterStore = !$parameterStore;
+		$state.parameterStore = !$state.parameterStore;
 	};
 </script>
 
 <div
 	class="toggle-wrapper"
 	role="switch"
-	on:keydown|stopPropagation={handleKeyToggle}
+	onkeydown|stopPropagation={handleKeyToggle}
 	tabindex={0}
-	aria-checked={$parameterStore}
+	aria-checked={$state.parameterStore}
 	aria-label="Toggle Switch"
 >
 	<label class="switch">
 		<input
 			type="checkbox"
-			on:click|stopPropagation={handleClickToggle}
-			bind:checked={$parameterStore}
+			onclick|stopPropagation={handleClickToggle}
+			bind:checked={$state.parameterStore}
 		/>
 		<span class="slider round" style:--prop-toggle-color={color} />
 	</label>
diff --git a/src/lib/containers/Graph/Graph.svelte b/src/lib/containers/Graph/Graph.svelte
index cef5455e3..e8f0b6286 100644
--- a/src/lib/containers/Graph/Graph.svelte
+++ b/src/lib/containers/Graph/Graph.svelte
@@ -4,7 +4,7 @@
 	import GraphRenderer from '../../renderers/GraphRenderer/GraphRenderer.svelte';
 	import Editor from '$lib/components/Editor/Editor.svelte';
 	import { connectingFrom } from '$lib/components/Anchor/Anchor.svelte';
-	import { onMount, setContext, createEventDispatcher, tick } from 'svelte';
+	import { onMount, setContext, tick } from 'svelte';
 	import { isArrow } from '$lib/types';
 	import { moveElementWithBounds, calculateRelativeBounds } from '$lib/utils/movers';
 	import { touchDistance, initialClickPosition, tracking } from '$lib/stores/CursorStore';
@@ -20,34 +20,56 @@
 
 <script lang="ts">
 	// defining props that the Graph component expects when it is used, type annotations added
-	export let graph: Graph;
-	export let width: number;
-	export let height: number;
-	export let minimap = false;
-	export let controls = false;
-	export let toggle = false;
-	export let fixedZoom = false;
-	export let pannable = true;
-	export let disableSelection = false;
-	export let ZOOM_INCREMENT = 0.1;
-	export let PAN_INCREMENT = 50;
-	export let PAN_TIME = 250;
-	export let MAX_SCALE = 3;
-	export let MIN_SCALE = 0.2;
-	export let selectionColor: CSSColorString;
-	export let backgroundExists: boolean;
-	export let fitView: boolean | 'resize' = false;
-	export let trackpadPan: boolean;
-	export let modifier: 'alt' | 'ctrl' | 'shift' | 'meta';
-	export let theme = 'light';
-	export let title: string;
-	export let drawer = false;
-	export let contrast = false;
-
-	let animationFrameId: number;
+	$props = {
+		graph: null,
+		width: 0,
+		height: 0,
+		minimap: false,
+		controls: false,
+		toggle: false,
+		fixedZoom: false,
+		pannable: true,
+		disableSelection: false,
+		ZOOM_INCREMENT: 0.1,
+		PAN_INCREMENT: 50,
+		PAN_TIME: 250,
+		MAX_SCALE: 3,
+		MIN_SCALE: 0.2,
+		selectionColor: null,
+		backgroundExists: false,
+		fitView: false,
+		trackpadPan: false,
+		modifier: 'meta',
+		theme: 'light',
+		title: '',
+		drawer: false,
+		contrast: false
+	};
+
+	$state = {
+		animationFrameId: 0,
+		initialDistance: 0,
+		initialScale: 1,
+		anchor: { x: 0, y: 0, top: 0, left: 0 },
+		selecting: false,
+		creating: false,
+		adding: false,
+		isMovable: false,
+		pinching: false,
+		initialFit: false,
+		graphDimensions: null,
+		toggleComponent: null,
+		minimapComponent: null,
+		controlsComponent: null,
+		drawerComponent: null,
+		contrastComponent: null
+	};
 
 	// creates a dispatch function using Svelte's createEventDispatcher. This function is used to dispatch custom events from the component. For example, if the component needs to notify parent components of certain actions or changes, dispatch can be used to emit these events.
-	const dispatch = createEventDispatcher();
+	const dispatch = (eventName, detail) => {
+		const event = new CustomEvent(eventName, { detail });
+		dispatchEvent(event);
+	};
 	// declares a variable activeIntervals with an initial empty object. This is likely used to keep track of active intervals (created with setInterval) that might be used in the component, allowing for better management and clearance of these intervals.
 	const activeIntervals: ActiveIntervals = {};
 
@@ -60,66 +82,62 @@
 
 	// External stores
 	// These are Svelte stores that are likely passed as part of the graph prop or accessed directly from it. They represent various aspects of the graph's state, such as its current cursor position, scale, dimensions, and more
-	const cursor = graph.cursor;
-	const scale = graph.transforms.scale;
-	const dimensionsStore = graph.dimensions;
-	const translation = graph.transforms.translation;
-	const groups = graph.groups;
-	const groupBoxes = graph.groupBoxes;
+	const cursor = $props.graph.cursor;
+	const scale = $props.graph.transforms.scale;
+	const dimensionsStore = $props.graph.dimensions;
+	const translation = $props.graph.transforms.translation;
+	const groups = $props.graph.groups;
+	const groupBoxes = $props.graph.groupBoxes;
 	const selected = $groups.selected.nodes;
-	const activeGroup = graph.activeGroup;
-	const initialNodePositions = graph.initialNodePositions;
-	const editing = graph.editing;
-	const nodeBounds = graph.bounds.nodeBounds;
-
-	// Reactive variables
-	// These are standard JavaScript variables that are reactive, meaning Svelte will re-run any reactive statements or parts of the DOM that depend on these variables whenever their values change.
-	let initialDistance = 0;
-	let initialScale = 1;
-	let anchor = { x: 0, y: 0, top: 0, left: 0 };
-	let selecting = false;
-	let creating = false;
-	let adding = false;
-	let isMovable = false;
-	let pinching = false;
-	let initialFit = false;
-	let graphDimensions: GraphDimensions;
-	let toggleComponent: ComponentType | null = null;
-	let minimapComponent: ComponentType | null = null;
-	let controlsComponent: ComponentType | null = null;
-	let drawerComponent: ComponentType | null = null;
-	let contrastComponent: ComponentType | null = null;
+	const activeGroup = $props.graph.activeGroup;
+	const initialNodePositions = $props.graph.initialNodePositions;
+	const editing = $props.graph.editing;
+	const nodeBounds = $props.graph.bounds.nodeBounds;
 
 	// Subscriptions
-	// This line is a Svelte reactive statement, denoted by $:. It creates a reactivity relationship between dimensions and dimensionsStore.
-	$: dimensions = $dimensionsStore;
+	// This is a Svelte reactive statement, denoted by $:. It creates a reactivity relationship between dimensions and dimensionsStore.
+	$derived dimensions = $dimensionsStore;
 
 	// Update the svelvet-theme attribute everytime the theme changes
-	$: if (theme) document.documentElement.setAttribute('svelvet-theme', theme);
+	$effect(() => {
+		if ($props.theme) document.documentElement.setAttribute('svelvet-theme', $props.theme);
+	});
 	// camera view adjustment
-	$: if (!initialFit && fitView) {
-		fitIntoView();
-	}
+	$effect(() => {
+		if (!$state.initialFit && $props.fitView) {
+			fitIntoView();
+		}
+	});
 	// load the theme toggle
-	$: if (toggle && !toggleComponent) loadToggle();
+	$effect(() => {
+		if ($props.toggle && !$state.toggleComponent) loadToggle();
+	});
 	// load the minimap
-	$: if (minimap && !minimapComponent) loadMinimap();
+	$effect(() => {
+		if ($props.minimap && !$state.minimapComponent) loadMinimap();
+	});
 	// load the controls interface
-	$: if (controls && !controlsComponent) loadControls();
+	$effect(() => {
+		if ($props.controls && !$state.controlsComponent) loadControls();
+	});
 	// load the drawer
-	$: if (drawer && !drawerComponent) loadDrawer();
+	$effect(() => {
+		if ($props.drawer && !$state.drawerComponent) loadDrawer();
+	});
 	//load the contrast options
-	$: if (contrast && !contrastComponent) loadContrast();
+	$effect(() => {
+		if ($props.contrast && !$state.contrastComponent) loadContrast();
+	});
 
 	// This is a temporary workaround for generating an edge where one of the anchors is the cursor
 	const cursorAnchor: CursorAnchor = {
 		id: null,
-		position: graph.cursor,
+		position: $props.graph.cursor,
 		offset: writable({ x: 0, y: 0 }),
 		connected: writable(new Set()),
 		dynamic: writable(false),
 		edge: null,
-		edgeColor: writable(null),
+			edgeColor: writable(null),
 		direction: writable('self'),
 		inputKey: null,
 		type: 'output',
@@ -130,7 +148,7 @@
 		node: {
 			zIndex: writable(Infinity),
 			rotating: writable(false),
-			position: graph.cursor,
+			position: $props.graph.cursor,
 			dimensions: { width: writable(0), height: writable(0) }
 		}
 	};
@@ -140,14 +158,14 @@
 	setContext('graphDOMElement', graphDOMElement);
 	setContext('cursorAnchor', cursorAnchor);
 	setContext('duplicate', duplicate);
-	setContext('graph', graph);
-	setContext('transforms', graph.transforms);
-	setContext('dimensions', graph.dimensions);
-	setContext('locked', graph.locked);
-	setContext('groups', graph.groups);
-	setContext('bounds', graph.bounds);
-	setContext('edgeStore', graph.edges);
-	setContext('nodeStore', graph.nodes);
+	setContext('graph', $props.graph);
+	setContext('transforms', $props.graph.transforms);
+	setContext('dimensions', $props.graph.dimensions);
+	setContext('locked', $props.graph.locked);
+	setContext('groups', $props.graph.groups);
+	setContext('bounds', $props.graph.bounds);
+	setContext('edgeStore', $props.graph.edges);
+	setContext('nodeStore', $props.graph.nodes);
 	setContext('mounted', mounted);
 
 	// Lifecycle methods
@@ -158,39 +176,39 @@
 	async function fitIntoView() {
 		await tick();
 		tracking.set(true);
-		const { x, y, scale } = calculateFitView(graphDimensions, $nodeBounds);
+		const { x, y, scale } = calculateFitView($state.graphDimensions, $nodeBounds);
 		if (x !== null && y !== null && scale !== null) {
-			graph.transforms.scale.set(scale);
+			$props.graph.transforms.scale.set(scale);
 			translation.set({ x, y });
 		}
 		tracking.set(false);
-		initialFit = true;
+		$state.initialFit = true;
 	}
 	async function loadMinimap() {
-		minimapComponent = (await import('$lib/components/Minimap/Minimap.svelte')).default;
+		$state.minimapComponent = (await import('$lib/components/Minimap/Minimap.svelte')).default;
 	}
 
 	async function loadToggle() {
-		toggleComponent = (await import('$lib/components/ThemeToggle/ThemeToggle.svelte')).default;
+		$state.toggleComponent = (await import('$lib/components/ThemeToggle/ThemeToggle.svelte')).default;
 	}
 
 	async function loadControls() {
-		controlsComponent = (await import('$lib/components/Controls/Controls.svelte')).default;
+		$state.controlsComponent = (await import('$lib/components/Controls/Controls.svelte')).default;
 	}
 
 	async function loadDrawer() {
-		drawerComponent = (await import('$lib/components/Drawer/DrawerController.svelte')).default;
+		$state.drawerComponent = (await import('$lib/components/Drawer/DrawerController.svelte')).default;
 	}
 
 	async function loadContrast() {
-		contrastComponent = (await import('$lib/components/ContrastTheme/ContrastTheme.svelte'))
+		$state.contrastComponent = (await import('$lib/components/ContrastTheme/ContrastTheme.svelte'))
 			.default;
 	}
 
 	function updateGraphDimensions() {
-		if (!$graphDOMElement) return;
+		if (! $graphDOMElement) return;
 		const DOMRect = $graphDOMElement.getBoundingClientRect();
-		graphDimensions = {
+		$state.graphDimensions = {
 			top: DOMRect.top,
 			left: DOMRect.left,
 			bottom: DOMRect.bottom,
@@ -199,14 +217,14 @@
 			height: DOMRect.height
 		};
 
-		graph.dimensions.set(graphDimensions);
-		if (fitView === 'resize') fitIntoView();
+		$props.graph.dimensions.set($state.graphDimensions);
+		if ($props.fitView === 'resize') fitIntoView();
 	}
 
 	function onMouseUp(e: MouseEvent | TouchEvent) {
-		if (creating) {
+		if ($state.creating) {
 			const groupName = generateKey();
-			const groupKey: GroupKey = `${groupName}/${graph.id}`;
+			const groupKey: GroupKey = `${groupName}/${$props.graph.id}`;
 			const cursorPosition = get(cursor);
 			const width = cursorPosition.x - $initialClickPosition.x;
 			const height = cursorPosition.y - $initialClickPosition.y;
@@ -247,8 +265,8 @@
 
 			$selected = new Set();
 
-			creating = false;
-			selecting = false;
+			$state.creating = false;
+			$state.selecting = false;
 		}
 
 		// Set moving boolean on active group to false
@@ -256,10 +274,10 @@
 			const nodeGroupArray = Array.from(get($groups[$activeGroup].nodes));
 			nodeGroupArray.forEach((node) => node.moving.set(false));
 		}
-		const cursorEdge = graph.edges.get('cursor');
+		const cursorEdge = $props.graph.edges.get('cursor');
 
 		if (cursorEdge) {
-			graph.edges.delete('cursor');
+			$props.graph.edges.delete('cursor');
 			if (!cursorEdge.disconnect)
 				dispatch('edgeDrop', {
 					cursor: get(cursor),
@@ -272,20 +290,20 @@
 		$activeGroup = null;
 		$initialClickPosition = { x: 0, y: 0 };
 		$initialNodePositions = [];
-		selecting = false;
-		isMovable = false;
+		$state.selecting = false;
+		$state.isMovable = false;
 		$tracking = false;
 
 		if (!e.shiftKey) {
 			connectingFrom.set(null);
 		}
 
-		anchor.y = 0;
-		anchor.x = 0;
+		$state.anchor.y = 0;
+		$state.anchor.x = 0;
 	}
 
 	function onMouseDown(e: MouseEvent) {
-		if (!pannable && !(e.shiftKey || e.metaKey)) return;
+		if (!$props.pannable && !(e.shiftKey || e.metaKey)) return;
 		if (e.button === 2) return;
 		if ($graphDOMElement) $graphDOMElement.focus();
 
@@ -295,25 +313,25 @@
 
 		if (e.shiftKey || e.metaKey) {
 			e.preventDefault();
-			selecting = true;
-			const { top, left } = dimensions;
-			anchor.y = clientY - top;
-			anchor.x = clientX - left;
-			anchor.top = top;
-			anchor.left = left;
+			$state.selecting = true;
+			const { top, left } = $state.dimensions;
+			$state.anchor.y = clientY - top;
+			$state.anchor.x = clientX - left;
+			$state.anchor.top = top;
+			$state.anchor.left = left;
 			if (e.shiftKey && e.metaKey) {
-				creating = true;
+				$state.creating = true;
 			} else {
-				creating = false;
+				$state.creating = false;
 			}
 
 			if (e.metaKey && !e.shiftKey) {
-				adding = true;
+				$state.adding = true;
 			} else {
-				adding = false;
+				$state.adding = false;
 			}
 		} else {
-			isMovable = true;
+			$state.isMovable = true;
 			$selected = new Set();
 			$selected = $selected;
 		}
@@ -325,36 +343,36 @@
 
 		$initialClickPosition = get(cursor);
 
-		isMovable = true;
+		$state.isMovable = true;
 		if (e.touches.length === 2) {
 			startPinching();
-			initialDistance = $touchDistance;
-			initialScale = $scale;
+			$state.initialDistance = $touchDistance;
+			$state.initialScale = $scale;
 		}
 	}
 
 	function onTouchEnd() {
-		isMovable = false;
-		pinching = false;
+		$state.isMovable = false;
+		$state.pinching = false;
 	}
 
 	function startPinching() {
-		if (!pinching) {
-			pinching = true;
-			animationFrameId = requestAnimationFrame(handlePinch);
+		if (!$state.pinching) {
+			$state.pinching = true;
+			$state.animationFrameId = requestAnimationFrame(handlePinch);
 		}
 	}
 
 	function handlePinch() {
-		if (!pinching) {
-			cancelAnimationFrame(animationFrameId);
+		if (!$state.pinching) {
+			cancelAnimationFrame($state.animationFrameId);
 			return;
 		}
 
 		const newDistance = $touchDistance;
-		const scaleFactor = newDistance / initialDistance;
-		$scale = initialScale * scaleFactor;
-		animationFrameId = requestAnimationFrame(handlePinch);
+		const scaleFactor = newDistance / $state.initialDistance;
+		$scale = $state.initialScale * scaleFactor;
+		$state.animationFrameId = requestAnimationFrame(handlePinch);
 	}
 
 	function handleKeyDown(e: KeyboardEvent) {
@@ -364,20 +382,20 @@
 		// We dont want to prevent users from interacting with inputs
 		if (target.tagName == 'INPUT' || target.tagName == 'TEXTAREA') return;
 
-		if (code === 'KeyA' && e[`${modifier}Key`]) {
-			const unlockedNodes = graph.nodes.getAll().filter((node) => !get(node.locked));
+		if (code === 'KeyA' && e[`${$props.modifier}Key`]) {
+			const unlockedNodes = $props.graph.nodes.getAll().filter((node) => !get(node.locked));
 			$selected = new Set(unlockedNodes);
 		} else if (isArrow(key)) {
 			handleArrowKey(key as Arrow, e);
 		} else if (key === '=') {
-			zoomAndTranslate(-1, graph.dimensions, graph.transforms, ZOOM_INCREMENT);
+			zoomAndTranslate(-1, $props.graph.dimensions, $props.graph.transforms, $props.ZOOM_INCREMENT);
 		} else if (key === '-') {
-			zoomAndTranslate(1, graph.dimensions, graph.transforms, ZOOM_INCREMENT);
+			zoomAndTranslate(1, $props.graph.dimensions, $props.graph.transforms, $props.ZOOM_INCREMENT);
 		} else if (key === '0') {
 			fitIntoView();
 		} else if (key === 'Control') {
 			$groups['selected'].nodes.set(new Set());
-		} else if (code === 'KeyD' && e[`${modifier}Key`]) {
+		} else if (code === 'KeyD' && e[`${$props.modifier}Key`]) {
 			duplicate.set(true);
 			setTimeout(() => {
 				duplicate.set(false);
@@ -385,16 +403,16 @@
 		} else if (key === 'Tab' && (e.altKey || e.ctrlKey)) {
 			selectNextNode();
 		} else if (key === 'l') {
-			theme = theme === 'light' ? 'dark' : 'light';
+			$props.theme = $props.theme === 'light' ? 'dark' : 'light';
 		} else if (key === 'd') {
-			drawer = !drawer;
+			$props.drawer = !$props.drawer;
 		} else if (key === 'm') {
-			minimap = !minimap;
+			$props.minimap = !$props.minimap;
 		} else if (key === 'c') {
-			controls = !controls;
+			$props.controls = !$props.controls;
 		} else if (key === 'e') {
 			const node = Array.from($selected)[0];
-			graph.editing.set(node);
+			$props.graph.editing.set(node);
 		} else {
 			return; // Unhandled action: used default handler
 		}
@@ -404,7 +422,7 @@
 
 	//This function handles selecting nodes
 	function selectNextNode() {
-		const nodes = graph.nodes.getAll();
+		const nodes = $props.graph.nodes.getAll();
 
 		const currentIndex = nodes.findIndex((node) => $selected.has(node));
 		const nextIndex = currentIndex + 1;
@@ -425,7 +443,7 @@
 	}
 
 	function handleScroll(e: WheelEvent) {
-		if (fixedZoom) return;
+		if ($props.fixedZoom) return;
 		const multiplier = e.shiftKey ? 0.15 : 1;
 		const { clientX, clientY, deltaY } = e;
 		const currentTranslation = $translation;
@@ -435,7 +453,7 @@
 		// If it does, it means the user is using a trackpad
 		// If trackpadPan is enabled or the meta key is pressed
 		// Pan the graph instead of zooming
-		if ((trackpadPan || e.metaKey) && deltaY % 1 === 0) {
+		if (($props.trackpadPan || e.metaKey) && deltaY % 1 === 0) {
 			$translation = {
 				x: ($translation.x -= e.deltaX),
 				y: ($translation.y -= e.deltaY)
@@ -444,7 +462,7 @@
 			return;
 		}
 
-		if (($scale >= MAX_SCALE && deltaY < 0) || ($scale <= MIN_SCALE && deltaY > 0)) return;
+		if (($scale >= $props.MAX_SCALE && deltaY < 0) || ($scale <= $props.MIN_SCALE && deltaY > 0)) return;
 
 		// Calculate the scale adjustment
 		const scrollAdjustment = Math.min(0.009 * multiplier * Math.abs(deltaY), 0.08);
@@ -456,7 +474,7 @@
 			newScale,
 			currentTranslation,
 			pointerPosition,
-			graphDimensions
+			$state.graphDimensions
 		);
 
 		// Apply transforms
@@ -471,7 +489,7 @@
 		const direction = key === 'ArrowLeft' || key === 'ArrowUp' ? 1 : -1;
 		const leftRight = key === 'ArrowLeft' || key === 'ArrowRight';
 		const startOffset = leftRight ? $translation.x : $translation.y;
-		const endOffset = startOffset + direction * PAN_INCREMENT * multiplier;
+		const endOffset = startOffset + direction * $props.PAN_INCREMENT * multiplier;
 
 		if (!activeIntervals[key]) {
 			let interval = setInterval(() => {
@@ -479,7 +497,7 @@
 
 				//movement of camera when no nodes are selected
 				if ($selected.size === 0) {
-					const movement = startOffset + (endOffset - startOffset) * (time / PAN_TIME);
+					const movement = startOffset + (endOffset - startOffset) * (time / $props.PAN_TIME);
 					translation.set({
 						x: leftRight ? movement : $translation.x,
 						y: leftRight ? $translation.y : movement
@@ -495,7 +513,7 @@
 						let groupBox: GroupBox | undefined;
 						const groupName = get(node.group);
 
-						const groupBoxes = get(graph.groupBoxes);
+						const groupBoxes = get($props.graph.groupBoxes);
 
 						if (groupName) groupBox = groupBoxes.get(groupName);
 						if (groupBox) {
@@ -517,23 +535,23 @@
 	// let parameterStore = writable('default value');
 </script>
 
-<!-- <button on:click={() => getJSONState(graph)}>SAVE STATE</button> -->
+<!-- <button onclick={() => getJSONState(graph)}>SAVE STATE</button> -->
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 
 <section
 	role="presentation"
-	id={graph.id}
+	id={$props.graph.id}
 	class="svelvet-wrapper"
 	{title}
-	style:width={width ? width + 'px' : '100%'}
-	style:height={height ? height + 'px' : '100%'}
-	style:cursor={pannable ? 'move' : 'default'}
-	on:wheel|preventDefault={handleScroll}
-	on:mousedown|preventDefault|self={onMouseDown}
-	on:touchend|preventDefault={onTouchEnd}
-	on:touchstart|preventDefault|self={onTouchStart}
-	on:keydown={handleKeyDown}
-	on:keyup={handleKeyUp}
+	style:width={$props.width ? $props.width + 'px' : '100%'}
+	style:height={$props.height ? $props.height + 'px' : '100%'}
+	style:cursor={$props.pannable ? 'move' : 'default'}
+	onwheel|preventDefault={handleScroll}
+	onmousedown|preventDefault|self={onMouseDown}
+	ontouchend|preventDefault={onMouseUp}
+	ontouchstart|preventDefault|self={onTouchStart}
+	onkeydown={handleKeyDown}
+	onkeyup={handleKeyUp}
 	bind:this={$graphDOMElement}
 	tabindex={0}
 >
@@ -544,41 +562,41 @@
 		<slot />
 	</GraphRenderer>
 
-	{#if backgroundExists}
+	{#if $props.backgroundExists}
 		<slot name="background" />
 	{:else}
 		<Background />
 	{/if}
-	{#if minimap}
-		<svelte:component this={minimapComponent} />
+	{#if $props.minimap}
+		<svelte:component this={$state.minimapComponent} />
 	{/if}
-	{#if controls}
-		<svelte:component this={controlsComponent} />
+	{#if $props.controls}
+		<svelte:component this={$state.controlsComponent} />
 	{/if}
-	{#if toggle}
-		<svelte:component this={toggleComponent} />
+	{#if $props.toggle}
+		<svelte:component this={$state.toggleComponent} />
 	{/if}
-	{#if drawer}
-		<svelte:component this={drawerComponent} />
+	{#if $props.drawer}
+		<svelte:component this={$state.drawerComponent} />
 	{/if}
-	{#if contrast}
-		<svelte:component this={contrastComponent} />
+	{#if $props.contrast}
+		<svelte:component this={$state.contrastComponent} />
 	{/if}
 	<slot name="minimap" />
 	<slot name="drawer" />
 	<slot name="controls" />
 	<slot name="toggle" />
 	<slot name="contrast" />
-	{#if selecting && !disableSelection}
-		<SelectionBox {creating} {anchor} {graph} {adding} color={selectionColor} />
+	{#if $state.selecting && !$props.disableSelection}
+		<SelectionBox {creating} {anchor} graph={$props.graph} {adding} color={$props.selectionColor} />
 	{/if}
 </section>
 
 <svelte:window
-	on:touchend={onMouseUp}
-	on:mouseup={onMouseUp}
-	on:resize={updateGraphDimensions}
-	on:scroll={updateGraphDimensions}
+	ontouchend={onMouseUp}
+	onmouseup={onMouseUp}
+	onresize={updateGraphDimensions}
+	onscroll={updateGraphDimensions}
 />
 
 <style>
diff --git a/src/lib/containers/Svelvet/Svelvet.svelte b/src/lib/containers/Svelvet/Svelvet.svelte
index f7aff485d..9faaf6b10 100644
--- a/src/lib/containers/Svelvet/Svelvet.svelte
+++ b/src/lib/containers/Svelvet/Svelvet.svelte
@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
 	import Graph from '../Graph/Graph.svelte';
 	import FlowChart from '$lib/components/FlowChart/FlowChart.svelte';
-	import { createEventDispatcher, onMount, setContext } from 'svelte';
+	import { onMount, setContext } from 'svelte';
 	import { createGraph } from '$lib/utils/';
 	import { graphStore } from '$lib/stores';
 	import { reloadStore } from '$lib/utils/savers/reloadStore';
@@ -19,148 +19,104 @@
 
 <script lang="ts">
 	// Props
-	export let mermaid = '';
-	/**
-	 * @default light
-	 * @description This prop is used to interface with custom style blocks created using CSS. You can create any number of
-	 * themes with the following selector `:root[svelvet-theme="your-theme"]` and then pass the name of your theme
-	 * to this prop to apply it to the graph. Please see the docs for the CSS variables options. Svelvet reserves the "light" and "dark" themes for
-	 * internal use.
-	 */
-	export let theme = 'light';
-	export let id: number | string = 0;
-	export let snapTo = 0;
-	/**
-	 * @default 1
-	 * @description Sets initial zoom level of the graph. This value
-	 * features two way binding, so changing it will update the zoom.
-	 */
-	export let zoom = 1;
-	export let TD = false;
-	export let editable = true;
-	export let locked = false;
-	export let width = 0;
-	export let height = 0;
-	export let minimap = false;
-	export let controls = false;
-	export let toggle = false;
-	export let drawer = false;
-	export let contrast = false;
-	/**
-	 * @default `false`
-	 * @description When `true`, the graph will automatically adjust translation
-	 * and scale to fit all nodes within the viewport. When set to `resize`, this
-	 * will continuously happen as the viewport changes size. This value is reactive.
-	 */
-	export let fitView: boolean | 'resize' = false;
-	/**
-	 * @default 'lightblue'
-	 * @description Color of the box used to select/group nodes
-	 */
-	export let selectionColor: CSSColorString = 'lightblue';
-	export let edgeStyle: EdgeStyle = 'bezier';
-	export let endStyles: Array<EndStyle> = [null, null];
-	export let edge: ComponentType | null = null;
-	/**
-	 * @default false
-	 * @description Boolean controlling whether or not Shift + Click enables the selection of multiple components.
-	 * This feature is enabled by default.
-	 */
-	export let disableSelection = false;
-	export let mermaidConfig: Record<string, NodeConfig> = {};
-	/**
-	 * @default { x: 0, y: 0 }
-	 * @type { x: number, y: number }
-	 * @description The initial translation of the graph. This value
-	 * does not currently feature two way binding
-	 */
-	export let translation: XYPair = { x: 0, y: 0 };
-	export let trackpadPan = false;
-	export let modifier: 'alt' | 'ctrl' | 'shift' | 'meta' = 'meta';
-	/**
-	 * @default false
-	 * @description When a Node is selected, this prop controls whether the
-	 * z-index of a connected edge should be raised.
-	 * Setting to `true` raises the edge regardless of
-	 * if the source or target is selected.
-	 */
-	export let raiseEdgesOnSelect: boolean | 'source' | 'target' = false;
-	/**
-	 * @default false
-	 * @description Sets whether edges should, by default,
-	 * be placed above or below connected Nodes. Can be set
-	 * to `all` to force Edges above all nodes. Otherwise,
-	 * true essentially turns on `raiseEdgesOnSelect`, but places the
-	 * edges at higher z-Index than the Node.
-	 */
-	export let edgesAboveNode: boolean | 'all' = false;
-	export let title = '';
-	/**
-	 * @default false
-	 * @description Prevents the graph scale/zoom from changing.
-	 */
-	export let fixedZoom = false;
-	/**
-	 * @default true
-	 * @description Prevents the graph from panning on click if false
-	 */
-	export let pannable = true;
-
-	const dispatch = createEventDispatcher<{
-		connection: SvelvetConnectionEvent;
-		disconnection: SvelvetConnectionEvent;
-	}>();
-
-	// let graph: GraphType;
-	let graph: GraphType | null = null;
-	let direction: 'TD' | 'LR' = TD ? 'TD' : 'LR';
-
-	setContext('snapTo', snapTo);
-	setContext('edgeStyle', edgeStyle);
-	setContext('endStyles', endStyles);
-	setContext('graphEdge', edge);
-	setContext('raiseEdgesOnSelect', raiseEdgesOnSelect);
-	setContext('edgesAboveNode', edgesAboveNode);
-	setContext('graph', graph);
+	$props = {
+		mermaid: '',
+		theme: 'light',
+		id: 0,
+		snapTo: 0,
+		zoom: 1,
+		TD: false,
+		editable: true,
+		locked: false,
+		width: 0,
+		height: 0,
+		minimap: false,
+		controls: false,
+		toggle: false,
+		drawer: false,
+		contrast: false,
+		fitView: false,
+		selectionColor: 'lightblue',
+		edgeStyle: 'bezier',
+		endStyles: [null, null],
+		edge: null,
+		disableSelection: false,
+		mermaidConfig: {},
+		translation: { x: 0, y: 0 },
+		trackpadPan: false,
+		modifier: 'meta',
+		raiseEdgesOnSelect: false,
+		edgesAboveNode: false,
+		title: '',
+		fixedZoom: false,
+		pannable: true
+	};
+
+	$state = {
+		graph: null,
+		direction: $props.TD ? 'TD' : 'LR',
+		backgroundExists: false,
+		edgeStore: null
+	};
+
+	setContext('snapTo', $props.snapTo);
+	setContext('edgeStyle', $props.edgeStyle);
+	setContext('endStyles', $props.endStyles);
+	setContext('graphEdge', $props.edge);
+	setContext('raiseEdgesOnSelect', $props.raiseEdgesOnSelect);
+	setContext('edgesAboveNode', $props.edgesAboveNode);
+	setContext('graph', $state.graph);
 
 	// function to load a graph from local storage
 	// occurs after Svelvet renders
 	onMount(() => {
 		const stateObject = localStorage.getItem('state');
-		// console.log('stateObject during onMount:', stateObject);
 		if (stateObject) {
-			graph = reloadStore(stateObject);
-			graphStore.add(graph, graph.id);
+			$state.graph = reloadStore(stateObject);
+			graphStore.add($state.graph, $state.graph.id);
 		} else {
-			let graphKey: GraphKey = `G-${id || graphStore.count() + 1}`;
-
-			graph = createGraph(graphKey, { zoom, direction, editable, locked, translation });
+			let graphKey: GraphKey = `G-${$props.id || graphStore.count() + 1}`;
+
+			$state.graph = createGraph(graphKey, {
+				zoom: $props.zoom,
+				direction: $state.direction,
+				editable: $props.editable,
+				locked: $props.locked,
+				translation: $props.translation
+			});
 
-			graphStore.add(graph, graphKey);
+			graphStore.add($state.graph, graphKey);
 		}
-		// setContext('graph', graph)
-		// added console.log
-
-		// console.log('Graph after onMount:', graph);
-		// graphStore.set(graph);
 	});
 
-	$: backgroundExists = $$slots.background;
+	$effect(() => {
+		$state.backgroundExists = $$slots.background;
+	});
 
-	$: edgeStore = graph && graph.edges;
+	$effect(() => {
+		$state.edgeStore = $state.graph && $state.graph.edges;
+	});
 
-	$: if (graph) graph.transforms.scale.set(zoom);
+	$effect(() => {
+		if ($state.graph) $state.graph.transforms.scale.set($props.zoom);
+	});
 
-	$: if (edgeStore) {
-		edgeStore.onEdgeChange((edge, type) => {
-			dispatch(type, {
-				sourceAnchor: edge.source as Anchor,
-				targetAnchor: edge.target as Anchor,
-				sourceNode: edge.source.node as Node,
-				targetNode: edge.target.node as Node
+	$effect(() => {
+		if ($state.edgeStore) {
+			$state.edgeStore.onEdgeChange((edge, type) => {
+				dispatchEvent(
+					new CustomEvent(type, {
+						detail: {
+							sourceAnchor: edge.source as Anchor,
+							targetAnchor: edge.target as Anchor,
+							sourceNode: edge.source.node as Node,
+							targetNode: edge.target.node as Node
+						}
+					})
+				);
 			});
-		});
-	}
+		}
+	});
 
 	/**
 	 * @description Disconnects two nodes
@@ -173,29 +129,29 @@
 		target: [string | number, string | number]
 	) {
 		const sourceNodeKey: NodeKey = `N-${source[0]}`;
-		const sourceNode = graph.nodes.get(sourceNodeKey);
+		const sourceNode = $state.graph.nodes.get(sourceNodeKey);
 		if (!sourceNode) return;
 		const sourceAnchor = sourceNode.anchors.get(`A-${source[1]}/N-${source[0]}`);
 		if (!sourceAnchor) return;
 		const targetNodeKey: NodeKey = `N-${target[0]}`;
-		const targetNode = graph.nodes.get(targetNodeKey);
+		const targetNode = $state.graph.nodes.get(targetNodeKey);
 		if (!targetNode) return;
 		const targetAnchor = targetNode.anchors.get(`A-${target[1]}/N-${target[0]}`);
 		if (!targetAnchor) return;
-		const edgeKey = graph.edges.match(sourceAnchor, targetAnchor);
+		const edgeKey = $state.graph.edges.match(sourceAnchor, targetAnchor);
 		if (!edgeKey) return;
-		graph.edges.delete(edgeKey[0]);
+		$state.graph.edges.delete(edgeKey[0]);
 	}
 </script>
 
-{#if graph}
+{#if $state.graph}
 	<Graph
 		{width}
 		{height}
 		{toggle}
 		{backgroundExists}
 		{minimap}
-		{graph}
+		graph={$state.graph}
 		{fitView}
 		{fixedZoom}
 		{pannable}
@@ -208,10 +164,10 @@
 		{modifier}
 		{title}
 		{contrast}
-		on:edgeDrop
+		onedgeDrop
 	>
-		{#if mermaid.length}
-			<FlowChart {mermaid} {mermaidConfig} />
+		{#if $props.mermaid.length}
+			<FlowChart mermaid={$props.mermaid} mermaidConfig={$props.mermaidConfig} />
 		{/if}
 		<slot />
 		<slot name="minimap" slot="minimap" />
@@ -224,8 +180,8 @@
 {:else}
 	<div
 		class="svelvet-temp"
-		style:width={width ? width + 'px' : '100%'}
-		style:height={height ? height + 'px' : '100%'}
+		style:width={$props.width ? $props.width + 'px' : '100%'}
+		style:height={$props.height ? $props.height + 'px' : '100%'}
 	/>
 {/if}
 
@@ -561,7 +517,7 @@
 
 		--default-edge-color: #ffff00;
 		--default-target-edge-color: #000000;
-		--default-edge-shadow: var(--shadow-elevation-medium);
+		--default-edge-shadow: var (--shadow-elevation-medium);
 		--default-label-color: #ffff00;
 		--default-label-text-color: #000000;
 
@@ -570,118 +526,6 @@
 		--default-minimap-border: var(--plugin-border);
 		--default-theme-toggle-border: var(--plugin-border);
 
-		--default-anchor-color: #ffff00;
-		--default-anchor-border-color: #000000;
-
-		--default-anchor-connected: #ffff00;
-		--default-anchor-connected-border: #000000;
-
-		--default-anchor-connecting: #ffff00;
-		--default-anchor-connecting-border: #000000;
-
-		--default-anchor-hovering: #ffff00;
-		--default-anchor-hovering-border: #000000;
-
-		--default-minimap-background-color: #000000;
-		--default-minimap-node-color: #ffff00;
-
-		--default-controls-background-color: #000000;
-		--default-controls-text-color: #ffff00;
-
-		--default-theme-toggle-text-color: #ffff00;
-		--default-theme-toggle-color: #000000;
-
-		--default-drawer-button-color: #000000;
-		--default-drawer-button-text-color: #ffff00;
-
-		--default-drawer-reset-button-color: #000000;
-		--default-drawer-reset-button-text-color: #ffff00;
-		--default-drawer-reset-button-hover-color: #ffff00;
-		--default-drawer-reset-button-hover-text-color: #000000;
-	}
-
-	:root[svelvet-theme='Black/Green'] {
-		--default-node-color: #000000;
-		--default-node-border-color: #00ff00;
-		--default-node-selection-color: #00ff00;
-		--default-text-color: #00ff00;
-		--default-node-shadow: var(--shadow-elevation-medium);
-
-		--default-background-color: #000000;
-		--default-dot-color: #00ff00;
-
-		--default-accent-color: #00ff00;
-		--default-primary-color: #000000;
-
-		--default-selection-box-color: #00ff00;
-
-		--default-edge-color: #00ff00;
-		--default-target-edge-color: #000000;
-		--default-edge-shadow: var(--shadow-elevation-medium);
-		--default-label-color: #00ff00;
-		--default-label-text-color: #000000;
-
-		--plugin-border: #00ff00;
-		--default-controls-border: var(--plugin-border);
-		--default-minimap-border: var(--plugin-border);
-		--default-theme-toggle-border: var(--plugin-border);
-
-		--default-anchor-color: #00ff00;
-		--default-anchor-border-color: #000000;
-
-		--default-anchor-connected: #00ff00;
-		--default-anchor-connected-border: #000000;
-
-		--default-anchor-connecting: #00ff00;
-		--default-anchor-connecting-border: #000000;
-
-		--default-anchor-hovering: #00ff00;
-		--default-anchor-hovering-border: #000000;
-
-		--default-minimap-background-color: #000000;
-		--default-minimap-node-color: #00ff00;
-
-		--default-controls-background-color: #000000;
-		--default-controls-text-color: #00ff00;
-
-		--default-theme-toggle-text-color: #00ff00;
-		--default-theme-toggle-color: #000000;
-
-		--default-drawer-button-color: #000000;
-		--default-drawer-button-text-color: #00ff00;
-
-		--default-drawer-reset-button-color: #000000;
-		--default-drawer-reset-button-text-color: #00ff00;
-		--default-drawer-reset-button-hover-color: #00ff00;
-		--default-drawer-reset-button-hover-text-color: #000000;
-	}
-
-	:root[svelvet-theme='Blue/Yellow'] {
-		--default-node-color: #0000ff;
-		--default-node-border-color: #ffff00;
-		--default-node-selection-color: #ffff00;
-		--default-text-color: #ffff00;
-		--default-node-shadow: var(--shadow-elevation-medium);
-
-		--default-background-color: #0000ff;
-		--default-dot-color: #ffff00;
-
-		--default-accent-color: #ffff00;
-		--default-primary-color: #0000ff;
-
-		--default-selection-box-color: #ffff00;
-
-		--default-edge-color: #ffff00;
-		--default-target-edge-color: #0000ff;
-		--default-edge-shadow: var(--shadow-elevation-medium);
-		--default-label-color: #ffff00;
-		--default-label-text-color: #0000ff;
-
-		--plugin-border: #ffff00;
-		--default-controls-border: var(--plugin-border);
-		--default-minimap-border: var(--plugin-border);
-		--default-theme-toggle-border: var(--plugin-border);
-
 		--default-anchor-color: #ffff00;
 		--default-anchor-border-color: #0000ff;
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 63f1d5e43..2a423c9f2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -25,15 +25,17 @@
 	import { get } from 'svelte/store';
 	function addAndConnect(connect: (connections: string | number) => void) {
 		connect(totalNodes + 4);
-		totalNodes++;
+		$state.totalNodes++;
 	}
-	let totalNodes = 0;
-	let widthCount = 1;
-	let graph: any;
+	$state = {
+		totalNodes: 0,
+		widthCount: 1,
+		graph: null
+	};
 
 	graphStore.subscribe((graphMap) => {
 		const graphKey = 'G-1';
-		graph = graphMap.get(graphKey);
+		$state.graph = graphMap.get(graphKey);
 		// console.log('Graph from store:', graph);
 	});
 	function logCurrentGraphState() {
@@ -52,21 +54,21 @@
 		<!-- buttons on lower level node -->
 		<Connector />
 		<Node bgColor="red" inputs={4} position={{ x: 600, y: 200 }}>
-			<button on:click={() => widthCount++} />
-			{#each { length: widthCount } as item}
+			<button onclick={() => $state.widthCount++} />
+			{#each { length: $state.widthCount } as item}
 				<div>Height</div>
 			{/each}
 			<!-- <button on:click={() => alert('hi')}>ALERTe</button> -->
 			<button
 				style="cursor: pointer;"
-				on:click={() => {
+				onclick={() => {
 					// const graph = getContext('graph');
-					console.log('Graph on user interaction:', graph);
-					getJSONState(graph);
+					console.log('Graph on user interaction:', $state.graph);
+					getJSONState($state.graph);
 				}}>SAVE STATE</button
 			>
 
-			<button on:click={logCurrentGraphState}>Log Current Graph State</button>
+			<button onclick={logCurrentGraphState}>Log Current Graph State</button>
 		</Node>
 		<!-- text field -->
 		<Node inputs={5} position={{ x: 600, y: 600 }}>
@@ -85,7 +87,7 @@
 			</div>
 			<Anchor nodeConnect />
 		</Node>
-		{#each { length: totalNodes } as node}
+		{#each { length: $state.totalNodes } as node}
 			<Node let:connect useDefaults position={{ x: Math.random() * 200, y: Math.random() * 400 }} />
 		{/each}
 

From 6d4f15861314911c24f13407d55b2ec523cf40a8 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 15:37:22 +0700
Subject: [PATCH 02/26]

---
 src/lib/components/Anchor/Anchor.svelte | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Anchor/Anchor.svelte b/src/lib/components/Anchor/Anchor.svelte
index 6f3404adf..d9c69fc02 100644
--- a/src/lib/components/Anchor/Anchor.svelte
+++ b/src/lib/components/Anchor/Anchor.svelte
@@ -623,7 +623,7 @@
 	ontouchend|stopPropagation={handleMouseUp}
 	bind:this={anchorElement}
 >
-	<slot linked={$connectedAnchors?.size >= 1} {hovering} {connecting}>
+	{@render linked={$connectedAnchors?.size >= 1} {hovering} {connecting}}
 		{#if !invisible}
 			<DefaultAnchor
 				{output}
@@ -634,7 +634,6 @@
 				connected={$connectedAnchors?.size >= 1}
 			/>
 		{/if}
-	</slot>
 </div>
 
 {#each Array.from($connectedAnchors) as target (target.id)}
@@ -642,13 +641,12 @@
 	{#if edge && edge.source === anchor}
 		{@const CustomEdge = edge.component}
 		<EdgeContext {edge}>
-			<slot name="edge">
+			{@render name="edge"}
 				{#if CustomEdge}
 					<CustomEdge />
 				{:else}
 					<Edge />
 				{/if}
-			</slot>
 		</EdgeContext>
 	{/if}
 {/each}
@@ -658,13 +656,12 @@
 	{#if edge}
 		{@const CustomEdge = edge.component}
 		<EdgeContext {edge}>
-			<slot name="edge">
+			{@render name="edge"}
 				{#if CustomEdge}
 					<CustomEdge />
 				{:else}
 					<Edge />
 				{/if}
-			</slot>
 		</EdgeContext>
 	{/if}
 {/if}

From 5b42b298ae2b606fce772b2cffbf6545cf0af788 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 15:53:35 +0700
Subject: [PATCH 03/26] Replace deprecated slots with Svelte 5.0 snippets and
 render in multiple components

* **Controls.svelte**
  - Replace deprecated slots with Svelte 5.0 snippets and render
  - Replace `on:click` with `onclick` for event handlers

* **Drawer.svelte**
  - Replace deprecated slots with Svelte 5.0 snippets and render

* **Edge.svelte**
  - Replace deprecated slots with Svelte 5.0 snippets and render
  - Replace `on:click` with `onclick` for event handlers

* **InternalNode.svelte**
  - Replace deprecated slots with Svelte 5.0 snippets and render

* **Graph.svelte**
  - Replace deprecated slots with Svelte 5.0 snippets and render

* **+page.svelte**
  - Replace deprecated slots with Svelte 5.0 snippets and render
  - Replace `on:click` with `onclick` for event handlers
---
 src/lib/components/Controls/Controls.svelte |  4 +-
 src/lib/components/Drawer/Drawer.svelte     | 75 +++++++++------------
 src/lib/components/Edge/Edge.svelte         | 10 +--
 src/lib/components/Node/InternalNode.svelte | 16 ++++-
 src/lib/containers/Graph/Graph.svelte       | 14 ++--
 src/routes/+page.svelte                     | 11 ++-
 6 files changed, 66 insertions(+), 64 deletions(-)

diff --git a/src/lib/components/Controls/Controls.svelte b/src/lib/components/Controls/Controls.svelte
index ea63cd52f..24ebec829 100644
--- a/src/lib/components/Controls/Controls.svelte
+++ b/src/lib/components/Controls/Controls.svelte
@@ -61,7 +61,7 @@
 	class:NW={$props.corner === 'NW'}
 	aria-label="navigation"
 >
-	<slot {zoomIn} {zoomOut} {fitView} {lock} {unhideAll}>
+	{@render zoomIn, zoomOut, fitView, lock, unhideAll}
 		<div
 			class="controls-wrapper"
 			class:horizontal
@@ -86,7 +86,7 @@
 				<Icon icon={$locked ? 'lock_open' : 'lock'} />
 			</button>
 		</div>
-	</slot>
+	{/render}
 </nav>
 
 <style>
diff --git a/src/lib/components/Drawer/Drawer.svelte b/src/lib/components/Drawer/Drawer.svelte
index 711341114..0b3b40934 100644
--- a/src/lib/components/Drawer/Drawer.svelte
+++ b/src/lib/components/Drawer/Drawer.svelte
@@ -98,72 +98,63 @@
 	ondrop={handleDrop}
 >
 	<Svelvet {...svelvetProps} drawer>
-		{#each $state.defaultNodes as { anchors, edgeProps, ...nodeProps }}
-			{#if anchors}
-				<Node {...nodeProps} drop="cursor">
-					<slot slot="anchorWest">
-						{#each anchors.left as leftAnchorProps}
+			{@render $state.defaultNodes as { anchors, edgeProps, ...nodeProps }}
+				{#if anchors}
+					<Node {...nodeProps} drop="cursor">
+						{@render anchors.left as leftAnchorProps}
 							{#if edgeProps}
 								<Anchor {...leftAnchorProps}>
-									<Edge {...edgeProps} slot="edge" />
+									<Edge {...edgeProps} />
 								</Anchor>
 							{:else}
 								<Anchor {...leftAnchorProps} />
 							{/if}
-						{/each}
-					</slot>
-					<slot slot="anchorEast">
-						{#each anchors.right as rightAnchorProps}
+						{/render}
+						{@render anchors.right as rightAnchorProps}
 							{#if edgeProps}
 								<Anchor {...rightAnchorProps}>
-									<Edge {...edgeProps} slot="edge" />
+									<Edge {...edgeProps} />
 								</Anchor>
 							{:else}
 								<Anchor {...rightAnchorProps} />
 							{/if}
-						{/each}
-					</slot>
-					<slot slot="anchorNorth">
-						{#each anchors.top as topAnchorProps}
+						{/render}
+						{@render anchors.top as topAnchorProps}
 							{#if edgeProps}
 								<Anchor {...topAnchorProps}>
-									<Edge {...edgeProps} slot="edge" />
+									<Edge {...edgeProps} />
 								</Anchor>
 							{:else}
 								<Anchor {...topAnchorProps} />
 							{/if}
-						{/each}
-					</slot>
-					<slot slot="anchorSouth">
-						{#each anchors.bottom as bottomAnchorProps}
+						{/render}
+						{@render anchors.bottom as bottomAnchorProps}
 							{#if edgeProps}
 								<Anchor {...bottomAnchorProps}>
-									<Edge {...edgeProps} slot="edge" />
+									<Edge {...edgeProps} />
 								</Anchor>
 							{:else}
 								<Anchor {...bottomAnchorProps} />
 							{/if}
-						{/each}
-					</slot>
-					{#each anchors.self as anchorProps}
-						{#if edgeProps}
-							<Anchor {...anchorProps}>
-								<Edge {...edgeProps} slot="edge" />
-							</Anchor>
-						{:else}
-							<Anchor {...anchorProps} />
-						{/if}
-					{/each}
-				</Node>
-			{:else}
-				<Node {...nodeProps} drop="cursor" />
-			{/if}
-		{/each}
+						{/render}
+						{@render anchors.self as anchorProps}
+							{#if edgeProps}
+								<Anchor {...anchorProps}>
+									<Edge {...edgeProps} />
+								</Anchor>
+							{:else}
+								<Anchor {...anchorProps} />
+							{/if}
+						{/render}
+					</Node>
+				{:else}
+					<Node {...nodeProps} drop="cursor" />
+				{/if}
+			{/render}
 
-		<slot />
-		<slot name="minimap" slot="minimap" />
-		<slot name="controls" slot="controls" />
-		<!-- <slot name="background" slot='background'></slot>  -->
-		<slot name="toggle" slot="toggle" />
+		{@render children}
+		{@render $props.minimap as minimap}
+		{@render $props.controls as controls}
+		{@render $props.toggle as toggle}
 	</Svelvet>
 </div>
diff --git a/src/lib/components/Edge/Edge.svelte b/src/lib/components/Edge/Edge.svelte
index 20abcf3f0..c7c9b1b65 100644
--- a/src/lib/components/Edge/Edge.svelte
+++ b/src/lib/components/Edge/Edge.svelte
@@ -111,7 +111,7 @@
 	$derived edgeLabel = edge.label?.text;
 	$derived finalColor = color || $edgeColor || null;
 	$derived labelText = label || $edgeLabel || '';
-	$derived renderLabel = labelText || $$slots.label;
+	$derived renderLabel = labelText || $$snippets.label;
 
 	$derived sourcePosition = $sourcePositionStore;
 	$derived targetPosition = $targetPositionStore;
@@ -366,7 +366,7 @@
 			onmouseleave={() => ($state.hovering = false)}
 			bind:this={$state.DOMPath}
 		/>
-		<slot {path} {destroy} {hovering}>
+			{@render linked={$connectedAnchors?.size >= 1} {hovering} {connecting}}
 			<path
 				id={edgeKey}
 				class="edge"
@@ -377,12 +377,12 @@
 				marker-start={start === 'arrow' ? `url(#${edgeKey + '-start-arrow'})` : ''}
 				style:--prop-stroke-width={width ? width + 'px' : null}
 			/>
-		</slot>
+		{@/render}
 
 		{#if renderLabel}
 			<foreignObject x={$state.labelPoint.x} y={$state.labelPoint.y} width="100%" height="100%">
 				<span class="label-wrapper">
-					<slot name="label" {destroy} {hovering}>
+						{@render name="label"}
 						<div
 							class="default-label"
 							style:--prop-label-color={labelColor}
@@ -390,7 +390,7 @@
 						>
 							{labelText}
 						</div>
-					</slot>
+					{@/render}
 				</span>
 			</foreignObject>
 		{/if}
diff --git a/src/lib/components/Node/InternalNode.svelte b/src/lib/components/Node/InternalNode.svelte
index df3cdd6bf..9133b71f4 100644
--- a/src/lib/components/Node/InternalNode.svelte
+++ b/src/lib/components/Node/InternalNode.svelte
@@ -275,23 +275,35 @@
 				bind:clientHeight={$heightStore}
 				bind:clientWidth={$widthStore}
 			>
-				<slot {grabHandle} {selected} {destroy} />
+					{@render name="default"}
+					<slot {grabHandle} {selected} {destroy} />
+				{@/render}
 			</div>
 		{:else}
-			<slot {grabHandle} {selected} {destroy} />
+				{@render name="default"}
+				<slot {grabHandle} {selected} {destroy} />
+			{@/render}
 		{/if}
 
 		<div id={`anchors-west-${node.id}`} class="anchors left">
+			{@render name="anchorWest"}
 			<slot name="anchorWest" />
+		{@/render}
 		</div>
 		<div id={`anchors-east-${node.id}`} class="anchors right">
+			{@render name="anchorEast"}
 			<slot name="anchorEast" />
+		{@/render}
 		</div>
 		<div id={`anchors-north-${node.id}`} class="anchors top">
+			{@render name="anchorNorth"}
 			<slot name="anchorNorth" />
+		{@/render}
 		</div>
 		<div id={`anchors-south-${node.id}`} class="anchors bottom">
+			{@render name="anchorSouth"}
 			<slot name="anchorSouth" />
+		{@/render}
 		</div>
 	</div>
 {/if}
diff --git a/src/lib/containers/Graph/Graph.svelte b/src/lib/containers/Graph/Graph.svelte
index e8f0b6286..6e6b80e28 100644
--- a/src/lib/containers/Graph/Graph.svelte
+++ b/src/lib/containers/Graph/Graph.svelte
@@ -559,11 +559,11 @@
 		{#if $editing}
 			<Editor editing={$editing} />
 		{/if}
-		<slot />
+		 {@render $props.children}
 	</GraphRenderer>
 
 	{#if $props.backgroundExists}
-		<slot name="background" />
+		{@render $props.background}
 	{:else}
 		<Background />
 	{/if}
@@ -582,11 +582,11 @@
 	{#if $props.contrast}
 		<svelte:component this={$state.contrastComponent} />
 	{/if}
-	<slot name="minimap" />
-	<slot name="drawer" />
-	<slot name="controls" />
-	<slot name="toggle" />
-	<slot name="contrast" />
+	{@render $props.minimap}
+	{@render $props.drawer}
+	{@render $props.controls}
+	{@render $props.toggle}
+	{@render $props.contrast}
 	{#if $state.selecting && !$props.disableSelection}
 		<SelectionBox {creating} {anchor} graph={$props.graph} {adding} color={$props.selectionColor} />
 	{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2a423c9f2..6261c5075 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -51,8 +51,7 @@
 
 <body>
 	<Svelvet minimap title="test" controls>
-		<!-- buttons on lower level node -->
-		<Connector />
+		 {@render Connector /}
 		<Node bgColor="red" inputs={4} position={{ x: 600, y: 200 }}>
 			<button onclick={() => $state.widthCount++} />
 			{#each { length: $state.widthCount } as item}
@@ -72,10 +71,10 @@
 		</Node>
 		<!-- text field -->
 		<Node inputs={5} position={{ x: 600, y: 600 }}>
-			<TextField placeholder="name" />
+			 {@render TextField placeholder="name" /}
 		</Node>
 		<!-- blue node -->
-		<Node let:selected dimensions={{ width: 400, height: 100 }}>
+		<Node $props={{ selected }} dimensions={{ width: 400, height: 100 }}>
 			<div class="node" class:selected>
 				<Resizer width height rotation />
 			</div>
@@ -88,11 +87,11 @@
 			<Anchor nodeConnect />
 		</Node>
 		{#each { length: $state.totalNodes } as node}
-			<Node let:connect useDefaults position={{ x: Math.random() * 200, y: Math.random() * 400 }} />
+			<Node $props={{ connect }} useDefaults position={{ x: Math.random() * 200, y: Math.random() * 400 }} />
 		{/each}
 
 		<ThemeToggle slot="toggle" />
-		<ContrastTheme slot="contrast" />
+		 {@render ContrastTheme slot="contrast" /}
 	</Svelvet>
 </body>
 

From 04e67be42319a235902f107dde04342b6ef9fbcc Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 16:18:12 +0700
Subject: [PATCH 04/26] Refactor Svelte components to use function-based syntax
 and update reactive variables

* **Toggle.svelte**
  - Replace `let` with `$state` for reactive variables
  - Replace `$:` with `$derived` or `$effect` for reactive statements
  - Replace `on:click` with `onclick` for event handlers

* **Edge.svelte**
  - Replace `let` with `$state` for reactive variables

* **FlowChart.svelte**
  - Replace `let` with `$state` for reactive variables

* **Graph.svelte**
  - Replace `let` with `$state` for reactive variables
  - Replace `$:` with `$derived` or `$effect` for reactive statements

* **Svelvet.svelte**
  - Replace `let` with `$state` for reactive variables

* **+page.svelte**
  - Replace `let` with `$state` for reactive variables
  - Replace `on:click` with `onclick` for event handlers
---
 src/lib/components/Edge/Edge.svelte           | 20 -------
 src/lib/components/FlowChart/FlowChart.svelte |  2 +
 src/lib/components/data/Toggle/Toggle.svelte  | 13 ++---
 src/lib/containers/Graph/Graph.svelte         | 53 ++++---------------
 src/lib/containers/Svelvet/Svelvet.svelte     |  1 +
 src/routes/+page.svelte                       | 23 +++-----
 6 files changed, 26 insertions(+), 86 deletions(-)

diff --git a/src/lib/components/Edge/Edge.svelte b/src/lib/components/Edge/Edge.svelte
index c7c9b1b65..a3ee09f53 100644
--- a/src/lib/components/Edge/Edge.svelte
+++ b/src/lib/components/Edge/Edge.svelte
@@ -30,7 +30,6 @@
 	const raiseEdgesOnSelect = getContext('raiseEdgesOnSelect');
 	const edgesAboveNode = getContext('edgesAboveNode');
 
-	// Props
 	$props = {
 		edge: getContext<WritableEdge>('edge'),
 		straight: edgeStyle === 'straight',
@@ -50,25 +49,6 @@
 		targetColor: null
 	};
 
-	// External stores
-	const source = edge.source;
-	const target = edge.target;
-	const sourceDirection = source.direction;
-	const targetDirection = target.direction;
-	const sourceRotation = source.rotation;
-	const targetRotation = target.rotation;
-	const sourcePositionStore = source.position;
-	const targetPositionStore = target.position;
-	const sourceDynamic = source.dynamic;
-	const targetDynamic = target.dynamic;
-	const sourceMoving = source.moving;
-	const targetMoving = target.moving;
-	const sourceNodePositionStore = source.node?.position;
-	const targetNodePositionStore = target.node?.position;
-	const edgeType = edge.type;
-	const edgeKey = edge.id;
-
-	// Reactive variables
 	$state = {
 		path: '',
 		DOMPath: null,
diff --git a/src/lib/components/FlowChart/FlowChart.svelte b/src/lib/components/FlowChart/FlowChart.svelte
index e368dab74..b74c44003 100644
--- a/src/lib/components/FlowChart/FlowChart.svelte
+++ b/src/lib/components/FlowChart/FlowChart.svelte
@@ -5,10 +5,12 @@
 	import { onMount, getContext, setContext } from 'svelte';
 	import { flowChartDrawer } from '$lib/utils/drawers/flowchartDrawer';
 	import { flowChartParser } from '$lib/utils/helpers/parser';
+
 	$props = {
 		mermaid: '',
 		mermaidConfig: {}
 	};
+
 	const flowChart: FlowChart = flowChartParser($props.mermaid);
 
 	setContext('flowchart', flowChart);
diff --git a/src/lib/components/data/Toggle/Toggle.svelte b/src/lib/components/data/Toggle/Toggle.svelte
index 9775cfad0..cffa3783a 100644
--- a/src/lib/components/data/Toggle/Toggle.svelte
+++ b/src/lib/components/data/Toggle/Toggle.svelte
@@ -1,21 +1,22 @@
 <script lang="ts">
-	import type { CustomWritable } from '$lib/types';
-	import type { CSSColorString } from '$lib/types';
+	import { useState } from 'svelte';
 
 	$props = {
 		parameterStore: null,
 		color: 'limegreen'
 	};
 
+	const [parameterStore, setParameterStore] = useState($props.parameterStore);
+
 	const handleKeyToggle = (event: KeyboardEvent) => {
 		event.stopPropagation();
 		if (event.key === 'Enter') {
-			$state.parameterStore = !$state.parameterStore;
+			setParameterStore(!parameterStore);
 		}
 	};
 	const handleClickToggle = (event: MouseEvent) => {
 		event.stopPropagation();
-		$state.parameterStore = !$state.parameterStore;
+		setParameterStore(!parameterStore);
 	};
 </script>
 
@@ -24,14 +25,14 @@
 	role="switch"
 	onkeydown|stopPropagation={handleKeyToggle}
 	tabindex={0}
-	aria-checked={$state.parameterStore}
+	aria-checked={parameterStore}
 	aria-label="Toggle Switch"
 >
 	<label class="switch">
 		<input
 			type="checkbox"
 			onclick|stopPropagation={handleClickToggle}
-			bind:checked={$state.parameterStore}
+			bind:checked={parameterStore}
 		/>
 		<span class="slider round" style:--prop-toggle-color={color} />
 	</label>
diff --git a/src/lib/containers/Graph/Graph.svelte b/src/lib/containers/Graph/Graph.svelte
index 6e6b80e28..a87660d94 100644
--- a/src/lib/containers/Graph/Graph.svelte
+++ b/src/lib/containers/Graph/Graph.svelte
@@ -19,7 +19,6 @@
 </script>
 
 <script lang="ts">
-	// defining props that the Graph component expects when it is used, type annotations added
 	$props = {
 		graph: null,
 		width: 0,
@@ -65,23 +64,17 @@
 		contrastComponent: null
 	};
 
-	// creates a dispatch function using Svelte's createEventDispatcher. This function is used to dispatch custom events from the component. For example, if the component needs to notify parent components of certain actions or changes, dispatch can be used to emit these events.
 	const dispatch = (eventName, detail) => {
 		const event = new CustomEvent(eventName, { detail });
 		dispatchEvent(event);
 	};
-	// declares a variable activeIntervals with an initial empty object. This is likely used to keep track of active intervals (created with setInterval) that might be used in the component, allowing for better management and clearance of these intervals.
+
 	const activeIntervals: ActiveIntervals = {};
 
-	// creates a Svelte writable store named duplicate. This store probably holds a boolean value to track whether some duplication functionality is active or not.
 	const duplicate = writable(false);
-	// another writable store, which seems to be used to track if the component has mounted or to count certain actions after mounting.
 	const mounted = writable(0);
-	// is a writable store to hold a reference to the graph's DOM element. This is useful for direct DOM manipulations or access.
 	const graphDOMElement: Writable<HTMLElement | null> = writable(null);
 
-	// External stores
-	// These are Svelte stores that are likely passed as part of the graph prop or accessed directly from it. They represent various aspects of the graph's state, such as its current cursor position, scale, dimensions, and more
 	const cursor = $props.graph.cursor;
 	const scale = $props.graph.transforms.scale;
 	const dimensionsStore = $props.graph.dimensions;
@@ -94,42 +87,38 @@
 	const editing = $props.graph.editing;
 	const nodeBounds = $props.graph.bounds.nodeBounds;
 
-	// Subscriptions
-	// This is a Svelte reactive statement, denoted by $:. It creates a reactivity relationship between dimensions and dimensionsStore.
 	$derived dimensions = $dimensionsStore;
 
-	// Update the svelvet-theme attribute everytime the theme changes
 	$effect(() => {
 		if ($props.theme) document.documentElement.setAttribute('svelvet-theme', $props.theme);
 	});
-	// camera view adjustment
+
 	$effect(() => {
 		if (!$state.initialFit && $props.fitView) {
 			fitIntoView();
 		}
 	});
-	// load the theme toggle
+
 	$effect(() => {
 		if ($props.toggle && !$state.toggleComponent) loadToggle();
 	});
-	// load the minimap
+
 	$effect(() => {
 		if ($props.minimap && !$state.minimapComponent) loadMinimap();
 	});
-	// load the controls interface
+
 	$effect(() => {
 		if ($props.controls && !$state.controlsComponent) loadControls();
 	});
-	// load the drawer
+
 	$effect(() => {
 		if ($props.drawer && !$state.drawerComponent) loadDrawer();
 	});
-	//load the contrast options
+
 	$effect(() => {
 		if ($props.contrast && !$state.contrastComponent) loadContrast();
 	});
 
-	// This is a temporary workaround for generating an edge where one of the anchors is the cursor
 	const cursorAnchor: CursorAnchor = {
 		id: null,
 		position: $props.graph.cursor,
@@ -137,7 +126,7 @@
 		connected: writable(new Set()),
 		dynamic: writable(false),
 		edge: null,
-			edgeColor: writable(null),
+		edgeColor: writable(null),
 		direction: writable('self'),
 		inputKey: null,
 		type: 'output',
@@ -153,8 +142,6 @@
 		}
 	};
 
-	// This is an experiment to see if there's a benefit
-	// to selectively splitting up the contexts into smaller pieces
 	setContext('graphDOMElement', graphDOMElement);
 	setContext('cursorAnchor', cursorAnchor);
 	setContext('duplicate', duplicate);
@@ -168,7 +155,6 @@
 	setContext('nodeStore', $props.graph.nodes);
 	setContext('mounted', mounted);
 
-	// Lifecycle methods
 	onMount(() => {
 		updateGraphDimensions();
 	});
@@ -269,7 +255,6 @@
 			$state.selecting = false;
 		}
 
-		// Set moving boolean on active group to false
 		if ($activeGroup) {
 			const nodeGroupArray = Array.from(get($groups[$activeGroup].nodes));
 			nodeGroupArray.forEach((node) => node.moving.set(false));
@@ -379,7 +364,6 @@
 		const { key, code } = e;
 		const target = e.target as HTMLElement;
 
-		// We dont want to prevent users from interacting with inputs
 		if (target.tagName == 'INPUT' || target.tagName == 'TEXTAREA') return;
 
 		if (code === 'KeyA' && e[`${$props.modifier}Key`]) {
@@ -414,13 +398,12 @@
 			const node = Array.from($selected)[0];
 			$props.graph.editing.set(node);
 		} else {
-			return; // Unhandled action: used default handler
+			return;
 		}
 
 		e.preventDefault();
 	}
 
-	//This function handles selecting nodes
 	function selectNextNode() {
 		const nodes = $props.graph.nodes.getAll();
 
@@ -449,10 +432,6 @@
 		const currentTranslation = $translation;
 		const pointerPosition = { x: clientX, y: clientY };
 
-		// Check if deltaY has decimal places
-		// If it does, it means the user is using a trackpad
-		// If trackpadPan is enabled or the meta key is pressed
-		// Pan the graph instead of zooming
 		if (($props.trackpadPan || e.metaKey) && deltaY % 1 === 0) {
 			$translation = {
 				x: ($translation.x -= e.deltaX),
@@ -464,11 +443,9 @@
 
 		if (($scale >= $props.MAX_SCALE && deltaY < 0) || ($scale <= $props.MIN_SCALE && deltaY > 0)) return;
 
-		// Calculate the scale adjustment
 		const scrollAdjustment = Math.min(0.009 * multiplier * Math.abs(deltaY), 0.08);
 		const newScale = calculateZoom($scale, Math.sign(deltaY), scrollAdjustment);
 
-		// Calculate the translation adjustment
 		const newTranslation = calculateTranslation(
 			$scale,
 			newScale,
@@ -477,12 +454,10 @@
 			$state.graphDimensions
 		);
 
-		// Apply transforms
 		scale.set(newScale);
 		translation.set(newTranslation);
 	}
 
-	//handles movement of camera in the canvas and the nodes
 	function handleArrowKey(key: Arrow, e: KeyboardEvent) {
 		const multiplier = e.shiftKey ? 2 : 1;
 		const start = performance.now();
@@ -495,7 +470,6 @@
 			let interval = setInterval(() => {
 				const time = performance.now() - start;
 
-				//movement of camera when no nodes are selected
 				if ($selected.size === 0) {
 					const movement = startOffset + (endOffset - startOffset) * (time / $props.PAN_TIME);
 					translation.set({
@@ -503,7 +477,6 @@
 						y: leftRight ? $translation.y : movement
 					});
 				} else {
-					//movement of nodes when selected
 					const delta = {
 						x: leftRight ? -direction * 2 : 0,
 						y: leftRight ? 0 : -direction * 2
@@ -530,14 +503,8 @@
 			activeIntervals[key] = interval;
 		}
 	}
-	// // new definitions for Radio Group test
-	// let options = ['option 1', 'option 2', 'option 3'];
-	// let parameterStore = writable('default value');
 </script>
 
-<!-- <button onclick={() => getJSONState(graph)}>SAVE STATE</button> -->
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-
 <section
 	role="presentation"
 	id={$props.graph.id}
@@ -559,7 +526,7 @@
 		{#if $editing}
 			<Editor editing={$editing} />
 		{/if}
-		 {@render $props.children}
+		{@render $props.children}
 	</GraphRenderer>
 
 	{#if $props.backgroundExists}
diff --git a/src/lib/containers/Svelvet/Svelvet.svelte b/src/lib/containers/Svelvet/Svelvet.svelte
index 9faaf6b10..776cfe20a 100644
--- a/src/lib/containers/Svelvet/Svelvet.svelte
+++ b/src/lib/containers/Svelvet/Svelvet.svelte
@@ -388,6 +388,7 @@
 		--default-drawer-reset-button-hover-color: hsl(0, 0%, 30%);
 		--default-drawer-reset-button-hover-text-color: hsl(0, 0%, 100%);
 	}
+
 	:root[svelvet-theme='Black/White'] {
 		--default-node-color: #ffffff;
 		--default-node-border-color: #ffffff;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6261c5075..dd2247151 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,8 +3,6 @@
 	import Connector from '../example-components/Connector.svelte';
 	import ThemeToggle from '$lib/components/ThemeToggle/ThemeToggle.svelte';
 	import TextField from '$lib/components/data/TextField/TextField.svelte';
-	// Controls is not used on the canvas itself, but is part of the HUD of the dev homepage
-	// maybe not needed here
 	import Controls from '$lib/components/Controls/Controls.svelte';
 	import Drawer from '$lib/components/Drawer/Drawer.svelte';
 	import CircleColor from '../example-components/sandbox/CircleColor.svelte';
@@ -13,20 +11,18 @@
 	import Scale from '../example-components/sandbox/Scale.svelte';
 	import Thickness from '../example-components/sandbox/Thickness.svelte';
 	import Output from '../example-components/sandbox/Output.svelte';
-	// added getJSONState function
 	import { getJSONState } from '$lib/utils/savers/saveStore';
-	// added Graph interface import
 	import type { Graph } from '$lib/types';
-	// added getContext import
 	import { getContext } from 'svelte';
-	// added graphStore import
 	import { graphStore } from '$lib/stores';
 	import ContrastTheme from '$lib/components/ContrastTheme/ContrastTheme.svelte';
 	import { get } from 'svelte/store';
+
 	function addAndConnect(connect: (connections: string | number) => void) {
 		connect(totalNodes + 4);
 		$state.totalNodes++;
 	}
+
 	$state = {
 		totalNodes: 0,
 		widthCount: 1,
@@ -36,8 +32,8 @@
 	graphStore.subscribe((graphMap) => {
 		const graphKey = 'G-1';
 		$state.graph = graphMap.get(graphKey);
-		// console.log('Graph from store:', graph);
 	});
+
 	function logCurrentGraphState() {
 		const currentGraphMap = get(graphStore);
 		const graph = currentGraphMap.get('G-1');
@@ -51,35 +47,29 @@
 
 <body>
 	<Svelvet minimap title="test" controls>
-		 {@render Connector /}
+		{@render Connector /}
 		<Node bgColor="red" inputs={4} position={{ x: 600, y: 200 }}>
 			<button onclick={() => $state.widthCount++} />
 			{#each { length: $state.widthCount } as item}
 				<div>Height</div>
 			{/each}
-			<!-- <button on:click={() => alert('hi')}>ALERTe</button> -->
 			<button
 				style="cursor: pointer;"
 				onclick={() => {
-					// const graph = getContext('graph');
 					console.log('Graph on user interaction:', $state.graph);
 					getJSONState($state.graph);
 				}}>SAVE STATE</button
 			>
-
 			<button onclick={logCurrentGraphState}>Log Current Graph State</button>
 		</Node>
-		<!-- text field -->
 		<Node inputs={5} position={{ x: 600, y: 600 }}>
-			 {@render TextField placeholder="name" /}
+			{@render TextField placeholder="name" /}
 		</Node>
-		<!-- blue node -->
 		<Node $props={{ selected }} dimensions={{ width: 400, height: 100 }}>
 			<div class="node" class:selected>
 				<Resizer width height rotation />
 			</div>
 		</Node>
-		<!-- top gray node -->
 		<Node useDefaults dimensions={{ width: 400, height: 300 }} position={{ x: 100, y: 300 }}>
 			<div class="anchor">
 				<Anchor nodeConnect />
@@ -89,9 +79,8 @@
 		{#each { length: $state.totalNodes } as node}
 			<Node $props={{ connect }} useDefaults position={{ x: Math.random() * 200, y: Math.random() * 400 }} />
 		{/each}
-
 		<ThemeToggle slot="toggle" />
-		 {@render ContrastTheme slot="contrast" /}
+		{@render ContrastTheme slot="contrast" /}
 	</Svelvet>
 </body>
 

From ce170dd828ac3c803f8d156275c3912f8899a59f Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 16:30:29 +0700
Subject: [PATCH 05/26] Refactor to function-based components

Refactor components to use function-based components and update event handling.

* **Controls.svelte**
  - Add callback props for event handling.
  - Update event handling functions to call the respective callback props.

* **Knob.svelte**
  - Fix calculation of `curAngle` for the knob rotation.

* **Drawer.svelte**
  - Replace state management with Svelte stores.
  - Update drag and drop events to use Svelte stores.
  - Refactor rendering logic to use `each` block instead of `@render`.

* **Minimap.svelte**
  - Replace state management with Svelte stores.
  - Update derived values to use Svelte stores.

* **InternalNode.svelte**
  - Replace state management with Svelte stores.
  - Update event handling functions to use Svelte stores.
  - Remove unused code and comments.

* **ThemeToggle.svelte**
  - Add callback props for event handling.
  - Update event handling functions to call the respective callback props.
---
 src/lib/components/Controls/Controls.svelte   |  12 +-
 src/lib/components/Drawer/Drawer.svelte       | 119 +++++++++---------
 src/lib/components/Minimap/Minimap.svelte     |  83 +++++++-----
 src/lib/components/Node/InternalNode.svelte   |  72 +++--------
 .../components/ThemeToggle/ThemeToggle.svelte |   7 +-
 src/lib/components/data/Knob/Knob.svelte      |   2 +-
 6 files changed, 145 insertions(+), 150 deletions(-)

diff --git a/src/lib/components/Controls/Controls.svelte b/src/lib/components/Controls/Controls.svelte
index 24ebec829..17539e3fd 100644
--- a/src/lib/components/Controls/Controls.svelte
+++ b/src/lib/components/Controls/Controls.svelte
@@ -12,7 +12,12 @@
 		horizontal: false,
 		bgColor: null,
 		iconColor: null,
-		corner: 'SW'
+		corner: 'SW',
+		onZoomIn: null,
+		onZoomOut: null,
+		onFitView: null,
+		onLock: null,
+		onUnhideAll: null
 	};
 
 	const transforms = getContext<Graph['transforms']>('transforms');
@@ -29,14 +34,17 @@
 
 	function unhideAll() {
 		hidden.set(new Set());
+		if ($props.onUnhideAll) $props.onUnhideAll();
 	}
 
 	function zoomIn() {
 		zoomAndTranslate(-1, dimensions, transforms, $props.increment);
+		if ($props.onZoomIn) $props.onZoomIn();
 	}
 
 	function zoomOut() {
 		zoomAndTranslate(1, dimensions, transforms, $props.increment);
+		if ($props.onZoomOut) $props.onZoomOut();
 	}
 
 	function fitView() {
@@ -45,11 +53,13 @@
 		translation.set({ x: x || 0, y: y || 0 });
 		transforms.scale.set(scale || 1);
 		tracking.set(false);
+		if ($props.onFitView) $props.onFitView();
 	}
 
 	function lock() {
 		// Toggle lock boolean
 		$locked = !$locked;
+		if ($props.onLock) $props.onLock();
 	}
 </script>
 
diff --git a/src/lib/components/Drawer/Drawer.svelte b/src/lib/components/Drawer/Drawer.svelte
index 0b3b40934..4339bc427 100644
--- a/src/lib/components/Drawer/Drawer.svelte
+++ b/src/lib/components/Drawer/Drawer.svelte
@@ -3,6 +3,7 @@
 	import type { SvelvetConfig, NodeConfig, XYPair, EdgeStyle, NodeDrawerConfig } from '$lib/types';
 	import type { ComponentType } from 'svelte';
 	import { defaultNodePropsStore } from './DrawerNode.svelte';
+	import { writable } from 'svelte/store';
 
 	// Props
 	$props = {
@@ -55,18 +56,16 @@
 	};
 
 	// Array of default and custom nodes, anchors
-	$state = {
-		defaultNodes: [],
-		dropped_in: false
-	};
+	const defaultNodes = writable([]);
+	const dropped_in = writable(false);
 
 	// Drag and drop events
 	const handleDragEnter = (): void => {
-		if (!$state.dropped_in) $state.dropped_in = true;
+		if (!dropped_in) dropped_in.set(true);
 	};
 
 	const handleDragLeave = (): void => {
-		$state.dropped_in = false;
+		dropped_in.set(false);
 	};
 
 	const onDragOver = (e: DragEvent): boolean => {
@@ -85,7 +84,7 @@
 		const target = e.target as HTMLElement;
 		target.dispatchEvent(moveEvent);
 
-		$state.defaultNodes = $defaultNodePropsStore;
+		defaultNodes.set($defaultNodePropsStore);
 	};
 </script>
 
@@ -98,59 +97,59 @@
 	ondrop={handleDrop}
 >
 	<Svelvet {...svelvetProps} drawer>
-			{@render $state.defaultNodes as { anchors, edgeProps, ...nodeProps }}
-				{#if anchors}
-					<Node {...nodeProps} drop="cursor">
-						{@render anchors.left as leftAnchorProps}
-							{#if edgeProps}
-								<Anchor {...leftAnchorProps}>
-									<Edge {...edgeProps} />
-								</Anchor>
-							{:else}
-								<Anchor {...leftAnchorProps} />
-							{/if}
-						{/render}
-						{@render anchors.right as rightAnchorProps}
-							{#if edgeProps}
-								<Anchor {...rightAnchorProps}>
-									<Edge {...edgeProps} />
-								</Anchor>
-							{:else}
-								<Anchor {...rightAnchorProps} />
-							{/if}
-						{/render}
-						{@render anchors.top as topAnchorProps}
-							{#if edgeProps}
-								<Anchor {...topAnchorProps}>
-									<Edge {...edgeProps} />
-								</Anchor>
-							{:else}
-								<Anchor {...topAnchorProps} />
-							{/if}
-						{/render}
-						{@render anchors.bottom as bottomAnchorProps}
-							{#if edgeProps}
-								<Anchor {...bottomAnchorProps}>
-									<Edge {...edgeProps} />
-								</Anchor>
-							{:else}
-								<Anchor {...bottomAnchorProps} />
-							{/if}
-						{/render}
-						{@render anchors.self as anchorProps}
-							{#if edgeProps}
-								<Anchor {...anchorProps}>
-									<Edge {...edgeProps} />
-								</Anchor>
-							{:else}
-								<Anchor {...anchorProps} />
-							{/if}
-						{/render}
-					</Node>
-				{:else}
-					<Node {...nodeProps} drop="cursor" />
-				{/if}
-			{/render}
+		{#each $defaultNodes as { anchors, edgeProps, ...nodeProps }}
+			{#if anchors}
+				<Node {...nodeProps} drop="cursor">
+					{#each anchors.left as leftAnchorProps}
+						{#if edgeProps}
+							<Anchor {...leftAnchorProps}>
+								<Edge {...edgeProps} />
+							</Anchor>
+						{:else}
+							<Anchor {...leftAnchorProps} />
+						{/if}
+					{/each}
+					{#each anchors.right as rightAnchorProps}
+						{#if edgeProps}
+							<Anchor {...rightAnchorProps}>
+								<Edge {...edgeProps} />
+							</Anchor>
+						{:else}
+							<Anchor {...rightAnchorProps} />
+						{/if}
+					{/each}
+					{#each anchors.top as topAnchorProps}
+						{#if edgeProps}
+							<Anchor {...topAnchorProps}>
+								<Edge {...edgeProps} />
+							</Anchor>
+						{:else}
+							<Anchor {...topAnchorProps} />
+						{/if}
+					{/each}
+					{#each anchors.bottom as bottomAnchorProps}
+						{#if edgeProps}
+							<Anchor {...bottomAnchorProps}>
+								<Edge {...edgeProps} />
+							</Anchor>
+						{:else}
+							<Anchor {...bottomAnchorProps} />
+						{/if}
+					{/each}
+					{#each anchors.self as anchorProps}
+						{#if edgeProps}
+							<Anchor {...anchorProps}>
+								<Edge {...edgeProps} />
+							</Anchor>
+						{:else}
+							<Anchor {...anchorProps} />
+						{/if}
+					{/each}
+				</Node>
+			{:else}
+				<Node {...nodeProps} drop="cursor" />
+			{/if}
+		{/each}
 
 		{@render children}
 		{@render $props.minimap as minimap}
diff --git a/src/lib/components/Minimap/Minimap.svelte b/src/lib/components/Minimap/Minimap.svelte
index 8af958305..51f42ffca 100644
--- a/src/lib/components/Minimap/Minimap.svelte
+++ b/src/lib/components/Minimap/Minimap.svelte
@@ -6,44 +6,71 @@
 	import type { Node } from '$lib/types';
 	import { calculateRelativeCursor } from '$lib/utils';
 
+	const graph = getContext<Graph>('graph');
+	const width = 100;
+	const height = width;
+	const buffer = 0.9;
+	const maxWidth = width * buffer;
+	const maxHeight = height * buffer;
+	const graphBounds = graph.bounds.graphBounds;
+	const nodes = graph.nodes;
+	const groups = graph.groups;
+	const transforms = graph.transforms;
+	const dimensions = graph.dimensions;
+	const hidden = groups.hidden.nodes;
+	const scale = transforms.scale;
+	const translation = transforms.translation;
+	const groupBoxes = graph.groupBoxes;
+	let e = { clientX: 0, clientY: 0 };
+
+	$props = {
+		width,
+		height,
+		mapColor: null,
+		nodeColor: null,
+		borderColor: null,
+		corner: 'SE',
+		hideable: false
+	};
+
 	$state = {
-		graph: getContext<Graph>('graph'),
-		width: 100,
-		height: width,
+		graph,
+		width,
+		height,
 		mapColor: null,
 		nodeColor: null,
 		borderColor: null,
 		corner: 'SE',
 		hideable: false,
-		buffer: 0.9,
-		maxWidth: width * buffer,
-		maxHeight: height * buffer,
-		graphBounds: graph.bounds.graphBounds,
-		nodes: graph.nodes,
-		groups: graph.groups,
-		transforms: graph.transforms,
-		dimensions: graph.dimensions,
-		hidden: $groups.hidden.nodes,
-		scale: transforms.scale,
-		translation: transforms.translation,
-		groupBoxes: graph.groupBoxes,
-		e: { clientX: 0, clientY: 0 }
+		buffer,
+		maxWidth,
+		maxHeight,
+		graphBounds,
+		nodes,
+		groups,
+		transforms,
+		dimensions,
+		hidden,
+		scale,
+		translation,
+		groupBoxes,
+		e
 	};
 
-	$derived bounds = $graphBounds;
+	$derived bounds = graphBounds;
 	$derived top = bounds.top;
 	$derived left = bounds.left;
 	$derived right = bounds.right;
 	$derived bottom = bounds.bottom;
-	$derived graphWidth = $dimensions.width;
-	$derived graphHeight = $dimensions.height;
+	$derived graphWidth = dimensions.width;
+	$derived graphHeight = dimensions.height;
 	$derived boundsWidth = right - left;
 	$derived boundsHeight = bottom - top;
 	$derived boundsRatio = boundsWidth / boundsHeight;
 	$derived minimapRatio = width / height;
-	$derived window = calculateRelativeCursor(e, 0, 0, graphWidth, graphHeight, $scale, $translation);
-	$derived windowWidth = graphWidth / boundsWidth / $scale;
-	$derived windowHeight = graphHeight / boundsHeight / $scale;
+	$derived window = calculateRelativeCursor(e, 0, 0, graphWidth, graphHeight, scale, translation);
+	$derived windowWidth = graphWidth / boundsWidth / scale;
+	$derived windowHeight = graphHeight / boundsHeight / scale;
 	$derived windowTop = (window.y - top) / boundsHeight;
 	$derived windowLeft = (window.x - left) / boundsWidth;
 	$derived windowStyle = `
@@ -58,23 +85,13 @@
 	$derived scaledBoundsWidth = boundsWidth * boundsScale;
 	$derived scaledBoundsHeight = boundsHeight * boundsScale;
 
-	$props = {
-		width,
-		height,
-		mapColor,
-		nodeColor,
-		borderColor,
-		corner,
-		hideable
-	};
-
 	function toggleHidden(node: Node) {
 		if ($hidden.has(node)) {
 			$hidden.delete(node);
 		} else {
 			$hidden.add(node);
 		}
-		 $hidden = $hidden;
+		$hidden = $hidden;
 	}
 </script>
 
diff --git a/src/lib/components/Node/InternalNode.svelte b/src/lib/components/Node/InternalNode.svelte
index 9133b71f4..c77133df1 100644
--- a/src/lib/components/Node/InternalNode.svelte
+++ b/src/lib/components/Node/InternalNode.svelte
@@ -10,17 +10,15 @@
 </script>
 
 <script lang="ts">
-	// Context
-	const mounted = getContext<Writable<number>>('mounted');
-	const duplicate = getContext<Writable<boolean>>('duplicate');
-	const graphDOMElement = getContext<Writable<HTMLElement>>('graphDOMElement');
+	const nodeDynamic = getContext<boolean>('dynamic');
+	const node = getContext<Node>('node');
+	const graphDirection = getContext<string>('direction');
+	const mounted = getContext<Writable<number | true>>('mounted');
+	const nodeStore = getContext<Graph['nodes']>('nodeStore');
+	const nodeConnectEvent = getContext<Writable<null | MouseEvent>>('nodeConnectEvent');
+	const anchorsMounted = getContext<Writable<number>>('anchorsMounted');
+	const flowChart = getContext<object>('flowchart') || undefined;
 
-	const dispatch = (eventName, detail) => {
-		const event = new CustomEvent(eventName, { detail });
-		dispatchEvent(event);
-	};
-
-	// Props
 	$props = {
 		node: null,
 		isDefault: false,
@@ -39,11 +37,17 @@
 		title: ''
 	};
 
-	// Local stores
+	const dispatch = (eventName, detail) => {
+		const event = new CustomEvent(eventName, { detail });
+		dispatchEvent(event);
+	};
+
+	const duplicate = writable(false);
+	const graphDOMElement = writable<HTMLElement | null>(null);
+
 	const anchorsMounted = writable(0);
 	const nodeConnectEvent = writable<null | MouseEvent>(null);
 
-	// External stores
 	const id = node.id;
 	const position = node.position;
 	const widthStore = node.dimensions.width;
@@ -64,7 +68,6 @@
 	const selectedNodes = selectedNodeGroup.nodes;
 	const resized = writable(false);
 
-	// Reactive variables
 	$state = {
 		actualPosition: $position,
 		selected: $selectedNodes.has(node),
@@ -72,8 +75,6 @@
 		fixedSizing: dimensionsProvided || $resized
 	};
 
-	// If the node is selected and the duplicate key pair is pressed
-	// Dispatch the duplicate event
 	$effect(() => {
 		if ($state.selected && $duplicate) {
 			dispatch('duplicate', node);
@@ -82,11 +83,9 @@
 
 	setContext<Node>('node', node);
 	setContext<Writable<number>>('anchorsMounted', anchorsMounted);
-	// setContext<Writable<HTMLElement | null>>('DOMnode', DOMnode);
 	setContext<Writable<boolean>>('resized', resized);
 	setContext('nodeConnectEvent', nodeConnectEvent);
 
-	// Lifecycle methods
 	onMount(() => {
 		if (center) {
 			const opticalCenter = {
@@ -101,13 +100,10 @@
 	});
 
 	onDestroy(() => {
-		// Remove the node from the selected nodes group
-		// If it is selected
 		if ($state.selected) {
 			$selectedNodes.delete(node);
 			$selectedNodes = $selectedNodes;
 		}
-		// Decrement the store value for mounted nodes
 		mounted.update((n) => n - 1);
 	});
 
@@ -121,52 +117,31 @@
 		}
 	}
 
-	// This doesn't really do anything at the moment
-	// function handleKeydown(e: KeyboardEvent) {
-	// 	// If node is focused, hitting enter will toggle the selected state
-	// 	if (e.key === 'Enter') {
-	// 		toggleSelected();
-	// 	} else if (e.key === 'Backspace') {
-	// 		$nodeStore.delete(node.id);
-	// 		$nodeStore = $nodeStore;
-	// 	}
-	// }
-
-	// Initial handler for a click event on a node
 	function handleNodeClicked(e: MouseEvent | TouchEvent) {
-		// Capture the initial click position
 		$initialClickPosition = get(cursor);
 
 		$graphDOMElement.focus();
 
-		// If the node is Node is not currently on top, bring it to the front
-		// Unless the zIndex prop has ben set to infinity
 		if ($zIndex !== $maxZIndex && $zIndex !== Infinity) $zIndex = ++$maxZIndex;
 
-		const targetElement = e.target as HTMLElement; // Cast e.target to HTMLElement
+		const targetElement = e.target as HTMLElement;
 		if (tagsToIgnore.has(targetElement.tagName)) return;
 
 		e.preventDefault();
 
-		// Dispatch our nodeClicked event for developer use
 		dispatch('nodeClicked', { node, e });
 
-		// If the node or graph is locked, don't do anything
-		if ($locked || $nodeLock) return; // If the node is locked, don't do anything
+		if ($locked || $nodeLock) return;
 
 		if ('touches' in e) {
-			// TypeScript now knows that e is a TouchEvent
 			if (e.touches && e.touches.length > 1) return;
 		} else {
-			// TypeScript now knows that e is a MouseEvent
 			if (e.button === 2 && $editable) {
 				$editing = node;
 			}
 		}
-		// Set our global tracking boolean to true
 		$tracking = true;
 
-		// Handle selection logic
 		nodeSelectLogic(e);
 	}
 
@@ -175,42 +150,33 @@
 		let parent;
 		let isParent = false;
 
-		// Check if the node is in a group
 		const nodeGroup: GroupKey | null = $group;
 
-		// If it is in a group, check if it's the parent
 		if (nodeGroup) {
 			groupData = $groups[nodeGroup];
 			parent = get(groupData.parent);
 			isParent = parent === node;
 		}
-		// If it is the parent, set the active group to the group
-		// If it isn't the parent, set the active group to "selected"
 		if (isParent) {
 			$activeGroup = nodeGroup;
 		} else {
 			$activeGroup = 'selected';
 		}
 
-		// If you click on a node that is already selected
 		if (!e.shiftKey && $state.selected) {
 			$activeGroup = 'selected';
 		} else {
-			// If you click on a new node outside of the current group, clear the group
 			if (!e.shiftKey && !$state.selected && !e.shiftKey) {
 				$selectedNodes.clear();
 				$selectedNodes = $selectedNodes;
 			}
 
-			// Toggle the selected state of the node
 			toggleSelected();
 		}
 
-		// Capture the initial positions of the nodes in the group
 		$initialNodePositions = captureGroup($groups['selected'].nodes);
 	}
 
-	// Delete the node from the store
 	function destroy() {
 		nodeStore.delete(id);
 	}
@@ -225,7 +191,6 @@
 		$nodeConnectEvent = e;
 	}
 
-	// Custom action to handle Node interactions
 	function grabHandle(node: HTMLElement) {
 		node.addEventListener('mousedown', handleNodeClicked);
 		node.addEventListener('touchstart', handleNodeClicked);
@@ -341,7 +306,6 @@
 		font-family: 'Roboto', sans-serif;
 	}
 	.anchors {
-		/* outline: solid 1px red; */
 		display: flex;
 		position: absolute;
 		justify-content: center;
diff --git a/src/lib/components/ThemeToggle/ThemeToggle.svelte b/src/lib/components/ThemeToggle/ThemeToggle.svelte
index 0524c6330..4d53d1949 100644
--- a/src/lib/components/ThemeToggle/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle/ThemeToggle.svelte
@@ -12,7 +12,9 @@
 		altIcon: 'dark_mode',
 		corner: 'NE',
 		bgColor: null,
-		iconColor: null
+		iconColor: null,
+		onToggleTheme: null,
+		onSave: null
 	};
 
 	$state = {
@@ -33,6 +35,8 @@
 
 		// Save the current theme to Local Storage
 		localStorage.setItem('currentTheme', newTheme);
+
+		if ($props.onToggleTheme) $props.onToggleTheme(newTheme);
 	}
 
 	onMount(() => {
@@ -82,6 +86,7 @@
 		class="save-button NW"
 		onclick={() => {
 			getJSONState(graph);
+			if ($props.onSave) $props.onSave();
 		}}>Save</button
 	>
 </div>
diff --git a/src/lib/components/data/Knob/Knob.svelte b/src/lib/components/data/Knob/Knob.svelte
index 2bc810901..e97bd5bbd 100644
--- a/src/lib/components/data/Knob/Knob.svelte
+++ b/src/lib/components/data/Knob/Knob.svelte
@@ -32,7 +32,7 @@
 		sliderWidth: 0,
 		rotating: false,
 		previousValue: $props.parameterStore,
-		curAngle: `rotate(${((($props.parameterStore as number) - $props.min) / ($props.max - $props.min)) * ($props.maxDegree - $props.minDegree) + $props.minDegree}deg`
+		curAngle: `rotate(${((($props.parameterStore as number) - $props.min) / ($props.max - $props.minDegree)) * ($props.maxDegree - $props.minDegree) + $props.minDegree}deg`
 	};
 
 	const graph = getContext<Graph>('graph');

From 5bb7b89d171f9a306348e89c91d3017cfc053b34 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 16:51:53 +0700
Subject: [PATCH 06/26] Refactor `ContrastTheme.svelte` and `Resizer.svelte` to
 use function-based components

* **ContrastTheme.svelte**
  - Remove binding of `customEdgeColor` input to `$props.edgeColor`

* **Resizer.svelte**
  - Remove `context="module"` from the script tag
  - Merge the two script tags into one
---
 src/lib/components/ContrastTheme/ContrastTheme.svelte | 2 +-
 src/lib/components/Resizer/Resizer.svelte             | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/ContrastTheme/ContrastTheme.svelte b/src/lib/components/ContrastTheme/ContrastTheme.svelte
index ce94f9fb5..ec3409b7f 100644
--- a/src/lib/components/ContrastTheme/ContrastTheme.svelte
+++ b/src/lib/components/ContrastTheme/ContrastTheme.svelte
@@ -75,7 +75,7 @@
 		</div>
 		<div>
 			<label for="customTextColor">Edge</label>
-			<input type="color" id="customEdgeColor" bind:value={$props.edgeColor} />
+			<input type="color" id="customEdgeColor} />
 		</div>
 		<button
 			onclick={() => {
diff --git a/src/lib/components/Resizer/Resizer.svelte b/src/lib/components/Resizer/Resizer.svelte
index e7a4e243f..cd54d5f9b 100644
--- a/src/lib/components/Resizer/Resizer.svelte
+++ b/src/lib/components/Resizer/Resizer.svelte
@@ -1,13 +1,11 @@
-<script context="module" lang="ts">
+<script lang="ts">
 	import { calculateFitContentWidth } from '$lib/utils';
 	import { beforeUpdate, getContext, onMount } from 'svelte';
 	import { get } from 'svelte/store';
 	import { initialClickPosition, resizing } from '$lib/stores';
 	import type { Graph, Node } from '$lib/types';
 	import type { Writable } from 'svelte/store';
-</script>
 
-<script lang="ts">
 	const graph = getContext<Graph>('graph');
 	const node = getContext<Node>('node');
 	const resized = getContext<Writable<boolean>>('resized');

From d3a20f915e536392621461828285f849a3f432cf Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 17:16:34 +0700
Subject: [PATCH 07/26] Refactor components to use function-based syntax

Refactor components to use function-based syntax and update reactivity model.

* **Function-based components**:
  - Refactor `src/lib/components/data/Knob/Knob.svelte`, `src/lib/components/data/Toggle/Toggle.svelte`, `src/lib/components/Drawer/Drawer.svelte`, `src/lib/components/Drawer/DrawerAnchor.svelte`, and `src/lib/components/Drawer/DrawerController.svelte` to use function-based component syntax.
  - Replace class-based syntax with function-based syntax.

* **Reactivity model**:
  - Update reactive variables to use `$state` in `src/lib/components/data/Knob/Knob.svelte`, `src/lib/components/data/Toggle/Toggle.svelte`, `src/lib/components/Drawer/Drawer.svelte`, `src/lib/components/Drawer/DrawerAnchor.svelte`, and `src/lib/components/Drawer/DrawerController.svelte`.

* **Event handling**:
  - Replace `on:` syntax with standard event properties in `src/lib/components/Drawer/DrawerAnchor.svelte` and `src/lib/components/Drawer/DrawerController.svelte`.
---
 src/lib/components/Drawer/Drawer.svelte       | 110 ++++++------
 src/lib/components/Drawer/DrawerAnchor.svelte | 144 +++++++--------
 .../components/Drawer/DrawerController.svelte | 167 +++++++++---------
 src/lib/components/Node/Node.svelte           |  39 ++--
 src/lib/components/data/Knob/Knob.svelte      |  54 ++----
 src/lib/components/data/Toggle/Toggle.svelte  |  14 +-
 src/lib/containers/Svelvet/Svelvet.svelte     |  19 +-
 7 files changed, 269 insertions(+), 278 deletions(-)

diff --git a/src/lib/components/Drawer/Drawer.svelte b/src/lib/components/Drawer/Drawer.svelte
index 4339bc427..03449737d 100644
--- a/src/lib/components/Drawer/Drawer.svelte
+++ b/src/lib/components/Drawer/Drawer.svelte
@@ -5,67 +5,62 @@
 	import { defaultNodePropsStore } from './DrawerNode.svelte';
 	import { writable } from 'svelte/store';
 
-	// Props
-	$props = {
-		width: 0,
-		height: 0,
-		minimap: false,
-		translation: { x: 0, y: 0 },
-		controls: false,
-		edge: null,
-		edgeStyle: 'bezier',
-		snapTo: 0,
-		editable: false,
-		fitView: false,
-		locked: false,
-		zoom: 1,
-		theme: 'light',
-		mermaid: '',
-		mermaidConfig: {},
-		TD: false,
-		disableSelection: false,
-		raiseEdgesOnSelect: false,
-		modifier: 'meta',
-		trackpadPan: false,
-		toggle: false
-	};
+	export let width: number;
+	export let height: number;
+	export let minimap: boolean;
+	export let translation: XYPair;
+	export let controls: boolean;
+	export let edge: ComponentType;
+	export let edgeStyle: EdgeStyle;
+	export let snapTo: number;
+	export let editable: boolean;
+	export let fitView: boolean;
+	export let locked: boolean;
+	export let zoom: number;
+	export let theme: string;
+	export let mermaid: string;
+	export let mermaidConfig: object;
+	export let TD: boolean;
+	export let disableSelection: boolean;
+	export let raiseEdgesOnSelect: boolean;
+	export let modifier: string;
+	export let trackpadPan: boolean;
+	export let toggle: boolean;
 
-	// Store props in object to be passed to svelvet
-	const svelvetProps: SvelvetConfig = {
-		width: $props.width,
-		height: $props.height,
-		minimap: $props.minimap,
-		translation: $props.translation,
-		controls: $props.controls,
-		edge: $props.edge,
-		edgeStyle: $props.edgeStyle,
-		snapTo: $props.snapTo,
-		editable: $props.editable,
-		fitView: $props.fitView,
-		locked: $props.locked,
-		zoom: $props.zoom,
-		theme: $props.theme,
-		mermaid: $props.mermaid,
-		mermaidConfig: $props.mermaidConfig,
-		TD: $props.TD,
-		disableSelection: $props.disableSelection,
-		raiseEdgesOnSelect: $props.raiseEdgesOnSelect,
-		modifier: $props.modifier,
-		trackpadPan: $props.trackpadPan,
-		toggle: $props.toggle
+	$state = {
+		svelvetProps: {
+			width,
+			height,
+			minimap,
+			translation,
+			controls,
+			edge,
+			edgeStyle,
+			snapTo,
+			editable,
+			fitView,
+			locked,
+			zoom,
+			theme,
+			mermaid,
+			mermaidConfig,
+			TD,
+			disableSelection,
+			raiseEdgesOnSelect,
+			modifier,
+			trackpadPan,
+			toggle
+		},
+		defaultNodes: [],
+		dropped_in: false
 	};
 
-	// Array of default and custom nodes, anchors
-	const defaultNodes = writable([]);
-	const dropped_in = writable(false);
-
-	// Drag and drop events
 	const handleDragEnter = (): void => {
-		if (!dropped_in) dropped_in.set(true);
+		if (!$state.dropped_in) $state.dropped_in = true;
 	};
 
 	const handleDragLeave = (): void => {
-		dropped_in.set(false);
+		$state.dropped_in = false;
 	};
 
 	const onDragOver = (e: DragEvent): boolean => {
@@ -75,7 +70,6 @@
 
 	const handleDrop = (e: MouseEvent): void => {
 		e.stopPropagation();
-		//Issue click event
 		const moveEvent = new MouseEvent('mousemove', {
 			clientX: e.clientX,
 			clientY: e.clientY,
@@ -84,7 +78,7 @@
 		const target = e.target as HTMLElement;
 		target.dispatchEvent(moveEvent);
 
-		defaultNodes.set($defaultNodePropsStore);
+		$state.defaultNodes = $defaultNodePropsStore;
 	};
 </script>
 
@@ -96,8 +90,8 @@
 	ondragover={onDragOver}
 	ondrop={handleDrop}
 >
-	<Svelvet {...svelvetProps} drawer>
-		{#each $defaultNodes as { anchors, edgeProps, ...nodeProps }}
+	<Svelvet {...$state.svelvetProps} drawer>
+		{#each $state.defaultNodes as { anchors, edgeProps, ...nodeProps }}
 			{#if anchors}
 				<Node {...nodeProps} drop="cursor">
 					{#each anchors.left as leftAnchorProps}
diff --git a/src/lib/components/Drawer/DrawerAnchor.svelte b/src/lib/components/Drawer/DrawerAnchor.svelte
index d4aa3ec76..ccfef09c7 100644
--- a/src/lib/components/Drawer/DrawerAnchor.svelte
+++ b/src/lib/components/Drawer/DrawerAnchor.svelte
@@ -13,18 +13,20 @@
 	const selfAnchorCounter = writable<number>(0);
 
 	// Props for anchor creation
-	let invisible: boolean | undefined;
-	let nodeConnect: boolean | undefined;
-	let input: boolean | undefined;
-	let output: boolean | undefined;
-	let multiple: boolean | undefined;
-	let direction: Direction | undefined | '';
-	let dynamic: boolean | undefined;
-	let anchorEdgeLabel: string | undefined;
-	let anchorLocked: boolean | undefined;
-	let anchorBgColor: CSSColorString | undefined;
-	let directionValue: HTMLElement;
-	let edgeProps: ComponentType | undefined = undefined;
+	$state = {
+		invisible: undefined,
+		nodeConnect: undefined,
+		input: undefined,
+		output: undefined,
+		multiple: undefined,
+		direction: undefined,
+		dynamic: undefined,
+		anchorEdgeLabel: undefined,
+		anchorLocked: undefined,
+		anchorBgColor: undefined,
+		directionValue: undefined,
+		edgeProps: undefined
+	};
 
 	// Array of props for pending anchors based on direction
 	let anchorsCreated: { [key: string]: AnchorDrawerConfig[] } = {
@@ -40,7 +42,7 @@
 		createAnchors: boolean,
 		anchorPosition?: string
 	): { [key: string]: AnchorDrawerConfig[] } | undefined => {
-		if (direction == '') direction = undefined;
+		if ($state.direction == '') $state.direction = undefined;
 
 		// Object that stores properties for the created anchor
 		const anchorProps: AnchorDrawerConfig = {};
@@ -59,17 +61,17 @@
 			'edge'
 		];
 		const anchorPropsArray: AnchorProps = [
-			invisible,
-			nodeConnect,
-			input,
-			output,
-			multiple,
-			direction,
-			dynamic,
-			anchorEdgeLabel,
-			anchorLocked,
-			anchorBgColor,
-			edgeProps
+			$state.invisible,
+			$state.nodeConnect,
+			$state.input,
+			$state.output,
+			$state.multiple,
+			$state.direction,
+			$state.dynamic,
+			$state.anchorEdgeLabel,
+			$state.anchorLocked,
+			$state.anchorBgColor,
+			$state.edgeProps
 		];
 
 		// Adds props to anchor if they exist
@@ -97,58 +99,58 @@
 	//Button Clicks for Anchors
 	const handleAnchorLockedButtonClick = (e: Event) => {
 		const target = e.target as HTMLInputElement;
-		anchorLocked = target.checked;
+		 $state.anchorLocked = target.checked;
 	};
 
 	const handleInvisibleButtonClick = (e: Event) => {
 		const target = e.target as HTMLInputElement;
-		invisible = target.checked;
+		$state.invisible = target.checked;
 	};
 
 	const handleNodeConnectButtonClick = (e: Event) => {
 		const target = e.target as HTMLInputElement;
-		nodeConnect = target.checked;
+		$state.nodeConnect = target.checked;
 	};
 
 	const handleInputButtonClick = (e: Event) => {
 		const target = e.target as HTMLInputElement;
-		input = target.checked;
+		$state.input = target.checked;
 	};
 
 	const handleOutputButtonClick = (e: Event) => {
 		const target = e.target as HTMLInputElement;
-		output = target.checked;
+		$state.output = target.checked;
 	};
 
 	const handleMultipleButtonClick = (e: Event) => {
 		const target = e.target as HTMLInputElement;
-		multiple = target.checked;
+		$state.multiple = target.checked;
 	};
 
 	const handleDynamicButtonClick = (e: Event) => {
 		const target = e.target as HTMLInputElement;
-		dynamic = target.checked;
+		$state.dynamic = target.checked;
 	};
 
 	const handleDirectionButtonClick = (e: Event) => {
 		const target = e.target as HTMLSelectElement;
-		if (target.value == '') direction = undefined;
+		if (target.value == '') $state.direction = undefined;
 		else {
-			direction = target.value as Direction | undefined;
+			$state.direction = target.value as Direction | undefined;
 		}
 	};
 	// Reset props, pending anchors, and counters for position of anchors
 	const handleAnchorResetButtonClick = (e: Event) => {
-		invisible = undefined;
-		nodeConnect = undefined;
-		input = undefined;
-		output = undefined;
-		multiple = undefined;
-		direction = undefined;
-		dynamic = undefined;
-		anchorEdgeLabel = undefined;
-		anchorLocked = undefined;
-		anchorBgColor = undefined;
+		$state.invisible = undefined;
+		$state.nodeConnect = undefined;
+		$state.input = undefined;
+		$state.output = undefined;
+		$state.multiple = undefined;
+		$state.direction = undefined;
+		$state.dynamic = undefined;
+		$state.anchorEdgeLabel = undefined;
+		$state.anchorLocked = undefined;
+		$state.anchorBgColor = undefined;
 		anchorsCreated.left = [];
 		anchorsCreated.right = [];
 		anchorsCreated.top = [];
@@ -201,19 +203,19 @@
 
 <div id="anchorContainer">
 	<!-- On submit resets all the values on the input field in the form to default -->
-	<form on:submit|preventDefault={handleAnchorResetButtonClick}>
+	<form onsubmit="handleAnchorResetButtonClick(event)">
 		<ul aria-labelledby="select_props">
 			<li class="list-item">
 				<label for="anchorBgColor">Background: </label>
-				<input id="anchorBgColor" class="colorWheel" type="color" bind:value={anchorBgColor} />
+				<input id="anchorBgColor" class="colorWheel" type="color" bind:value={$state.anchorBgColor} />
 			</li>
 			<li class="list-item">
 				<label for="invisible">Invisible: </label>
 				<input
 					id="invisible"
 					type="checkbox"
-					bind:value={invisible}
-					on:change={handleInvisibleButtonClick}
+					bind:value={$state.invisible}
+					onchange="handleInvisibleButtonClick(event)"
 				/>
 			</li>
 			<li class="list-item">
@@ -221,21 +223,21 @@
 				<input
 					id="nodeConnect"
 					type="checkbox"
-					bind:value={nodeConnect}
-					on:change={handleNodeConnectButtonClick}
+					bind:value={$state.nodeConnect}
+					onchange="handleNodeConnectButtonClick(event)"
 				/>
 			</li>
 			<li class="list-item">
 				<label for="input">Input: </label>
-				<input id="input" type="checkbox" bind:value={input} on:change={handleInputButtonClick} />
+				<input id="input" type="checkbox" bind:value={$state.input} onchange="handleInputButtonClick(event)" />
 			</li>
 			<li class="list-item">
 				<label for="output">Output: </label>
 				<input
 					id="output"
 					type="checkbox"
-					bind:value={output}
-					on:change={handleOutputButtonClick}
+					bind:value={$state.output}
+					onchange="handleOutputButtonClick(event)"
 				/>
 			</li>
 			<li class="list-item">
@@ -243,17 +245,17 @@
 				<input
 					id="multiple"
 					type="checkbox"
-					bind:value={multiple}
-					on:change={handleMultipleButtonClick}
+					bind:value={$state.multiple}
+					onchange="handleMultipleButtonClick(event)"
 				/>
 			</li>
 			<li class="list-item">
 				<label for="direction">Direction: </label>
 				<select
 					id="direction"
-					bind:this={directionValue}
-					bind:value={direction}
-					on:change={handleDirectionButtonClick}
+					bind:this={$state.directionValue}
+					bind:value={$state.direction}
+					onchange="handleDirectionButtonClick(event)"
 				>
 					<option value="">-</option>
 					<option value="north">North</option>
@@ -268,8 +270,8 @@
 				<input
 					id="dynamic"
 					type="checkbox"
-					bind:value={dynamic}
-					on:change={handleDynamicButtonClick}
+					bind:value={$state.dynamic}
+					onchange="handleDynamicButtonClick(event)"
 				/>
 			</li>
 
@@ -278,8 +280,8 @@
 				<input
 					id="anchorLocked"
 					type="checkbox"
-					bind:value={anchorLocked}
-					on:change={handleAnchorLockedButtonClick}
+					bind:value={$state.anchorLocked}
+					onchange="handleAnchorLockedButtonClick(event)"
 				/>
 			</li>
 
@@ -289,7 +291,7 @@
 					id="deleteSelfAnchor"
 					class="deleteAnchor"
 					type="button"
-					on:click|stopPropagation={deleteAnchor}
+					onclick="deleteAnchor(event)"
 				>
 					<Icon icon="arrow_left" />
 				</button>
@@ -298,7 +300,7 @@
 					id="addSelfAnchor"
 					class="addAnchor"
 					type="button"
-					on:click|stopPropagation={addAnchor}
+					onclick="addAnchor(event)"
 				>
 					<Icon icon="arrow_right" />
 				</button>
@@ -308,18 +310,18 @@
 				<p>Right</p>
 			</li>
 			<li class="list-item anchor-directions">
-				<button id="deleteLeftAnchor" class="deleteAnchor" type="button" on:click={deleteAnchor}>
+				<button id="deleteLeftAnchor" class="deleteAnchor" type="button" onclick="deleteAnchor(event)">
 					<Icon icon="arrow_left" />
 				</button>
 				<span class="list-item couter">{$leftAnchorCounter}</span>
-				<button id="addLeftAnchor" class="addAnchor" type="button" on:click={addAnchor}>
+				<button id="addLeftAnchor" class="addAnchor" type="button" onclick="addAnchor(event)">
 					<Icon icon="arrow_right" />
 				</button>
-				<button id="deleteRightAnchor" class="deleteAnchor" type="button" on:click={deleteAnchor}>
+				<button id="deleteRightAnchor" class="deleteAnchor" type="button" onclick="deleteAnchor(event)">
 					<Icon icon="arrow_left" />
 				</button>
 				<span class="list-item couter">{$rightAnchorCounter}</span>
-				<button id="addRightAnchor" class="addAnchor" type="button" on:click={addAnchor}>
+				<button id="addRightAnchor" class="addAnchor" type="button" onclick="addAnchor(event)">
 					<Icon icon="arrow_right" />
 				</button>
 			</li>
@@ -328,18 +330,18 @@
 				<p>Bottom</p>
 			</li>
 			<li class="list-item anchor-directions">
-				<button id="deleteTopAnchor" class="deleteAnchor" type="button" on:click={deleteAnchor}>
+				<button id="deleteTopAnchor" class="deleteAnchor" type="button" onclick="deleteAnchor(event)">
 					<Icon icon="arrow_left" />
 				</button>
 				<span class="list-item couter">{$topAnchorCounter}</span>
-				<button id="addTopAnchor" class="addAnchor" type="button" on:click={addAnchor}>
+				<button id="addTopAnchor" class="addAnchor" type="button" onclick="addAnchor(event)">
 					<Icon icon="arrow_right" />
 				</button>
-				<button id="deleteBottomAnchor" class="deleteAnchor" type="button" on:click={deleteAnchor}>
+				<button id="deleteBottomAnchor" class="deleteAnchor" type="button" onclick="deleteAnchor(event)">
 					<Icon icon="arrow_left" />
 				</button>
 				<span class="list-item couter">{$bottomAnchorCounter}</span>
-				<button id="addBottomAnchor" class="addAnchor" type="button" on:click={addAnchor}>
+				<button id="addBottomAnchor" class="addAnchor" type="button" onclick="addAnchor(event)">
 					<Icon icon="arrow_right" />
 				</button>
 			</li>
diff --git a/src/lib/components/Drawer/DrawerController.svelte b/src/lib/components/Drawer/DrawerController.svelte
index dd2e75c73..b6be0abbe 100644
--- a/src/lib/components/Drawer/DrawerController.svelte
+++ b/src/lib/components/Drawer/DrawerController.svelte
@@ -8,19 +8,22 @@
 	import Icon from '$lib/assets/icons/Icon.svelte';
 	import { onMount, onDestroy } from 'svelte';
 
-	let isOpen = false;
-	let nodeContainerOpen = false;
-	let edgeContainerOpen = false;
-	let anchorContainerOpen = false;
-	let nav: HTMLElement;
-	let drawerBtn: HTMLElement;
-	let nodeBtn: HTMLElement;
-	let edgeBtn: HTMLElement;
-	let anchorBtn: HTMLElement;
-	let drawerContents: HTMLElement;
-	let nodeContainer: HTMLElement;
-	let anchorContainer: HTMLElement;
-	let edgeContainer: HTMLElement;
+	$state = {
+		isOpen: false,
+		nodeContainerOpen: false,
+		edgeContainerOpen: false,
+		anchorContainerOpen: false,
+		nav: null,
+		drawerBtn: null,
+		nodeBtn: null,
+		edgeBtn: null,
+		anchorBtn: null,
+		drawerContents: null,
+		nodeContainer: null,
+		anchorContainer: null,
+		edgeContainer: null,
+		currentComponent: 'Node'
+	};
 
 	const handleDragStart = (e: DragEvent) => {
 		if (!e.dataTransfer) return;
@@ -34,86 +37,84 @@
 	};
 
 	const handleDrawer = () => {
-		if (!isOpen) {
-			isOpen = true;
-			nav.style.height = 'fit-content';
-			nav.style.width = '300px';
+		if (!$state.isOpen) {
+			$state.isOpen = true;
+			$state.nav.style.height = 'fit-content';
+			$state.nav.style.width = '300px';
 		} else {
-			isOpen = false;
-			nav.style.height = '35px';
-			nav.style.width = '35px';
-			anchorContainerOpen = false;
-			edgeContainerOpen = false;
-			nodeContainerOpen = false;
-			nodeContainer.style.display = 'block';
-			edgeContainer.style.display = 'none';
-			anchorContainer.style.display = 'none';
-			nodeBtn.style.borderBottom =
+			$state.isOpen = false;
+			$state.nav.style.height = '35px';
+			$state.nav.style.width = '35px';
+			$state.anchorContainerOpen = false;
+			$state.edgeContainerOpen = false;
+			$state.nodeContainerOpen = false;
+			$state.nodeContainer.style.display = 'block';
+			$state.edgeContainer.style.display = 'none';
+			$state.anchorContainer.style.display = 'none';
+			$state.nodeBtn.style.borderBottom =
 				'3px solid var(--prop-drawer-button-text-color,var(--drawer-button-text-color, var(--default-drawer-button-text-color)))';
-			edgeBtn.style.borderBottom = 'none';
-			anchorBtn.style.borderBottom = 'none';
+			$state.edgeBtn.style.borderBottom = 'none';
+			$state.anchorBtn.style.borderBottom = 'none';
 		}
 	};
 
 	const handleNodeContainer = () => {
-		if (!nodeContainerOpen) {
-			nodeContainerOpen = true;
-			anchorContainerOpen = false;
-			edgeContainerOpen = false;
-			nodeContainer.style.display = 'block';
-			edgeContainer.style.display = 'none';
-			anchorContainer.style.display = 'none';
-			nodeBtn.style.borderBottom =
+		if (!$state.nodeContainerOpen) {
+			$state.nodeContainerOpen = true;
+			$state.anchorContainerOpen = false;
+			$state.edgeContainerOpen = false;
+			$state.nodeContainer.style.display = 'block';
+			$state.edgeContainer.style.display = 'none';
+			$state.anchorContainer.style.display = 'none';
+			$state.nodeBtn.style.borderBottom =
 				'3px solid var(--prop-drawer-button-text-color,var(--drawer-button-text-color, var(--default-drawer-button-text-color)))';
-			edgeBtn.style.borderBottom = 'none';
-			anchorBtn.style.borderBottom = 'none';
+			$state.edgeBtn.style.borderBottom = 'none';
+			$state.anchorBtn.style.borderBottom = 'none';
 		}
 	};
 	const handleAnchorContainer = () => {
-		if (!anchorContainerOpen) {
-			anchorContainerOpen = true;
-			edgeContainerOpen = false;
-			nodeContainerOpen = false;
-			anchorContainer.style.display = 'block';
-			edgeContainer.style.display = 'none';
-			nodeContainer.style.display = 'none';
-			nodeBtn.style.borderBottom = 'none';
-			edgeBtn.style.borderBottom = 'none';
-			anchorBtn.style.borderBottom =
+		if (!$state.anchorContainerOpen) {
+			$state.anchorContainerOpen = true;
+			$state.edgeContainerOpen = false;
+			$state.nodeContainerOpen = false;
+			$state.anchorContainer.style.display = 'block';
+			$state.edgeContainer.style.display = 'none';
+			$state.nodeContainer.style.display = 'none';
+			$state.nodeBtn.style.borderBottom = 'none';
+			$state.edgeBtn.style.borderBottom = 'none';
+			$state.anchorBtn.style.borderBottom =
 				'3px solid var(--prop-drawer-button-text-color,var(--drawer-button-text-color, var(--default-drawer-button-text-color)))';
 		}
 	};
 	const handleEdgeContainer = () => {
-		if (!edgeContainerOpen) {
-			edgeContainerOpen = true;
-			nodeContainerOpen = false;
-			anchorContainerOpen = false;
-			edgeContainer.style.display = 'block';
-			anchorContainer.style.display = 'none';
-			nodeContainer.style.display = 'none';
-			nodeBtn.style.borderBottom = 'none';
-			edgeBtn.style.borderBottom =
+		if (!$state.edgeContainerOpen) {
+			$state.edgeContainerOpen = true;
+			$state.nodeContainerOpen = false;
+			$state.anchorContainerOpen = false;
+			$state.edgeContainer.style.display = 'block';
+			$state.anchorContainer.style.display = 'none';
+			$state.nodeContainer.style.display = 'none';
+			$state.nodeBtn.style.borderBottom = 'none';
+			$state.edgeBtn.style.borderBottom =
 				'3px solid var(--prop-drawer-button-text-color,var(--drawer-button-text-color, var(--default-drawer-button-text-color)))';
-			anchorBtn.style.borderBottom = 'none';
+			$state.anchorBtn.style.borderBottom = 'none';
 		}
 	};
 
-	let currentComponent = 'Node'; // Add this line
-
 	const handleKeyPress = (e: KeyboardEvent) => {
 		if (e.key === 'D') {
 			handleDrawer();
-		} else if (e.key === 'T' && isOpen) {
+		} else if (e.key === 'T' && $state.isOpen) {
 			// Only toggle components if the drawer is open
-			if (currentComponent === 'Node') {
+			if ($state.currentComponent === 'Node') {
 				handleAnchorContainer();
-				currentComponent = 'Anchor';
-			} else if (currentComponent === 'Anchor') {
+				$state.currentComponent = 'Anchor';
+			} else if ($state.currentComponent === 'Anchor') {
 				handleEdgeContainer();
-				currentComponent = 'Edge';
-			} else if (currentComponent === 'Edge') {
+				$state.currentComponent = 'Edge';
+			} else if ($state.currentComponent === 'Edge') {
 				handleNodeContainer();
-				currentComponent = 'Node';
+				$state.currentComponent = 'Node';
 			}
 		}
 	};
@@ -129,39 +130,39 @@
 	});
 </script>
 
-<nav id="drawerWrapper" bind:this={nav}>
+<nav id="drawerWrapper" bind:this={$state.nav}>
 	<slot>
 		<button
 			class="drawerBtn"
-			bind:this={drawerBtn}
-			on:click={handleDrawer}
+			bind:this={$state.drawerBtn}
+			onclick={handleDrawer}
 			aria-label="Open/Close Drawer"
 		>
-			<Icon icon={isOpen ? 'south_east' : 'north_west'} />
+			<Icon icon={$state.isOpen ? 'south_east' : 'north_west'} />
 		</button>
-		<ul class="drawerContents" bind:this={drawerContents}>
+		<ul class="drawerContents" bind:this={$state.drawerContents}>
 			<li class="list-item">
 				<div class="menu">
 					<button
 						class="dropdown"
-						bind:this={nodeBtn}
-						on:click={handleNodeContainer}
+						bind:this={$state.nodeBtn}
+						onclick={handleNodeContainer}
 						aria-label="Component"
 					>
 						Node
 					</button>
 					<button
 						class="dropdown"
-						bind:this={anchorBtn}
-						on:click={handleAnchorContainer}
+						bind:this={$state.anchorBtn}
+						onclick={handleAnchorContainer}
 						aria-label="Component"
 					>
 						Anchor
 					</button>
 					<button
 						class="dropdown"
-						bind:this={edgeBtn}
-						on:click={handleEdgeContainer}
+						bind:this={$state.edgeBtn}
+						onclick={handleEdgeContainer}
 						aria-label="Component"
 					>
 						Edge
@@ -170,19 +171,19 @@
 			</li>
 			<!-- Handle Node Dropdown -->
 			<li class="list-item">
-				<div class="propsContainer nodeContainer" bind:this={nodeContainer}>
+				<div class="propsContainer nodeContainer" bind:this={$state.nodeContainer}>
 					<DrawerNode />
 				</div>
 			</li>
 			<!-- Handle Anchor Dropdown -->
 			<li class="list-item">
-				<div class="propsContainer anchorContainer" bind:this={anchorContainer}>
+				<div class="propsContainer anchorContainer" bind:this={$state.anchorContainer}>
 					<DrawerAnchor />
 				</div>
 			</li>
 			<!-- Handle Edge Dropdown -->
 			<li class="list-item">
-				<div class="propsContainer edgeContainer" bind:this={edgeContainer}>
+				<div class="propsContainer edgeContainer" bind:this={$state.edgeContainer}>
 					<DrawerEdge />
 				</div>
 			</li>
@@ -191,7 +192,7 @@
 					role="presentation"
 					class="defaultNodes"
 					draggable="true"
-					on:dragstart={handleDragStart}
+					ondragstart={handleDragStart}
 				>
 					Node
 				</div>
diff --git a/src/lib/components/Node/Node.svelte b/src/lib/components/Node/Node.svelte
index 69c5ac45f..a76a7cb66 100644
--- a/src/lib/components/Node/Node.svelte
+++ b/src/lib/components/Node/Node.svelte
@@ -63,8 +63,8 @@
 
 		const nodeCount = graph.nodes.count() + 1;
 
-		$state.isDefault = !$$slots.default;
-		if ($$slots.anchorWest || $$slots.anchorEast || $$slots.anchorNorth || $$slots.anchorSouth)
+		$state.isDefault = !$$snippets.default;
+		if ($$snippets.anchorWest || $$snippets.anchorEast || $$snippets.anchorNorth || $$snippets.anchorSouth)
 			$state.isDefault = false;
 
 		const initialDimensions: InitialDimensions = $props.dimensions
@@ -270,15 +270,32 @@
 		let:selected
 		let:grabHandle
 	>
-		<slot {selected} {grabHandle} {disconnect} {connect} node={$state.node} {destroy}>
-			{#if $state.isDefault}
-				<DefaultNode {selected} on:connection on:disconnection />
-			{/if}
-		</slot>
+			{@render name="default"}
+			<slot {selected} {grabHandle} {disconnect} {connect} node={$state.node} {destroy}>
+				{#if $state.isDefault}
+					<DefaultNode {selected} on:connection on:disconnection />
+				{/if}
+			</slot>
+		{@/render}
 
-		<slot name="anchorWest" slot="anchorWest" />
-		<slot name="anchorEast" slot="anchorEast" />
-		<slot name="anchorNorth" slot="anchorNorth" />
-		<slot name="anchorSouth" slot="anchorSouth" />
+		<div id={`anchors-west-${node.id}`} class="anchors left">
+			{@render name="anchorWest"}
+			<slot name="anchorWest" />
+		{@/render}
+		</div>
+		<div id={`anchors-east-${node.id}`} class="anchors right">
+			{@render name="anchorEast"}
+			<slot name="anchorEast" />
+		{@/render}
+		</div>
+		<div id={`anchors-north-${node.id}`} class="anchors top">
+			{@render name="anchorNorth"}
+			<slot name="anchorNorth" />
+		{@/render}
+		</div>
+		<div id={`anchors-south-${node.id}`} class="anchors bottom">
+			{@render name="anchorSouth"}
+			<slot name="anchorSouth" />
+		{@/render}
 	</InternalNode>
 {/if}
diff --git a/src/lib/components/data/Knob/Knob.svelte b/src/lib/components/data/Knob/Knob.svelte
index e97bd5bbd..bc13fa0be 100644
--- a/src/lib/components/data/Knob/Knob.svelte
+++ b/src/lib/components/data/Knob/Knob.svelte
@@ -6,11 +6,6 @@
 	import type { Graph, CustomWritable } from '$lib/types';
 	import type { CSSColorString } from '$lib/types';
 
-	// Props
-	/**
-	 * @default 60
-	 * @description Minimum angle allowed when interacting with the knob rotation.
-	 */
 	$props = {
 		minDegree: 60,
 		maxDegree: 300,
@@ -44,26 +39,21 @@
 	let knobWrapperElement: HTMLDivElement;
 	let knobElement: HTMLDivElement;
 
-	// Grab cursor from store
 	$derived cursor = graph.cursor;
-
-	//Grab scale/zoom value of graph
 	$derived scale = graph.transforms.scale;
-
 	$derived translation = graph.transforms.translation;
 
 	$effect(() => {
 		if ($state.rotating) {
-			calculateNewAngle($cursor.x, $cursor.y); // need to pass these arguments to trigger updates
+			calculateNewAngle($cursor.x, $cursor.y);
 		}
 	});
 
-	// Begin rotating on mousedown
 	function startRotate(e: MouseEvent) {
 		e.stopPropagation();
 		e.preventDefault();
 		window.addEventListener('mouseup', stopRotate, { once: true });
-		 $state.rotating = true;
+		$state.rotating = true;
 	}
 
 	function startTouchRotate(e: TouchEvent) {
@@ -73,16 +63,16 @@
 		e.stopPropagation();
 		e.preventDefault();
 		window.addEventListener('touchend', stopRotate, { once: true });
-		 $state.rotating = true;
+		$state.rotating = true;
 	}
 
 	function stopRotate() {
-		if ( $state.previousValue === $props.parameterStore) {
+		if ($state.previousValue === $props.parameterStore) {
 			knobElement.focus();
 		} else {
-			 $state.previousValue = $props.parameterStore;
+			$state.previousValue = $props.parameterStore;
 		}
-		 $state.rotating = false;
+		$state.rotating = false;
 		window.removeEventListener('mouseup', stopRotate);
 	}
 
@@ -96,32 +86,26 @@
 		};
 	}
 
-	// Update the value based on the direction and increment
-	function updateValue(delta: number, increment = (( $props.maxDegree -  $props.minDegree) / ( $props.max -  $props.min)) *  $props.step) {
-		// ADD SETTIMEOUT FOR SCROLL TO SLOW DOWN KNOB INPUT UPDATES
-		 $state.currentDegree = roundNum(
-			Math.max( $props.minDegree, Math.min( $state.currentDegree + delta * increment,  $props.maxDegree)),
+	function updateValue(delta: number, increment = (($props.maxDegree - $props.minDegree) / ($props.max - $props.min)) * $props.step) {
+		$state.currentDegree = roundNum(
+			Math.max($props.minDegree, Math.min($state.currentDegree + delta * increment, $props.maxDegree)),
 			3
 		);
 		$props.parameterStore =
-			((clamp( $state.currentDegree) -  $props.minDegree) / ( $props.maxDegree -  $props.minDegree)) * ( $props.max -  $props.min) +  $props.min;
+			((clamp($state.currentDegree) - $props.minDegree) / ($props.maxDegree - $props.minDegree)) * ($props.max - $props.min) + $props.min;
 	}
 
 	export function clamp(num: number): number {
-		const increment = (( $props.maxDegree -  $props.minDegree) / ( $props.max -  $props.min)) *  $props.step;
-		const degreeRoundToStep = Math.round((num -  $props.minDegree) / increment) * increment +  $props.minDegree;
-		const degree = Math.min(Math.max(degreeRoundToStep,  $props.minDegree),  $props.maxDegree);
-		//this is a band-aid solution
-		//currentDegree should be updating when parameterStore updates within calculateNewAngle
-		 $state.currentDegree = degree;
+		const increment = (($props.maxDegree - $props.minDegree) / ($props.max - $props.min)) * $props.step;
+		const degreeRoundToStep = Math.round((num - $props.minDegree) / increment) * increment + $props.minDegree;
+		const degree = Math.min(Math.max(degreeRoundToStep, $props.minDegree), $props.maxDegree);
+		$state.currentDegree = degree;
 		return degree;
 	}
 
-	// need to pass cursorX and cursorY to trigger updates
 	function calculateNewAngle(cursorX: number, cursorY: number): void {
 		const { top, left, width, height } = knobWrapperElement.getBoundingClientRect();
 		const e = { clientX: cursorX, clientY: cursorY };
-		// X and Y are the position relative to the target element's left and top
 		const { x, y } = calculateRelativeCursor(e, top, left, width, height, $scale, $translation);
 		const relativeX = x + (2 * $translation.x) / $scale - width / 2;
 		const relativeY = height / 2 - (y + (2 * $translation.y) / $scale);
@@ -135,20 +119,14 @@
 				? 270 + Math.atan(-relativeY / relativeX) * (180 / Math.PI)
 				: relativeX < 0 && relativeY < 0
 				? 90 - Math.atan(-relativeY / -relativeX) * (180 / Math.PI)
-				:  $state.currentDegree;
-		// caculate the new parameterstore based on clamp(angle)
-		// a round-off error (see wiki: 'https://en.wikipedia.org/wiki/Round-off_error')
-		// occurs for particular values depending on their angle due to
-		// a computer's limited precision of floating-point number representation.
-		// To circumvent this issue, toFixed is used to adjust output to desired accuracy
+				: $state.currentDegree;
 		$props.parameterStore = Number(
-			(((clamp(angle) -  $props.minDegree) / ( $props.maxDegree -  $props.minDegree)) * ( $props.max -  $props.min) +  $props.min).toFixed( $props.fixed)
+			(((clamp(angle) - $props.minDegree) / ($props.maxDegree - $props.minDegree)) * ($props.max - $props.min) + $props.min).toFixed($props.fixed)
 		);
 	}
 </script>
 
 {#if !$state.connected}
-	<!-- this div is wrapping the knob section -->
 	<div class="wrapper" style:color={$props.fontColor} bind:this={knobWrapperElement}>
 		<div class="knob-container" bind:offsetWidth={$state.sliderWidth} style:transform={$state.curAngle}>
 			<div
diff --git a/src/lib/components/data/Toggle/Toggle.svelte b/src/lib/components/data/Toggle/Toggle.svelte
index cffa3783a..292733abb 100644
--- a/src/lib/components/data/Toggle/Toggle.svelte
+++ b/src/lib/components/data/Toggle/Toggle.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { useState } from 'svelte';
-
 	$props = {
 		parameterStore: null,
 		color: 'limegreen'
 	};
 
-	const [parameterStore, setParameterStore] = useState($props.parameterStore);
+	$state = {
+		parameterStore: $props.parameterStore
+	};
 
 	const handleKeyToggle = (event: KeyboardEvent) => {
 		event.stopPropagation();
 		if (event.key === 'Enter') {
-			setParameterStore(!parameterStore);
+			$state.parameterStore = !$state.parameterStore;
 		}
 	};
 	const handleClickToggle = (event: MouseEvent) => {
 		event.stopPropagation();
-		setParameterStore(!parameterStore);
+		$state.parameterStore = !$state.parameterStore;
 	};
 </script>
 
@@ -25,14 +25,14 @@
 	role="switch"
 	onkeydown|stopPropagation={handleKeyToggle}
 	tabindex={0}
-	aria-checked={parameterStore}
+	aria-checked={$state.parameterStore}
 	aria-label="Toggle Switch"
 >
 	<label class="switch">
 		<input
 			type="checkbox"
 			onclick|stopPropagation={handleClickToggle}
-			bind:checked={parameterStore}
+			bind:checked={$state.parameterStore}
 		/>
 		<span class="slider round" style:--prop-toggle-color={color} />
 	</label>
diff --git a/src/lib/containers/Svelvet/Svelvet.svelte b/src/lib/containers/Svelvet/Svelvet.svelte
index 776cfe20a..af776b403 100644
--- a/src/lib/containers/Svelvet/Svelvet.svelte
+++ b/src/lib/containers/Svelvet/Svelvet.svelte
@@ -90,7 +90,7 @@
 	});
 
 	$effect(() => {
-		$state.backgroundExists = $$slots.background;
+		$state.backgroundExists = $$snippets.background;
 	});
 
 	$effect(() => {
@@ -169,13 +169,12 @@
 		{#if $props.mermaid.length}
 			<FlowChart mermaid={$props.mermaid} mermaidConfig={$props.mermaidConfig} />
 		{/if}
-		<slot />
-		<slot name="minimap" slot="minimap" />
-		<slot name="controls" slot="controls" />
-		<slot name="background" slot="background" />
-		<slot name="toggle" slot="toggle" />
-		<slot name="drawer" slot="drawer" />
-		<slot name="contrast" slot="contrast" />
+			{@render children}
+			{@render $props.minimap as minimap}
+			{@render $props.controls as controls}
+			{@render $props.toggle as toggle}
+			{@render $props.drawer as drawer}
+			{@render $props.contrast as contrast}
 	</Graph>
 {:else}
 	<div
@@ -525,13 +524,13 @@
 		--plugin-border: #ffff00;
 		--default-controls-border: var(--plugin-border);
 		--default-minimap-border: var(--plugin-border);
-		--default-theme-toggle-border: var(--plugin-border);
+		--default-theme-toggle-border: var (--plugin-border);
 
 		--default-anchor-color: #ffff00;
 		--default-anchor-border-color: #0000ff;
 
 		--default-anchor-connected: #ffff00;
-		--default-anchor-connected-border: #0000ff;
+			--default-anchor-connected-border: #0000ff;
 
 		--default-anchor-connecting: #ffff00;
 		--default-anchor-connecting-border: #0000ff;

From db1e59786439533463052086a2cc7d718dee79b2 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 17:33:24 +0700
Subject: [PATCH 08/26] Update package.json

---
 package.json | 152 +++++++++++++++++++++++++--------------------------
 1 file changed, 76 insertions(+), 76 deletions(-)

diff --git a/package.json b/package.json
index 3e1951143..c679c1f44 100644
--- a/package.json
+++ b/package.json
@@ -1,78 +1,78 @@
 {
-	"name": "svelvet",
-	"version": "10.0.2",
-	"description": "A lightweight Svelte component library for building dynamic, node-based user interfaces",
-	"keywords": [
-		"svelte",
-		"svelvet",
-		"typescript"
-	],
-	"authors": "Aaron, Abhi, Alexander, Ali, Andrew, Anu, Brian, Britta, Christopher, Damian, David, Dillon, Emma, Ernesto, Henry, Horacio, Ian, Jeffrey, Jen, Jeremy, John, Johnny, Justin, Mauricio, Michael, Rachel, Rathna, Ruxin, Ryan, Sam, Samee, Spencer, Taylor, Thomas, Timmy, Tony, Von, Walter, Wesley, Isaac, Julian, Mayson, Solomon",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/open-source-labs/Svelvet/issues"
-	},
-	"homepage": "https://github.com/open-source-labs/Svelvet",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/open-source-labs/Svelvet.git"
-	},
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "yarn format && yarn lint && yarn test && yarn test:unit && npm run package",
-		"test": "playwright test",
-		"test:unit": "vitest run --environment jsdom",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
-		"prepare": "husky install"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		},
-		"./package.json": "./package.json"
-	},
-	"files": [
-		"dist"
-	],
-	"devDependencies": {
-		"@playwright/test": "^1.41.2",
-		"@sveltejs/adapter-auto": "^2.1.0",
-		"@sveltejs/kit": "^1.20.4",
-		"@sveltejs/package": "^2.1.0",
-		"@testing-library/svelte": "^4.0.2",
-		"@typescript-eslint/eslint-plugin": "^5.60.0",
-		"@typescript-eslint/parser": "^5.60.0",
-		"axe-playwright": "^2.0.1",
-		"eslint": "^8.43.0",
-		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-svelte": "^2.32.0",
-		"husky": "^8.0.3",
-		"jest-dom": "^4.0.0",
-		"jsdom": "^22.1.0",
-		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.10.1",
-		"publint": "^0.1.12",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.5.3",
-		"typescript": "^5.1.6",
-		"vite": "^4.3.9",
-		"vitest": "^0.32.2"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"main": "svelte.config.js",
-	"directories": {
-		"test": "tests"
-	},
-	"peerDependencies": {
-		"svelte": ">=3.59.2 || ^4.0.0"
-	}
+  "name": "svelvet",
+  "version": "11.0.0",
+  "description": "A lightweight Svelte component library for building dynamic, node-based user interfaces",
+  "keywords": [
+    "svelte",
+    "svelvet",
+    "typescript"
+  ],
+  "authors": "Aaron, Abhi, Alexander, Ali, Andrew, Anu, Brian, Britta, Christopher, Damian, David, Dillon, Emma, Ernesto, Henry, Horacio, Ian, Jeffrey, Jen, Jeremy, John, Johnny, Justin, Mauricio, Michael, Rachel, Rathna, Ruxin, Ryan, Sam, Samee, Spencer, Taylor, Thomas, Timmy, Tony, Von, Walter, Wesley, Isaac, Julian, Mayson, Solomon",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/open-source-labs/Svelvet/issues"
+  },
+  "homepage": "https://github.com/open-source-labs/Svelvet",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/open-source-labs/Svelvet.git"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "yarn format && yarn lint && yarn test && yarn test:unit && npm run package",
+    "test": "playwright test",
+    "test:unit": "vitest run --environment jsdom",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write .",
+    "prepare": "husky install"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@playwright/test": "^1.42.0",
+    "@sveltejs/adapter-auto": "^2.2.1",
+    "@sveltejs/kit": "^2.6.0",
+    "@sveltejs/package": "^2.2.1",
+    "@testing-library/svelte": "^5.1.2",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "axe-playwright": "^3.1.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.40.0",
+    "husky": "^8.0.3",
+    "jest-dom": "^6.1.0",
+    "jsdom": "^22.1.0",
+    "prettier": "^3.2.0",
+    "prettier-plugin-svelte": "^3.1.0",
+    "publint": "^0.1.18",
+    "svelte-check": "^3.7.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.2",
+    "vite": "^5.2.2",
+    "vitest": "^0.35.0"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "main": "svelte.config.js",
+  "directories": {
+    "test": "tests"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
 }

From 23a6f6ee01bb7f0bc1a04c6320fd3db8cba885d6 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 17:36:58 +0700
Subject: [PATCH 09/26] Update svelte.config.js

---
 svelte.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/svelte.config.js b/svelte.config.js
index 4539d0e17..fc875b8f9 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -7,6 +7,7 @@ const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
+		typescript: true,
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.

From 513bbd0374e20acbc97f5a9ca553646e99c283e6 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 17:42:02 +0700
Subject: [PATCH 10/26] Update svelte.config.js

---
 svelte.config.js | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/svelte.config.js b/svelte.config.js
index fc875b8f9..f1a648938 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,19 +1,22 @@
-import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	vitePlugin: { inspector: true },
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-	// for more information about preprocessors
-	preprocess: vitePreprocess(),
-		typescript: true,
-	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
-	}
+  kit: {
+    adapter: adapter({
+      fallback: 'index.html'
+    }),
+    alias: {
+      $lib: 'src/lib'
+    }
+  },
+  preprocess: vitePreprocess(),
+  compilerOptions: {
+    typescript: true,
+    runes: true,
+    customElement: false
+  }
 };
 
 export default config;

From be17c92fdaf75c6b70bd14b2458bc02b06751db1 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 17:50:29 +0700
Subject: [PATCH 11/26] Create devcontainer.json

---
 .devcontainer/devcontainer.json | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .devcontainer/devcontainer.json

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 000000000..ad93c14a0
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,5 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "features": {
+  }
+}

From e4d707c4f43db82f654cee2f16b1538726feeefe Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 18:26:14 +0700
Subject: [PATCH 12/26] Update props to use $props destructuring and standard
 event properties

Update event handling and props destructuring in various components.

* **Drawer.svelte**: Destructure props using `$props` and update event handling to use standard event properties.
* **DrawerAnchor.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers.
* **DrawerNode.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers.
* **Minimap.svelte**: Update event handling to use standard event properties.
* **DefaultNode.svelte**: Destructure props using `$props` and update event handling to use standard event properties.
* **InternalNode.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers.
* **Node.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers.
* **Resizer.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers.
* **Graph.svelte**: Replace `on:` syntax with standard event properties and use programmatic logic for multiple handlers.
---
 src/lib/components/Drawer/Drawer.svelte       | 48 ++++++++++---------
 src/lib/components/Drawer/DrawerAnchor.svelte | 41 ++++++++--------
 src/lib/components/Drawer/DrawerNode.svelte   | 10 ++--
 src/lib/components/Minimap/Minimap.svelte     |  2 +-
 src/lib/components/Node/DefaultNode.svelte    | 13 ++---
 src/lib/components/Node/InternalNode.svelte   |  2 +-
 src/lib/components/Node/Node.svelte           | 10 ++--
 src/lib/components/Resizer/Resizer.svelte     | 17 +++----
 src/lib/containers/Graph/Graph.svelte         |  8 ++--
 9 files changed, 76 insertions(+), 75 deletions(-)

diff --git a/src/lib/components/Drawer/Drawer.svelte b/src/lib/components/Drawer/Drawer.svelte
index 03449737d..b844d3a7f 100644
--- a/src/lib/components/Drawer/Drawer.svelte
+++ b/src/lib/components/Drawer/Drawer.svelte
@@ -27,30 +27,32 @@
 	export let trackpadPan: boolean;
 	export let toggle: boolean;
 
+	$props = {
+		width,
+		height,
+		minimap,
+		translation,
+		controls,
+		edge,
+		edgeStyle,
+		snapTo,
+		editable,
+		fitView,
+		locked,
+		zoom,
+		theme,
+		mermaid,
+		mermaidConfig,
+		TD,
+		disableSelection,
+		raiseEdgesOnSelect,
+		modifier,
+		trackpadPan,
+		toggle
+	};
+
 	$state = {
-		svelvetProps: {
-			width,
-			height,
-			minimap,
-			translation,
-			controls,
-			edge,
-			edgeStyle,
-			snapTo,
-			editable,
-			fitView,
-			locked,
-			zoom,
-			theme,
-			mermaid,
-			mermaidConfig,
-			TD,
-			disableSelection,
-			raiseEdgesOnSelect,
-			modifier,
-			trackpadPan,
-			toggle
-		},
+		svelvetProps: $props,
 		defaultNodes: [],
 		dropped_in: false
 	};
diff --git a/src/lib/components/Drawer/DrawerAnchor.svelte b/src/lib/components/Drawer/DrawerAnchor.svelte
index ccfef09c7..c100d09a9 100644
--- a/src/lib/components/Drawer/DrawerAnchor.svelte
+++ b/src/lib/components/Drawer/DrawerAnchor.svelte
@@ -90,7 +90,8 @@
 			if (anchorPosition === 'addLeftAnchor') anchorsCreated.left.push(anchorProps);
 			else if (anchorPosition === 'addRightAnchor') anchorsCreated.right.push(anchorProps);
 			else if (anchorPosition === 'addTopAnchor') anchorsCreated.top.push(anchorProps);
-			else if (anchorPosition === 'addBottomAnchor') anchorsCreated.bottom.push(anchorProps);
+			else if (anchorPosition === 'addBottomAnchor')
+				anchorsCreated.bottom.push(anchorProps);
 			else if (anchorPosition === 'addSelfAnchor') anchorsCreated.self.push(anchorProps);
 		}
 		return;
@@ -203,7 +204,7 @@
 
 <div id="anchorContainer">
 	<!-- On submit resets all the values on the input field in the form to default -->
-	<form onsubmit="handleAnchorResetButtonClick(event)">
+	<form onreset={handleAnchorResetButtonClick}>
 		<ul aria-labelledby="select_props">
 			<li class="list-item">
 				<label for="anchorBgColor">Background: </label>
@@ -215,7 +216,7 @@
 					id="invisible"
 					type="checkbox"
 					bind:value={$state.invisible}
-					onchange="handleInvisibleButtonClick(event)"
+					onchange={handleInvisibleButtonClick}
 				/>
 			</li>
 			<li class="list-item">
@@ -224,12 +225,12 @@
 					id="nodeConnect"
 					type="checkbox"
 					bind:value={$state.nodeConnect}
-					onchange="handleNodeConnectButtonClick(event)"
+					onchange={handleNodeConnectButtonClick}
 				/>
 			</li>
 			<li class="list-item">
 				<label for="input">Input: </label>
-				<input id="input" type="checkbox" bind:value={$state.input} onchange="handleInputButtonClick(event)" />
+				<input id="input" type="checkbox" bind:value={$state.input} onchange={handleInputButtonClick} />
 			</li>
 			<li class="list-item">
 				<label for="output">Output: </label>
@@ -237,7 +238,7 @@
 					id="output"
 					type="checkbox"
 					bind:value={$state.output}
-					onchange="handleOutputButtonClick(event)"
+					onchange={handleOutputButtonClick}
 				/>
 			</li>
 			<li class="list-item">
@@ -246,7 +247,7 @@
 					id="multiple"
 					type="checkbox"
 					bind:value={$state.multiple}
-					onchange="handleMultipleButtonClick(event)"
+					onchange={handleMultipleButtonClick}
 				/>
 			</li>
 			<li class="list-item">
@@ -255,7 +256,7 @@
 					id="direction"
 					bind:this={$state.directionValue}
 					bind:value={$state.direction}
-					onchange="handleDirectionButtonClick(event)"
+					onchange={handleDirectionButtonClick}
 				>
 					<option value="">-</option>
 					<option value="north">North</option>
@@ -271,7 +272,7 @@
 					id="dynamic"
 					type="checkbox"
 					bind:value={$state.dynamic}
-					onchange="handleDynamicButtonClick(event)"
+					onchange={handleDynamicButtonClick}
 				/>
 			</li>
 
@@ -281,7 +282,7 @@
 					id="anchorLocked"
 					type="checkbox"
 					bind:value={$state.anchorLocked}
-					onchange="handleAnchorLockedButtonClick(event)"
+					onchange={handleAnchorLockedButtonClick}
 				/>
 			</li>
 
@@ -291,7 +292,7 @@
 					id="deleteSelfAnchor"
 					class="deleteAnchor"
 					type="button"
-					onclick="deleteAnchor(event)"
+					onclick={deleteAnchor}
 				>
 					<Icon icon="arrow_left" />
 				</button>
@@ -300,7 +301,7 @@
 					id="addSelfAnchor"
 					class="addAnchor"
 					type="button"
-					onclick="addAnchor(event)"
+					onclick={addAnchor}
 				>
 					<Icon icon="arrow_right" />
 				</button>
@@ -310,18 +311,18 @@
 				<p>Right</p>
 			</li>
 			<li class="list-item anchor-directions">
-				<button id="deleteLeftAnchor" class="deleteAnchor" type="button" onclick="deleteAnchor(event)">
+				<button id="deleteLeftAnchor" class="deleteAnchor" type="button" onclick={deleteAnchor}>
 					<Icon icon="arrow_left" />
 				</button>
 				<span class="list-item couter">{$leftAnchorCounter}</span>
-				<button id="addLeftAnchor" class="addAnchor" type="button" onclick="addAnchor(event)">
+				<button id="addLeftAnchor" class="addAnchor" type="button" onclick={addAnchor}>
 					<Icon icon="arrow_right" />
 				</button>
-				<button id="deleteRightAnchor" class="deleteAnchor" type="button" onclick="deleteAnchor(event)">
+				<button id="deleteRightAnchor" class="deleteAnchor" type="button" onclick={deleteAnchor}>
 					<Icon icon="arrow_left" />
 				</button>
 				<span class="list-item couter">{$rightAnchorCounter}</span>
-				<button id="addRightAnchor" class="addAnchor" type="button" onclick="addAnchor(event)">
+				<button id="addRightAnchor" class="addAnchor" type="button" onclick={addAnchor}>
 					<Icon icon="arrow_right" />
 				</button>
 			</li>
@@ -330,18 +331,18 @@
 				<p>Bottom</p>
 			</li>
 			<li class="list-item anchor-directions">
-				<button id="deleteTopAnchor" class="deleteAnchor" type="button" onclick="deleteAnchor(event)">
+				<button id="deleteTopAnchor" class="deleteAnchor" type="button" onclick={deleteAnchor}>
 					<Icon icon="arrow_left" />
 				</button>
 				<span class="list-item couter">{$topAnchorCounter}</span>
-				<button id="addTopAnchor" class="addAnchor" type="button" onclick="addAnchor(event)">
+				<button id="addTopAnchor" class="addAnchor" type="button" onclick={addAnchor}>
 					<Icon icon="arrow_right" />
 				</button>
-				<button id="deleteBottomAnchor" class="deleteAnchor" type="button" onclick="deleteAnchor(event)">
+				<button id="deleteBottomAnchor" class="deleteAnchor" type="button" onclick={deleteAnchor}>
 					<Icon icon="arrow_left" />
 				</button>
 				<span class="list-item couter">{$bottomAnchorCounter}</span>
-				<button id="addBottomAnchor" class="addAnchor" type="button" onclick="addAnchor(event)">
+				<button id="addBottomAnchor" class="addAnchor" type="button" onclick={addAnchor}>
 					<Icon icon="arrow_right" />
 				</button>
 			</li>
diff --git a/src/lib/components/Drawer/DrawerNode.svelte b/src/lib/components/Drawer/DrawerNode.svelte
index e1c3f6f62..d546b98b4 100644
--- a/src/lib/components/Drawer/DrawerNode.svelte
+++ b/src/lib/components/Drawer/DrawerNode.svelte
@@ -131,7 +131,7 @@
 
 <div id="nodeContainer">
 	<!-- On submit resets all the values on the input field in the form to default -->
-	<form on:submit|preventDefault={handleNodeResetButtonClick}>
+	<form onreset={handleNodeResetButtonClick}>
 		<ul aria-labelledby="select_props">
 			<li class="list-item">
 				<label for="bgColor">Background: </label>
@@ -147,7 +147,7 @@
 					id="useDefaults"
 					type="checkbox"
 					bind:value={useDefaults}
-					on:change={handleUseDefaultsButtonClick}
+					onchange={handleUseDefaultsButtonClick}
 				/>
 			</li> -->
 
@@ -162,7 +162,7 @@
 			</li>
 			<li class="list-item">
 				<label for="locked">Locked: </label>
-				<input id="label" type="checkbox" bind:value={locked} on:change={handleLockedButtonClick} />
+				<input id="label" type="checkbox" bind:value={locked} onchange={handleLockedButtonClick} />
 			</li>
 			<li class="list-item">
 				<label for="centered">Centered: </label>
@@ -170,7 +170,7 @@
 					id="centered"
 					type="checkbox"
 					bind:value={center}
-					on:change={handleCenterButtonClick}
+					onchange={handleCenterButtonClick}
 				/>
 			</li>
 			<li class="list-item">
@@ -199,7 +199,7 @@
 				<select
 					id="anchorPosition"
 					bind:value={nodeDirection}
-					on:change={handleAnchorPositionButton}
+					onchange={handleAnchorPositionButton}
 				>
 					<option value="">-</option>
 					<option value="LR">LR</option>
diff --git a/src/lib/components/Minimap/Minimap.svelte b/src/lib/components/Minimap/Minimap.svelte
index 51f42ffca..15d353fe5 100644
--- a/src/lib/components/Minimap/Minimap.svelte
+++ b/src/lib/components/Minimap/Minimap.svelte
@@ -120,7 +120,7 @@
 					{left}
 					{nodeColor}
 					hidden={$hidden.has(node)}
-					{toggleHidden}
+					toggleHidden={toggleHidden}
 					{hideable}
 				/>
 			{/if}
diff --git a/src/lib/components/Node/DefaultNode.svelte b/src/lib/components/Node/DefaultNode.svelte
index 119dc8516..275ffc58b 100644
--- a/src/lib/components/Node/DefaultNode.svelte
+++ b/src/lib/components/Node/DefaultNode.svelte
@@ -10,8 +10,9 @@
 	const dynamic = getContext<boolean>('dynamic');
 	const node = getContext<Node>('node');
 
-	// Props
-	export let selected: boolean;
+	$props = {
+		selected: false
+	};
 
 	// External stores
 	const label = node.label;
@@ -34,20 +35,20 @@
 <div class:selected class="default-node" style:border-radius="{$borderRadius}px">
 	{#if dynamic}
 		{#each { length: $inputs } as _}
-			<Anchor on:connection on:disconnection />
+			<Anchor onconnection ondisconnection />
 		{/each}
 		{#each { length: $outputs } as _}
-			<Anchor on:connection on:disconnection />
+			<Anchor onconnection ondisconnection />
 		{/each}
 	{:else}
 		<div class="input-anchors" class:top class:left>
 			{#each { length: $inputs } as _, i (i)}
-				<Anchor on:connection on:disconnection input direction={top ? 'north' : 'west'} />
+				<Anchor onconnection ondisconnection input direction={top ? 'north' : 'west'} />
 			{/each}
 		</div>
 		<div class="output-anchors" class:bottom class:right>
 			{#each { length: $outputs } as _, i (i)}
-				<Anchor on:connection on:disconnection output direction={top ? 'south' : 'east'} />
+				<Anchor onconnection ondisconnection output direction={top ? 'south' : 'east'} />
 			{/each}
 		</div>
 	{/if}
diff --git a/src/lib/components/Node/InternalNode.svelte b/src/lib/components/Node/InternalNode.svelte
index c77133df1..65544538d 100644
--- a/src/lib/components/Node/InternalNode.svelte
+++ b/src/lib/components/Node/InternalNode.svelte
@@ -227,7 +227,7 @@
 			? null
 			: '0px'}
 		style:--prop-border-width={$borderWidth || (isDefault || useDefaults ? null : '0px')}
-		oncontextmenu|preventDefault|stopPropagation
+		oncontextmenu={e => { e.preventDefault(); e.stopPropagation(); }}
 		onmouseup={onMouseUp}
 		onmousedown={handleNodeClicked}
 		ontouchstart={handleNodeClicked}
diff --git a/src/lib/components/Node/Node.svelte b/src/lib/components/Node/Node.svelte
index a76a7cb66..c2dff2b22 100644
--- a/src/lib/components/Node/Node.svelte
+++ b/src/lib/components/Node/Node.svelte
@@ -262,10 +262,10 @@
 		activeGroup={graph.activeGroup}
 		editing={graph.editing}
 		initialNodePositions={graph.initialNodePositions}
-		on:nodeClicked
-		on:nodeMount
-		on:nodeReleased
-		on:duplicate
+		onnodeClicked
+		onnodeMount
+		onnodeReleased
+		onduplicate
 		let:destroy
 		let:selected
 		let:grabHandle
@@ -273,7 +273,7 @@
 			{@render name="default"}
 			<slot {selected} {grabHandle} {disconnect} {connect} node={$state.node} {destroy}>
 				{#if $state.isDefault}
-					<DefaultNode {selected} on:connection on:disconnection />
+					<DefaultNode {selected} onconnection ondisconnection />
 				{/if}
 			</slot>
 		{@/render}
diff --git a/src/lib/components/Resizer/Resizer.svelte b/src/lib/components/Resizer/Resizer.svelte
index cd54d5f9b..187966e30 100644
--- a/src/lib/components/Resizer/Resizer.svelte
+++ b/src/lib/components/Resizer/Resizer.svelte
@@ -238,19 +238,19 @@
 </script>
 
 {#if $props.width}
-	<div use:resizeHandler={{ left: $state.left }} class:width class="left" />
-	<div use:resizeHandler={{ right: $state.right }} class:width class="right" />
+	<div {...resizeHandler({ left: $state.left })} class:width class="left" />
+	<div {...resizeHandler({ right: $state.right })} class:width class="right" />
 {/if}
 
 {#if $props.height}
-	<div use:resizeHandler={{ top: $state.top }} class:height class="top" />
-	<div use:resizeHandler={{ bottom: $state.bottom }} class:height class="bottom" />
+	<div {...resizeHandler({ top: $state.top })} class:height class="top" />
+	<div {...resizeHandler({ bottom: $state.bottom })} class:height class="bottom" />
 {/if}
 {#if $state.both}
-	<div use:resizeHandler={{ both: $state.both }} class:both />
+	<div {...resizeHandler({ both: $state.both })} class:both />
 {/if}
 {#if $props.rotation}
-	<div use:rotateHandler class:rotation />
+	<div {...rotateHandler} class:rotation />
 {/if}
 
 <style>
@@ -259,8 +259,7 @@
 		width: 9px;
 		height: 9px;
 		z-index: 0;
-		/* background-color: rgba(0, 0, 0, 0.419); */
-		pointer-events: auto;
+		 pointer-events: auto;
 	}
 
 	.width {
@@ -291,12 +290,10 @@
 		bottom: -3px;
 		right: -3px;
 		cursor: nwse-resize;
-		/* background-color: green; */
 	}
 	.rotation {
 		top: -3px;
 		left: -3px;
 		cursor: crosshair;
-		/* background-color: blue; */
 	}
 </style>
diff --git a/src/lib/containers/Graph/Graph.svelte b/src/lib/containers/Graph/Graph.svelte
index a87660d94..77b12de64 100644
--- a/src/lib/containers/Graph/Graph.svelte
+++ b/src/lib/containers/Graph/Graph.svelte
@@ -513,10 +513,10 @@
 	style:width={$props.width ? $props.width + 'px' : '100%'}
 	style:height={$props.height ? $props.height + 'px' : '100%'}
 	style:cursor={$props.pannable ? 'move' : 'default'}
-	onwheel|preventDefault={handleScroll}
-	onmousedown|preventDefault|self={onMouseDown}
-	ontouchend|preventDefault={onMouseUp}
-	ontouchstart|preventDefault|self={onTouchStart}
+	onwheel={handleScroll}
+	onmousedown={onMouseDown}
+	ontouchend={onMouseUp}
+	ontouchstart={onTouchStart}
 	onkeydown={handleKeyDown}
 	onkeyup={handleKeyUp}
 	bind:this={$graphDOMElement}

From b255886875b1cb1fec6eb1bd957f56dc43522af4 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 18:29:00 +0700
Subject: [PATCH 13/26] Replace `on:` syntax with standard event properties in
 `Svelvet.svelte`, `ZoomPanWrapper.svelte`, `GraphRenderer.svelte`, and
 `GroupBoxRenderer.svelte`.

* **Svelvet.svelte**
  - Replace `on:` syntax with `on` event properties.
  - Use spread operator for props.

* **ZoomPanWrapper.svelte**
  - Replace `on:` syntax with `on` event properties.
  - Use state and props for programmatic logic.

* **GraphRenderer.svelte**
  - Replace `on:` syntax with `on` event properties.
  - Use state and props for programmatic logic.

* **GroupBoxRenderer.svelte**
  - Replace `on:` syntax with `on` event properties.
  - Add `handleGroupClick` function.
---
 src/lib/containers/Svelvet/Svelvet.svelte     | 27 ++-----------
 .../ZoomPanWrapper/ZoomPanWrapper.svelte      | 39 +++++++++++--------
 .../GraphRenderer/GraphRenderer.svelte        | 22 ++++++++---
 .../GroupBoxRenderer/GroupBoxRenderer.svelte  |  7 +++-
 4 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/src/lib/containers/Svelvet/Svelvet.svelte b/src/lib/containers/Svelvet/Svelvet.svelte
index af776b403..81a35043c 100644
--- a/src/lib/containers/Svelvet/Svelvet.svelte
+++ b/src/lib/containers/Svelvet/Svelvet.svelte
@@ -146,35 +146,14 @@
 
 {#if $state.graph}
 	<Graph
-		{width}
-		{height}
-		{toggle}
-		{backgroundExists}
-		{minimap}
+		{...$props}
 		graph={$state.graph}
-		{fitView}
-		{fixedZoom}
-		{pannable}
-		{theme}
-		{drawer}
-		{controls}
-		{selectionColor}
-		{disableSelection}
-		{trackpadPan}
-		{modifier}
-		{title}
-		{contrast}
-		onedgeDrop
+		on:edgeDrop
 	>
 		{#if $props.mermaid.length}
-			<FlowChart mermaid={$props.mermaid} mermaidConfig={$props.mermaidConfig} />
+			<FlowChart {...$props} />
 		{/if}
 			{@render children}
-			{@render $props.minimap as minimap}
-			{@render $props.controls as controls}
-			{@render $props.toggle as toggle}
-			{@render $props.drawer as drawer}
-			{@render $props.contrast as contrast}
 	</Graph>
 {:else}
 	<div
diff --git a/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte b/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte
index acd06f1ed..e1c7c57f0 100644
--- a/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte
+++ b/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte
@@ -11,36 +11,43 @@
 	const translation = transforms.translation;
 	const cursor = graph.cursor;
 
-	export let isMovable: boolean;
-	let animationFrameId: number;
-	let moving = false;
+	$props = {
+		isMovable: false
+	};
+
+	$state = {
+		animationFrameId: 0,
+		moving: false
+	};
 
 	$: graphTranslation = $translation;
 
 	// Reactive statement to update the transform attribute of the wrapper
 	$: transform = `translate(${graphTranslation.x}px, ${graphTranslation.y}px) scale(${$scale})`;
 
-	$: if (isMovable && !moving) {
-		moving = true;
-		animationFrameId = requestAnimationFrame(translate);
-	} else if (!isMovable || !moving) {
-		moving = false;
-		cancelAnimationFrame(animationFrameId);
-	}
+	$effect(() => {
+		if ($props.isMovable && !$state.moving) {
+			$state.moving = true;
+			$state.animationFrameId = requestAnimationFrame(translate);
+		} else if (!$props.isMovable || !$state.moving) {
+			$state.moving = false;
+			cancelAnimationFrame($state.animationFrameId);
+		}
+	});
 
 	function translate() {
 		$translation = updateTranslation(get(initialClickPosition), $cursor, transforms);
-		animationFrameId = requestAnimationFrame(translate);
+		$state.animationFrameId = requestAnimationFrame(translate);
 	}
 </script>
 
 <div
-	on:contextmenu|preventDefault|self
-	on:click|preventDefault|self
-	on:touchstart|preventDefault|self
-	style:transform
-	class="svelvet-graph-wrapper"
 	role="presentation"
+	class="svelvet-graph-wrapper"
+	style:transform
+	oncontextmenu={event => event.preventDefault()}
+	onclick={event => event.preventDefault()}
+	ontouchstart={event => event.preventDefault()}
 >
 	<slot />
 </div>
diff --git a/src/lib/renderers/GraphRenderer/GraphRenderer.svelte b/src/lib/renderers/GraphRenderer/GraphRenderer.svelte
index 0769433a4..3cff3b4e2 100644
--- a/src/lib/renderers/GraphRenderer/GraphRenderer.svelte
+++ b/src/lib/renderers/GraphRenderer/GraphRenderer.svelte
@@ -9,16 +9,26 @@
 	const graph = getContext<Graph>('graph');
 	const snapTo = getContext<number>('snapTo');
 
-	export let isMovable: boolean;
+	$props = {
+		isMovable: false
+	};
 
 	const activeGroup = graph.activeGroup;
 	const groups = graph.groups;
 	const initialNodePositions = graph.initialNodePositions;
 	const cursor = graph.cursor;
 
-	$: if ($activeGroup && $tracking) {
-		moveNodes(graph, snapTo);
-	}
+	$derived activeGroup = graph.activeGroup;
+	$derived tracking = tracking;
+	$derived cursor = cursor;
+	$derived initialNodePositions = initialNodePositions;
+	$derived groups = groups;
+
+	$effect(() => {
+		if ($activeGroup && $tracking) {
+			moveNodes(graph, snapTo);
+		}
+	});
 
 	function handleGroupClicked(event: CustomEvent) {
 		$tracking = true;
@@ -29,7 +39,7 @@
 	}
 </script>
 
-<ZoomPanWrapper {isMovable}>
+<ZoomPanWrapper {...$props}>
 	<slot />
-	<GroupBoxRenderer on:groupClick={handleGroupClicked} />
+	<GroupBoxRenderer ongroupclick={handleGroupClicked} />
 </ZoomPanWrapper>
diff --git a/src/lib/renderers/GroupBoxRenderer/GroupBoxRenderer.svelte b/src/lib/renderers/GroupBoxRenderer/GroupBoxRenderer.svelte
index bf6971e32..ea55a7eb7 100644
--- a/src/lib/renderers/GroupBoxRenderer/GroupBoxRenderer.svelte
+++ b/src/lib/renderers/GroupBoxRenderer/GroupBoxRenderer.svelte
@@ -6,8 +6,13 @@
 	const graph = getContext<Graph>('graph');
 
 	const groupBoxes = graph.groupBoxes;
+
+	function handleGroupClick(event: CustomEvent) {
+		const { groupName } = event.detail;
+		// Handle the group click event here
+	}
 </script>
 
 {#each Array.from($groupBoxes) as [id, group] (id)}
-	<GroupBoundingBox on:groupClick {...group} groupName={id} />
+	<GroupBoundingBox {...group} groupName={id} groupClick={handleGroupClick} />
 {/each}

From dd108a59bad5a198727d80eab712f623a5fb80ed Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 18:33:07 +0700
Subject: [PATCH 14/26] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0940e2982..07255e7b9 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@
 
 # Infinitely Customizable Node-Based User Interfaces with Svelvet!
 
-Svelvet is a lightweight Svelte component library for building interactive node-based user interfaces and diagrams.
+Svelfivet is a lightweight fork of the Svelvet library upgrade to Svelte 5.0 it is an intuitive library for building interactive node-based user interfaces and diagrams.
 
 [⚡ Website](https://www.svelvet.io/) | [📚 Documentation](https://svelvet.mintlify.app) | [⌨️ Blog](https://medium.com/@julianb1212_35672/svelvet-10-0-new-features-for-accessibility-and-improved-performance-3caaab9e54e9) | [💬 Twitter](https://twitter.com/SvelvetOSLabs) | [💼 LinkedIn](https://www.linkedin.com/company/svelvet/)
 

From 09d994240c4066fc75c9a722410a0b5ac9e340d8 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 18:59:56 +0700
Subject: [PATCH 15/26] Refactor components to function-based syntax

Refactor components to use function-based syntax instead of class-based syntax.

* **Controls.svelte**
  - Refactor to use function-based syntax.
  - Replace class-based syntax with function-based syntax.
  - Update event handling to use callback props.

* **Graph.svelte**
  - Refactor to use function-based syntax.
  - Replace class-based syntax with function-based syntax.
  - Update event handling to use callback props.
  - Replace `$props` with individual prop declarations.
  - Update reactivity syntax to use `$derived` and `$effect`.
---
 src/lib/components/Controls/Controls.svelte |  21 +-
 src/lib/containers/Graph/Graph.svelte       | 440 ++++++++++----------
 2 files changed, 227 insertions(+), 234 deletions(-)

diff --git a/src/lib/components/Controls/Controls.svelte b/src/lib/components/Controls/Controls.svelte
index 17539e3fd..b856c4409 100644
--- a/src/lib/components/Controls/Controls.svelte
+++ b/src/lib/components/Controls/Controls.svelte
@@ -7,6 +7,14 @@
 	import { tracking } from '$lib/stores';
 	import Icon from '$lib/assets/icons/Icon.svelte';
 
+	const transforms = getContext<Graph['transforms']>('transforms');
+	const dimensions = getContext<Graph['dimensions']>('dimensions');
+	const locked = getContext<Graph['locked']>('locked');
+	const groups = getContext<Graph['groups']>('groups');
+	const bounds = getContext<Graph['bounds']>('bounds');
+
+	const { translation } = transforms;
+
 	$props = {
 		increment: 0.1,
 		horizontal: false,
@@ -20,20 +28,10 @@
 		onUnhideAll: null
 	};
 
-	const transforms = getContext<Graph['transforms']>('transforms');
-	const dimensions = getContext<Graph['dimensions']>('dimensions');
-	const locked = getContext<Graph['locked']>('locked');
-	const groups = getContext<Graph['groups']>('groups');
-	const bounds = getContext<Graph['bounds']>('bounds');
-
-	const { translation } = transforms;
-
 	$derived hidden = $groups.hidden.nodes;
 
-	const nodeBounds = bounds.nodeBounds;
-
 	function unhideAll() {
-		hidden.set(new Set());
+		$hidden = new Set();
 		if ($props.onUnhideAll) $props.onUnhideAll();
 	}
 
@@ -57,7 +55,6 @@
 	}
 
 	function lock() {
-		// Toggle lock boolean
 		$locked = !$locked;
 		if ($props.onLock) $props.onLock();
 	}
diff --git a/src/lib/containers/Graph/Graph.svelte b/src/lib/containers/Graph/Graph.svelte
index 77b12de64..313a25aa2 100644
--- a/src/lib/containers/Graph/Graph.svelte
+++ b/src/lib/containers/Graph/Graph.svelte
@@ -19,50 +19,46 @@
 </script>
 
 <script lang="ts">
-	$props = {
-		graph: null,
-		width: 0,
-		height: 0,
-		minimap: false,
-		controls: false,
-		toggle: false,
-		fixedZoom: false,
-		pannable: true,
-		disableSelection: false,
-		ZOOM_INCREMENT: 0.1,
-		PAN_INCREMENT: 50,
-		PAN_TIME: 250,
-		MAX_SCALE: 3,
-		MIN_SCALE: 0.2,
-		selectionColor: null,
-		backgroundExists: false,
-		fitView: false,
-		trackpadPan: false,
-		modifier: 'meta',
-		theme: 'light',
-		title: '',
-		drawer: false,
-		contrast: false
-	};
-
-	$state = {
-		animationFrameId: 0,
-		initialDistance: 0,
-		initialScale: 1,
-		anchor: { x: 0, y: 0, top: 0, left: 0 },
-		selecting: false,
-		creating: false,
-		adding: false,
-		isMovable: false,
-		pinching: false,
-		initialFit: false,
-		graphDimensions: null,
-		toggleComponent: null,
-		minimapComponent: null,
-		controlsComponent: null,
-		drawerComponent: null,
-		contrastComponent: null
-	};
+	export let graph: Graph;
+	export let width: number = 0;
+	export let height: number = 0;
+	export let minimap: boolean = false;
+	export let controls: boolean = false;
+	export let toggle: boolean = false;
+	export let fixedZoom: boolean = false;
+	export let pannable: boolean = true;
+	export let disableSelection: boolean = false;
+	export let ZOOM_INCREMENT: number = 0.1;
+	export let PAN_INCREMENT: number = 50;
+	export let PAN_TIME: number = 250;
+	export let MAX_SCALE: number = 3;
+	export let MIN_SCALE: number = 0.2;
+	export let selectionColor: CSSColorString | null = null;
+	export let backgroundExists: boolean = false;
+	export let fitView: boolean = false;
+	export let trackpadPan: boolean = false;
+	export let modifier: string = 'meta';
+	export let theme: string = 'light';
+	export let title: string = '';
+	export let drawer: boolean = false;
+	export let contrast: boolean = false;
+
+	let animationFrameId: number = 0;
+	let initialDistance: number = 0;
+	let initialScale: number = 1;
+	let anchor = { x: 0, y: 0, top: 0, left: 0 };
+	let selecting: boolean = false;
+	let creating: boolean = false;
+	let adding: boolean = false;
+	let isMovable: boolean = false;
+	let pinching: boolean = false;
+	let initialFit: boolean = false;
+	let graphDimensions: GraphDimensions | null = null;
+	let toggleComponent: ComponentType | null = null;
+	let minimapComponent: ComponentType | null = null;
+	let controlsComponent: ComponentType | null = null;
+	let drawerComponent: ComponentType | null = null;
+	let contrastComponent: ComponentType | null = null;
 
 	const dispatch = (eventName, detail) => {
 		const event = new CustomEvent(eventName, { detail });
@@ -75,58 +71,58 @@
 	const mounted = writable(0);
 	const graphDOMElement: Writable<HTMLElement | null> = writable(null);
 
-	const cursor = $props.graph.cursor;
-	const scale = $props.graph.transforms.scale;
-	const dimensionsStore = $props.graph.dimensions;
-	const translation = $props.graph.transforms.translation;
-	const groups = $props.graph.groups;
-	const groupBoxes = $props.graph.groupBoxes;
-	const selected = $groups.selected.nodes;
-	const activeGroup = $props.graph.activeGroup;
-	const initialNodePositions = $props.graph.initialNodePositions;
-	const editing = $props.graph.editing;
-	const nodeBounds = $props.graph.bounds.nodeBounds;
-
-	$derived dimensions = $dimensionsStore;
-
-	$effect(() => {
-		if ($props.theme) document.documentElement.setAttribute('svelvet-theme', $props.theme);
-	});
+	const cursor = graph.cursor;
+	const scale = graph.transforms.scale;
+	const dimensionsStore = graph.dimensions;
+	const translation = graph.transforms.translation;
+	const groups = graph.groups;
+	const groupBoxes = graph.groupBoxes;
+	const selected = groups.selected.nodes;
+	const activeGroup = graph.activeGroup;
+	const initialNodePositions = graph.initialNodePositions;
+	const editing = graph.editing;
+	const nodeBounds = graph.bounds.nodeBounds;
+
+	$: dimensions = dimensionsStore;
+
+	$: {
+		if (theme) document.documentElement.setAttribute('svelvet-theme', theme);
+	}
 
-	$effect(() => {
-		if (!$state.initialFit && $props.fitView) {
+	$: {
+		if (!initialFit && fitView) {
 			fitIntoView();
 		}
-	});
+	}
 
-	$effect(() => {
-		if ($props.toggle && !$state.toggleComponent) loadToggle();
-	});
+	$: {
+		if (toggle && !toggleComponent) loadToggle();
+	}
 
-	$effect(() => {
-		if ($props.minimap && !$state.minimapComponent) loadMinimap();
-	});
+	$: {
+		if (minimap && !minimapComponent) loadMinimap();
+	}
 
-	$effect(() => {
-		if ($props.controls && !$state.controlsComponent) loadControls();
-	});
+	$: {
+		if (controls && !controlsComponent) loadControls();
+	}
 
-	$effect(() => {
-		if ($props.drawer && !$state.drawerComponent) loadDrawer();
-	});
+	$: {
+		if (drawer && !drawerComponent) loadDrawer();
+	}
 
-	$effect(() => {
-		if ($props.contrast && !$state.contrastComponent) loadContrast();
-	});
+	$: {
+		if (contrast && !contrastComponent) loadContrast();
+	}
 
 	const cursorAnchor: CursorAnchor = {
 		id: null,
-		position: $props.graph.cursor,
+		position: graph.cursor,
 		offset: writable({ x: 0, y: 0 }),
 		connected: writable(new Set()),
 		dynamic: writable(false),
 		edge: null,
-		edgeColor: writable(null),
+			edgeColor: writable(null),
 		direction: writable('self'),
 		inputKey: null,
 		type: 'output',
@@ -137,7 +133,7 @@
 		node: {
 			zIndex: writable(Infinity),
 			rotating: writable(false),
-			position: $props.graph.cursor,
+			position: graph.cursor,
 			dimensions: { width: writable(0), height: writable(0) }
 		}
 	};
@@ -145,14 +141,14 @@
 	setContext('graphDOMElement', graphDOMElement);
 	setContext('cursorAnchor', cursorAnchor);
 	setContext('duplicate', duplicate);
-	setContext('graph', $props.graph);
-	setContext('transforms', $props.graph.transforms);
-	setContext('dimensions', $props.graph.dimensions);
-	setContext('locked', $props.graph.locked);
-	setContext('groups', $props.graph.groups);
-	setContext('bounds', $props.graph.bounds);
-	setContext('edgeStore', $props.graph.edges);
-	setContext('nodeStore', $props.graph.nodes);
+	setContext('graph', graph);
+	setContext('transforms', graph.transforms);
+	setContext('dimensions', graph.dimensions);
+	setContext('locked', graph.locked);
+	setContext('groups', graph.groups);
+	setContext('bounds', graph.bounds);
+	setContext('edgeStore', graph.edges);
+	setContext('nodeStore', graph.nodes);
 	setContext('mounted', mounted);
 
 	onMount(() => {
@@ -162,39 +158,39 @@
 	async function fitIntoView() {
 		await tick();
 		tracking.set(true);
-		const { x, y, scale } = calculateFitView($state.graphDimensions, $nodeBounds);
+		const { x, y, scale } = calculateFitView(graphDimensions, nodeBounds);
 		if (x !== null && y !== null && scale !== null) {
-			$props.graph.transforms.scale.set(scale);
+			graph.transforms.scale.set(scale);
 			translation.set({ x, y });
 		}
 		tracking.set(false);
-		$state.initialFit = true;
+		initialFit = true;
 	}
+
 	async function loadMinimap() {
-		$state.minimapComponent = (await import('$lib/components/Minimap/Minimap.svelte')).default;
+		minimapComponent = (await import('$lib/components/Minimap/Minimap.svelte')).default;
 	}
 
 	async function loadToggle() {
-		$state.toggleComponent = (await import('$lib/components/ThemeToggle/ThemeToggle.svelte')).default;
+		toggleComponent = (await import('$lib/components/ThemeToggle/ThemeToggle.svelte')).default;
 	}
 
 	async function loadControls() {
-		$state.controlsComponent = (await import('$lib/components/Controls/Controls.svelte')).default;
+		controlsComponent = (await import('$lib/components/Controls/Controls.svelte')).default;
 	}
 
 	async function loadDrawer() {
-		$state.drawerComponent = (await import('$lib/components/Drawer/DrawerController.svelte')).default;
+		drawerComponent = (await import('$lib/components/Drawer/DrawerController.svelte')).default;
 	}
 
 	async function loadContrast() {
-		$state.contrastComponent = (await import('$lib/components/ContrastTheme/ContrastTheme.svelte'))
-			.default;
+		contrastComponent = (await import('$lib/components/ContrastTheme/ContrastTheme.svelte')).default;
 	}
 
 	function updateGraphDimensions() {
-		if (! $graphDOMElement) return;
-		const DOMRect = $graphDOMElement.getBoundingClientRect();
-		$state.graphDimensions = {
+		if (!graphDOMElement) return;
+		const DOMRect = graphDOMElement.getBoundingClientRect();
+		graphDimensions = {
 			top: DOMRect.top,
 			left: DOMRect.left,
 			bottom: DOMRect.bottom,
@@ -203,19 +199,19 @@
 			height: DOMRect.height
 		};
 
-		$props.graph.dimensions.set($state.graphDimensions);
-		if ($props.fitView === 'resize') fitIntoView();
+		graph.dimensions.set(graphDimensions);
+		if (fitView === 'resize') fitIntoView();
 	}
 
 	function onMouseUp(e: MouseEvent | TouchEvent) {
-		if ($state.creating) {
+		if (creating) {
 			const groupName = generateKey();
-			const groupKey: GroupKey = `${groupName}/${$props.graph.id}`;
+			const groupKey: GroupKey = `${groupName}/${graph.id}`;
 			const cursorPosition = get(cursor);
-			const width = cursorPosition.x - $initialClickPosition.x;
-			const height = cursorPosition.y - $initialClickPosition.y;
-			const top = Math.min($initialClickPosition.y, $initialClickPosition.y + height);
-			const left = Math.min($initialClickPosition.x, $initialClickPosition.x + width);
+			const width = cursorPosition.x - initialClickPosition.x;
+			const height = cursorPosition.y - initialClickPosition.y;
+			const top = Math.min(initialClickPosition.y, initialClickPosition.y + height);
+			const left = Math.min(initialClickPosition.x, initialClickPosition.x + width);
 
 			const dimensions = {
 				width: writable(Math.abs(width)),
@@ -236,128 +232,128 @@
 
 			groupBoxes.add(groupBox, groupKey);
 
-			Array.from($selected).forEach((node) => {
+			Array.from(selected).forEach((node) => {
 				node.group.set(groupKey);
 			});
 
 			groups.update((groups) => {
 				const newGroup: Group = {
 					parent: writable(groupBox),
-					nodes: writable(new Set([...$selected, groupBox]))
+					nodes: writable(new Set([...selected, groupBox]))
 				};
 				groups[groupKey] = newGroup;
 				return groups;
 			});
 
-			$selected = new Set();
+			selected = new Set();
 
-			$state.creating = false;
-			$state.selecting = false;
+			creating = false;
+			selecting = false;
 		}
 
-		if ($activeGroup) {
-			const nodeGroupArray = Array.from(get($groups[$activeGroup].nodes));
+		if (activeGroup) {
+			const nodeGroupArray = Array.from(get(groups[activeGroup].nodes));
 			nodeGroupArray.forEach((node) => node.moving.set(false));
 		}
-		const cursorEdge = $props.graph.edges.get('cursor');
+		const cursorEdge = graph.edges.get('cursor');
 
 		if (cursorEdge) {
-			$props.graph.edges.delete('cursor');
+			graph.edges.delete('cursor');
 			if (!cursorEdge.disconnect)
 				dispatch('edgeDrop', {
 					cursor: get(cursor),
 					source: {
-						node: $connectingFrom?.anchor.node.id.slice(2),
-						anchor: $connectingFrom?.anchor.id.split('/')[0].slice(2)
+						node: connectingFrom?.anchor.node.id.slice(2),
+						anchor: connectingFrom?.anchor.id.split('/')[0].slice(2)
 					}
 				});
 		}
-		$activeGroup = null;
-		$initialClickPosition = { x: 0, y: 0 };
-		$initialNodePositions = [];
-		$state.selecting = false;
-		$state.isMovable = false;
-		$tracking = false;
+		activeGroup = null;
+		initialClickPosition = { x: 0, y: 0 };
+		initialNodePositions = [];
+		selecting = false;
+		isMovable = false;
+		tracking = false;
 
 		if (!e.shiftKey) {
 			connectingFrom.set(null);
 		}
 
-		$state.anchor.y = 0;
-		$state.anchor.x = 0;
+		anchor.y = 0;
+		anchor.x = 0;
 	}
 
 	function onMouseDown(e: MouseEvent) {
-		if (!$props.pannable && !(e.shiftKey || e.metaKey)) return;
+		if (!pannable && !(e.shiftKey || e.metaKey)) return;
 		if (e.button === 2) return;
-		if ($graphDOMElement) $graphDOMElement.focus();
+		if (graphDOMElement) graphDOMElement.focus();
 
 		const { clientX, clientY } = e;
 
-		$initialClickPosition = get(cursor);
+		initialClickPosition = get(cursor);
 
 		if (e.shiftKey || e.metaKey) {
 			e.preventDefault();
-			$state.selecting = true;
-			const { top, left } = $state.dimensions;
-			$state.anchor.y = clientY - top;
-			$state.anchor.x = clientX - left;
-			$state.anchor.top = top;
-			$state.anchor.left = left;
+			selecting = true;
+			const { top, left } = dimensions;
+			anchor.y = clientY - top;
+			anchor.x = clientX - left;
+			anchor.top = top;
+			anchor.left = left;
 			if (e.shiftKey && e.metaKey) {
-				$state.creating = true;
+				creating = true;
 			} else {
-				$state.creating = false;
+				creating = false;
 			}
 
 			if (e.metaKey && !e.shiftKey) {
-				$state.adding = true;
+				adding = true;
 			} else {
-				$state.adding = false;
+				adding = false;
 			}
 		} else {
-			$state.isMovable = true;
-			$selected = new Set();
-			$selected = $selected;
+			isMovable = true;
+			selected = new Set();
+			selected = selected;
 		}
 	}
 
 	function onTouchStart(e: TouchEvent) {
-		$selected = new Set();
-		$selected = $selected;
+		selected = new Set();
+		selected = selected;
 
-		$initialClickPosition = get(cursor);
+		initialClickPosition = get(cursor);
 
-		$state.isMovable = true;
+		isMovable = true;
 		if (e.touches.length === 2) {
 			startPinching();
-			$state.initialDistance = $touchDistance;
-			$state.initialScale = $scale;
+			initialDistance = touchDistance;
+			initialScale = scale;
 		}
 	}
 
 	function onTouchEnd() {
-		$state.isMovable = false;
-		$state.pinching = false;
+		isMovable = false;
+		pinching = false;
 	}
 
 	function startPinching() {
-		if (!$state.pinching) {
-			$state.pinching = true;
-			$state.animationFrameId = requestAnimationFrame(handlePinch);
+		if (!pinching) {
+			pinching = true;
+			animationFrameId = requestAnimationFrame(handlePinch);
 		}
 	}
 
 	function handlePinch() {
-		if (!$state.pinching) {
-			cancelAnimationFrame($state.animationFrameId);
+		if (!pinching) {
+			cancelAnimationFrame(animationFrameId);
 			return;
 		}
 
-		const newDistance = $touchDistance;
-		const scaleFactor = newDistance / $state.initialDistance;
-		$scale = $state.initialScale * scaleFactor;
-		$state.animationFrameId = requestAnimationFrame(handlePinch);
+		const newDistance = touchDistance;
+		const scaleFactor = newDistance / initialDistance;
+		scale = initialScale * scaleFactor;
+		animationFrameId = requestAnimationFrame(handlePinch);
 	}
 
 	function handleKeyDown(e: KeyboardEvent) {
@@ -366,20 +362,20 @@
 
 		if (target.tagName == 'INPUT' || target.tagName == 'TEXTAREA') return;
 
-		if (code === 'KeyA' && e[`${$props.modifier}Key`]) {
-			const unlockedNodes = $props.graph.nodes.getAll().filter((node) => !get(node.locked));
-			$selected = new Set(unlockedNodes);
+		if (code === 'KeyA' && e[`${modifier}Key`]) {
+			const unlockedNodes = graph.nodes.getAll().filter((node) => !get(node.locked));
+			selected = new Set(unlockedNodes);
 		} else if (isArrow(key)) {
 			handleArrowKey(key as Arrow, e);
 		} else if (key === '=') {
-			zoomAndTranslate(-1, $props.graph.dimensions, $props.graph.transforms, $props.ZOOM_INCREMENT);
+			zoomAndTranslate(-1, graph.dimensions, graph.transforms, ZOOM_INCREMENT);
 		} else if (key === '-') {
-			zoomAndTranslate(1, $props.graph.dimensions, $props.graph.transforms, $props.ZOOM_INCREMENT);
+			zoomAndTranslate(1, graph.dimensions, graph.transforms, ZOOM_INCREMENT);
 		} else if (key === '0') {
 			fitIntoView();
 		} else if (key === 'Control') {
-			$groups['selected'].nodes.set(new Set());
-		} else if (code === 'KeyD' && e[`${$props.modifier}Key`]) {
+			groups['selected'].nodes.set(new Set());
+		} else if (code === 'KeyD' && e[`${modifier}Key`]) {
 			duplicate.set(true);
 			setTimeout(() => {
 				duplicate.set(false);
@@ -387,16 +383,16 @@
 		} else if (key === 'Tab' && (e.altKey || e.ctrlKey)) {
 			selectNextNode();
 		} else if (key === 'l') {
-			$props.theme = $props.theme === 'light' ? 'dark' : 'light';
+			theme = theme === 'light' ? 'dark' : 'light';
 		} else if (key === 'd') {
-			$props.drawer = !$props.drawer;
+			drawer = !drawer;
 		} else if (key === 'm') {
-			$props.minimap = !$props.minimap;
+			minimap = !minimap;
 		} else if (key === 'c') {
-			$props.controls = !$props.controls;
+			controls = !controls;
 		} else if (key === 'e') {
-			const node = Array.from($selected)[0];
-			$props.graph.editing.set(node);
+			const node = Array.from(selected)[0];
+			graph.editing.set(node);
 		} else {
 			return;
 		}
@@ -405,13 +401,13 @@
 	}
 
 	function selectNextNode() {
-		const nodes = $props.graph.nodes.getAll();
+		const nodes = graph.nodes.getAll();
 
-		const currentIndex = nodes.findIndex((node) => $selected.has(node));
+		const currentIndex = nodes.findIndex((node) => selected.has(node));
 		const nextIndex = currentIndex + 1;
 
-		$selected.delete(nodes[currentIndex]);
-		$selected.add(nodes[nextIndex]);
+		selected.delete(nodes[currentIndex]);
+		selected.add(nodes[nextIndex]);
 	}
 
 	function handleKeyUp(e: KeyboardEvent) {
@@ -426,32 +422,32 @@
 	}
 
 	function handleScroll(e: WheelEvent) {
-		if ($props.fixedZoom) return;
+		if (fixedZoom) return;
 		const multiplier = e.shiftKey ? 0.15 : 1;
 		const { clientX, clientY, deltaY } = e;
-		const currentTranslation = $translation;
+		const currentTranslation = translation;
 		const pointerPosition = { x: clientX, y: clientY };
 
-		if (($props.trackpadPan || e.metaKey) && deltaY % 1 === 0) {
-			$translation = {
-				x: ($translation.x -= e.deltaX),
-				y: ($translation.y -= e.deltaY)
+		if ((trackpadPan || e.metaKey) && deltaY % 1 === 0) {
+			translation = {
+				x: (translation.x -= e.deltaX),
+				y: (translation.y -= e.deltaY)
 			};
 
 			return;
 		}
 
-		if (($scale >= $props.MAX_SCALE && deltaY < 0) || ($scale <= $props.MIN_SCALE && deltaY > 0)) return;
+		if ((scale >= MAX_SCALE && deltaY < 0) || (scale <= MIN_SCALE && deltaY > 0)) return;
 
 		const scrollAdjustment = Math.min(0.009 * multiplier * Math.abs(deltaY), 0.08);
-		const newScale = calculateZoom($scale, Math.sign(deltaY), scrollAdjustment);
+		const newScale = calculateZoom(scale, Math.sign(deltaY), scrollAdjustment);
 
 		const newTranslation = calculateTranslation(
-			$scale,
+			scale,
 			newScale,
 			currentTranslation,
 			pointerPosition,
-			$state.graphDimensions
+			graphDimensions
 		);
 
 		scale.set(newScale);
@@ -463,30 +459,30 @@
 		const start = performance.now();
 		const direction = key === 'ArrowLeft' || key === 'ArrowUp' ? 1 : -1;
 		const leftRight = key === 'ArrowLeft' || key === 'ArrowRight';
-		const startOffset = leftRight ? $translation.x : $translation.y;
-		const endOffset = startOffset + direction * $props.PAN_INCREMENT * multiplier;
+		const startOffset = leftRight ? translation.x : translation.y;
+		const endOffset = startOffset + direction * PAN_INCREMENT * multiplier;
 
 		if (!activeIntervals[key]) {
 			let interval = setInterval(() => {
 				const time = performance.now() - start;
 
-				if ($selected.size === 0) {
-					const movement = startOffset + (endOffset - startOffset) * (time / $props.PAN_TIME);
+				if (selected.size === 0) {
+					const movement = startOffset + (endOffset - startOffset) * (time / PAN_TIME);
 					translation.set({
-						x: leftRight ? movement : $translation.x,
-						y: leftRight ? $translation.y : movement
+						x: leftRight ? movement : translation.x,
+						y: leftRight ? translation.y : movement
 					});
 				} else {
 					const delta = {
 						x: leftRight ? -direction * 2 : 0,
 						y: leftRight ? 0 : -direction * 2
 					};
-					Array.from($selected).forEach((node) => {
+					Array.from(selected).forEach((node) => {
 						const currentPosition = get(node.position);
 						let groupBox: GroupBox | undefined;
 						const groupName = get(node.group);
 
-						const groupBoxes = get($props.graph.groupBoxes);
+						const groupBoxes = get(graph.groupBoxes);
 
 						if (groupName) groupBox = groupBoxes.get(groupName);
 						if (groupBox) {
@@ -507,55 +503,55 @@
 
 <section
 	role="presentation"
-	id={$props.graph.id}
+	id={graph.id}
 	class="svelvet-wrapper"
 	{title}
-	style:width={$props.width ? $props.width + 'px' : '100%'}
-	style:height={$props.height ? $props.height + 'px' : '100%'}
-	style:cursor={$props.pannable ? 'move' : 'default'}
+	style:width={width ? width + 'px' : '100%'}
+	style:height={height ? height + 'px' : '100%'}
+	style:cursor={pannable ? 'move' : 'default'}
 	onwheel={handleScroll}
 	onmousedown={onMouseDown}
 	ontouchend={onMouseUp}
 	ontouchstart={onTouchStart}
 	onkeydown={handleKeyDown}
 	onkeyup={handleKeyUp}
-	bind:this={$graphDOMElement}
+	bind:this={graphDOMElement}
 	tabindex={0}
 >
 	<GraphRenderer {isMovable}>
 		{#if $editing}
 			<Editor editing={$editing} />
 		{/if}
-		{@render $props.children}
+		{@render children}
 	</GraphRenderer>
 
-	{#if $props.backgroundExists}
-		{@render $props.background}
+	{#if backgroundExists}
+		{@render background}
 	{:else}
 		<Background />
 	{/if}
-	{#if $props.minimap}
-		<svelte:component this={$state.minimapComponent} />
+	{#if minimap}
+		<svelte:component this={minimapComponent} />
 	{/if}
-	{#if $props.controls}
-		<svelte:component this={$state.controlsComponent} />
+	{#if controls}
+		<svelte:component this={controlsComponent} />
 	{/if}
-	{#if $props.toggle}
-		<svelte:component this={$state.toggleComponent} />
+	{#if toggle}
+		<svelte:component this={toggleComponent} />
 	{/if}
-	{#if $props.drawer}
-		<svelte:component this={$state.drawerComponent} />
+	{#if drawer}
+		<svelte:component this={drawerComponent} />
 	{/if}
-	{#if $props.contrast}
-		<svelte:component this={$state.contrastComponent} />
+	{#if contrast}
+		<svelte:component this={contrastComponent} />
 	{/if}
-	{@render $props.minimap}
-	{@render $props.drawer}
-	{@render $props.controls}
-	{@render $props.toggle}
-	{@render $props.contrast}
-	{#if $state.selecting && !$props.disableSelection}
-		<SelectionBox {creating} {anchor} graph={$props.graph} {adding} color={$props.selectionColor} />
+	{@render minimap}
+	{@render drawer}
+	{@render controls}
+	{@render toggle}
+	{@render contrast}
+	{#if selecting && !disableSelection}
+		<SelectionBox {creating} {anchor} graph={graph} {adding} color={selectionColor} />
 	{/if}
 </section>
 

From f4698ea36a118972834b0eefede1e974f8b51c73 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 19:49:25 +0700
Subject: [PATCH 16/26] Improve code robustness and add more features

Add error handling and validation to various components to make the code more robust.

* **Drawer Components**
  - Add error handling for drag-and-drop events in `Drawer.svelte`.
  - Add validation for anchor properties in `DrawerAnchor.svelte`.
  - Add error handling for edge property inputs in `DrawerEdge.svelte`.
  - Add validation for node properties in `DrawerNode.svelte`.

* **Edge Component**
  - Add validation for edge properties in `Edge.svelte`.

* **Editor Component**
  - Add error handling for node deletion and resizing functions in `Editor.svelte`.

* **FlowChart Component**
  - Add error handling for node positioning logic in `FlowChart.svelte`.

* **Group Component**
  - Add detailed comments to explain the purpose of each function and variable in `Group.svelte`.

* **Minimap Component**
  - Add error handling for node visibility toggling in `Minimap.svelte`.

* **Node Component**
  - Add validation for node properties in `Node.svelte`.

* **ThemeToggle Component**
  - Add error handling for theme toggling and graph state saving functions in `ThemeToggle.svelte`.

* **Graph Container**
  - Add error handling for various event handlers in `Graph.svelte`.

* **DrawerController Component**
  - Add detailed comments to explain the purpose of each function and variable in `DrawerController.svelte`.
---
 src/lib/components/Drawer/Drawer.svelte       |  22 +-
 src/lib/components/Drawer/DrawerAnchor.svelte |  34 ++
 .../components/Drawer/DrawerController.svelte |  37 +-
 src/lib/components/Drawer/DrawerEdge.svelte   |  36 +-
 src/lib/components/Drawer/DrawerNode.svelte   |  49 ++
 src/lib/components/Editor/Editor.svelte       |  60 +-
 src/lib/components/FlowChart/FlowChart.svelte |  18 +-
 src/lib/components/Group/Group.svelte         |   8 +
 src/lib/components/Minimap/Minimap.svelte     |  14 +-
 src/lib/components/Node/Node.svelte           |  51 ++
 .../components/ThemeToggle/ThemeToggle.svelte |  80 +--
 src/lib/containers/Graph/Graph.svelte         | 520 ++++++++++--------
 12 files changed, 597 insertions(+), 332 deletions(-)

diff --git a/src/lib/components/Drawer/Drawer.svelte b/src/lib/components/Drawer/Drawer.svelte
index b844d3a7f..64710d457 100644
--- a/src/lib/components/Drawer/Drawer.svelte
+++ b/src/lib/components/Drawer/Drawer.svelte
@@ -71,16 +71,20 @@
 	};
 
 	const handleDrop = (e: MouseEvent): void => {
-		e.stopPropagation();
-		const moveEvent = new MouseEvent('mousemove', {
-			clientX: e.clientX,
-			clientY: e.clientY,
-			bubbles: true
-		});
-		const target = e.target as HTMLElement;
-		target.dispatchEvent(moveEvent);
+		try {
+			e.stopPropagation();
+			const moveEvent = new MouseEvent('mousemove', {
+				clientX: e.clientX,
+				clientY: e.clientY,
+				bubbles: true
+			});
+			const target = e.target as HTMLElement;
+			target.dispatchEvent(moveEvent);
 
-		$state.defaultNodes = $defaultNodePropsStore;
+			$state.defaultNodes = $defaultNodePropsStore;
+		} catch (error) {
+			console.error('Error handling drop event:', error);
+		}
 	};
 </script>
 
diff --git a/src/lib/components/Drawer/DrawerAnchor.svelte b/src/lib/components/Drawer/DrawerAnchor.svelte
index c100d09a9..2bdb1c895 100644
--- a/src/lib/components/Drawer/DrawerAnchor.svelte
+++ b/src/lib/components/Drawer/DrawerAnchor.svelte
@@ -200,6 +200,40 @@
 			selfAnchorCounter.set(anchorsCreated.self.length);
 		}
 	};
+
+	// Validation for anchor properties
+	const validateAnchorProps = () => {
+		if ($state.invisible !== undefined && typeof $state.invisible !== 'boolean') {
+			throw new Error('Invalid value for invisible property');
+		}
+		if ($state.nodeConnect !== undefined && typeof $state.nodeConnect !== 'boolean') {
+			throw new Error('Invalid value for nodeConnect property');
+		}
+		if ($state.input !== undefined && typeof $state.input !== 'boolean') {
+			throw new Error('Invalid value for input property');
+		}
+		if ($state.output !== undefined && typeof $state.output !== 'boolean') {
+			throw new Error('Invalid value for output property');
+		}
+		if ($state.multiple !== undefined && typeof $state.multiple !== 'boolean') {
+			throw new Error('Invalid value for multiple property');
+		}
+		if ($state.direction !== undefined && !['north', 'south', 'east', 'west', 'self'].includes($state.direction)) {
+			throw new Error('Invalid value for direction property');
+		}
+		if ($state.dynamic !== undefined && typeof $state.dynamic !== 'boolean') {
+			throw new Error('Invalid value for dynamic property');
+		}
+		if ($state.anchorEdgeLabel !== undefined && typeof $state.anchorEdgeLabel !== 'string') {
+			throw new Error('Invalid value for anchorEdgeLabel property');
+		}
+		if ($state.anchorLocked !== undefined && typeof $state.anchorLocked !== 'boolean') {
+			throw new Error('Invalid value for anchorLocked property');
+		}
+		if ($state.anchorBgColor !== undefined && typeof $state.anchorBgColor !== 'string') {
+			throw new Error('Invalid value for anchorBgColor property');
+		}
+	};
 </script>
 
 <div id="anchorContainer">
diff --git a/src/lib/components/Drawer/DrawerController.svelte b/src/lib/components/Drawer/DrawerController.svelte
index b6be0abbe..18ba92464 100644
--- a/src/lib/components/Drawer/DrawerController.svelte
+++ b/src/lib/components/Drawer/DrawerController.svelte
@@ -8,23 +8,25 @@
 	import Icon from '$lib/assets/icons/Icon.svelte';
 	import { onMount, onDestroy } from 'svelte';
 
+	// State variables to manage the drawer and its components
 	$state = {
-		isOpen: false,
-		nodeContainerOpen: false,
-		edgeContainerOpen: false,
-		anchorContainerOpen: false,
-		nav: null,
-		drawerBtn: null,
-		nodeBtn: null,
-		edgeBtn: null,
-		anchorBtn: null,
-		drawerContents: null,
-		nodeContainer: null,
-		anchorContainer: null,
-		edgeContainer: null,
-		currentComponent: 'Node'
+		isOpen: false, // Indicates if the drawer is open or closed
+		nodeContainerOpen: false, // Indicates if the node container is open
+		edgeContainerOpen: false, // Indicates if the edge container is open
+		anchorContainerOpen: false, // Indicates if the anchor container is open
+		nav: null, // Reference to the navigation element
+		drawerBtn: null, // Reference to the drawer button element
+		nodeBtn: null, // Reference to the node button element
+		edgeBtn: null, // Reference to the edge button element
+		anchorBtn: null, // Reference to the anchor button element
+		drawerContents: null, // Reference to the drawer contents element
+		nodeContainer: null, // Reference to the node container element
+		anchorContainer: null, // Reference to the anchor container element
+		edgeContainer: null, // Reference to the edge container element
+		currentComponent: 'Node' // Indicates the current component being displayed
 	};
 
+	// Handle the drag start event for creating node props
 	const handleDragStart = (e: DragEvent) => {
 		if (!e.dataTransfer) return;
 		e.dataTransfer.dropEffect = 'move';
@@ -36,6 +38,7 @@
 		createNodeProps(edgeCreated, anchorProps);
 	};
 
+	// Toggle the drawer open or closed
 	const handleDrawer = () => {
 		if (!$state.isOpen) {
 			$state.isOpen = true;
@@ -58,6 +61,7 @@
 		}
 	};
 
+	// Toggle the node container open or closed
 	const handleNodeContainer = () => {
 		if (!$state.nodeContainerOpen) {
 			$state.nodeContainerOpen = true;
@@ -72,6 +76,8 @@
 			$state.anchorBtn.style.borderBottom = 'none';
 		}
 	};
+
+	// Toggle the anchor container open or closed
 	const handleAnchorContainer = () => {
 		if (!$state.anchorContainerOpen) {
 			$state.anchorContainerOpen = true;
@@ -86,6 +92,8 @@
 				'3px solid var(--prop-drawer-button-text-color,var(--drawer-button-text-color, var(--default-drawer-button-text-color)))';
 		}
 	};
+
+	// Toggle the edge container open or closed
 	const handleEdgeContainer = () => {
 		if (!$state.edgeContainerOpen) {
 			$state.edgeContainerOpen = true;
@@ -101,6 +109,7 @@
 		}
 	};
 
+	// Handle key press events for toggling the drawer and components
 	const handleKeyPress = (e: KeyboardEvent) => {
 		if (e.key === 'D') {
 			handleDrawer();
diff --git a/src/lib/components/Drawer/DrawerEdge.svelte b/src/lib/components/Drawer/DrawerEdge.svelte
index 100f18a65..eb3a8823f 100644
--- a/src/lib/components/Drawer/DrawerEdge.svelte
+++ b/src/lib/components/Drawer/DrawerEdge.svelte
@@ -12,7 +12,7 @@
 	let edgeLabel: string | undefined;
 	let labelColor: CSSColorString | undefined;
 	let textColor: CSSColorString | undefined;
-	// let edgeClick: () => void | null; // Stretch feature
+	// let edgeClick: () => void | null; // Stretch feature, needs edgeClick to function
 	let targetColor: CSSColorString | undefined; // Stretch feature, needs edgeClick to function
 
 	export function createEdgeProps() {
@@ -76,6 +76,40 @@
 		const target = e.target as HTMLFormElement;
 		target.reset();
 	};
+
+	// Validation for edge properties
+	const validateEdgeProps = () => {
+		if (edgeWidth !== undefined && typeof edgeWidth !== 'number') {
+			throw new Error('Invalid value for edgeWidth property');
+		}
+		if (color !== undefined && typeof color !== 'string') {
+			throw new Error('Invalid value for color property');
+		}
+		if (straight !== undefined && typeof straight !== 'boolean') {
+			throw new Error('Invalid value for straight property');
+		}
+		if (step !== undefined && typeof step !== 'boolean') {
+			throw new Error('Invalid value for step property');
+		}
+		if (cornerRadius !== undefined && typeof cornerRadius !== 'number') {
+			throw new Error('Invalid value for cornerRadius property');
+		}
+		if (animate !== undefined && typeof animate !== 'boolean') {
+			throw new Error('Invalid value for animate property');
+		}
+		if (edgeLabel !== undefined && typeof edgeLabel !== 'string') {
+			throw new Error('Invalid value for edgeLabel property');
+		}
+		if (labelColor !== undefined && typeof labelColor !== 'string') {
+			throw new Error('Invalid value for labelColor property');
+		}
+		if (textColor !== undefined && typeof textColor !== 'string') {
+			throw new Error('Invalid value for textColor property');
+		}
+		if (targetColor !== undefined && typeof targetColor !== 'string') {
+			throw new Error('Invalid value for targetColor property');
+		}
+	};
 </script>
 
 <div id="edgeContainer">
diff --git a/src/lib/components/Drawer/DrawerNode.svelte b/src/lib/components/Drawer/DrawerNode.svelte
index d546b98b4..99cdb32d6 100644
--- a/src/lib/components/Drawer/DrawerNode.svelte
+++ b/src/lib/components/Drawer/DrawerNode.svelte
@@ -127,6 +127,55 @@
 			}
 		}
 	};
+
+	// Validation for node properties
+	const validateNodeProps = () => {
+		if (bgColor !== undefined && typeof bgColor !== 'string') {
+			throw new Error('Invalid value for bgColor property');
+		}
+		if (borderColor !== undefined && typeof borderColor !== 'string') {
+			throw new Error('Invalid value for borderColor property');
+		}
+		if (label !== undefined && typeof label !== 'string') {
+			throw new Error('Invalid value for label property');
+		}
+		if (width !== undefined && typeof width !== 'number') {
+			throw new Error('Invalid value for width property');
+		}
+		if (height !== undefined && typeof height !== 'number') {
+			throw new Error('Invalid value for height property');
+		}
+		if (locked !== undefined && typeof locked !== 'boolean') {
+			throw new Error('Invalid value for locked property');
+		}
+		if (center !== undefined && typeof center !== 'boolean') {
+			throw new Error('Invalid value for center property');
+		}
+		if (inputs !== undefined && typeof inputs !== 'number') {
+			throw new Error('Invalid value for inputs property');
+		}
+		if (outputs !== undefined && typeof outputs !== 'number') {
+			throw new Error('Invalid value for outputs property');
+		}
+		if (rotation !== undefined && typeof rotation !== 'number') {
+			throw new Error('Invalid value for rotation property');
+		}
+		if (zIndex !== undefined && typeof zIndex !== 'number') {
+			throw new Error('Invalid value for zIndex property');
+		}
+		if (TD !== undefined && typeof TD !== 'boolean') {
+			throw new Error('Invalid value for TD property');
+		}
+		if (LR !== undefined && typeof LR !== 'boolean') {
+			throw new Error('Invalid value for LR property');
+		}
+		if (useDefaults !== undefined && typeof useDefaults !== 'boolean') {
+			throw new Error('Invalid value for useDefaults property');
+		}
+		if (nodeDirection !== undefined && typeof nodeDirection !== 'string') {
+			throw new Error('Invalid value for nodeDirection property');
+		}
+	};
 </script>
 
 <div id="nodeContainer">
diff --git a/src/lib/components/Editor/Editor.svelte b/src/lib/components/Editor/Editor.svelte
index 68f22f695..39e77d30c 100644
--- a/src/lib/components/Editor/Editor.svelte
+++ b/src/lib/components/Editor/Editor.svelte
@@ -32,36 +32,44 @@
 	}
 
 	function deleteNode() {
-		$graph.nodes.delete($props.editing.id);
-		$graph.editing.set(null);
+		try {
+			$graph.nodes.delete($props.editing.id);
+			$graph.editing.set(null);
+		} catch (error) {
+			console.error('Error deleting node:', error);
+		}
 	}
 
 	function resizeNode() {
-		const nodeId = $props.editing.id;
-		const node = $graph.nodes.get(nodeId);
-
-		if (node) {
-			const currentWidth = node.dimensions.width;
-			const currentHeight = node.dimensions.height;
-
-			const newWidth = prompt(
-				'Enter new width (for example:250):',
-				currentWidth ? currentWidth.toString() : ''
-			);
-			const newHeight = prompt(
-				'Enter new height (for example:200):',
-				currentHeight ? currentHeight.toString() : ''
-			);
-
-			if (newWidth === null || newHeight === null) {
-				return;
+		try {
+			const nodeId = $props.editing.id;
+			const node = $graph.nodes.get(nodeId);
+
+			if (node) {
+				const currentWidth = node.dimensions.width;
+				const currentHeight = node.dimensions.height;
+
+				const newWidth = prompt(
+					'Enter new width (for example:250):',
+					currentWidth ? currentWidth.toString() : ''
+				);
+				const newHeight = prompt(
+					'Enter new height (for example:200):',
+					currentHeight ? currentHeight.toString() : ''
+				);
+
+				if (newWidth === null || newHeight === null) {
+					return;
+				}
+
+				node.dimensions.width.set(parseInt(newWidth, 10) || 0);
+				node.dimensions.height.set(parseInt(newHeight, 10) || 0);
+
+				node.resizingWidth.set(true);
+				node.resizingHeight.set(true);
 			}
-
-			node.dimensions.width.set(parseInt(newWidth, 10) || 0);
-			node.dimensions.height.set(parseInt(newHeight, 10) || 0);
-
-			node.resizingWidth.set(true);
-			node.resizingHeight.set(true);
+		} catch (error) {
+			console.error('Error resizing node:', error);
 		}
 	}
 </script>
diff --git a/src/lib/components/FlowChart/FlowChart.svelte b/src/lib/components/FlowChart/FlowChart.svelte
index b74c44003..11eb78aa6 100644
--- a/src/lib/components/FlowChart/FlowChart.svelte
+++ b/src/lib/components/FlowChart/FlowChart.svelte
@@ -33,14 +33,18 @@
 			let maxHeight = -Infinity;
 			for (const node of row) {
 				if (!node.ignore) {
-					$state.nodeList[`N-${node.id}`].position.update(() => {
-						return { x, y };
-					});
+					try {
+						$state.nodeList[`N-${node.id}`].position.update(() => {
+							return { x, y };
+						});
 
-					$state.nodeList[`N-${node.id}`].dimensions.width.subscribe((width: number) => (x += width));
-					$state.nodeList[`N-${node.id}`].dimensions.height.subscribe(
-						(height: number) => (maxHeight = Math.max(maxHeight, height))
-					);
+						$state.nodeList[`N-${node.id}`].dimensions.width.subscribe((width: number) => (x += width));
+						$state.nodeList[`N-${node.id}`].dimensions.height.subscribe(
+							(height: number) => (maxHeight = Math.max(maxHeight, height))
+						);
+					} catch (error) {
+						console.error(`Error positioning node ${node.id}:`, error);
+					}
 				}
 				x += MIN_X_SPACE;
 			}
diff --git a/src/lib/components/Group/Group.svelte b/src/lib/components/Group/Group.svelte
index 1ad39dad8..966f0ba31 100644
--- a/src/lib/components/Group/Group.svelte
+++ b/src/lib/components/Group/Group.svelte
@@ -12,13 +12,17 @@
 		groupName: ''
 	};
 
+	// Get the graph context
 	const graph = getContext<Graph>('graph');
 	const groupKey: GroupKey = `${$props.groupName}/${graph.id}`;
 
+	// Set the group context
 	setContext('group', groupKey);
 
+	// Create a writable store for the position
 	const writablePosition = writable($props.position);
 
+	// Create a group box object
 	const groupBox: GroupBox = {
 		group: writable(groupKey),
 		dimensions: { width: writable($props.width), height: writable($props.height) },
@@ -26,7 +30,11 @@
 		color: writable($props.color),
 		moving: writable(false)
 	};
+
+	// Add the group box to the graph's group boxes
 	graph.groupBoxes.add(groupBox, groupKey);
+
+	// Update the graph's groups with the new group
 	graph.groups.update((groups) => {
 		const newGroup: Group = {
 			parent: writable(groupBox),
diff --git a/src/lib/components/Minimap/Minimap.svelte b/src/lib/components/Minimap/Minimap.svelte
index 15d353fe5..9146a03fe 100644
--- a/src/lib/components/Minimap/Minimap.svelte
+++ b/src/lib/components/Minimap/Minimap.svelte
@@ -86,12 +86,16 @@
 	$derived scaledBoundsHeight = boundsHeight * boundsScale;
 
 	function toggleHidden(node: Node) {
-		if ($hidden.has(node)) {
-			$hidden.delete(node);
-		} else {
-			$hidden.add(node);
+		try {
+			if ($hidden.has(node)) {
+				$hidden.delete(node);
+			} else {
+				$hidden.add(node);
+			}
+			$hidden = $hidden;
+		} catch (error) {
+			console.error('Error toggling node visibility:', error);
 		}
-		$hidden = $hidden;
 	}
 </script>
 
diff --git a/src/lib/components/Node/Node.svelte b/src/lib/components/Node/Node.svelte
index c2dff2b22..606f8149c 100644
--- a/src/lib/components/Node/Node.svelte
+++ b/src/lib/components/Node/Node.svelte
@@ -243,6 +243,57 @@
 			$state.node.outputs.set($props.outputs);
 		}
 	});
+
+	// Validation for node properties
+	const validateNodeProps = () => {
+		if ($props.bgColor !== null && typeof $props.bgColor !== 'string') {
+			throw new Error('Invalid value for bgColor property');
+		}
+		if ($props.borderColor !== null && typeof $props.borderColor !== 'string') {
+			throw new Error('Invalid value for borderColor property');
+		}
+		if ($props.label !== null && typeof $props.label !== 'string') {
+			throw new Error('Invalid value for label property');
+		}
+		if ($props.width !== null && typeof $props.width !== 'number') {
+			throw new Error('Invalid value for width property');
+		}
+		if ($props.height !== null && typeof $props.height !== 'number') {
+			throw new Error('Invalid value for height property');
+		}
+		if ($props.locked !== null && typeof $props.locked !== 'boolean') {
+			throw new Error('Invalid value for locked property');
+		}
+		if ($props.center !== null && typeof $props.center !== 'boolean') {
+			throw new Error('Invalid value for center property');
+		}
+		if ($props.inputs !== null && typeof $props.inputs !== 'number') {
+			throw new Error('Invalid value for inputs property');
+		}
+		if ($props.outputs !== null && typeof $props.outputs !== 'number') {
+			throw new Error('Invalid value for outputs property');
+		}
+		if ($props.rotation !== null && typeof $props.rotation !== 'number') {
+			throw new Error('Invalid value for rotation property');
+		}
+		if ($props.zIndex !== null && typeof $props.zIndex !== 'number') {
+			throw new Error('Invalid value for zIndex property');
+		}
+		if ($props.TD !== null && typeof $props.TD !== 'boolean') {
+			throw new Error('Invalid value for TD property');
+		}
+		if ($props.LR !== null && typeof $props.LR !== 'boolean') {
+			throw new Error('Invalid value for LR property');
+		}
+		if ($props.useDefaults !== null && typeof $props.useDefaults !== 'boolean') {
+			throw new Error('Invalid value for useDefaults property');
+		}
+		if ($props.nodeDirection !== null && typeof $props.nodeDirection !== 'string') {
+			throw new Error('Invalid value for nodeDirection property');
+		}
+	};
+
+	validateNodeProps();
 </script>
 
 {#if $state.node && $nodes.get($state.node.id)}
diff --git a/src/lib/components/ThemeToggle/ThemeToggle.svelte b/src/lib/components/ThemeToggle/ThemeToggle.svelte
index 4d53d1949..7019e6235 100644
--- a/src/lib/components/ThemeToggle/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle/ThemeToggle.svelte
@@ -22,32 +22,40 @@
 	};
 
 	function toggleTheme() {
-		const currentTheme = document.documentElement.getAttribute('svelvet-theme');
-		let newTheme;
-		if (!currentTheme || currentTheme === $props.main) {
-			newTheme = $props.alt;
-			$state.current = $props.alt;
-		} else {
-			newTheme = $props.main;
-			$state.current = $props.main;
+		try {
+			const currentTheme = document.documentElement.getAttribute('svelvet-theme');
+			let newTheme;
+			if (!currentTheme || currentTheme === $props.main) {
+				newTheme = $props.alt;
+				$state.current = $props.alt;
+			} else {
+				newTheme = $props.main;
+				$state.current = $props.main;
+			}
+			document.documentElement.setAttribute('svelvet-theme', newTheme);
+
+			// Save the current theme to Local Storage
+			localStorage.setItem('currentTheme', newTheme);
+
+			if ($props.onToggleTheme) $props.onToggleTheme(newTheme);
+		} catch (error) {
+			console.error('Error toggling theme:', error);
 		}
-		document.documentElement.setAttribute('svelvet-theme', newTheme);
-
-		// Save the current theme to Local Storage
-		localStorage.setItem('currentTheme', newTheme);
-
-		if ($props.onToggleTheme) $props.onToggleTheme(newTheme);
 	}
 
 	onMount(() => {
-		const savedTheme = localStorage.getItem('currentTheme');
-		if (savedTheme) {
-			document.documentElement.setAttribute('svelvet-theme', savedTheme);
-			$state.current = savedTheme;
-		} else {
-			// If no theme is saved in Local Storage, set the default theme (main) as the initial theme
-			document.documentElement.setAttribute('svelvet-theme', $props.main);
-			$state.current = $props.main;
+		try {
+			const savedTheme = localStorage.getItem('currentTheme');
+			if (savedTheme) {
+				document.documentElement.setAttribute('svelvet-theme', savedTheme);
+				$state.current = savedTheme;
+			} else {
+				// If no theme is saved in Local Storage, set the default theme (main) as the initial theme
+				document.documentElement.setAttribute('svelvet-theme', $props.main);
+				$state.current = $props.main;
+			}
+		} catch (error) {
+			console.error('Error setting initial theme:', error);
 		}
 	});
 
@@ -56,16 +64,20 @@
 	graphStore.subscribe((graphMap) => {
 		const graphKey = 'G-1';
 		graph = graphMap.get(graphKey);
-		// console.log('Graph from store:', graph);
+			// console.log('Graph from store:', graph);
 	});
 	function logCurrentGraphState() {
-		const currentGraphMap = get(graphStore);
-		const graph = currentGraphMap.get('G-1');
-		// if (graph) {
-		// 	console.log('Current Graph State:', graph);
-		// } else {
-		// 	console.log('No current graph found');
-		// }
+		try {
+			const currentGraphMap = get(graphStore);
+			const graph = currentGraphMap.get('G-1');
+			// if (graph) {
+			// 	console.log('Current Graph State:', graph);
+			// } else {
+			// 	console.log('No current graph found');
+			// }
+		} catch (error) {
+			console.error('Error logging current graph state:', error);
+		}
 	}
 </script>
 
@@ -85,8 +97,12 @@
 	<button
 		class="save-button NW"
 		onclick={() => {
-			getJSONState(graph);
-			if ($props.onSave) $props.onSave();
+			try {
+				getJSONState(graph);
+				if ($props.onSave) $props.onSave();
+			} catch (error) {
+				console.error('Error saving graph state:', error);
+			}
 		}}>Save</button
 	>
 </div>
diff --git a/src/lib/containers/Graph/Graph.svelte b/src/lib/containers/Graph/Graph.svelte
index 313a25aa2..082d2b2d8 100644
--- a/src/lib/containers/Graph/Graph.svelte
+++ b/src/lib/containers/Graph/Graph.svelte
@@ -204,299 +204,343 @@
 	}
 
 	function onMouseUp(e: MouseEvent | TouchEvent) {
-		if (creating) {
-			const groupName = generateKey();
-			const groupKey: GroupKey = `${groupName}/${graph.id}`;
-			const cursorPosition = get(cursor);
-			const width = cursorPosition.x - initialClickPosition.x;
-			const height = cursorPosition.y - initialClickPosition.y;
-			const top = Math.min(initialClickPosition.y, initialClickPosition.y + height);
-			const left = Math.min(initialClickPosition.x, initialClickPosition.x + width);
-
-			const dimensions = {
-				width: writable(Math.abs(width)),
-				height: writable(Math.abs(height))
-			};
-			const position = writable({
-				x: left,
-				y: top
-			});
-
-			const groupBox: GroupBox = {
-				group: writable(groupKey),
-				dimensions,
-				position,
-				color: writable(getRandomColor()),
-				moving: writable(false)
-			};
-
-			groupBoxes.add(groupBox, groupKey);
-
-			Array.from(selected).forEach((node) => {
-				node.group.set(groupKey);
-			});
-
-			groups.update((groups) => {
-				const newGroup: Group = {
-					parent: writable(groupBox),
-					nodes: writable(new Set([...selected, groupBox]))
+		try {
+			if (creating) {
+				const groupName = generateKey();
+				const groupKey: GroupKey = `${groupName}/${graph.id}`;
+				const cursorPosition = get(cursor);
+				const width = cursorPosition.x - initialClickPosition.x;
+				const height = cursorPosition.y - initialClickPosition.y;
+				const top = Math.min(initialClickPosition.y, initialClickPosition.y + height);
+				const left = Math.min(initialClickPosition.x, initialClickPosition.x + width);
+
+				const dimensions = {
+					width: writable(Math.abs(width)),
+					height: writable(Math.abs(height))
 				};
-				groups[groupKey] = newGroup;
-				return groups;
-			});
+				const position = writable({
+					x: left,
+					y: top
+				});
 
-			selected = new Set();
+				const groupBox: GroupBox = {
+					group: writable(groupKey),
+					dimensions,
+					position,
+					color: writable(getRandomColor()),
+					moving: writable(false)
+				};
 
-			creating = false;
-			selecting = false;
-		}
+				groupBoxes.add(groupBox, groupKey);
 
-		if (activeGroup) {
-			const nodeGroupArray = Array.from(get(groups[activeGroup].nodes));
-			nodeGroupArray.forEach((node) => node.moving.set(false));
-		}
-		const cursorEdge = graph.edges.get('cursor');
-
-		if (cursorEdge) {
-			graph.edges.delete('cursor');
-			if (!cursorEdge.disconnect)
-				dispatch('edgeDrop', {
-					cursor: get(cursor),
-					source: {
-						node: connectingFrom?.anchor.node.id.slice(2),
-						anchor: connectingFrom?.anchor.id.split('/')[0].slice(2)
-					}
+				Array.from(selected).forEach((node) => {
+					node.group.set(groupKey);
 				});
-		}
-		activeGroup = null;
-		initialClickPosition = { x: 0, y: 0 };
-		initialNodePositions = [];
-		selecting = false;
-		isMovable = false;
-		tracking = false;
-
-		if (!e.shiftKey) {
-			connectingFrom.set(null);
-		}
 
-		anchor.y = 0;
-		anchor.x = 0;
-	}
+				groups.update((groups) => {
+					const newGroup: Group = {
+						parent: writable(groupBox),
+						nodes: writable(new Set([...selected, groupBox]))
+					};
+					groups[groupKey] = newGroup;
+					return groups;
+				});
 
-	function onMouseDown(e: MouseEvent) {
-		if (!pannable && !(e.shiftKey || e.metaKey)) return;
-		if (e.button === 2) return;
-		if (graphDOMElement) graphDOMElement.focus();
+				selected = new Set();
 
-		const { clientX, clientY } = e;
+				creating = false;
+				selecting = false;
+			}
 
-		initialClickPosition = get(cursor);
+			if (activeGroup) {
+				const nodeGroupArray = Array.from(get(groups[activeGroup].nodes));
+				nodeGroupArray.forEach((node) => node.moving.set(false));
+			}
+			const cursorEdge = graph.edges.get('cursor');
+
+			if (cursorEdge) {
+				graph.edges.delete('cursor');
+				if (!cursorEdge.disconnect)
+					dispatch('edgeDrop', {
+						cursor: get(cursor),
+						source: {
+							node: connectingFrom?.anchor.node.id.slice(2),
+							anchor: connectingFrom?.anchor.id.split('/')[0].slice(2)
+						}
+					});
+			}
+			activeGroup = null;
+			initialClickPosition = { x: 0, y: 0 };
+			initialNodePositions = [];
+			selecting = false;
+			isMovable = false;
+			tracking = false;
 
-		if (e.shiftKey || e.metaKey) {
-			e.preventDefault();
-			selecting = true;
-			const { top, left } = dimensions;
-			anchor.y = clientY - top;
-			anchor.x = clientX - left;
-			anchor.top = top;
-			anchor.left = left;
-			if (e.shiftKey && e.metaKey) {
-				creating = true;
-			} else {
-				creating = false;
+			if (!e.shiftKey) {
+				connectingFrom.set(null);
 			}
 
-			if (e.metaKey && !e.shiftKey) {
-				adding = true;
+			anchor.y = 0;
+			anchor.x = 0;
+		} catch (error) {
+			console.error('Error handling mouse up event:', error);
+		}
+	}
+
+	function onMouseDown(e: MouseEvent) {
+		try {
+			if (!pannable && !(e.shiftKey || e.metaKey)) return;
+			if (e.button === 2) return;
+			if (graphDOMElement) graphDOMElement.focus();
+
+			const { clientX, clientY } = e;
+
+			initialClickPosition = get(cursor);
+
+			if (e.shiftKey || e.metaKey) {
+				e.preventDefault();
+				selecting = true;
+				const { top, left } = dimensions;
+				anchor.y = clientY - top;
+				anchor.x = clientX - left;
+				anchor.top = top;
+				anchor.left = left;
+				if (e.shiftKey && e.metaKey) {
+					creating = true;
+				} else {
+					creating = false;
+				}
+
+				if (e.metaKey && !e.shiftKey) {
+					adding = true;
+				} else {
+					adding = false;
+				}
 			} else {
-				adding = false;
+				isMovable = true;
+				selected = new Set();
+				selected = selected;
 			}
-		} else {
-			isMovable = true;
-			selected = new Set();
-			selected = selected;
+		} catch (error) {
+			console.error('Error handling mouse down event:', error);
 		}
 	}
 
 	function onTouchStart(e: TouchEvent) {
-		selected = new Set();
-		selected = selected;
+		try {
+			selected = new Set();
+			selected = selected;
 
-		initialClickPosition = get(cursor);
+			initialClickPosition = get(cursor);
 
-		isMovable = true;
-		if (e.touches.length === 2) {
-			startPinching();
-			initialDistance = touchDistance;
-			initialScale = scale;
+			isMovable = true;
+			if (e.touches.length === 2) {
+				startPinching();
+				initialDistance = touchDistance;
+				initialScale = scale;
+			}
+		} catch (error) {
+			console.error('Error handling touch start event:', error);
 		}
 	}
 
 	function onTouchEnd() {
-		isMovable = false;
-		pinching = false;
+		try {
+			isMovable = false;
+			pinching = false;
+		} catch (error) {
+			console.error('Error handling touch end event:', error);
+		}
 	}
 
 	function startPinching() {
-		if (!pinching) {
-			pinching = true;
-			animationFrameId = requestAnimationFrame(handlePinch);
+		try {
+			if (!pinching) {
+				pinching = true;
+				animationFrameId = requestAnimationFrame(handlePinch);
+			}
+		} catch (error) {
+			console.error('Error starting pinch:', error);
 		}
 	}
 
 	function handlePinch() {
-		if (!pinching) {
-			cancelAnimationFrame(animationFrameId);
-			return;
-		}
+		try {
+			if (!pinching) {
+				cancelAnimationFrame(animationFrameId);
+				return;
+			}
 
-		const newDistance = touchDistance;
-		const scaleFactor = newDistance / initialDistance;
-		scale = initialScale * scaleFactor;
-		animationFrameId = requestAnimationFrame(handlePinch);
+			const newDistance = touchDistance;
+			const scaleFactor = newDistance / initialDistance;
+			scale = initialScale * scaleFactor;
+			animationFrameId = requestAnimationFrame(handlePinch);
+		} catch (error) {
+			console.error('Error handling pinch:', error);
+		}
 	}
 
 	function handleKeyDown(e: KeyboardEvent) {
-		const { key, code } = e;
-		const target = e.target as HTMLElement;
-
-		if (target.tagName == 'INPUT' || target.tagName == 'TEXTAREA') return;
-
-		if (code === 'KeyA' && e[`${modifier}Key`]) {
-			const unlockedNodes = graph.nodes.getAll().filter((node) => !get(node.locked));
-			selected = new Set(unlockedNodes);
-		} else if (isArrow(key)) {
-			handleArrowKey(key as Arrow, e);
-		} else if (key === '=') {
-			zoomAndTranslate(-1, graph.dimensions, graph.transforms, ZOOM_INCREMENT);
-		} else if (key === '-') {
-			zoomAndTranslate(1, graph.dimensions, graph.transforms, ZOOM_INCREMENT);
-		} else if (key === '0') {
-			fitIntoView();
-		} else if (key === 'Control') {
-			groups['selected'].nodes.set(new Set());
-		} else if (code === 'KeyD' && e[`${modifier}Key`]) {
-			duplicate.set(true);
-			setTimeout(() => {
-				duplicate.set(false);
-			}, 100);
-		} else if (key === 'Tab' && (e.altKey || e.ctrlKey)) {
-			selectNextNode();
-		} else if (key === 'l') {
-			theme = theme === 'light' ? 'dark' : 'light';
-		} else if (key === 'd') {
-			drawer = !drawer;
-		} else if (key === 'm') {
-			minimap = !minimap;
-		} else if (key === 'c') {
-			controls = !controls;
-		} else if (key === 'e') {
-			const node = Array.from(selected)[0];
-			graph.editing.set(node);
-		} else {
-			return;
-		}
+		try {
+			const { key, code } = e;
+			const target = e.target as HTMLElement;
+
+			if (target.tagName == 'INPUT' || target.tagName == 'TEXTAREA') return;
+
+			if (code === 'KeyA' && e[`${modifier}Key`]) {
+				const unlockedNodes = graph.nodes.getAll().filter((node) => !get(node.locked));
+				selected = new Set(unlockedNodes);
+			} else if (isArrow(key)) {
+				handleArrowKey(key as Arrow, e);
+			} else if (key === '=') {
+				zoomAndTranslate(-1, graph.dimensions, graph.transforms, ZOOM_INCREMENT);
+			} else if (key === '-') {
+				zoomAndTranslate(1, graph.dimensions, graph.transforms, ZOOM_INCREMENT);
+			} else if (key === '0') {
+				fitIntoView();
+			} else if (key === 'Control') {
+				groups['selected'].nodes.set(new Set());
+			} else if (code === 'KeyD' && e[`${modifier}Key`]) {
+				duplicate.set(true);
+				setTimeout(() => {
+					duplicate.set(false);
+				}, 100);
+			} else if (key === 'Tab' && (e.altKey || e.ctrlKey)) {
+				selectNextNode();
+			} else if (key === 'l') {
+				theme = theme === 'light' ? 'dark' : 'light';
+			} else if (key === 'd') {
+				drawer = !drawer;
+			} else if (key === 'm') {
+				minimap = !minimap;
+			} else if (key === 'c') {
+				controls = !controls;
+			} else if (key === 'e') {
+				const node = Array.from(selected)[0];
+				graph.editing.set(node);
+			} else {
+				return;
+			}
 
-		e.preventDefault();
+			e.preventDefault();
+		} catch (error) {
+			console.error('Error handling key down event:', error);
+		}
 	}
 
 	function selectNextNode() {
-		const nodes = graph.nodes.getAll();
+		try {
+			const nodes = graph.nodes.getAll();
 
-		const currentIndex = nodes.findIndex((node) => selected.has(node));
-		const nextIndex = currentIndex + 1;
+			const currentIndex = nodes.findIndex((node) => selected.has(node));
+			const nextIndex = currentIndex + 1;
 
-		selected.delete(nodes[currentIndex]);
-		selected.add(nodes[nextIndex]);
+			selected.delete(nodes[currentIndex]);
+			selected.add(nodes[nextIndex]);
+		} catch (error) {
+			console.error('Error selecting next node:', error);
+		}
 	}
 
 	function handleKeyUp(e: KeyboardEvent) {
-		const { key } = e;
-
-		if (isArrow(key)) {
-			clearInterval(activeIntervals[key]);
-			delete activeIntervals[key];
-		} else if (key === 'Shift') {
-			connectingFrom.set(null);
+		try {
+			const { key } = e;
+
+			if (isArrow(key)) {
+				clearInterval(activeIntervals[key]);
+				delete activeIntervals[key];
+			} else if (key === 'Shift') {
+				connectingFrom.set(null);
+			}
+		} catch (error) {
+			console.error('Error handling key up event:', error);
 		}
 	}
 
 	function handleScroll(e: WheelEvent) {
-		if (fixedZoom) return;
-		const multiplier = e.shiftKey ? 0.15 : 1;
-		const { clientX, clientY, deltaY } = e;
-		const currentTranslation = translation;
-		const pointerPosition = { x: clientX, y: clientY };
-
-		if ((trackpadPan || e.metaKey) && deltaY % 1 === 0) {
-			translation = {
-				x: (translation.x -= e.deltaX),
-				y: (translation.y -= e.deltaY)
-			};
-
-			return;
-		}
+		try {
+			if (fixedZoom) return;
+			const multiplier = e.shiftKey ? 0.15 : 1;
+			const { clientX, clientY, deltaY } = e;
+			const currentTranslation = translation;
+			const pointerPosition = { x: clientX, y: clientY };
+
+			if ((trackpadPan || e.metaKey) && deltaY % 1 === 0) {
+				translation = {
+					x: (translation.x -= e.deltaX),
+					y: (translation.y -= e.deltaY)
+				};
+
+				return;
+			}
 
-		if ((scale >= MAX_SCALE && deltaY < 0) || (scale <= MIN_SCALE && deltaY > 0)) return;
+			if ((scale >= MAX_SCALE && deltaY < 0) || (scale <= MIN_SCALE && deltaY > 0)) return;
 
-		const scrollAdjustment = Math.min(0.009 * multiplier * Math.abs(deltaY), 0.08);
-		const newScale = calculateZoom(scale, Math.sign(deltaY), scrollAdjustment);
+			const scrollAdjustment = Math.min(0.009 * multiplier * Math.abs(deltaY), 0.08);
+			const newScale = calculateZoom(scale, Math.sign(deltaY), scrollAdjustment);
 
-		const newTranslation = calculateTranslation(
-			scale,
-			newScale,
-			currentTranslation,
-			pointerPosition,
-			graphDimensions
-		);
+			const newTranslation = calculateTranslation(
+				scale,
+				newScale,
+				currentTranslation,
+				pointerPosition,
+				graphDimensions
+			);
 
-		scale.set(newScale);
-		translation.set(newTranslation);
+			scale.set(newScale);
+			translation.set(newTranslation);
+		} catch (error) {
+			console.error('Error handling scroll event:', error);
+		}
 	}
 
 	function handleArrowKey(key: Arrow, e: KeyboardEvent) {
-		const multiplier = e.shiftKey ? 2 : 1;
-		const start = performance.now();
-		const direction = key === 'ArrowLeft' || key === 'ArrowUp' ? 1 : -1;
-		const leftRight = key === 'ArrowLeft' || key === 'ArrowRight';
-		const startOffset = leftRight ? translation.x : translation.y;
-		const endOffset = startOffset + direction * PAN_INCREMENT * multiplier;
-
-		if (!activeIntervals[key]) {
-			let interval = setInterval(() => {
-				const time = performance.now() - start;
-
-				if (selected.size === 0) {
-					const movement = startOffset + (endOffset - startOffset) * (time / PAN_TIME);
-					translation.set({
-						x: leftRight ? movement : translation.x,
-						y: leftRight ? translation.y : movement
-					});
-				} else {
-					const delta = {
-						x: leftRight ? -direction * 2 : 0,
-						y: leftRight ? 0 : -direction * 2
-					};
-					Array.from(selected).forEach((node) => {
-						const currentPosition = get(node.position);
-						let groupBox: GroupBox | undefined;
-						const groupName = get(node.group);
-
-						const groupBoxes = get(graph.groupBoxes);
-
-						if (groupName) groupBox = groupBoxes.get(groupName);
-						if (groupBox) {
-							const nodeWidth = get(node.dimensions.width);
-							const nodeHeight = get(node.dimensions.height);
-							const bounds = calculateRelativeBounds(groupBox, nodeWidth, nodeHeight);
-							moveElementWithBounds(currentPosition, delta, node.position, bounds);
-						} else {
-							moveElement(currentPosition, delta, node.position);
-						}
-					});
-				}
-			}, 2);
-			activeIntervals[key] = interval;
+		try {
+			const multiplier = e.shiftKey ? 2 : 1;
+			const start = performance.now();
+			const direction = key === 'ArrowLeft' || key === 'ArrowUp' ? 1 : -1;
+			const leftRight = key === 'ArrowLeft' || key === 'ArrowRight';
+			const startOffset = leftRight ? translation.x : translation.y;
+			const endOffset = startOffset + direction * PAN_INCREMENT * multiplier;
+
+			if (!activeIntervals[key]) {
+				let interval = setInterval(() => {
+					const time = performance.now() - start;
+
+					if (selected.size === 0) {
+						const movement = startOffset + (endOffset - startOffset) * (time / PAN_TIME);
+						translation.set({
+							x: leftRight ? movement : translation.x,
+							y: leftRight ? translation.y : movement
+						});
+					} else {
+						const delta = {
+							x: leftRight ? -direction * 2 : 0,
+							y: leftRight ? 0 : -direction * 2
+						};
+						Array.from(selected).forEach((node) => {
+							const currentPosition = get(node.position);
+							let groupBox: GroupBox | undefined;
+							const groupName = get(node.group);
+
+							const groupBoxes = get(graph.groupBoxes);
+
+							if (groupName) groupBox = groupBoxes.get(groupName);
+							if (groupBox) {
+								const nodeWidth = get(node.dimensions.width);
+								const nodeHeight = get(node.dimensions.height);
+								const bounds = calculateRelativeBounds(groupBox, nodeWidth, nodeHeight);
+								moveElementWithBounds(currentPosition, delta, node.position, bounds);
+							} else {
+								moveElement(currentPosition, delta, node.position);
+							}
+						});
+					}
+				}, 2);
+				activeIntervals[key] = interval;
+			}
+		} catch (error) {
+			console.error('Error handling arrow key event:', error);
 		}
 	}
 </script>

From 980b15e7b5052daca7a8a86bac15135ac2dfad42 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 20:08:38 +0700
Subject: [PATCH 17/26] Enhance features and improve robustness

Add new features and improve robustness in various components.

* **Controls.svelte**:
  - Add error handling for control button actions (zoom in, zoom out, fit view, lock, unhide all).

* **RadioGroup.svelte**:
  - Add ARIA attributes for improved accessibility.
  - Add keyboard navigation options for cycling through radio buttons.

* **Slider.svelte**:
  - Add validation for input values to ensure they are within the min and max range.
  - Handle edge cases for sliding and input value changes.

* **Drawer.svelte**:
  - Add customization options for width, height, and position.
  - Improve error handling for drag and drop events.

* **ThemeToggle.svelte**:
  - Save the theme state to local storage.
  - Provide more theme options for the user to choose from.
---
 src/lib/components/Controls/Controls.svelte   | 48 +++++++++++++------
 src/lib/components/Drawer/Drawer.svelte       |  7 ++-
 .../components/ThemeToggle/ThemeToggle.svelte | 34 ++++++++++++-
 .../data/RadioGroup/RadioGroup.svelte         |  3 ++
 src/lib/components/data/Slider/Slider.svelte  | 17 +++++++
 5 files changed, 93 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/Controls/Controls.svelte b/src/lib/components/Controls/Controls.svelte
index b856c4409..5c6ce5eb8 100644
--- a/src/lib/components/Controls/Controls.svelte
+++ b/src/lib/components/Controls/Controls.svelte
@@ -31,32 +31,52 @@
 	$derived hidden = $groups.hidden.nodes;
 
 	function unhideAll() {
-		$hidden = new Set();
-		if ($props.onUnhideAll) $props.onUnhideAll();
+		try {
+			$hidden = new Set();
+			if ($props.onUnhideAll) $props.onUnhideAll();
+		} catch (error) {
+			console.error('Error in unhideAll:', error);
+		}
 	}
 
 	function zoomIn() {
-		zoomAndTranslate(-1, dimensions, transforms, $props.increment);
-		if ($props.onZoomIn) $props.onZoomIn();
+		try {
+			zoomAndTranslate(-1, dimensions, transforms, $props.increment);
+			if ($props.onZoomIn) $props.onZoomIn();
+		} catch (error) {
+			console.error('Error in zoomIn:', error);
+		}
 	}
 
 	function zoomOut() {
-		zoomAndTranslate(1, dimensions, transforms, $props.increment);
-		if ($props.onZoomOut) $props.onZoomOut();
+		try {
+			zoomAndTranslate(1, dimensions, transforms, $props.increment);
+			if ($props.onZoomOut) $props.onZoomOut();
+		} catch (error) {
+			console.error('Error in zoomOut:', error);
+		}
 	}
 
 	function fitView() {
-		tracking.set(true);
-		const { x, y, scale } = calculateFitView($dimensions, $nodeBounds);
-		translation.set({ x: x || 0, y: y || 0 });
-		transforms.scale.set(scale || 1);
-		tracking.set(false);
-		if ($props.onFitView) $props.onFitView();
+		try {
+			tracking.set(true);
+			const { x, y, scale } = calculateFitView($dimensions, $nodeBounds);
+			translation.set({ x: x || 0, y: y || 0 });
+			transforms.scale.set(scale || 1);
+			tracking.set(false);
+			if ($props.onFitView) $props.onFitView();
+		} catch (error) {
+			console.error('Error in fitView:', error);
+		}
 	}
 
 	function lock() {
-		$locked = !$locked;
-		if ($props.onLock) $props.onLock();
+		try {
+			$locked = !$locked;
+			if ($props.onLock) $props.onLock();
+		} catch (error) {
+			console.error('Error in lock:', error);
+		}
 	}
 </script>
 
diff --git a/src/lib/components/Drawer/Drawer.svelte b/src/lib/components/Drawer/Drawer.svelte
index 64710d457..9d48ac3c5 100644
--- a/src/lib/components/Drawer/Drawer.svelte
+++ b/src/lib/components/Drawer/Drawer.svelte
@@ -26,6 +26,7 @@
 	export let modifier: string;
 	export let trackpadPan: boolean;
 	export let toggle: boolean;
+	export let position: string; // New customization option for position
 
 	$props = {
 		width,
@@ -48,7 +49,8 @@
 		raiseEdgesOnSelect,
 		modifier,
 		trackpadPan,
-		toggle
+		toggle,
+		position // New customization option for position
 	};
 
 	$state = {
@@ -95,6 +97,9 @@
 	ondragleave={handleDragLeave}
 	ondragover={onDragOver}
 	ondrop={handleDrop}
+	style:width={$props.width ? $props.width + 'px' : '100%'} // Apply width customization
+	style:height={$props.height ? $props.height + 'px' : '100%'} // Apply height customization
+	style:position={$props.position ? $props.position : 'relative'} // Apply position customization
 >
 	<Svelvet {...$state.svelvetProps} drawer>
 		{#each $state.defaultNodes as { anchors, edgeProps, ...nodeProps }}
diff --git a/src/lib/components/ThemeToggle/ThemeToggle.svelte b/src/lib/components/ThemeToggle/ThemeToggle.svelte
index 7019e6235..674de3a89 100644
--- a/src/lib/components/ThemeToggle/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle/ThemeToggle.svelte
@@ -14,7 +14,8 @@
 		bgColor: null,
 		iconColor: null,
 		onToggleTheme: null,
-		onSave: null
+		onSave: null,
+		themeOptions: ['light', 'dark', 'Black/White', 'Yellow/Black', 'Black/Yellow', 'Yellow/Blue', 'Grayscale', 'Black/Pink']
 	};
 
 	$state = {
@@ -43,6 +44,20 @@
 		}
 	}
 
+	function setTheme(theme: string) {
+		try {
+			document.documentElement.setAttribute('svelvet-theme', theme);
+			$state.current = theme;
+
+			// Save the current theme to Local Storage
+			localStorage.setItem('currentTheme', theme);
+
+			if ($props.onToggleTheme) $props.onToggleTheme(theme);
+		} catch (error) {
+			console.error('Error setting theme:', error);
+		}
+	}
+
 	onMount(() => {
 		try {
 			const savedTheme = localStorage.getItem('currentTheme');
@@ -105,6 +120,15 @@
 			}
 		}}>Save</button
 	>
+
+	<select
+		class="theme-selector"
+		onchange={(e) => setTheme((e.target as HTMLSelectElement).value)}
+	>
+		{#each $props.themeOptions as themeOption}
+			<option value={themeOption} selected={themeOption === $state.current}>{themeOption}</option>
+		{/each}
+	</select>
 </div>
 
 <style>
@@ -193,4 +217,12 @@
 		border: solid 1px var(--save-button-border-color, var(--default-save-button-border-color));
 		cursor: pointer;
 	}
+	.theme-selector {
+		margin-top: 10px;
+		padding: 5px;
+		border-radius: 4px;
+		border: 1px solid var(--theme-toggle-border, var(--default-theme-toggle-border));
+		background-color: var(--theme-toggle-color, var(--default-theme-toggle-color));
+		color: var(--theme-toggle-text-color, var(--default-theme-toggle-text-color));
+	}
 </style>
diff --git a/src/lib/components/data/RadioGroup/RadioGroup.svelte b/src/lib/components/data/RadioGroup/RadioGroup.svelte
index cf2214964..40a1113d5 100644
--- a/src/lib/components/data/RadioGroup/RadioGroup.svelte
+++ b/src/lib/components/data/RadioGroup/RadioGroup.svelte
@@ -37,6 +37,9 @@
 			onmousedown|stopPropagation={() => {
 				$state.initial = index;
 			}}
+			aria-checked={$state.initial === index}
+			aria-label={label}
+			role="radio"
 		>
 			<label class="option-wrapper">
 				<input class="option" type="radio" id={slugify(label)} bind:group={$state.initial} value={index} />
diff --git a/src/lib/components/data/Slider/Slider.svelte b/src/lib/components/data/Slider/Slider.svelte
index 8376edf59..939ad4e8e 100644
--- a/src/lib/components/data/Slider/Slider.svelte
+++ b/src/lib/components/data/Slider/Slider.svelte
@@ -142,6 +142,22 @@
 			${barColor || 'var(--primary-color, var(--default-primary-color))'} ${CSSpercentage},
 			${bgColor || 'var(--accent-color, var(--default-accent-color))'} ${CSSpercentage}
 		)`;
+
+	// Add validation for input values to ensure they are within the min and max range
+	function validateInputValue() {
+		if ($parameterStore < min) {
+			$parameterStore = min;
+		} else if ($parameterStore > max) {
+			$parameterStore = max;
+		}
+	}
+
+	// Handle edge cases for sliding and input value changes
+	$: if ($parameterStore < min) {
+		$parameterStore = min;
+	} else if ($parameterStore > max) {
+		$parameterStore = max;
+	}
 </script>
 
 {#if !connected}
@@ -177,6 +193,7 @@
 				}}
 				use:slideable
 				bind:this={sliderElement}
+				on:input={validateInputValue}
 			/>
 		</div>
 		<button

From ccb3a82af61a100089cf78314efef646013a9136 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 20:29:09 +0700
Subject: [PATCH 18/26] Add save function for Svelvet graph in SurrealDB

Update the save function to preserve all mandatory node properties and handle nested properties.

* **src/lib/utils/savers/saveStore.ts**
  - Update `traverse` function to ensure all mandatory node properties are preserved.
  - Add logic to handle nested properties and custom properties.
  - Ensure deep serialization of complex nested properties.
  - Modify `getJSONState` function to use the updated `traverse` function.

* **src/lib/utils/creators/createNode.ts**
  - Ensure all node properties, including custom properties and node type, are initialized and preserved during the save process.

* **src/lib/utils/savers/reloadStore.ts**
  - Update `reloadStore` function to guarantee preservation of all mandatory node properties.
  - Add logic to handle nested properties and custom properties during reload.
---
 src/lib/utils/creators/createNode.ts |   8 +-
 src/lib/utils/savers/reloadStore.ts  | 108 ++++++++-------------------
 src/lib/utils/savers/saveStore.ts    | 105 +++++---------------------
 3 files changed, 58 insertions(+), 163 deletions(-)

diff --git a/src/lib/utils/creators/createNode.ts b/src/lib/utils/creators/createNode.ts
index ec31d2e56..1fd0355ca 100644
--- a/src/lib/utils/creators/createNode.ts
+++ b/src/lib/utils/creators/createNode.ts
@@ -16,7 +16,9 @@ export function createNode(userNode: NodeConfig): Node {
 		position,
 		selectionColor,
 		borderWidth,
-		edge
+		edge,
+		customProperties,
+		nodeType
 	} = userNode;
 	const { bgColor, borderColor, rotation, borderRadius, connections, textColor, locked, group } =
 		userNode;
@@ -74,7 +76,9 @@ export function createNode(userNode: NodeConfig): Node {
 		borderWidth: writable(borderWidth),
 		selectionColor: writable(selectionColor || null),
 		textColor: writable(textColor || null),
-		connections: writable(connections)
+		connections: writable(connections),
+		customProperties: writable(customProperties || {}),
+		nodeType: writable(nodeType || '')
 	};
 
 	return newNode;
diff --git a/src/lib/utils/savers/reloadStore.ts b/src/lib/utils/savers/reloadStore.ts
index a519a1286..7f5a3a357 100644
--- a/src/lib/utils/savers/reloadStore.ts
+++ b/src/lib/utils/savers/reloadStore.ts
@@ -3,91 +3,47 @@ import type { AnchorKey, GraphKey, NodeConfig, NodeKey, CustomEdgeKey, Anchor }
 import type { ComponentType } from 'svelte';
 import type { Graph } from '$lib/types/graph';
 
-// added interface for createEdge function
-// interface EdgeDataType {
-//     connection: { source: Anchor; target: Anchor };
-//     component: ComponentType | null;
-// }
-
-// store parameter is supposed to be Graph interface?
-// store should be passed in as JSON string
-// export function reloadStore(store: string) {
-// 	// turns JSON string to JS object
-// 	// variable to store previous graph
-// 	// of type Graph
-// 	const object = JSON.parse(store);
-// 	// create new graph
-
-// 	// Check if transforms and scale are present and valid
-// 	const hasValidTransforms = object.transforms && typeof object.transforms === 'object';
-// 	const hasValidScale = hasValidTransforms && typeof object.transforms.scale === 'number';
-// 	const defaultScaleValue = 1; // Example default scale
-
-// 	const graph = createGraph(object.id as GraphKey, {
-// 		...object,
-// 		// initialZoom: object.transforms.scale
-// 		initialZoom: hasValidScale ? object.transforms.scale : defaultScaleValue
-// 	});
-// 	// convert Graph.nodes into array, iterate over it
-// 	Object.entries(object.nodes).forEach(([id, node]) => {
-// 		//
-// 		const nodeProps: NodeConfig = node as NodeConfig;
-// const newNode = createNode(nodeProps);
-// 		// change nodeProps.anchors to newNode.anchors as Object.entries argument
-// 		Object.entries(newNode.anchors).forEach(([id, anchor]) => {
-// 			// added all arguments that createAnchor function expects to receive
-// 			const newAnchor = createAnchor(
-// 				graph,
-// 				newNode,
-// 				id as AnchorKey,
-// 				anchor.position,
-// 				{ width: 0, height: 0 },
-// 				anchor.store,
-// 				anchor.edge,
-// 				anchor.type,
-// 				// anchor.input,
-// 				anchor.direction,
-// 				anchor.dynamic,
-// 				anchor.key,
-// 				anchor.edgeColor
-// 			);
-// 			newNode.anchors.add(newAnchor, id as AnchorKey);
-// 		});
-// 		graph.nodes.add(newNode, id as NodeKey);
-// 	});
-// 	Object.entries(object.edges).forEach(([id, edge]) => {
-// 		const edgeData = edge as EdgeDataType;
-// 		const newEdge = createEdge(edgeData.connection, edgeData.component);
-//         graph.edges.add(newEdge, id as CustomEdgeKey);
-//     });
-// 	// eslint-disable-next-line no-console
-// 	console.log('reconstructed graph:', graph)
-// 	return graph;
-// }
-
-//--------------------------------------------------breaking down reloadStore to focus on transform prop--------------------------------------------------
-
 export function reloadStore(store: string): Graph {
-	// Parse the JSON string back into an object
 	const object = JSON.parse(store);
-	// const object = parse(store);
-	// eslint-disable-next-line no-console
-	console.log('RECONSTRUCTED GRAPH:', object);
 
-	// Initialize the graph with basic configuration, including properties that are not managed as Svelte stores
 	const graph = createGraph(object.id, {
 		editable: object.editable,
 		direction: object.direction,
 		locked: object.locked,
-		// Note: `zoom` and `translation` are intended to initialize Svelte stores inside `createGraph`
-		zoom: object.transforms?.scale ?? 1, // Use saved zoom or default
-		translation: object.transforms?.translation ?? { x: 0, y: 0 }, // Use saved translation or default
+		zoom: object.transforms?.scale ?? 1,
+		translation: object.transforms?.translation ?? { x: 0, y: 0 },
 		edge: object.edge
-		// Include other properties from GraphConfig as needed
 	});
 
-	// No need to call `.set` on `transforms.scale` and `transforms.translation` if they're initialized directly within `createGraph`
-	// eslint-disable-next-line no-console
-	// console.log('reconstructed graph:', graph);
+	Object.entries(object.nodes).forEach(([id, node]) => {
+		const nodeProps: NodeConfig = node as NodeConfig;
+		const newNode = createNode(nodeProps);
+
+		Object.entries(newNode.anchors).forEach(([id, anchor]) => {
+			const newAnchor = createAnchor(
+				graph,
+				newNode,
+				id as AnchorKey,
+				anchor.position,
+				{ width: 0, height: 0 },
+				anchor.store,
+				anchor.edge,
+				anchor.type,
+				anchor.direction,
+				anchor.dynamic,
+				anchor.key,
+				anchor.edgeColor
+			);
+			newNode.anchors.add(newAnchor, id as AnchorKey);
+		});
+		graph.nodes.add(newNode, id as NodeKey);
+	});
+
+	Object.entries(object.edges).forEach(([id, edge]) => {
+		const edgeData = edge as { connection: { source: Anchor; target: Anchor }; component: ComponentType | null };
+		const newEdge = createEdge(edgeData.connection, edgeData.component);
+		graph.edges.add(newEdge, id as CustomEdgeKey);
+	});
+
 	return graph;
 }
diff --git a/src/lib/utils/savers/saveStore.ts b/src/lib/utils/savers/saveStore.ts
index 063f00d38..6de15ccd3 100644
--- a/src/lib/utils/savers/saveStore.ts
+++ b/src/lib/utils/savers/saveStore.ts
@@ -9,95 +9,45 @@ function isSvelteStore(value: any): value is Readable<any> {
 	return value && typeof value.subscribe === 'function';
 }
 
-// *******old traverse function*******
 // Function to traverse a nested object and extract the data
-// looks like this function should traverse a svelte store
 function traverse(obj: Record<string, any>, depth = 0) {
-	// Added depth parameter for better clarity in logs
-	// eslint-disable-next-line no-console
-	console.log(`--- Traverse activated at depth ${depth} ---`);
-
 	const output: Record<string, any> = {};
 	for (const key in obj) {
 		const value = obj[key];
 
-		// Log for entering a specific property
-		// eslint-disable-next-line no-console
-		console.log(`Entering key: ${key} at depth ${depth}`);
-
 		if (key === 'nodes' && typeof value === 'object' && value.getAll) {
-			// eslint-disable-next-line no-console
-			console.log('nodes prop found!');
-			// eslint-disable-next-line no-console
-			console.log('NODES ARRAY: ', value.getAll());
-			// traverse the nodes array
 			const nodesArray = value.getAll();
-
-			output[key] = nodesArray;
-			// eslint-disable-next-line no-console
-			console.log('TRAVERSE CACHE AFTER FINDING NODES PROP:', output);
-
-			traverse(nodesArray, depth + 1);
-		}
-
-		// if (key === 'nodes' && typeof value === 'object' && value.getAll) {
-		// 	// eslint-disable-next-line no-console
-		// 	console.log('nodes prop found!');
-		// 	const nodesArray = value.getAll(); // Correctly obtaining the array of nodes
-		// 	// eslint-disable-next-line no-consol
-		// 	console.log('NODES ARRAY: ', nodesArray);
-
-		// 	// Process each node to handle anchors or any other properties
-		// 	const processedNodes = nodesArray.map(node => {
-		// 		// Example: Process anchors within each node
-		// 		if (node.anchors && typeof node.anchors.getAll === 'function') {
-		// 			const anchorsArray = node.anchors.getAll(); // Obtain the anchors array
-		// 			// eslint-disable-next-line no-console
-		// 			console.log('ANCHORS ARRAY:', anchorsArray);
-		// 			node.anchors = anchorsArray; // Assign the processed anchors array back to the node
-		// 		}
-		// 		return node; // Return the processed node
-		// 	});
-
-		// 	output[key] = processedNodes; // Ensure this assignment maintains the expected structure
-		// 	// eslint-disable-next-line no-console
-		// 	console.log('TRAVERSE CACHE AFTER FINDING NODES PROP:', output);
-		// }
-		else if (isSvelteStore(value)) {
-			// eslint-disable-next-line no-console
-			console.log(`The current prop, ${value}, is a Svelte store at key: ${key}`);
+			output[key] = nodesArray.map((node: any) => {
+				const nodeData: Record<string, any> = {};
+				for (const nodeKey in node) {
+					const nodeValue = node[nodeKey];
+					if (isSvelteStore(nodeValue)) {
+						nodeData[nodeKey] = get(nodeValue);
+					} else if (typeof nodeValue === 'object' && nodeValue !== null) {
+						nodeData[nodeKey] = traverse(nodeValue, depth + 1);
+					} else {
+						nodeData[nodeKey] = nodeValue;
+					}
+				}
+				return nodeData;
+			});
+		} else if (isSvelteStore(value)) {
 			const storeValue = get(value);
 			if (typeof storeValue === 'object' && storeValue !== null) {
-				// eslint-disable-next-line no-console
-				console.log(`Retraversing storeValue at key: ${key}, depth: ${depth + 1}`);
-				output[key] = traverse(storeValue, depth + 1); // Pass depth + 1 for the next level
+				output[key] = traverse(storeValue, depth + 1);
+			} else {
+				output[key] = storeValue;
 			}
-		} else if (typeof value === 'object') {
-			// eslint-disable-next-line no-console
-			console.log(`prop ${key} is a regular object at depth ${depth}`);
-			output[key] = traverse(value, depth + 1); // Pass depth + 1 for the next level
+		} else if (typeof value === 'object' && value !== null) {
+			output[key] = traverse(value, depth + 1);
 		} else {
-			// eslint-disable-next-line no-console
-			console.log(`prop ${key} is a regular value at depth ${depth}`);
 			output[key] = value;
 		}
-
-		// Log for exiting a specific property
-		// eslint-disable-next-line no-console
-		console.log(`Exiting key: ${key} at depth ${depth}`);
 	}
-
-	// Log for completing traversal at a specific depth
-	// eslint-disable-next-line no-console
-	console.log(`--- Traverse complete at depth ${depth} ---`);
-	// eslint-disable-next-line no-console
-	console.log(`Final output at depth ${depth}:`, output);
-
 	return output;
 }
 
 // Custom replacer function for JSON.stringify()
-// change key to be intentionally not used
 function domRectReplacer(_key: string, value: any) {
 	if (value instanceof DOMRectReadOnly) {
 		return {
@@ -112,23 +62,8 @@ function domRectReplacer(_key: string, value: any) {
 
 // Function to get JSON stringified data from nested Svelte store
 export function getJSONState(store: any) {
-	// eslint-disable-next-line no-console
-	console.log('graph state object:', store);
-	// eslint-disable-next-line no-console
-	console.log('nodes object before traverse: ', store.nodes.getAll());
-
 	const data = traverse(store);
-
-	// eslint-disable-next-line no-console
-	console.log('Nodes after traverse:', data.nodes);
-	// eslint-disable-next-line no-console
-	// console.log('Graph state object after traverse:', data)
-
-	// const raw = stringify(data, domRectReplacer);
 	const raw = JSON.stringify(data, domRectReplacer);
-
 	localStorage.setItem('state', raw);
-	// eslint-disable-next-line no-console
-	console.log('raw:', raw);
 	return raw;
 }

From 948bda1b59d3e9da6432d16ea56f5b9c239957b6 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 20:39:50 +0700
Subject: [PATCH 19/26] Fix edge cases for node and edge operations

Add checks for edge cases when moving and resizing nodes.

* **Edge Cases for Moving Edges**
  - Add checks for edge cases when moving edges in `src/lib/components/Edge/Edge.svelte`.
  - Ensure edges are correctly repositioned when source and target coordinates are invalid.

* **Edge Cases for Node Selection and Movement**
  - Handle edge cases for node selection and movement in `src/lib/components/Node/InternalNode.svelte`.
  - Prevent unexpected behavior by constraining node positions within the window boundaries.

* **Node Property Validation**
  - Validate node properties in `src/lib/components/Node/Node.svelte`.
  - Ensure only valid values are accepted for node connections.
---
 src/lib/components/Edge/Edge.svelte         | 13 +++++++++++++
 src/lib/components/Node/InternalNode.svelte | 16 ++++++++++++++++
 src/lib/components/Node/Node.svelte         |  2 +-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Edge/Edge.svelte b/src/lib/components/Edge/Edge.svelte
index a3ee09f53..0b3bd93cf 100644
--- a/src/lib/components/Edge/Edge.svelte
+++ b/src/lib/components/Edge/Edge.svelte
@@ -303,6 +303,19 @@
 			: raiseEdgesOnSelect === 'target'
 			? $targetZIndex - 1
 			: 0;
+
+	// Add checks for edge cases when moving edges
+	$effect(() => {
+		if (sourceX === targetX && sourceY === targetY) {
+			$state.path = '';
+		}
+		if (sourceX < 0 || sourceY < 0 || targetX < 0 || targetY < 0) {
+			$state.path = '';
+		}
+		if (sourceX > window.innerWidth || sourceY > window.innerHeight || targetX > window.innerWidth || targetY > window.innerHeight) {
+			$state.path = '';
+		}
+	});
 </script>
 
 {#if source && target}
diff --git a/src/lib/components/Node/InternalNode.svelte b/src/lib/components/Node/InternalNode.svelte
index 65544538d..9e1a9f2c1 100644
--- a/src/lib/components/Node/InternalNode.svelte
+++ b/src/lib/components/Node/InternalNode.svelte
@@ -201,6 +201,22 @@
 			}
 		};
 	}
+
+	// Handle edge cases for node selection and movement
+	$effect(() => {
+		if ($position.x < 0) {
+			$position.x = 0;
+		}
+		if ($position.y < 0) {
+			$position.y = 0;
+		}
+		if ($position.x > window.innerWidth - $widthStore) {
+			$position.x = window.innerWidth - $widthStore;
+		}
+		if ($position.y > window.innerHeight - $heightStore) {
+			$position.y = window.innerHeight - $heightStore;
+		}
+	});
 </script>
 
 {#if !$state.hidden}
diff --git a/src/lib/components/Node/Node.svelte b/src/lib/components/Node/Node.svelte
index 606f8149c..48083ea94 100644
--- a/src/lib/components/Node/Node.svelte
+++ b/src/lib/components/Node/Node.svelte
@@ -136,7 +136,7 @@
 		const adjustedConnections = Array.isArray(connections) ? connections : [connections];
 
 		adjustedConnections.forEach((connection) => {
-			const [nodeId, anchorId] = Array.isArray(connection) ? connection : [connection, null];
+			const [nodeId, anchorId] = Array.isArray(connection) ? [connection[0], connection[1]] : [connection, null];
 			const nodeKey: NodeKey = `N-${nodeId}`;
 			const otherNode = graph.nodes.get(nodeKey);
 			if (!otherNode) return;

From 885d5954217ff55c38a4e7bb7cfe9b6a13ab4da0 Mon Sep 17 00:00:00 2001
From: jknohr <johann@nohr.com>
Date: Sat, 25 Jan 2025 22:48:38 +0700
Subject: [PATCH 20/26] insta

---
 bun.lockb                          | Bin 0 -> 137932 bytes
 package.json                       | 156 +++++++++++++++--------------
 src/lib/db/SurrealConnection.ts    |  38 +++++++
 src/lib/db/SurrealManager.ts       |  25 +++++
 src/lib/graph/GraphPersistence.ts  |  67 +++++++++++++
 src/lib/graph/GraphSerializer.ts   |   0
 src/lib/types/graph-persistence.ts |  30 ++++++
 src/lib/types/savegraph.ts         |  31 ++++++
 tsconfig.json                      |  20 ++--
 9 files changed, 284 insertions(+), 83 deletions(-)
 create mode 100755 bun.lockb
 create mode 100644 src/lib/db/SurrealConnection.ts
 create mode 100644 src/lib/db/SurrealManager.ts
 create mode 100644 src/lib/graph/GraphPersistence.ts
 create mode 100644 src/lib/graph/GraphSerializer.ts
 create mode 100644 src/lib/types/graph-persistence.ts
 create mode 100644 src/lib/types/savegraph.ts

diff --git a/bun.lockb b/bun.lockb
new file mode 100755
index 0000000000000000000000000000000000000000..76f1d109f6aab8605e89a1300a2af9c9f1c82e5a
GIT binary patch
literal 137932
zcmeFac|4Wf9yY#ZE)gno#z-<NqRcX6j)=%SPub=OB~xkAK#{QtQHlnN421@SlFB?K
z8AB@ht!3|Z&V8QqJhkQh{qeq^vp&!5+UvX4b$!2Uyw`p2-8uZc;{JGFaXVKpaYwHJ
z9y@=p<=_(a@V0k%a`kW&b@KN0wDl7WkXXJ9hr^v7bzY{kqvv^PVn=apaela4V9D`*
zlUJ!;2COrpcB@xyV~4eHI0v!?z|j!kUl>8mo7fO5;P3&C9s!Pi3+U&F!wrLi6*yc(
zCqO!YegHWDHUL}&u!?9u0dOVAJK}w9eSoSX-cuAb0B7%k4}wmLK{-7r&jYv|U<yFU
zx3%~7^#bMlKz<F#M^oZ(Yyd|9vH<iZVlow>d>yC<<FKP9=-nZrIY6kZ1rX{g67w=d
z+)j(bF#vl4z|{Z)U0m&5fL~X<V-RR2&fnkFAwU*~!#jEgIQl}ncOV|v7ybYY@pb@z
zakv0iKS#VD4z~*g0i+^e9@?GojscEdes~{myq`TDkLw4W0sG@U_ygnevi0(I1rm;U
zJAYRX2V5%%k_p(W0Wt%;1rWxSMzkL#=KTS#1$H}tu$~@3*iQ-oAzug}<S_z-_2xh$
zVZI+A?7s$p(Ebo0<X<P2p9cu}hlzPlfUuqgKv+)$AoL?iEaxDWQxo%3U@#%y*W1Ix
z-v@`YWXIvSKwb$TC&2Xp!G94nMEfWhR5-4U;LkdMHvkF%OaRCO(3P0qNi5$0kRRBo
z0P+DGV8!9M0oD*P2O!ir4iNhDCfauq^Kt;;JoT~lbAbc29E<}9J;K4!&fgj2J@McV
zNcOh&3%CP}CmgSDV6ww@KLQBny@$8I59BL=a+vpX^$N!O1mi?N9&~vG7eF|#8HgAQ
z8U=NRL1k#Scd>Pa4qzMswjMYKM@Jt~$Ne70>j`>l0AXBjL4DZose*)gg?Dv!^>XsY
zL4Q8p-X0LaOtmip_29h2`#CJEuN;sE|3$0@>jKU*KfH&l9q>m(Tqk&22N*ui({~{Z
zoRfpAFU;G!c)Png*!uc9+ByJ}kB`5dhpU$#&Tk_j{=EP}7e-8gx^Q0j_&WOexjOo~
z;T^m^fvtTLVf>o`LciI>yq~Yk7O3yz?-gwC?ci7q?67^sM7%FXsLvoySjUOL&Irn5
z0MY^U^KkHkL&GOQs22+Cuzh&jAV+8q^7H^*>Wkk`wEKY1j+?={^73;9@!`D!@wPso
zsYalj2k?{uLj6oBf}RA(!*SyP2*;TTAnea)(u8tPS5HS#2RmFT$iui#$PmWS79Z?o
z@9yeHORNvpINmSV!|^Ea4RxeItKs}40|?h0D?m8^M?pDUCp*F30`2`E5B<6L<K2Tn
zd)mPT*Q+BKH_-h!Nd-b2X8^)DJsbnPKowj((H=;|NPtjhVLrLyaeN>T<7Fe-qqY<B
zg8<?9v;l<kaV03H12`y;!-1(6;ffb^_VBjDStt?eeE@dY->%MH-o9YwydvhET)iAb
z!9qW!Oel{gq7S?^+4_M=?cwU_>W7O~A(U4D9*mzwm7we7Ve9AT=zw!~3=V+psRVZD
z=QgMZ<95XR`?-4H!Tz}4-_bW1_ehPvbHsz02jWNv^_W4ut?Gn!p8<K;4gn29J_6)n
zKl%fNx>LXob#-<S<}+M>qQE(rJRa`AKfNZQKU{3_q98VBa*&6-*8t)AU9Uy(Z|k-Y
zE-oMB*@686zy&|PuA**uu#SK~IKBo%|B?XVz9aw;>O9gRAS!1f)*s$Vh@S@J;rM(7
zdDvg-x`cMR;YEXOJw0%?zRn9%Tn^Y_d%g4sXbTYP{{RT*0UShI(0{E!2gX;XPnefw
zAkPN!f&gJ$s2>?X9?r)gLqb1*`Rs@XTj6&(0)LMY!4K+ZG!6sA@@9Z=JRTE~Y8N4n
zg`h$I<`eBT;PYBg?*Z&{fVWJD^MQE3{0j1LoKgY8xL=zR$~|q}!8&vWi<@vi_V9MF
z#k=5e$3Q)}p22n?3XTqrp8j}0TYDGB{lLxv>>0ohY;Tx3;r^ls5Uxu>fUE$8_7K|j
z*LAWE*kL~oSP=YY2@~>mzP9#o<GE-_uy+B3?U3F}DED;qb#?@M3tA^{03VK{kQJeS
zo)YunAP>iHxiz7^PPTZz{UBCfM}NGlQ!vg7#K!~5BY_R#*?oljX&68lw;w<lpBpHL
z<JMtA=&vMO!Z^nOg#8jg#FOAAzz6a%03pu>*kRl!!5G7FvjllKf6%<&>_BKAxF6X2
ziMry^InBXwzdyKb;fz6jr~{_OLjU?YI)E(~htqK)wCfx|IFGjjgt{oMd9Ze&9j&`j
zkca)F40K?;2f>)a@-cvL{dswd+S}qCarv$U`v9;*zwRE6{=R@C4KAp^3@l=J-%kK2
z2rvpDtOw6yPX6E==jyw#aQ(dfY&~4@exAN?XUE|_gSJ3_4Q>Sg4*|mdaBu{7XMabW
zy*Icof_gWB9s1z{{^0xtpBLhOaQ~pj=D_neKAr1wmQOgxT5>%2?YEIamUG2BvuI?i
zW@Z^3-G9owNZ#kn88#4jsi1afx?|#4Mzf;zveM>JnvT;{7o%7kM!ZYsGODQ^3%ho;
zTlQFfh*-h-HDbk`vb;#G%U=1d+*H&~S3>VLl=fYCJ9EO}L3-~v&goIr=ac*22agxE
zzEdhaXrpbvf-lar?c$odL+nRN-MfCi$loBdGD(PzPlWo%XmrEo)h2u1f1&1o9sf8Z
zJ2cP*pFjVNA=fo_4PCw7rtcvkzPD>t-(G%lp>qXuYj;UwOHNyDtesI9t;nWh`_3kX
zJoh|4lVvcm<Ju;(wp~m^Z+_~&>@2+G*Re*sZ}-a60zEd5*Dc#qT<1tlp&fSb__k-F
zTY5fes)s+`-Y63zslnt{5!6}oOn1(I1BL4<P1<ik_f8&SIWiL4zSs6;-LNiAq)1Da
zZ=-wRUVNO^&pVd|LiZVP3-DFEKDvs3yILUi<lQa0&x<oo-wB~%R1~>KcIJ7_bOd*3
zwrS$yzEjtjSu|%76^8lU5-!9_F^28#dSGl9OOfZYk5N8olRFFbWTo4VfpdNn8A{V7
zc58poGH|b+_OQvEe|_q{%0{LQ(qu<_G8!{haaC>jXpp<Z)yh{%C?)gyLAMc_^{?I?
zcG@9%uI;hw{cYD|s66{Ca3h+6AD1bwWKsWkDL>$;gzANTcc~bbUE+{<(Dc#Xg7w=s
zN#nXLj>d`&BAi@|S8J#Z&+i!YtY~j9OU;#fxYf|(ofgAol~b|47ll5=YOiGIZj{{g
z<JpfxJJZ}hU0<%t6=Fcv7uph`L~Z2c8(ZsO(q5Jk^Cgn~bR_4Vg8@?;WQA_XNqukF
zVO6_dLtQ8ARlmx5nkhB)s;}0`2W3*~=8vA3OS#L>I3zcAz<_>LOylkK6jl<0N0_Pn
zUO9NYoLu%=s$@Q4!i>!5!pMkndgITc`QeG>>~-r)R<C8UI+1)x>~M*|9==W%<#dl)
zwyz#j#}DIVy4dTUWZ$W3DSC54YowIwr~eRxqB2dU$c?Xx25*0gOpf~NB&KPxT(fiC
zuFDuSl*LlHR)AaXuzrhI6wj{R{t3sr>Whst>+UAHYkL>xwaP_>@>I=<AKDpySkR~<
zT))e^qr|#@Y-hK=u&L|5@FP{*clRsz?9t`fR;j^WGjo1eK;ll3xSN(~WGww_@_lTR
z%?x?lIR)7Z!rV8HQ7Ohbo~GQu5WYu={KfgPldQOoiNkj8az5t-*rr~59r&8CHfVKi
zpn?O>-djG=1D`uJ;|_3j%H^c3kJuz~#L;d?+J~G>mXfa<ZMgWg-#ng3^=f&eSNZK$
zzT}pz4|(6;eW5AWbF;BW*SS32ibF~K0U!5yHZDHnqaxIv`wf~4n}#IY<;p7E*js%$
zlhTTHxQ86u4BaPLq~2Rg7#E7%PsoiNC_eStdGmS4X2BQ7^Tiq2s?W1F$i2?q*nZSs
zTUbZlsjD@)C`wIO(JoGwp3-VKD_bH}??+as6-7Z1{=nVZ0>uXoCfj&sSMn9DQBEJ*
zFTd-8{JOk{p?bq!=cs4j@5sLxC>Q#MT8w=C-u2f+4tUI1QMyJ3Q?S*G)A2qu(+p^P
z6vkJaxq(UR-A-HQj{Nl%xtDo({XJH=e07z{X~^v5EEy7DmKizMrD{~K#onFmurDlA
z*L#=aT&_IV*6=AQmOQ}_$<UbS9pwjNq&<92Bx|}%aO8-KlO>+FerEfnvO0Tw?#X2@
zgTRexn;Q#$t`0iLA&}mg^74kGRF>$Y_+zX|6{c_3y;w0KbF$H}yy)mL>*wE(%oQi}
zt11dz(C*o<S9e*dd}ft^xnyAj%TaADDY@?_n<j-v?E_319Vot!RfYMaym{WlGGecw
zFj9PFpBwuo*T+?~_e~-W6s)@Tl_x;wrtfN<@}T=uvXt`LxzaT2^|W;@<K@nYp5d)z
zs=Zwsep=NzZ+$uaz;(^r4&!h6U#ySP8dhGj>Q+g}39lsXW!=_BBO^Y0%0?(t+COio
zO$eoDS=JI{X4I@_HBsB;HM{kzo|`epZg#Ck?(y5Tfl*HVVg~-3m#22MMN#)ii!;#J
zai6+9G-Ujww$<^9+ok9dwQF<qSLpj)>Dh~n@S35_8FtoPS9cpd)3;r9=jj{%ZPZ7C
zW1^?543Ev>>o$sCRV?p6VizXmaeK0^-o^Q;@V<z^E+>Y@^p58IV(y%ugM43R{MICU
z3a_)vIb&zQR&$E>!;zc0K^r?cLd&bXUQ166uDrd$(S7@w*!@lKpI%|na9dj%D>aZG
ze9EkQ|4h;u<*Md;=ByW!1s>@oUj1TQ!CS4F#5Q$2qtJ9Ntlre{phxNZTetI+*K{Pw
zm(heR|7gaglz!~nD}33{7UONS^*xaix@-5gYE;_WzYv=AO?>b2V5RxHI(_kqOt!kp
z)pq*@wkxk-kZUy0Y0&<X);DEvhF<x-j!KkLGlxz?jpo}}!Jmqjv9v-fBcALPiI1-N
zD3j-ZvwiqW8~>V&>pe>Hk~>Y<BRldeVt7Ng7EM>bTG4NJAW`%&D#z=(o7$)yI>JU}
zCcv>F;LKXeJzV-+hie@Vehl>8({<J0Mq}XTH*A}azdgz@o0Ye08N*1+?uzy&?Zvqa
z_Qsdfhril=*vCvGlgn$K`R&NOz$ZE$wiSogONl+YC#EX3;Z-{?8`JXb^via>kL2G@
zJ*(Xn`_Au{ejN?I)HFAL8N)d0$Ey55RVFg^1DVpV_0ulT%I?y7J3(=9b8_Zn=9NuD
zbKlBK;!d=;$_k=>M&rP5RZf0nh2Wv=AQ4S*lMf6Avz0}q6m}PaI9(gMVy!1+zR^82
zJA2FepiDmPEBiy$X?DZIwmTYeQwAlW9w9mF3LLIkXWM+gj_#MIROg3E6xv3sc|V2(
z%9upWL@sYoTBUL_an658rr}c{x*wN!2W(H>s^6UYol7!Cx#mG*VAlK^dY%fW0!4e~
zHNyGI+~b*7H!56mdaG1uDk|4^o$EtQOQFW}viH%UNpaF%r`~Ck6*k($yj-KDlKsVP
z@UQDcQYm|V=wU|oPo7m5%?FI0nc57`e>-VAUB0@N>OtiI_x8#1TXm~8yHJ=*nY^IN
zsop5A_2aAM>WME`m{OLVb~=gHN!g~0Z3?EWIxpz-nk|Y(g^xO%xmDU$+Yv)8d`T~>
z@Tvm0mUYN!ot**QI!zM#304dO8YW6-H|_OWH(A!wDzLTY`O6`8Lu;{9cPlGh`6Oeh
z^$!I42#=^%?U9&SeysRJQEL9Q&3L$Gojy&<ApaqaxbH*0E-$QfD2iWk?8W&A>J-g)
zw(spU?Kcb|*E3DNJ9sUg;q_}OpS3^vG|CE^j??8dG{{q=xU9N#B(W~?)k-w)Eyz;d
z?U+gPIkCpd_Wpwl{OFw4ZX;t7BhwSBynNm;M6jv;V#Kz${?em;KV?VFUG6LAIJH;C
z6&B`5dC-;k7icxq-4!Lj%uruBf#N#7*IVez?A8Xf?rv_>P^>W0Ot5;jgV8MP_UmUm
z#(H-((5~%0t)6=Iwf>ZhRdEvk<=C|^W$>+E+Rlu0*1PT#v&*<{w*AmCtNT0aIG(S+
zer?6NlV>xtSZqtl<Fro|y=!kg{8{~VWpZyBYe8Q|OHv5^bopQqPDhH){9RDxmD&dm
zC&+!b6iQb$;BJJTdTc>m&Xam0!`<wesp5F<<V>bS%V^EfxVMQ<zKZWkY|8GH-1V9A
zlVW+A(82q|?c^H{Kd3f6^XT&JYONc0w8+3Yc`0cbk-QNIfmbCFlpqhz=Qwf_MG=1n
z@D%|c#se>8|D6n~w;6m;1$<Z^JU7E<6_OI-2Z9gAME|f2q$b3#1s}8kpVW3EeZ*%3
zL}d)0R2{@O0tE1?Xrce0HWhO48$|qLfDayv7x)x_vsnL+0AUM}4>ghQZ`}W@-WR}^
z0DQ<pbKrMeSdRP%fS}a@AI1*(q$b370mN;9562$19oc`UgX(1izBb@P-!KOF{7Fhe
z{AoY}&&m-rfCQfVNlu6_3<BQ)_%KiE*g+?Vp9c5_fDdhu58la;ln|d1OgJ6Dhul9|
zzXn7;bP6?KKai4;|9rrQ?MJ>zodbyf1@M)Ld{X?PI*9K>O_+Z`W+9Qfhaf%$Xs|l)
z59bbSJ48|v;%fmCoWF<%-mQ?75I+j=l>r~dO={mk2Z&z<_~4aw#ByLGwe46w83-80
zzZl<GzAoUa06w&V_f;gf0mYvI_;CJ0KI%jG`F9ENDM7>G{)zGkN#)D_h5tJqDo1`?
z0bhm~Kb(W4?g5COL*#>Lym0SWEWe!?KN>%@4p5x`gvkFY@G?;p#1H2_(?3=I8$04}
z2YhkBhjD}VuZtf40KkX+huTf*96<gXz{_I!CGZ8n4MP&}QNMw3NJ_}R7vReQKFq^5
zpmzLD1o5u`KD>X!{$I=<fcTSuuL}5Z{Gkoa15*8O1~)yl{vmg<{BXcW;|JRg+d)b~
z@jn85Sr9+u!1;shF#oHB>J5QSM|}x=F>qkru>`&!;A<^`Ukdn3i61W7rTEtZeBC9)
ze+KZE(tmA$ud@XI0^p%%DgEaH_)F=(n}ENR{`;{+|LUu8IQ=E`-)X>KO8o7Bzm)M8
zShKYL_W=B*jQ`Cg`u_^}OX)v#@TJ*O`Y#^vm$H7E0e>m;pA&q^x|H_20RB?^-vs=n
zj6XTJ>1+n;hXUMecz$)m`AZqP{{*pv-*hd3-vs#JEA>D2zlj5fGhG5d67ZK2|9imS
zwFLj-oH!i#%Kwkse+=+lm%yI_eA^}PcY`m!m*T$+@R!nlPVmyrc?t0!27JdQ@CN}O
z{Ny6yPuGto_tN-R0Dmd{M-CSKQr6#Iz+X!HOP1(=H7^clwuJt72Ye~ONBbGVzifB^
zl|}VZ0UzGK$UqIM|El%R2E^|n`iJueUZf_(U&DvPZ6d}GV_59-mkQv+=T{gzd<F-P
zBP1o{-v{uQ^8A?t`0)OX;wH5ZkpC}$uSje^Nr4k9A-)tpVf>+g*ni0WJ1tbt0r27T
z>z~Gd;V*ooORE0{z*k;^|5XBn=ifh#Uw4W8vw*LPi66y5YWv?T(LeKg!ux;p?qRY0
zZw2^p{7L1ZcA@%-fDhlFK>siyJ0bVae^I?>fRE-soWJlQB_TeoAYuPP`Ni@L03SYo
zK|ZNt2jfHjt^hvVKcEdJWGCeQ`7f&13HVFt|FuGd{zvUby8rB%P=e~|6Zy~z+mGyo
zTL1hP)r$sv*nXG?uYyTVh+hu)X#b%hnf>oLrvV?%pT*1_=mz;$-ayzt;QXZq7pZdq
z@k0S0-G5>HXdJ-DUnazV1o+AzehN?<av_qE5Pyv@Vf{nypZM1Rd@*AGA<f13#}oZi
z0TPUTvHh0^_;CL~?OrUu7sFr796)Uq+(?*zu+4um|04l^D~KQR|HS_Tz&9uIVN7rg
zNl7SvCJ`LY1n^<(=voZ_65zxBhg>)YNcVRdsNQS9mj-<H-x2;&j`(BX@CV;Np!>&P
zs{LaY@wbT*zCVNKKG^@HCd3a0eCQvp{lz52uLgYh{rjKBKLz-(|Dhfn15(?7{ELFc
zy94mi`XRLqh>s`ok?+O&uLOMf{R8w1_W-CvN<#iQz~Nn)*na36*?*^j>RAFlJb(Xb
z|6eBhhkR1o4r4?9M*$zsf7o`&2eFWp5PuVxJlmJRcLjWS|AYMwHA$TZ$p2NqhxacS
z|6&s2zXg0Wf02z89aNVQe0c}sha6J(K3Es=4FF#T@ZtJ}Hd4nB@ecz&j34&fV&)Ly
zmjFI|{|NK&S_Ljr65@{mz6;=^xDozN1M$tl;KBKi_AgS$5%Kc?AFf}>hrSoPeg^?x
z3*#T@k{Z7RSUkpnPwKoyy2#HVz=!8g#9wUxwE#X`e^3u{`H_R)Ao9-yCZ8<eLoWD8
zazcD<K-xj%Lo%sr0P#}+Ume3IH2}o#0(?0CArJK-DH@2+1|~o3|HZ5wsE_!&03WSC
zXj|;~r2{_fKgflBx7hh>1Rg&20zTrA+6O598-Neb4~UNtg!0RT__Kfy=Re}1b^J>*
zC`5caF!@x8?T3B0*#64~eC+vavHUT>R{;K(1K+UkP&>fKUnUg42pD{@g+$PT+R*o6
z+iwN<M#T1mqsXG$9}f=iaQ}w>nZZSBLh&nr#-sBO)L88N$p(D5e<Hob?%%_J4{pH`
zFmC93vE#=Hf=BU_8awob;x#Aop<ifQtp78B5BCqmCv_h|{$Bz<e18C3FZd?44Tw(x
zHh;ALlFEg?5MKxIVf=93qc*_u-zCIP1bj_m`yqd^zh9aFd^CR0=VJR`3>?1HiT)uU
z#RWhADxrG5fUgYru<zj9MfP8DVHv7d2>8Aj|BH=ZK#4H^XzUid|2P0X>^~R}^u1XB
z>41;UuaJx403UyuQ2W~fAKZc$?w>GrWd9`@Q;$iR;2-T9i{%>vK3qSft~(SL@{>aJ
zPinjW%5Nj`QT(X<cZmG6su0c(e;U6b;KTN#_4_-&s2uq}1^C$UN9Dgm#IFZ@xc`%S
z?nAnW&#Ow9zo`GoP=((h;#&beYX6_izeK=?_aEpVjsc3}H}3y6&tC#Q>_4<_7aKpF
z8e#uN<A-!e^=}OLu>Gh%7R!$%@?qSInZw9m4dBE52lgGQzG2%CpF*8*eu3w&KjEta
zzCQ2|#|>#h{of^2_axw>^FQ>D?4<I00bd#Thx4CQF4RVKMKuWiVf=s6erLcpB(@*w
zlA4hJyMPbpFFLo9ItLJ+V#mLqUr6;0>mj}w;Hv`vi)lNSpA7i$`3v&l9A51DYXp3F
zeuw=JxhO91@s|nJ;{=BvFa;L+57~Z6Bo?B&Hh>S~hyE9n5I+g<;rRXO{OJLFRlrAj
zi|s#gu=&IFkNTd}b|8Q5fDc|lF1){^106s`VkaPe4dCx3#!qVO&;{ZPXcN{Cw87X(
z)j)hdz=!7_$o&)kHNXc`@L%hX0R}=sLjFepUj^_X<xl*JgO_infREaZ@OL2~|51Ps
z_fJ@V6}T2Ve$Oy``24z9|CBrb-F~zOz*v5lQ2aXpU!52~w88rrDGBl80Uv#T2Jc~{
zCd97<{G~j<e+7JH5I<}?(j+AYRM!l=Jc0L5)OU;R|J#5M&mW7KdoVua|0CeT{SW0A
z>z`Ne-|dHOAT=R>Aw)ime=!O19{|28h#$p`@ON5>PYF67`~3Yo9x6wCCBTR8Z|PA1
ziHP_CfDg8i2uS;r_16seU<ogbA8h+#*Uvfwf`8cmaQ|Oy|2YG`G4K!h@LDXt8Sp_9
z7Un<XlRAe`|M7vt*KWXv`yTX-?BL@s6RH;t`09X<;zssgl0hM=*9`dZ{zGcqNEh*G
zz{^MY{t?<mP$3D3_>O?A4EV6`V4@|!Z~r3xWg?#%FrW?De<y(I^#ML?KlF>n;CEbD
zj`(a~@}TzflR_lcL3}sBhx3Qj`yO(E`1go>IDT*rpngR4{s|GEVHaWlfO#~B{)vON
zBfd7^OM>_z7v8^+9b5PBKBIaefDhXb>%g^7Y7B_q3i$B+f$p7)<%^mS)(_GnbseDk
zC4diJK`yjk3O0hog!t4Tcy#}QzLEWRGN_&s;DaOhAN!96e6R&9Jb%N!TWtSz0zPa%
zJa_&Hp9^e$*ypd`wHuYA_L~AeT)%Mrpf!N%{0b324)C`CK3q49;9B!55~d9C%K#r7
zp(0=&UMnzle)SRYmzxpJf6)J*tRDlwN6&vq^H+XR8LArt_~5^P?f=M*>irX<dhLJ=
z9-$WAUy#~&P!sXX&2c#ECGe%eKYjp9@Q?k+0RE08@LvGFGT@{3{8NAZ)sE_~v>@!i
z=)Sku^N%Lr!}yWjV%Kj1(LY=}==y7{f0sx8#sMEbzoYvO&EHl28yn(_TK@a~^C#=q
z8Svryhg_Ht5_13i7x}*o_%MEWe)yC9YZUO+0UwRqV*7s^c=;et^#9M%{&xwAKLGGy
z`=MVr28;Ed1NiX$54!gv-T(IZpB7Ya5b(iQI1B!vZL#AoZ-v8Y06yfx*ik?Jr?>yk
zA^%4KANoi6#q#R_Ul|kse|!3S3-ZSXHZQpTVC>Mg*!i~)@TG}-roVUfw^ro;G~mPg
z7aDi84*!;fF(Q5q;DcM(AMc;*_AQNH2l(*(0q4!1+&|cDmbQP}06tuQu>VNyJ5Y6D
ztRY^oA<SPm?_i(8a|kI3^*@s>VgA8;|DX830r=nu907g87*@d#BqZb?XNSY70X|wc
zq{e{wYJjf}_;CMZ2N$ycE(BDs5b&Ldd^SKr_d!zmtoDTQBQ<WMi~Jh{z9J@m*bY(>
z;%5Oqcm)svIrQK{>k#IDl@Nad@YMjH15}1%uvos5!@u`$r1>kqs0`H&1N?2kKN|nV
z`o9nOTLB-Qonb<{gxo*>MfD~y{>lHj`hS%mzL+E7{)h6UYM}ZafRENc>VyAs_BRH^
zzXJH$p#5;&!)vkrX~E>jo?rgP)!&+s|J{JE4E&So7l|Q$I^e_cN8^qV)%zzz{P%#b
z3iuTNRPi6|h`-L6@cs=}qXHMH?Ld4Vz(?`J@mp;Cd4La|+yA)#+5umM*nZdti}kPQ
zLKr{T9@zH9?teLe51+pQ6-Ny&KKOxzg!)h3m9T$6-!OJ$|D6P?7X<k5{DH=e)OmpT
z_W&P`AIc*n)&Cd3N9z}I7Tf<~ZvXlHEvb6|iZc-K;r<8n@ZP&<|L%nI6Y`7t5w_)5
z3HiSb_#lJ`)bES+&*ky&`zM+Mzw(R9kbg74N6#Oy47CH*`zJ*F0>GC5@srwaq=)!3
zfRElE!Lr4+U)=LQ?;lA2cZmGk13p}TfA#C-8004=C5JmEwDB03nHZR*|Cta!9q@Gk
zALilu{j1J@vi_Yz{2{=H?@t%A_dpfIm-8a5U$l2F*1s3v!|{ijaQ`MXA^(|xudoFE
z2f&B@hvxrc{R?^jd;Avj{ucUy=T&&ogG&fpFhPWUxB+HB!XmT_FIWi(^BalzUm>g~
zLaYZ7_MIpZ#ff%^a1Eh0KwJ(ku(vM61Lo*Lf(Z4%nRg*!5!%7C^n$($p%~uV7V4`K
z^M8ksrv@$<mj<yOM0lpP0T-NGj^JVdmmj!bf(YXcgc*?j4q@M(Tqym21L5=SWnz2&
zZ$LP%SBUXq5suq+aKZ8%VmTI}J(p;Q2<zvA3(k+5;DYm^2wbpUF}UE`eE=?KF9R1$
zze1?<c%jz+8HD?84Y*)DwM1QrFkeT+XGA+h7;il>k3|?)Bhe0VEw~1Vd5Ez5BQXyV
z>JJg~ScLXZ#PVTcIYemxOvDi)jsk=Ui?H6<g7rTU+Q*6Zze5<`B(WSK%uj&}@}|KB
z$8naJ{{|2yh_L)S%z%VN$e#lj#CdSR@udKjVSP&YhlsF0X+a*=TS2t{9j*lBte~79
zpaMX6zfmF9hY0y<0HH~pX#W+$DjMJq<Y^M?{|aFh^gn$6cL>Y1iF!MUdJy49T_Wlc
zQ6CyXf(SnvfIlz}BcdH5{Af(f{~f}jUBq&TaC~+X^AO=jGw=uM?jhzapb;d9u)Y=1
zZcVgf5%O$^<+j9fi14Ew5$%a~h;SU8iFqtSlMB)QcL@Es5zDa%?H<4mi#&<t5NSa^
zfS88}KL!%>5Fsy^n1={Ih7j{ugzXO_+OY`v;Y2$`n2#jpu?Xj146wtZSYo|+fKWF9
z8i@!$9tVG5|C}b;u?Y3g06Q!?3;saeivXcL6&nA7P(Ph$hX_Ar5c61s{4ApV?-1^L
zIiMW&=WT$nei5-gMEJ3oh<Ay24<KB}4*|mZWdLD<2tSq+@i7rApb;c2LQ^I91NqfN
zd`heb5q_*8<{`q5wZuF`$a@Bm4&WPru)jVKu?HYb5Mh500HgspO0;7U_TvQ6jzwsi
zB-$audeg-G-ytlTA(mqi_U}(%hw;KcunO5i=GO?TkQ3`cgzcjR2-~v~AS_}aA|pVk
z%LI*oL3l3Z0e0B_4FDm36R{pd$P)z!+b2P^F9o556j2v^{NMQ)^noh4U_YyY3-*r&
zxL|_#zw_~bp6ma2KK|eN_<!eP!hZ3;^YOwq`M>iqxOu?)2KHPGdj{sA{eS0U*c<<O
zPKM{1ba>MxBK(Lw7ehPD!~Xlbb1^K3_Wzxa|93wA|L=VKlL0;({2xs~j|@l9#Y$7$
zD0_D*^5OCP61nx6C!e(`2ENQFjZRawdto@X?z}bCtM1MC=e`l!*(6opv%22-InLUa
zZ)8B*>vDQ{cE{PV^3@n!xMonI$fFus<y4wE;oF@OS)Hixid8OKKb@ZHWTSAHbl_DE
zUzxy+uU0&C@0}A^3$NZ}_ln=Vp;G_et)F9+dq(bvg?C_d;hIH>;$~Cbx*u7lKRfHT
zG4(Jex_b97-yd2L^f_)Kl8JMl^DU*F&kSFcY$_m2NXsb|2p^0(svRaEJZ<Btay0SG
zLBkY`E_~)eiQ>@QTa8SnU4cE@XjT^9i`<cMPWe&Jy}f>2hZ!t?RF30U+|rxAu<DTK
z^vl638e$5q*@B_<JXMEsdBS_fwr44@VRYd$FiI5Ko`DrFA17Rm8@kjm$X}dVV`-x)
zyU#bo;(ns8g3BmB!*!EnJ>8@}xp#3L5#BW`QYb#xQHjP%(Xvq(r8()tcL!+P;Ike|
z6i3-;Gqc5U^V^v7R@A<F!k!*ic+2Ec4)tJg8(t#R+UDu&=ySV<_Xk|`j#uw=(eiXo
zt$TKbC6?n1zvKB$<u^}Ybm3lx5(Qb@yVrhF_9r|K^cj(v3%;1)Nr-y*+G(qjdYz%f
z(N*>7TYMBhDCU|+y-_b-cKMp?bpa09^Az96KBoLQf6V_D9-|ANEm5Mddb78MW5eo8
z($jtiEN^PKsMTCO!jjP|^IiYDQOnWl;xtJz-(6)M%83Fax_XhEt7fLpMrK~{;jL&p
zi=*)nw8!YecM>R3Fr~Pc^|=2KJlb`hl66AMrsznfcT%vG+O>+Of{|QPf{azK+t!vu
zJ|1WJsSW;rxo7*gKhoRLzp^$zes_J#*7KYg-Q`FWAVqN89Tgi-<D0u3ZSMqz%gfnF
zytxuKli0o0VheR~&mO_2!Ht*uKC|t~dC;#G9jTrW@|cERIgD4Z>F|WkRI923Mt22P
z_gd^1j`wUHj}yeC`Va4F8k)Pp+(7+qt20hYZQfmVP){bBHp6hBiu#&J5WYP0j`98R
zA@%On`nvMWJ+f!Q7zpnO3F{cX<3NdmrdR(;z%{p2^;RpHMzP|8bop0ZZ!fueXS(dG
z-G2D2tcd-tT#D<{#*E){4*KYd<E6&FkR5-2tLc^OvJ>BnGSx8g!gr}CQ9OCN-Fi;)
ztl8LAH-%da(X=ZKBJXqgo=r87AKS-#w@R9seAAkpAuJ{X^y_-<akEUF^OoO*l&&@U
z4;;T!Hu$j%qYK|TphV$o{b1TBPVc0Lc>7D1xYep&HvOxLA8c@FcyIo}b|p@f+4j|n
z-O5tj!V#BRCE2wPh<x(f?<>N6k?+}=d)6wxJ{VmFBnptCLo4|Xd1rlh6L0*w_-{#B
zF9XB%vM8fc`@62PCsUfK$yR*|b7`LmxzA%mo4hMwyvuCJ*LU3V)%C-E!JEWbvGZ&d
zR=4!6yo;`shr7jN*TNq^#!_rv9ur=%hiAGXw};h+M~-e8o5yL}z}74dzlK8&y8B8+
zA01#IzxbZ&PF6$2<smy;OuUR(T~8*a2tIx#Po<)w)7$MSj$T@2@?{S*n;64eZSg*u
zYSkN$jg==Ui}Z`9jy>C~ZaUb^vuktOZ1l;8s<ZKX+Jr?gx=dKzcpDB1SB}~KhG$Ia
zFMn#5xb~|LyU_JLjd`)IjKyVdQ*J43%hS^Ci?W;LkK0bM?K3-CZ<Vnn_NA-b?om0O
z%jOteW~{De%?gbz)^(|}bsqKence5-O7A#FGt2FNeIt8Rua3<@ncvi^bb`gt>x;?x
zE!pG}?;GR=GH0V1y<S(CHPjCL!04{V>ONy_bhrB?&CO)DCtxdO81=rXSJQs%&rSvy
zRf!edoc9swE85gL`?X|4bKO|dXR>)#$4!PoD~Dx*UmsLyV)j(R=)!jeC{Zv*8+{$p
zvQ9H^=_-mJNFU4gu&)|1sMb3aaMgKd#0P<)C_iR#s=isr@1N$)diyuO6A<$jj=Y?1
zoK)GXEyD@ljiLP)erJOc#U^^T6SU4o_ceDfzmv`wD7f!i%%u12^OF>%T&t{wO4zCc
zp0*{txwq$sr{Kd1H{PEtS8w`6gy+UKbm`XD2_1yrX&_w|BnptiT)|4r&U;ypo|1$w
zS-eq}TXl17uIqdGLsNOmSHE=}|3<gDKht6Eg;sRk>GvG57kOTmJX*y+A!X!$KdRzI
zL@p*?R;(`nj}OPha%|tP6|$ZBF>T2ov~?n}CiX=8))BLn3Wh)Dz6I*=_>M`P%cJLY
znJ?<!oX1upy;*9{)c0+*5Bc+7!|w!8yzskMlqe>~+Q#X;3+7X2VvS=GXLwR*`a6{H
zs(Dgr>EpM3rk-qxt4we|cjDm0rMSK#3!^)Gs3a<w4qQ;ke8*uI^o403MwcCl0;IT<
zet7O^@#-EwYbtYpH4ka7U3de!tqB8}+?ERV;-|Ozil*f7nr4+KM!d55v@Q9)-$0vh
z9HnvNftPzHl`bsr#puF!X(&<Le)lC&GT6&|a7vD=;=71TXo&J#N4ugoNqL=eo|j_|
zRa^V(7Ptr>D|r8N<^kiZVcM>Ze9mi=4S#U1n04dGcf{y&B2j=88AnnWZeC|x>pQpk
zxo-WgLtL5+lP}lpZk=+&C($bQhLdNqNOB|utF72pbL(=vXO&C(uC}>8!MV*(Bkxch
z6>`Psa$$8T3T5@Jc3I*_&p%w>vGJ~bKHqGf@Z*p?*0pO->l`Z%cys7B`S%Uq^Vi%t
z-9`RX%EESk7NeI-WR8x^<K;3n-GpaA!u?_$R#!b#S1ipjCF2PfTjvy+tvWx44fUEU
z2OkzXMEl<8=*Y8=G~KPw`ZXu>o$h_N&m#O|+-bZk)$j3A@w@8W7FfrRiI*Fz`@*W-
z(%#WZK`d=LZkXm)b<)$h(vv>npWdg1NhEO5X|H};p+%8m%jihGQeNNXcH<V7i`y@(
zTQ{6-%P7F#*cOV><-zJ^m}M)OEx&W(kgmehJ&`6p&pbrtWGZYZ!Z*f;zER%cE%t`o
z^vDMGeK)rS9uea+rRf`$i`Au%e))ELl+z0XlR=CwFIM-=c!j%A(5oX4Cnsbcd}Zgn
zd`M?j+TQC~g5A5j(pNqmJNebKp+Cev;jZgt{rhoedqsA8ep8vdJd=J-6leS6KkgTN
zSl#j69ec)~d6tTG^n}Re(o3DRGKgc@Ch>Tx!r^UU$OUdMJd0z>yQeLqxfyZGlREUC
zt}HyE*z%(1Vfyg&^He$Pe#Vd0z0mbNf@$t%g0n9_n_2#wzAtqfm_ApW3pQc*e^hz$
z<#yfZn|pd_O_zIi2ER%+f8eJeba|qJDs1rfKve$MzFl82{UCtV{kXq0L#nWiwwA}_
zsZwU;u&zeXtMRz4%ijw<f2dd!#!VyJY0krw_R6$b)$#k$LYHc_AF9qLx*Z1g1aY4m
zk;0xQ*JE{u&*?DBvYOfNZy(7$HyL`pO;*La`l(1r4EG_Lyt%NVTmA>N9;#i@v&B`_
zy{^7?I{aolYoTHPEw70S?|w?y%VFXb#Oih#&n1)BrH9`8Y9zD8PyOeP)&Y~3Vb_JK
zXg+_Kuw+fK<vY12{xbgT$*Pd*bA`R?dqY?HEvH|Trh9UHjn(s~@H;2CpTTDUA*}8I
zJ9$`mn)ux|vaM~098X-n<ypbqI9hZ?qArKi;X$wHXek%#x_gvgxy+MOzxG(_o=E=I
zuD9il<BRkZ>2oX{YMA|Z16FtF*tF+x7XGYm+Qiw{iDTolcB)z`)<w=OsZC}ZldBB`
zoKmVbuChwvb>qKcndEMfyrO}<Z*w7eQ{of%y%OKycZO*H6~^is`5)WJ^zyOs#Zhk>
z<7S3^EUmjf<pm0UHZCli=!zN>pnG&r|LTfKI!^vZ8e{R>tMDZ?H=`msstqT*$<^5R
zDPwduVs)#Z#<bOT6+P0OHqW82jjFtK`M|+%$y*#4!+RLZ8mk(8L&&|(-%ThqJg?NK
zc4FdviN=o&y2tkSOkZlVSa-9^1fwg0)ir<B(I*s|k)nUGck;@4*2J1M^5j3yr%B3+
zg)(TrGsfTA>ahEf*)p@Z)hzctla8M#EbRNix|~_y-i2JM<&1hw7~M@+-S2PGv)7dJ
z`yB4Wx4$|V8K$_es&qWxa57g&<3nyY$EfqsJ!&f^3nT(1uc??eb(e2G1#aEdlFrTf
zn>_;Qv`ZJp4M!6JG~w^3P@?#3(rGD2$Nv5L$Lt)siEhi3r|xTM*`)8u$I%^&b6@`E
z=k8N0W~=M&h;)v6b|30#<-fpg_{RAA)Pb#f=@0#PGcCkRgNp!yVn`GqMebnqF6!Zl
zx9^h-A6~Al>^<7ZN!Ra9A<O#Z{@l|;HG%fl{bMS2n_DZ+X*D0SDb&sNoaa?85U45{
z92>Iwysv6OmtsLz9IGp~L0!#8Mc8PkocJET=DAo4_nQWuITAgoC6}W@D66AHRi-mX
zuJ+yEb(r^<XY*ICECGRf&!0^eljZMO4}RKD{A~e^GSHO3>K>8xu=MKj-KqX4WhLiX
zIcLfv?7Gu0m`v*Hy#3#vS8S<#VVtOY*y)@L`-hY<-yUJ(iLv4270;Sii11!#aFT@I
zeS`mKcz~uPR`(mvt55QJ(iuWR>kArhQ;9m93*Mjb!>^5H;tkjSu@K3;-Qw3W(>o-1
z5<_llRB6+7P_6ONbqI2NkyEpGnxCDpKTzPHF8X~Nl&7$z>h8&o^li`FctHAy$cJ-7
zhcB**Bkvh`_X1be5=--bRnl|Q5#L6x^F3<YI22#>1iOwbW85wzx-#F_zjgR$12JBx
zB@O=&6NTwOwJRlO=Pp6PPRXRmPGjd6u|=&t;VgNNsOVb!?TzL&JcqLAORKl>J6!FV
z@9DeRq`bxB9ru}_hNt-fqk{0ed$NUZTNi#CiDYpU72S1ndp~Qi>)w4o!6kURX1x_{
zu<JV2D;-D9)CpI%?X7FNrOYLNM|j0sC)4heE!lK#%%8ZL7*g$p={qGYT&@!1h0iRT
z|D_80VVve(D)lnG!U2(%Yf`eRUs@A63aUD)^mx|G-%@iEQKzgD<VmM++nr~%)-gLE
zuBC81$Aaz3aOIs70z+bX{EY<NWl(nuR(GeeZ3BIv_YP`t$Ev-ecRYMYSSvGDOFv+3
z=lBrYxT#>CDRt<4U~cvshBGSGfgieV;lPpMMd8fyZ)?IDEH9$pzCc}BtZrBD5extA
z>sUg@r-}w`zUUsdu1MJVvDuw^Xobw{)|zTuQ0H_F-+kfz@y)hhuPOB!^fxgE4cAI!
z3fR^=2OgVRh&N*4_txOIzyC@Ug&b@0amfQk?yY5l7sDMC66<-(N_+Mj-*G>1)Am}<
zhI6)cLOVH`<3CBPFx7UrnYD#~1+FHrTTafDca`^GlsBOt7Ie4%OBM8QY^}gZ&U}Sc
zd(}zi3RR}6<Gp&dF&hjb&kM(r-Fi8>_G<2z9<D2A^%*sWHtv2t{;4j~Bc#$$U|gw#
zOuO<#MhQk&9;-{!q3l#9z!bP6GwN>tfn6D=o0M-=9dA+TKltJNlf8P08&WP+(0;jb
zBi8--z5_wjDc5(m2;F3m(<~ZiuIbF|dc2@Zvk<QWR`=HTFL&%4jy%zilseuXp+3W|
zd0!{}-ho$Hv3=iZ21LkQ-BJ!dRDSPHHMZ?tBo7sr`idGlmbbg7KIX;Fa59`Zyr4_5
zpbLLLiW0?ea5=*bh0ZniJ{%o2wpHpl%{4QrGR$(mS7+tP0vE49Cx<lxlWcM8`xF>x
z&jhu9P88X6_TeQR>qGj*(nFDSstdZy7Ie|?QK2?Pn#L*VuWNZ*wtTsCAS&gI-%)`^
zr(Cx7#H^i)_T6KT4DS!DILM~-@{sO^z3WH$28xbaGHrJ1<J3xTQi-(Svmu-(aWwE<
z6#6~ug0B8lNx8v~FVkzk#uThN`?mjaNW>X6`?;VPKB_f=TKAu;-n!!?s>y$=SFB}I
z;^`B`ac>V*wlg0VjB*m!G~&Mme^Ub2G1OIpg2Y5&*g<Wrp#93=`H3qJzh8Xt-8s2c
zU2Ry?vxPy+i6_|TB#qx}%LaL>5$9bdE}8-{Q5UT52)?<H%rz8UH&sx>@@PR9M+46#
z%19I-#h%{Wi*(d3vnw@E&D6#WR;=CYbuT(6UaBOtW`2Kk_C8##rbqtmFZ(j{lcJuG
zw;ZqIvv{;Wc^CPUGLEq@`=>m_c%iNeR`>Mw^3)?KUxl)hlV9~79{HjaW6?s>(`uQv
zF}uOIN?^+*O_b;etHS-q{@OUca~$T`N3+5*J`H|ey>9QM){K4-F<!X2t73Jjvt?{?
zL(<%8BPBJy)g4LaM~w~*Dm^UrqJDg4WH0-qsrT9N+2aFIjIv4oVe%;|;V}_A9UhEb
z!58zlS>&@2-ot=sfiC=g1WFV>uR250bIhu5g;mvT?fxpa!Z@jnHlZ@)qJbIT^1&9D
z5+7^PImtHj9VJ1JRHY7+1;|rxl?yMUc=<CSQNvg2<wCrKo4q;`1xQisvA&zhfp$`}
z+%Pa@ZE3x!RL90WSJ`ic$<X`w|Eyl+TN^8uy8G>y=gmgbUo_Xo@YKHJx+X!+ktqJj
zS*E^dZb3I<;d>+WI}RvMQOs^iTlOi2QHct_LhaV6;APKb>mFXe)z5!Pqvyo-ADm|o
zJDqf;&-Sc%H)zzG@dU5Rxwo6n@20TKo#f>ddn=<BbP3OIJFxKzx^;z71h&xQ?lssS
zqx^cizf5toVVuFPVsm7njOOe70IhNL*0xg;`DsR{<1bAd9}+qkQ>djex52K?b|5f<
z_}fAnxc_Qmb+12}yB^V($T`Qr<no!P%X0N=Gjqxkx`Bi{-I;Tx(<hmpm_6~#Iy?}U
z?p1%VzI{za(Pv?WM{n70o)vf(J9LYEAzs{qt`=6;WZR2%ub%N=RH*J~xnFwvjdsq*
zZQc&-2Roa0XL!dPJz!&|Z&bAB-nD|T*@nxHrTrz#<+p`y@J_E1%IdQ!-u9lT3)h=A
zR`>BBU(M=oH}bfy%vMhCxhS6!tdn%GcDD}KJ!h?X-Rmmk`wXbMbf53){4pZm_S{zC
z?CL^24tbd!)OTfjh4$MM&eeo-pAJ^HpZ$2BXuYmlG4ok_+Me;U1Rg%R)2+ELhxO+l
zjg@UKT-(LR=;lgSVD5He#Qf9Uca-k)p35E&UcF37d;UC6mN_wAxZZYRby?nsHuanJ
zwuQ`|oV?2#O>?x5_Hya4j}=#)w9$9!OWSwTsy{aFFVDE%#ico57@$mLw7!-#n_oK}
z&oJbtU2ICwUAQ0XVs*z)B@F92o9Sd(-3adE;69r1LpnB+ntUfkz2kn9N1bn&o_ASn
zxqjnwYhM<(u<V}QH<+JmtlqY{voA}E>M8!p?FC)JeNzvstMhK_N`a{aAI_=B`FP>Y
zE1DT^-d&d7n-U(l&-1ulx5}LQ1)V1XkFBqlT-VqCB=d$+lC41Op@+M4f#0#nxMTYX
z@h<G^`dHl@HnZS;%DGHZ_8pC{xojyEFG+n_rf`rg`L%d~c-{9&vfEevQyF(&OxKT%
zdS-Is>S`R>v<BJGQ*HIUvs}SL&KO+-tgZ=}w4=ng53%dln%>;8{j*z4|0yfe4pwWA
z%^e5hzF(-scRdWM%9S4Zq(8Wiva9aKSV3>m*06l<ZFQvu^cT4m7IX>cbwjM~oMg$K
zZxzdAPsu3M^n3<C{-&<(FEd)7K`uMD-LRVL?#3JRT@n@7ySHdPJEDGEe;P;qqF<jm
zj-SzrDQ$j7HsQQOxW5@;b?u9q9W=DGJkk%O8hRc}!l{g9y9n;MDXD_LTevAH%T>@#
zaoR{AdaT4zg$7q_lvW*kykfMN@^$?QNnxKMqvVBn3A)Bu-S(3T)dMs|_vmjMZsktn
zqMtm&_<*WU^P~Qa*Uzan2BK3ai|D?^sR@wx9@@S`{Sw<Xy?~Wz;Ze=SD#@Ea<<7Md
zb>aTI3#-fF+^m9Id53vemgekQdg+b)4RxD!9M*HG=&T>`3uS(&J-mW9n0d|I(fJf^
zp4b8U-C5t~XCeofhvGWT9Y-w*`vc+pV1m`<Jl7p6?tOq;FDKZ=-zt*JNUucdXz#~i
zGiPrD`b#Zsdp4@sZ}U25TyQmN$C|+d(^T`1D1#;N8>!9)*XK(tC%i`_=$c}63(8*V
zTI*i#bay)Lk~H;RKWMbfDDOt&5BDnTJPL0*^TXv9Y9?E2YdDjnXWx8t@4a39rjWe(
ziSD|emKOUQHQ{eU(S3e5R#)&MRn<+ERuwa<s%KoYZ1mNyE(^yq`0wAlflT$Sfp6zV
z>Z-n+SMNQ0c&q&cXcVU0zDjJ7485nyk$d4F?ZBOFMBNCWX@=F!HvEv;s3z%OOy+MH
z)<SVm$Y7bl%e!PsT<z;@s$Q7xKBRVK{rD%p<j%GYufDy1B*&HK-K8RVW!~3cXvS5r
zke;Xu#|`|?=lm;C<S_cEeYDRKKJ-n|(Td{-{q8v16F(<@6xccLZ+ax1S0dJT>YQDL
zo|tsK$!Yr|XM}5(onifvDqmo$Uijh>mj_}0rC4}!+4C<|aDVHGo8K3#eAb=9KDT;o
zQ|AiqqbfNY&Fv2uZ07bj*{ypxOVCSE+-c*tM;4PJhUy+Ca+ayx_Oq!wvCibt!1VeD
zWDD^U?r#=Y-8bhvuNYj-oF~^zy{8$WG14XWTs{4T3eGHocX&OWjN=F9Q!5_)P(ROj
zKDEKI!~MBV^@Z2+df}eQUv*|~=573r(Y3_t=3K9Q!@qjyt<v#;W0`e490G|B^Q=W$
zxUjM9DU}DAzx7l<ZB)yoNG#;b+RT5L>Dp?a9SKqcc|PGbVp|J-hB0Dv_hNNFI=uaH
zOx6C&H;QG04gpbJ&s=BN9yuqo{!D3g;cZ+qd^S3E{M`LVJ$VnteB`4aGULfM6&}-z
zm0Z1^rek|rqYXya3adM~2Y>(0GY8Mww*@auc-9AL*}u$pc|tbfvVME*kx`!#@r>Ou
zf(63^Yid4Cy-~`=f9Bqg`=pu5UsiNL<AcL4!f(e3{cDZY_0C-Xpg!dT`v-c1xTwN2
zWYm){msKf=-P|8?`t$tw0V4|i@8n7u$JM=Ft?kMCSV7(wx6yY^nP`CJzH{#<6yFl|
zb%O3btnL{5q1QWEZyvBT4?lb`F=FE_pZ2YRM)TUELPug=8q}x8S`7L}t@5lL=TL9j
zvt?^2clp+uil;N*4<_EK5s~4<zF)V&>K4D?_AE$cVk&kKH(1*rCMs{TDa8C|V94=R
zt9lQw9(Kz5TvtyktGec^_&)X#b*Ac_Ju7ZpOIhA!RuvVMTmG;e)4#S@-ONiuw`77o
zue<(ga<y^v`niJ3$8MPxo3&Z1He9&+Ow%GJ`G)Ph2y0@jx>ee?#=FzBvCM@#o7`uL
zW-eRxH8fzqzp%sVzVnsK-mRHLeZ@HR$DXtAY*)wIDao`Lwr!bL*YDvSj(?6X@-j8K
zHk)R*NpIk2nBuMzd@G&1J2V6D;#er-t}e&KYme2v<x9t+!+!tRnP)C~JuMn~@m$Z9
z#YT_QB{?%_2B_Se+|uA(G*@-*XPC+N0I_+=@qJD;D?hskP#iz)dN8x9`6EWx0jry4
zCNZJs(6mlCV&$W$ke4U-rs@s7@JYp+^WWbR?y=vtiDAU^>QkE|+i$%d@KWh{tCz&}
zLE(D%a2Pd{eNa-#XN;~RR`=T_hm?vjKK(vDTDtdbLeB3WAE0Zw+PLPFh4+@%cYe%j
zSS00$X76P=arga0ySoQY8E){SuzTr>uV>YIAv|@l2czqR)%DAm)T1Amek@5=9W%d^
zx8<YhVQK}r)XNf`?#sMpgl<v~&deEDCC3EoF`HEBoy)mlYj)@U{`W2JqHAZP_#Pd_
z=sII{BQ(=GF4nnDIEGOT)bzb=a2ELzVREx-Lbqs`kxr~OVqN~Jp@%_uKeo!XUC**D
zZp7?A;GJ%<_R&VOvAh=5aqRa_E?C{qYnF!vF-g=)-@W2x?RFviQ|>1F`hzsz&c8e5
zeBX#Y&O1@JxGsjX<ManS)1lrkYyn}1rLJ8gTbYpIETVh;$`B@ASFG+9F9$&<iNU$Z
zCrkz>KeunVw!<dd<5H$u_|TV{u2UONG0fgMM4`ZMO_TrTr{UWB^%7drp`t$=v_@&n
z*=1JUA-ta?tYbH<u8X@<xEHx))(X!3_ain1y~vck$9`9sV}G!v485f0$5auz*TWCD
zX^`=H2Pn>6WgT~}pDn@H#D1tLS6y{_Lq7KV3wNw;seY|6XVgvuo%oM!_YV#PI&A;(
zs4qHBuF!r?<4k3cBHiwn)AXr1GN$;BCVbxwN)wGc6lX$KD7WV4=U+P3?SSbA53FuX
zvQnSEAJ1uxtFq6A@DCHN<R^c9IX9PZtYFZF>+p%K_pZMB`9aCe;+&hai?YY<k^Auv
zD~e>s9i%9wX4!7{_F;5AvAS}!ma~d2okL*?)DFj8#BABG?ti<#H|bh9d4#ccBFo?l
zzfftt?BVVzW%iV3EFtvuDatjHxr)@WbS8pyz1>0>T`#OIzg(#XHTS{vOPkFp<Ck4N
zYPspOF-LZAh3(6T)BaEFB0>%oy4Chij3`XCo?Ugwp*$sGz_WI93EL)v7`!b0H3df3
z8>@Rnr{C4a%0yQ3Vf@uPuI(>B*1cdpmr%Sb_I;@zBmXI}_9*3sxT4z62l_6&9=k8Q
z-k48HwzJR*_jR}HhVe-!_-|U!_Y6K*-4;A8^ZAA>^C#R_ls@+llut%7sZyjWu3`yG
z?c+LV8ff;gM}~))_U`iz_cc>We!OPOTMvvJ_%zsyduP1UHInfDj4;pkV|8mw{megy
zkKc*hq;cM9oNI)9?FZo*fjzrFD7<;?r|u!uxS8A{s43L^hF}mUgCEs#{yU#FR%@q?
zZ+au=p2s^ff{E7`tLtWcb(Rb#W2-MY{~=jz(|xh<f(E~#;q^7GZ=J4(znrHX6@0pU
zIbRgBzQ)O<Hjn0ew1df1#p_#rIrH9Djpbs0*M`UH3R5u7@E_1jJHC@DzR_>P3D4{0
zA<XBfHYV@n+#WBGGPIV~xo1ADoKl+cXn{uF<*i|pEiq>}*9r@ppH@<`;N--_i~hYc
zl&5IwY<_h4nCbPM7uG&F_eg-DCPLzd<_jw&m+KWpPIG1L_gc2r|9EUUJhR1{T~bx%
z4Nm7%t-p=o!06lfgmV_r@ZYYXar4K<OZlR;5*PV(xX<so{@&9xrD7@D*W~^v)xUaT
znLowLlRvV5w$tvhv&<Lvp=@syk~%w1S#l?tGlKTgy~5fDw88Tj-2kkvhxvm6e#Pn}
zfp4RA>had6nv+gR1Y26DhpT=bXP_%w_inaVLDb)qhfC$O7x%+jwN(!-TLm4YIHr>Z
zj!ZOhoy6#(f8V{(50i)2=txs=&L2@>o@hTicWblhkHcCA)=k}Re%9)Gf3^2(4wD?K
z?m}m6g}M9Y^O05xQkz?Od|!{JbjK=%e3A*r=mufqO+V!|6WQS1eKw%?jPj$gOUXH@
zvqx`sDy7hbcxO;I;iA%SC?(CD-*r{CJiTQSFCgDluYSOIZ|0eqS7h!oW$!S$!C2ig
zt?xC(P4Al4)o(c|Fiu{vQ_53vi}A(nH+0qai3b?yC&sSi^twtviK8!XS##3#0kxKg
zjgMkF<qV}b$GjW$U5suBR=4_kAnn;HYYU~s2;p*GcP_(aN8dcYcB$o?2QSsLw0UEC
z;hVlq9h3*S&$<6Jl<FUAYBP5JUdnia!GgL#u=-;&M)v?#_wKggQxD&9RE*l#YW%cm
zx^kl@`}oNjYS~TNk#00zUu9JbpZc%4zH*pF=EyE5X5O5Z2X}W+_tHLmpS<j&%w%pl
zMmH3zyREw4(xWI!qC-z$?=;nUzRp8CE?%qmy-@#jb%;e^p_|ylFW)-cqz}7)GPtgN
z(>GquI?Sf{CEM6qHqGUXUv$+lx?xydRl1Q0&Bu>Uq>!HoY1>-ge4S}fUbwgU!Qnf>
zn|9L{ME@`<3)=RD#dznk%BE54nDg6LTlq7q_KIq&s0V00zLA2_J&4tfc|m*QVwr?L
z+X~*1zMA~>1Vu}ZWly(h>mC{ywA@y(`s(Vh2aSwc!@4C!_O!4M(&cDYbWiN1=;t^!
zD`9g(k?<azu%Crvbwj@^sO)Giqq$Wzz1nE&myJ1oH*U?|xEHZCWz|-^0H4ymE%BDm
z422HG7^`|TojjW;bSCJ&X=p}Vx=C!$w^s2tn0O<wy82_6M_+F%+s77Vl-lp|^7Rge
z%rB9-;rB!hGkf3kHJ{!VCeAmZ@h*~VM>&&`)${I)k1tz3-Lk1%N54_h7GL-SqZ^6U
zEw0zmZX0wG;VR8qYeK1N&6jg2Yu`RaMcxOGIqDx<ayMxvTYr;nzx0jlUUZ0&{q{6P
z1<RWp3~foFblm0@63;QZhp@V}=J7M~C%=Z}IBfTsyY=0&=8>maU7ivZk9qH!5$0&?
zY+5DbGb>n3-ri`JC{XUqOBvkzFm_YM9wW1Hu}|xqWih&kvAPGE);%uK$m+5#6S<Z4
zQ{+Z@x!VmId*&x%lNT@3bUQHPo^xxld-SDv8##+sugO&mVis!~lUe@!dGNbymFKnY
zV|1gix|HY0*$ip&d3Nicmb90Db9}C9{%Gm<Z^j(w8vLS{c{D`Je`h!;!>wmr&g;Yd
zMg7C_^Io(jy(>Q_Y))IrPr0TZqk9Ca%QPN8rW#1UHYV(jBct>=GBH<$CN^H#3-^5E
zYRe>QuQi8JuDhhl)B5b$$}K?#Upjef?{eueuV!7l=K;<+Z1p;fZZuZ+xY_){Xd01C
zxVxd@R(8qrA(Lahaf<7+i??P^ey})mmg4yO{leipSB(Z-3+pP2j(cSvC}}^+T3$FI
z!#9(ngFRQrV0F!?t*AbdzZ{v$m?>A`KG6U1F^^lC@CDuPPs~0EWKRU}?vCF|8=d@2
zA<%}SwTMH1Hizn5p26X<(Ba0j&NCy}b80MBw^%Q_k1JjiXEmGX_acMkipK{L{-o2@
zW6xGx<_!;)U_P9%={aAokXmr55GzNt@04ht%ZSCvjZfH{KR+$DuItD2LmXE3;n4$z
z+fAli<llsEiYnPDKcieSN`6zk`;4W!Ng(xiy43v}^_V?zVf?B0e;zx<Xc6^D!@g)L
zLw`Vcw?@&o(zO`fc&x5U=B*gb1U}I#%xwXsn)tA5^c#FqPFQFUWKeKA(3`P`7Ibvq
zmTES#9-Vw2reG0n(Br84a`(vQ2eZ$=uDxNt8>4#^t2>kx6m?$r@if_;|Bt=5fa;>_
z7q;n;5D@7u326{P8l+1=8bliDRHUQ?38lMBX_c0c?o>)TlukiX<lFPyH)qZFuIIe#
ztaG08z3=%Jd)?Q)hy9<qX3uY8PdQt80+p}xWpJtb`(}}(6p3Ojq}&(mkNTd;53h(g
zJ#D{MI}?Q@VI?Z>cS>q9dPhBjxqgY_7xZtdFWdQWxOZVUcW3%`V5bXDS`oEMq25R7
zMOMalHIiz+uR|AUG<KrURU78NNpbe;Rcv=WO1D=lO3zVrqL^~HK__&*GL0AJjevU}
zCkwFkM_;cn>0w71k-nbIv%jril<yiz|Aj~7LubIlal?(NA7A9QC!Gb1k=rcsY@O;F
z`l6_mDIBh)O4h_y!Mv~G-khGym+Hd&Q6ppOgQba8Ckl1eHP1*)*Nl<PpBRjFGL}4x
z@&EXF@HC(q`HjZiy4ss}R2F9154y(~kHd3bm?grzZ{Xh2L(R|IeVIfzLIi_^$rd;(
z={rYqPs<!z?5a9Dg;k?5t*PV7Z{1Ux*4HKzUX-ztj@RWbUTsoe&nx(jBF*;K{mH+M
z>ydEpy_Bz(51A6>i#Q&g{8BaXXS0;+wk}5MwW=Zid@)0CylQ)J{+SU!(5;7yrk8;9
zsEFu3oy@ry0yTe-tB}#K2&}$QaIc>*yJ_|z>Dh;nMkKxH@97uvI4@bze)`AkYAnx_
zA??2SGEmU(^P|j!EecItUH3}_epiH`mnD+_LuXHe5iL`gHyZB!g>3e{7@2t9VQ}fE
zU@en;NY}FB%?Dwo`tJ#+o*eSMrM{g&{B|}gl0SCt$BOF)p~F1hFN{b1yD<|x{`_Vq
zsxWU1+}nn6Pj0R4Wo>O=#9GZ#XfL}8cPk@JybfRdy|(v`iUJktcU3vuGTuB6no!XA
zB3Nz}9io%f`yn^_iNMj1Y7%&R91Hg{Cbcq`Ar9jOv<{&14>i%nD;%f1YTdZUDRwKm
z<(^zv?9Bacrf$tDa=OzWeh&iP3mXt^*$+xrJW?xkdOgvO1*>ly-0Q#2Sc%AeHWuz{
zg>0!PG$DKQr#`Xl7T5lahZ1|2^0z~imC`!`;wIETo}X$SI_YIHKmK)-;75WQ&&Lc+
zDR21sSv=f}Hm@V`%3-vdPGp4cPl!qAafAFjii4=ed-wRtsxH3JRlhGNa*#Q{IhuxA
zp4RzJ0%NfKAoTZS@Cq8at`Juge0xZMd$r|Ese@%isl{`WU3mg^R&PG3M#u>kEu)YA
zx{KuT-M1!S?zrK@-pK1`-t5G+-HL(SO~nUDAziH<cf$7e_kv+@NQ8Td)y3>t0`f&x
zoN}aseuwKVJV`=mZsKw!3Za-RRGhw97KLR*DE1qjzm%5LYxYwG&eP>R+LGT+kJ;Uw
z<N3zn_xqCIURx$AX`CW0rXKUT;;E9_7uFrbXP!8$0p-D}o2<Rax^>}s<?G3|L!WeR
z$9PGVqF0&r+|scT@Yomr5`>o%`wCXyWVpA!Om*cr*87|HcO+3pgV>tjo0YT7K4&&U
z4V`zs-s#0_uy-NHpM2V>tP+H58Sxo|F{FA=SL23<-y?MD&$l`LdfxKaew+gLMi6>5
zPv;di<qB?RJ!khOv9N3#C_=GCO>i_G_Gc%#o8QP?f^?)C6R^F?@~qCErX1_8jrPo_
zUbUytLWX}nF|59+aIdNk0}>Mnjs^FOkwgkx9cAZqedDrv#aPI|N5R8t;n2rgbiOY%
zrW$XlogNj+Elh{)@1ZtL+Wo-65>mO#qx;wUQGeAp4em9yd#933xVZ7=g>1gBXg_x9
zso-M9xXEVSccjz)W~~IhjaM2W9Y|faG|O@|^#*3VD3l(NKfb-y&Ca87)sOLm)i)jP
zt>*Re3>@EIV`ww&*%h@P(y$2sMc?Y-i1kgKlfnx9;$>Bf%#qsby^8qWh9*%R1j{@6
z1~Q~fo2HRYhph{|@a-%E?lrq3YI{=K&)0quDp`ywl3GIe;zgo}2wtU#viW0&#lc3U
zZxnu7F<)>S7br{V1L!4%f4+Bg8zhhCOr!08n*hHrmkIa2|8=+4XvRc;ODEN_6~A@p
zEIUZU<VM9$#0o)qTPX}`iw9u?{-5yfq2Y-yzPZ&DVyjw-&u=c|U#Z6aR^u7TU+-1?
z72hnl_a^c)ZsKjmg}JRJeUz5_Mg-BgWmS;~Y-qYsXh)ocDiY`qzOi_!6QTqJeRDbD
zO>8CciWRVIG{yD2sCAk|afih>8}7Aa2-qAyAI)warcj*EDq?ojPWV7suGW+&YmlY&
z-pIKXJY3J6V6XANV}(hxRXU^?VcK?(H2&$?!{N7F9s=AjZw}lmxY}^nhh2t}q(Hf&
z<L23~uVN{v#tl{S*7SNZswp2y>4!NCyq?lLE?|2`vO$ejVvxUo9E#!QzgPS&f1+z_
z80O7|d(8t*H1RisGMip$IYm@FbX2!?+2$rgIj}9+8Dy8eJx8y!<N4i*yf*wBWAm!G
zj3Ap<#b5_nR}zn=^yJsh2o;z&5AHqMm`zch;dZKfA(*sbQ<y{&E<I(E`qJByEohb4
zseeD<SX+6SY_?kXZL~MO2YbN1$I-2gQ97P{>L#l6wj*y~-h8;1B>3LioF=`FWc~b&
zh?t)gx`E5@9ys+pz2MH^Is^;f9Jcw+QE6=zPhwbp?tZ{I-yc+j$yoE32QQy)&hQGr
zx8JvLuX_3hT9D^<-Qlm9ZDuzNt>yg@!s!6UYda>Km<Z(F<(w-6+?36s82MwtHT8j~
z!?!-gF1*3G=S*_wkgY^DI1Q`sJGfUZX(>~msr_fH>lmdTvfmf;*q)TIdh{V-Z=bhp
z!%PF|pTfzBBqUeQpSJ3HC8lQ2{?_3o7KzsOh=@YFk0k`Ze^vnZrc1F*nss5}9M-5P
z3oP8e6?`JFh<0;6sP1J)K3%4R>H5V-U!K%3)bE029M@P!?wjY|UT<4=>|m28;CU0-
z&J3$>A>3Qs_}yCmYvgBzW46`Fq?T9f5qUhBQo^;qOFrMja&v~8vWl*sk+78LcrwrR
zS;aYMHkc174HcO(zr*iQc)#%k<}HGIxr!_zaS$I346@`@@@Z-i`o^Zq-AZAI6xw%U
zTHdstDt@<z^ex+)>pLBHXA(pDyU<a_KkQiRTi7F^%Lr?k@cW*{a4*9UuX+2%wb?tG
zCflYWyk6L?URd3__Ak6&Nugo~Xh*ihM&vIyF|jR$+^ZA(^>kCFJ@~D14np#<_19t2
zd(Y)z^(}#Wm$3wU#v;PW7QSx^4Ajj$kP#g=kgGLUT;wz<oy{m^^g(+o>0|CT!f->U
z%kS~yDI;R$<1{nMg8_BfH-R)eTrh7b+`B`>Hu)NdMr`h2frO{n79R`gqv$oOzM7&G
z1pe$?#KzAO^Et)_4-y5d6y1@gan=%ac|<ZcyEc8pK2GZfrqIK@WpMAO>+WwPXLAem
zZ52-g#oR`@7qak|?MAmIQU7RiAtE|-mAyYo&rbUsGq-$Z-u*gQysb^lhQaW)K<#=A
zrp;|UnD;&0yBeytZ4%o~Ov?8W*N&2Qu-55Ap}O2l9J5qnVauQ|W~1*+f@q)p!a>K*
z5~)&jRdK9O{8N7*Vi9jS_EFCw?GWbu0QX`uZm$L}6m;L-x}#v~wD;EQQ(>ac4?5lC
z%5dC|srZDi4b3QdZi>)dA2g}|*?N|D$Q#l_i8J5NZp-mFYeM)b%=;1UJ*haX@j?0i
zA#j^|WoBbq@eD6Et|d40d5;6GPP&nH*{98WtO-9Stwq-v@YpBo=d#L9#PR)t@fJI^
zm8z}rSYY0AxYtNKHfzwn$$UM+me^YQ8<K6Gqn5{h1|G7_PUl0m6#|N|n_Xf%SgC6B
zGD(_qipA^Wh3@(cH_sZax3BGdedh`DR=~ZDvdE$px;dJp?6oJ-AKv6&A4?1rS}r8g
zBSvGnnEJ799xYS!NWNjP#~QQfS+Yi<dV4|FRN{-RQCZdr%G=}c>*Gqe7iFdjJt3K^
zMMSOFwAj)kAi>}GR8p9qXGmS!E{seyb)th?#aX&`h5`A;bFC;nqFlF82S=O7%{U9f
zWGj&#j<EVx!M&LQ`_bJo0dM+BnUjr88?*1Xs@891{1zZcaky9|p#4h8+G6!(8_7H1
zKEv<E1-kGW)|aie+^N@NrMm>GJ3iaNywz~8psCc}YPHr^$wR8q4TTI}*SM??8%MML
zsu<k0H9Qi2ECCL#!CzeMHv=)g%6pQcrljCLx$8l0`27A0ewPj<_<3Iq+<WWO^I1X@
zBw>C&Zm!mcbzwe#(COF&O=}HN5c<<b1zQe;r&C%ImbLd?SGdIoQA8fx4s`M<nUQK_
zi!Ve)4xxtCw-)XVVS7WtZCvbjMs3qZ|HtXA$i05r=C9IgpRQ#kg*{Ac{j~Ck>DqUt
z%w^QLVZ;PE{{6a)905Hl)KDis{SCdB@PFU^3GO{--C3C8>PD9E36Xg#X0`V6h+O1L
ziTFB-kB!QzjBHg_mDU8Sn^UVr3t^jiMCLtwr%A&MuJ=!^T=l1-3GxeJ^{s<@X9LsK
zwr+46)dkLoCsl5;g(nxNY`v!a;Xo*5wk|uA*Km9*VWC3Y+8ZH*+_joAyfoHYAB9W|
ziIJ8TGbl(9{#>sf?j0&LEpUC<SjBU#{Z~1PuOUxGLus6(H1=w%)#hpZ&U@!@3@b!D
zVf@p<ky%kz^_;!H3Ul$2`(hL7tIo#va%f@oZGd}G$5wmSJS%VpNbQ5((8}sbop8)M
zztQ|Y=e*QYLe_bECT8w}k-4hw>EI|z{!{gcmeRPp`Dn3N^_$GaTCAt=`ZmJ7?Q7~b
zw4HPL#y6_8Uh354*&PRt^(VCEe2$JwmXun=GraEkcu(N_;UU@ka?vEW*B1C@ehHw`
zZ_7|@7S_}iVD<eB_sV}vLHLHVp*$KE(q{2Tg#Cv+j}H$y7I}XvbFl&s0b9xYnH9!h
z{d+#;KKQTJ5Rr42<%q<$(o5xKNy`$RZDzr|O>i%hd7ou5N4;QJh!a!7bnZaTrvya(
ztaCJSe+Ea3K>nd9Y{76XkDuEEvhPFCF{=u{;)Hh{OBKp#sH0S|E5D(Dd7I(hmrWY{
z3Xw{}40_{~#u3?H^TpD{rQZ)DGrSvfXU1w+<@qVT&45y0OKKf0i}#k6m{Z0#pX=v$
zM++W4$y-*er!a2|-1~?EV^=EcAqLUgcLAJRQ(ry{`365n^eLBD@u1v&);$zh>pbof
zW$<{Z^wgunXQW0+Zu`Q}rrQ6N2rrG@N!dKi+Y0yY3=SHKIL3Z#^%HI_ucI%Ta2Zq_
zzrMM0R?m|wTjTA@ea+IMV6PbOfIFEcT0CMh{Gs<~rTWKxyW&_A{eq5kn70k?eWI$?
z8+$L}<)J=0Rd1AaBTi^0x|msrqFi}2nwdop@+LXvO|2Pf^Agt5ue_)BC5&9?-m$_&
z9)9!9HSD%^7cg%-+#7PJu(nL^KxjWZ|Lol2DM2#^SCrDbYs~qE!)NyjhvlY`9Qy8M
z`!~<ei|ijg*W9o2e=}WVsp+MWVJeGCGpYgecEG*tIi{62V^QBU_EA~h*mra)#O~32
z6Z5^%%tc~Uc*eFxDT5=e=eao9?D(H=z7nC;O2L8aUb6Y|s}mnSCV!}f?-!kLuW~?g
zYX2@dvdo7VcPGsW;cL4~>D+10P72L~Mn5nk4v0Fbt|okl3;sm;{CI6dL)Lv^dOBap
zQQN*<Mcbw5)qPlfyWrju-P?`b{g_{Tv++|mNUpcidp#%i@8}BS?fy`sy7k92?p?xr
z(WS~{x-}(NIvJE6jOq`Z0aOSN_57#qQJLy~gL%8*UPITBCbq>7rB>FhGSV07UQ;?K
zL)c;8Rh#fF?6stc%RS2xCnPvNo1fg1r{JC!HJzqC9M{6R-@}hBh4b)GG7aYKfqQ+c
zDF}a7%R9-wrSwqq`zW2!&WO%llkeKEA2D;<oa48`_LQu5R9av9dDkH-1v`TOJNwAr
zJ+Diusw0<?Szq?TyuENQ(rq+`K@!KW$ys&z{@>=$a%5}P{ikvJ!tjl7-uBJ-8qi9K
zw%=b>jC<sF@j4Wb#M6$tBS-0ozS$skxH9AT8O+-U_vYM`jdb<JOE|<BUC}30)Gx@~
zO!dc<MH{*&O=fcFJjy(>uMz64s?Oq5c2QFn!=i=o*~i=Lb)RQ4Uuk$@$Xl4VAMRbK
z^gumuPkuY3l+>u5qAD`}$08*wB<yPqf=56%MTtvN9^Zu&_Rago&duId1C4nEOEb1!
zj#fz)2ln~&Hq`L*>H)ad_j%-DAkU%5i$LPf)T5F|23U!il9;OV*lRs}XlTpiT=(89
zvWkdM4#*l$pF5g}o{?H()6w9(E79r~K;-jUfYo;p?v2u?DDb#@m-YD`ldHQN3X9IC
zi>{nG<!h*B-9_GS&c~>9`QEcdXmtzg#m*SX7z<jC68^3{zy3i>!Q5L8je8yD9fEtE
z%B)+*R};0biS8*H;VGz<xmxUH+ta>oAW*g!G&QZe_o?i}cpLGa07*r1VEeT9;fLo|
z=(l9?mz^Z02aE7N!o0(9FIT6y%nxa)yAjHZQoDDt3#}Yw4JGbhpGLVT;25Kn7o3}J
z!QI<43JH+5^FB5IYVNIihCF`cr*!v#a#gZ-7k)kT1@0Y2L)vSop|lVl;IqWxIhCQE
z!+B4XQL^sf-}grAnS;tHa@bqXexE_*o`71<WZ&c6UpET<*D4uj2YVRORFUFg_5BL>
zYS697uPRrU1Q8Lwk4TbDT4%^3s6DLaotpSV{Adyv?YkY}_Z=jPUtTj=Mc5B2l$m+?
z3b1^S37(;Sy8jHpC<W#nfqP5KY>#6e`${6cyeIXD)cjV>-LaQuKUlP@(y*wpU;OCI
zY4O=%H7Qt(*$B%=d3JUvqEh=Fi^{KZi;iU(TWuVEpKBEE75312u=go`e|nB>@H_5x
z0UE_o2kJ<E3TKl$BXJxT3!!FY=;!wK>l-NiZfrW5wmm_$2#oZERtPt*dHBie!=Iau
z!M&`OJ)G{R<lnXHFL1_Ak5o#`I8Tv?Fc0~I+NyGX|87`gDbz&vt9N{;mudJ#!@C+o
zl(;9>*ZcS#l{I@<*;n}W@i^S8GHJk<HjXU(l&tKwE=9MsR*p<Rhc@0FV@yg1o#k(@
zt`GWsdX9>UOe2tyvW553$m>K<x0KNEW2s_7Ph?!$3s`(7;NDupNI}!XG~3Nyi}1G{
zQLk!DetmNxj+zgS4Ys0IdBq*r#ka_i`r*rF?I`L@x5XBMi@i-ycfVw+jY~O;?9+Of
z_Z!?B>18u@$J%7vqIl*BuF%G#L$?x2GxDarQ%n}N2Q?lZWk!8Wj>?afjkO*t{V2)j
z8vmX2HlG9M^_j`klz^-SHq1K-_wMYZ5s@2odY{bB>lHP%$_CiC5tpEI)tMt_CGlaT
zI#I4w6d6tg_Hvbxt9)AuB5|$A(p5^RjuGpj`2Ad#9RB{p6x^FFm@c4@cE(O$&dr|n
zTDVMVwkW}oOCBSZzH|-u(UR_?=sx0_BArqaW|iobu3+>Od%~B+K0k!=CtiJNs*zrU
z)pr{1%`BJ-G>D>ou35YJJLCpamrPAs%`we)o=?PLt(<12pT{(hxM+4BBA3>S?%+pm
z{~5ABm8($kye)DqmTyC+2L3#22JS74e9=Ja{c-9w)luk2pU$+F2aSJR$Fj*Bi-%%&
z{%~R&9Br{qA^rUPVy<zH?>FztWb$jY7DHTC8Ur)$<BeTeSbb;V-Wx2Kst5e6d}Gd&
z)-PVrc+*!@<k_3cExhRYwXG2I$&_&weP>#dAnwP#f;iqR$95&euh<+oLVlkuZwe5c
zD8Zj!%)!0=@4buZ#8vgCUNcHLSUq8W&~IFCT&0ThfI@frrQ>y{=Xa*{4P%kgU9(4O
zxsPA027UcOlvXu`Dt<e}$Sjrs{yyS7+<PA%Nwn)MbZ5^Y`P$=NR7zHB!f%^z{<sTj
z4zo1!iY4EAgnECD-y%r}$8n_tYd#7$q32x1Yhj;eu0s|xixGZ3zX12TZZ=M1#m|(y
z=dY5bTO!R9pb57L(>U|vJWFwk@)mS&&FP$*-{H|pm++O%Q0xuN3KcB!bJ`jc5kf&T
zLbxpsi|-=b`{wB=2iDh|w7Mr=iCr--mHqX}H&)WnIB&?;CR<aC@-$}PvE++~arqxu
zr&HQLl)U2?{gSjXhWoC$QZ8Bm%_7XZ1oy@h`!+oai<v{W2yCf(Xk+F1C^&8+l!yMw
z!|9khGWDtCG@75c`z)yl6YzMRP~)8?w|QMx^iM7@YvGF9C*P%pdB4NG?Nu$*36hUh
zG<K^|UXo{RI(zN9ZR<ZTrg!J-TfWb7C{5X;72+m#i{kr+gG6aZ${$lYN-UEj<m+bx
zg3?FTS}^YqxOe+wY%lwfltJoIkJ<<q6UQ|1xa$2a9%{XZm5(Qd^$bnIG}EbWr3XuN
zdL4y*+b3o#J}B=@WgUD}%ofIUGJ^*5F2lVmD}%ci*n~rk$V`&g$(kpVND24K3s7SR
zV$(nUP;7L#$=$=o|FR6N5Y>gC-VXa%vSVd22nBzwrio|Hg$)gUJ+uP%y3{BW=t{(`
zwJSNA^_E(^EF-#ZO)fAZ<gZMwqRJ>oKE0AopXZt@FJkiSEG>Wb5ArTv<HF{F6l=KS
zICq43F|59;aIXXTtagys=XmnPr>M#z8zRi4DC?5Z0zF?jm>)irZwd?0BvitAKG^N5
zcr-}&qtH8LY^6(rUiYL{Pu!yNsMibTU4wf~7Vnt3V(qjEQr1X?;PF55Uw%B=!c31x
z`<w4A?plbmV>dpk$4AY^3Y>-3+vT(b8`NdqGJ7L*EY_&k9*>aTgL&8C-tWSZOIz~z
zO0yA*l?*0G&bN%Zf02{jHddVI_uKSHFCaSUxTl-wgvQMDYRN;=OT;3KfM2bF1?i*1
zLadc-s2a?>0rxUcnBh}oX1sU!ZPEXO{I|MMn3nvPvq<YT5@f9X`WNDw7q^0c$kk%)
z=jl~Ut-od8tXc9Fjq)^gLYKGv%ESZzp3NrQ8%rrjq!8#PcLxE78^4lwnB}{nh@vCI
z<dQGZd{B%!6|L*qs2%p}Tm34<{F_Xwy$W=)wKZsXdidWZ)<>q$;qAp1-237|_Zgl_
zj$gGd>4VXoBl0Gp-}&Oy#nU&A&DimhR5+V|6*ZCj)Jo!u|6F?6&&%p}mp0$$!kcB&
z$)V9bh5#8Bhi$mG<Ws{RoZp24>xAWTqQB|s_U^k*FXC~iZzL{<{}wFE6gx-!qd%h;
zO>I)#M~^+n%OX7)lh;7d#JT8jrsu`?0Os9+d;QCEG{1U@Ju_wUou!d(AIGK~H=fBr
zl*+k9r4~K$_#2DEwd&NG#)Z=&CFF?C%2tF=d7O3?O`OA&G@m7S#J<A3yKwK?{`3hI
zUGTLxt8<fd=NV(j=sz{$D$UTdGi$m^-^uYm%<9cY>TD?#Bu;;q$U_?5%(;x`ytbvC
z6+g3{P#_%&^X|dDEvdTYU#;5XU*Xfq(8m76mPyPvL}j57C8XA4x}Bc*PN_vnEuds!
zK}3NG6^$x(U6}WQvvnfJDw_<CIofEMG|c-G?%m(fDp;N(7ScZW?xS1!dTOkgE`&<D
zZ<=ffgMU(q!s|tVA@$ez=$mT#jtVb*_s3fw&?9CPP93(P;j}ic_sqb&`*3f=GD#3x
z<8@6$Ho=`Bi9LtT$qv0;buZgzT;xdUf}6@*w<q3xE01P<Hi3JC{v_l@QHfJ=bC#s4
ziJ`6_@m)Oldo~AfZ{FuV6Z6dqOr8(;PCpYP==Eg?M=%I+b|RHKiu^c`wePPZu3c=*
zTNELY#20+##F@EXlk>r`vFHtB_qQz~9(a543+^Sw3DhN1(;i$s#uhdydSo6m$A2@)
zL}t-d)ol5b`5(OM#^FxXz5I#b#r3?nlOAL;g%OrW?i<dl)kzc|NFT%R?;OItVojz<
z?K|e2aWwoG<2tgKh@3kwZ){W%hDFO0j)uHzs9tWei0~0DqE`BJV!O=tlTXT^no6i0
zX=o;Q`$pYuYgl}b;NGlvGL1`Uk{Y{z*t(2KMinYwc$+joSFEjyY5TVShJ!Pn@~BI<
zE^BfqCzyd&=|-P#lt?%?`n*QIatKND$M=8rP4U-r-eb7e=XH3My@ftq4)ShRubPhX
zx06H@E9{AuO^%vRI28!@@UfpX?Z@}eE>?4Ar+AR!e_BLAq*9)9wi%0GUNZC*hSm23
z?#+=|=y3jhNF`yttugoL7LlI|IcMUH#Lq9RnT0VJlK2g!a~D59_hNWjCQ3iadyO&k
zZCfZ)a9lA`LB3J}X`>;`dkXhrFiB#kq}5QXs7sicn$YCO=<=}Vp<*CU7VjEK(AgNJ
z`fU}2-Vw8Y*04&aR5;(4;nD4`F*<^)P#i_v{IkCw<~@UZ%U!CQvowp_y~KV^5?>^#
zq-p<h)YaFjL7)AW&WAdYPh_Qbh}`m#keuzqK@Ne{$_#!yLReY+(^3n&7PXQk`0@8Q
z+}n~M%KkLFhq<`zL^?`oWWD#NqV@*OR$l<gFYoC(Q3sNMyBs!@5z|_quODWPK1mTu
zo}u4J+(0Hw7@VAN$cA4Jox{CSJ&|6=NhjO`7w$Gf<rR+63O?~jPq38K?@y)5F8j&t
z8sV0o8ynqYXh7JN5N7xi!tYZa_+H$mzDu8un}7rUeEtvIi?@4Hq@U1bAfL<Hn|g~s
z)nk1YIeGPtL{<|<NJNY^&5JFySEG_r-0zV3UJ>7EC-D+7v?{w`=f>M739<jM<pPWE
z1>Adn=Yp}TXWY<|{}x(SqtczJTNPjVt>`szStZT|xy*E&aX+;!RlM#z_i8dsvA;_(
zliDJeSE-t`^<Abt6Z-;w9tB?X`?rKb7AH8l)Wgzl8QiNN5Oe$>S^oSNa@x1T9rVq{
zAnkJcKh_as>90IZ3i(EV7schh<kDVVC_1^$x)hf;!%pBp0;?|~+>6BX`uS~y&@UI<
zUTXTrKVFH{;}zvL9=7RI_M(}{NzYyL!cVdz+~W_bh+@qiq0d%M_e{%B)>nyM-}L=G
zV{icTBEh|`8}1|9Ka{$pcz>KHQlUMX|5lPBsTR|FfoY&p>|91ASHFc}@&(I%a)|Vr
z&rcuqFW3ZHrWpq#Y~ih$-e~4@FfY`GUM7_6x+E)I`s|7|V((lWI>C#^hhd2678q|y
zY^&}BL<hKv*n2Ui8!yj0uS6T--|+a8&NVKpd}bZt)0shf!EM+K^FsGdE)$B)fq0DZ
zBUaUTLaWDjX-Eo~gV_6zV_MlSa<rsh(`QP%;s@~>1fzx?FQvaYI&tI2#lXrq({*ti
zK*FTjenbYpUyTa)5~9co^f*%g$W}CcgGC^>s~^P_JDTp3#HUk;(4XvK7uL)@re~f>
zPv^hZ&OG#)?Ag1Z3nT11Cu{KoQ4_mH@b^HVbK%Q`vU)dsUS(&Y=f;h&a^!Zgb1OSB
z?5t3hYER}iF15GnsZ*tr4NXz=%zTGQ)WP;6MNjwb?X(h=*46X*8FxphWMFYXhkHMb
zzOLR29{9nX`tbw$TeE#lE5UV~XV1t>o|TfR@N^kHiKF-v5~Nj^9{BC_C57Jjpfrv;
zLGwj-PvL>=Mz#Ve%!>i{mU)hMDGX!!d$!=z_w4HY(0qsRh_q3g=xEnbgPUEwYv<8!
zPq{rMo#Ok~Qw3#6@>Cr^AAD@eTh~#hln@9DE`@n9;odosotv8qH1bOn%KI2?R%<60
zp05eFM9hNZ=8vDdnj<5HVz~c&k9A#skdPS7Vl@max!1g;)DE##M)%+#VFZ3(`5N3C
z7im{M%kM(x>`}-ZQY>CAbe)pdhqU4bgBpe#+HfGQ*gl3HQdMB^>#^YL-)^2R@w5Cu
zCd){fs4!GRiIQBxg4GuqzDy|PH6fF)cqlxPXWSJQZeUglSE-@o@|z4*dG*$2EwVWh
zMM^(9=}BTL;C3jlaY)Zdt4aCw>f1v+XO&0pT*|BKFfVlP<T9ZgTfHUSiz%52@%Gk0
z4sd_*EuBu0z+n-=GegA8Hz*!l9(LU5EK8|jmZ6*PmAcl!cl%D9RZ4-8tG9~V(CnA9
zzr83xhy(X_u!c)eaU(8#t)aHpbI7<!j3I>N$3yQYwvrIWaQ3?E=Cu<2D1*#uWoATH
zF7ywSRWZTVIrFS@{1X>?4)d+>@2BFzy_g;Z3VO$k`L>f|vh)$iAL4L+f8p}WyIxMW
zeHSgnBF(?cuvj1l`}-H$E=sST57ZUH+uLy;iHNfDt{hbOp2GLz>u|5x*AN<0-gmUA
zl!yr5aM@^41aSUj$_1}@{y3L0Xh7}%xDx#VF{M7l=1;~G)!~nG!;ZMlUv&M}tgzB)
z^|_LR{*J>RkVEf6TqcyRo|kAv+TBZTo~|7x$2c$eb!Wxy>IZX0{unC9pv^XVA&RDD
zeRLl0z9UeMZXA<s)Y~EAX{zim9l|L;g>??UuYnKu1~?gs*<lG_h_in_#S#s8>gS%0
zJ^MxYtg?RNx-EkCy2#BXS<lekGrFpz8O-zJXkUG@5rhS!ceSTMj&}!V$zk<{=5d)&
zP^m`ix#B2x3a9X-^}4wgGrMo-MWr>icJi}jqn(W~zLP&rMJKu)f|zz(;F|p8Gf#5I
z5e=J+Qjrwlz}mCEKA86g-22%Y8GqX|Zso=&tpK_u4KeoN-ViL3^rVrkog2Dre(uVp
zZKAg|J17kvMzjx>8}$ZNJtSQbXSyJ^)OUCj<)8rb62iTD4}3Z_9=;gW3K<A-)7uPQ
za>c@3|CCTmDW<%plzo!p>6;rJHWP*WDqBo<RlhZ!_K~1=@w2b5YBO`F3T{4ypZDE_
zd!?0^-Eaq|HPt<<3o)NiNgaAiJl{%Z$a!l(_<Gh-nthBe^`wNR%(GCyr^DTfRlcgq
zR6dcu*^yak+iY<d1AaY31o!Uf6y)80UldQibN0}bHYJjT#!eM|cKg9#dIog~J&6w6
z&xPHN!DP9&g~|FM+Pr)z@`yWx^eh~OB1f(c7FGqYI6&`|UM3XT7*Y8UB?kl}iB|2$
zrji!&u7@W#y|4^~U;2|ycSXz0S__TZn%$$+p<5gbOdRYRDJ88nL;u2^THo9M>}byz
z=7rk)%Y>rO`T4^z`k|yi>o{E_0#b8+r)`1HyMWR!3%UmZ*ZRG?^DnFdWF(lXq}!eh
z=BklwR~8#>+Wy#X5#Il`iAx3dLdW>agwna3&Pv@Bj=&~gR6b-CY0>p{uPfR0E4urA
zf+jp~%bX3C!Q*I`y8&+0RMyWkc`TSYg>A|%oTe@BUA&p7#de0(7kc;pGNGVJ_T5Q%
zxSqT^po*11_gQY8h{GH;Y+33wfwhWL?l#kCy;JVkYGpu3w_txfc2)Wfio*h1<~O9O
zPTQ*S0ypMhUT7b=Oen%gr|gQ6En$lK7WG<v(byCuJa+DfdlrjdZziy~xCj2U<DNuf
zXGTkJa>-s$_|Pf%rEg}X^VAW49girp*$aNY1KmTqOek$^zDn~H$5O$H4+qnkTjze4
z=lT=|*jnesR2mDt%+kj(JfQA-uHrhC&{B`9(OW~y-`&L((=*4ljALtY;hYAmFF11j
zTS6hvJuvqX?zqO=+32;cK=o+s_QV*^s&(1L{_n$PcF$4o76P)|*87XM6gu3hB!^Nt
z7{=m0?|Lz%APu4Fkx1mgywJZTx=biWju;Kssd(3r*7C4Ai#a53-~8yc88-e@pJH@c
zPfN*||G=nfOo`IIiGnb1o<-uDUSDI<>ugSabk&=Igttqew&(KSp+NT(FB8gUj~!<_
zpYvPPr#!q(-#fEew2!DHiYGsMR{3(w*G1Cfhek+q-!7CcX~siE-fkZ*3W=G={;IWX
z_!8xg659j^%u56Jig;0@5pjIMlN7s-oFO5qbBBEE?U5VZsLs1;3Y*{a!S@%0gEHB9
z%JB_{o^ZF;e)$}DA;yg<MNaZwE(oLW4*WS8E!@kfy!Fhr|MlZLnzTU!%fk3xEjR`!
z?<kY^&M-csMOQo%*NLKfIAb-6@Oy|+=p;ef&^64Cje`@(G?GTEfRIoVR$u6x^)jJ!
zqm94V8IX^Ynh2xg&|5wGFt>)|g_qnTr%0LE*YoUWg7eILy%;llYou#<$EV~IBC$Z6
z9h!S5PA+OLUOi6rFfa73-(^BEX)f?|3%*@OYQn*;bN9|I_E|fM!;<G**GYdoefeFS
zlFw=Im*sVFJ;#c$=`HNUlF&1?hHMd*?4PXFqJcLndSG4#xOXGwEKD?Eg_do!kHY_e
z+wLRRmb}1=&05!BJIm14hQ;-l)$(GCi@&{|SJPGS$^4lx{+Ko&&O}>SjL;(YP51-M
z%Lw-_sb%}f33;~tjAJ#d6f$DhU~Qn0*5=!)@NAP7Jsw}Tv~0rptjssxrnuyKO;}Lj
zS995&^ayhcO*E|z!*D0~`x;De@6Xav0%S~mf3M2UQ87-MuU`$M&<q_Ar3;Ba>n1VN
z-(9(I?YNGmf*Gbwjwf)hS9KtP7lUU0^U|SMYQ=E0iV&>6x8PocMH+d8^n5y<rt>Bl
zrw?awmMUApsKG9_rpG@PcfpgsKFS@l>W>~XwpbIEcCD#L2SvQ}g3<?Uk+#RyoVxJ+
z4SKisGNEJ|`)H6F>vrKqV>9nsqL8EKXK~w2tK<I4pR^@SCP(ecBuF|o`}rm2*M9sg
z8E$VpvoAmG7j5&Va$U=T=M?aE6MB|$nNS)_YS2o4rbM+#+C?z49(6nJMhxtzG~Woq
zTZv8!V4HONls$aRy<O_iFDS&vY~N|@cJFzzf`v$5Pd*11@#!Qi4y<smjGU@yT6t+^
zllb++@CnO-@#{$XrwdOX)1^=Dyncq9%t`;=K8A#Sv;C}g8llc>enfypM44^S?cwOH
z<if+d$1pD&+`DXavpd#nwaPbESXY@U=iO%nLgnZoKSi$dPlz>}>}tquPamTn@sTQ`
zpRu1m*v+1q-rrqQt2udV6%(GxJp|v6Z^ONJmLud#Gh%a37;_V)c&uVnF#CCaVc;f{
zk)M?O9GgC7MP9mdjZ9b45$Pv2-9nTZDkt#|vRrKZrtL=B=OR7u<2pOsE1oqjVn=(u
z>#myg!OSfc_qBb6u+)QDgqo+ekJ|g4?r{umCKCFO@&z3yOa~*}pbe1}!D+x$=3%K*
zLOh93lY+$oI<{RV6pe44`yJKZgR_yeZV9R*V(QEv*+SkhENtUB7;2!Kpc;7DZ0*mE
z`>!6VEw(;;EkSNw_h*yGs#0U^a0?6N=OE0>3HOpaBeIEz4F$}(EktpD@>#4}@@7a&
zwI+T)xOOvAxNp$zP+l9?(bvTJH7X8T=E*zh<r-VoD*lCe#!_eZw!84>kX&%D2lpSf
z@6YHfQ`|5+7Se@1J|e7=&~2I4Q|(Eott6u3*T17r^y3W@VHSF>DyQ^fhm32e|M7Iz
z;}-0#ln{yt`1vGsO?#P8j$(>Av)$3ASJCkoor5|%Fa-v8RHyMNB!nbbYYJb5_p-X&
z!TDZTzH!U7CGCm1Fi{wt^$4n};~!MIbG(8k=vZ^v4)MUf?d{FpJryj)#&4<}pYxIv
zv)0ip%;$b(*P7pXR=PVA^`3l^i|wvByTP?QZug!liyN5U@|H%G=W}h--4c2BoiHzS
z&-OB*5PW%`xt-facdoPT6q*>UoTT1ITBlQSI#scbbryGj2A%auJ-=7Fy^Btp5Mo$8
z``-7l5``WE`Zz1ShE83YConG`+&lV)g5Y{{r4i=(b(2yVzUaO`we#)9HQCX8y`e=z
zqEfNXgohU~?(~WK`SukFz5h6~6@##h?NnTRvxHo{FLxZ~<%fIo*761_0_81ckn~8B
z4W|%dP`oDGEI&}z3B6%WZlR8?Ueex(kH4jMzk<3Ujg#mTT?gB#=}L|r+AEgE;Bjd;
znD-9c`{=#=6fNUNmsfKNy2N22Gy=`|I;aayh;5%GIw(H5KVM!Z<t?-!qA**e$~B?o
zeauU%*o6_F_61X{%8mb?5p*qhx!wfe-jaj!+0~PBsbS6!yiU#G<?b8#ItHZ}mbgLg
ztCOLDGz4QetxhbJ-=DQzFr9{KZ!D8kamfokjUr;?N$a>yuMP9wg?puw<S5D0C9#P@
zM>C0A({B1DJ@T$crjo#1iy+er_DQn5FD9+Pi5aQuV68>2_=CevOUOOt_on`xx|lnM
z^!Fdayn=8q{%oa2Ubl;5-2D?2>9~NwVELxEbs@F+OdSJcJB|u^ICA=Sl!h2TabuCt
z&I+At6FBrq%4ZgXz9rzLAq=VL!n{zMbeT}@f6?^OMww{`U)W=n#6qf52@>7WboEym
zu1>T)mKAs<^du3p>eh57o5rtdZlQR@s>s7gdLjAx`FW<&4-SJ+8*v$5=o#N-LP1#S
znifmm8(oPg%Wi3BB_-JyA^JwUeKyuU^CYIk`1R8<l)`*Y_l9R>EIn0EdOu_98762`
z5h5jZQ}j&i#yP>f&^__XgyQyUfr|1LQvh|kjP0s*exU9x1Tz~>!GXG@>4TO(c&Rdt
z_0Os6jA}R5wK7XZT6-?eXK_C*NfKun8hAT<pgo0oMc`hE2IJnCBC(8eoO8cMuNm-)
ztn&F2Lk+V2x|Ym$cC2}}ONZAM!^anqA{pYG`FB#E@Tz7=zQdA2ntsS+<rbI(^NPZ~
zSQISPW*Mq{TZWwj3EY7mJGdu<;Yo66#S?x`9^3llK@3kn*+lJc7t=OxtN7(6(o14C
zO0MgAi_1BrGOVG%-`j@XrMyfig^OxNnqSmR4sZLaKX@*zjYYE9LzYg$yjrfFGJrDj
z-rz>Bz&#}vcLtYkYM1kPc^(a-&pzvSm(TOQm~%^9gRWgK*PA%p+xob;XANt^1T$SL
z!}nzPIr5O~EYi8#Wb!^y67BG<@H&;j<E-YWB<>xd!RvA=1?W$;gx+7Iuas(}P}Y#+
zEy27JaIb^Z!H1ZhYPNbR*(k)_!lB@i`_YXGo7fQ%ng+(2Q}rxJ47=h;j78}owgHVj
z-^7^sD!tm=7FKF?@E);p$gje@l5p=AfyQ?~gYkN38xAxu6a=o7cdRw>B8D*a6@QRn
zB9Id#SX+4Ylu<sVGT9hc8Z#652&ws-C<^{&K5~4}!wzET-r;2&pf>a}p#;azGd^)*
znBuZiS-)24THzmwnOkkI(OQ}v-}#+;V6%6eJ9dEi+<-Bxgl?1JthRb39{G3b^XUnM
zZMnOhM2Il2G~7!!?)TD&xFEocH=TN6b%CA0#B4HEj+Iz#p$g+?UBUaKDU%$@@V-Tf
zA;A;0$yb)YKFcbH7N0Ps|J)T<S>9`ddGEu$>qAXHuY2ik@jjI(d$@GtS7Dow>+WF=
z-}Gk#MtA?$H3cI}bsK?FDDNK?Q&F_?%HWEsASb@-F>WA}EB7;zQipk=d$yMeB`#aT
z###SFlf{Z7;KRZKakaKq)>p5X7U?^I_P2c9%d`C1j7=0j$89L7=OhpX#eL<$cu=$E
z>Roa=M!!&j4b|~7zOryH{lqSh_dP|<uBO$ae%+g)%CA(8S!`I4&EzsUbDdV_6m9$7
zH%o_C<KH-|eVED9`_!eH)(f-ctTcU)5PfeJdIoUmm4kcnhgvPR5hgZ6*gkGt*mj)Z
znkLodj_^yQD&gZ}H4pSiFo_4+5!I95<d4VDaRPm!xN5zsX*JTT+Zp|J!Qs>b^UA}$
zTZznm-&bBQOy#Vwk4rS%JatXJ^=tc<$xwJaznWNcA4N*J>RquhJU7)@pOxt@?IJP^
z69>xG-lS|IBHHx-*L?!$9Q!h%JeJG&;I<v@^h3QnFMx?pxOiT8{p`0+%d?}-J2Uhh
z4gyW?CQCt5+_)EBre+Zl7ZHX^SX+`w@srf|GP}Rq<-_W$2=~s5G_P46kK`muYugSO
zuXE8B{&?tH(}XzH&`neO`s`U#JT>uR=9c>elI+vH%8zZld>^LFC|^2GGo4k{X^+C=
zpal1ho4;fx<c$!=SSbET?2l0S`;G*47j9_oI^T?&<3eR%H}McbvLF9Iucwo~>Tvc2
zvCarXqs?)uf<YDy#aP<|Sbde@Ug1SLN%@YXW`D<lZ?+HWobO?-Jb3G>kvM%YZqwf0
zpW*-8<Wc8Od!Jw0uPlkRdX2=uXIWjN{hAsbQZQ^7$Dwoo%k4o0?$za`&7HXKJGd}I
z&n}x_=61WP;A}SAn)dPPX9)*mxg!b()v0|OQ>ve<Z;QUpDSwN!;nFzL8yiSy{5W4l
zcpbW@e(6<(duy#_RNV<u%bcbOF|Ae%EU&F-zf;YdqbKzCt?e;kzp-#(+oBmAJwAMw
z>=3;nGZlg5$S3IAa7**ACwn7V>B}%L^bX5qLh(VsndN>F{N1WuB8igk_3dcZ2mSAp
zUpSIdvD?Rpvs%Ba*CQ&DN|TW}(2_U2zf@&o<)^wI_~}7|AtS}O!qEWC3&r{}p=_O0
zC%A|ck7fwuRWqz*{FvO$(@WTCvCA}hikw$rlW!UK_3k)MhIZufk%BF=<{I~uuu=-u
z`9d$DJ`TmRPJfseI#ygJ6hYYnp70^Hax8T#C&k%^wUc}i4TR1Fi^=SN@^A{`MJsRi
z)!Psa9uh5H4=i8hUC+qtn3Y`~V0<K{_oZh*9DZJ{0r%!CshqVJ$uOYYcypG4A|E&-
zs~2a%WbZZ>DXVd#w<--$EwDV6%v_L&AW4AnnzMssNeS!DroZ8yRuaWlTq)G{T&_3h
z-pOS`nT+!Ii1?~=Y~yjpdFs$aI+emBN#mM5w}o#zjpG+Qg*$OiTHhSi$td@t#LPOX
z_p&{RD$lnJ5vh5hv2NkePYm-y=W3S;g^N~wm30Vr%b6UDB_*^Zo}FsLb5i(LmT#VC
zZou{N$lH3z*Ge-xF!t_W$lqF^KM3U@>t?GFDXlvBiBF<I9{}@0&t@+Z%B_712eUi9
zwW%>y&X_(FQ4gkNQ|u=)!YlCc3L`g45wR?7%1Ux6*pA;}8dV|{P#Wm4g(~7Q2UFp+
zF%>#x!Ov5n;md?F+s<m+OtDkBp7&K{Q`1={MAXA>EqEajv*u56S*a<5QXSUKUWL9_
z`l=b<F=MkFbS{30gzDwz-x}(yigvPuUw7-ky}?0`;^&Op<_8If-?XIjB6K{+i}ifo
z?b76(x=eZ!Ip$GH+S5(oF|7KL<d(ripdQ*F?jljhi*lI~BgxX3+wk@nI%mC1C@8-%
zNo519xPn7Tais-l1#ZVQJbvuF!87W@6nI}lLKw}Hsog$<guvJ*{mx+egc}jl$ZbMD
zZG^~l_F5ygSon2-9^Cuk58Yht(8PPEMY~<}MxN8<)%?=<^Dn$cIH=fGn<nnE4@;zM
znq~LXc4HedE9H#O2(%+k1fpcrrwOej*6~n*>vB8OhkKuI{XQi&&KBY+D%m_^SQ7~9
zL!I(SXkOqUzN?u%aF8SDl--5)i)nGfWNS~alVKU-ZA6;8M=qvB6XUHw9FaPh*8uL_
zt+u!NretPIX;~OwT=2+dD|`_xt527uB=JSHS^LlL6$KcGVLS<WZuo@<-3vArpW;4P
zeagAt5Q`~LH)+#|4D%Yoy)-MrwU)0fFsEiy^f9I7btcBtj&Ns^zA8^|e)<$BQ+}HI
zyX-XHe<h`xS8`2A^Du2Eq;tmy6Tgz{%a87Kv<R5j2=1kSyJ+n#V#Kx;^S#rmv#G^V
zfLl!vjhSD^$qnbXcc6Y5Ur>S3bGCS;1t;{==Va@W%t?3*c4Nu7NK(ts8#dr^cm($*
z6(xVqqkEFl)<TQm`C}z6Z8%sW;53{6*2&c2X}60<sfgz^@db@x;23dZ<99ArYMPOX
zMT|tncf<aHhc>kE{lXaT)o3v2zLWonQc`*-BiBNxDxyAtyuWF$hHUc!UuWLe*<#?F
zGgip$$;i0}haoO63DpV<W#!xQ>|I|+g~1}ur?5CYhI{AVdD~>V+o97T5ue>;3%^fF
zsJnvsBBdeqWN+^F+J|4`=L4?NlB~Jzcd`0Y3@%&?KW-U)LvFug^&y~IJ?4EZ%xePo
zM%yIHqf1R--w0-jB$m^YydhkyV)JrC&A=XuzjjK2f|hHWRouGAI``+<Aacz}X%@ob
z%3#UM<a(p1>G5?G`1PA9+-qj4Z9kW`5rr0hBTC#ekyR`q@Yef;YnJkJZMchrW@g#=
z)|q!BJ!DLgF#SG)Z~dzbI(C*k2t8_L<wXBOjQttry4;7a^1mX01hU7b4$k%<-vST9
zF%b}6{PoNK9sh@(%|i+8uk8Qm|DjlIfB;<sG5Q5^yniQF(0Fcc)@JSk2neRO)*Me<
z5dP6eii^3OySXz0LK+a@{5#YBM;8#9hr6|_xr-|Tf-Tlxb%M$?u>V?ztssZyaXB93
zB?Sdw)ECh3zcNAduzzgtU~Ptg;Dn2S0RH>Oe9c`<+^lWQ5XwQpf5&|PmCJDD`tOMV
zv~4&$*xI@|A|M<PBOqM=Z`l6+duo1Vy^6s9nFv7p%r|hryaD!=%l6~{OiljzT%k4@
zYL745=6^ocUu_<A4F#H_7p2VqetY@vP5+-QhvMhxW@2k??}|Xd`d8cdpLIdg{ln*M
z?&@l7?);kV|GVY*uhjWpJuMUiS6eeza4LiFgY&;0(|>jSu6+OZM*!M}tlV5|JV0(@
zZU2w+;(u0aXgqV5f9$>p-h%)2bLD?FkE^n)2wX+rDgytLBLE#IpSZAlJhrn%$W!|3
zy8D0f^8Bmn4#maP#l_sk6m(gs_W!SQ6=>O@Z%h$^bLuXQfB#$*8t;SVU(5c#yM}<q
zI|k!H*X94a@xW;Rp#=H<)%UsV++18An_8JmY5#RC@gJ(l)ks$nxQf8PBm&Srt^WA0
z`^qNf|8tM0&~i{){nbvggB%|m^Zq3P`cFupx)?wCE0#|{{$G6_@Smu{|CmXjSp7%Z
zvj25~;4!^=1o*#3=j!jP2wX+rDgsv#xQf741g;`*6@jY=Tt(n20#^~ZiojI_t|D+1
zfvX5yMc^s|R}r|1z*PjUB5)Ofs|Z|0;3@)F5x9!LRRpdga20{82wX+rDgsv#xQf74
z1g;`*6@jY=Tt(n20#^~ZiojI_t|D+1fvX5yMc^s|R}r|1z*PjUB5)Ofs|Z|0;3@)F
z5x9!LRRpdga20{82>ka(Ao1_c6jJ~0{NS3fi?b<*wLSQnl&vj?t%IqJg|)3Yho-Z+
zxhM?}7mbVcb8`oa+cbPMk8Q0j?Hw$@ciN%!=i;vf4MY8*K;IJi`=@{V8~R2G2{Zyo
zfA!~pfPf5!d7vLag8C(arh~qjy95n@1obHb{fr8D`*#`CZwE98eP5U4?=q;*4QLP@
zaM|xL)L#Zvh5;ae20()Px`5^hK249X{&yL)=+Gck-;%$}pgtR*LGX!Tgi<g7%^&J-
z0V)IE>P3M1pM{dy-(_8Y$Irm>uOF@nyYcdff-wD)fI(wG%LLT}T2{ynEelk4sIE}m
zpt?ZwhUNvn(E@!h9{T<m^gVs(n>+{v0PyW&1VX?~0QlA!0{C?JKjI6;lM6rzAOPF|
z5CU!jhyf%3QUDo%96$j;2A~1Z0Y{*MP=7HefK$L3;5XnL0IioH0M!5aFaYXr^a}v$
z$Fmmz^=H%%$OS;_D+dq<hzBG95&=-(d(e6#1CRqK0F(eK0JQFC0JH!)06l;K0QK?9
z41oH-fcm3_`j3M8d1VK10HD53p?*oZ0Z_l3P#>E70H|+D0e~QY5P%E72jBp%1MmPh
z0MPa^4C40%@D(ru7zK<0#sL$6Z-7a_6kr-K1DFNO0p<Y<fJML(;5*<4U;xkyXa=+b
zz$cXuECA+!2LSMSIs|n9_`Dp#Lx2_le8LUkK0p>A4^RLo0>I}B5tIQc0387MY#)LU
z;2r>c0v164zz4Vk;02HZC;*fIY5)y@4nPlJ05Abkz;ZK!bxseU19X8hc93%ddcZIy
z$gcqo!FY%uM*{o-!xw-}zy@FounK_orxHLOm@W(C&_0p@cn)v`I0IY&ZU7sAHNXO3
z4uJM8XupQ`W2nC$==h)mfck<`0YH7bLH)4F0;B=L0CB)QfG9u&;0osJ4tN8GUjuvr
zF93mnb5MQ=I0764_5r(q9l#b~9k2pm2RsEl19$+Q13Up<0B?W~z!&fW;0N#r1ONg7
zL4cQlU_c1q6(AH41_%d40A2&$01^Q)fM`G_AP$fXNCG4S;sFVOR6sf)4UhrI0ptQ=
z0V#kiz<WR;ARq7vPzR_7Gy;qPCV<a?CV&V)6u<_+0qYVvY#9Tf1JWMIcK|;D2Y`J*
z4WJfK2dD=;1v~?|1E514bc~e%ldFMT6`%;X50C*M0FVI407SqAC^`k40JZ@e0C4~(
z;5wK;bj)o7v;rCcjQ|h80|3;g9n^PIJD>~j8K4a41T+Df0gM1D;7SGg3Sb*h3h)M4
z0RjL)06)Mlz$ZWzAQKP*EeuGS(1r@q|L*t=wRF(-3e^|dKB0O*+aw==3jiJ4umEL{
z2jrz7F9AT?2(+#E1E6gP+P<Le4BFnHeUSk`2mq7(<5-UZa&!PL00#iI1z3P<0H}?C
z+6puPDgYS(LimsN1eyk#7Mc!fCobCzsO$y+%Aqnk06l;fKm(u#kO4>mBmiQ-W!pjo
zhRFex0O*(k#TlCZ?`Hqv2^cm2K>Ht57d?O*0NN*A0M3BN0BAWK0M-CwfF-~JU=A<^
zJOVHRF1`OOHv+#y^U?=E^MRZ)fZG6Oz%9T(o9^E$gZ2eh01MzgKpG$gkOW8o!~tRe
zXupB>A7Q{ffDk|sa2Fr|xC7t^@Bw%MJOFM07XaGEIRMb{1zJB)9d!XZ0BwL4;2}U0
zpaD<^K<$GXKoy_@PzFG4fFeKvAP<lO$N~%jCIBeL#((E#AV&s3F*5!;hvI7mfXYn)
zmob6r1g%48dZ-*4&mLe0umwPF8-NqQ5ddvJ-T*HE6uajDL;$ocdjcS@56Jxhm%qON
z!vO$jygWcI0NU2l0cn6#Kr$c+kO+te!~tRe(SSFA*MML^7$6kz5<mwC0zmT&0Xg*h
zD?m6P0s#FM35Wv30ulfz0B9S!%pqS6APbNI$OL2qF6WUChM~F?0}27}00n@ze-9Ud
z94f#3`!c5iWrF}_047*)Gyp091po!&9Awb`cm{y#U-tL#DaeljTYw$FHeeI523Q5G
z0MG%;fJMMGU;+Rw(>P!h@D=a{Fa&_=FaYQVv;tZH&44CABcK6L52yiD1KtCm`c#0t
z3Q!3s2Ydv406^u?-%wr)r~`Zgd<H<ic0e1T1JDWR0`vg-0KI^Iz%T$8Fam(;3Js3|
zpmGRGz!cycU=lC~m;uZJ<^c<U9{^~%z5|v3(0bnhtOKCfLG`_i5fmFJ9!CIZ+4li^
z0BD(a0Y3r100)3WzzG1F2KxOs09rQ}fIk3au<oFB3bk)g+Xnp(#S1FCT!zbKgMNd`
zF~E4}0BAfY(SS0@2|*0XZvqGb(0M5<D8mLhE&vAroufkMt#|<FT$Km_jStn29OTfs
zG$()*0QsH*px<Z!(E6YT<&*#lz~%VRI8fZ7zoB6&kVEScI=^NH+yXEGXaIBoS^zzO
z0RXkNke40g&^b990GbXuC+7hCKh1r6fQ?o6{~3f3LnI_}OL68t3^AsQdx%n0E@#ep
zX6DSCn{zQULKLA=iMOkgTNjny6umA*=zUR&a#u<h$}1`rUGV#?wfA$L=iHv>nD_g~
zubR$&p0(H7Yp=cb+H0?UdDJrAN1kjvQ@QUTorPc0?M(ctJgfZDxJf)yUdpGh3(=!K
z5?#k!ycg0ue;!Hh2R9;dJ^p&)?>hYD;g9A3UGUc(e<a&(`0ate0{r#DANi0s;E((a
z!X-b3{7v#ZN%p<**AIVv@YffAsxD3fty}Rt0l%&BHyCOBXBme7kv~Lfk}dg175F7z
zhJNYKhV)qcjlti=cpi;kqE#K~yYNdiN8xuQ{)XcZ|M6HyGNODV@JD_!<-Z-j9q@}E
zmZ3gB$>(kWh~}O6qjJb^A^n;u{hd{>-~s>C>2X(9mr<cSO!m8k=dPKNll{PW#T8W0
z&z?A3+<o>Fm#3zT&P~hgmX^(4N~*;&<-MhEebDdqxBJyj8J(Gyn~|2mefcs#4pr}X
z|C$em&jTbUjQ~7SUIIvqkJ`WTa@{K*10*XgvrAg0r2zai1Z32weHz{|>8(8s$xiDg
zM#g4<JUgYw{!sSG?*QqN)&&gk7}gY!mCr5zeeBQo_5~z2Ei0{y7>QZ~vgM<Xk2Sw#
zbQ&OeX<3<IVIj&PYDN2dtr%|2BWe<|1`zb(DZdR_JJB^^*_D7~foqhbetTo}ZBy=f
zBlYDofOI1nWQ1=XUr>1bxUJ7l^!m}6s3_`l2-F&b+L+Sjot^J*zL=@yP)*e@el$H{
zzwWvdt6mh;(z?>!^$xEac&|=9x@yjz;#|V%!h-Y3ukCz3I%C+1POE1FlAV^5mL=>M
z$@-Xb;FhveO|ux1O<b#A{OMH7J#NUZ6`uiu+7J%erh34+c5KVG{rA5A3m`dZnQ1xj
z;P91^LU7P$!57OGHC;<J%}UDy(`>8i0B1q_DV;k_R|)~iP3ubK&{y|>V(D1JncDZ_
zKPvzsrZY3c-{b4KGiOF-??$D7WCMb7u9O^HU9U~2T7RE>pc?58Ye=-d0V4H{dQKB?
zU@3ZU^N){>`y7xg)CXD>1f&HZe>7Ce&gE=>nyKXy<WWFK-||OSTes_E?Js3Hx#*Ab
z8;|=>Kk8WX!nZ#If_g$3c}78cUG(C_cXq7%?it2`e6lUCff~u6-%`)=eXVNN0wfn4
zKsq$DAl<p*%#^xsuYYYSAS6+6V0Q(m`&({3bk{d`eKDmjASi@zlz`i+c*a}Son81r
zEoH@FE{7NZ#BcKf=kc1)PP=@^2`@u(NY<NC4z=9YW50j-%fkzI0YVZ5WCtL`^_b!-
zCLJw*{tXEM2VY5?CsqwyT)XS$(|`bj8t6D6b%C??k;?slo><Y8%gH1SxnPN+&&9=o
z6mnx^otl#0GcS$$kM|;;c}#h>$velIPhVFicuPb3JOBvw)5@P$?mO6P-DC;L%CVe~
zIAi<U>$aIS`~V<mgM@kj4st9{*A%*Q_}up89dj;uifhWUPQ-PF0SDy)YEg{uHTqBb
z*CRbX1U2Xml-@GI>tKkr%Qye+d(*w|S4*MshyHN}yo@&X{VS`DT(wPM4!AF<Uk7N?
z|GV2SdA!{>fOJjErCy?bGxOZdAAhyt`5?46Ll{0w4%|V~#Am*$d+ENf*Y2#ABD;?z
zUqUAM-`aY^{-yt>a!?FZq#q!pAv2rQ`(#k(za{{Jo<(vSA#q9q%g_JW;8kZ0VXyNr
z699ztdPi>K+eUu=Yb`*iZ$sbSmXNl49(;e{l8NP@hC+y1Vn|O6d<{Tt_p$?9XBG~f
zR4rvP)R1gqd5P0r0x5mue&qDxA;0tiHL|_X#M!_hJ9=@a&JU0I$5X^LRR`rb14;!M
zo|ik{ap2ZQ$M#AbK%(0xHQWl(HEk?viar-z)5g$Im=LgFFR?kP1;^YweRI#-j})LB
zk{ft)D21V7Kpwf@l5@EEHj;IY;B6VY74@vI`p&wi<yU#j070K8t`qjgu0C6^gzA%a
z|JrsV+k8d6QOY0?bg-pxw7&aI-vdW~1SA_)8Pryy5C~|>nc0_BG~QZ%9pg~PvIL!;
zO326Vd!k*l-?pDQ3W&7+1o3&juFEZ7{&Ig|SsoyyJgComlIsQin!a4<?0GX&W2+o(
z<Ey1?Mc!1DtbUj8iVn@+m{gYg6XUQR97hh)og+UD{Ce;;!=2Sq$W%eCEq?++mVE!Y
zPNz<W2FwMH1T}zhBb>A8_YJ)F{tiPmoR$)@>a~4&(<ZjwtU)>fLYxd+wC$a_W&L3-
z)pD)_1Vv40m3RN(-JWT!HAo*oXj~|$y{OacXYz+=5cPYp8!NtA`{B)JLmK36S<bjQ
zoBSO*7gsh8Yn2NS{5R#qjkdi_g6kKuR-wJKEKlGyaWE(S&e<JS_UzU;r2=oR#G8fq
zrIs6;nid-RVfRlpYSCVR23ZCi>OT$JwYv1S`G0@kI9$`!fRH_?Iq*LVUORB|9t~o*
z*&%VvDc99J7dqA;AF}R(aT_)<vG&%1XsDcm7hGGLopJpJoJ<%VXjNhzO{^j6*G_M7
z9qiX&>Gg9!4W0|Bi26O;)V4iuEU$Iy9YCOm<ktASfgrwEW4YV*@wVeP*QW6_4?QcV
zo24kAj8{Ctz`q{5uj%v?GY{2BnM_^)EK*Pmw3d4P8$b2PvFh(}E3ofU>I`xZo;82Z
z9W`#Rw}JXLIxw`}rJxY}^GuIVzu$IA^`A6Z2W$c|?C1>-Hk?yZp+WfbLcq!Sv);RR
z{Nv5hC?^ZNq5lMem97xz^?KfxT|a+1%2BO<Q1J)oOUFOocjx(++NN9&9M}*NX&_W=
z^P{NM+wHs7U$kYphLc!#hNFGZ;8Q05D-_t0w>t~eM0G4SKuE8fKGC`Ii`UN{)2ON6
zBOWuPRl7DD_dEoNLTYKS@t*^MbSE&Y-?_J!wwnkD*(%t?Ba&LD-HZJ@%U0aY5FRyu
zLnmznoI{7!Klf_ZyWMJFWa5Ui)PmxWz1~vmmM8ms@7}0ES^z?x>ahGBovvuv@FfkB
zDRD0U^Uus-+qx(kq&FaBDV}eUvF5WM?00IAI{~>Akc=Ci8S_rf2Gul(Tb6T4)0=*H
ze);(SXpsA5IU6k}`gZuCT7d?65)i77b9IlGb85PeXpmPV&cXYO`eZ(F;C&79E+E9g
zqE{xDo~YgaQw_2M5US~`eVn8Gy{?|GL5=`IGnSnTQ(JEC_`?tla#ogeZKICaDGz<K
zP=hptaU*K3v5U^{nX~$O4RSRgB<sS<{=T?DtH!@;km~@U`W$^C_{+jxzpvFGg8(6k
zb}nmL>(r*wJ{qJD5US728n2a%Y1q9&gM<Jf4ze0fy8ZB)VTBsxAwY<Oxz`<UTRQuh
znHppPAjHA@-_3dX(x!b+Ymhf3&X(V&w3@hN_*@P00U*Rd?S}cC{*^NCBMq`oQtNW_
zN2?Y-{`Le766@j9VAciwGl8YZLX6;YF<)5Q__9W$9)0@08YysHFxJ9L2jmKHu=4!z
zU+Og9)?R~n0ci!u&}UAZD0pG#ISulN#MzUz_WbN$?nu!f%K#x;Uo-fr!}akg=%`xG
z7D?@`_BBRjd_VnC4RTaM@_xE!Nd43qJ2gm6xWjEg?V(4{&VQ$E!($qxBOq-7IWzj{
z$vN}4o!1}(0U-{KT;IO-Z#UkwS%WwMX$Q!tt>b#%G++|6SLJOsAguxEdiCphS%2+-
zhNzI&CC=khuNXOb{BIpK$WB?#ZHLw`obl__<{IQAAoy=euUbQk{4=*YG)V2{9QB*h
za>9_5?<Ve^qCwgNg8!!6H*i7Oe_yF{vj*vf*VH}@zTTPH`R@<^)*yFDYBT-MUj4<)
z{+DPFcL2(Of0n$xdH2e_kM@HVqZwE>V%^@5k36o16~`7g-E>(ywu$W7CH913eHYc+
zNQ^@sSHM?kx%KwY?1vA3vWm-LkE<%)U}6pukIsqxotaPq8ZkEBJNU5o%eA8=Z;(!6
z-V*y&?f}KV5Shvvy?^h4J>SW(v0H4EpmErPjP1efkD@mw_Pi6zIx%mFWpHDA;qO!*
z)9lo)2CwyG4WS^8Wf&mjzonP<8$NYr{XGofvC*L@KC3d$wdM4a$J=GRy%G?bE&wNi
zR-r!BKI3gJ%Qqu$Zrx*3@8+@`KmyKUr>Dqkxp!o*>f4|E=`juR90GmhC)UiLr96I7
z#|AV9WYtMHKh1^Qyk$;@&0oCX!BH)GrLO@siob!kB8SsY?X$ga-Z%f;`3-saT@Wz?
z2XVas5s|SusFPTp^X%R`Xw#o>0w)t5BpmtZSWRlmIfTAxd~1xz0{Ikbw1{T>B%Tb5
z+t03;WqD?oZtq_8Ir)6#ZGeNt*NB=9AA9`#pO4vohwfyzo;b1f=p4UdbAWMQn^sRY
zYuRQP`7W|Pcf-Mg!JM+sf5lS^Rt;zc2!vzo)db?zhyBDLs8L@ymU$>|{iafCA4rYl
z79D>>6qLF>wOmYmw5SuW08D}ZN)Dk?_e9QPJ8#)Q8Uinos9oGy)b!!YpV~Nl|CQST
z5yCN;y*H9Lk3QYE<d+u9(wQ2!X$wGTM1P>qhI?jYyL=J?-ZB751thEKYaJ$JPMiTq
zSD`!wfHVYTiDS&9MK^nIl@JV@Ljh?G$P<Te82U-S=3fIs11h-olm~1+G~TyYtUcE5
z(wq~3WKn&(K(FE5=3<>-<Eu+sUlnpOHLmG6P^13SsNcbXw&E|B1Ck+Tt^r$xLWa57
zC+YRBdiRdLfKX%sTu+oZuG6C~a!#$R0SKa&q;E3-sRwEk2Oal3QR@$i07|*d1%&D|
zuKTUebieYocQwcoK*$eSa_ymqLjA8900_wd<*Wh(PS=!)qiVcS5x9pmk>W_G=?4;W
zeDRWu=LY?~7!Vo1-USHhb;D*KJbC$!JhBIwBG4Bda{vT7MU(VHl7lCeT^+VRvYc8@
za&5PH#@ir-v$?Nqn0D<&*O0~w-h%!da$zjpiw^I5dgZhmHJrrt@r68<cCSOZCcki2
z*ZLQY0uIfLP@mOlg6pks<ganu)&uikHICFET}bqgOWLe#Qt$$1@8^-1bS5#^>Q~SE
zEPu8<Z{l8xf+B<i2g=e0QYGo6Rd0WH`<FZ2BOzULEER4SjJZEB{=j>a+N@gCk$Gdg
zgSi}LXG)-M$r)$PvK@;6$wBlBlor8LBWlXoSG%|Db}!9BF>j@LR_x3b%EA96zyY;b
z9F&6?x{)5(0+k+nnKStD>q^#Q>w6D^0~vc-hw+hgXGr<A3vze9aSjmbC3#ry1cbOw
zPnrAV=nrkb0z%#fVgYWaTd_I{Et@`A^7Gk$FZEE&E|+ESD7c`gN8^ggE!w^C)qKRo
zh#I)QP)#JHhtLzr9z68$=#T!IewMrqis3_UiF@M_;Ls@Z)8<LO`FlV5jOrtzh9?1`
z{?jij@2|%`J9Uj(AB^$PP_p&o25no~Ys2YOKuCL0|H}a(|E=AK%oRJDKGa`Ax?-gd
z5b~mDAGsm_>Sy{>tW&yA(bS}c1+{^|qjFB##}9AlsPPwYsQ*B(6Y~~bj-&=TCoZQd
zIB{dQ7*Q#P9|}5M0ZYZTU$vOHVKZ7At-#Vr5ZlPkvn+@HT#A}b&RKr(r}q0k08R$_
z0&4ocgbev()5>)<3ZG%Q@runZ30YFnsc-siU%)?5?dVZJ8iQKfQ5&jHuiN21rj|`z
z>n{mebZXIyosXUUlOZ{12ulNaY9#B;%gb+QlyZ~WgQ1Cu;^euO4#1%~Mqu6WSC?07
z@H42%C}{N9*f`}T<fWCG=oPiplrfS@Tx#4))+0wV;2xfNF!<)+ZMC@^Ua{E+2-Wn^
zRm~dJ=~=%T*N4~VjssE;kY+XSXxF0S_;~_Cz2poasl>_TAIkkB55EKmjWVcd?e3xn
zUv|;RmV;Z~zqMM5T<o(n0)+ZP;O4U7V{g1~I#bJ{)rxk2kmqpcjH@PeTlu?aImCCm
zSTX@2>2%K=cw6(SU%mz$Ii3yygt-3oK-(q@U-_mNQ^R1AaMcQZ$1XY8@<YyRp?@Aa
z4jdZIXpN<GJX^ruhRmy9@cDr20fAMfVH1YeRR-86-%QQ8`LetB0U}4U5UA1Ue9L6l
zy3gNyi+CeyC?|ongkDdPTtBjK#qhI}J{hi2n+FKV`q`)3y*Fs?OJw<Abx5Kw0780w
zba~~RJH8%wnsFGS1mIc0yL_=}@6yZG&CCJ>c84@k35*LV{z}W9?BBk><gJcky@bbw
z1U(D9y@hhfDmU9Q=i)D>|MOK)qY)i8WFsKd+F7o*PHp?7q?mbQ3tQy$IIJO`rT!6T
z{pKr&1^^-J0<J#=4oT<v2iD&B^4a<?0zw`N%AvjResFzk*uS^#Q(i1(9Inq75+}Vu
z?ZQ@b-Z};dT8Bm%XTVzQ@)lakrxhJZ8xqO|M7F~Bz`-<Q%I(ej?QHe)ThKRELoT^a
zNYwL3w=;uEhqYiFwl2*8A$#4b+Sj9po;X21AJr7RwE=`=&?NQEwG$roh?Opsgk2bb
z(8$z!{D6P@8xPn3oD3|&K{~PV(QCzUYAKgEZ*9Hz@f(U?YtOu~XUFp&XTY+*?e_N5
z`W>fL5vnPuO_jWDsDJd8zHd3m9)L6IB@aq!c~4m9UA3tZ)l`nBE@ixjip;Lveo+6L
z?@~uv^o4oAp_Z#y{ae?Iy7#9xg``PG6Y~~Z&SY6mVw`C`h1^E2KXK9gLqC#-Lh}-g
zJqG}x(fN*{y9SN=Wvf`HWexcr5R&ND*%RwGt+u;D%+0{G<<4FLQs=qD2d35fCY!lt
z-!g$7KyD8d2z|SK=!b)Csc-)WIMO4YBO!e!Ub?VwG}|hvJ3cE;ZP<d!-nKnzO|P8s
z0C1%C0^)Q#gO=Y$-SY6+z_x1vp^+9E^1$_?ob;FSHyoK>h*dalIcP}J8wA(?xn|6i
z^20?mmdJ9-lu9-)=e}?A>*-(<T45(I4SHSVvIT>R!?N>*FLy0p)oK}+lSTVBHh~)T
zANMs^7A~7tI7F<ZkaXU=QIu2GbKcBxpM6d>l`E0)SLI24yWJ!-{;7Edn|J+d#N~{`
zyBQK&muPCKDceA$Ie2Q<TTruYyy}C#Pc<XolDt94ATDp*w-ZAWtX`t3G~>5Ic%KH=
zpW8jG$Hgoi*njLj0|(Sk3z~fSRQL6@sTD}C0U6Loj3sq`xT9sS7ape3nOY8z>V1Vo
z2d8gb)NI?P#>_QSs}Bh2XzxvS`}V6(`2itc88{`jfE8_2JoodGHJ6MyxQ%g`+8*H0
zm{mBgUC)BL4e|gX4#0K$exiMLj###%|E~+aV}F#bSjg|RmIkm}?2;+}zPr<dq;E8*
zO>BEX?HN#`ac=+24(Iaknn^OC-U!HYK&UmQ_1e{9z>Y0_B?sU-?p%iJ6L-`UEjK{a
z=hM1J3h$X~#o9aRHO6jBVlN=E-Kok*n|RcWKhBY`X;84iPfUC7UuidFb^H`uV@630
zlz5cMyIG72hgQAXz&>p03&0`Y1rjX{Sb2Hsk^K)f_+#;F<OzxCsU`7<aTBOridGo%
z`p)tn_co)ENzQ{2LE@=>wFW14-@fq>t#3;Wu?-Tke)Xymi~gK`o+77c9nv=sAmjxc
zKU4U{m`iKtFb53z8xR_^{#&ngv%2@Sr?Fn@_4>hL#xn5pscn1K`lCOWgUL}sKLj;R
zT%S1hfc8qk!p3@?tA_}G6tNm5fQ8aq`|baw#^hYGZ<4o)TSU)Vl)Y#0f~9|S1%zq}
zjgQl&-LOgu-V%BE-7Il@q^_d>j2tTDwqfn8M-T1m+5zQ|8o-Vwu1{kBI+_E_e`x(Q
ztDB`NmM_|lf;X{!=fbQqwL%=}FmJqq8@;m1vW7pHWvO|q(4C4aoI4KB9Q_L*q>0dw
z=$g{nE}||FTrgnuARJ<uHlj;W!!3ufPMhBoTO**Pac6Bjn#F2Jeorw7$AgGK(zx4%
z4i&WedC^PPUiUnBBi(_9AjD<GHZx^s`Qr0U>bKqq2qZupJPe$M=nK#N)iQHN!Im}E
zQaF?b={yGrS<4Tu`e8zO&TZ3xLt`T#aU-;B6V-3Qzu|a!^pdfEy@F_~?2TtYjYgR{
zH=IAV_PPTnIp)B<F?Mx~f<<5&@oR@IP=ej!UytwkT(`ly1lLg0Ot-BJ5e%n)?%B|>
zoE`ry=bADHdxnb<<Mh-zJ9?#F{}>>dg6%l6mR^lJgmb6%5~b*keEX$MuA$f<X*_Bg
zEjNlDqx<5Y1Qs?2`(a0jNbsD4{Zm%#96O_0irm&|$p?gD4%I$?VB%A=vN01^A)^3k
z4T$H;Q|ou{Yu8PKOai1GAg{FiV$1Foy?@srv3jr&d8sX9W8NzOp;0+8*KwrNRqV7#
z>?dA1QuKw)UQ60fyuV>{ZUt_-I5v?K9@4oQIAoPSZqo1iCBK$_4;<-jR7GxyYZ}K^
zk$-@3A#pje)be}gAYheaiQ|*Y@h7oQ{+~O=eBmL-yf@b!*h)J-2?vV3S3=fze)hn1
z!!I8I2+d2NSaD{0q`bg!EB;~yzrViNXnwWFi&(FPpLi71$oK!Rd-Jm+jt>10)JS{t
zu#?Phvr}k$L*sol*K9gUYZ7D+P)_s;2lK`e+Gp<))Ow!U@aDGE+!8>@e?wn53<&8^
zjS*S5ZLhhEA`9f<1Couc;WVCJo8Is5Gj}y6n<yjO33LZIMYce29Qx7tuLpdVF?cq`
zh~>_nt49ehV0*nmyY5_h@*1*8JOo?r1%z~GMy+d}AGCPION^6ABU7xbNz^dPmO7(_
z-MOw+ztIyOA25({*iZB;p@6ff($b(^@7sF)qqEpk!aAB*LlXDkxIPj~G&n{`XY<I6
z({&zR^(b?I7BcD!iRaFfK<#qKpw{4f%6-?IxIwcA@uN~?V*df0mcW_w&ZbSyHkmUu
zoW%7>Y>}#BcNU^0nt=m#uX}3B3R#cD7Adi%NGyZ@TWgtE58}oKxlI$x?f;gyFUN|}
zdE4OH^S^I<UvJVXv^82gdjFfY^NJvWAWo>rUGN$t+J8$;IR*Ny&|-08c0AG!vkAQ}
zsB`|72^~KBg!LL00jJecgbmSlr_<(i04#R_hh}=I&rhGbZR)3&04Iw~MHXg<!n#~`
zu1)XtZ+!L$Ah0_WtQikTL*NWpdH$<IcYj53K0v6W&XABAt3GXUx5Y=Es<cQ?0n!9G
zv;I2fFWEkdEG)&ZVJT+dPyyMh?_Ykf!Ja)eDPBd^63oT*Y8dhuaM}Rp$So794;ub7
zt<S*;A##twQ@<3Dddqg~=w4$!SxZ<%QUt6N+k;kT;L#?dY^&Ei(-x3Ss%fSr*CC{H
zXUhD8eNHbR4kXucX4M1%Zw_T#2+Q@BLt}Gpo00PkdN7YAu;eEZ{YwQ0|Gc(${>Gtw
zX9FT*-m$H~<$zk8HkEUX^Pom!$>Vo>um1IqZaau;5%-TPQ9k>U*h}*(4lJtS<XYF0
zBT7~mh=>f=r)QDSgLkaemp1rh6O9<M6$Su8HooZ4rdcaiEYr=+o&bb+bJbfLdZXVC
ziXTYdGLGEjTr+VrBEilCNT<xDg#6IeJ9^&t@Tk=TsT`t)!6fl|eO&K}{rJi7Uy17v
z`~39ntvfEhjCY#jv`TiI_4=8}OL}$`zoesIec~LGR=DsLSyPOfKLJ9KtZyH`>A9Eo
z45nz2oFT{d;J=VJ9eHEDnrodxXFOi3-4;+RIiprR)pqGj@W%cDytL@kH-ON93VmA+
zT&mB<Ie~q@9+-DRLg1Ms#z_qMXQ|MG|K@L4aP{QXw2D9r!la{K>>PnM&i!o3x0$#8
zc##HiDA>6YQY;V6+CTT-XVPiMfQ;ECIL89s-bFdoPhUNCdQryilUslzH6(FsC)#zC
zi=891f{N4ST~=go-eGwi)JQtuI<bcA00(5nUSC*t$A`o7DHe_MVT|MSb42s|3d?}3
zdLs@3B70-CGO@?(ABz?@wXLf@D>daXs9Xgqv8}D{cZs(CsVP^2N-A*Tj<h^xC6)nE
zD+=Mf>%!enO{o7nMe3=~K|`j2D(UD=dp14&?fT2#0EFU}(9uM4%gmh(oDRV0KWF8^
zLp$&Pk#X3AjOAL5ILFphwPJDWlTC5*Sh=Y<iK!*#AR5v*<sn#Nnv?yA-#Yl6IOqL4
zYi(%#T(y)h@rHcl#2OOx;))|@AXu^K#jR@`k5<=OJF$+U+wrKWo>fGgLh4)ed|R7U
zTb88&3o#q{8+pT$uvcllE3h5hV{_da^gBJp`K>dx!<TvC!<W&gXbPR4G>W`-dh@`+
z4trDnv9Xp|sa>>pW$K%sT`_q-p6fyea}KV4=8E~V8h?vt>U%%FTD#FW_jiAt#xwZ<
zM~7|uPwByn%Yzi|!ap1SYP{4x@3F?9pHA-@99rDtM9Xn&f{2Lu$1DC(pS7MktZ3kw
zoQ`6In3k9OQA$Pqb30@WbLe6r{DV6*aE>%H(J@kS>an%FYpTHKvQ?J*oy8@=baIXg
zgocy`(rpf#57M#PLP4+g7JD$X2cOMeW-C?-2odtbItON4{>t=HJX>*qG6o=s7X&MP
zi1GQIzMxe&)9K>J>T`v#`z{WggP(qiMriy>9J|+3<Se$T`@$k9Sw(>=OwyNc1<Z=L
zhrLYWC=l|)b#XZg(Z(ggpfAupJ>9PqLu37wX&#@uG?3=?7pDv4bgN8QVS%xLmliCZ
zP+)WWe131KVh;k*ZS(mcnu1cl(^0IHD=t@hz#H=034n-{L$Qn6LIOdozjA!fs&QlU
zJ8f28ezjG23yG$9!o1S26e)hiV^_qw6Y62ZbQdk=wiP?=R**xv6P#{LoQwQ6w_;Ek
zT`tr}_hhAow=Ala0k*z8pz9y47&2ksx|&chkPb;WQeNPRoI+!sqGbXy(XXsL$e7U4
z%NaEEkBrYPZXlb8#svY<%BTX3^2Sx*qo<65BdEZj(ZvjdkFhcir+`JlOk*rM77G;m
zvGV>Xll+m22+YVAR`x5*XoS_8@WT)2MYMWi%x`oTAqsSYSl4S<TA3^^GNueRXe5S*
z$zZP_x#Gr5#O>rD5$^C1CFvKa=#{%z@mS+ngdoMKRDc1adQuTMC^_Pp`W;QsqKfw`
z0k3PkV#V5FlBMV{xOQQDXur8-(DSRSIw<L$nAf~$Rs%}VYV-STl}R!h&JW_@H0yt+
zNmJ?#J|XMuKk(tz6286A>xad4geqXMoo<^8qeB4>%6eUu>5h=!7Ib<&g`px?WZG*M
z3Km)OtnkvY^*d-}cq22S^vD-hiqCT^((;M5xYB1W3^`qn$S14UN5$J*>MwYU%0UA(
zV_GR?JhDZif~UwA=-;${W!yb9Q2<|i050uwF~*G+D=4TErcqY3hk;gT4MdpX*0LgE
zVm@wY?F?k?K~sbR%;>%8ffA?NN+|<AqH=;>7z-*-XRS#PQMtH%k|)a9BPdh*g1od~
z+;qGrA}yUPq4sQ02ImJ+{)HVwbjqa3`2068_?I!v?58+S4-}CA#|WiRDa568&W-&q
z#SNF3s?G^3t<{)~k9_c-*~A3^+@xk>aCrdPkyq>=H<1Ev96)aTAGQ%EFu8eY?t~5p
zuhBr@A`@^$f*lL)VM>LMJU(&<>EKc!yuA`i_-#&4p|@O2>iA#=FXWY%R3hNUORZLa
z$m1cuQ_>cc)F<|bE3HLd_=-XGr5l&dDt`5e@U^Fa$L0%^c*A*dgi6iGduyo_F1J8|
zmrI2Q5g<q(j~M{D`sju@o<ExQ;HPCUzgc8gIho%xi|2AOCuwL2eCA4?KS=Hi{b(?a
zn~*bHUJ{aJzNB!4Y-nH>@(ozsUPs8KSY0@v?<d_O%EtDQa;W4;?3vuqxRtjgND`;B
zCOEKcRosP&!=X3~+Ff1v1vNFvZiAT~%Y}BJ$rSXHEF-#)&uRDCy)G}#F|*f9P6f6J
z888u%4<sX=lNvy^GKr%w1Hh$!WuF#@p404xyogMoA`<8bbh(10AdjdUR7K_hzD&Wa
z&{1fjP@n>B&I+r~XYZ1uz418wUZ(@@hCAN7I5{hH?{K)Q-030Y*q8czMVQ?c2DlVm
zM)j>er_1RHRYY(Text(_@0_;mtT5B!mCNh(6vt$AJAHvJIf^SPbEG5$0lza~A0I;?
zklih#A_`m2wMPlYR!_dv=kxj$Pi#i@tv+WU<nacq`Zo}Cc2<<A#k&YOh*v-~(3Nma
z!kM8q;j~V1lBYpDgo)5Ym8h^Hg~{;K1=0!24OGJE3#6fI4^YuPRgsQbE0t1J>ZK_Y
zSkfLYkR!dGYILf?kLWE>Gmr_VFOVC7$9*eIg`cWKNA}z>CHY(>T5K7@l=!JibX3C=
zCZ)cp5;bYu!o=irm1xQSDw?1Q{Z$~Unyq`P5;vd|t`*W3NJBS{fQs&^igeUksg(Hn
z0%^&SQFIXPp=wlAhV;Yj1yZufab7T_d#WNGl_ix@Rb-^YMZ4*qE|e$Lt05|CT1Ufy
z_%+V}#T7sXgPO<yG9rN~JKe{@E|dgGfW9RPB0;)(z>kQ8i7{5l${iSQj{-+1Tog>-
z#fm*411L5$x}v~3o~(+k&=~~|)3$;#!Apt~<{;{EvxvH}DTz}xQ3P8oo8Mm2C5MWN
zTZn466TyAna>Y+REM_i=@`zC+7OHi`sG>FJCl2pwv!L%pp@~}IeL_wMMj|s%x`Z?d
zPt!%MEPAg~&8m=wXyQ@E>nah}Nk}8Bds!u-k!_;UjeK7v(wZJ<WVLryA}N|DtauvT
zD8T<fJWBJUi--dM4+ZJEV00lm(Em_ClpTmJBnn)mf}+fkRzwt_O2kE*!j5y_7UobZ
zAs+O9ECwAjaVcS7l?sU-8?<^vL#jkREDUJ~HS*Dr|CxLoqb7#h|JAH96^(J#unFRt
zkC40}7CI>KX~5BFM?<P46kWsd1Wh_E5wEL6Snu{|JnP>kN0x7h0s;O_D$1@zMk|3E
z^#&0)3P>W_WzY;9iUltJf>raiPB#U?-2w23L&YZ4amOVx<NsK?!X{O-b)twMG7veK
zti`_#s-a>=gt9>);yEcwx_~<Hbx%nxWbhSJz~f((m&Br|3~D2W4m|unX)Xl@aj0UM
zEzGD=QsehjpbX_FRjP_FRs(=75*LIk))jy&5*jWRMi3LVmg7zY#c$Bm5&1wT;+e^r
zX{A~Xu?j*Y#KKB=A;6$?Y^!ksgMN7VkwuOGzv8DwSF7Upd*RGu3z0|~P?C3!ftXAs
zrC{pqW<XPu;KO`PPRA3oALfwzF~{W%c#WzcC`7$s-p#1QS&#yyIB!8s?v|i~Xk~@?
zGhi;92gJf@Om@wMA}@C%JaNriQcXZTj;?72nwo^EH7|`a)5XsckCNche1{9+@milm
z<TN;?6J*B5U0zR3^%ECWqkGVzn=zJdnGu+}Ctku~Y+4#q_aPdzjJ9!&Sl4#>@%IT#
zxZq9Fghn4eKy9(+N*KH#%s0D<oq7hP>o@d~2y|E&=x7HO=!t#yya>r>3#=ZcBAAw8
zL>9Ny5jp%oAd)SE{J2*S+3|nmmZ1}a+;k5hveOU7Ou5O6R?)CDYcDZCR5$PgSxusr
zq+iCZtzO{=JT=MEVQJ$lq}U1OG+qIfpR)h~nbNdc?g+)QqX!#9{n#TB#0s|8U!dYp
z27^jP<f8(R9n|GQq5)!}f+Y<w6T=hel9m}uEB@9|qAI@w61k@o{f+)5J)?du7Q3lc
zGNhixC?4szO3P$<RL!O@oxeR|QU|`q97z0Y72h!-6l_kiVK0~~KpO$9^i&dbyKuif
z_N8Ja+ZymVX-5-D9ouWY6_r+q(G%oW(7(W*1D`iY*T>mhRy)oTd$Ie_rMU6N>cP%a
zzrS25v|?f0>kd@93%xEY4g5iGsJH}MVCk4cdA8k(i|H_^f&@NwO9)N}h<QEO<q^O@
z8z?Wa1<Q-W%*jVOhd_2lKB6)p!-cBbue?UCMQmn>DfT4~xMo&VV*xa@2P>Rl^G!>!
z^(7)PLclf`8s>~umToKrHvJ^UxO&3}aMUD^$L6Cuw}{#VTCLSLY>v#hm6B4GPNSl}
zL6?%<A4btL9-GV!x72BwKuUW+XO|m<@_V+XnM_ve9<9me$Ozb=<JecHs(PXg-@0s|
ztjB`1%-#MN6{ng;t9?@KrSCW(qJIRw)HO0IriPsFk0cT<2d-$K9cf*8j1<pwUxI<f
z)iQ-C5QdJ70kX~x09*Hj)}|}`jWwKaEG0a;xfBJO_X+fA+8<9dSv84PGasFGrVFUL
zC+L&8V<m251)@lx_mZX<*Nx05-NFehHHm&?zH?FB2@5Qd;M!r6p>bhmmK)^Evaly?
zR;idF1B7GVv2kOLd6=;l;%J_M3Tc@@OnU$o^DqUG)sJA39sMij#%z8acf4d`amLZ4
z%wc#a29<D{F<HiN3(>O`2OaNFY;Ll&V&A)gptMY&sXegO!X=c(8p8P<g({|_5baG@
zrJA5c@d@;(H>@`7d^r@HKnmB$pdOJKK{E0MQ#9jCy+;<<Y7#x!JO&nam8e+NZA!{o
zt9MV62;?=?XijMd3Ty$JJ2b&oR_Y@t{2grFGY~=C{DQK;MWf~k|I_6U;czRW00kf%
z#OyU7O0c=?k#B<DGQ~qaSLADE#VXESMMA_otIbvH^*e(lZlm3WCYX}-7>XDL<Q7dM
zVMJ6cTn$Mx{LHk>CPk5a>gygMUCAhM$7h;!Xw-7n62;|%znV1DcC?0C0FvA#&1`9c
zGKq|y2UboqT45ytb~sHt<;@Qp@wXF!#=lnF?It8*Q1y5x^FScpYY2iq&`3rme9F&_
zsF{@m#OkhBm)GW?DFTlFsjtW_lS*6W@s@jN)<ISstwMvU3<;=3(q-xXFe;`jG*wk~
zUMtug@;HN)Dx=H-W_Q`}#d$Wz(>rZmC$4_sXWs8@6}kAnD{BV%WrDKt99!hk#3L@g
zC4pe)B9@JUsJL4)hU19{+V~^@YQP5~`SgtT&abFxf$z7g&p62<OB2U0t#rn-B!nq^
zQGibjh==kL>@0S`F_BxQoo=7kkK=|>P)v*cm2xw8X#f$@0Bn%kX7_v15&@sB+=HW^
zHlHF7DB@5JF)!;Bu%o49db~5>q~^e#jRCqW2eAbH&I9g&C~{)s1H2=Dr7&@Hb00Mu
zIZW=5AOGR5#S&3^&{l}d;xr^~yRnwTWO+kDY>M_`dRr+jZ%D%=wODaGJviEfsEfxI
z#F-wNenRQ|iab{XW(>4j%Y;VL9x%Fe6aFk_@2(I+NUlJ+*YB{F<5VBbTt!riD~Kx)
z6%UMu;`A646rB~tMZZG#F+X2O7cK&qes~BpvlSY%z|tO)8a}nU16O;%kZtY|houG7
zaGEjAd>45!F7RXuyvit`fqbJHAJ|cEP`0_l5Y{E&htoWjWuKC7rm{luZ61nl7_bwS
z6Xc@afF1nHt%vI?Z8#9@K&T5^3_E}eY3T%j0eLMGC~FUp6v@iiH;gQfIEyGBjG4#C
z_5BYN^p9|p=!+=EJS5f0K{%;=%&}RmF(D#*1DZ0$-Z?uMc!6LtK@B9XWfCMLMp9$H
z&bkq@X6usDY;i>wA@Z%+@DR+`B6Ow|h`J}9cAK@1ywV$(GNrl9@;Ejvh0z}bhb@Xm
zo|7&Y=;@wV{$`H9t~g-po{|b5sFyoa!SbGGttJL-Ew6qSXmklQTL9*@(hFyU4)ceM
zCb_y?AfkKX1~;p8^f(C;(XViHNJdZS`e-qn8dONjM6|*f+yrJFhqB{-YKe#xgki3L
zbl){l=m(|XN+B``+?!29cDh`kpnKvefhoI@J_oTK`G(ulY+@m=$OpDe@z`vR#dkh1
z7N=mD<kk*a{kBn1+(>P-OiV(>;2v+LG~zN{#=}UBB`;c1VkB|QzBEu_pdfLaHzvg{
ztKOwUW15E%!X<)6IIY<&aYqij+8h|yoNjXt+11oo<41G`$rCPLQ0yTyA<H~WMW#_L
zDJ?@5Vm)9c68oBamRXbOoNJKLJ!v7eK#5Xl!<r7w8n6k<fVrrgAQ<(AHJDja0qnyk
zL6Y<72=X&`Mzb2SxrYq^vYO=XXV!@k^mUbyOz0P~lyQ3Ux-cieC&2=NkdNju=CPN^
zj8uyVOo-ZCpVceifvqN!YG56|K-E2I>Lw=t@Zew@#1dWni)$kCkz_b%An~|qS*GGO
zt=<{5tClHDh%neAHH+cnD=Ac!(($xlKsSM@W?jq|u|z1W92?!Z-kSkqiIGrdVj%lq
zW~wN7;Yn?nNl=aV8iTYv2X4TtxX2$AL;@{pjuSh-j^coCS~Qy<#hbZ<4$t6|Vm*pL
zRA2z4qTVFsUkjo#^Z*)sX8|T7_=FGXNEmFgJQa}-WO!`~WGGT)Jf(=L6^lbB7Fv!p
zArKQz0lF4jfoO59XOc9CZ5{XKD_v?V2RC?;Qc`5jeBY3YBpAmY5H&34x5LazyCwoY
zR&4zZlu$f{4wfUnLn8_TFGj9=oZKiO&Rfl<Q=CkGLcustCNqi3(zW$$<;^;=`aK1p
zsY%WD8FW^?41lYD1n+X>7m+A=wSanqPLbd1HXy9e2EzKsq(+E{GC?5XS?hNQIJ*#5
zLklLp+AN$0WWs4~88fNU^blXr0G>?I=7;1}7K0Go<i>$ZDqHtR(;eA!Rb7?Wp^4$b
zpgM8$gM0)&TmB^bWNhRW)I=E5N6Kd&(vmFc2uZh@W6PkXf7Awqc<!$F#DdZGHAzeF
zdut`=-=c}l!~O}P<)D}VLc=>O2rMR54nbT@D(E{&1}zqu5u_tuur`Y*8f|jm?}Zpp
z6B$57Bv4Cpjf}TW01EM5(?F^Adv72}>kR??&w!z@ppZ>3H$tWEVs=52Y|yw97;-|*
zf-=z)JpNRQ$#4{JF$KKGdkulmrwvUAhJ~Ol*yv@Uy-hAYBPFj}5z<l9y=61TuBprE
z5(dVgrNVhYESyftNu+@YNIV`PI%^&Wm5s_P4sw|b_;KDsyz;IWzR-&g^_p(<3Db$V
zDpOxT1c2uJ=HcJS+c-fi@&%8l9OzKJRa!>FdJj#v#64yT-{{GkD8y^UUm7QqcIBr*
zTWOiViS__vkt_SV?xl(EsNTi{N@^0dF^^S6l@Q4YJD?gj233hC1JH{18nF<$IS$*J
zSRo9LQfQe#PkXS6FT|L1S@oMUKvk1Tc?IHzE?~*4x@aGsnF}q}0e~YCG_1n3nPHIv
zMracV#JodGVuVhHl=Quc0yiF*kR6%4Qyf9&kLDOOq?&~!CUc`E=3xSZ4g*qg^?-&T
zGs7>)M%=p#HxWzVASx0R0FxUC<7B2qzd)S#dM6?dScKN(j_^2eCaZEqJA?5_t6X()
zotMq!S7=)I$fZqp1_DopIw~7eqORT?9U%7=At8KZUF<lxup;&HKxz6%T|pN{lUY_-
zPmYSd0)(ln58Gz5Av(Nl3FL4Z^GSInr2+p@E0n;Gdc)<Lb-{2;06(0D#i4&G5I}(e
z92J3yPD4)&>YwRMncIm#sM#S3EfZH##b7_o^k{&3NCT+h0~<U}nAMD>LB5|zuuIBy
z!s?96>PMW`$UW9Fkzm3Yyz!As#=4S-teR1Z%m`|cFL;TIDPqmi6T*ddMjIf)c|a$e
z<^Z&*qVcDlfX2HpvM^+uN5FI|kwDZv@rY<@33a+dx&ji=B1)lfc_>7$PuQ{I!2ulu
zm5-BK5S6IV3%a)&dW$2Jv{wZaamDaT3>}N4-jW(p+<DCAs`^rZs(<7va+~n#qm}zW
z&=xQ{mlKr}6r<iSQL|+&>c!)zBJ>Lkz7WzlmL@+^MO6@=s{&dQTLU93Jgq&YM~p%s
z7xA2&L5(xINXJ?P_dqq`Sx2=PyM3??3cICZIpaxxocEMd3_lnU;lpaHTiAQ)E3s8&
zBoy?(s774JrICIo;2Wfv|KzBI#Q?N$8ZBzRpC-Yl1VBel%5%|gMSz%YT&3en>emSH
zA%fA_EW8~4f3EmHiPZe?Urf26hC=awu}zZuk!yn7V20R6Fc`jAwa`|mxTx#VWvB(>
ziMG%ogo;%X(c-$>&xxkZjt|xaoP|!Da=~#cpV2+taq~;wV(5rzBMZp1m32IUT*US4
zNp!vFdV+*jX<8+dn|ctq<vqFqDH*YMRy($3b<)R^oJCH<QO6t^<r|PDhVUUPlc`Ub
zR}c%Q*-0=P+a!Nd34ktBLJ+)(n8s?{wQHlzjuL9nL~(Kx)mR#6aXxxxY+oZZ7K9?6
zt@t*X3^wqZBYPDFyy+GuK}z?8LD_uPqZOedb9tH<Vo)*;L-5zeSQH{@#f;H>PNZo!
z6&m>^0<*RiA0-2xNbtDKLm*8L@n^hn5jGki5KhAun#ay!Y?AuD6;M)>2%E|CZUr`n
zw@~5D|9lJpVa7DE1=moX)cHV9e8P-9R2GNRLjY;+#0rjhWk5`y4J7rC8ez;ZtfrK-
zOrWDZuuov-bVqOw^oZxA`tpSuT=N^rwYC65+5>BWS$!h6HY5|(j@ATGCaf?Hhd=<*
z>6YWEJWw6^WUSFK9|l4J>bYzRpRtt{1hayH3hbfJ!N4y@=CFgKJCvVkq*HvjpU9vP
zjV6p9zAeWAUfjJ+np%oI=kUR?nH$H+P-Lzc{&`(We<oYyL|1+W?h3%>ZOvUU;73;o
z*E(DzG+eHK7+}i}(E(GYxL=4kHQn{c%p2gl!kIuqdti%XHWv!Z38>+8Qay@4n+7cY
zg#yV5j#L?(BG6LFDh`l{AmYTBFUb=i(oqs8#pQ}CPJP=j$>q<H(C0n`P#)btE359Z
zu9-8ncGMJ=FOru_^MYHxRA0D@e6Z9&>PBQxi&)w`l<^2b8`62UYeWO~FhCywFg$mV
z9D(@kgz2;SGc!10o<S^}2Bvv5mn2a{w=IeUD;G~-qgzUAB2Jk#KmcD31XcRc1`_d6
zOwqNoateH2SD6iaYmDaF>Nn{?OHDF8Gl__=+yP4@xVxD-4H`qh16wQ%IT6V+3pvH8
zI@LZ}{lNyEfi?E~;`AfXiu0EHwOOU)Cn-TerZ@^?#)IgzK$5+e&a9Y~6k!Z55LI;W
ls88F0hW<-;+!IWh&=z|5qj{jg-(AsGclbkm{~!ME{{a|7UhV(@

literal 0
HcmV?d00001

diff --git a/package.json b/package.json
index c679c1f44..ee6d68c5a 100644
--- a/package.json
+++ b/package.json
@@ -1,78 +1,82 @@
 {
-  "name": "svelvet",
-  "version": "11.0.0",
-  "description": "A lightweight Svelte component library for building dynamic, node-based user interfaces",
-  "keywords": [
-    "svelte",
-    "svelvet",
-    "typescript"
-  ],
-  "authors": "Aaron, Abhi, Alexander, Ali, Andrew, Anu, Brian, Britta, Christopher, Damian, David, Dillon, Emma, Ernesto, Henry, Horacio, Ian, Jeffrey, Jen, Jeremy, John, Johnny, Justin, Mauricio, Michael, Rachel, Rathna, Ruxin, Ryan, Sam, Samee, Spencer, Taylor, Thomas, Timmy, Tony, Von, Walter, Wesley, Isaac, Julian, Mayson, Solomon",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/open-source-labs/Svelvet/issues"
-  },
-  "homepage": "https://github.com/open-source-labs/Svelvet",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/open-source-labs/Svelvet.git"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "yarn format && yarn lint && yarn test && yarn test:unit && npm run package",
-    "test": "playwright test",
-    "test:unit": "vitest run --environment jsdom",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
-    "prepare": "husky install"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist"
-  ],
-  "devDependencies": {
-    "@playwright/test": "^1.42.0",
-    "@sveltejs/adapter-auto": "^2.2.1",
-    "@sveltejs/kit": "^2.6.0",
-    "@sveltejs/package": "^2.2.1",
-    "@testing-library/svelte": "^5.1.2",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
-    "axe-playwright": "^3.1.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.40.0",
-    "husky": "^8.0.3",
-    "jest-dom": "^6.1.0",
-    "jsdom": "^22.1.0",
-    "prettier": "^3.2.0",
-    "prettier-plugin-svelte": "^3.1.0",
-    "publint": "^0.1.18",
-    "svelte-check": "^3.7.0",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.2",
-    "vite": "^5.2.2",
-    "vitest": "^0.35.0"
-  },
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "main": "svelte.config.js",
-  "directories": {
-    "test": "tests"
-  },
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  }
+	"name": "svelvet",
+	"version": "11.0.0",
+	"description": "A lightweight Svelte component library for building dynamic, node-based user interfaces",
+	"keywords": [
+		"svelte",
+		"svelvet",
+		"typescript"
+	],
+	"authors": "Aaron, Abhi, Alexander, Ali, Andrew, Anu, Brian, Britta, Christopher, Damian, David, Dillon, Emma, Ernesto, Henry, Horacio, Ian, Jeffrey, Jen, Jeremy, John, Johnny, Justin, Mauricio, Michael, Rachel, Rathna, Ruxin, Ryan, Sam, Samee, Spencer, Taylor, Thomas, Timmy, Tony, Von, Walter, Wesley, Isaac, Julian, Mayson, Solomon",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/open-source-labs/Svelvet/issues"
+	},
+	"homepage": "https://github.com/open-source-labs/Svelvet",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/open-source-labs/Svelvet.git"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "yarn format && yarn lint && yarn test && yarn test:unit && npm run package",
+		"test": "playwright test",
+		"test:unit": "vitest run --environment jsdom",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"prepare": "husky install"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"files": [
+		"dist"
+	],
+	"dependencies": {
+		"surrealdb.js": "^1.0.0",
+		"svelte": "^5.19.3"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.50.0",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/kit": "^2.16.1",
+		"@sveltejs/package": "^2.3.9",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/svelte": "^5.2.6",
+		"@typescript-eslint/eslint-plugin": "^8.21.0",
+		"@typescript-eslint/parser": "^8.21.0",
+		"axe-playwright": "^2.0.3",
+		"eslint": "^9.19.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^2.46.1",
+		"jsdom": "^26.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"publint": "^0.3.2",
+		"svelte-check": "^4.1.4",
+		"tslib": "^2.8.1",
+		"typescript": "^5.7.3",
+		"vite": "^6.0.11",
+		"vitest": "^3.0.4",
+		"husky": "^9.1.7"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"main": "svelte.config.js",
+	"directories": {
+		"test": "tests"
+	},
+	"peerDependencies": {
+		"svelte": "^5.19.3"
+	}
 }
diff --git a/src/lib/db/SurrealConnection.ts b/src/lib/db/SurrealConnection.ts
new file mode 100644
index 000000000..fcd75591a
--- /dev/null
+++ b/src/lib/db/SurrealConnection.ts
@@ -0,0 +1,38 @@
+import { Surreal } from 'surrealdb.js';
+
+export class SurrealConnection {
+	private static instance: Surreal;
+	private static config = {
+		url: 'ws://localhost:8000',
+		user: 'root',
+		pass: 'root',
+		namespace: 'test',
+		database: 'test'
+	};
+
+	private constructor() {}
+
+	static async getInstance(): Promise<Surreal> {
+		if (!this.instance) {
+			this.instance = new Surreal();
+			try {
+				await this.instance.connect(this.config.url);
+				await this.instance.signin({
+					user: this.config.user,
+					pass: this.config.pass
+				});
+				await this.instance.use(this.config.namespace, this.config.database);
+			} catch (error) {
+				throw new Error(`Database connection failed: ${error}`);
+			}
+		}
+		return this.instance;
+	}
+
+	static async cleanup(): Promise<void> {
+		if (this.instance) {
+			await this.instance.close();
+			this.instance = undefined;
+		}
+	}
+}
diff --git a/src/lib/db/SurrealManager.ts b/src/lib/db/SurrealManager.ts
new file mode 100644
index 000000000..2a102977c
--- /dev/null
+++ b/src/lib/db/SurrealManager.ts
@@ -0,0 +1,25 @@
+import { Surreal } from 'surrealdb.js';
+
+export class SurrealManager {
+	private static instance: Surreal;
+
+	static async connect(
+		config = {
+			url: 'ws://localhost:8000',
+			namespace: 'svelvet',
+			database: 'graphs'
+		}
+	): Promise<Surreal> {
+		if (!this.instance) {
+			this.instance = new Surreal();
+			await this.instance.connect(config.url);
+			await this.instance.use(config.namespace, config.database);
+		}
+		return this.instance;
+	}
+
+	static async transaction<T>(callback: (tx: Surreal) => Promise<T>): Promise<T> {
+		const db = await this.connect();
+		return await db.transaction(callback);
+	}
+}
diff --git a/src/lib/graph/GraphPersistence.ts b/src/lib/graph/GraphPersistence.ts
new file mode 100644
index 000000000..ba885b692
--- /dev/null
+++ b/src/lib/graph/GraphPersistence.ts
@@ -0,0 +1,67 @@
+import type { SerializedNode, SerializedEdge, SaveResult } from '../types/graph-persistence';
+import { SurrealManager } from '../db/SurrealManager';
+
+export class GraphPersistence {
+	async saveGraph(
+		graphId: string,
+		nodes: SerializedNode[],
+		edges: SerializedEdge[]
+	): Promise<SaveResult> {
+		return await SurrealManager.transaction(async (tx) => {
+			const result: SaveResult = {
+				success: true,
+				graphId,
+				stats: {
+					nodes: { saved: 0, failed: [] },
+					edges: { saved: 0, failed: [] }
+				}
+			};
+
+			// Save nodes with hierarchy
+			for (const node of nodes) {
+				try {
+					await tx.query(`CREATE node:${node.id} CONTENT $data`, { data: node });
+					result.stats.nodes.saved++;
+				} catch (e) {
+					result.stats.nodes.failed.push(node.id);
+				}
+			}
+
+			// Create relationships
+			for (const edge of edges) {
+				try {
+					await tx.query(
+						`RELATE node:${edge.source}->edge:${edge.id}->node:${edge.target} 
+                         CONTENT $data`,
+						{ data: edge }
+					);
+					result.stats.edges.saved++;
+				} catch (e) {
+					result.stats.edges.failed.push(edge.id);
+				}
+			}
+
+			return result;
+		});
+	}
+
+	async loadGraph(graphId: string): Promise<{
+		nodes: SerializedNode[];
+		edges: SerializedEdge[];
+	}> {
+		const db = await SurrealManager.connect();
+
+		const nodes = await db.query<SerializedNode[]>('SELECT * FROM node WHERE graph = $graphId', {
+			graphId
+		});
+
+		const edges = await db.query<SerializedEdge[]>('SELECT * FROM edge WHERE graph = $graphId', {
+			graphId
+		});
+
+		return {
+			nodes: nodes[0],
+			edges: edges[0]
+		};
+	}
+}
diff --git a/src/lib/graph/GraphSerializer.ts b/src/lib/graph/GraphSerializer.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/types/graph-persistence.ts b/src/lib/types/graph-persistence.ts
new file mode 100644
index 000000000..602abd11e
--- /dev/null
+++ b/src/lib/types/graph-persistence.ts
@@ -0,0 +1,30 @@
+export interface SerializedNode {
+	id: string;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	type: string;
+	metadata: Record<string, unknown>;
+	parentId?: string;
+	zIndex: number;
+	style?: Record<string, string>;
+}
+
+export interface SerializedEdge {
+	id: string;
+	source: string;
+	target: string;
+	type: string;
+	metadata: Record<string, unknown>;
+}
+
+export interface SaveResult {
+	success: boolean;
+	graphId: string;
+	stats: {
+		nodes: { saved: number; failed: string[] };
+		edges: { saved: number; failed: string[] };
+	};
+	errors?: Error[];
+}
diff --git a/src/lib/types/savegraph.ts b/src/lib/types/savegraph.ts
new file mode 100644
index 000000000..68543d706
--- /dev/null
+++ b/src/lib/types/savegraph.ts
@@ -0,0 +1,31 @@
+export interface SvelvetNode {
+	id: string;
+	x: number;
+	y: number;
+	width?: number;
+	height?: number;
+	type?: string;
+	data?: Record<string, any>;
+	parentId?: string;
+}
+
+export interface SvelvetEdge {
+	id: string;
+	source: string;
+	target: string;
+	type?: string;
+	data?: Record<string, any>;
+}
+
+export interface GraphSaveResult {
+	success: boolean;
+	nodes: {
+		saved: number;
+		failed: string[];
+	};
+	edges: {
+		saved: number;
+		failed: string[];
+	};
+	errors?: Error[];
+}
diff --git a/tsconfig.json b/tsconfig.json
index 123bf732d..47e33b3cf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,4 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
 		"allowJs": true,
 		"checkJs": true,
@@ -9,10 +8,17 @@
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
-	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
+		"strict": true,
+		"lib": ["es2022", "DOM", "DOM.Iterable"],
+		"moduleResolution": "node",
+		"module": "es2022",
+		"target": "es2022",
+		"baseUrl": ".",
+		"paths": {
+			"$lib": ["src/lib"],
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+	"exclude": ["node_modules/*", "dist/*"]
 }

From dee5e3c5c06092a2d4c2cae298320b04b2b11422 Mon Sep 17 00:00:00 2001
From: jknohr <johann@nohr.com>
Date: Sat, 25 Jan 2025 22:48:43 +0700
Subject: [PATCH 21/26]  Please enter the commit message for your changes.
 Lines starting  with '' will be ignored, and an empty message aborts the
 commit.

 On branch main
 Your branch is ahead of 'origin/main' by 1 commit.
   (use "git push" to publish your local commits)

 Changes to be committed:
	deleted:    .husky/pre-commit
	modified:   bun.lockb
	deleted:    package-lock.json
	modified:   package.json
---
 .husky/pre-commit |    4 -
 bun.lockb         |  Bin 137932 -> 137573 bytes
 package-lock.json | 5633 ---------------------------------------------
 package.json      |    8 +-
 4 files changed, 3 insertions(+), 5642 deletions(-)
 delete mode 100755 .husky/pre-commit
 delete mode 100644 package-lock.json

diff --git a/.husky/pre-commit b/.husky/pre-commit
deleted file mode 100755
index fa91d70af..000000000
--- a/.husky/pre-commit
+++ /dev/null
@@ -1,4 +0,0 @@
-# !/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npm run format && npm run lint && npm run test && npm run test:unit
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index 76f1d109f6aab8605e89a1300a2af9c9f1c82e5a..3eb504638d3f2a3ed0bc251d500ba35cc9fbd8c6 100755
GIT binary patch
delta 21324
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
PnSD`}S=IBPy37Axyda8G

delta 21456
zcmeHvcX(9A_xGJm7IJ|Ap(SAx5_(M_jZLy7OK(drh7KtU2_%#hV3CkSdWnF83?PxJ
z0t$)<7!?qKFHHm#5tJ&@qzeiGf%kLn+)MKHu{^)$_r8C<?vu}+IcLt4bLPysckgcI
z@`oN@ZuM9Y-0-zKBTSv!U;6Shetz4*ZJTmNPWbfID}BB$7~S3HVNgPqiY=;}6nZ5s
zj0<SfXBg8MMadZNOdapc)M%ztQEsB5tfJ&z04)ca32Fg723iqxuP&dzurMHJ8<_GC
zz6V+cbh)k+pExFcGzJ(7zAEH1%!=X*dK=Umbc{}ymXh@~phtrxl$QN{q|<(&)Ne;n
z8a!6#!zC?~8>1>p1ytnoc-DdS=IdF2dc{*w@RxgrA7|b<r_invxP73NK{ta|0bQZX
z=jwbGXf?<aKuNDFC{5i4O6}`|QadkD(tC<wiN69$CLIGM`3_KOzh2ho<O&q1gQ-%G
zn+8gX13*c!9ViVHqSssW`qDc8D;!Mi)5oNyW{p*pfz=hoAG{sZ540{Q{&GEZ`5ic#
ze0>~mHIy7BcOwdQAjk&|1WnO-ho+$9HUO;+c`49ZpjUkqB>?n*PB(zo0RJi|4LC-Z
z_tyDHP>PVT@tMg8Af*hPkGbb2ITNx*aHm`4p6#)=v?7lYSY+x>P>QkCF<E1&g$?z@
zXQqsHWsG$xjlsjsx&ELOUKMmY3uaJ1H~B%g0N-A9Wve!zG~Q`+K@Kh8%srsdR&WT8
z+>FemAm`}u$_DT>Miqn_g;ZunYDxme_F%lTdvmYMMzZTcps*+R7rxNlJLOyx>H8C)
z)M%~FXQqcYM_XlV)@WDam?Y;u$Y~1ObXpiJ^(!=$am^w3Lj6q8a-f;1NtqdFU#pqa
zo6Nn;-fSFiXb#Bf37tUbwA9<I4wX91z>`xfpyb3#pk(0TFj=3LlI9FbN>DxnPji_c
zE}a*j;ToMdDkW3Z^%FBPGBRDM&bbk?pHNsr%gsO$$T_(_C{RG%fdU1d!zv^E3V0eY
zIV)q73zI(w&<=3IlcO^gCB!BtvIvwWn(7=+IY61C%O~hG50v^zayrKbrDQ0zz|(|%
zHF=_vJ1s^Eu7Q%*zXzo-@PtA+&}-3(f;G=g$p{*eIwnCGV3&GlA*Ury88LcHI^ybU
zogbbuIw=TSXJJcOKZCC-<()I5mE^vF7ERZ?wd`ehYJ6s<Gf5fcbd9I!?}40p-2y$D
zrZXceGbJ@cab}Fma;CeKoo!@0XU5ocCq`Wfy~@ywYAelL1fFJHr=8?;!NYAixmhSs
z$G@V2I_}(Fh9K>uAdH@v9G^N06DZ$7nx7n>5roN&a05^6PJ+^IsM}FaAbzAaUu6^c
z>X0u3rS-{5PYD{Cp(u$MkJhuhHUT7t5EN)**8!!Dc6OFjDj>r21~;Rm1s>pOJsyE4
zkG1V0EghK=<cd#ARpQe}jEzsva7IE-7LV>KX*?+P|2rrxJS|#$4qSK&9nlPTb(5jE
z3%oD*dZ08h!<7}lQ;wb3LwW)s?9511lqZq0egB?vAj8$hQe4&RPk_>r?AB?i-ip$W
zW};0SF5aY996-4m<e!k+K{xl&V<N*j-Z?rm;}LjTssd1&_(@*m5s)(v9PRG-iOwKg
z_?&538JY2k$<A?*TOePB-pH)%eliiqg3^ww2kHY_zrUQm+yKS#UjuTQ<<$Xl7Hb+x
zJ|R6m(TN3pW1uF_$-RgIO*d?iR7i8Ck8mPw7#rX_bU+JMf3Wn!ex1(&PYYFMh%{?>
zd`9LtOg7z_m60;sr3}Ud15uv`8PV5=%1ci+C`~*QRHaMINGQ+(ogXIsvLs$E=uA-Z
z%y^wHK*p^FekLecmJB&fd;u1d7HA-NiWDQnBa)=$>CX7XOymmVJ|oFFE-OA&QF=jN
z%|QbMfac<KXA;&)Q92KomMsRQkc|PQj*W>u$3`W&vB&O!Cl9qmKQ!Sf$+G?~DDAb;
zV}cUnGn~q%6e+(7IT<i2)tTj=jz(bs4Pe5KrHf=fXg$zrJfv*>s9TsT4R;KVqV9Kq
zlD$dJ@$soyP9<^7m{BR1!UvF3FaGF_;?Q%;!m?w`9^SVTZMNIn-u}?*k(o8(Mb+%=
zA&>I5vk30O`vhL-ZC4MP6s05DxN+7ol1KU2Sx@f5`#fHV_no{5?+<vCubtK5F1#o6
zLcFi#MR@;>M^(48hTMhs6}+&zT{V}26Sdx2d0Sa`9%Zq!P26R%s}E4q5;csss$peg
zd6C6#a`)iTezB}0clp`XX&zF+%=3J$>Rxcj-??S@Zf~o~;ItMm8h7C?e>+>n3;pdT
za~b~FKbBc}R1G^z;jS8Xbwe3N35RlNo>#+aJ_jz8XZzS#MIIGkXEEG`_wl?iz-~T<
zD30bk0&K7?D$veGa~Iy<=7oWF^L;q9HP5!#)Ch!{J~$?p1CDxk<E<=K_@}U@-TX6R
zpe^4~(`F9FGPT!AnJ9JCN}r)5YblRPSx1z*Xtj$_k}bYRsk0`lgGH7tl2MW^K0ryf
z`2B^fZ52i7rnPttC0Tn8CD~scT<&GtRFq_YAH0w~LP@r0i;$5m=Aa~JZ~`US)(;z0
z>LsJ3&jlr|Ka-mek8Tiao>(0>m^`L|&HN2Y{k2jP<gmV4DGw!Cdj_T6nye|JeXv%V
zhf<1G`W2;kt@IKiS;}^yB=!7|+DB-$Q&DpArwv=UqcBtxbqFv@Z=)m|xCI(h8HAG5
z`}BpZN=-$HL)#XtrWQd3+!bV3FF_iL)ph5){jIDjFAB1=Ry-=$ZXR1pj}`L<l;EWR
zoB07su{@@RO%27JFttNecw5a$;F^<$x{OMioFNvEforL?tcY9E7Fwx`QBq$=skPK?
z9_ju<T)D2IG=tczbv+ndb8SeDQluuQt`CF5RD5kFwH}WSjWu^i8tKNftJ~DKQHqA5
z!b$N0IN3q9`mzH?a<!YzDSWrDmCfLVVRrU8FAB4(zo8};?HO%M){?uz?QAkH#5=M>
zxLvK<P)?BX-QiZ&j=Li4YKAT=#drHy)%U>BRNZ+ia6c7u*iZEuNe^k`s(IjW)y7;~
zVXRMhQFFUmsj;H;fy|BP1zOpg+-0?^Cm{=itU6^A^==cyC^)zXT#F!?I?8K_#08G(
zN^5od!0FCJ7W$PJMcUP%V8lN(Fgvu)&^fH6uhqN<TnnC!6}B{$>B&UPpbiAr`NfED
z>2+G_Vt069wB6hU!^H3%(KckID4Sh<2RubcDQ%R~;K(B;o)=+Ny+Wjiu|nZiwL7?Q
z)FFRatm;&7(sxLN>{DLY!mi$h3|A7$rJ+`}AG)QvK%aaKj<Qv0&VsG#HE@*O!NIm>
za9J;K($ZJJQCxrvwX$!yE7r~`@j|?J;zhA`wE&Z7i+U|%n=gWk<S}hpctpr%(%HSi
z$?0LTY$cCsX*c&o#1GPfdm~C+cnp$n5idebf|ZggqEuarl3cR9Zjl~fY#0g2-pA_I
z82w?|xvHWl3@FVvSF6wOR`Xzkc~L7no5Q18+f6nbpVT^5U5j>PAROsqWjA?IYrEMG
z_G5GT+sys65|TJu#0%Tl)vv(Qc7&thc6VH0XyFmK{#La!IC6)!g&F6CZSCqWkdZSH
zj&O7^c7b#VoXOI;tDRl_5VCZw57MY(m;GyjZcYN%LbG-yO0<Qvan0wzh4UToLZy~c
zUP@b@9^hzp(zDC;I=NWiztE&0^=T!&E;W0AqjuOJ*iZ|>$+3t#3Xc5ap@m&d<QK9>
zTXJ<UIN5GDHXG-zPVf+9)EZuZJ>}X+58>tj!PE;J>0=A{Sk1GD<Jmzr^#DrLE5g4z
zyb2c~D6p8swFcJ>oI3@&c>y?FaAEmRD8VGmi#9+|J0ldS%?NNkv^Hexc5pN!ExgU{
zSg`h5{)<BilckwLYbiL2Lv7ot$H7qu!A@*eKYZfBaMT0F8U{{AEVWw#j(W%Zs$0#M
zz#%?EZE90Ejch`4jIgp%yr`R9JpkDt$PjBt4RtzUmi%dJo0^FdZCH2C+F02-Uew)g
zz71I`t+pxlW?!u*+Gf*uVGlby%!_*9X2}5^)F3LNtZI93G)p8x^fHGR_OzS!ICwOI
z{1K|iSy*5g5Qlw3F4asmZvls8@U@w*ql6ub$=B@qLLcs&q;oQmJ^@E=lexo;j%3hN
zu-L(2E9RCbmzu|e>%^b-u(1=ou#eqTqdR}xCsrNN-AE#^Ry_euP6k_7t%YTK2^}EG
z!S6G`kwx+Xa{?TBNn0<IM^8TKrC77GCuYjC{cP%6R6;c}6@u|HkBYOKe0%Xpak1*i
zUUCeXIzQGq#3Y<ip|><ZTN5NMS3kQt2{M`!JQ-+JPk|%<m(e0RsE?eJ7Q;xVuKsql
zG^!~gOmyip+rf3<+5K(m43sDivCH6`3*e9raw}+@Kg^WzMvm(Xj%>p|j<T}ZJZhkw
z?c%P1cC}2Lyr3bz`XRN0ld(q&ITIZI;1Py=a*n$O+0CE#Q<Nb*dyvf>hL3T5w9-tJ
z+H0jFD7Dn0-*bSpTjk8pYU(h6uK8-dF4V4+>OF9BvopKZ95fIO_|r(6c?3$~l$6!C
zP$CUn8)3v9aI{=77hAstBAp^bUN^^sBLlINSo96xXwyIw%X|$SG8)xct>);#_>jzZ
z^s%XPQ6jmCrf5C{4l5mDGx-kTlj395p+gky5{^I&u&S?tquhdA9AGsc0QZt+agCuy
z=@3diG+Fgwx<AxmDA6Rf49=EuS0Zi~;$<M=VuD+^jl2jlB|%Y;q%dLh&f0KSlAV3X
z3zO`sPonHW+Z?PHk8;}C8t!r;_oIf|SU5$IJ;^YcRxTS{3#~tLRUx=2a9&y#|K&v;
z<+5O>beznYso;?Rym3>85>f;rCJ$Li9WJ$GE_(@_-0qa2R)V9k<c2*1j<&BhUvrHS
z*o)fj$yk)67R~lOaFqXKf9Jqap3(A?DK?pZk`l`{@S+sE8l57|f+Fr)CxX-NTg@M%
z)Pg_tx2X?Mk}f7wgGU;Pb$1`DIsqIRj?IS)Xz(bx`4JUJ1zW(OnkI^N{;7tWDb>Y+
z)1%4Hs=g1d*^9|O1SdBZ+L@cCL6ZWWC307q9XA+-Y52SaDei4?8HpS%!$xk=(cq|G
zh35rX)z#o^FSxVdkcp+^O!dd`=rPf%ucCeaSIYB^lLGkONk06{n2Jb5iqeSQ@G40e
z_{N%4QWMHS08!ilYA>R00KBigh?e0oFMIPrFMH5%v~jc-QR)#}L^1KSvEDf(#@cGH
zl9aR%iP|{07-}z~7GM})1`tm4h)Kx==tY#~F@YGo{*2Oe7HG8^)y6L=(5gx({6FT&
zM7;ht16Ji}+1`9|w#WZ1_>%A6*5>u!)QuNp%N5&zTGDz~*CI-u-vm%(d;ri2Z3Reg
z8{iIn0+4(cK(D`})X#2B>%XX6u|KKMRR2z18X5-xn$ST_TT<c=>GH$6oG4BBsLmJD
z+S0<~dIiyHz*U_mYT`RGylax+XI)B^hPk2Bn<VE?r+D)^In7#8%{`Lf^=FhkabK&I
zl=xo(YWEx9#`AN$bBKEa(5oaR?WX|I=K%TN9m=F{rZ=6Exhi<lE33=@jC!Kp2la4-
zVgoG&3KLp`Xa%i<HmIOJ+S1!UP*Q1!HxnP66~O1^R%}QuI_fP;QWA9{O;86hd}FS+
z7OvfNZK71{jyDrOn-!piOE0~aC>49_JW&eUmvo*e731(mWAxYg0VKqWDCrN@<wJCN
zNlNX8>Gko99^vAJg4S_@P80QpMBRD8c)5DXy7bQ|bvsh8FG)$B3OQA!>Geca@Z)u!
zC>1B@JW*=r(s|GvO<|HQC`rlQY+YWGQU_Yh>6G|9U9Tji@R$iXRn5X1>CFM9e)CDF
zQ7jXcU&R~6;cI$DNlFbDK~7b#<Bd9g1C-<iB>V%V0aogAqEuX^^Cc;@UlXoZtoaj4
zd1C|Q<kBsm)L<*=@vakP^nDDDw$%>3c9&M0J<+=%6~3UiKTs0w!5j6pk0?JoH9&Lc
zL0y|D)gA^d2l^c-nS55Kmq6)7lw5Wd)C2U6E-y*R6~E~6l9WXEbvdYsGRZV=zI>X8
zHkF5ZRY^+Dcm_F5jowIwY0TeKQgPGuh>|HPC{5iHl&UJ|)XSvDV<nQ}Rg#tm9|$?w
z+5nU~Xrk*8r3nRrlFiL@`Tv~OMr*wT>LXO|m}LLnKb5#!kyqmq0`k!R>UQRT*1nB4
z-v4UAfA62*!`;%4e@kiW|9k)R@BP!i_fPuu@8A0;x{spk<G=S$bRYHa{nLy4EqW}2
z7u|S~EOg7#>5FVFuau2CbTWTl^@~5<w0`yJ*`DoVj}Pit=yd$pG-1=Z6`Sf#DfLe4
zDbB1Dbt?BekQX2S!w~NVj|!6fAAHrT!~AK1cbf6E-99{Mw}ZXUUAyCWgD*V!S#X<q
z!!P3aDRB8;IM^0`8r-Zso;+rcgKg!r_r&qYy`KCQxa~Y@Zydh{u3)c&74qxgmhAK7
zUH3WgTzu)iINtF;p8P4e9lX<j;`k$Q8~@|LbL}E<>-Kx{!TTL-H($R$j`us@$vqD^
z*dE^hKpgit=*f40+sD;|ar|R&X$Ku_KQ9EAe8`jgA9ApRJmpXv_c`pzkAOSOeGkX+
z1K_d`JJ=C^5ZuHsJ$cZV4tA8gzJz^8U>~^Syx|ep2QL4JgMGtKgPZjg?EA`ruP|qS
z1^bS|K5*ahsH3nCT)|NXJI$|yTXGEc9docB_|jvr?>OuOcb0cL4*S4uJnmrUc@emE
zU&Fqy9qb}s|26FU2KIg9V3&CRZ(!dE*az-1S5Lq`aA_wT>?$t=m;5d4`_{p(^OSF4
z-$~d9?gsZg3H!ihpLDQW{2;iA-@(4`9QeA}^&RXx1^d9=;|)*2K5+S`9PB<n4Q|$H
z*mv52ud8RDhJD||K5+Oc&-btoT*3Dae7|}f+>#$)-wzJ<gfIO8_ML%!;GXhMXJ8+=
zjb|L}IWGdY?kwy(>tKwpKMVWL!M<}2=EnP<gMH^=A2>5t&%-`&Y3CiRG%o~~d;#`d
za4?mpT!4KSVIR1%-1lM}E62y--IE`@2<v`?bw4^-1@8J0)?I>i;JkRlORx@H{v`*i
z%uj=x^%Jc7$$=kR%>D`1U50hwym{1RSO>1)vV-~Z>)@7Lfpu3L%)*ymfpu459XNm9
z=_;%PxACfj1@Izp>#o7NYYtYEufGQCuEV<P4py7@zYgnuhIQcTa`k6e2QKYr2dmEu
z!6n~-bvGRNNmI%VSa%cFfosftZ({YpW#4qLAbt?s#9OfMmV-6ru3ND0HtYiz!W-U(
zec<wMJ6IS$4Q|#Q*muW)A6?D91N-j6K5$kZbr<%5E4b@mQT#f%CHG+8JqNS#rT1Xp
zFR%|>4Da*{>;t#)7YDQRB5>>O!@m0t{4{0#ec1N^_C0XmdyW1NVBfE>4_rI0{tElR
zrTyw)9e5$Q<lkW5Zw`D<mhv0ydkFi$Ik@jb*at5Ap@Vhh2f<Bz1p6L2@DncABiL62
z`@r?&4U1qOxcnjqem8#_+^om2@3DjR<+C5dz9+B`TpW*j0{g%fJaMr8{5rTLzr()Y
z9c&<9`aA4<3j4qf=AE9xK5!eKI@nNN1a93k*!RrA;`#b#u<tqSd+uO~TlzoGVC>e`
zBdj*_yn$yBWfc4l7PR8)#}P4itGNpw6Z10{K<){VT@y_<F^`6+Wu-P{;NEzKfJV7{
zK=A}Gmt^Bp=)V~7iB@bhu|zgbc)794<}LVyU3PnjnLT78(9FuQ2it?ptg#zAE&6+~
z{hl7U=A)C`O%3E6M$mxj*sKKYr_Fw1mCCxaSGV6&nHw`-Zi*>TXJIB%D{K59Iw57W
z7-~U`Q(NO#(b?O(db0Xv^IKi;Q%7o4nrZdMZ&(kB{L1VbPx=gkN3OXC@FnL9C$P<8
zb`@5iJrbL%u(&^XqeoTdVQz!39m{R+>B%zOv|hCzM53Dnan^_J@(f6pzpo4e^@1N?
z)|7^glr9{(J)}Aoz^whsRSfoEP0i#*`i(?W@j+$w-oJ1E-}zv9nI*%p7w}phFXD%?
z*qmq2<%?v-vt(>b?Pc(^@qBby9GX)P^sI^=G104^E~DpK#xp*84o%hcjPV_6fY(4>
zj~=Aa<9NJsltH?XKB@=kii35T2V|9W89lJ3LFtj^&$=vL*P{t<)Mdu=Y9tb66J#`j
zL|qR#KzUQwOVVVJ9H3tC8Z<&I8^&sh&xf%=t;t+6kM0Kj0eYNQ8K?qO1-t<tz!#wZ
zys`j(fcBgaw6sYKiD%WjK1JW;68itDZ-C>#QQ&LfOMo7gegzx>)&k_JH2^&=UJM9e
z39uCK5&Pm<V{;u8>xp0ES^ek`6vF^|6dVCG2dqF8K>rC-9`FJ@feJuHpfXU2iI);s
zubj)U@+*M8I@%5F0gy|S;Q*!Co&Yiy{TPjY+DE_7px=$quOXCnKnI``&>3(5NP<dN
zpc{Z6NYJk`=u2t(dY8U{rXQ`)7r*oi0{Trsj`m>E4~#z$00aWHfZ9MEpdLUE%<ICX
zwSii|0m$fSX;a`3%JfLK4DcKD=&`N|pvS$>ft$b$;1+NVpunL(c?<1UF+2&RXjlQz
z*9T*PbRYxB0!9HTz;M6`P!v%JQ^eBODzp_S^!otafKEVXpaVc(BDDZo0yZEPhym#P
z-toYElwXa+8$Gqo1*QS?mDg{;L*NlWU!dIu?f|!dpMk4Dkm#Sp5_9IGxCG$9Yrsn2
zbzn8H6j%l<1_ZDicoQf9Rsd^&wZJ0a4PX`U0k8ph8=!AJKLtJmb^^nI1Yj5NIS@mu
zM_-LM2IyfpZK7cSZTfql^emsA+dlyA10Ms0z^A}xzyx3-Fdi5I(3Wq7<~=~W0}g<`
zVQUX4fC+E|81NjT#~5EJLg6-W18520%B?+-ryQ^s*aPeUb^<P-C(s2j1N(pjz%HOG
zupjsw*bUSLYM`&>pjUz0z$PFYNCu_?(`(`_5BL@M1lR_w1ZI&rc=Z{p<&#j#uM|2o
zDGC)DjKU)vXa@KIWr6q6rVQvNW&5V#?3r86Q3x6UDukr~nzcJX?x0YibW7iw(g4($
z%8vmG9SWB_0D0#oa2>b?Q20=$y#o9QoB>V&gMjaVZ-H-suW5acp+J+M6mbxs^za3+
z8~7Zcz}Nv$kbDem2PlYWLLY%{1GWNNfDeJq0Lh6bS_n{(QLs^9QGfe@y}*BHefOh4
z+nu)gmjLCdBfxQ>Ja7V_*;4r=KyrdV@B?rf_#QY9oCVGS7l4bvWq=I(3AhBz1}Khb
zlacp6#P~1VMDBr0w4F)T-v{miWHs&3Uw~hM2LSD03QTH4^}hqOJkNn=07Wq^D@8O#
zGu4yFNM;y82IY`-R7n+d2U{8-MS2B7Mx7G8A+HKl0VvBif~*`UWq(hAGCo}eDErgZ
zv>HJAG(ih!b)YHW3s8R(0Mz9ufhf?L1faqn@B@qnq(rVKp2{^qX)POpHUR1a^?*R2
z7C^hDHc$tk?M3|tfi?sh1Jtew5DdsM;Q!rF3WI<Krr-(%r3eoJHD+zhn6?pFM7pF`
z(i-ZJcE=yBjDTGF^Z9cWwcXGLg;qdJ4&H1)BtRF{=0G$+?u`O%0kj0{0HycV03{b{
zOxcSr1$0Ru_qPK&0_}kgfDw?{=&LvQNuYs1H<a<G^uk*Xr9ooIy_6Owf>H(}N{B~!
z7%&u2!4CnY&fHKQ2uht&TI~<?1@Na`P{~WA*AJj;80o(RS`QRN^CI+{zGy%$8iX3^
zbO1mDQ6{4xn>7}1cx_uRdW~WAkp0EVcbIozNK|kbeQMMG?`r2;TlRI__)$j>HY6lC
zqFHb=#b0b3!+b4aP=Hdd<;%M3*OjfY01BbOA<ctBl$PQm6j)F3g!D#2&l`GM3pV{W
z>|Ra>=tTsF1~*3r7EQ-OVHFg7p)mZk{lmUNk(Z$m85|mdkv<WLV_BGm(nvKZtVp<d
zGrs+CY^Wh2m<UEXCpM!8U*lt*@!wcbhzbq~wkqP_SQf#45zo<$$%BdTaV(To5hKR2
zuB?XGI*x@!&<a#V=gRP%dv7fmcg93!gkf+c6Ezmp6nQyEJqtgw6gBVw)yx;W^H?<z
zmd^aya?vv##=a*;5!oiDr?U}kueb%yatu9GL=Qtp_+?+6@aFsI0X<U>7evhrsNWPe
z5X(P}<PK+L3VSB=7ArHD9~&cfP&4Cy_g(k4p8CQ5*%Wl&3{wvcS8j`Y)V*xuAFdex
z&42OPkxdQ4J(p;vV72saec24rKa;&-(f@ltciDxql~4Wn>2VXoGSGaLSWzL1`9>K3
z?mw$)xuad1Jeh=!BH(Fg7zY9*XKZ@@xWc<B?rcan+D78yDF&k{`$#M-L1M(aSuBj@
zi}P7ni+&<#JX8`yhw-ed#rTKt3ms;^?0+G0gEm`j5Y25qV*hxo>Q?a-%50}_Okj=G
zgJq?wPm7!hnCDHfNW{5U?mB+#*067iiIL;OVTkdc?x&wMzJDjHGe_roRRwVbO)bX1
zwr_jyROGbDfqRRaHWq9mW@!@@UV)zRuk$TERyW@GD7JgCUT@JIdff-%0}8GFxP^Pt
z>opnSs=_G!&?^-+_{+WBCjPssnY&h1Azy_AhlDDNA;#2m7d9P`UvFznR24Q6k{Xb#
z65A)jVH?B^nnR&5yI5CK8Bfv2#oDri+n2f+{^{_qoA<?5r6H$$oRx7P^4m}h86r1X
zyzqP(9iI`cUPi}P#6S=~<7k6(=XMpm8@eOPoi#&T1&88FRzWOynfXK*havQeJ=WOI
z-|L-X4db{3pU00wdL3%+EUsxM&Z2XRalS&c*2{)&FIB-*tdJ(WCSwv)MPm?)aXv#z
zVT*O)rP8hx>#Y|<p%7u5=&*YIl##bR>V93UV4V5zZu^wM>Gt}|i)*fkjnubsNJOJb
z4Z_&mORI_%yu?MCLw)gt^o&C$t}f2}WtIK6PmA@sil*6^gK;XwEcf@4hk8X%ELJei
ztqAqXe(B;Ty%LIR=89}IwHOCo?7qBkU1jeM4~rExi_K7A`@~_=GY-mV-sQ_}t6uwP
zQnB8A@jM#|(m3bg(<;>}4W7UB6?YaM92QEuvbX3u1w9xCL-bsB`*zEf$Db7|yejgb
zfUtUl^o)Zgw$ybW-0a%)%EfwD#Zf3k7$;H8o&R+C_S#-Q7b_TNRXiH9bV~U0L(hwA
z9Kt^beH({c3_dunUE9vtSS(|b`JyKj*hVpm^yKLnN^YNXyH?G7kXOA}?~Ygjg$Uy~
z4gX2q+2zUK<`yf|tuFt+{uRfHQ8(6?=~7%{7q@7LfueM-ku!YRV{tDRLM?;%iq*NS
zIx9{v7FiwkH~V~+u;-z@Y-6&@yddV~u_iClk#?mB(}&PAN5o%e4&%TKx1qlGPgHm>
z2FVG_NO`)K82k#$V+G<oau3pV(JQb++p|@~z^N=meTG|2y3AG)yWe1y#k#31kgX91
zr($al5>Kb1k=)^;*)-UhDIC*SJ2qS_oW^Qei~}g<`7HUO@97#xw5+b>eVO(x#)%g5
zmv%`0#j>F(6ezi4UKYWoqwi+I0%9>v##oy)G<$WIF}<N@g&r<nJw^BFnDIDKFdZ|R
zERIvFnc@buGS1)_7u|bVbdC3R6c4{v1k8ZmHqmMp$UbqF$O(})1AUwmt7f3bwc-xA
z2;*FjgYU<FlGLX~pa}`9Ic{TcTisM<z9P?BTdTHQdDq0A2g}5)_24VU&V)m1iMcb;
z+iG!oCi-42JZFJu<Azy`b33|EXtW~Y`1{W=Ke{a9(so$Phn~ea(4)%4DV91bFDy5)
zDf)F&PT69dQsU*iPxu^*JV`x}1Dh#xh1YD@r1{0yVjSdgcW?IC<==hz4e8;s1v~DD
zq0oz9a3!tsxUPrZvVZ=tA{6NA1v`ziLF)7i`S6(c+)jFp6?fEPBbu66bJ1)L^I;Bg
zkw%mq`Wa`8<X>qWTYp)nOBG*S4t4#1))15Dux@OVI6MbyX&mIxy=c$Y&)gH1Y10Uy
zEAI*M916{ilOJji{@iVP*?O-)0rRKZD&x$E)%RDw-Q?$|kF}a`n5R^T65Zxv>hgZZ
zJwmA$C2p=@K4RHiR*AJ08|O0LGDD-}g%WkgNO_mYd6QKQpt~I7G>daJeJhoTDR0tx
z#$9eR<)-kThe;XdW;mx@pOD`F;yc=`wFGLMtWnL}-@lvx)Pp95J4<S*REid<^O%oc
zooIO<JYZ(cNl{yW+b273j-U^T7Av7)F;4Ax@O|y7tJYt#OT%dQ$Qwzzy-O6g<{|#F
zge@O|mn+8P!<ojZ8E-7Dv$HFI=K&hx&X@*YDcEbwSA3Qa&u<ZBU&VrcA?m)0reBNx
zM9zwQBG<%j)R{bO;>@d<t8tD+fa%8}J#XJ0tJ#VB0DR7~iHh@?k150^8qLQ|@&qw>
zKHBGrh4az(9Puu3i^O^2v^rmlae7ST;-Ez}_f&#wrckV6cDjObT1@|4x6RAX-D-f*
zaFc`Ea^-swzW^Ow6E71PAYNa9T{NSmy!Uyj=izSg6+hY!_2$|hQ5K3z3*ej?B4i<q
z@op`;EM#3Qds<8Vw1zbjHY`feZ@}PHWvAG(5I6i$ZN(IUNYI?sxXhup^6F5hooGhl
zouWH@s1xzZYb@Mi9Qe|*>iH$nyF9Wn1<JoLsk1l^Ws_S6aq~5}seA`finCBZ<D{2_
zadl!^maPz}H^3z7b`*V}VKEM;@jb9mJv;q_ccBqR_j-87CsuKcze#+`;oI)w4mgW(
z(#zLnuOz&TA0I#+c@{CJhpK3?2-!-DmM}4A5lc2jb`cL2VW7WW+qR<B>+r8}*vq>$
z`>lRF{dpa9t!JsxV*cwG+c*X0M!7)Wvai$))uyUhzf0_)9{zfWmBMQ=YmD2{n8mCn
zn<$1Z#(FIh8yBNn;|!S3Kb<}Q+$n24bW6Dp+jXV5NUhomPr+)M{(D_Sf?(B4EFt=@
zCN>IYHI?cut_ZdaIWunwCS{!QQt-q-WM<0)pO{!E_DBdETp*4vfrGW{UbPxnMB~ty
z_mkEQSv%~>`id-8_rN3JzZ9R_PKxPES)Qq0Khg3HY+U0w7}J><lb6g68*O6x2UBIR
zIPxaC&K3bHS>u3J{p8^x^c1HIvh#|%xlI~RcP3P1AEKtb2wB1W#b?V{xSw%wOo)AL
z-N{qEs%tLBM>c!{wuy2W(^S8|=z-K`%pu~h=kOP!VSJe#j4tqj7q<kyY?}Cih`#ss
ziweuJIK}}qyPCZ5y{)fLXDul30T|EBM4RP^%d27nku~C7Qr8c*$&I=H`Q}3vBa)$R
zmC<}roQHxbY>;@o9GlZP(B??Ft|ta;z0;6Z1)rX=IdepO0j9BEybNM0Gej&dV4=ob
zO|kvNPvHIJ0X8_)u79(KW#(<0ugyzKE{22jjAb#7yeZx7<q2aO-fmsINZJ*^H^Mj@
zXW{leds1qJ%qmv+Yu{??+c@GM78b5v1&c~Pyugx+pcRN_eVTtWJsCW8{&@^N98LOF
zkNsEh)&A%9=SA8|Hk92LM^<8U_7Zni;!ff{JytuuHG0#jfKsJREJ8l^PzJ`!3tGiD
zr}IO3Uwgv!p>!7)sw9h;RS1IdQ1F87owq)}aBk3rzA^~t<Mm824hn3Em`i%bSwh#=
z&8cwmWGTAZ$eSKT+mclRwcKKyJanbUB)6`8mu}a33yna2SRn4NVqt#9Q9}dR@*mni
zTtVI7c7ZY|vT^IxNPWf`K_4_~7yCue4*A+ZTClt)=C4MMFb)-ZZP1wd4~n9WL4h9S
zpo=Bq>}q_Fju|eRtig^qPA3|EZqMuwKip6v1uhmt*ZlVdV9^?u%ch8`YgyykvyyQM
zg-eXnhb|mV85*3hYP~j)HrKl%5sH3KpokmN7l+*yr;0`?V#8V%jqAbXwMd>Hh_JVi
zk#-3CI$Y>Kddv85;w`Sc#hSBY!vAd+7GxZ1^!n;G-tnKg&92BU;(1$53_zzx((f&9
zEWS7*I)AZGMfOZ&zs-EjHAdm?mr|0Cm_MGG#m8^6aO8$ts53swMC6N_@30Xj(<m|L
z9X7-=H&q^wWgM0?dExE>r9TfWFtPK(Z5^}evyA=YBSG9u>X*+yW?p)*q&-ZO|LcNH
zv~mM|sa-{ESjU>+S<&frEFk0yeBD8JyQ{z3T5<C?ep60^*Pf32P`J!*`Rpn`fv=4E
zTkm>Q8kctY$wSd_J+oI2$44Q0)-f$I;!8HM{Ig>l5bJn_R~N6WXZ1X_$Ay6@qj45k
nYU=iN>seG}Wlh#JsHsMSw5Nw++-EF6Jo}xM-hS;O%eMX>+zdu5

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 7dcddb222..000000000
--- a/package-lock.json
+++ /dev/null
@@ -1,5633 +0,0 @@
-{
-	"name": "svelvet",
-	"version": "10.0.0",
-	"lockfileVersion": 3,
-	"requires": true,
-	"packages": {
-		"": {
-			"name": "svelvet",
-			"version": "10.0.0",
-			"license": "MIT",
-			"devDependencies": {
-				"@playwright/test": "^1.41.2",
-				"@sveltejs/adapter-auto": "^2.1.0",
-				"@sveltejs/kit": "^1.20.4",
-				"@sveltejs/package": "^2.1.0",
-				"@testing-library/svelte": "^4.0.2",
-				"@typescript-eslint/eslint-plugin": "^5.60.0",
-				"@typescript-eslint/parser": "^5.60.0",
-				"axe-playwright": "^2.0.1",
-				"eslint": "^8.43.0",
-				"eslint-config-prettier": "^8.8.0",
-				"eslint-plugin-svelte": "^2.32.0",
-				"husky": "^8.0.3",
-				"jest-dom": "^4.0.0",
-				"jsdom": "^22.1.0",
-				"prettier": "^2.8.8",
-				"prettier-plugin-svelte": "^2.10.1",
-				"publint": "^0.1.12",
-				"svelte-check": "^3.4.3",
-				"tslib": "^2.5.3",
-				"typescript": "^5.1.6",
-				"vite": "^4.3.9",
-				"vitest": "^0.32.2"
-			},
-			"peerDependencies": {
-				"svelte": ">=3.59.2 || ^4.0.0"
-			}
-		},
-		"node_modules/@aashutoshrathi/word-wrap": {
-			"version": "1.2.6",
-			"resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
-			"integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/@ampproject/remapping": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
-			"integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-			"peer": true,
-			"dependencies": {
-				"@jridgewell/gen-mapping": "^0.3.0",
-				"@jridgewell/trace-mapping": "^0.3.9"
-			},
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
-		"node_modules/@babel/code-frame": {
-			"version": "7.23.5",
-			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
-			"integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
-			"dev": true,
-			"dependencies": {
-				"@babel/highlight": "^7.23.4",
-				"chalk": "^2.4.2"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/code-frame/node_modules/ansi-styles": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-			"dev": true,
-			"dependencies": {
-				"color-convert": "^1.9.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/code-frame/node_modules/chalk": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-			"dev": true,
-			"dependencies": {
-				"ansi-styles": "^3.2.1",
-				"escape-string-regexp": "^1.0.5",
-				"supports-color": "^5.3.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/code-frame/node_modules/color-convert": {
-			"version": "1.9.3",
-			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-			"dev": true,
-			"dependencies": {
-				"color-name": "1.1.3"
-			}
-		},
-		"node_modules/@babel/code-frame/node_modules/color-name": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-			"dev": true
-		},
-		"node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-			"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.8.0"
-			}
-		},
-		"node_modules/@babel/code-frame/node_modules/has-flag": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-			"dev": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/code-frame/node_modules/supports-color": {
-			"version": "5.5.0",
-			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-			"dev": true,
-			"dependencies": {
-				"has-flag": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/compat-data": {
-			"version": "7.23.5",
-			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
-			"integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/core": {
-			"version": "7.23.7",
-			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.7.tgz",
-			"integrity": "sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@ampproject/remapping": "^2.2.0",
-				"@babel/code-frame": "^7.23.5",
-				"@babel/generator": "^7.23.6",
-				"@babel/helper-compilation-targets": "^7.23.6",
-				"@babel/helper-module-transforms": "^7.23.3",
-				"@babel/helpers": "^7.23.7",
-				"@babel/parser": "^7.23.6",
-				"@babel/template": "^7.22.15",
-				"@babel/traverse": "^7.23.7",
-				"@babel/types": "^7.23.6",
-				"convert-source-map": "^2.0.0",
-				"debug": "^4.1.0",
-				"gensync": "^1.0.0-beta.2",
-				"json5": "^2.2.3",
-				"semver": "^6.3.1"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/babel"
-			}
-		},
-		"node_modules/@babel/core/node_modules/semver": {
-			"version": "6.3.1",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"semver": "bin/semver.js"
-			}
-		},
-		"node_modules/@babel/generator": {
-			"version": "7.23.6",
-			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
-			"integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/types": "^7.23.6",
-				"@jridgewell/gen-mapping": "^0.3.2",
-				"@jridgewell/trace-mapping": "^0.3.17",
-				"jsesc": "^2.5.1"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/helper-compilation-targets": {
-			"version": "7.23.6",
-			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
-			"integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/compat-data": "^7.23.5",
-				"@babel/helper-validator-option": "^7.23.5",
-				"browserslist": "^4.22.2",
-				"lru-cache": "^5.1.1",
-				"semver": "^6.3.1"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-			"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"yallist": "^3.0.2"
-			}
-		},
-		"node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-			"version": "6.3.1",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"semver": "bin/semver.js"
-			}
-		},
-		"node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-			"dev": true,
-			"optional": true,
-			"peer": true
-		},
-		"node_modules/@babel/helper-environment-visitor": {
-			"version": "7.22.20",
-			"resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
-			"integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/helper-function-name": {
-			"version": "7.23.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
-			"integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/template": "^7.22.15",
-				"@babel/types": "^7.23.0"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/helper-hoist-variables": {
-			"version": "7.22.5",
-			"resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
-			"integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/types": "^7.22.5"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/helper-module-imports": {
-			"version": "7.22.15",
-			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
-			"integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/types": "^7.22.15"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/helper-module-transforms": {
-			"version": "7.23.3",
-			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
-			"integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/helper-environment-visitor": "^7.22.20",
-				"@babel/helper-module-imports": "^7.22.15",
-				"@babel/helper-simple-access": "^7.22.5",
-				"@babel/helper-split-export-declaration": "^7.22.6",
-				"@babel/helper-validator-identifier": "^7.22.20"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0"
-			}
-		},
-		"node_modules/@babel/helper-simple-access": {
-			"version": "7.22.5",
-			"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
-			"integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/types": "^7.22.5"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/helper-split-export-declaration": {
-			"version": "7.22.6",
-			"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
-			"integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/types": "^7.22.5"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/helper-string-parser": {
-			"version": "7.23.4",
-			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
-			"integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/helper-validator-identifier": {
-			"version": "7.22.20",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-			"integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-			"dev": true,
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/helper-validator-option": {
-			"version": "7.23.5",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
-			"integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/helpers": {
-			"version": "7.23.8",
-			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.8.tgz",
-			"integrity": "sha512-KDqYz4PiOWvDFrdHLPhKtCThtIcKVy6avWD2oG4GEvyQ+XDZwHD4YQd+H2vNMnq2rkdxsDkU82T+Vk8U/WXHRQ==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/template": "^7.22.15",
-				"@babel/traverse": "^7.23.7",
-				"@babel/types": "^7.23.6"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/highlight": {
-			"version": "7.23.4",
-			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
-			"integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
-			"dev": true,
-			"dependencies": {
-				"@babel/helper-validator-identifier": "^7.22.20",
-				"chalk": "^2.4.2",
-				"js-tokens": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/ansi-styles": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-			"dev": true,
-			"dependencies": {
-				"color-convert": "^1.9.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/chalk": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-			"dev": true,
-			"dependencies": {
-				"ansi-styles": "^3.2.1",
-				"escape-string-regexp": "^1.0.5",
-				"supports-color": "^5.3.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/color-convert": {
-			"version": "1.9.3",
-			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-			"dev": true,
-			"dependencies": {
-				"color-name": "1.1.3"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/color-name": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-			"dev": true
-		},
-		"node_modules/@babel/highlight/node_modules/escape-string-regexp": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-			"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.8.0"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/has-flag": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-			"dev": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/supports-color": {
-			"version": "5.5.0",
-			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-			"dev": true,
-			"dependencies": {
-				"has-flag": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/parser": {
-			"version": "7.23.6",
-			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
-			"integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"parser": "bin/babel-parser.js"
-			},
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
-		"node_modules/@babel/runtime": {
-			"version": "7.22.5",
-			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
-			"integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
-			"dev": true,
-			"dependencies": {
-				"regenerator-runtime": "^0.13.11"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/template": {
-			"version": "7.22.15",
-			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
-			"integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/code-frame": "^7.22.13",
-				"@babel/parser": "^7.22.15",
-				"@babel/types": "^7.22.15"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/traverse": {
-			"version": "7.23.7",
-			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.7.tgz",
-			"integrity": "sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/code-frame": "^7.23.5",
-				"@babel/generator": "^7.23.6",
-				"@babel/helper-environment-visitor": "^7.22.20",
-				"@babel/helper-function-name": "^7.23.0",
-				"@babel/helper-hoist-variables": "^7.22.5",
-				"@babel/helper-split-export-declaration": "^7.22.6",
-				"@babel/parser": "^7.23.6",
-				"@babel/types": "^7.23.6",
-				"debug": "^4.3.1",
-				"globals": "^11.1.0"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/traverse/node_modules/globals": {
-			"version": "11.12.0",
-			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/types": {
-			"version": "7.23.6",
-			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
-			"integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@babel/helper-string-parser": "^7.23.4",
-				"@babel/helper-validator-identifier": "^7.22.20",
-				"to-fast-properties": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@eslint-community/eslint-utils": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.3.0.tgz",
-			"integrity": "sha512-v3oplH6FYCULtFuCeqyuTd9D2WKO937Dxdq+GmHOLL72TTRriLxz2VLlNfkZRsvj6PKnOPAtuT6dwrs/pA5DvA==",
-			"dev": true,
-			"dependencies": {
-				"eslint-visitor-keys": "^3.3.0"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"peerDependencies": {
-				"eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
-			}
-		},
-		"node_modules/@eslint-community/regexpp": {
-			"version": "4.4.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.4.0.tgz",
-			"integrity": "sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ==",
-			"dev": true,
-			"engines": {
-				"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
-			}
-		},
-		"node_modules/@eslint/eslintrc": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz",
-			"integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==",
-			"dev": true,
-			"dependencies": {
-				"ajv": "^6.12.4",
-				"debug": "^4.3.2",
-				"espree": "^9.5.2",
-				"globals": "^13.19.0",
-				"ignore": "^5.2.0",
-				"import-fresh": "^3.2.1",
-				"js-yaml": "^4.1.0",
-				"minimatch": "^3.1.2",
-				"strip-json-comments": "^3.1.1"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/@eslint/js": {
-			"version": "8.43.0",
-			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.43.0.tgz",
-			"integrity": "sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==",
-			"dev": true,
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			}
-		},
-		"node_modules/@humanwhocodes/config-array": {
-			"version": "0.11.10",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
-			"integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==",
-			"dev": true,
-			"dependencies": {
-				"@humanwhocodes/object-schema": "^1.2.1",
-				"debug": "^4.1.1",
-				"minimatch": "^3.0.5"
-			},
-			"engines": {
-				"node": ">=10.10.0"
-			}
-		},
-		"node_modules/@humanwhocodes/module-importer": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-			"integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-			"dev": true,
-			"engines": {
-				"node": ">=12.22"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/nzakas"
-			}
-		},
-		"node_modules/@humanwhocodes/object-schema": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-			"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
-			"dev": true
-		},
-		"node_modules/@jridgewell/gen-mapping": {
-			"version": "0.3.3",
-			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-			"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-			"peer": true,
-			"dependencies": {
-				"@jridgewell/set-array": "^1.0.1",
-				"@jridgewell/sourcemap-codec": "^1.4.10",
-				"@jridgewell/trace-mapping": "^0.3.9"
-			},
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
-		"node_modules/@jridgewell/resolve-uri": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
-			"integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
-		"node_modules/@jridgewell/set-array": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-			"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-			"peer": true,
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
-		"node_modules/@jridgewell/sourcemap-codec": {
-			"version": "1.4.14",
-			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-			"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
-		},
-		"node_modules/@jridgewell/trace-mapping": {
-			"version": "0.3.18",
-			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
-			"integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
-			"dependencies": {
-				"@jridgewell/resolve-uri": "3.1.0",
-				"@jridgewell/sourcemap-codec": "1.4.14"
-			}
-		},
-		"node_modules/@nodelib/fs.scandir": {
-			"version": "2.1.5",
-			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-			"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-			"dev": true,
-			"dependencies": {
-				"@nodelib/fs.stat": "2.0.5",
-				"run-parallel": "^1.1.9"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/@nodelib/fs.stat": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-			"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-			"dev": true,
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/@nodelib/fs.walk": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-			"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-			"dev": true,
-			"dependencies": {
-				"@nodelib/fs.scandir": "2.1.5",
-				"fastq": "^1.6.0"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/@playwright/test": {
-			"version": "1.41.2",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz",
-			"integrity": "sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==",
-			"dev": true,
-			"dependencies": {
-				"playwright": "1.41.2"
-			},
-			"bin": {
-				"playwright": "cli.js"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
-		"node_modules/@polka/url": {
-			"version": "1.0.0-next.21",
-			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
-			"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
-			"dev": true
-		},
-		"node_modules/@sveltejs/adapter-auto": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.0.tgz",
-			"integrity": "sha512-o2pZCfATFtA/Gw/BB0Xm7k4EYaekXxaPGER3xGSY3FvzFJGTlJlZjBseaXwYSM94lZ0HniOjTokN3cWaLX6fow==",
-			"dev": true,
-			"dependencies": {
-				"import-meta-resolve": "^3.0.0"
-			},
-			"peerDependencies": {
-				"@sveltejs/kit": "^1.0.0"
-			}
-		},
-		"node_modules/@sveltejs/kit": {
-			"version": "1.20.4",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.20.4.tgz",
-			"integrity": "sha512-MmAzIuMrP7A+8fqDVbxm6ekGHRHL/+Fk8sQPAzPG4G2TxUDtHdn/WcIxeEqHzARMf0OtGSC+VPyOSFuw2Cy2Mg==",
-			"dev": true,
-			"hasInstallScript": true,
-			"dependencies": {
-				"@sveltejs/vite-plugin-svelte": "^2.4.1",
-				"@types/cookie": "^0.5.1",
-				"cookie": "^0.5.0",
-				"devalue": "^4.3.1",
-				"esm-env": "^1.0.0",
-				"kleur": "^4.1.5",
-				"magic-string": "^0.30.0",
-				"mime": "^3.0.0",
-				"sade": "^1.8.1",
-				"set-cookie-parser": "^2.6.0",
-				"sirv": "^2.0.2",
-				"undici": "~5.22.0"
-			},
-			"bin": {
-				"svelte-kit": "svelte-kit.js"
-			},
-			"engines": {
-				"node": "^16.14 || >=18"
-			},
-			"peerDependencies": {
-				"svelte": "^3.54.0 || ^4.0.0-next.0",
-				"vite": "^4.0.0"
-			}
-		},
-		"node_modules/@sveltejs/package": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/package/-/package-2.1.0.tgz",
-			"integrity": "sha512-c6PLH9G2YLQ48kqrS2XX422BrLNABBstSiapamchVJaQnOTXyJmUR8KmoCCySnzVy3PiYL6jg12UnoPmjW3SwA==",
-			"dev": true,
-			"dependencies": {
-				"chokidar": "^3.5.3",
-				"kleur": "^4.1.5",
-				"sade": "^1.8.1",
-				"svelte2tsx": "~0.6.0"
-			},
-			"bin": {
-				"svelte-package": "svelte-package.js"
-			},
-			"engines": {
-				"node": "^16.14 || >=18"
-			},
-			"peerDependencies": {
-				"svelte": "^3.44.0 || ^4.0.0"
-			}
-		},
-		"node_modules/@sveltejs/vite-plugin-svelte": {
-			"version": "2.4.1",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.1.tgz",
-			"integrity": "sha512-bNNKvoRY89ptY7udeBSCmTdCVwkjmMcZ0j/z9J5MuedT8jPjq0zrknAo/jF1sToAza4NVaAgR9AkZoD9oJJmnA==",
-			"dev": true,
-			"dependencies": {
-				"@sveltejs/vite-plugin-svelte-inspector": "^1.0.2",
-				"debug": "^4.3.4",
-				"deepmerge": "^4.3.1",
-				"kleur": "^4.1.5",
-				"magic-string": "^0.30.0",
-				"svelte-hmr": "^0.15.1",
-				"vitefu": "^0.2.4"
-			},
-			"engines": {
-				"node": "^14.18.0 || >= 16"
-			},
-			"peerDependencies": {
-				"svelte": "^3.54.0 || ^4.0.0-next.0",
-				"vite": "^4.0.0"
-			}
-		},
-		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.2.tgz",
-			"integrity": "sha512-Cy1dUMcYCnDVV/hPLXa43YZJ2jGKVW5rA0xuNL9dlmYhT0yoS1g7+FOFSRlgk0BXKk/Oc7grs+8BVA5Iz2fr8A==",
-			"dev": true,
-			"dependencies": {
-				"debug": "^4.3.4"
-			},
-			"engines": {
-				"node": "^14.18.0 || >= 16"
-			},
-			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^2.2.0",
-				"svelte": "^3.54.0 || ^4.0.0-next.0",
-				"vite": "^4.0.0"
-			}
-		},
-		"node_modules/@testing-library/dom": {
-			"version": "8.20.1",
-			"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz",
-			"integrity": "sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==",
-			"dev": true,
-			"dependencies": {
-				"@babel/code-frame": "^7.10.4",
-				"@babel/runtime": "^7.12.5",
-				"@types/aria-query": "^5.0.1",
-				"aria-query": "5.1.3",
-				"chalk": "^4.1.0",
-				"dom-accessibility-api": "^0.5.9",
-				"lz-string": "^1.5.0",
-				"pretty-format": "^27.0.2"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@testing-library/svelte": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-4.0.2.tgz",
-			"integrity": "sha512-kUCZx7qx3W53lsQXcwz9wphOOL7R006T26ZTDpQ5Zt1wpA0E8qxhyjwRQIvExMXCBwmN3LcI5E76cCVPEaKNVQ==",
-			"dev": true,
-			"dependencies": {
-				"@testing-library/dom": "^8.1.0"
-			},
-			"engines": {
-				"node": ">= 10"
-			},
-			"peerDependencies": {
-				"svelte": "^3 || ^4"
-			}
-		},
-		"node_modules/@tootallnate/once": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-			"integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
-			"dev": true,
-			"engines": {
-				"node": ">= 10"
-			}
-		},
-		"node_modules/@types/aria-query": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
-			"integrity": "sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==",
-			"dev": true
-		},
-		"node_modules/@types/chai": {
-			"version": "4.3.5",
-			"resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz",
-			"integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==",
-			"dev": true
-		},
-		"node_modules/@types/chai-subset": {
-			"version": "1.3.3",
-			"resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.3.tgz",
-			"integrity": "sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==",
-			"dev": true,
-			"dependencies": {
-				"@types/chai": "*"
-			}
-		},
-		"node_modules/@types/cookie": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.1.tgz",
-			"integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==",
-			"dev": true
-		},
-		"node_modules/@types/estree": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
-			"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
-			"peer": true
-		},
-		"node_modules/@types/json-schema": {
-			"version": "7.0.12",
-			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-			"integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
-			"dev": true
-		},
-		"node_modules/@types/junit-report-builder": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@types/junit-report-builder/-/junit-report-builder-3.0.2.tgz",
-			"integrity": "sha512-R5M+SYhMbwBeQcNXYWNCZkl09vkVfAtcPIaCGdzIkkbeaTrVbGQ7HVgi4s+EmM/M1K4ZuWQH0jGcvMvNePfxYA==",
-			"dev": true
-		},
-		"node_modules/@types/node": {
-			"version": "18.15.3",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.3.tgz",
-			"integrity": "sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==",
-			"dev": true
-		},
-		"node_modules/@types/pug": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
-			"integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
-			"dev": true
-		},
-		"node_modules/@types/semver": {
-			"version": "7.5.0",
-			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz",
-			"integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==",
-			"dev": true
-		},
-		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "5.60.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.0.tgz",
-			"integrity": "sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==",
-			"dev": true,
-			"dependencies": {
-				"@eslint-community/regexpp": "^4.4.0",
-				"@typescript-eslint/scope-manager": "5.60.0",
-				"@typescript-eslint/type-utils": "5.60.0",
-				"@typescript-eslint/utils": "5.60.0",
-				"debug": "^4.3.4",
-				"grapheme-splitter": "^1.0.4",
-				"ignore": "^5.2.0",
-				"natural-compare-lite": "^1.4.0",
-				"semver": "^7.3.7",
-				"tsutils": "^3.21.0"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"@typescript-eslint/parser": "^5.0.0",
-				"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/parser": {
-			"version": "5.60.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.60.0.tgz",
-			"integrity": "sha512-jBONcBsDJ9UoTWrARkRRCgDz6wUggmH5RpQVlt7BimSwaTkTjwypGzKORXbR4/2Hqjk9hgwlon2rVQAjWNpkyQ==",
-			"dev": true,
-			"dependencies": {
-				"@typescript-eslint/scope-manager": "5.60.0",
-				"@typescript-eslint/types": "5.60.0",
-				"@typescript-eslint/typescript-estree": "5.60.0",
-				"debug": "^4.3.4"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "5.60.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.60.0.tgz",
-			"integrity": "sha512-hakuzcxPwXi2ihf9WQu1BbRj1e/Pd8ZZwVTG9kfbxAMZstKz8/9OoexIwnmLzShtsdap5U/CoQGRCWlSuPbYxQ==",
-			"dev": true,
-			"dependencies": {
-				"@typescript-eslint/types": "5.60.0",
-				"@typescript-eslint/visitor-keys": "5.60.0"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
-		"node_modules/@typescript-eslint/type-utils": {
-			"version": "5.60.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.60.0.tgz",
-			"integrity": "sha512-X7NsRQddORMYRFH7FWo6sA9Y/zbJ8s1x1RIAtnlj6YprbToTiQnM6vxcMu7iYhdunmoC0rUWlca13D5DVHkK2g==",
-			"dev": true,
-			"dependencies": {
-				"@typescript-eslint/typescript-estree": "5.60.0",
-				"@typescript-eslint/utils": "5.60.0",
-				"debug": "^4.3.4",
-				"tsutils": "^3.21.0"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"eslint": "*"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/types": {
-			"version": "5.60.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.60.0.tgz",
-			"integrity": "sha512-ascOuoCpNZBccFVNJRSC6rPq4EmJ2NkuoKnd6LDNyAQmdDnziAtxbCGWCbefG1CNzmDvd05zO36AmB7H8RzKPA==",
-			"dev": true,
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "5.60.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.0.tgz",
-			"integrity": "sha512-R43thAuwarC99SnvrBmh26tc7F6sPa2B3evkXp/8q954kYL6Ro56AwASYWtEEi+4j09GbiNAHqYwNNZuNlARGQ==",
-			"dev": true,
-			"dependencies": {
-				"@typescript-eslint/types": "5.60.0",
-				"@typescript-eslint/visitor-keys": "5.60.0",
-				"debug": "^4.3.4",
-				"globby": "^11.1.0",
-				"is-glob": "^4.0.3",
-				"semver": "^7.3.7",
-				"tsutils": "^3.21.0"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependenciesMeta": {
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/utils": {
-			"version": "5.60.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.60.0.tgz",
-			"integrity": "sha512-ba51uMqDtfLQ5+xHtwlO84vkdjrqNzOnqrnwbMHMRY8Tqeme8C2Q8Fc7LajfGR+e3/4LoYiWXUM6BpIIbHJ4hQ==",
-			"dev": true,
-			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.2.0",
-				"@types/json-schema": "^7.0.9",
-				"@types/semver": "^7.3.12",
-				"@typescript-eslint/scope-manager": "5.60.0",
-				"@typescript-eslint/types": "5.60.0",
-				"@typescript-eslint/typescript-estree": "5.60.0",
-				"eslint-scope": "^5.1.1",
-				"semver": "^7.3.7"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-			}
-		},
-		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "5.60.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.0.tgz",
-			"integrity": "sha512-wm9Uz71SbCyhUKgcaPRauBdTegUyY/ZWl8gLwD/i/ybJqscrrdVSFImpvUz16BLPChIeKBK5Fa9s6KDQjsjyWw==",
-			"dev": true,
-			"dependencies": {
-				"@typescript-eslint/types": "5.60.0",
-				"eslint-visitor-keys": "^3.3.0"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
-		"node_modules/@vitest/expect": {
-			"version": "0.32.2",
-			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.32.2.tgz",
-			"integrity": "sha512-6q5yzweLnyEv5Zz1fqK5u5E83LU+gOMVBDuxBl2d2Jfx1BAp5M+rZgc5mlyqdnxquyoiOXpXmFNkcGcfFnFH3Q==",
-			"dev": true,
-			"dependencies": {
-				"@vitest/spy": "0.32.2",
-				"@vitest/utils": "0.32.2",
-				"chai": "^4.3.7"
-			},
-			"funding": {
-				"url": "https://opencollective.com/vitest"
-			}
-		},
-		"node_modules/@vitest/runner": {
-			"version": "0.32.2",
-			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.32.2.tgz",
-			"integrity": "sha512-06vEL0C1pomOEktGoLjzZw+1Fb+7RBRhmw/06WkDrd1akkT9i12su0ku+R/0QM69dfkIL/rAIDTG+CSuQVDcKw==",
-			"dev": true,
-			"dependencies": {
-				"@vitest/utils": "0.32.2",
-				"concordance": "^5.0.4",
-				"p-limit": "^4.0.0",
-				"pathe": "^1.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/vitest"
-			}
-		},
-		"node_modules/@vitest/runner/node_modules/p-limit": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
-			"integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
-			"dev": true,
-			"dependencies": {
-				"yocto-queue": "^1.0.0"
-			},
-			"engines": {
-				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/@vitest/runner/node_modules/yocto-queue": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
-			"integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
-			"dev": true,
-			"engines": {
-				"node": ">=12.20"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/@vitest/snapshot": {
-			"version": "0.32.2",
-			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.32.2.tgz",
-			"integrity": "sha512-JwhpeH/PPc7GJX38vEfCy9LtRzf9F4er7i4OsAJyV7sjPwjj+AIR8cUgpMTWK4S3TiamzopcTyLsZDMuldoi5A==",
-			"dev": true,
-			"dependencies": {
-				"magic-string": "^0.30.0",
-				"pathe": "^1.1.0",
-				"pretty-format": "^27.5.1"
-			},
-			"funding": {
-				"url": "https://opencollective.com/vitest"
-			}
-		},
-		"node_modules/@vitest/spy": {
-			"version": "0.32.2",
-			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.32.2.tgz",
-			"integrity": "sha512-Q/ZNILJ4ca/VzQbRM8ur3Si5Sardsh1HofatG9wsJY1RfEaw0XKP8IVax2lI1qnrk9YPuG9LA2LkZ0EI/3d4ug==",
-			"dev": true,
-			"dependencies": {
-				"tinyspy": "^2.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/vitest"
-			}
-		},
-		"node_modules/@vitest/utils": {
-			"version": "0.32.2",
-			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.32.2.tgz",
-			"integrity": "sha512-lnJ0T5i03j0IJaeW73hxe2AuVnZ/y1BhhCOuIcl9LIzXnbpXJT9Lrt6brwKHXLOiA7MZ6N5hSJjt0xE1dGNCzQ==",
-			"dev": true,
-			"dependencies": {
-				"diff-sequences": "^29.4.3",
-				"loupe": "^2.3.6",
-				"pretty-format": "^27.5.1"
-			},
-			"funding": {
-				"url": "https://opencollective.com/vitest"
-			}
-		},
-		"node_modules/abab": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-			"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
-			"dev": true
-		},
-		"node_modules/acorn": {
-			"version": "8.9.0",
-			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz",
-			"integrity": "sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==",
-			"bin": {
-				"acorn": "bin/acorn"
-			},
-			"engines": {
-				"node": ">=0.4.0"
-			}
-		},
-		"node_modules/acorn-jsx": {
-			"version": "5.3.2",
-			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-			"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-			"dev": true,
-			"peerDependencies": {
-				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
-			}
-		},
-		"node_modules/acorn-walk": {
-			"version": "8.2.0",
-			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-			"integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.4.0"
-			}
-		},
-		"node_modules/agent-base": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-			"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-			"dev": true,
-			"dependencies": {
-				"debug": "4"
-			},
-			"engines": {
-				"node": ">= 6.0.0"
-			}
-		},
-		"node_modules/ajv": {
-			"version": "6.12.6",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-			"dev": true,
-			"dependencies": {
-				"fast-deep-equal": "^3.1.1",
-				"fast-json-stable-stringify": "^2.0.0",
-				"json-schema-traverse": "^0.4.1",
-				"uri-js": "^4.2.2"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/epoberezkin"
-			}
-		},
-		"node_modules/ansi-regex": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/ansi-styles": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-			"dev": true,
-			"dependencies": {
-				"color-convert": "^2.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
-			}
-		},
-		"node_modules/anymatch": {
-			"version": "3.1.3",
-			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-			"dev": true,
-			"dependencies": {
-				"normalize-path": "^3.0.0",
-				"picomatch": "^2.0.4"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/argparse": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-			"dev": true
-		},
-		"node_modules/aria-query": {
-			"version": "5.1.3",
-			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
-			"integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
-			"dev": true,
-			"dependencies": {
-				"deep-equal": "^2.0.5"
-			}
-		},
-		"node_modules/array-buffer-byte-length": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
-			"integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.2",
-				"is-array-buffer": "^3.0.1"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/array-union": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-			"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/assertion-error": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
-			"integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
-			"dev": true,
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/asynckit": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-			"dev": true
-		},
-		"node_modules/available-typed-arrays": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-			"integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-			"dev": true,
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/axe-core": {
-			"version": "4.8.3",
-			"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz",
-			"integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==",
-			"dev": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/axe-html-reporter": {
-			"version": "2.2.3",
-			"resolved": "https://registry.npmjs.org/axe-html-reporter/-/axe-html-reporter-2.2.3.tgz",
-			"integrity": "sha512-io8aCEt4fJvv43W+33n3zEa8rdplH5Ti2v5fOnth3GBKLhLHarNs7jj46xGfpnGnpaNrz23/tXPHC3HbwTzwwA==",
-			"dev": true,
-			"dependencies": {
-				"mustache": "^4.0.1",
-				"rimraf": "^3.0.2"
-			},
-			"engines": {
-				"node": ">=8.9.0"
-			},
-			"peerDependencies": {
-				"axe-core": ">=3"
-			}
-		},
-		"node_modules/axe-playwright": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/axe-playwright/-/axe-playwright-2.0.1.tgz",
-			"integrity": "sha512-MHjNjGARulF9XzqSfspmNjw+tpBz4x9o1VlTuLWEUW9fqzhn+xWa1qEpuOIQPbsRWQiLfooDjQAunLeE0PM5AQ==",
-			"dev": true,
-			"dependencies": {
-				"@types/junit-report-builder": "^3.0.0",
-				"axe-core": "^4.5.1",
-				"axe-html-reporter": "2.2.3",
-				"junit-report-builder": "^3.0.1",
-				"picocolors": "^1.0.0"
-			},
-			"peerDependencies": {
-				"playwright": ">1.0.0"
-			}
-		},
-		"node_modules/axobject-query": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
-			"integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
-			"peer": true,
-			"dependencies": {
-				"dequal": "^2.0.3"
-			}
-		},
-		"node_modules/balanced-match": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-			"dev": true
-		},
-		"node_modules/binary-extensions": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-			"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/blueimp-md5": {
-			"version": "2.19.0",
-			"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
-			"integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==",
-			"dev": true
-		},
-		"node_modules/brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"dev": true,
-			"dependencies": {
-				"balanced-match": "^1.0.0",
-				"concat-map": "0.0.1"
-			}
-		},
-		"node_modules/braces": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-			"dev": true,
-			"dependencies": {
-				"fill-range": "^7.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/browserslist": {
-			"version": "4.22.2",
-			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
-			"integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/browserslist"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/browserslist"
-				},
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"caniuse-lite": "^1.0.30001565",
-				"electron-to-chromium": "^1.4.601",
-				"node-releases": "^2.0.14",
-				"update-browserslist-db": "^1.0.13"
-			},
-			"bin": {
-				"browserslist": "cli.js"
-			},
-			"engines": {
-				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-			}
-		},
-		"node_modules/buffer-crc32": {
-			"version": "0.2.13",
-			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-			"integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
-			"dev": true,
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/busboy": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
-			"integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
-			"dev": true,
-			"dependencies": {
-				"streamsearch": "^1.1.0"
-			},
-			"engines": {
-				"node": ">=10.16.0"
-			}
-		},
-		"node_modules/cac": {
-			"version": "6.7.14",
-			"resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
-			"integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/call-bind": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-			"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-			"dev": true,
-			"dependencies": {
-				"function-bind": "^1.1.1",
-				"get-intrinsic": "^1.0.2"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/callsites": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-			"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/caniuse-lite": {
-			"version": "1.0.30001579",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz",
-			"integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/browserslist"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-				},
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
-			"optional": true,
-			"peer": true
-		},
-		"node_modules/chai": {
-			"version": "4.3.7",
-			"resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
-			"integrity": "sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==",
-			"dev": true,
-			"dependencies": {
-				"assertion-error": "^1.1.0",
-				"check-error": "^1.0.2",
-				"deep-eql": "^4.1.2",
-				"get-func-name": "^2.0.0",
-				"loupe": "^2.3.1",
-				"pathval": "^1.1.1",
-				"type-detect": "^4.0.5"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/chalk": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-			"dev": true,
-			"dependencies": {
-				"ansi-styles": "^4.1.0",
-				"supports-color": "^7.1.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/chalk?sponsor=1"
-			}
-		},
-		"node_modules/check-error": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
-			"integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
-			"dev": true,
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/chokidar": {
-			"version": "3.5.3",
-			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-			"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "individual",
-					"url": "https://paulmillr.com/funding/"
-				}
-			],
-			"dependencies": {
-				"anymatch": "~3.1.2",
-				"braces": "~3.0.2",
-				"glob-parent": "~5.1.2",
-				"is-binary-path": "~2.1.0",
-				"is-glob": "~4.0.1",
-				"normalize-path": "~3.0.0",
-				"readdirp": "~3.6.0"
-			},
-			"engines": {
-				"node": ">= 8.10.0"
-			},
-			"optionalDependencies": {
-				"fsevents": "~2.3.2"
-			}
-		},
-		"node_modules/code-red": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.3.tgz",
-			"integrity": "sha512-kVwJELqiILQyG5aeuyKFbdsI1fmQy1Cmf7dQ8eGmVuJoaRVdwey7WaMknr2ZFeVSYSKT0rExsa8EGw0aoI/1QQ==",
-			"peer": true,
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.14",
-				"@types/estree": "^1.0.0",
-				"acorn": "^8.8.2",
-				"estree-walker": "^3.0.3",
-				"periscopic": "^3.1.0"
-			}
-		},
-		"node_modules/color-convert": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-			"dev": true,
-			"dependencies": {
-				"color-name": "~1.1.4"
-			},
-			"engines": {
-				"node": ">=7.0.0"
-			}
-		},
-		"node_modules/color-name": {
-			"version": "1.1.4",
-			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-			"dev": true
-		},
-		"node_modules/combined-stream": {
-			"version": "1.0.8",
-			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-			"dev": true,
-			"dependencies": {
-				"delayed-stream": "~1.0.0"
-			},
-			"engines": {
-				"node": ">= 0.8"
-			}
-		},
-		"node_modules/concat-map": {
-			"version": "0.0.1",
-			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-			"dev": true
-		},
-		"node_modules/concordance": {
-			"version": "5.0.4",
-			"resolved": "https://registry.npmjs.org/concordance/-/concordance-5.0.4.tgz",
-			"integrity": "sha512-OAcsnTEYu1ARJqWVGwf4zh4JDfHZEaSNlNccFmt8YjB2l/n19/PF2viLINHc57vO4FKIAFl2FWASIGZZWZ2Kxw==",
-			"dev": true,
-			"dependencies": {
-				"date-time": "^3.1.0",
-				"esutils": "^2.0.3",
-				"fast-diff": "^1.2.0",
-				"js-string-escape": "^1.0.1",
-				"lodash": "^4.17.15",
-				"md5-hex": "^3.0.1",
-				"semver": "^7.3.2",
-				"well-known-symbols": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=10.18.0 <11 || >=12.14.0 <13 || >=14"
-			}
-		},
-		"node_modules/convert-source-map": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-			"dev": true,
-			"optional": true,
-			"peer": true
-		},
-		"node_modules/cookie": {
-			"version": "0.5.0",
-			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-			"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
-			"dev": true,
-			"engines": {
-				"node": ">= 0.6"
-			}
-		},
-		"node_modules/cross-spawn": {
-			"version": "7.0.3",
-			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-			"dev": true,
-			"dependencies": {
-				"path-key": "^3.1.0",
-				"shebang-command": "^2.0.0",
-				"which": "^2.0.1"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/css-tree": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"peer": true,
-			"dependencies": {
-				"mdn-data": "2.0.30",
-				"source-map-js": "^1.0.1"
-			},
-			"engines": {
-				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-			}
-		},
-		"node_modules/cssesc": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-			"dev": true,
-			"bin": {
-				"cssesc": "bin/cssesc"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/cssstyle": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
-			"integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
-			"dev": true,
-			"dependencies": {
-				"rrweb-cssom": "^0.6.0"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
-		"node_modules/data-urls": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
-			"integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
-			"dev": true,
-			"dependencies": {
-				"abab": "^2.0.6",
-				"whatwg-mimetype": "^3.0.0",
-				"whatwg-url": "^12.0.0"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
-		"node_modules/date-format": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.3.tgz",
-			"integrity": "sha512-7P3FyqDcfeznLZp2b+OMitV9Sz2lUnsT87WaTat9nVwqsBkTzPG3lPLNwW3en6F4pHUiWzr6vb8CLhjdK9bcxQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=4.0"
-			}
-		},
-		"node_modules/date-time": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/date-time/-/date-time-3.1.0.tgz",
-			"integrity": "sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==",
-			"dev": true,
-			"dependencies": {
-				"time-zone": "^1.0.0"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/debug": {
-			"version": "4.3.4",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-			"dev": true,
-			"dependencies": {
-				"ms": "2.1.2"
-			},
-			"engines": {
-				"node": ">=6.0"
-			},
-			"peerDependenciesMeta": {
-				"supports-color": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/decimal.js": {
-			"version": "10.4.3",
-			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-			"integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
-			"dev": true
-		},
-		"node_modules/dedent-js": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
-			"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==",
-			"dev": true
-		},
-		"node_modules/deep-eql": {
-			"version": "4.1.3",
-			"resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
-			"integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
-			"dev": true,
-			"dependencies": {
-				"type-detect": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/deep-equal": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.1.tgz",
-			"integrity": "sha512-lKdkdV6EOGoVn65XaOsPdH4rMxTZOnmFyuIkMjM1i5HHCbfjC97dawgTAy0deYNfuqUqW+Q5VrVaQYtUpSd6yQ==",
-			"dev": true,
-			"dependencies": {
-				"array-buffer-byte-length": "^1.0.0",
-				"call-bind": "^1.0.2",
-				"es-get-iterator": "^1.1.3",
-				"get-intrinsic": "^1.2.0",
-				"is-arguments": "^1.1.1",
-				"is-array-buffer": "^3.0.2",
-				"is-date-object": "^1.0.5",
-				"is-regex": "^1.1.4",
-				"is-shared-array-buffer": "^1.0.2",
-				"isarray": "^2.0.5",
-				"object-is": "^1.1.5",
-				"object-keys": "^1.1.1",
-				"object.assign": "^4.1.4",
-				"regexp.prototype.flags": "^1.5.0",
-				"side-channel": "^1.0.4",
-				"which-boxed-primitive": "^1.0.2",
-				"which-collection": "^1.0.1",
-				"which-typed-array": "^1.1.9"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/deep-is": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-			"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-			"dev": true
-		},
-		"node_modules/deepmerge": {
-			"version": "4.3.1",
-			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/define-properties": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
-			"integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
-			"dev": true,
-			"dependencies": {
-				"has-property-descriptors": "^1.0.0",
-				"object-keys": "^1.1.1"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/delayed-stream": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.4.0"
-			}
-		},
-		"node_modules/dequal": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"peer": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/detect-indent": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
-			"integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/devalue": {
-			"version": "4.3.2",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.2.tgz",
-			"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==",
-			"dev": true
-		},
-		"node_modules/diff-sequences": {
-			"version": "29.4.3",
-			"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.4.3.tgz",
-			"integrity": "sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==",
-			"dev": true,
-			"engines": {
-				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-			}
-		},
-		"node_modules/dir-glob": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-			"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-			"dev": true,
-			"dependencies": {
-				"path-type": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/doctrine": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-			"integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-			"dev": true,
-			"dependencies": {
-				"esutils": "^2.0.2"
-			},
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
-		"node_modules/dom-accessibility-api": {
-			"version": "0.5.16",
-			"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
-			"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-			"dev": true
-		},
-		"node_modules/domexception": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-			"integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-			"dev": true,
-			"dependencies": {
-				"webidl-conversions": "^7.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/electron-to-chromium": {
-			"version": "1.4.644",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.644.tgz",
-			"integrity": "sha512-zOnPndwz3u1sVFSyBcRWcn0529Kz+jr+tDxN9iP69I3CpC5wlvYmjLrK2O7TEsg2oDDoUqooeXqbiHLvXvl6Lg==",
-			"dev": true,
-			"optional": true,
-			"peer": true
-		},
-		"node_modules/entities": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.12"
-			},
-			"funding": {
-				"url": "https://github.com/fb55/entities?sponsor=1"
-			}
-		},
-		"node_modules/es-get-iterator": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
-			"integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.2",
-				"get-intrinsic": "^1.1.3",
-				"has-symbols": "^1.0.3",
-				"is-arguments": "^1.1.1",
-				"is-map": "^2.0.2",
-				"is-set": "^2.0.2",
-				"is-string": "^1.0.7",
-				"isarray": "^2.0.5",
-				"stop-iteration-iterator": "^1.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/es6-promise": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
-			"integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
-			"dev": true
-		},
-		"node_modules/escalade": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-			"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/escape-string-regexp": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-			"dev": true,
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/eslint": {
-			"version": "8.43.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.43.0.tgz",
-			"integrity": "sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==",
-			"dev": true,
-			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.2.0",
-				"@eslint-community/regexpp": "^4.4.0",
-				"@eslint/eslintrc": "^2.0.3",
-				"@eslint/js": "8.43.0",
-				"@humanwhocodes/config-array": "^0.11.10",
-				"@humanwhocodes/module-importer": "^1.0.1",
-				"@nodelib/fs.walk": "^1.2.8",
-				"ajv": "^6.10.0",
-				"chalk": "^4.0.0",
-				"cross-spawn": "^7.0.2",
-				"debug": "^4.3.2",
-				"doctrine": "^3.0.0",
-				"escape-string-regexp": "^4.0.0",
-				"eslint-scope": "^7.2.0",
-				"eslint-visitor-keys": "^3.4.1",
-				"espree": "^9.5.2",
-				"esquery": "^1.4.2",
-				"esutils": "^2.0.2",
-				"fast-deep-equal": "^3.1.3",
-				"file-entry-cache": "^6.0.1",
-				"find-up": "^5.0.0",
-				"glob-parent": "^6.0.2",
-				"globals": "^13.19.0",
-				"graphemer": "^1.4.0",
-				"ignore": "^5.2.0",
-				"import-fresh": "^3.0.0",
-				"imurmurhash": "^0.1.4",
-				"is-glob": "^4.0.0",
-				"is-path-inside": "^3.0.3",
-				"js-yaml": "^4.1.0",
-				"json-stable-stringify-without-jsonify": "^1.0.1",
-				"levn": "^0.4.1",
-				"lodash.merge": "^4.6.2",
-				"minimatch": "^3.1.2",
-				"natural-compare": "^1.4.0",
-				"optionator": "^0.9.1",
-				"strip-ansi": "^6.0.1",
-				"strip-json-comments": "^3.1.0",
-				"text-table": "^0.2.0"
-			},
-			"bin": {
-				"eslint": "bin/eslint.js"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/eslint-config-prettier": {
-			"version": "8.8.0",
-			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
-			"integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
-			"dev": true,
-			"bin": {
-				"eslint-config-prettier": "bin/cli.js"
-			},
-			"peerDependencies": {
-				"eslint": ">=7.0.0"
-			}
-		},
-		"node_modules/eslint-plugin-svelte": {
-			"version": "2.32.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.32.0.tgz",
-			"integrity": "sha512-q8uxR4wFmAkb+RX2qIJIO+xAjecInZuGYXbXOvpxMwv7Y5oQrq5WOkiYwLqPZk6p1L5UmSr54duloKiBucDL7A==",
-			"dev": true,
-			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.2.0",
-				"@jridgewell/sourcemap-codec": "^1.4.14",
-				"debug": "^4.3.1",
-				"esutils": "^2.0.3",
-				"known-css-properties": "^0.27.0",
-				"postcss": "^8.4.5",
-				"postcss-load-config": "^3.1.4",
-				"postcss-safe-parser": "^6.0.0",
-				"postcss-selector-parser": "^6.0.11",
-				"semver": "^7.5.3",
-				"svelte-eslint-parser": "^0.32.0"
-			},
-			"engines": {
-				"node": "^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ota-meshi"
-			},
-			"peerDependencies": {
-				"eslint": "^7.0.0 || ^8.0.0-0",
-				"svelte": "^3.37.0 || ^4.0.0"
-			},
-			"peerDependenciesMeta": {
-				"svelte": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/eslint-scope": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-			"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-			"dev": true,
-			"dependencies": {
-				"esrecurse": "^4.3.0",
-				"estraverse": "^4.1.1"
-			},
-			"engines": {
-				"node": ">=8.0.0"
-			}
-		},
-		"node_modules/eslint-visitor-keys": {
-			"version": "3.4.1",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
-			"integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
-			"dev": true,
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/eslint/node_modules/eslint-scope": {
-			"version": "7.2.0",
-			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
-			"integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
-			"dev": true,
-			"dependencies": {
-				"esrecurse": "^4.3.0",
-				"estraverse": "^5.2.0"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/eslint/node_modules/estraverse": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-			"dev": true,
-			"engines": {
-				"node": ">=4.0"
-			}
-		},
-		"node_modules/eslint/node_modules/glob-parent": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-			"dev": true,
-			"dependencies": {
-				"is-glob": "^4.0.3"
-			},
-			"engines": {
-				"node": ">=10.13.0"
-			}
-		},
-		"node_modules/esm-env": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
-			"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==",
-			"dev": true
-		},
-		"node_modules/espree": {
-			"version": "9.5.2",
-			"resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
-			"integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
-			"dev": true,
-			"dependencies": {
-				"acorn": "^8.8.0",
-				"acorn-jsx": "^5.3.2",
-				"eslint-visitor-keys": "^3.4.1"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/esquery": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
-			"integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
-			"dev": true,
-			"dependencies": {
-				"estraverse": "^5.1.0"
-			},
-			"engines": {
-				"node": ">=0.10"
-			}
-		},
-		"node_modules/esquery/node_modules/estraverse": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-			"dev": true,
-			"engines": {
-				"node": ">=4.0"
-			}
-		},
-		"node_modules/esrecurse": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-			"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-			"dev": true,
-			"dependencies": {
-				"estraverse": "^5.2.0"
-			},
-			"engines": {
-				"node": ">=4.0"
-			}
-		},
-		"node_modules/esrecurse/node_modules/estraverse": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-			"dev": true,
-			"engines": {
-				"node": ">=4.0"
-			}
-		},
-		"node_modules/estraverse": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-			"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-			"dev": true,
-			"engines": {
-				"node": ">=4.0"
-			}
-		},
-		"node_modules/estree-walker": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"peer": true,
-			"dependencies": {
-				"@types/estree": "^1.0.0"
-			}
-		},
-		"node_modules/esutils": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/fast-deep-equal": {
-			"version": "3.1.3",
-			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-			"dev": true
-		},
-		"node_modules/fast-diff": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-			"integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-			"dev": true
-		},
-		"node_modules/fast-glob": {
-			"version": "3.2.12",
-			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-			"integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-			"dev": true,
-			"dependencies": {
-				"@nodelib/fs.stat": "^2.0.2",
-				"@nodelib/fs.walk": "^1.2.3",
-				"glob-parent": "^5.1.2",
-				"merge2": "^1.3.0",
-				"micromatch": "^4.0.4"
-			},
-			"engines": {
-				"node": ">=8.6.0"
-			}
-		},
-		"node_modules/fast-json-stable-stringify": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-			"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-			"dev": true
-		},
-		"node_modules/fast-levenshtein": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-			"dev": true
-		},
-		"node_modules/fastq": {
-			"version": "1.15.0",
-			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
-			"integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
-			"dev": true,
-			"dependencies": {
-				"reusify": "^1.0.4"
-			}
-		},
-		"node_modules/file-entry-cache": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-			"integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
-			"dev": true,
-			"dependencies": {
-				"flat-cache": "^3.0.4"
-			},
-			"engines": {
-				"node": "^10.12.0 || >=12.0.0"
-			}
-		},
-		"node_modules/fill-range": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-			"dev": true,
-			"dependencies": {
-				"to-regex-range": "^5.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/find-up": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-			"dev": true,
-			"dependencies": {
-				"locate-path": "^6.0.0",
-				"path-exists": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/flat-cache": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
-			"integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
-			"dev": true,
-			"dependencies": {
-				"rimraf": "^3.0.2"
-			},
-			"engines": {
-				"node": "^10.12.0 || >=12.0.0"
-			}
-		},
-		"node_modules/for-each": {
-			"version": "0.3.3",
-			"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-			"integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-			"dev": true,
-			"dependencies": {
-				"is-callable": "^1.1.3"
-			}
-		},
-		"node_modules/form-data": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-			"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-			"dev": true,
-			"dependencies": {
-				"asynckit": "^0.4.0",
-				"combined-stream": "^1.0.8",
-				"mime-types": "^2.1.12"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/fs.realpath": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-			"dev": true
-		},
-		"node_modules/fsevents": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-			"dev": true,
-			"hasInstallScript": true,
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-			}
-		},
-		"node_modules/function-bind": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-			"dev": true
-		},
-		"node_modules/functions-have-names": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-			"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-			"dev": true,
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/gensync": {
-			"version": "1.0.0-beta.2",
-			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/get-func-name": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-			"integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
-			"dev": true,
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/get-intrinsic": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-			"integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
-			"dev": true,
-			"dependencies": {
-				"function-bind": "^1.1.1",
-				"has": "^1.0.3",
-				"has-proto": "^1.0.1",
-				"has-symbols": "^1.0.3"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/glob": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
-			"integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
-			"dev": true,
-			"dependencies": {
-				"fs.realpath": "^1.0.0",
-				"inflight": "^1.0.4",
-				"inherits": "2",
-				"minimatch": "^5.0.1",
-				"once": "^1.3.0"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/glob-parent": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
-			"dependencies": {
-				"is-glob": "^4.0.1"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/glob/node_modules/brace-expansion": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-			"dev": true,
-			"dependencies": {
-				"balanced-match": "^1.0.0"
-			}
-		},
-		"node_modules/glob/node_modules/minimatch": {
-			"version": "5.1.6",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-			"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-			"dev": true,
-			"dependencies": {
-				"brace-expansion": "^2.0.1"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/globals": {
-			"version": "13.20.0",
-			"resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
-			"integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
-			"dev": true,
-			"dependencies": {
-				"type-fest": "^0.20.2"
-			},
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/globby": {
-			"version": "11.1.0",
-			"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-			"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-			"dev": true,
-			"dependencies": {
-				"array-union": "^2.1.0",
-				"dir-glob": "^3.0.1",
-				"fast-glob": "^3.2.9",
-				"ignore": "^5.2.0",
-				"merge2": "^1.4.1",
-				"slash": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/gopd": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-			"integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-			"dev": true,
-			"dependencies": {
-				"get-intrinsic": "^1.1.3"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/graceful-fs": {
-			"version": "4.2.11",
-			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-			"dev": true
-		},
-		"node_modules/grapheme-splitter": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-			"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
-			"dev": true
-		},
-		"node_modules/graphemer": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-			"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-			"dev": true
-		},
-		"node_modules/has": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-			"dev": true,
-			"dependencies": {
-				"function-bind": "^1.1.1"
-			},
-			"engines": {
-				"node": ">= 0.4.0"
-			}
-		},
-		"node_modules/has-bigints": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-			"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-			"dev": true,
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/has-flag": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/has-property-descriptors": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-			"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-			"dev": true,
-			"dependencies": {
-				"get-intrinsic": "^1.1.1"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/has-proto": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-			"integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-			"dev": true,
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/has-symbols": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-			"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-			"dev": true,
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/has-tostringtag": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-			"integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-			"dev": true,
-			"dependencies": {
-				"has-symbols": "^1.0.2"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/html-encoding-sniffer": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-			"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
-			"dev": true,
-			"dependencies": {
-				"whatwg-encoding": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/http-proxy-agent": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-			"integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
-			"dev": true,
-			"dependencies": {
-				"@tootallnate/once": "2",
-				"agent-base": "6",
-				"debug": "4"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/https-proxy-agent": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-			"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-			"dev": true,
-			"dependencies": {
-				"agent-base": "6",
-				"debug": "4"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/husky": {
-			"version": "8.0.3",
-			"resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz",
-			"integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==",
-			"dev": true,
-			"bin": {
-				"husky": "lib/bin.js"
-			},
-			"engines": {
-				"node": ">=14"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/typicode"
-			}
-		},
-		"node_modules/iconv-lite": {
-			"version": "0.6.3",
-			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-			"dev": true,
-			"dependencies": {
-				"safer-buffer": ">= 2.1.2 < 3.0.0"
-			},
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/ignore": {
-			"version": "5.2.4",
-			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
-			"integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
-			"dev": true,
-			"engines": {
-				"node": ">= 4"
-			}
-		},
-		"node_modules/ignore-walk": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-5.0.1.tgz",
-			"integrity": "sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==",
-			"dev": true,
-			"dependencies": {
-				"minimatch": "^5.0.1"
-			},
-			"engines": {
-				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
-			}
-		},
-		"node_modules/ignore-walk/node_modules/brace-expansion": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-			"dev": true,
-			"dependencies": {
-				"balanced-match": "^1.0.0"
-			}
-		},
-		"node_modules/ignore-walk/node_modules/minimatch": {
-			"version": "5.1.6",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-			"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-			"dev": true,
-			"dependencies": {
-				"brace-expansion": "^2.0.1"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/import-fresh": {
-			"version": "3.3.0",
-			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-			"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-			"dev": true,
-			"dependencies": {
-				"parent-module": "^1.0.0",
-				"resolve-from": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/import-meta-resolve": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-3.0.0.tgz",
-			"integrity": "sha512-4IwhLhNNA8yy445rPjD/lWh++7hMDOml2eHtd58eG7h+qK3EryMuuRbsHGPikCoAgIkkDnckKfWSk2iDla/ejg==",
-			"dev": true,
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/wooorm"
-			}
-		},
-		"node_modules/imurmurhash": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-			"integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.8.19"
-			}
-		},
-		"node_modules/inflight": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-			"dev": true,
-			"dependencies": {
-				"once": "^1.3.0",
-				"wrappy": "1"
-			}
-		},
-		"node_modules/inherits": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-			"dev": true
-		},
-		"node_modules/internal-slot": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
-			"integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
-			"dev": true,
-			"dependencies": {
-				"get-intrinsic": "^1.2.0",
-				"has": "^1.0.3",
-				"side-channel": "^1.0.4"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			}
-		},
-		"node_modules/is-arguments": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-			"integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.2",
-				"has-tostringtag": "^1.0.0"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-array-buffer": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-			"integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.2",
-				"get-intrinsic": "^1.2.0",
-				"is-typed-array": "^1.1.10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-bigint": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
-			"integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
-			"dev": true,
-			"dependencies": {
-				"has-bigints": "^1.0.1"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-binary-path": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-			"dev": true,
-			"dependencies": {
-				"binary-extensions": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/is-boolean-object": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
-			"integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.2",
-				"has-tostringtag": "^1.0.0"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-callable": {
-			"version": "1.2.7",
-			"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-			"integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-			"dev": true,
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-date-object": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-			"integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-			"dev": true,
-			"dependencies": {
-				"has-tostringtag": "^1.0.0"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-extglob": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/is-glob": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-			"dev": true,
-			"dependencies": {
-				"is-extglob": "^2.1.1"
-			},
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/is-map": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
-			"integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
-			"dev": true,
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-number": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.12.0"
-			}
-		},
-		"node_modules/is-number-object": {
-			"version": "1.0.7",
-			"resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
-			"integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
-			"dev": true,
-			"dependencies": {
-				"has-tostringtag": "^1.0.0"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-path-inside": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-			"integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/is-potential-custom-element-name": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-			"dev": true
-		},
-		"node_modules/is-reference": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.1.tgz",
-			"integrity": "sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==",
-			"peer": true,
-			"dependencies": {
-				"@types/estree": "*"
-			}
-		},
-		"node_modules/is-regex": {
-			"version": "1.1.4",
-			"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-			"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.2",
-				"has-tostringtag": "^1.0.0"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-set": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
-			"integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
-			"dev": true,
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-shared-array-buffer": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-			"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.2"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-string": {
-			"version": "1.0.7",
-			"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-			"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-			"dev": true,
-			"dependencies": {
-				"has-tostringtag": "^1.0.0"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-symbol": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-			"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-			"dev": true,
-			"dependencies": {
-				"has-symbols": "^1.0.2"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-typed-array": {
-			"version": "1.1.10",
-			"resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
-			"integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
-			"dev": true,
-			"dependencies": {
-				"available-typed-arrays": "^1.0.5",
-				"call-bind": "^1.0.2",
-				"for-each": "^0.3.3",
-				"gopd": "^1.0.1",
-				"has-tostringtag": "^1.0.0"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-weakmap": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
-			"integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
-			"dev": true,
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/is-weakset": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
-			"integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.2",
-				"get-intrinsic": "^1.1.1"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/isarray": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-			"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-			"dev": true
-		},
-		"node_modules/isexe": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-			"dev": true
-		},
-		"node_modules/jest-dom": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/jest-dom/-/jest-dom-4.0.0.tgz",
-			"integrity": "sha512-gBxYZlZB1Jgvf2gP2pRfjjUWF8woGBHj/g5rAQgFPB/0K2atGuhVcPO+BItyjWeKg9zM+dokgcMOH01vrWVMFA==",
-			"deprecated": "🚨 jest-dom has moved to @testing-library/jest-dom. Please uninstall jest-dom and install @testing-library/jest-dom instead, or use an older version of jest-dom. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)",
-			"dev": true
-		},
-		"node_modules/js-string-escape": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
-			"integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==",
-			"dev": true,
-			"engines": {
-				"node": ">= 0.8"
-			}
-		},
-		"node_modules/js-tokens": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-			"dev": true
-		},
-		"node_modules/js-yaml": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-			"dev": true,
-			"dependencies": {
-				"argparse": "^2.0.1"
-			},
-			"bin": {
-				"js-yaml": "bin/js-yaml.js"
-			}
-		},
-		"node_modules/jsdom": {
-			"version": "22.1.0",
-			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz",
-			"integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
-			"dev": true,
-			"dependencies": {
-				"abab": "^2.0.6",
-				"cssstyle": "^3.0.0",
-				"data-urls": "^4.0.0",
-				"decimal.js": "^10.4.3",
-				"domexception": "^4.0.0",
-				"form-data": "^4.0.0",
-				"html-encoding-sniffer": "^3.0.0",
-				"http-proxy-agent": "^5.0.0",
-				"https-proxy-agent": "^5.0.1",
-				"is-potential-custom-element-name": "^1.0.1",
-				"nwsapi": "^2.2.4",
-				"parse5": "^7.1.2",
-				"rrweb-cssom": "^0.6.0",
-				"saxes": "^6.0.0",
-				"symbol-tree": "^3.2.4",
-				"tough-cookie": "^4.1.2",
-				"w3c-xmlserializer": "^4.0.0",
-				"webidl-conversions": "^7.0.0",
-				"whatwg-encoding": "^2.0.0",
-				"whatwg-mimetype": "^3.0.0",
-				"whatwg-url": "^12.0.1",
-				"ws": "^8.13.0",
-				"xml-name-validator": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=16"
-			},
-			"peerDependencies": {
-				"canvas": "^2.5.0"
-			},
-			"peerDependenciesMeta": {
-				"canvas": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/jsesc": {
-			"version": "2.5.2",
-			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-			"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"jsesc": "bin/jsesc"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/json-schema-traverse": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-			"dev": true
-		},
-		"node_modules/json-stable-stringify-without-jsonify": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-			"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-			"dev": true
-		},
-		"node_modules/json5": {
-			"version": "2.2.3",
-			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"json5": "lib/cli.js"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/jsonc-parser": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-			"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
-			"dev": true
-		},
-		"node_modules/junit-report-builder": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/junit-report-builder/-/junit-report-builder-3.2.1.tgz",
-			"integrity": "sha512-IMCp5XyDQ4YESDE4Za7im3buM0/7cMnRfe17k2X8B05FnUl9vqnaliX6cgOEmPIeWKfJrEe/gANRq/XgqttCqQ==",
-			"dev": true,
-			"dependencies": {
-				"date-format": "4.0.3",
-				"lodash": "^4.17.21",
-				"make-dir": "^3.1.0",
-				"xmlbuilder": "^15.1.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/kleur": {
-			"version": "4.1.5",
-			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
-			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/known-css-properties": {
-			"version": "0.27.0",
-			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.27.0.tgz",
-			"integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==",
-			"dev": true
-		},
-		"node_modules/levn": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-			"integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-			"dev": true,
-			"dependencies": {
-				"prelude-ls": "^1.2.1",
-				"type-check": "~0.4.0"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/lilconfig": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/local-pkg": {
-			"version": "0.4.3",
-			"resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
-			"integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
-			"dev": true,
-			"engines": {
-				"node": ">=14"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/antfu"
-			}
-		},
-		"node_modules/locate-character": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"peer": true
-		},
-		"node_modules/locate-path": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-			"dev": true,
-			"dependencies": {
-				"p-locate": "^5.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/lodash": {
-			"version": "4.17.21",
-			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-			"dev": true
-		},
-		"node_modules/lodash.merge": {
-			"version": "4.6.2",
-			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-			"dev": true
-		},
-		"node_modules/loupe": {
-			"version": "2.3.6",
-			"resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",
-			"integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==",
-			"dev": true,
-			"dependencies": {
-				"get-func-name": "^2.0.0"
-			}
-		},
-		"node_modules/lower-case": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-			"dev": true,
-			"dependencies": {
-				"tslib": "^2.0.3"
-			}
-		},
-		"node_modules/lru-cache": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-			"dev": true,
-			"dependencies": {
-				"yallist": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/lz-string": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
-			"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-			"dev": true,
-			"bin": {
-				"lz-string": "bin/bin.js"
-			}
-		},
-		"node_modules/magic-string": {
-			"version": "0.30.0",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
-			"integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.13"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/make-dir": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-			"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-			"dev": true,
-			"dependencies": {
-				"semver": "^6.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/make-dir/node_modules/semver": {
-			"version": "6.3.1",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-			"dev": true,
-			"bin": {
-				"semver": "bin/semver.js"
-			}
-		},
-		"node_modules/md5-hex": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz",
-			"integrity": "sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==",
-			"dev": true,
-			"dependencies": {
-				"blueimp-md5": "^2.10.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/mdn-data": {
-			"version": "2.0.30",
-			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-			"peer": true
-		},
-		"node_modules/merge2": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-			"dev": true,
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/micromatch": {
-			"version": "4.0.5",
-			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-			"dev": true,
-			"dependencies": {
-				"braces": "^3.0.2",
-				"picomatch": "^2.3.1"
-			},
-			"engines": {
-				"node": ">=8.6"
-			}
-		},
-		"node_modules/mime": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
-			"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-			"dev": true,
-			"bin": {
-				"mime": "cli.js"
-			},
-			"engines": {
-				"node": ">=10.0.0"
-			}
-		},
-		"node_modules/mime-db": {
-			"version": "1.52.0",
-			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-			"dev": true,
-			"engines": {
-				"node": ">= 0.6"
-			}
-		},
-		"node_modules/mime-types": {
-			"version": "2.1.35",
-			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-			"dev": true,
-			"dependencies": {
-				"mime-db": "1.52.0"
-			},
-			"engines": {
-				"node": ">= 0.6"
-			}
-		},
-		"node_modules/min-indent": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-			"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-			"dev": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/minimatch": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
-			"dependencies": {
-				"brace-expansion": "^1.1.7"
-			},
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/minimist": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-			"dev": true,
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/mkdirp": {
-			"version": "0.5.6",
-			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-			"dev": true,
-			"dependencies": {
-				"minimist": "^1.2.6"
-			},
-			"bin": {
-				"mkdirp": "bin/cmd.js"
-			}
-		},
-		"node_modules/mlly": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.0.tgz",
-			"integrity": "sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==",
-			"dev": true,
-			"dependencies": {
-				"acorn": "^8.9.0",
-				"pathe": "^1.1.1",
-				"pkg-types": "^1.0.3",
-				"ufo": "^1.1.2"
-			}
-		},
-		"node_modules/mri": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
-			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
-			"dev": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/mrmime": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
-			"integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
-			"dev": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/ms": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-			"dev": true
-		},
-		"node_modules/mustache": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
-			"integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
-			"dev": true,
-			"bin": {
-				"mustache": "bin/mustache"
-			}
-		},
-		"node_modules/nanoid": {
-			"version": "3.3.6",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-			"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
-			"bin": {
-				"nanoid": "bin/nanoid.cjs"
-			},
-			"engines": {
-				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-			}
-		},
-		"node_modules/natural-compare": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-			"dev": true
-		},
-		"node_modules/natural-compare-lite": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-			"integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
-			"dev": true
-		},
-		"node_modules/no-case": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-			"dev": true,
-			"dependencies": {
-				"lower-case": "^2.0.2",
-				"tslib": "^2.0.3"
-			}
-		},
-		"node_modules/node-releases": {
-			"version": "2.0.14",
-			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-			"integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
-			"dev": true,
-			"optional": true,
-			"peer": true
-		},
-		"node_modules/normalize-path": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/npm-bundled": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-2.0.1.tgz",
-			"integrity": "sha512-gZLxXdjEzE/+mOstGDqR6b0EkhJ+kM6fxM6vUuckuctuVPh80Q6pw/rSZj9s4Gex9GxWtIicO1pc8DB9KZWudw==",
-			"dev": true,
-			"dependencies": {
-				"npm-normalize-package-bin": "^2.0.0"
-			},
-			"engines": {
-				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
-			}
-		},
-		"node_modules/npm-normalize-package-bin": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz",
-			"integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==",
-			"dev": true,
-			"engines": {
-				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
-			}
-		},
-		"node_modules/npm-packlist": {
-			"version": "5.1.3",
-			"resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-5.1.3.tgz",
-			"integrity": "sha512-263/0NGrn32YFYi4J533qzrQ/krmmrWwhKkzwTuM4f/07ug51odoaNjUexxO4vxlzURHcmYMH1QjvHjsNDKLVg==",
-			"dev": true,
-			"dependencies": {
-				"glob": "^8.0.1",
-				"ignore-walk": "^5.0.1",
-				"npm-bundled": "^2.0.0",
-				"npm-normalize-package-bin": "^2.0.0"
-			},
-			"bin": {
-				"npm-packlist": "bin/index.js"
-			},
-			"engines": {
-				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
-			}
-		},
-		"node_modules/nwsapi": {
-			"version": "2.2.4",
-			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.4.tgz",
-			"integrity": "sha512-NHj4rzRo0tQdijE9ZqAx6kYDcoRwYwSYzCA8MY3JzfxlrvEU0jhnhJT9BhqhJs7I/dKcrDm6TyulaRqZPIhN5g==",
-			"dev": true
-		},
-		"node_modules/object-inspect": {
-			"version": "1.12.3",
-			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-			"integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
-			"dev": true,
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/object-is": {
-			"version": "1.1.5",
-			"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-			"integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/object-keys": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-			"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-			"dev": true,
-			"engines": {
-				"node": ">= 0.4"
-			}
-		},
-		"node_modules/object.assign": {
-			"version": "4.1.4",
-			"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
-			"integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.4",
-				"has-symbols": "^1.0.3",
-				"object-keys": "^1.1.1"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/once": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-			"dev": true,
-			"dependencies": {
-				"wrappy": "1"
-			}
-		},
-		"node_modules/optionator": {
-			"version": "0.9.3",
-			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
-			"integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
-			"dev": true,
-			"dependencies": {
-				"@aashutoshrathi/word-wrap": "^1.2.3",
-				"deep-is": "^0.1.3",
-				"fast-levenshtein": "^2.0.6",
-				"levn": "^0.4.1",
-				"prelude-ls": "^1.2.1",
-				"type-check": "^0.4.0"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/p-limit": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-			"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-			"dev": true,
-			"dependencies": {
-				"yocto-queue": "^0.1.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/p-locate": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-			"dev": true,
-			"dependencies": {
-				"p-limit": "^3.0.2"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/parent-module": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-			"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-			"dev": true,
-			"dependencies": {
-				"callsites": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/parse5": {
-			"version": "7.1.2",
-			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
-			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-			"dev": true,
-			"dependencies": {
-				"entities": "^4.4.0"
-			},
-			"funding": {
-				"url": "https://github.com/inikulin/parse5?sponsor=1"
-			}
-		},
-		"node_modules/pascal-case": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-			"dev": true,
-			"dependencies": {
-				"no-case": "^3.0.4",
-				"tslib": "^2.0.3"
-			}
-		},
-		"node_modules/path-exists": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/path-is-absolute": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-			"dev": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/path-key": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/path-type": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/pathe": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
-			"integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
-			"dev": true
-		},
-		"node_modules/pathval": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
-			"integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
-			"dev": true,
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/periscopic": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
-			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-			"peer": true,
-			"dependencies": {
-				"@types/estree": "^1.0.0",
-				"estree-walker": "^3.0.0",
-				"is-reference": "^3.0.0"
-			}
-		},
-		"node_modules/picocolors": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-			"dev": true
-		},
-		"node_modules/picomatch": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"dev": true,
-			"engines": {
-				"node": ">=8.6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/jonschlinkert"
-			}
-		},
-		"node_modules/pkg-types": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
-			"integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
-			"dev": true,
-			"dependencies": {
-				"jsonc-parser": "^3.2.0",
-				"mlly": "^1.2.0",
-				"pathe": "^1.1.0"
-			}
-		},
-		"node_modules/playwright": {
-			"version": "1.41.2",
-			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.2.tgz",
-			"integrity": "sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==",
-			"dev": true,
-			"dependencies": {
-				"playwright-core": "1.41.2"
-			},
-			"bin": {
-				"playwright": "cli.js"
-			},
-			"engines": {
-				"node": ">=16"
-			},
-			"optionalDependencies": {
-				"fsevents": "2.3.2"
-			}
-		},
-		"node_modules/playwright-core": {
-			"version": "1.41.2",
-			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.2.tgz",
-			"integrity": "sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==",
-			"dev": true,
-			"bin": {
-				"playwright-core": "cli.js"
-			},
-			"engines": {
-				"node": ">=16"
-			}
-		},
-		"node_modules/postcss": {
-			"version": "8.4.23",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
-			"integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/postcss/"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/postcss"
-				},
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
-			"dependencies": {
-				"nanoid": "^3.3.6",
-				"picocolors": "^1.0.0",
-				"source-map-js": "^1.0.2"
-			},
-			"engines": {
-				"node": "^10 || ^12 || >=14"
-			}
-		},
-		"node_modules/postcss-load-config": {
-			"version": "3.1.4",
-			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
-			"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
-			"dev": true,
-			"dependencies": {
-				"lilconfig": "^2.0.5",
-				"yaml": "^1.10.2"
-			},
-			"engines": {
-				"node": ">= 10"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/postcss/"
-			},
-			"peerDependencies": {
-				"postcss": ">=8.0.9",
-				"ts-node": ">=9.0.0"
-			},
-			"peerDependenciesMeta": {
-				"postcss": {
-					"optional": true
-				},
-				"ts-node": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/postcss-safe-parser": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
-			"integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=12.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/postcss/"
-			},
-			"peerDependencies": {
-				"postcss": "^8.3.3"
-			}
-		},
-		"node_modules/postcss-scss": {
-			"version": "4.0.6",
-			"resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.6.tgz",
-			"integrity": "sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/postcss/"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/postcss-scss"
-				}
-			],
-			"engines": {
-				"node": ">=12.0"
-			},
-			"peerDependencies": {
-				"postcss": "^8.4.19"
-			}
-		},
-		"node_modules/postcss-selector-parser": {
-			"version": "6.0.13",
-			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-			"integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
-			"dev": true,
-			"dependencies": {
-				"cssesc": "^3.0.0",
-				"util-deprecate": "^1.0.2"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/prelude-ls": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
-			"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-			"dev": true,
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/prettier": {
-			"version": "2.8.8",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-			"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
-			"dev": true,
-			"bin": {
-				"prettier": "bin-prettier.js"
-			},
-			"engines": {
-				"node": ">=10.13.0"
-			},
-			"funding": {
-				"url": "https://github.com/prettier/prettier?sponsor=1"
-			}
-		},
-		"node_modules/prettier-plugin-svelte": {
-			"version": "2.10.1",
-			"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.10.1.tgz",
-			"integrity": "sha512-Wlq7Z5v2ueCubWo0TZzKc9XHcm7TDxqcuzRuGd0gcENfzfT4JZ9yDlCbEgxWgiPmLHkBjfOtpAWkcT28MCDpUQ==",
-			"dev": true,
-			"peerDependencies": {
-				"prettier": "^1.16.4 || ^2.0.0",
-				"svelte": "^3.2.0 || ^4.0.0-next.0"
-			}
-		},
-		"node_modules/pretty-format": {
-			"version": "27.5.1",
-			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-			"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-			"dev": true,
-			"dependencies": {
-				"ansi-regex": "^5.0.1",
-				"ansi-styles": "^5.0.0",
-				"react-is": "^17.0.1"
-			},
-			"engines": {
-				"node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-			}
-		},
-		"node_modules/pretty-format/node_modules/ansi-styles": {
-			"version": "5.2.0",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-			"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-			"dev": true,
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
-			}
-		},
-		"node_modules/psl": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-			"dev": true
-		},
-		"node_modules/publint": {
-			"version": "0.1.12",
-			"resolved": "https://registry.npmjs.org/publint/-/publint-0.1.12.tgz",
-			"integrity": "sha512-8LxkO430t/SOhUl0qXQWdXq34m6oyLcPhE4Kc8eXhOEnB82vCHcShPQ2kH53n/ksC7jWdRWDP7MPGxKJbntQfg==",
-			"dev": true,
-			"dependencies": {
-				"npm-packlist": "^5.1.3",
-				"picocolors": "^1.0.0",
-				"sade": "^1.8.1"
-			},
-			"bin": {
-				"publint": "lib/cli.js"
-			},
-			"engines": {
-				"node": ">=16"
-			},
-			"funding": {
-				"url": "https://bjornlu.com/sponsor"
-			}
-		},
-		"node_modules/punycode": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-			"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/querystringify": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-			"dev": true
-		},
-		"node_modules/queue-microtask": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-			"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/feross"
-				},
-				{
-					"type": "patreon",
-					"url": "https://www.patreon.com/feross"
-				},
-				{
-					"type": "consulting",
-					"url": "https://feross.org/support"
-				}
-			]
-		},
-		"node_modules/react-is": {
-			"version": "17.0.2",
-			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-			"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-			"dev": true
-		},
-		"node_modules/readdirp": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-			"dev": true,
-			"dependencies": {
-				"picomatch": "^2.2.1"
-			},
-			"engines": {
-				"node": ">=8.10.0"
-			}
-		},
-		"node_modules/regenerator-runtime": {
-			"version": "0.13.11",
-			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-			"dev": true
-		},
-		"node_modules/regexp.prototype.flags": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
-			"integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.2.0",
-				"functions-have-names": "^1.2.3"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/requires-port": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-			"dev": true
-		},
-		"node_modules/resolve-from": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-			"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-			"dev": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/reusify": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-			"dev": true,
-			"engines": {
-				"iojs": ">=1.0.0",
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/rimraf": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-			"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-			"dev": true,
-			"dependencies": {
-				"glob": "^7.1.3"
-			},
-			"bin": {
-				"rimraf": "bin.js"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/rimraf/node_modules/glob": {
-			"version": "7.2.3",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-			"dev": true,
-			"dependencies": {
-				"fs.realpath": "^1.0.0",
-				"inflight": "^1.0.4",
-				"inherits": "2",
-				"minimatch": "^3.1.1",
-				"once": "^1.3.0",
-				"path-is-absolute": "^1.0.0"
-			},
-			"engines": {
-				"node": "*"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/rollup": {
-			"version": "3.21.0",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
-			"integrity": "sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==",
-			"dev": true,
-			"bin": {
-				"rollup": "dist/bin/rollup"
-			},
-			"engines": {
-				"node": ">=14.18.0",
-				"npm": ">=8.0.0"
-			},
-			"optionalDependencies": {
-				"fsevents": "~2.3.2"
-			}
-		},
-		"node_modules/rrweb-cssom": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
-			"integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
-			"dev": true
-		},
-		"node_modules/run-parallel": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-			"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/feross"
-				},
-				{
-					"type": "patreon",
-					"url": "https://www.patreon.com/feross"
-				},
-				{
-					"type": "consulting",
-					"url": "https://feross.org/support"
-				}
-			],
-			"dependencies": {
-				"queue-microtask": "^1.2.2"
-			}
-		},
-		"node_modules/sade": {
-			"version": "1.8.1",
-			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
-			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
-			"dev": true,
-			"dependencies": {
-				"mri": "^1.1.0"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/safer-buffer": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-			"dev": true
-		},
-		"node_modules/sander": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
-			"integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
-			"dev": true,
-			"dependencies": {
-				"es6-promise": "^3.1.2",
-				"graceful-fs": "^4.1.3",
-				"mkdirp": "^0.5.1",
-				"rimraf": "^2.5.2"
-			}
-		},
-		"node_modules/sander/node_modules/glob": {
-			"version": "7.2.3",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-			"dev": true,
-			"dependencies": {
-				"fs.realpath": "^1.0.0",
-				"inflight": "^1.0.4",
-				"inherits": "2",
-				"minimatch": "^3.1.1",
-				"once": "^1.3.0",
-				"path-is-absolute": "^1.0.0"
-			},
-			"engines": {
-				"node": "*"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/sander/node_modules/rimraf": {
-			"version": "2.7.1",
-			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-			"dev": true,
-			"dependencies": {
-				"glob": "^7.1.3"
-			},
-			"bin": {
-				"rimraf": "bin.js"
-			}
-		},
-		"node_modules/saxes": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
-			"integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-			"dev": true,
-			"dependencies": {
-				"xmlchars": "^2.2.0"
-			},
-			"engines": {
-				"node": ">=v12.22.7"
-			}
-		},
-		"node_modules/semver": {
-			"version": "7.5.3",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
-			"integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
-			"dev": true,
-			"dependencies": {
-				"lru-cache": "^6.0.0"
-			},
-			"bin": {
-				"semver": "bin/semver.js"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/set-cookie-parser": {
-			"version": "2.6.0",
-			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
-			"integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==",
-			"dev": true
-		},
-		"node_modules/shebang-command": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-			"dev": true,
-			"dependencies": {
-				"shebang-regex": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/shebang-regex": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/side-channel": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-			"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-			"dev": true,
-			"dependencies": {
-				"call-bind": "^1.0.0",
-				"get-intrinsic": "^1.0.2",
-				"object-inspect": "^1.9.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/siginfo": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
-			"integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
-			"dev": true
-		},
-		"node_modules/sirv": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
-			"integrity": "sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==",
-			"dev": true,
-			"dependencies": {
-				"@polka/url": "^1.0.0-next.20",
-				"mrmime": "^1.0.0",
-				"totalist": "^3.0.0"
-			},
-			"engines": {
-				"node": ">= 10"
-			}
-		},
-		"node_modules/slash": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/sorcery": {
-			"version": "0.11.0",
-			"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.0.tgz",
-			"integrity": "sha512-J69LQ22xrQB1cIFJhPfgtLuI6BpWRiWu1Y3vSsIwK/eAScqJxd/+CJlUuHQRdX2C9NGFamq+KqNywGgaThwfHw==",
-			"dev": true,
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.14",
-				"buffer-crc32": "^0.2.5",
-				"minimist": "^1.2.0",
-				"sander": "^0.5.0"
-			},
-			"bin": {
-				"sorcery": "bin/sorcery"
-			}
-		},
-		"node_modules/source-map-js": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/stackback": {
-			"version": "0.0.2",
-			"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
-			"integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
-			"dev": true
-		},
-		"node_modules/std-env": {
-			"version": "3.3.2",
-			"resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.2.tgz",
-			"integrity": "sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA==",
-			"dev": true
-		},
-		"node_modules/stop-iteration-iterator": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
-			"integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==",
-			"dev": true,
-			"dependencies": {
-				"internal-slot": "^1.0.4"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			}
-		},
-		"node_modules/streamsearch": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
-			"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
-			"dev": true,
-			"engines": {
-				"node": ">=10.0.0"
-			}
-		},
-		"node_modules/strip-ansi": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-			"dev": true,
-			"dependencies": {
-				"ansi-regex": "^5.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/strip-indent": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-			"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-			"dev": true,
-			"dependencies": {
-				"min-indent": "^1.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/strip-json-comments": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-			"dev": true,
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/strip-literal": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.1.tgz",
-			"integrity": "sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==",
-			"dev": true,
-			"dependencies": {
-				"acorn": "^8.8.2"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/antfu"
-			}
-		},
-		"node_modules/supports-color": {
-			"version": "7.2.0",
-			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-			"dev": true,
-			"dependencies": {
-				"has-flag": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/svelte": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.0.0.tgz",
-			"integrity": "sha512-+yCYu3AEUu9n91dnQNGIbnVp8EmNQtuF/YImW4+FTXRHard7NMo+yTsWzggPAbj3fUEJ1FBJLkql/jkp6YB5pg==",
-			"peer": true,
-			"dependencies": {
-				"@ampproject/remapping": "^2.2.1",
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"@jridgewell/trace-mapping": "^0.3.18",
-				"acorn": "^8.8.2",
-				"aria-query": "^5.2.1",
-				"axobject-query": "^3.2.1",
-				"code-red": "^1.0.3",
-				"css-tree": "^2.3.1",
-				"estree-walker": "^3.0.3",
-				"is-reference": "^3.0.1",
-				"locate-character": "^3.0.0",
-				"magic-string": "^0.30.0",
-				"periscopic": "^3.1.0"
-			},
-			"engines": {
-				"node": ">=16"
-			}
-		},
-		"node_modules/svelte-check": {
-			"version": "3.4.4",
-			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.4.4.tgz",
-			"integrity": "sha512-Uys9+R65cj8TmP8f5UpS7B2xKpNLYNxEWJsA5ZoKcWq/uwvABFF7xS6iPQGLoa7hxz0DS6xU60YFpmq06E4JxA==",
-			"dev": true,
-			"dependencies": {
-				"@jridgewell/trace-mapping": "^0.3.17",
-				"chokidar": "^3.4.1",
-				"fast-glob": "^3.2.7",
-				"import-fresh": "^3.2.1",
-				"picocolors": "^1.0.0",
-				"sade": "^1.7.4",
-				"svelte-preprocess": "^5.0.3",
-				"typescript": "^5.0.3"
-			},
-			"bin": {
-				"svelte-check": "bin/svelte-check"
-			},
-			"peerDependencies": {
-				"svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0"
-			}
-		},
-		"node_modules/svelte-eslint-parser": {
-			"version": "0.32.0",
-			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.32.0.tgz",
-			"integrity": "sha512-Q8Nh3GHHoWZMv3Ej4zw+3+gyWPR8I5pPTJXEOvW+JOgwhGXqGKh7mOKNlVcEPtk+PCGiK9TPaRtvRkKoJR327A==",
-			"dev": true,
-			"dependencies": {
-				"eslint-scope": "^7.0.0",
-				"eslint-visitor-keys": "^3.0.0",
-				"espree": "^9.0.0",
-				"postcss": "^8.4.23",
-				"postcss-scss": "^4.0.6"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ota-meshi"
-			},
-			"peerDependencies": {
-				"svelte": "^3.37.0 || ^4.0.0"
-			},
-			"peerDependenciesMeta": {
-				"svelte": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/svelte-eslint-parser/node_modules/eslint-scope": {
-			"version": "7.2.0",
-			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
-			"integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
-			"dev": true,
-			"dependencies": {
-				"esrecurse": "^4.3.0",
-				"estraverse": "^5.2.0"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/svelte-eslint-parser/node_modules/estraverse": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-			"dev": true,
-			"engines": {
-				"node": ">=4.0"
-			}
-		},
-		"node_modules/svelte-hmr": {
-			"version": "0.15.2",
-			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.2.tgz",
-			"integrity": "sha512-q/bAruCvFLwvNbeE1x3n37TYFb3mTBJ6TrCq6p2CoFbSTNhDE9oAtEfpy+wmc9So8AG0Tja+X0/mJzX9tSfvIg==",
-			"dev": true,
-			"engines": {
-				"node": "^12.20 || ^14.13.1 || >= 16"
-			},
-			"peerDependencies": {
-				"svelte": "^3.19.0 || ^4.0.0-next.0"
-			}
-		},
-		"node_modules/svelte-preprocess": {
-			"version": "5.0.4",
-			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.4.tgz",
-			"integrity": "sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==",
-			"dev": true,
-			"hasInstallScript": true,
-			"dependencies": {
-				"@types/pug": "^2.0.6",
-				"detect-indent": "^6.1.0",
-				"magic-string": "^0.27.0",
-				"sorcery": "^0.11.0",
-				"strip-indent": "^3.0.0"
-			},
-			"engines": {
-				"node": ">= 14.10.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.10.2",
-				"coffeescript": "^2.5.1",
-				"less": "^3.11.3 || ^4.0.0",
-				"postcss": "^7 || ^8",
-				"postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0",
-				"pug": "^3.0.0",
-				"sass": "^1.26.8",
-				"stylus": "^0.55.0",
-				"sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
-				"svelte": "^3.23.0 || ^4.0.0-next.0 || ^4.0.0",
-				"typescript": ">=3.9.5 || ^4.0.0 || ^5.0.0"
-			},
-			"peerDependenciesMeta": {
-				"@babel/core": {
-					"optional": true
-				},
-				"coffeescript": {
-					"optional": true
-				},
-				"less": {
-					"optional": true
-				},
-				"postcss": {
-					"optional": true
-				},
-				"postcss-load-config": {
-					"optional": true
-				},
-				"pug": {
-					"optional": true
-				},
-				"sass": {
-					"optional": true
-				},
-				"stylus": {
-					"optional": true
-				},
-				"sugarss": {
-					"optional": true
-				},
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/svelte-preprocess/node_modules/magic-string": {
-			"version": "0.27.0",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
-			"integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
-			"dev": true,
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.13"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/svelte/node_modules/@jridgewell/sourcemap-codec": {
-			"version": "1.4.15",
-			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-			"peer": true
-		},
-		"node_modules/svelte/node_modules/aria-query": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-			"peer": true,
-			"dependencies": {
-				"dequal": "^2.0.3"
-			}
-		},
-		"node_modules/svelte2tsx": {
-			"version": "0.6.16",
-			"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.16.tgz",
-			"integrity": "sha512-AX2iYEvQdd4tq5BokRdOOA0N/nD37ZnhXAomrAG9EEGl2cjkvoQUwe1Aluo6FSzA684WJjhxW+1ZXmveCmvDrA==",
-			"dev": true,
-			"dependencies": {
-				"dedent-js": "^1.0.1",
-				"pascal-case": "^3.1.1"
-			},
-			"peerDependencies": {
-				"svelte": "^3.55 || ^4.0.0-next.0 || ^4.0",
-				"typescript": "^4.9.4 || ^5.0.0"
-			}
-		},
-		"node_modules/symbol-tree": {
-			"version": "3.2.4",
-			"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-			"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-			"dev": true
-		},
-		"node_modules/text-table": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-			"dev": true
-		},
-		"node_modules/time-zone": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz",
-			"integrity": "sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==",
-			"dev": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/tinybench": {
-			"version": "2.5.0",
-			"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.0.tgz",
-			"integrity": "sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==",
-			"dev": true
-		},
-		"node_modules/tinypool": {
-			"version": "0.5.0",
-			"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.5.0.tgz",
-			"integrity": "sha512-paHQtnrlS1QZYKF/GnLoOM/DN9fqaGOFbCbxzAhwniySnzl9Ebk8w73/dd34DAhe/obUbPAOldTyYXQZxnPBPQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=14.0.0"
-			}
-		},
-		"node_modules/tinyspy": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.1.tgz",
-			"integrity": "sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==",
-			"dev": true,
-			"engines": {
-				"node": ">=14.0.0"
-			}
-		},
-		"node_modules/to-fast-properties": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-			"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/to-regex-range": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-			"dev": true,
-			"dependencies": {
-				"is-number": "^7.0.0"
-			},
-			"engines": {
-				"node": ">=8.0"
-			}
-		},
-		"node_modules/totalist": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.0.tgz",
-			"integrity": "sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/tough-cookie": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
-			"integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
-			"dev": true,
-			"dependencies": {
-				"psl": "^1.1.33",
-				"punycode": "^2.1.1",
-				"universalify": "^0.2.0",
-				"url-parse": "^1.5.3"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/tr46": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-			"integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
-			"dev": true,
-			"dependencies": {
-				"punycode": "^2.3.0"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
-		"node_modules/tslib": {
-			"version": "2.5.3",
-			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
-			"integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==",
-			"dev": true
-		},
-		"node_modules/tsutils": {
-			"version": "3.21.0",
-			"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-			"integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-			"dev": true,
-			"dependencies": {
-				"tslib": "^1.8.1"
-			},
-			"engines": {
-				"node": ">= 6"
-			},
-			"peerDependencies": {
-				"typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-			}
-		},
-		"node_modules/tsutils/node_modules/tslib": {
-			"version": "1.14.1",
-			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-			"dev": true
-		},
-		"node_modules/type-check": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
-			"integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-			"dev": true,
-			"dependencies": {
-				"prelude-ls": "^1.2.1"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
-		"node_modules/type-detect": {
-			"version": "4.0.8",
-			"resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-			"integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-			"dev": true,
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/type-fest": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-			"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/typescript": {
-			"version": "5.1.6",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
-			"integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
-			"dev": true,
-			"bin": {
-				"tsc": "bin/tsc",
-				"tsserver": "bin/tsserver"
-			},
-			"engines": {
-				"node": ">=14.17"
-			}
-		},
-		"node_modules/ufo": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.2.tgz",
-			"integrity": "sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==",
-			"dev": true
-		},
-		"node_modules/undici": {
-			"version": "5.22.0",
-			"resolved": "https://registry.npmjs.org/undici/-/undici-5.22.0.tgz",
-			"integrity": "sha512-fR9RXCc+6Dxav4P9VV/sp5w3eFiSdOjJYsbtWfd4s5L5C4ogyuVpdKIVHeW0vV1MloM65/f7W45nR9ZxwVdyiA==",
-			"dev": true,
-			"dependencies": {
-				"busboy": "^1.6.0"
-			},
-			"engines": {
-				"node": ">=14.0"
-			}
-		},
-		"node_modules/universalify": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-			"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-			"dev": true,
-			"engines": {
-				"node": ">= 4.0.0"
-			}
-		},
-		"node_modules/update-browserslist-db": {
-			"version": "1.0.13",
-			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
-			"integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
-			"dev": true,
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/browserslist"
-				},
-				{
-					"type": "tidelift",
-					"url": "https://tidelift.com/funding/github/npm/browserslist"
-				},
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/ai"
-				}
-			],
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"escalade": "^3.1.1",
-				"picocolors": "^1.0.0"
-			},
-			"bin": {
-				"update-browserslist-db": "cli.js"
-			},
-			"peerDependencies": {
-				"browserslist": ">= 4.21.0"
-			}
-		},
-		"node_modules/uri-js": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-			"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-			"dev": true,
-			"dependencies": {
-				"punycode": "^2.1.0"
-			}
-		},
-		"node_modules/url-parse": {
-			"version": "1.5.10",
-			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-			"dev": true,
-			"dependencies": {
-				"querystringify": "^2.1.1",
-				"requires-port": "^1.0.0"
-			}
-		},
-		"node_modules/util-deprecate": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-			"dev": true
-		},
-		"node_modules/vite": {
-			"version": "4.3.9",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz",
-			"integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==",
-			"dev": true,
-			"dependencies": {
-				"esbuild": "^0.17.5",
-				"postcss": "^8.4.23",
-				"rollup": "^3.21.0"
-			},
-			"bin": {
-				"vite": "bin/vite.js"
-			},
-			"engines": {
-				"node": "^14.18.0 || >=16.0.0"
-			},
-			"optionalDependencies": {
-				"fsevents": "~2.3.2"
-			},
-			"peerDependencies": {
-				"@types/node": ">= 14",
-				"less": "*",
-				"sass": "*",
-				"stylus": "*",
-				"sugarss": "*",
-				"terser": "^5.4.0"
-			},
-			"peerDependenciesMeta": {
-				"@types/node": {
-					"optional": true
-				},
-				"less": {
-					"optional": true
-				},
-				"sass": {
-					"optional": true
-				},
-				"stylus": {
-					"optional": true
-				},
-				"sugarss": {
-					"optional": true
-				},
-				"terser": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/vite-node": {
-			"version": "0.32.2",
-			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-0.32.2.tgz",
-			"integrity": "sha512-dTQ1DCLwl2aEseov7cfQ+kDMNJpM1ebpyMMMwWzBvLbis8Nla/6c9WQcqpPssTwS6Rp/+U6KwlIj8Eapw4bLdA==",
-			"dev": true,
-			"dependencies": {
-				"cac": "^6.7.14",
-				"debug": "^4.3.4",
-				"mlly": "^1.2.0",
-				"pathe": "^1.1.0",
-				"picocolors": "^1.0.0",
-				"vite": "^3.0.0 || ^4.0.0"
-			},
-			"bin": {
-				"vite-node": "vite-node.mjs"
-			},
-			"engines": {
-				"node": ">=v14.18.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/vitest"
-			}
-		},
-		"node_modules/vite/node_modules/@esbuild/darwin-arm64": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz",
-			"integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/vite/node_modules/esbuild": {
-			"version": "0.17.19",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
-			"integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
-			"dev": true,
-			"hasInstallScript": true,
-			"bin": {
-				"esbuild": "bin/esbuild"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"optionalDependencies": {
-				"@esbuild/android-arm": "0.17.19",
-				"@esbuild/android-arm64": "0.17.19",
-				"@esbuild/android-x64": "0.17.19",
-				"@esbuild/darwin-arm64": "0.17.19",
-				"@esbuild/darwin-x64": "0.17.19",
-				"@esbuild/freebsd-arm64": "0.17.19",
-				"@esbuild/freebsd-x64": "0.17.19",
-				"@esbuild/linux-arm": "0.17.19",
-				"@esbuild/linux-arm64": "0.17.19",
-				"@esbuild/linux-ia32": "0.17.19",
-				"@esbuild/linux-loong64": "0.17.19",
-				"@esbuild/linux-mips64el": "0.17.19",
-				"@esbuild/linux-ppc64": "0.17.19",
-				"@esbuild/linux-riscv64": "0.17.19",
-				"@esbuild/linux-s390x": "0.17.19",
-				"@esbuild/linux-x64": "0.17.19",
-				"@esbuild/netbsd-x64": "0.17.19",
-				"@esbuild/openbsd-x64": "0.17.19",
-				"@esbuild/sunos-x64": "0.17.19",
-				"@esbuild/win32-arm64": "0.17.19",
-				"@esbuild/win32-ia32": "0.17.19",
-				"@esbuild/win32-x64": "0.17.19"
-			}
-		},
-		"node_modules/vitefu": {
-			"version": "0.2.4",
-			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.4.tgz",
-			"integrity": "sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==",
-			"dev": true,
-			"peerDependencies": {
-				"vite": "^3.0.0 || ^4.0.0"
-			},
-			"peerDependenciesMeta": {
-				"vite": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/vitest": {
-			"version": "0.32.2",
-			"resolved": "https://registry.npmjs.org/vitest/-/vitest-0.32.2.tgz",
-			"integrity": "sha512-hU8GNNuQfwuQmqTLfiKcqEhZY72Zxb7nnN07koCUNmntNxbKQnVbeIS6sqUgR3eXSlbOpit8+/gr1KpqoMgWCQ==",
-			"dev": true,
-			"dependencies": {
-				"@types/chai": "^4.3.5",
-				"@types/chai-subset": "^1.3.3",
-				"@types/node": "*",
-				"@vitest/expect": "0.32.2",
-				"@vitest/runner": "0.32.2",
-				"@vitest/snapshot": "0.32.2",
-				"@vitest/spy": "0.32.2",
-				"@vitest/utils": "0.32.2",
-				"acorn": "^8.8.2",
-				"acorn-walk": "^8.2.0",
-				"cac": "^6.7.14",
-				"chai": "^4.3.7",
-				"concordance": "^5.0.4",
-				"debug": "^4.3.4",
-				"local-pkg": "^0.4.3",
-				"magic-string": "^0.30.0",
-				"pathe": "^1.1.0",
-				"picocolors": "^1.0.0",
-				"std-env": "^3.3.2",
-				"strip-literal": "^1.0.1",
-				"tinybench": "^2.5.0",
-				"tinypool": "^0.5.0",
-				"vite": "^3.0.0 || ^4.0.0",
-				"vite-node": "0.32.2",
-				"why-is-node-running": "^2.2.2"
-			},
-			"bin": {
-				"vitest": "vitest.mjs"
-			},
-			"engines": {
-				"node": ">=v14.18.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/vitest"
-			},
-			"peerDependencies": {
-				"@edge-runtime/vm": "*",
-				"@vitest/browser": "*",
-				"@vitest/ui": "*",
-				"happy-dom": "*",
-				"jsdom": "*",
-				"playwright": "*",
-				"safaridriver": "*",
-				"webdriverio": "*"
-			},
-			"peerDependenciesMeta": {
-				"@edge-runtime/vm": {
-					"optional": true
-				},
-				"@vitest/browser": {
-					"optional": true
-				},
-				"@vitest/ui": {
-					"optional": true
-				},
-				"happy-dom": {
-					"optional": true
-				},
-				"jsdom": {
-					"optional": true
-				},
-				"playwright": {
-					"optional": true
-				},
-				"safaridriver": {
-					"optional": true
-				},
-				"webdriverio": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/w3c-xmlserializer": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-			"integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
-			"dev": true,
-			"dependencies": {
-				"xml-name-validator": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
-		"node_modules/webidl-conversions": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-			"dev": true,
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/well-known-symbols": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/well-known-symbols/-/well-known-symbols-2.0.0.tgz",
-			"integrity": "sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/whatwg-encoding": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-			"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
-			"dev": true,
-			"dependencies": {
-				"iconv-lite": "0.6.3"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/whatwg-mimetype": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-			"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
-			"dev": true,
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/whatwg-url": {
-			"version": "12.0.1",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
-			"integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
-			"dev": true,
-			"dependencies": {
-				"tr46": "^4.1.1",
-				"webidl-conversions": "^7.0.0"
-			},
-			"engines": {
-				"node": ">=14"
-			}
-		},
-		"node_modules/which": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-			"dev": true,
-			"dependencies": {
-				"isexe": "^2.0.0"
-			},
-			"bin": {
-				"node-which": "bin/node-which"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
-		"node_modules/which-boxed-primitive": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-			"integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-			"dev": true,
-			"dependencies": {
-				"is-bigint": "^1.0.1",
-				"is-boolean-object": "^1.1.0",
-				"is-number-object": "^1.0.4",
-				"is-string": "^1.0.5",
-				"is-symbol": "^1.0.3"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/which-collection": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
-			"integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
-			"dev": true,
-			"dependencies": {
-				"is-map": "^2.0.1",
-				"is-set": "^2.0.1",
-				"is-weakmap": "^2.0.1",
-				"is-weakset": "^2.0.1"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/which-typed-array": {
-			"version": "1.1.9",
-			"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
-			"integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
-			"dev": true,
-			"dependencies": {
-				"available-typed-arrays": "^1.0.5",
-				"call-bind": "^1.0.2",
-				"for-each": "^0.3.3",
-				"gopd": "^1.0.1",
-				"has-tostringtag": "^1.0.0",
-				"is-typed-array": "^1.1.10"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/why-is-node-running": {
-			"version": "2.2.2",
-			"resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
-			"integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==",
-			"dev": true,
-			"dependencies": {
-				"siginfo": "^2.0.0",
-				"stackback": "0.0.2"
-			},
-			"bin": {
-				"why-is-node-running": "cli.js"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/wrappy": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-			"dev": true
-		},
-		"node_modules/ws": {
-			"version": "8.13.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-			"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-			"dev": true,
-			"engines": {
-				"node": ">=10.0.0"
-			},
-			"peerDependencies": {
-				"bufferutil": "^4.0.1",
-				"utf-8-validate": ">=5.0.2"
-			},
-			"peerDependenciesMeta": {
-				"bufferutil": {
-					"optional": true
-				},
-				"utf-8-validate": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/xml-name-validator": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-			"integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
-			"dev": true,
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/xmlbuilder": {
-			"version": "15.1.1",
-			"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
-			"integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==",
-			"dev": true,
-			"engines": {
-				"node": ">=8.0"
-			}
-		},
-		"node_modules/xmlchars": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-			"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-			"dev": true
-		},
-		"node_modules/yallist": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-			"dev": true
-		},
-		"node_modules/yaml": {
-			"version": "1.10.2",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-			"dev": true,
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/yocto-queue": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-			"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-			"dev": true,
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		}
-	}
-}
diff --git a/package.json b/package.json
index ee6d68c5a..6004bdfaa 100644
--- a/package.json
+++ b/package.json
@@ -28,8 +28,7 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
-		"prepare": "husky install"
+		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"exports": {
 		".": {
@@ -66,8 +65,7 @@
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.3",
 		"vite": "^6.0.11",
-		"vitest": "^3.0.4",
-		"husky": "^9.1.7"
+		"vitest": "^3.0.4"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -79,4 +77,4 @@
 	"peerDependencies": {
 		"svelte": "^5.19.3"
 	}
-}
+}
\ No newline at end of file

From 77008ffec1c8aed14a90d1e528cb9c3829fe9d94 Mon Sep 17 00:00:00 2001
From: jknohr <johann@nohr.com>
Date: Sat, 25 Jan 2025 22:54:13 +0700
Subject: [PATCH 22/26]  Please enter the commit message for your changes.
 Lines starting  with '' will be ignored, and an empty message aborts the
 commit.

 On branch main
 Your branch is up to date with 'origin/main'.

 Changes to be committed:
	modified:   src/example-components/Carbon/Carbon.svelte
	modified:   src/example-components/Connector.svelte
	modified:   src/example-components/CustomAnchor.svelte
	modified:   src/example-components/CustomControls.svelte
	modified:   src/example-components/CustomEdge.svelte
	modified:   src/example-components/CustomNode.svelte
	modified:   src/example-components/InputNode.svelte
	modified:   src/example-components/sandbox/CircleColor.svelte
	modified:   src/example-components/sandbox/ColorAnchor.svelte
	modified:   src/example-components/sandbox/CustomAnchor.svelte
	modified:   src/example-components/sandbox/DashCount.svelte
	modified:   src/example-components/sandbox/NodeWrapper.svelte
	modified:   src/example-components/sandbox/Noise.svelte
	modified:   src/example-components/sandbox/Output.svelte
	modified:   src/example-components/sandbox/Scale.svelte
	modified:   src/example-components/sandbox/Thickness.svelte
	modified:   src/example-components/sandbox/Visualizer.svelte
	modified:   src/example-components/test-components/Audio.svelte
	modified:   src/example-components/test-components/Bass.svelte
	modified:   src/example-components/test-components/CircleColor.svelte
	modified:   src/example-components/test-components/ColorAnchor.svelte
	modified:   src/example-components/test-components/CustomAnchor.svelte
	modified:   src/example-components/test-components/DashCount.svelte
	modified:   src/example-components/test-components/KnobOutputDisplayer.svelte
	modified:   src/example-components/test-components/NodeWrapper.svelte
	modified:   src/example-components/test-components/Noise.svelte
	modified:   src/example-components/test-components/Output.svelte
	modified:   src/example-components/test-components/Scale.svelte
	modified:   src/example-components/test-components/Thickness.svelte
	modified:   src/example-components/test-components/Treble.svelte
	modified:   src/example-components/test-components/Visualizer.svelte
	modified:   src/example-components/test-components/Volume.svelte
	modified:   src/lib/assets/icons/Icon.svelte
	modified:   src/lib/components/Anchor/Anchor.svelte
	modified:   src/lib/components/Anchor/DefaultAnchor.svelte
	modified:   src/lib/components/ContrastTheme/ContrastTheme.svelte
	modified:   src/lib/components/Controls/Controls.svelte
	modified:   src/lib/components/Drawer/Drawer.svelte
	modified:   src/lib/components/Drawer/DrawerAnchor.svelte
	modified:   src/lib/components/Drawer/DrawerController.svelte
	modified:   src/lib/components/Drawer/DrawerEdge.svelte
	modified:   src/lib/components/Drawer/DrawerNode.svelte
	modified:   src/lib/components/Edge/Edge.svelte
	modified:   src/lib/components/Edge/EdgeContext.svelte
	modified:   src/lib/components/Editor/Editor.svelte
	modified:   src/lib/components/FlowChart/FlowChart.svelte
	modified:   src/lib/components/Group/Group.svelte
	modified:   src/lib/components/Group/GroupBoundingBox.svelte
	modified:   src/lib/components/Minimap/MiniGroupBox.svelte
	modified:   src/lib/components/Minimap/MiniNode.svelte
	modified:   src/lib/components/Minimap/Minimap.svelte
	modified:   src/lib/components/Node/DefaultNode.svelte
	modified:   src/lib/components/Node/InternalNode.svelte
	modified:   src/lib/components/Node/Node.svelte
	modified:   src/lib/components/Resizer/Resizer.svelte
	modified:   src/lib/components/SelectionBox/SelectionBox.svelte
	modified:   src/lib/components/ThemeToggle/ThemeToggle.svelte
	modified:   src/lib/components/data/ColorPicker/ColorWheel.svelte
	modified:   src/lib/components/data/Knob/Knob.svelte
	modified:   src/lib/components/data/RadioGroup/RadioGroup.svelte
	modified:   src/lib/components/data/Slider/Slider.svelte
	modified:   src/lib/components/data/TextField/TextField.svelte
	modified:   src/lib/components/data/Toggle/Toggle.svelte
	modified:   src/lib/containers/Background/Background.svelte
	modified:   src/lib/containers/Graph/Graph.svelte
	modified:   src/lib/containers/Svelvet/Svelvet.svelte
	modified:   src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte
	modified:   src/lib/renderers/GraphRenderer/GraphRenderer.svelte
	modified:   src/routes/+page.svelte
	modified:   src/routes/arrows/ArrowEdge.svelte
	modified:   src/routes/arrows/ArrowEdgeBlue.svelte
	modified:   src/routes/color-test/+page.svelte
	modified:   src/routes/cursor-drop/+page.svelte
	modified:   src/routes/drawer-test/+page.svelte
	modified:   src/routes/drawer/+page.svelte
	modified:   src/routes/edge-delete/+page.svelte
	modified:   src/routes/edges/+page.svelte
	modified:   src/routes/hiding-nodes/+page.svelte
	modified:   src/routes/knob-test/+page.svelte
	modified:   src/routes/movement/+page.svelte
	modified:   src/routes/sandbox/+page.svelte
	modified:   src/routes/scroll-issue/+page.svelte
	modified:   src/routes/shapes/+page.svelte
	modified:   src/routes/styling/+page.svelte
	modified:   src/routes/tests/+page.svelte
	modified:   src/routes/theme-toggle/+page.svelte
	modified:   src/routes/website/+page.svelte
---
 src/example-components/Carbon/Carbon.svelte   |  28 ++--
 src/example-components/Connector.svelte       |  24 ++--
 src/example-components/CustomAnchor.svelte    |  12 +-
 src/example-components/CustomControls.svelte  |  10 +-
 src/example-components/CustomEdge.svelte      |   6 +-
 src/example-components/CustomNode.svelte      |  30 +++--
 src/example-components/InputNode.svelte       |  88 +++++++------
 .../sandbox/CircleColor.svelte                |  58 ++++----
 .../sandbox/ColorAnchor.svelte                |  12 +-
 .../sandbox/CustomAnchor.svelte               |  12 +-
 .../sandbox/DashCount.svelte                  |  14 +-
 .../sandbox/NodeWrapper.svelte                |  35 +++--
 src/example-components/sandbox/Noise.svelte   |  14 +-
 src/example-components/sandbox/Output.svelte  |  74 ++++++-----
 src/example-components/sandbox/Scale.svelte   |  14 +-
 .../sandbox/Thickness.svelte                  |  16 ++-
 .../sandbox/Visualizer.svelte                 |  38 ++++--
 .../test-components/Audio.svelte              |  80 ++++++-----
 .../test-components/Bass.svelte               |  32 ++---
 .../test-components/CircleColor.svelte        |  58 ++++----
 .../test-components/ColorAnchor.svelte        |  12 +-
 .../test-components/CustomAnchor.svelte       |  12 +-
 .../test-components/DashCount.svelte          |  14 +-
 .../KnobOutputDisplayer.svelte                |  28 ++--
 .../test-components/NodeWrapper.svelte        |  35 +++--
 .../test-components/Noise.svelte              |  14 +-
 .../test-components/Output.svelte             |  74 ++++++-----
 .../test-components/Scale.svelte              |  74 ++++++-----
 .../test-components/Thickness.svelte          |  16 ++-
 .../test-components/Treble.svelte             |  32 ++---
 .../test-components/Visualizer.svelte         |  38 ++++--
 .../test-components/Volume.svelte             |  32 ++---
 src/lib/assets/icons/Icon.svelte              |  14 +-
 src/lib/components/Anchor/Anchor.svelte       |   2 +
 .../components/Anchor/DefaultAnchor.svelte    |  25 +++-
 .../ContrastTheme/ContrastTheme.svelte        |   2 +
 src/lib/components/Controls/Controls.svelte   |   2 +
 src/lib/components/Drawer/Drawer.svelte       |   2 +
 src/lib/components/Drawer/DrawerAnchor.svelte |   2 +
 .../components/Drawer/DrawerController.svelte |   2 +
 src/lib/components/Drawer/DrawerEdge.svelte   |  13 +-
 src/lib/components/Drawer/DrawerNode.svelte   |   2 +-
 src/lib/components/Edge/Edge.svelte           |   2 +
 src/lib/components/Edge/EdgeContext.svelte    |   9 +-
 src/lib/components/Editor/Editor.svelte       |   2 +
 src/lib/components/FlowChart/FlowChart.svelte |   2 +
 src/lib/components/Group/Group.svelte         |   2 +
 .../components/Group/GroupBoundingBox.svelte  |  28 ++--
 .../components/Minimap/MiniGroupBox.svelte    |  25 +++-
 src/lib/components/Minimap/MiniNode.svelte    |  40 ++++--
 src/lib/components/Minimap/Minimap.svelte     |   2 +
 src/lib/components/Node/DefaultNode.svelte    |   2 +
 src/lib/components/Node/InternalNode.svelte   |   2 +
 src/lib/components/Node/Node.svelte           |   2 +
 src/lib/components/Resizer/Resizer.svelte     |   2 +
 .../SelectionBox/SelectionBox.svelte          |  52 +++++---
 .../components/ThemeToggle/ThemeToggle.svelte |   2 +
 .../data/ColorPicker/ColorWheel.svelte        |   2 +
 src/lib/components/data/Knob/Knob.svelte      |   2 +
 .../data/RadioGroup/RadioGroup.svelte         |   2 +
 src/lib/components/data/Slider/Slider.svelte  | 109 ++++++++-------
 .../data/TextField/TextField.svelte           |  15 ++-
 src/lib/components/data/Toggle/Toggle.svelte  |   2 +
 .../containers/Background/Background.svelte   |  65 +++++----
 src/lib/containers/Graph/Graph.svelte         |   2 +
 src/lib/containers/Svelvet/Svelvet.svelte     |   2 +
 .../ZoomPanWrapper/ZoomPanWrapper.svelte      |   2 +
 .../GraphRenderer/GraphRenderer.svelte        |   2 +
 src/routes/+page.svelte                       |   2 +
 src/routes/arrows/ArrowEdge.svelte            |   1 +
 src/routes/arrows/ArrowEdgeBlue.svelte        |   1 +
 src/routes/color-test/+page.svelte            |  10 +-
 src/routes/cursor-drop/+page.svelte           |  50 +++----
 src/routes/drawer-test/+page.svelte           |   4 +-
 src/routes/drawer/+page.svelte                | 124 +++++++++---------
 src/routes/edge-delete/+page.svelte           |  10 +-
 src/routes/edges/+page.svelte                 |   4 +-
 src/routes/hiding-nodes/+page.svelte          |   7 +-
 src/routes/knob-test/+page.svelte             |   4 +-
 src/routes/movement/+page.svelte              |  10 +-
 src/routes/sandbox/+page.svelte               |   4 +-
 src/routes/scroll-issue/+page.svelte          |   4 +-
 src/routes/shapes/+page.svelte                |   4 +-
 src/routes/styling/+page.svelte               |   4 +-
 src/routes/tests/+page.svelte                 |   8 +-
 src/routes/theme-toggle/+page.svelte          |   4 +-
 src/routes/website/+page.svelte               |   4 +-
 87 files changed, 1052 insertions(+), 688 deletions(-)

diff --git a/src/example-components/Carbon/Carbon.svelte b/src/example-components/Carbon/Carbon.svelte
index 75366143c..07e497140 100644
--- a/src/example-components/Carbon/Carbon.svelte
+++ b/src/example-components/Carbon/Carbon.svelte
@@ -3,20 +3,22 @@
 	import Table from './Table.svelte';
 </script>
 
-<Node useDefaults id="node-a" position={{ x: 10, y: 100 }} let:selected>
-	<div class="node">
-		<div class="header">
-			<h1>Table 1</h1>
+<Node useDefaults id="node-a" position={{ x: 10, y: 100 }} >
+	{#snippet children({ selected })}
+		<div class="node">
+			<div class="header">
+				<h1>Table 1</h1>
+			</div>
+			<Table />
+			<div class="input-anchors">
+				<Anchor />
+			</div>
+			<div class="output-anchors">
+				<Anchor />
+			</div>
 		</div>
-		<Table />
-		<div class="input-anchors">
-			<Anchor />
-		</div>
-		<div class="output-anchors">
-			<Anchor />
-		</div>
-	</div>
-	<Resizer width height />
+		<Resizer width height />
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/Connector.svelte b/src/example-components/Connector.svelte
index 9345a12e9..cf9749f23 100644
--- a/src/example-components/Connector.svelte
+++ b/src/example-components/Connector.svelte
@@ -11,17 +11,19 @@
 <Node
 	position={{ x: 100, y: 300 }}
 	dimensions={{ width: 400, height: 300 }}
-	let:connect
-	let:disconnect
+	
+	
 	useDefaults
 >
-	<div>
-		<button on:click={() => connect(2)}>Connect 2</button>
-		<button on:click={() => addAndConnect(connect)}>Connect and Add</button>
-		<button on:click={() => disconnect(2)}>Disconnect Last From 2</button>
-		<button on:click={() => disconnect([[2, '3']])}>Disconnect Node 2/Anchor 3</button>
-		<button on:click={() => connect(3)}>Connect 3</button>
-		<button on:click={() => disconnect(3)}>Disconnect Last From 3</button>
-	</div>
-	<Anchor />
+	{#snippet children({ connect, disconnect })}
+		<div>
+			<button onclick={() => connect(2)}>Connect 2</button>
+			<button onclick={() => addAndConnect(connect)}>Connect and Add</button>
+			<button onclick={() => disconnect(2)}>Disconnect Last From 2</button>
+			<button onclick={() => disconnect([[2, '3']])}>Disconnect Node 2/Anchor 3</button>
+			<button onclick={() => connect(3)}>Connect 3</button>
+			<button onclick={() => disconnect(3)}>Disconnect Last From 3</button>
+		</div>
+		<Anchor />
+	{/snippet}
 </Node>
diff --git a/src/example-components/CustomAnchor.svelte b/src/example-components/CustomAnchor.svelte
index 5b8b0999f..46c7e1e09 100644
--- a/src/example-components/CustomAnchor.svelte
+++ b/src/example-components/CustomAnchor.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-	export let linked: boolean;
-	export let connecting: boolean;
-	export let hovering: boolean;
+	interface Props {
+		linked: boolean;
+		connecting: boolean;
+		hovering: boolean;
+	}
+
+	let { linked, connecting, hovering }: Props = $props();
 </script>
 
-<div class:linked class:hovering class:connecting class="my-anchor" />
+<div class:linked class:hovering class:connecting class="my-anchor"></div>
 
 <style>
 	.my-anchor {
diff --git a/src/example-components/CustomControls.svelte b/src/example-components/CustomControls.svelte
index cb74828d2..8d2d23e34 100644
--- a/src/example-components/CustomControls.svelte
+++ b/src/example-components/CustomControls.svelte
@@ -1,8 +1,12 @@
 <script>
+	import { stopPropagation } from 'svelte/legacy';
+
 	import { Controls } from '$lib';
 </script>
 
-<Controls let:zoomIn let:zoomOut let:fitView let:unhideAll corner="SW">
-	<button on:click|stopPropagation={zoomIn}>ZOOMER</button>
-	<button on:click|stopPropagation={zoomOut}>UN ZOOMER</button>
+<Controls     corner="SW">
+	{#snippet children({ zoomIn, zoomOut, fitView, unhideAll })}
+		<button onclick={stopPropagation(zoomIn)}>ZOOMER</button>
+		<button onclick={stopPropagation(zoomOut)}>UN ZOOMER</button>
+	{/snippet}
 </Controls>
diff --git a/src/example-components/CustomEdge.svelte b/src/example-components/CustomEdge.svelte
index eab11ca6d..d6cd4ded3 100644
--- a/src/example-components/CustomEdge.svelte
+++ b/src/example-components/CustomEdge.svelte
@@ -3,7 +3,7 @@
 	import type { CSSColorString } from '$lib/types';
 
 	let color: CSSColorString = 'yellow';
-	let edge: Edge;
+	let edge: Edge = $state();
 </script>
 
 <Edge
@@ -14,7 +14,9 @@
 	labelPosition={0.8}
 	animate
 >
-	<button id="destroy-edge" on:click={edge.destroy} slot="label">Custom Label</button>
+	{#snippet label()}
+		<button id="destroy-edge" onclick={edge.destroy} >Custom Label</button>
+	{/snippet}
 </Edge>
 
 <style>
diff --git a/src/example-components/CustomNode.svelte b/src/example-components/CustomNode.svelte
index e7ac4e559..6d8731a59 100644
--- a/src/example-components/CustomNode.svelte
+++ b/src/example-components/CustomNode.svelte
@@ -5,21 +5,23 @@
 	const parameter = writable(10);
 </script>
 
-<Node let:grabHandle let:selected>
-	<div class="node" use:grabHandle class:selected>
-		<Slider parameterStore={parameter} />
-		<div class="input-anchors">
-			<Anchor
-				on:disconnection={() => console.log('disconnection')}
-				on:connection={() => console.log('connection')}
-				input
-				id="1"
-			/>
+<Node  >
+	{#snippet children({ grabHandle, selected })}
+		<div class="node" use:grabHandle class:selected>
+			<Slider parameterStore={parameter} />
+			<div class="input-anchors">
+				<Anchor
+					on:disconnection={() => console.log('disconnection')}
+					on:connection={() => console.log('connection')}
+					input
+					id="1"
+				/>
+			</div>
+			<div class="output-anchors">
+				<Anchor output id="5" />
+			</div>
 		</div>
-		<div class="output-anchors">
-			<Anchor output id="5" />
-		</div>
-	</div>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/InputNode.svelte b/src/example-components/InputNode.svelte
index 274926581..5971f7da5 100644
--- a/src/example-components/InputNode.svelte
+++ b/src/example-components/InputNode.svelte
@@ -1,53 +1,55 @@
 <script lang="ts">
 	import { Anchor, Node } from '$lib';
 
-	let text = 'Test';
-	let checked = true;
-	let color = '#ff0000';
-	let date = new Date();
-	let datetime = new Date();
-	let email = '';
-	let month = '';
-	let number = 0;
-	let password = '';
-	let radio = '';
-	let range = 0;
-	let search = '';
-	let tel = '';
+	let text = $state('Test');
+	let checked = $state(true);
+	let color = $state('#ff0000');
+	let date = $state(new Date());
+	let datetime = $state(new Date());
+	let email = $state('');
+	let month = $state('');
+	let number = $state(0);
+	let password = $state('');
+	let radio = $state('');
+	let range = $state(0);
+	let search = $state('');
+	let tel = $state('');
 	let url = '';
 	let week = '';
 </script>
 
-<Node id="input" bgColor="black" label="StartNode" borderRadius={10} let:destroy>
-	<div class="node">
-		<input id="text-test" type="text" bind:value={text} />
-		<input id="checkbox-test" type="checkbox" bind:checked />
-		<input type="color" bind:value={color} />
-		<input type="date" bind:value={date} />
-		<input type="datetime-local" bind:value={datetime} />
-		<input type="email" bind:value={email} />
-		<input type="month" bind:value={month} />
-		<input type="number" bind:value={number} />
-		<input type="password" bind:value={password} />
-		<input type="radio" bind:value={radio} />
-		<input type="range" bind:value={range} />
-		<input type="search" bind:value={search} />
-		<input type="tel" bind:value={tel} />
-		<select id="numberSelect">
-			<option value="1">1</option>
-			<option value="2">2</option>
-			<option value="3">3</option>
-			<option value="4">4</option>
-			<option value="5">5</option>
-			<option value="6">6</option>
-			<option value="7">7</option>
-			<option value="8">8</option>
-			<option value="9">9</option>
-			<option value="10">10</option>
-		</select>
-		<textarea id="textarea-test" />
-		<button on:click={destroy}>Test</button>
-	</div>
+<Node id="input" bgColor="black" label="StartNode" borderRadius={10} >
+	{#snippet children({ destroy })}
+		<div class="node">
+			<input id="text-test" type="text" bind:value={text} />
+			<input id="checkbox-test" type="checkbox" bind:checked />
+			<input type="color" bind:value={color} />
+			<input type="date" bind:value={date} />
+			<input type="datetime-local" bind:value={datetime} />
+			<input type="email" bind:value={email} />
+			<input type="month" bind:value={month} />
+			<input type="number" bind:value={number} />
+			<input type="password" bind:value={password} />
+			<input type="radio" bind:value={radio} />
+			<input type="range" bind:value={range} />
+			<input type="search" bind:value={search} />
+			<input type="tel" bind:value={tel} />
+			<select id="numberSelect">
+				<option value="1">1</option>
+				<option value="2">2</option>
+				<option value="3">3</option>
+				<option value="4">4</option>
+				<option value="5">5</option>
+				<option value="6">6</option>
+				<option value="7">7</option>
+				<option value="8">8</option>
+				<option value="9">9</option>
+				<option value="10">10</option>
+			</select>
+			<textarea id="textarea-test"></textarea>
+			<button onclick={destroy}>Test</button>
+		</div>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/sandbox/CircleColor.svelte b/src/example-components/sandbox/CircleColor.svelte
index 158b1b072..c917fef0a 100644
--- a/src/example-components/sandbox/CircleColor.svelte
+++ b/src/example-components/sandbox/CircleColor.svelte
@@ -17,34 +17,38 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults rotation={-5} position={{ x: 50, y: 400 }} let:selected>
-	<p class="note" id="custom">
-		Built In
-		<br />
-		Components
-	</p>
-	<NodeWrapper title="Color">
-		<div class="node-body">
-			<ColorPicker parameterStore={$inputs.color} />
+<Node useDefaults rotation={-5} position={{ x: 50, y: 400 }} >
+	{#snippet children({ selected })}
+		<p class="note" id="custom">
+			Built In
+			<br />
+			Components
+		</p>
+		<NodeWrapper title="Color">
+			<div class="node-body">
+				<ColorPicker parameterStore={$inputs.color} />
+			</div>
+		</NodeWrapper>
+		<div class="output-anchors">
+			<Anchor
+				connections={[['output', 'color']]}
+				
+				
+				outputStore={output}
+				output
+				edgeColor={output}
+				edgeLabel="Dynamic Edges"
+				edgeStyle="bezier"
+				edge={CustomEdge}
+				locked
+			>
+				{#snippet children({ linked, connecting })}
+						<ColorAnchor color={output} {connecting} {linked} />
+									{/snippet}
+				</Anchor>
 		</div>
-	</NodeWrapper>
-	<div class="output-anchors">
-		<Anchor
-			connections={[['output', 'color']]}
-			let:linked
-			let:connecting
-			outputStore={output}
-			output
-			edgeColor={output}
-			edgeLabel="Dynamic Edges"
-			edgeStyle="bezier"
-			edge={CustomEdge}
-			locked
-		>
-			<ColorAnchor color={output} {connecting} {linked} />
-		</Anchor>
-	</div>
-	<Resizer rotation />
+		<Resizer rotation />
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/sandbox/ColorAnchor.svelte b/src/example-components/sandbox/ColorAnchor.svelte
index e7add71fd..128326b62 100644
--- a/src/example-components/sandbox/ColorAnchor.svelte
+++ b/src/example-components/sandbox/ColorAnchor.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
 	import type { CSSColorString, CustomWritable } from '$lib';
 
-	export let linked: boolean = false;
-	export let connecting: boolean = false;
-	export let color: CustomWritable<CSSColorString>;
+	interface Props {
+		linked?: boolean;
+		connecting?: boolean;
+		color: CustomWritable<CSSColorString>;
+	}
+
+	let { linked = false, connecting = false, color }: Props = $props();
 </script>
 
-<div style:--color={$color} class:linked class:connecting class="my-anchor" />
+<div style:--color={$color} class:linked class:connecting class="my-anchor"></div>
 
 <style>
 	.my-anchor {
diff --git a/src/example-components/sandbox/CustomAnchor.svelte b/src/example-components/sandbox/CustomAnchor.svelte
index 5b8b0999f..46c7e1e09 100644
--- a/src/example-components/sandbox/CustomAnchor.svelte
+++ b/src/example-components/sandbox/CustomAnchor.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-	export let linked: boolean;
-	export let connecting: boolean;
-	export let hovering: boolean;
+	interface Props {
+		linked: boolean;
+		connecting: boolean;
+		hovering: boolean;
+	}
+
+	let { linked, connecting, hovering }: Props = $props();
 </script>
 
-<div class:linked class:hovering class:connecting class="my-anchor" />
+<div class:linked class:hovering class:connecting class="my-anchor"></div>
 
 <style>
 	.my-anchor {
diff --git a/src/example-components/sandbox/DashCount.svelte b/src/example-components/sandbox/DashCount.svelte
index 8195b191a..49f7b698d 100644
--- a/src/example-components/sandbox/DashCount.svelte
+++ b/src/example-components/sandbox/DashCount.svelte
@@ -14,12 +14,14 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults position={{ x: 40, y: 158 }} let:selected>
-	<NodeWrapper title="Dash Count" outputStore={output} key="dashCount">
-		<div class="node-body">
-			<Slider min={0} fixed={0} max={30} step={1} parameterStore={$inputs.length} />
-		</div>
-	</NodeWrapper>
+<Node useDefaults position={{ x: 40, y: 158 }} >
+	{#snippet children({ selected })}
+		<NodeWrapper title="Dash Count" outputStore={output} key="dashCount">
+			<div class="node-body">
+				<Slider min={0} fixed={0} max={30} step={1} parameterStore={$inputs.length} />
+			</div>
+		</NodeWrapper>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/sandbox/NodeWrapper.svelte b/src/example-components/sandbox/NodeWrapper.svelte
index 81a821c1b..20381abe0 100644
--- a/src/example-components/sandbox/NodeWrapper.svelte
+++ b/src/example-components/sandbox/NodeWrapper.svelte
@@ -2,34 +2,47 @@
 	import { Anchor, generateOutput } from '$lib';
 	import CustomAnchor from './CustomAnchor.svelte';
 
-	export let title: string;
-	export let outputStore: ReturnType<typeof generateOutput> | null = null;
-	export let key = '';
-	export let destroy: null | (() => void) = null;
+	interface Props {
+		title: string;
+		outputStore?: ReturnType<typeof generateOutput> | null;
+		key?: string;
+		destroy?: null | (() => void);
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		title,
+		outputStore = null,
+		key = '',
+		destroy = null,
+		children
+	}: Props = $props();
 </script>
 
 <div class="node">
 	<div class="header">
 		<h1>{title}</h1>
 		{#if destroy}
-			<button class="destroy" on:click={destroy}>X</button>
+			<button class="destroy" onclick={destroy}>X</button>
 		{/if}
 	</div>
-	<slot />
+	{@render children?.()}
 </div>
 {#if outputStore && key}
 	<div class="output-anchors">
 		<Anchor
 			id={key}
 			connections={[['output', key]]}
-			let:linked
-			let:connecting
-			let:hovering
+			
+			
+			
 			{outputStore}
 			output
 		>
-			<CustomAnchor {hovering} {connecting} {linked} />
-		</Anchor>
+			{#snippet children({ linked, connecting, hovering })}
+						<CustomAnchor {hovering} {connecting} {linked} />
+								{/snippet}
+				</Anchor>
 	</div>
 {/if}
 
diff --git a/src/example-components/sandbox/Noise.svelte b/src/example-components/sandbox/Noise.svelte
index 10568ad7b..e0c775941 100644
--- a/src/example-components/sandbox/Noise.svelte
+++ b/src/example-components/sandbox/Noise.svelte
@@ -14,12 +14,14 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults position={{ x: 320, y: 550 }} let:destroy>
-	<NodeWrapper {destroy} title="Noise" outputStore={output} key="noise">
-		<div class="node-body">
-			<Slider min={0} max={1} fixed={2} step={0.01} parameterStore={$inputs.num} />
-		</div>
-	</NodeWrapper>
+<Node useDefaults position={{ x: 320, y: 550 }} >
+	{#snippet children({ destroy })}
+		<NodeWrapper {destroy} title="Noise" outputStore={output} key="noise">
+			<div class="node-body">
+				<Slider min={0} max={1} fixed={2} step={0.01} parameterStore={$inputs.num} />
+			</div>
+		</NodeWrapper>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/sandbox/Output.svelte b/src/example-components/sandbox/Output.svelte
index e6285338a..f080f18c4 100644
--- a/src/example-components/sandbox/Output.svelte
+++ b/src/example-components/sandbox/Output.svelte
@@ -27,40 +27,48 @@
 	const output = generateOutput(inputs, processor);
 </script>
 
-<Node useDefaults id="output" position={{ x: 560, y: 30 }} let:selected locked>
-	<div class="node" class:selected>
-		<Visualizer {...$output} />
-		<div class="input-anchors">
-			{#each Object.keys(initialData) as key}
-				{#if key === 'color'}
-					<Anchor id={key} let:connecting let:linked inputsStore={inputs} {key} input locked>
-						<ColorAnchor color={$inputs[key]} {connecting} {linked} />
-					</Anchor>
-				{:else if key === 'animation'}
-					<Anchor
-						id={key}
-						on:disconnection={() => {
-							if ($inputs && typeof $inputs.animation.set === 'function') {
-								$inputs.animation.set(0);
-							}
-						}}
-						let:hovering
-						let:connecting
-						let:linked
-						inputsStore={inputs}
-						{key}
-						input
-					>
-						<CustomAnchor {hovering} {connecting} {linked} />
-					</Anchor>
-				{:else}
-					<Anchor id={key} let:hovering let:connecting let:linked inputsStore={inputs} {key} input>
-						<CustomAnchor {hovering} {connecting} {linked} />
-					</Anchor>
-				{/if}
-			{/each}
+<Node useDefaults id="output" position={{ x: 560, y: 30 }}  locked>
+	{#snippet children({ selected })}
+		<div class="node" class:selected>
+			<Visualizer {...$output} />
+			<div class="input-anchors">
+				{#each Object.keys(initialData) as key}
+					{#if key === 'color'}
+						<Anchor id={key}   inputsStore={inputs} {key} input locked>
+							{#snippet children({ connecting, linked })}
+												<ColorAnchor color={$inputs[key]} {connecting} {linked} />
+																		{/snippet}
+										</Anchor>
+					{:else if key === 'animation'}
+						<Anchor
+							id={key}
+							on:disconnection={() => {
+								if ($inputs && typeof $inputs.animation.set === 'function') {
+									$inputs.animation.set(0);
+								}
+							}}
+							
+							
+							
+							inputsStore={inputs}
+							{key}
+							input
+						>
+							{#snippet children({ hovering, connecting, linked })}
+														<CustomAnchor {hovering} {connecting} {linked} />
+																				{/snippet}
+												</Anchor>
+					{:else}
+						<Anchor id={key}    inputsStore={inputs} {key} input>
+							{#snippet children({ hovering, connecting, linked })}
+														<CustomAnchor {hovering} {connecting} {linked} />
+																				{/snippet}
+												</Anchor>
+					{/if}
+				{/each}
+			</div>
 		</div>
-	</div>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/sandbox/Scale.svelte b/src/example-components/sandbox/Scale.svelte
index 6cfb1652e..5d5a0e4c5 100644
--- a/src/example-components/sandbox/Scale.svelte
+++ b/src/example-components/sandbox/Scale.svelte
@@ -14,12 +14,14 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults id="numCircles" position={{ x: 40, y: 268 }} let:selected>
-	<NodeWrapper title="Scale" outputStore={output} key="scale">
-		<div class="node-body">
-			<Slider min={25} max={90} step={1} parameterStore={$inputs.num} />
-		</div>
-	</NodeWrapper>
+<Node useDefaults id="numCircles" position={{ x: 40, y: 268 }} >
+	{#snippet children({ selected })}
+		<NodeWrapper title="Scale" outputStore={output} key="scale">
+			<div class="node-body">
+				<Slider min={25} max={90} step={1} parameterStore={$inputs.num} />
+			</div>
+		</NodeWrapper>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/sandbox/Thickness.svelte b/src/example-components/sandbox/Thickness.svelte
index 8b8c0bd18..932657e6a 100644
--- a/src/example-components/sandbox/Thickness.svelte
+++ b/src/example-components/sandbox/Thickness.svelte
@@ -14,13 +14,15 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults position={{ x: 40, y: 50 }} let:selected>
-	<span class="note" id="custom">Custom Nodes</span>
-	<NodeWrapper title="Line Thickness" outputStore={output} key="strokeWidth">
-		<div class="node-body">
-			<Slider min={1} max={12} fixed={1} step={0.1} parameterStore={$inputs.width} />
-		</div>
-	</NodeWrapper>
+<Node useDefaults position={{ x: 40, y: 50 }} >
+	{#snippet children({ selected })}
+		<span class="note" id="custom">Custom Nodes</span>
+		<NodeWrapper title="Line Thickness" outputStore={output} key="strokeWidth">
+			<div class="node-body">
+				<Slider min={1} max={12} fixed={1} step={0.1} parameterStore={$inputs.width} />
+			</div>
+		</NodeWrapper>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/sandbox/Visualizer.svelte b/src/example-components/sandbox/Visualizer.svelte
index 28a69d8e7..e17db777a 100644
--- a/src/example-components/sandbox/Visualizer.svelte
+++ b/src/example-components/sandbox/Visualizer.svelte
@@ -1,11 +1,25 @@
 <script lang="ts">
-	export let size = 200;
-	export let strokeWidth = 4;
-	export let dashCount = 5;
-	export let scale = 30;
-	export let animation = 0;
-	export let color = 'red';
-	export let noise = 0; // Add noise parameter
+	import { run } from 'svelte/legacy';
+
+	interface Props {
+		size?: number;
+		strokeWidth?: number;
+		dashCount?: number;
+		scale?: number;
+		animation?: number;
+		color?: string;
+		noise?: number; // Add noise parameter
+	}
+
+	let {
+		size = 200,
+		strokeWidth = 4,
+		dashCount = 5,
+		scale = 30,
+		animation = 0,
+		color = 'red',
+		noise = 0
+	}: Props = $props();
 
 	interface Circle {
 		cx: number;
@@ -16,14 +30,10 @@
 		angle: number;
 	}
 
-	let circles: Array<Circle> = [];
+	let circles: Array<Circle> = $state([]);
 	let dashLength;
 	let gapLength;
-	$: animate = animation;
 
-	$: {
-		circles = generateCircles(size, strokeWidth, dashCount, scale, noise);
-	}
 
 	const random = Array(50)
 		.fill(null)
@@ -63,6 +73,10 @@
 		}
 		return generatedCircles;
 	}
+	let animate = $derived(animation);
+	run(() => {
+		circles = generateCircles(size, strokeWidth, dashCount, scale, noise);
+	});
 </script>
 
 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/example-components/test-components/Audio.svelte b/src/example-components/test-components/Audio.svelte
index 156a7c832..94e0a4e57 100644
--- a/src/example-components/test-components/Audio.svelte
+++ b/src/example-components/test-components/Audio.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { onDestroy } from 'svelte';
 	import CustomAnchor from './CustomAnchor.svelte';
 	import ColorAnchor from './ColorAnchor.svelte';
@@ -8,9 +10,9 @@
 	let audioContext: any;
 	let audioBuffer: any;
 	let audioSource: any;
-	let bassFilter: any;
-	let trebleFilter: any;
-	let gainNode: any;
+	let bassFilter: any = $state();
+	let trebleFilter: any = $state();
+	let gainNode: any = $state();
 
 	let song: string =
 		'https://otnmsonvlxvlokpdgsky.supabase.co/storage/v1/object/public/ape-escape-time-station/What%20is%20Love.mp3?t=2023-05-18T05%3A01%3A32.321Z';
@@ -43,12 +45,18 @@
 
 	// Create the gain node for volume control
 	gainNode = audioContext.createGain();
-	$: gainNode.gain.value = $output.volume;
+	run(() => {
+		gainNode.gain.value = $output.volume;
+	});
 
 	// Set the bass and treble levels
-	$: bassFilter.gain.value = $output.bass;
+	run(() => {
+		bassFilter.gain.value = $output.bass;
+	});
 
-	$: trebleFilter.gain.value = $output.treble;
+	run(() => {
+		trebleFilter.gain.value = $output.treble;
+	});
 	console.log($output.treble);
 
 	// Connect the audio source to the filters and gain node
@@ -87,39 +95,43 @@
 	}
 </script>
 
-<Node useDefaults id="output" position={{ x: 550, y: 300 }} let:selected>
-	<div class="contentWrapper">
-		<div class="node" class:selected>
-			<button on:click={() => loadAudio(song)}>Load Audio</button>
-			<button on:click={play}>Play</button>
-			<button on:click={stop}>Stop</button>
-		</div>
-		<div class="audio_controls">
-			<div class="col input-anchors">
-				{#each Object.keys(initialData) as key}
-					<Anchor id={key} let:hovering let:connecting let:linked inputsStore={inputs} {key} input>
-						<CustomAnchor {hovering} {connecting} {linked} />
-					</Anchor>
-				{/each}
+<Node useDefaults id="output" position={{ x: 550, y: 300 }} >
+	{#snippet children({ selected })}
+		<div class="contentWrapper">
+			<div class="node" class:selected>
+				<button onclick={() => loadAudio(song)}>Load Audio</button>
+				<button onclick={play}>Play</button>
+				<button onclick={stop}>Stop</button>
 			</div>
-			<div class="col col_2">
-				<div id="bass-level">
-					Bass:
-					<span>{bassFilter.gain.value} dB</span>
-				</div>
-
-				<div id="treble-level">
-					Treble:
-					<span>{trebleFilter.gain.value} dB</span>
+			<div class="audio_controls">
+				<div class="col input-anchors">
+					{#each Object.keys(initialData) as key}
+						<Anchor id={key}    inputsStore={inputs} {key} input>
+							{#snippet children({ hovering, connecting, linked })}
+												<CustomAnchor {hovering} {connecting} {linked} />
+																		{/snippet}
+										</Anchor>
+					{/each}
 				</div>
-
-				<div id="volume-level">
-					Volume:
-					<span>{$output.volume.toFixed()}%</span>
+				<div class="col col_2">
+					<div id="bass-level">
+						Bass:
+						<span>{bassFilter.gain.value} dB</span>
+					</div>
+
+					<div id="treble-level">
+						Treble:
+						<span>{trebleFilter.gain.value} dB</span>
+					</div>
+
+					<div id="volume-level">
+						Volume:
+						<span>{$output.volume.toFixed()}%</span>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/test-components/Bass.svelte b/src/example-components/test-components/Bass.svelte
index 72d115e38..cafc24d91 100644
--- a/src/example-components/test-components/Bass.svelte
+++ b/src/example-components/test-components/Bass.svelte
@@ -16,19 +16,21 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults position={{ x: 110, y: 50 }} let:selected>
-	<NodeWrapper title="Bass" outputStore={output} key="bass">
-		<div class="node-body">
-			<Knob
-				fixed={0}
-				min={0}
-				max={20}
-				step={2}
-				minDegree={30}
-				maxDegree={330}
-				parameterStore={$inputs.data}
-			/>
-		</div>
-	</NodeWrapper>
-	<Resizer width height rotation />
+<Node useDefaults position={{ x: 110, y: 50 }} >
+	{#snippet children({ selected })}
+		<NodeWrapper title="Bass" outputStore={output} key="bass">
+			<div class="node-body">
+				<Knob
+					fixed={0}
+					min={0}
+					max={20}
+					step={2}
+					minDegree={30}
+					maxDegree={330}
+					parameterStore={$inputs.data}
+				/>
+			</div>
+		</NodeWrapper>
+		<Resizer width height rotation />
+	{/snippet}
 </Node>
diff --git a/src/example-components/test-components/CircleColor.svelte b/src/example-components/test-components/CircleColor.svelte
index bae2c8255..52a1c0e69 100644
--- a/src/example-components/test-components/CircleColor.svelte
+++ b/src/example-components/test-components/CircleColor.svelte
@@ -17,34 +17,38 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults rotation={-5} position={{ x: 50, y: 400 }} let:selected>
-	<p class="note" id="custom">
-		Built In
-		<br />
-		Components
-	</p>
-	<NodeWrapper title="Color">
-		<div class="node-body">
-			<ColorPicker parameterStore={$inputs.color} />
+<Node useDefaults rotation={-5} position={{ x: 50, y: 400 }} >
+	{#snippet children({ selected })}
+		<p class="note" id="custom">
+			Built In
+			<br />
+			Components
+		</p>
+		<NodeWrapper title="Color">
+			<div class="node-body">
+				<ColorPicker parameterStore={$inputs.color} />
+			</div>
+		</NodeWrapper>
+		<div class="output-anchors">
+			<Anchor
+				connections={[['output', 'color']]}
+				
+				
+				outputStore={output}
+				output
+				edgeColor={output}
+				edgeLabel="Dynamic Edges"
+				edgeStyle="bezier"
+				edge={CustomEdge}
+				locked
+			>
+				{#snippet children({ linked, connecting })}
+						<ColorAnchor color={output} {connecting} {linked} />
+									{/snippet}
+				</Anchor>
 		</div>
-	</NodeWrapper>
-	<div class="output-anchors">
-		<Anchor
-			connections={[['output', 'color']]}
-			let:linked
-			let:connecting
-			outputStore={output}
-			output
-			edgeColor={output}
-			edgeLabel="Dynamic Edges"
-			edgeStyle="bezier"
-			edge={CustomEdge}
-			locked
-		>
-			<ColorAnchor color={output} {connecting} {linked} />
-		</Anchor>
-	</div>
-	<Resizer rotation />
+		<Resizer rotation />
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/test-components/ColorAnchor.svelte b/src/example-components/test-components/ColorAnchor.svelte
index 2dd86030f..ada80605f 100644
--- a/src/example-components/test-components/ColorAnchor.svelte
+++ b/src/example-components/test-components/ColorAnchor.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
 	import type { CSSColorString, CustomWritable } from '$lib';
 
-	export let linked = false;
-	export let connecting = false;
-	export let color: CustomWritable<CSSColorString>;
+	interface Props {
+		linked?: boolean;
+		connecting?: boolean;
+		color: CustomWritable<CSSColorString>;
+	}
+
+	let { linked = false, connecting = false, color }: Props = $props();
 </script>
 
-<div style:--color={$color} class:linked class:connecting class="my-anchor" />
+<div style:--color={$color} class:linked class:connecting class="my-anchor"></div>
 
 <style>
 	.my-anchor {
diff --git a/src/example-components/test-components/CustomAnchor.svelte b/src/example-components/test-components/CustomAnchor.svelte
index 4069f6f83..bdcc4e960 100644
--- a/src/example-components/test-components/CustomAnchor.svelte
+++ b/src/example-components/test-components/CustomAnchor.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-	export let linked: boolean;
-	export let connecting: boolean;
-	export let hovering: boolean;
+	interface Props {
+		linked: boolean;
+		connecting: boolean;
+		hovering: boolean;
+	}
+
+	let { linked, connecting, hovering }: Props = $props();
 </script>
 
-<div class:linked class:hovering class:connecting class="my-anchor" />
+<div class:linked class:hovering class:connecting class="my-anchor"></div>
 
 <style>
 	.my-anchor {
diff --git a/src/example-components/test-components/DashCount.svelte b/src/example-components/test-components/DashCount.svelte
index 8195b191a..49f7b698d 100644
--- a/src/example-components/test-components/DashCount.svelte
+++ b/src/example-components/test-components/DashCount.svelte
@@ -14,12 +14,14 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults position={{ x: 40, y: 158 }} let:selected>
-	<NodeWrapper title="Dash Count" outputStore={output} key="dashCount">
-		<div class="node-body">
-			<Slider min={0} fixed={0} max={30} step={1} parameterStore={$inputs.length} />
-		</div>
-	</NodeWrapper>
+<Node useDefaults position={{ x: 40, y: 158 }} >
+	{#snippet children({ selected })}
+		<NodeWrapper title="Dash Count" outputStore={output} key="dashCount">
+			<div class="node-body">
+				<Slider min={0} fixed={0} max={30} step={1} parameterStore={$inputs.length} />
+			</div>
+		</NodeWrapper>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/test-components/KnobOutputDisplayer.svelte b/src/example-components/test-components/KnobOutputDisplayer.svelte
index 524020ee4..79289cf84 100644
--- a/src/example-components/test-components/KnobOutputDisplayer.svelte
+++ b/src/example-components/test-components/KnobOutputDisplayer.svelte
@@ -19,19 +19,23 @@
 	const output = generateOutput(inputs, processor);
 </script>
 
-<Node useDefaults id="output" position={{ x: 560, y: 650 }} let:selected locked>
-	<div class="node" class:selected>
-		<p class="output-value">Bass: {$output.bass}</p>
-		<p class="output-value">Treble: {$output.treble}</p>
-		<p class="output-value">Volume: {$output.volume}</p>
-		<div class="input-anchors">
-			{#each Object.keys(initialData) as key}
-				<Anchor id={key} let:hovering let:connecting let:linked inputsStore={inputs} {key} input>
-					<CustomAnchor {hovering} {connecting} {linked} />
-				</Anchor>
-			{/each}
+<Node useDefaults id="output" position={{ x: 560, y: 650 }}  locked>
+	{#snippet children({ selected })}
+		<div class="node" class:selected>
+			<p class="output-value">Bass: {$output.bass}</p>
+			<p class="output-value">Treble: {$output.treble}</p>
+			<p class="output-value">Volume: {$output.volume}</p>
+			<div class="input-anchors">
+				{#each Object.keys(initialData) as key}
+					<Anchor id={key}    inputsStore={inputs} {key} input>
+						{#snippet children({ hovering, connecting, linked })}
+										<CustomAnchor {hovering} {connecting} {linked} />
+															{/snippet}
+								</Anchor>
+				{/each}
+			</div>
 		</div>
-	</div>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/test-components/NodeWrapper.svelte b/src/example-components/test-components/NodeWrapper.svelte
index b26448efc..3d7772483 100644
--- a/src/example-components/test-components/NodeWrapper.svelte
+++ b/src/example-components/test-components/NodeWrapper.svelte
@@ -2,34 +2,47 @@
 	import { Anchor, generateOutput } from '$lib';
 	import CustomAnchor from './CustomAnchor.svelte';
 
-	export let title: string;
-	export let outputStore: ReturnType<typeof generateOutput> | null = null;
-	export let key = '';
-	export let destroy: null | (() => void) = null;
+	interface Props {
+		title: string;
+		outputStore?: ReturnType<typeof generateOutput> | null;
+		key?: string;
+		destroy?: null | (() => void);
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		title,
+		outputStore = null,
+		key = '',
+		destroy = null,
+		children
+	}: Props = $props();
 </script>
 
 <div class="node">
 	<div class="header">
 		<h1>{title}</h1>
 		{#if destroy}
-			<button class="destroy" on:click={destroy}>X</button>
+			<button class="destroy" onclick={destroy}>X</button>
 		{/if}
 	</div>
-	<slot />
+	{@render children?.()}
 </div>
 {#if outputStore && key}
 	<div class="output-anchors">
 		<Anchor
 			id={key}
 			connections={[['output', key]]}
-			let:linked
-			let:connecting
-			let:hovering
+			
+			
+			
 			{outputStore}
 			output
 		>
-			<CustomAnchor {hovering} {connecting} {linked} />
-		</Anchor>
+			{#snippet children({ linked, connecting, hovering })}
+						<CustomAnchor {hovering} {connecting} {linked} />
+								{/snippet}
+				</Anchor>
 	</div>
 {/if}
 
diff --git a/src/example-components/test-components/Noise.svelte b/src/example-components/test-components/Noise.svelte
index 10568ad7b..e0c775941 100644
--- a/src/example-components/test-components/Noise.svelte
+++ b/src/example-components/test-components/Noise.svelte
@@ -14,12 +14,14 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults position={{ x: 320, y: 550 }} let:destroy>
-	<NodeWrapper {destroy} title="Noise" outputStore={output} key="noise">
-		<div class="node-body">
-			<Slider min={0} max={1} fixed={2} step={0.01} parameterStore={$inputs.num} />
-		</div>
-	</NodeWrapper>
+<Node useDefaults position={{ x: 320, y: 550 }} >
+	{#snippet children({ destroy })}
+		<NodeWrapper {destroy} title="Noise" outputStore={output} key="noise">
+			<div class="node-body">
+				<Slider min={0} max={1} fixed={2} step={0.01} parameterStore={$inputs.num} />
+			</div>
+		</NodeWrapper>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/test-components/Output.svelte b/src/example-components/test-components/Output.svelte
index e6285338a..f080f18c4 100644
--- a/src/example-components/test-components/Output.svelte
+++ b/src/example-components/test-components/Output.svelte
@@ -27,40 +27,48 @@
 	const output = generateOutput(inputs, processor);
 </script>
 
-<Node useDefaults id="output" position={{ x: 560, y: 30 }} let:selected locked>
-	<div class="node" class:selected>
-		<Visualizer {...$output} />
-		<div class="input-anchors">
-			{#each Object.keys(initialData) as key}
-				{#if key === 'color'}
-					<Anchor id={key} let:connecting let:linked inputsStore={inputs} {key} input locked>
-						<ColorAnchor color={$inputs[key]} {connecting} {linked} />
-					</Anchor>
-				{:else if key === 'animation'}
-					<Anchor
-						id={key}
-						on:disconnection={() => {
-							if ($inputs && typeof $inputs.animation.set === 'function') {
-								$inputs.animation.set(0);
-							}
-						}}
-						let:hovering
-						let:connecting
-						let:linked
-						inputsStore={inputs}
-						{key}
-						input
-					>
-						<CustomAnchor {hovering} {connecting} {linked} />
-					</Anchor>
-				{:else}
-					<Anchor id={key} let:hovering let:connecting let:linked inputsStore={inputs} {key} input>
-						<CustomAnchor {hovering} {connecting} {linked} />
-					</Anchor>
-				{/if}
-			{/each}
+<Node useDefaults id="output" position={{ x: 560, y: 30 }}  locked>
+	{#snippet children({ selected })}
+		<div class="node" class:selected>
+			<Visualizer {...$output} />
+			<div class="input-anchors">
+				{#each Object.keys(initialData) as key}
+					{#if key === 'color'}
+						<Anchor id={key}   inputsStore={inputs} {key} input locked>
+							{#snippet children({ connecting, linked })}
+												<ColorAnchor color={$inputs[key]} {connecting} {linked} />
+																		{/snippet}
+										</Anchor>
+					{:else if key === 'animation'}
+						<Anchor
+							id={key}
+							on:disconnection={() => {
+								if ($inputs && typeof $inputs.animation.set === 'function') {
+									$inputs.animation.set(0);
+								}
+							}}
+							
+							
+							
+							inputsStore={inputs}
+							{key}
+							input
+						>
+							{#snippet children({ hovering, connecting, linked })}
+														<CustomAnchor {hovering} {connecting} {linked} />
+																				{/snippet}
+												</Anchor>
+					{:else}
+						<Anchor id={key}    inputsStore={inputs} {key} input>
+							{#snippet children({ hovering, connecting, linked })}
+														<CustomAnchor {hovering} {connecting} {linked} />
+																				{/snippet}
+												</Anchor>
+					{/if}
+				{/each}
+			</div>
 		</div>
-	</div>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/test-components/Scale.svelte b/src/example-components/test-components/Scale.svelte
index e6285338a..f080f18c4 100644
--- a/src/example-components/test-components/Scale.svelte
+++ b/src/example-components/test-components/Scale.svelte
@@ -27,40 +27,48 @@
 	const output = generateOutput(inputs, processor);
 </script>
 
-<Node useDefaults id="output" position={{ x: 560, y: 30 }} let:selected locked>
-	<div class="node" class:selected>
-		<Visualizer {...$output} />
-		<div class="input-anchors">
-			{#each Object.keys(initialData) as key}
-				{#if key === 'color'}
-					<Anchor id={key} let:connecting let:linked inputsStore={inputs} {key} input locked>
-						<ColorAnchor color={$inputs[key]} {connecting} {linked} />
-					</Anchor>
-				{:else if key === 'animation'}
-					<Anchor
-						id={key}
-						on:disconnection={() => {
-							if ($inputs && typeof $inputs.animation.set === 'function') {
-								$inputs.animation.set(0);
-							}
-						}}
-						let:hovering
-						let:connecting
-						let:linked
-						inputsStore={inputs}
-						{key}
-						input
-					>
-						<CustomAnchor {hovering} {connecting} {linked} />
-					</Anchor>
-				{:else}
-					<Anchor id={key} let:hovering let:connecting let:linked inputsStore={inputs} {key} input>
-						<CustomAnchor {hovering} {connecting} {linked} />
-					</Anchor>
-				{/if}
-			{/each}
+<Node useDefaults id="output" position={{ x: 560, y: 30 }}  locked>
+	{#snippet children({ selected })}
+		<div class="node" class:selected>
+			<Visualizer {...$output} />
+			<div class="input-anchors">
+				{#each Object.keys(initialData) as key}
+					{#if key === 'color'}
+						<Anchor id={key}   inputsStore={inputs} {key} input locked>
+							{#snippet children({ connecting, linked })}
+												<ColorAnchor color={$inputs[key]} {connecting} {linked} />
+																		{/snippet}
+										</Anchor>
+					{:else if key === 'animation'}
+						<Anchor
+							id={key}
+							on:disconnection={() => {
+								if ($inputs && typeof $inputs.animation.set === 'function') {
+									$inputs.animation.set(0);
+								}
+							}}
+							
+							
+							
+							inputsStore={inputs}
+							{key}
+							input
+						>
+							{#snippet children({ hovering, connecting, linked })}
+														<CustomAnchor {hovering} {connecting} {linked} />
+																				{/snippet}
+												</Anchor>
+					{:else}
+						<Anchor id={key}    inputsStore={inputs} {key} input>
+							{#snippet children({ hovering, connecting, linked })}
+														<CustomAnchor {hovering} {connecting} {linked} />
+																				{/snippet}
+												</Anchor>
+					{/if}
+				{/each}
+			</div>
 		</div>
-	</div>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/test-components/Thickness.svelte b/src/example-components/test-components/Thickness.svelte
index 8b8c0bd18..932657e6a 100644
--- a/src/example-components/test-components/Thickness.svelte
+++ b/src/example-components/test-components/Thickness.svelte
@@ -14,13 +14,15 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults position={{ x: 40, y: 50 }} let:selected>
-	<span class="note" id="custom">Custom Nodes</span>
-	<NodeWrapper title="Line Thickness" outputStore={output} key="strokeWidth">
-		<div class="node-body">
-			<Slider min={1} max={12} fixed={1} step={0.1} parameterStore={$inputs.width} />
-		</div>
-	</NodeWrapper>
+<Node useDefaults position={{ x: 40, y: 50 }} >
+	{#snippet children({ selected })}
+		<span class="note" id="custom">Custom Nodes</span>
+		<NodeWrapper title="Line Thickness" outputStore={output} key="strokeWidth">
+			<div class="node-body">
+				<Slider min={1} max={12} fixed={1} step={0.1} parameterStore={$inputs.width} />
+			</div>
+		</NodeWrapper>
+	{/snippet}
 </Node>
 
 <style>
diff --git a/src/example-components/test-components/Treble.svelte b/src/example-components/test-components/Treble.svelte
index 40155d90f..3c7da462b 100644
--- a/src/example-components/test-components/Treble.svelte
+++ b/src/example-components/test-components/Treble.svelte
@@ -16,19 +16,21 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults rotation={0} position={{ x: 110, y: 300 }} let:selected>
-	<NodeWrapper title="Treble" outputStore={output} key="treble">
-		<div class="node-body">
-			<Knob
-				fixed={0}
-				min={-20}
-				max={20}
-				step={5}
-				minDegree={30}
-				maxDegree={330}
-				parameterStore={$inputs.data}
-			/>
-		</div>
-	</NodeWrapper>
-	<Resizer width height rotation />
+<Node useDefaults rotation={0} position={{ x: 110, y: 300 }} >
+	{#snippet children({ selected })}
+		<NodeWrapper title="Treble" outputStore={output} key="treble">
+			<div class="node-body">
+				<Knob
+					fixed={0}
+					min={-20}
+					max={20}
+					step={5}
+					minDegree={30}
+					maxDegree={330}
+					parameterStore={$inputs.data}
+				/>
+			</div>
+		</NodeWrapper>
+		<Resizer width height rotation />
+	{/snippet}
 </Node>
diff --git a/src/example-components/test-components/Visualizer.svelte b/src/example-components/test-components/Visualizer.svelte
index dd9851b5a..37356cecc 100644
--- a/src/example-components/test-components/Visualizer.svelte
+++ b/src/example-components/test-components/Visualizer.svelte
@@ -1,11 +1,25 @@
 <script lang="ts">
-	export let size = 200;
-	export let strokeWidth = 4;
-	export let dashCount = 5;
-	export let scale = 30;
-	export let animation = 0;
-	export let color = 'red';
-	export let noise = 0; // Add noise parameter
+	import { run } from 'svelte/legacy';
+
+	interface Props {
+		size?: number;
+		strokeWidth?: number;
+		dashCount?: number;
+		scale?: number;
+		animation?: number;
+		color?: string;
+		noise?: number; // Add noise parameter
+	}
+
+	let {
+		size = 200,
+		strokeWidth = 4,
+		dashCount = 5,
+		scale = 30,
+		animation = 0,
+		color = 'red',
+		noise = 0
+	}: Props = $props();
 
 	interface Circle {
 		cx: number;
@@ -16,14 +30,10 @@
 		angle: number;
 	}
 
-	let circles: Array<Circle> = [];
+	let circles: Array<Circle> = $state([]);
 	let dashLength;
 	let gapLength;
-	$: animate = animation;
 
-	$: {
-		circles = generateCircles(size, strokeWidth, dashCount, scale, noise);
-	}
 
 	const random = Array(50)
 		.fill(null)
@@ -63,6 +73,10 @@
 		}
 		return generatedCircles;
 	}
+	let animate = $derived(animation);
+	run(() => {
+		circles = generateCircles(size, strokeWidth, dashCount, scale, noise);
+	});
 </script>
 
 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/example-components/test-components/Volume.svelte b/src/example-components/test-components/Volume.svelte
index a1633d42b..629aa7b0a 100644
--- a/src/example-components/test-components/Volume.svelte
+++ b/src/example-components/test-components/Volume.svelte
@@ -16,19 +16,21 @@
 	const output = generateOutput(inputs, procesor);
 </script>
 
-<Node useDefaults position={{ x: 110, y: 550 }} let:selected>
-	<NodeWrapper title="Volume" outputStore={output} key="volume">
-		<div class="node-body">
-			<Knob
-				fixed={0}
-				min={0}
-				max={100}
-				step={1}
-				minDegree={30}
-				maxDegree={330}
-				parameterStore={$inputs.data}
-			/>
-		</div>
-	</NodeWrapper>
-	<Resizer width height rotation />
+<Node useDefaults position={{ x: 110, y: 550 }} >
+	{#snippet children({ selected })}
+		<NodeWrapper title="Volume" outputStore={output} key="volume">
+			<div class="node-body">
+				<Knob
+					fixed={0}
+					min={0}
+					max={100}
+					step={1}
+					minDegree={30}
+					maxDegree={330}
+					parameterStore={$inputs.data}
+				/>
+			</div>
+		</NodeWrapper>
+		<Resizer width height rotation />
+	{/snippet}
 </Node>
diff --git a/src/lib/assets/icons/Icon.svelte b/src/lib/assets/icons/Icon.svelte
index e27f5c138..ce9ddf870 100644
--- a/src/lib/assets/icons/Icon.svelte
+++ b/src/lib/assets/icons/Icon.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	import arrow_left from '$lib/assets/icons/arrow_left.svelte';
 	import arrow_right from '$lib/assets/icons/arrow_right.svelte';
 	import dark_mode from '$lib/assets/icons/dark_mode.svelte';
@@ -14,8 +14,12 @@
 </script>
 
 <script lang="ts">
-	export let width = 16;
-	export let icon: keyof typeof icons;
+	interface Props {
+		width?: number;
+		icon: keyof typeof icons;
+	}
+
+	let { width = 16, icon }: Props = $props();
 
 	const icons = {
 		arrow_left,
@@ -31,10 +35,12 @@
 		zoom_out,
 		visibility_off
 	};
+
+	const SvelteComponent = $derived(icons[icon]);
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" height={width} viewBox="0 -960 960 960" {width}>
-	<svelte:component this={icons[icon]} />
+	<SvelteComponent />
 </svg>
 
 <style>
diff --git a/src/lib/components/Anchor/Anchor.svelte b/src/lib/components/Anchor/Anchor.svelte
index d9c69fc02..d8d9da9ab 100644
--- a/src/lib/components/Anchor/Anchor.svelte
+++ b/src/lib/components/Anchor/Anchor.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script context="module" lang="ts">
 	import DefaultAnchor from './DefaultAnchor.svelte';
 	import Edge from '../Edge/Edge.svelte';
diff --git a/src/lib/components/Anchor/DefaultAnchor.svelte b/src/lib/components/Anchor/DefaultAnchor.svelte
index c99c68a84..1ebf34183 100644
--- a/src/lib/components/Anchor/DefaultAnchor.svelte
+++ b/src/lib/components/Anchor/DefaultAnchor.svelte
@@ -1,12 +1,23 @@
 <script lang="ts">
 	import type { CSSColorString } from '$lib/types';
 
-	export let output: boolean;
-	export let input: boolean;
-	export let connecting: boolean;
-	export let connected: boolean;
-	export let hovering: boolean;
-	export let bgColor: CSSColorString | null;
+	interface Props {
+		output: boolean;
+		input: boolean;
+		connecting: boolean;
+		connected: boolean;
+		hovering: boolean;
+		bgColor: CSSColorString | null;
+	}
+
+	let {
+		output,
+		input,
+		connecting,
+		connected,
+		hovering,
+		bgColor
+	}: Props = $props();
 </script>
 
 <div
@@ -17,7 +28,7 @@
 	class:connecting
 	class:hovering
 	style:--prop-anchor-color={bgColor}
-/>
+></div>
 
 <style>
 	* {
diff --git a/src/lib/components/ContrastTheme/ContrastTheme.svelte b/src/lib/components/ContrastTheme/ContrastTheme.svelte
index ec3409b7f..3862ef74d 100644
--- a/src/lib/components/ContrastTheme/ContrastTheme.svelte
+++ b/src/lib/components/ContrastTheme/ContrastTheme.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unterminated regular expression
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import type { CSSColorString } from '$lib/types';
 
diff --git a/src/lib/components/Controls/Controls.svelte b/src/lib/components/Controls/Controls.svelte
index 5c6ce5eb8..3e961f019 100644
--- a/src/lib/components/Controls/Controls.svelte
+++ b/src/lib/components/Controls/Controls.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import type { Graph } from '$lib/types';
 	import { getContext } from 'svelte';
diff --git a/src/lib/components/Drawer/Drawer.svelte b/src/lib/components/Drawer/Drawer.svelte
index 9d48ac3c5..cc6ec5cd0 100644
--- a/src/lib/components/Drawer/Drawer.svelte
+++ b/src/lib/components/Drawer/Drawer.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Expected token >
+https://svelte.dev/e/expected_token -->
 <script lang="ts">
 	import { Node, Svelvet, Anchor, Edge } from '$lib';
 	import type { SvelvetConfig, NodeConfig, XYPair, EdgeStyle, NodeDrawerConfig } from '$lib/types';
diff --git a/src/lib/components/Drawer/DrawerAnchor.svelte b/src/lib/components/Drawer/DrawerAnchor.svelte
index 2bdb1c895..de80c234e 100644
--- a/src/lib/components/Drawer/DrawerAnchor.svelte
+++ b/src/lib/components/Drawer/DrawerAnchor.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script context="module" lang="ts">
 	import { writable } from 'svelte/store';
 	import type { CSSColorString, Direction, AnchorDrawerConfig, AnchorProps } from '$lib/types';
diff --git a/src/lib/components/Drawer/DrawerController.svelte b/src/lib/components/Drawer/DrawerController.svelte
index 18ba92464..bd1980b19 100644
--- a/src/lib/components/Drawer/DrawerController.svelte
+++ b/src/lib/components/Drawer/DrawerController.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import DrawerNode from './DrawerNode.svelte';
 	import DrawerAnchor from './DrawerAnchor.svelte';
diff --git a/src/lib/components/Drawer/DrawerEdge.svelte b/src/lib/components/Drawer/DrawerEdge.svelte
index eb3a8823f..f5815414f 100644
--- a/src/lib/components/Drawer/DrawerEdge.svelte
+++ b/src/lib/components/Drawer/DrawerEdge.svelte
@@ -1,4 +1,9 @@
-<script context="module" lang="ts">
+<script lang="ts">
+	import { preventDefault } from 'svelte/legacy';
+
+</script>
+
+<script module lang="ts">
 	import type { CSSColorString, EdgeProps, EdgeDrawerConfig } from '$lib/types';
 	import { addProps } from '$lib/utils';
 
@@ -114,7 +119,7 @@
 
 <div id="edgeContainer">
 	<!-- On submit resets all the values on the input field in the form to default -->
-	<form on:submit|preventDefault={handleEdgeResetButtonClick}>
+	<form onsubmit={preventDefault(handleEdgeResetButtonClick)}>
 		<ul aria-labelledby="select_props">
 			<li class="list-item">
 				<label for="color">Background: </label>
@@ -134,12 +139,12 @@
 					id="animate"
 					type="checkbox"
 					bind:value={animate}
-					on:change={handleAnimateButtonClick}
+					onchange={handleAnimateButtonClick}
 				/>
 			</li>
 			<li class="list-item">
 				<label for="step">Step: </label>
-				<input id="step" type="checkbox" bind:value={step} on:change={handleStepButtonClick} />
+				<input id="step" type="checkbox" bind:value={step} onchange={handleStepButtonClick} />
 			</li>
 			<li class="list-item">
 				<label for="cornerRadius">Corner Radius:</label>
diff --git a/src/lib/components/Drawer/DrawerNode.svelte b/src/lib/components/Drawer/DrawerNode.svelte
index 99cdb32d6..d21db71a7 100644
--- a/src/lib/components/Drawer/DrawerNode.svelte
+++ b/src/lib/components/Drawer/DrawerNode.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	import { writable } from 'svelte/store';
 	import type {
 		NodeDrawerConfig,
diff --git a/src/lib/components/Edge/Edge.svelte b/src/lib/components/Edge/Edge.svelte
index 0b3bd93cf..859e5b2d7 100644
--- a/src/lib/components/Edge/Edge.svelte
+++ b/src/lib/components/Edge/Edge.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script context="module" lang="ts">
 	import { calculateStepPath, calculateRadius, calculatePath } from '$lib/utils/calculators';
 	import { onMount, onDestroy, getContext, afterUpdate } from 'svelte';
diff --git a/src/lib/components/Edge/EdgeContext.svelte b/src/lib/components/Edge/EdgeContext.svelte
index 7624cca73..309a4aca5 100644
--- a/src/lib/components/Edge/EdgeContext.svelte
+++ b/src/lib/components/Edge/EdgeContext.svelte
@@ -2,9 +2,14 @@
 	import type { WritableEdge } from '$lib/types';
 	import { setContext } from 'svelte';
 
-	export let edge: WritableEdge;
+	interface Props {
+		edge: WritableEdge;
+		children?: import('svelte').Snippet;
+	}
+
+	let { edge, children }: Props = $props();
 
 	setContext('edge', edge);
 </script>
 
-<slot />
+{@render children?.()}
diff --git a/src/lib/components/Editor/Editor.svelte b/src/lib/components/Editor/Editor.svelte
index 39e77d30c..210c8eb32 100644
--- a/src/lib/components/Editor/Editor.svelte
+++ b/src/lib/components/Editor/Editor.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import Slider from '../data/Slider/Slider.svelte';
 	import TextField from '../data/TextField/TextField.svelte';
diff --git a/src/lib/components/FlowChart/FlowChart.svelte b/src/lib/components/FlowChart/FlowChart.svelte
index 11eb78aa6..6155aca59 100644
--- a/src/lib/components/FlowChart/FlowChart.svelte
+++ b/src/lib/components/FlowChart/FlowChart.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import type { Graph, NodeConfig, NodeKey, Node as NodeType } from '$lib/types';
 	import type { FlowChart } from '$lib/types/parser';
diff --git a/src/lib/components/Group/Group.svelte b/src/lib/components/Group/Group.svelte
index 966f0ba31..ed475087b 100644
--- a/src/lib/components/Group/Group.svelte
+++ b/src/lib/components/Group/Group.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import { setContext, getContext } from 'svelte';
 	import type { Group, Graph, GroupBox, XYPair, CSSColorString, GroupKey } from '$lib/types';
diff --git a/src/lib/components/Group/GroupBoundingBox.svelte b/src/lib/components/Group/GroupBoundingBox.svelte
index 3e020119e..2ac300bc3 100644
--- a/src/lib/components/Group/GroupBoundingBox.svelte
+++ b/src/lib/components/Group/GroupBoundingBox.svelte
@@ -1,16 +1,28 @@
 <script lang="ts">
+	import { createBubbler, preventDefault, stopPropagation } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import type { CSSColorString, Dimensions, XYPair } from '$lib/types';
 	import type { Writable } from 'svelte/store';
 	import { createEventDispatcher } from 'svelte';
 
-	export let dimensions: Dimensions;
-	export let position: Writable<XYPair>;
-	export let color: Writable<CSSColorString>;
-	export let groupName: string;
+	interface Props {
+		dimensions: Dimensions;
+		position: Writable<XYPair>;
+		color: Writable<CSSColorString>;
+		groupName: string;
+	}
+
+	let {
+		dimensions,
+		position,
+		color,
+		groupName
+	}: Props = $props();
 
 	const { width, height } = dimensions;
 
-	$: id = `${groupName}-bounding-box`;
+	let id = $derived(`${groupName}-bounding-box`);
 
 	const dispatch = createEventDispatcher();
 
@@ -22,8 +34,8 @@
 <div
 	role="button"
 	tabindex="0"
-	on:contextmenu|stopPropagation|preventDefault
-	on:mousedown|stopPropagation|preventDefault={dispatchClick}
+	oncontextmenu={stopPropagation(preventDefault(bubble('contextmenu')))}
+	onmousedown={stopPropagation(preventDefault(dispatchClick))}
 	class="bounding-box-border"
 	{id}
 	style:top={`${$position.y}px`}
@@ -32,7 +44,7 @@
 	style:height={`${$height}px`}
 	style="border: solid 4px {$color};"
 >
-	<div class="bounding-box" style:background-color={$color} />
+	<div class="bounding-box" style:background-color={$color}></div>
 </div>
 
 <style>
diff --git a/src/lib/components/Minimap/MiniGroupBox.svelte b/src/lib/components/Minimap/MiniGroupBox.svelte
index 242f08039..8f9d1822b 100644
--- a/src/lib/components/Minimap/MiniGroupBox.svelte
+++ b/src/lib/components/Minimap/MiniGroupBox.svelte
@@ -2,13 +2,24 @@
 	import type { CSSColorString, Dimensions, XYPair } from '$lib/types';
 	import type { Writable } from 'svelte/store';
 
-	export let dimensions: Dimensions;
-	export let position: Writable<XYPair>;
-	export let color: Writable<CSSColorString>;
-	export let groupName: string;
 
-	export let top: number;
-	export let left: number;
+	interface Props {
+		dimensions: Dimensions;
+		position: Writable<XYPair>;
+		color: Writable<CSSColorString>;
+		groupName: string;
+		top: number;
+		left: number;
+	}
+
+	let {
+		dimensions,
+		position,
+		color,
+		groupName,
+		top,
+		left
+	}: Props = $props();
 
 	const { width, height } = dimensions;
 </script>
@@ -22,7 +33,7 @@
 	style:height={`${$height}px`}
 	style="border: solid 4px {$color};"
 	style:background-color={$color}
-/>
+></div>
 
 <style>
 	.mini-bounding-box {
diff --git a/src/lib/components/Minimap/MiniNode.svelte b/src/lib/components/Minimap/MiniNode.svelte
index d96cc4edd..8e83953c7 100644
--- a/src/lib/components/Minimap/MiniNode.svelte
+++ b/src/lib/components/Minimap/MiniNode.svelte
@@ -2,21 +2,33 @@
 	import type { CSSColorString, Node } from '$lib/types';
 	import { onMount } from 'svelte';
 
-	export let node: Node;
-	export let hidden = false;
-	export let toggleHidden: (node: Node) => void;
-	export let top: number;
-	export let left: number;
-	export let nodeColor: CSSColorString | null = null;
-	export let hideable: boolean;
+	interface Props {
+		node: Node;
+		hidden?: boolean;
+		toggleHidden: (node: Node) => void;
+		top: number;
+		left: number;
+		nodeColor?: CSSColorString | null;
+		hideable: boolean;
+	}
+
+	let {
+		node,
+		hidden = false,
+		toggleHidden,
+		top,
+		left,
+		nodeColor = null,
+		hideable
+	}: Props = $props();
 
 	const { position, dimensions, bgColor, borderRadius, rotation } = node;
 	const { width, height } = dimensions;
-	$: nodePosition = $position;
-	$: nodeRotation = $rotation;
-	$: zIndex = node.zIndex;
-	let color: CSSColorString | null = null;
-	$: colorIsTransparent = color === 'rgba(0, 0, 0, 0)';
+	let nodePosition = $derived($position);
+	let nodeRotation = $derived($rotation);
+	let zIndex = $derived(node.zIndex);
+	let color: CSSColorString | null = $state(null);
+	let colorIsTransparent = $derived(color === 'rgba(0, 0, 0, 0)');
 
 	onMount(() => {
 		try {
@@ -32,7 +44,7 @@
 </script>
 
 <button
-	on:click={() => {
+	onclick={() => {
 		if (!hideable) return;
 		toggleHidden(node);
 	}}
@@ -47,7 +59,7 @@
 	style:top="{nodePosition.y - top}px"
 	style:left="{nodePosition.x - left}px"
 	class:hideable
-/>
+></button>
 
 <style>
 	* {
diff --git a/src/lib/components/Minimap/Minimap.svelte b/src/lib/components/Minimap/Minimap.svelte
index 9146a03fe..a7944702f 100644
--- a/src/lib/components/Minimap/Minimap.svelte
+++ b/src/lib/components/Minimap/Minimap.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import MiniNode from './MiniNode.svelte';
diff --git a/src/lib/components/Node/DefaultNode.svelte b/src/lib/components/Node/DefaultNode.svelte
index 275ffc58b..a5c12fd2f 100644
--- a/src/lib/components/Node/DefaultNode.svelte
+++ b/src/lib/components/Node/DefaultNode.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script context="module" lang="ts">
 	import Resizer from '$lib/components/Resizer/Resizer.svelte';
 	import Anchor from '$lib/components/Anchor/Anchor.svelte';
diff --git a/src/lib/components/Node/InternalNode.svelte b/src/lib/components/Node/InternalNode.svelte
index 9e1a9f2c1..8f9a99aa2 100644
--- a/src/lib/components/Node/InternalNode.svelte
+++ b/src/lib/components/Node/InternalNode.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Identifier 'anchorsMounted' has already been declared
+https://svelte.dev/e/js_parse_error -->
 <script context="module" lang="ts">
 	import { initialClickPosition, tracking } from '$lib/stores';
 	import { captureGroup } from '$lib/utils';
diff --git a/src/lib/components/Node/Node.svelte b/src/lib/components/Node/Node.svelte
index 48083ea94..05881cd73 100644
--- a/src/lib/components/Node/Node.svelte
+++ b/src/lib/components/Node/Node.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script context="module" lang="ts">
 	import InternalNode from './InternalNode.svelte';
 	import DefaultNode from './DefaultNode.svelte';
diff --git a/src/lib/components/Resizer/Resizer.svelte b/src/lib/components/Resizer/Resizer.svelte
index 187966e30..abee5af4b 100644
--- a/src/lib/components/Resizer/Resizer.svelte
+++ b/src/lib/components/Resizer/Resizer.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { calculateFitContentWidth } from '$lib/utils';
 	import { beforeUpdate, getContext, onMount } from 'svelte';
diff --git a/src/lib/components/SelectionBox/SelectionBox.svelte b/src/lib/components/SelectionBox/SelectionBox.svelte
index 0177a6cc0..f5c525c9e 100644
--- a/src/lib/components/SelectionBox/SelectionBox.svelte
+++ b/src/lib/components/SelectionBox/SelectionBox.svelte
@@ -1,33 +1,33 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { onMount } from 'svelte';
 	import { cursorPositionRaw } from '$lib/stores/CursorStore';
 	import type { CSSColorString, Graph, Node, NodeDOMBounds, NodeKey } from '$lib/types';
 
-	export let graph: Graph;
-	export let anchor: { x: number; y: number; top: number; left: number };
-	export let adding = false;
-	export let creating = false;
-	export let color: CSSColorString | null = null;
+	interface Props {
+		graph: Graph;
+		anchor: { x: number; y: number; top: number; left: number };
+		adding?: boolean;
+		creating?: boolean;
+		color?: CSSColorString | null;
+	}
+
+	let {
+		graph,
+		anchor,
+		adding = false,
+		creating = false,
+		color = null
+	}: Props = $props();
 
 	const { groups } = graph;
 
 	let nodes: Array<NodeDOMBounds>;
-	let box: HTMLDivElement;
+	let box: HTMLDivElement = $state();
 
-	$: selectedNodes = $groups.selected.nodes;
-	$: height = $cursorPositionRaw.y - anchor.y - anchor.top;
-	$: width = $cursorPositionRaw.x - anchor.x - anchor.left;
-	$: top = Math.min(anchor.y, anchor.y + height);
-	$: left = Math.min(anchor.x, anchor.x + width);
 
-	$: CSStop = `${top}px`;
-	$: CSSleft = `${left}px`;
-	$: CSSheight = `${Math.abs(height)}px`;
-	$: CSSwidth = `${Math.abs(width)}px`;
 
-	$: if (width || height) {
-		selectNodes();
-	}
 
 	onMount(updateNodes);
 
@@ -67,6 +67,20 @@
 		}
 		$selectedNodes = $selectedNodes;
 	}
+	let selectedNodes = $derived($groups.selected.nodes);
+	let height = $derived($cursorPositionRaw.y - anchor.y - anchor.top);
+	let width = $derived($cursorPositionRaw.x - anchor.x - anchor.left);
+	let top = $derived(Math.min(anchor.y, anchor.y + height));
+	let left = $derived(Math.min(anchor.x, anchor.x + width));
+	let CSStop = $derived(`${top}px`);
+	let CSSleft = $derived(`${left}px`);
+	let CSSheight = $derived(`${Math.abs(height)}px`);
+	let CSSwidth = $derived(`${Math.abs(width)}px`);
+	run(() => {
+		if (width || height) {
+			selectNodes();
+		}
+	});
 </script>
 
 <div
@@ -78,7 +92,7 @@
 	style:left={CSSleft}
 	class:creating
 >
-	<div class:creating bind:this={box} class="selection-box" />
+	<div class:creating bind:this={box} class="selection-box"></div>
 </div>
 
 <style>
diff --git a/src/lib/components/ThemeToggle/ThemeToggle.svelte b/src/lib/components/ThemeToggle/ThemeToggle.svelte
index 674de3a89..38c72fa58 100644
--- a/src/lib/components/ThemeToggle/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle/ThemeToggle.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import type { CSSColorString } from '$lib/types';
 	import { getJSONState } from '$lib/utils/savers/saveStore';
diff --git a/src/lib/components/data/ColorPicker/ColorWheel.svelte b/src/lib/components/data/ColorPicker/ColorWheel.svelte
index 5ac87c467..c098f0543 100644
--- a/src/lib/components/data/ColorPicker/ColorWheel.svelte
+++ b/src/lib/components/data/ColorPicker/ColorWheel.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import type {
diff --git a/src/lib/components/data/Knob/Knob.svelte b/src/lib/components/data/Knob/Knob.svelte
index bc13fa0be..0793364d2 100644
--- a/src/lib/components/data/Knob/Knob.svelte
+++ b/src/lib/components/data/Knob/Knob.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import { isArrow } from '$lib/types';
diff --git a/src/lib/components/data/RadioGroup/RadioGroup.svelte b/src/lib/components/data/RadioGroup/RadioGroup.svelte
index 40a1113d5..d5489ddb4 100644
--- a/src/lib/components/data/RadioGroup/RadioGroup.svelte
+++ b/src/lib/components/data/RadioGroup/RadioGroup.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import type { CustomWritable } from '$lib/types';
 
diff --git a/src/lib/components/data/Slider/Slider.svelte b/src/lib/components/data/Slider/Slider.svelte
index 939ad4e8e..f99469d62 100644
--- a/src/lib/components/data/Slider/Slider.svelte
+++ b/src/lib/components/data/Slider/Slider.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run, stopPropagation, preventDefault } from 'svelte/legacy';
+
 	import { initialClickPosition } from '$lib/stores/CursorStore';
 	import { getContext } from 'svelte';
 	import { isArrow } from '$lib/types';
@@ -7,18 +9,32 @@
 	import type { Graph, Node, CustomWritable } from '$lib/types';
 	import type { CSSColorString } from '$lib/types';
 
-	// Props
-	export let parameterStore: CustomWritable<number>;
-	export let min = 0;
-	export let max = 100;
-	export let step = 1;
-	export let label = 'Value';
-	export let fixed = 2;
-	export let fontColor: CSSColorString | null = null;
-	export let barColor: CSSColorString | null = null;
-	export let bgColor: CSSColorString | null = null;
+	
+	interface Props {
+		// Props
+		parameterStore: CustomWritable<number>;
+		min?: number;
+		max?: number;
+		step?: number;
+		label?: string;
+		fixed?: number;
+		fontColor?: CSSColorString | null;
+		barColor?: CSSColorString | null;
+		bgColor?: CSSColorString | null;
+	}
+
+	let {
+		parameterStore,
+		min = 0,
+		max = 100,
+		step = 1,
+		label = 'Value',
+		fixed = 2,
+		fontColor = null,
+		barColor = null,
+		bgColor = null
+	}: Props = $props();
 
-	$: connected = typeof parameterStore.set !== 'function';
 
 	let graph = getContext<Graph>('graph');
 	let node = getContext<Node>('node');
@@ -27,22 +43,14 @@
 	const selected = $groups.selected;
 	const activeGroup = graph.activeGroup;
 
-	$: width = node.dimensions.width;
 
-	let sliderWidth: number; // Width of slider on DOM (relative to scale)
-	let sliderElement: HTMLInputElement;
-	let sliding = false; // Whether the slider is currently being dragged
-	let previousX = 0; // Represents previous cursor position
+	let sliderWidth: number = $state(); // Width of slider on DOM (relative to scale)
+	let sliderElement: HTMLInputElement = $state();
+	let sliding = $state(false); // Whether the slider is currently being dragged
+	let previousX = $state(0); // Represents previous cursor position
 	let pixelsMoved = 0; // Number of pixels moved during slide
 
-	// Grab cursor from store
-	$: cursor = graph.cursor;
 
-	$: if (sliding) {
-		const deltaX = $cursor.x - previousX;
-		calculateSlide(deltaX);
-		previousX = $cursor.x;
-	}
 
 	// Begin sliding on mousedown
 	function startSlide(e: MouseEvent) {
@@ -134,14 +142,7 @@
 		sliderElement.blur();
 	}
 
-	$: percentageSlid = ((($parameterStore as number) - min) / (max - min)) * 100;
-	$: CSSpercentage = `${percentageSlid}%`;
 
-	$: sliderStyle = `linear-gradient(
-			90deg,
-			${barColor || 'var(--primary-color, var(--default-primary-color))'} ${CSSpercentage},
-			${bgColor || 'var(--accent-color, var(--default-accent-color))'} ${CSSpercentage}
-		)`;
 
 	// Add validation for input values to ensure they are within the min and max range
 	function validateInputValue() {
@@ -152,20 +153,40 @@
 		}
 	}
 
+	let connected = $derived(typeof parameterStore.set !== 'function');
+	let width = $derived(node.dimensions.width);
+	// Grab cursor from store
+	let cursor = $derived(graph.cursor);
+	run(() => {
+		if (sliding) {
+			const deltaX = $cursor.x - previousX;
+			calculateSlide(deltaX);
+			previousX = $cursor.x;
+		}
+	});
+	let percentageSlid = $derived(((($parameterStore as number) - min) / (max - min)) * 100);
+	let CSSpercentage = $derived(`${percentageSlid}%`);
+	let sliderStyle = $derived(`linear-gradient(
+			90deg,
+			${barColor || 'var(--primary-color, var(--default-primary-color))'} ${CSSpercentage},
+			${bgColor || 'var(--accent-color, var(--default-accent-color))'} ${CSSpercentage}
+		)`);
 	// Handle edge cases for sliding and input value changes
-	$: if ($parameterStore < min) {
-		$parameterStore = min;
-	} else if ($parameterStore > max) {
-		$parameterStore = max;
-	}
+	run(() => {
+		if ($parameterStore < min) {
+			$parameterStore = min;
+		} else if ($parameterStore > max) {
+			$parameterStore = max;
+		}
+	});
 </script>
 
 {#if !connected}
 	<div class="wrapper" style:color={fontColor}>
 		<button
 			class="button"
-			on:touchstart|stopPropagation={() => updateValue(-1)}
-			on:mousedown|stopPropagation={() => updateValue(-1)}>−</button
+			ontouchstart={stopPropagation(() => updateValue(-1))}
+			onmousedown={stopPropagation(() => updateValue(-1))}>−</button
 		>
 		<div class="slider" bind:offsetWidth={sliderWidth}>
 			<label for="slider-input" class="input-label">{label}</label>
@@ -178,10 +199,10 @@
 				type="text"
 				value={$parameterStore.toFixed(fixed)}
 				aria-label={label}
-				on:wheel|stopPropagation|preventDefault={(event) => {
+				onwheel={stopPropagation(preventDefault((event) => {
 					updateValue(Math.sign(event.deltaY), step);
-				}}
-				on:keydown|stopPropagation={(e) => {
+				}))}
+				onkeydown={stopPropagation((e) => {
 					const { key } = e;
 
 					if (isArrow(key)) {
@@ -190,16 +211,16 @@
 					}
 
 					if (key === 'Enter') validateInput();
-				}}
+				})}
 				use:slideable
 				bind:this={sliderElement}
-				on:input={validateInputValue}
+				oninput={validateInputValue}
 			/>
 		</div>
 		<button
 			class="button"
-			on:touchstart|stopPropagation={() => updateValue(1)}
-			on:mousedown|stopPropagation={() => updateValue(1)}>+</button
+			ontouchstart={stopPropagation(() => updateValue(1))}
+			onmousedown={stopPropagation(() => updateValue(1))}>+</button
 		>
 	</div>
 {:else}
diff --git a/src/lib/components/data/TextField/TextField.svelte b/src/lib/components/data/TextField/TextField.svelte
index a453d064b..d3efe978b 100644
--- a/src/lib/components/data/TextField/TextField.svelte
+++ b/src/lib/components/data/TextField/TextField.svelte
@@ -1,14 +1,21 @@
 <script lang="ts">
+	import { createBubbler, stopPropagation } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import type { Writable } from 'svelte/store';
 	import { getContext } from 'svelte';
-	export let placeholder: string;
+	interface Props {
+		placeholder: string;
+	}
+
+	let { placeholder }: Props = $props();
 	const textStore = getContext<Writable<string>>('textStore');
 </script>
 
 <input
-	on:keydown|stopPropagation
-	on:click|stopPropagation
-	on:mousedown|stopPropagation
+	onkeydown={stopPropagation(bubble('keydown'))}
+	onclick={stopPropagation(bubble('click'))}
+	onmousedown={stopPropagation(bubble('mousedown'))}
 	{placeholder}
 	type="text"
 	bind:value={$textStore}
diff --git a/src/lib/components/data/Toggle/Toggle.svelte b/src/lib/components/data/Toggle/Toggle.svelte
index 292733abb..4b26d3d41 100644
--- a/src/lib/components/data/Toggle/Toggle.svelte
+++ b/src/lib/components/data/Toggle/Toggle.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	$props = {
 		parameterStore: null,
diff --git a/src/lib/containers/Background/Background.svelte b/src/lib/containers/Background/Background.svelte
index cef05ebc0..f9fd564b7 100644
--- a/src/lib/containers/Background/Background.svelte
+++ b/src/lib/containers/Background/Background.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { DOT_WIDTH, GRID_SCALE } from '$lib/constants';
 	import { getContext } from 'svelte';
 	import type { Graph, CSSColorString } from '$lib/types';
@@ -6,19 +8,34 @@
 
 	const graph = getContext<Graph>('graph');
 
-	// Props
-	export let style: BackgroundStyles = 'dots';
-	export let gridWidth = GRID_SCALE; // Distance between dots when scale = 1
-	export let dotSize = DOT_WIDTH; // Dot size when scale = 1
-	export let bgColor: CSSColorString | null = null;
-	export let dotColor: CSSColorString | null = null;
-	export let opacityThreshold = 3; // Scale after which the opacity of grid is reduced
-	export let majorGrid = 0;
-	/**
+	
+	
+	interface Props {
+		// Props
+		style?: BackgroundStyles;
+		gridWidth?: any; // Distance between dots when scale = 1
+		dotSize?: any; // Dot size when scale = 1
+		bgColor?: CSSColorString | null;
+		dotColor?: CSSColorString | null;
+		opacityThreshold?: number; // Scale after which the opacity of grid is reduced
+		majorGrid?: number;
+		/**
 	 * @default 0.4
 	 * @description The minimum opacity of the background grid
 	 */
-	export let minOpacity = 0.4;
+		minOpacity?: number;
+	}
+
+	let {
+		style = 'dots',
+		gridWidth = GRID_SCALE,
+		dotSize = DOT_WIDTH,
+		bgColor = null,
+		dotColor = null,
+		opacityThreshold = 3,
+		majorGrid = 0,
+		minOpacity = 0.4
+	}: Props = $props();
 
 	// External stores
 	const transforms = graph.transforms;
@@ -26,25 +43,25 @@
 	const translationStore = transforms.translation;
 
 	// Reactive variables
-	let backgroundWrapper: HTMLDivElement;
-	let svgWidth;
-	let svgHeight;
-	let backgroundOffsetX: number;
-	let backgroundOffsetY: number;
-	let gridOpacity = 1;
-	let majorGridOpacity = 1;
+	let backgroundWrapper: HTMLDivElement = $state();
+	let svgWidth = $state();
+	let svgHeight = $state();
+	let backgroundOffsetX: number = $state();
+	let backgroundOffsetY: number = $state();
+	let gridOpacity = $state(1);
+	let majorGridOpacity = $state(1);
 
 	//Subscriptions
-	$: graphTranslation = $translationStore;
-	$: scale = $scaleStore;
+	let graphTranslation = $derived($translationStore);
+	let scale = $derived($scaleStore);
 
 	// Reactive declarations
-	$: gridScale = scale * gridWidth; // Update grid scale when scale changes
-	$: radius = (scale * dotSize) / 2; // Update dot radius when scale changes
-	$: dotCenterCoordinate = gridScale / 2; // Place dot in the center of the grid
+	let gridScale = $derived(scale * gridWidth); // Update grid scale when scale changes
+	let radius = $derived((scale * dotSize) / 2); // Update dot radius when scale changes
+	let dotCenterCoordinate = $derived(gridScale / 2); // Place dot in the center of the grid
 
 	// Update background offset when scale or offset changes
-	$: {
+	run(() => {
 		svgWidth = backgroundWrapper?.offsetWidth || 0;
 		svgHeight = backgroundWrapper?.offsetHeight || 0;
 		backgroundOffsetX = ((svgWidth + radius) * (1 - scale)) / 2 + graphTranslation.x;
@@ -52,7 +69,7 @@
 		gridOpacity = scale > opacityThreshold ? 1 : scale / opacityThreshold + minOpacity;
 		majorGridOpacity =
 			scale > opacityThreshold / 3 ? 1 : scale / (opacityThreshold / 3) + minOpacity;
-	}
+	});
 </script>
 
 <!-- BACKGROUND COMPONENT START -->
diff --git a/src/lib/containers/Graph/Graph.svelte b/src/lib/containers/Graph/Graph.svelte
index 082d2b2d8..81b29b4b0 100644
--- a/src/lib/containers/Graph/Graph.svelte
+++ b/src/lib/containers/Graph/Graph.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: `{@render ...}` tags can only contain call expressions
+https://svelte.dev/e/render_tag_invalid_expression -->
 <script context="module" lang="ts">
 	import SelectionBox from '$lib/components/SelectionBox/SelectionBox.svelte';
 	import Background from '../Background/Background.svelte';
diff --git a/src/lib/containers/Svelvet/Svelvet.svelte b/src/lib/containers/Svelvet/Svelvet.svelte
index 81a35043c..17d392810 100644
--- a/src/lib/containers/Svelvet/Svelvet.svelte
+++ b/src/lib/containers/Svelvet/Svelvet.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: `{@render ...}` tags can only contain call expressions
+https://svelte.dev/e/render_tag_invalid_expression -->
 <script context="module" lang="ts">
 	import Graph from '../Graph/Graph.svelte';
 	import FlowChart from '$lib/components/FlowChart/FlowChart.svelte';
diff --git a/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte b/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte
index e1c7c57f0..2337ac3ae 100644
--- a/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte
+++ b/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import type { Graph } from '$lib/types';
 	import { getContext } from 'svelte';
diff --git a/src/lib/renderers/GraphRenderer/GraphRenderer.svelte b/src/lib/renderers/GraphRenderer/GraphRenderer.svelte
index 3cff3b4e2..6abb3ab45 100644
--- a/src/lib/renderers/GraphRenderer/GraphRenderer.svelte
+++ b/src/lib/renderers/GraphRenderer/GraphRenderer.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import GroupBoxRenderer from '$lib/renderers/GroupBoxRenderer/GroupBoxRenderer.svelte';
 	import ZoomPanWrapper from '$lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index dd2247151..acedde8f6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { Svelvet, Node, Anchor, Resizer, Group } from '$lib';
 	import Connector from '../example-components/Connector.svelte';
diff --git a/src/routes/arrows/ArrowEdge.svelte b/src/routes/arrows/ArrowEdge.svelte
index fad2c12c8..9c7a057a5 100644
--- a/src/routes/arrows/ArrowEdge.svelte
+++ b/src/routes/arrows/ArrowEdge.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot read properties of undefined (reading 'end') -->
 <script>
 	import { Edge } from '$lib';
 </script>
diff --git a/src/routes/arrows/ArrowEdgeBlue.svelte b/src/routes/arrows/ArrowEdgeBlue.svelte
index 22d0d3cf1..0f290546c 100644
--- a/src/routes/arrows/ArrowEdgeBlue.svelte
+++ b/src/routes/arrows/ArrowEdgeBlue.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot read properties of undefined (reading 'end') -->
 <script>
 	import { Edge } from '$lib';
 </script>
diff --git a/src/routes/color-test/+page.svelte b/src/routes/color-test/+page.svelte
index e8a441d83..c39613df4 100644
--- a/src/routes/color-test/+page.svelte
+++ b/src/routes/color-test/+page.svelte
@@ -31,8 +31,8 @@
 
 		<Anchor
 			connections={[['output', 'color']]}
-			let:linked
-			let:connecting
+			
+			
 			outputStore={output}
 			output
 			edgeColor={output}
@@ -41,8 +41,10 @@
 			edge={CustomEdge}
 			locked
 		>
-			<ColorAnchor color={output} {connecting} linked />
-		</Anchor>
+			{#snippet children({ linked, connecting })}
+						<ColorAnchor color={output} {connecting} linked />
+								{/snippet}
+				</Anchor>
 	</Node>
 	<!-- <Drawer height={750}/> -->
 	<!-- Bind the node's color to the variable -->
diff --git a/src/routes/cursor-drop/+page.svelte b/src/routes/cursor-drop/+page.svelte
index 52a467482..e6d9a3a48 100644
--- a/src/routes/cursor-drop/+page.svelte
+++ b/src/routes/cursor-drop/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { stopPropagation } from 'svelte/legacy';
+
 	import { getContext, onMount, setContext } from 'svelte';
 	import { Node, Svelvet, Anchor } from '$lib';
 	//import Graph from '$lib/containers/Graph/Graph.svelte';
@@ -7,7 +9,7 @@
 
 	const graph = getContext<Graph>('graph');
 
-	let dropZoneClass = 'inactive';
+	let dropZoneClass = $state('inactive');
 	let NODE_BG_TYPE = 'nodebg';
 	let NODE_HEIGHT_DIMENSIONS_TYPE = 'nodeHeight';
 	let NODE_WIDTH_DIMENSIONS_TYPE = 'nodeWidth';
@@ -19,21 +21,21 @@
 	let NODE_OUTPUTS = 'outputs';
 
 	// types for node creation
-	let bgColor: CSSColorString = '#F2F2F2';
-	let borderColor: CSSColorString = '#DEDEDE';
-	let width: number = 200;
-	let height: number = 100;
-	let nodeTD: boolean = false;
-	let nodeLR: boolean = false;
-	let inputs: number = 1;
-	let outputs: number = 1;
-	let borderWidth: number = 1;
-	let label: string = '';
-	let locked: boolean = false;
-	let center: boolean = false;
+	let bgColor: CSSColorString = $state('#F2F2F2');
+	let borderColor: CSSColorString = $state('#DEDEDE');
+	let width: number = $state(200);
+	let height: number = $state(100);
+	let nodeTD: boolean = $state(false);
+	let nodeLR: boolean = $state(false);
+	let inputs: number = $state(1);
+	let outputs: number = $state(1);
+	let borderWidth: number = $state(1);
+	let label: string = $state('');
+	let locked: boolean = $state(false);
+	let center: boolean = $state(false);
 	let direction: 'LR' | 'TD' | undefined;
 
-	let nodes: NodeConfig[] = [];
+	let nodes: NodeConfig[] = $state([]);
 	const onDragStart = (e: any) => {
 		// e.dataTransfer.setData(NODE_BG_TYPE, nodeBackgroundColor);
 		//e.dataTransfer.setData(NODE_BORDER_TYPE, nodeBorderColor);
@@ -126,10 +128,10 @@
 
 <div
 	class={dropZoneClass}
-	on:dragover={onDragOver}
-	on:dragenter={onDragEnter}
-	on:dragleave={onDragLeave}
-	on:drop={onDrop}
+	ondragover={onDragOver}
+	ondragenter={onDragEnter}
+	ondragleave={onDragLeave}
+	ondrop={onDrop}
 >
 	<Svelvet height={800} zoom={0.75} minimap controls>
 		{#each nodes as node (node.id)}
@@ -163,21 +165,21 @@
 			<li class="list-item">
 				<h3>Anchor Position:</h3>
 				<label for="#td">TD: </label>
-				<input id="td" type="checkbox" bind:value={nodeTD} on:change={setPositionTD} />
+				<input id="td" type="checkbox" bind:value={nodeTD} onchange={setPositionTD} />
 				<label for="#lr">LR: </label>
-				<input id="lr" type="checkbox" bind:value={nodeLR} on:change={setPositionLR} />
+				<input id="lr" type="checkbox" bind:value={nodeLR} onchange={setPositionLR} />
 			</li>
 			<li class="list-item">
-				Locked: <input type="checkbox" bind:value={locked} on:change={handleLockedButtonClick} />
+				Locked: <input type="checkbox" bind:value={locked} onchange={handleLockedButtonClick} />
 			</li>
 			<li class="list-item">
-				Centered: <input type="checkbox" bind:value={center} on:change={handleCenterButtonClick} />
+				Centered: <input type="checkbox" bind:value={center} onchange={handleCenterButtonClick} />
 			</li>
 			<li class="list-item">
-				<div id="createNode" draggable="true" on:dragstart={onDragStart}>Node</div>
+				<div id="createNode" draggable="true" ondragstart={onDragStart}>Node</div>
 			</li>
 			<li>
-				<button on:click|stopPropagation={handleClick}>Reset</button>
+				<button onclick={stopPropagation(handleClick)}>Reset</button>
 			</li>
 		</ul>
 	</div>
diff --git a/src/routes/drawer-test/+page.svelte b/src/routes/drawer-test/+page.svelte
index b72ee770c..4714b6fc8 100644
--- a/src/routes/drawer-test/+page.svelte
+++ b/src/routes/drawer-test/+page.svelte
@@ -4,5 +4,7 @@
 </script>
 
 <Drawer height={1200} zoom={0.7} controls>
-	<ThemeToggle main="light" alt="dark" slot="toggle" />
+	{#snippet toggle()}
+		<ThemeToggle main="light" alt="dark"  />
+	{/snippet}
 </Drawer>
diff --git a/src/routes/drawer/+page.svelte b/src/routes/drawer/+page.svelte
index 66ff82025..ec5d06087 100644
--- a/src/routes/drawer/+page.svelte
+++ b/src/routes/drawer/+page.svelte
@@ -1,57 +1,59 @@
 <script lang="ts">
+	import { stopPropagation } from 'svelte/legacy';
+
 	import { Node, Svelvet, Anchor, Edge } from '$lib';
 	import ThemeToggle from '$lib/components/ThemeToggle/ThemeToggle.svelte';
 	import type { NodeConfig, CSSColorString, Direction } from '$lib/types';
 	import CustomEdge from '../../example-components/CustomEdge.svelte';
 	import { addProps } from '$lib/utils';
 
-	let defaultNodes: NodeConfig[] = [];
-	let customNodes: NodeConfig[] = [];
+	let defaultNodes: NodeConfig[] = $state([]);
+	let customNodes: NodeConfig[] = $state([]);
 	let anchors: any[] = [];
 	let edges: any[] = [];
 	let customEdge: any;
 	let dropped_in: boolean;
 
 	// types for node creation
-	let bgColor: CSSColorString | undefined;
-	let borderColor: CSSColorString | undefined;
-	let label: string | undefined;
-	let width: number = 200;
-	let height: number = 100;
-	let nodeDirection: string | undefined;
-	let inputs: number | undefined;
-	let outputs: number | undefined;
-	let locked: boolean | undefined;
-	let center: boolean | undefined;
-	let rotation: number | undefined;
-	let zIndex: number | undefined;
+	let bgColor: CSSColorString | undefined = $state();
+	let borderColor: CSSColorString | undefined = $state();
+	let label: string | undefined = $state();
+	let width: number = $state(200);
+	let height: number = $state(100);
+	let nodeDirection: string | undefined = $state();
+	let inputs: number | undefined = $state();
+	let outputs: number | undefined = $state();
+	let locked: boolean | undefined = $state();
+	let center: boolean | undefined = $state();
+	let rotation: number | undefined = $state();
+	let zIndex: number | undefined = $state();
 	let TD: boolean | undefined;
 	let LR: boolean | undefined;
-	let useDefaults: boolean | undefined;
+	let useDefaults: boolean | undefined = $state();
 
 	// types for anchor creation
-	let invisible: boolean | undefined;
-	let nodeConnect: boolean | undefined;
-	let input: boolean | undefined;
-	let output: boolean | undefined;
-	let multiple: boolean | undefined;
-	let direction: Direction | undefined;
-	let dynamic: boolean | undefined;
-	let anchorEdgeLabel: string | undefined;
-	let anchorLocked: boolean | undefined;
-	let anchorBgColor: CSSColorString | undefined;
+	let invisible: boolean | undefined = $state();
+	let nodeConnect: boolean | undefined = $state();
+	let input: boolean | undefined = $state();
+	let output: boolean | undefined = $state();
+	let multiple: boolean | undefined = $state();
+	let direction: Direction | undefined = $state();
+	let dynamic: boolean | undefined = $state();
+	let anchorEdgeLabel: string | undefined = $state();
+	let anchorLocked: boolean | undefined = $state();
+	let anchorBgColor: CSSColorString | undefined = $state();
 
 	//types for edge creation
-	let edgeWidth: number | undefined;
-	let targetColor: CSSColorString | undefined;
-	let color: CSSColorString | undefined;
-	let straight: boolean | undefined;
-	let step: boolean | undefined;
-	let cornerRadius: number | undefined;
-	let animate: boolean | undefined;
-	let edgeLabel: string | undefined;
-	let labelColor: CSSColorString | undefined;
-	let textColor: CSSColorString | undefined;
+	let edgeWidth: number | undefined = $state();
+	let targetColor: CSSColorString | undefined = $state();
+	let color: CSSColorString | undefined = $state();
+	let straight: boolean | undefined = $state();
+	let step: boolean | undefined = $state();
+	let cornerRadius: number | undefined = $state();
+	let animate: boolean | undefined = $state();
+	let edgeLabel: string | undefined = $state();
+	let labelColor: CSSColorString | undefined = $state();
+	let textColor: CSSColorString | undefined = $state();
 	let edgeClick: () => void | null; // Stretch feature
 
 	// Drag and drop events
@@ -329,10 +331,10 @@
 
 <div
 	id="drop_zone"
-	on:dragenter={handleDragEnter}
-	on:dragleave={handleDragLeave}
-	on:drop={handleDragDrop}
-	on:dragover={onDragOver}
+	ondragenter={handleDragEnter}
+	ondragleave={handleDragLeave}
+	ondrop={handleDragDrop}
+	ondragover={onDragOver}
 >
 	<Svelvet height={600} zoom={0.7} minimap controls>
 		{#each defaultNodes as node}
@@ -345,7 +347,9 @@
 				</Anchor>
 			</Node>
 		{/each}
-		<ThemeToggle main="light" alt="dark" slot="toggle" />
+		{#snippet toggle()}
+				<ThemeToggle main="light" alt="dark"  />
+			{/snippet}
 	</Svelvet>
 </div>
 
@@ -357,8 +361,8 @@
 				<div
 					class="defaultNodes"
 					draggable="true"
-					on:dragstart={handleDragStart}
-					on:dragend={handleDragEnd}
+					ondragstart={handleDragStart}
+					ondragend={handleDragEnd}
 				>
 					Node
 				</div>
@@ -377,7 +381,7 @@
 					id="useDefaults"
 					type="checkbox"
 					bind:value={useDefaults}
-					on:change={handleUseDefaultsButtonClick}
+					onchange={handleUseDefaultsButtonClick}
 				/>
 			</li>
 			<li class="list-item">
@@ -408,7 +412,7 @@
 				<select
 					id="anchorPosition"
 					bind:value={nodeDirection}
-					on:change={handleAnchorPositionButton}
+					onchange={handleAnchorPositionButton}
 				>
 					<option value="">-</option>
 					<option value="LR">LR</option>
@@ -416,7 +420,7 @@
 				</select>
 			</li>
 			<li class="list-item">
-				<button class="nodeResetBtn btn" on:click|stopPropagation={handleNodeResetButtonClick}
+				<button class="nodeResetBtn btn" onclick={stopPropagation(handleNodeResetButtonClick)}
 					>Reset</button
 				>
 			</li>
@@ -425,7 +429,7 @@
 			</li>
 			<li class="list-item">
 				<label for="locked">Locked: </label>
-				<input id="label" type="checkbox" bind:value={locked} on:change={handleLockedButtonClick} />
+				<input id="label" type="checkbox" bind:value={locked} onchange={handleLockedButtonClick} />
 			</li>
 			<li class="list-item">
 				<label for="centered">Centered: </label>
@@ -433,7 +437,7 @@
 					id="centered"
 					type="checkbox"
 					bind:value={center}
-					on:change={handleCenterButtonClick}
+					onchange={handleCenterButtonClick}
 				/>
 			</li>
 			<li class="list-item">
@@ -464,7 +468,7 @@
 							id="invisible"
 							type="checkbox"
 							bind:value={invisible}
-							on:change={handleInvisibleButtonClick}
+							onchange={handleInvisibleButtonClick}
 						/>
 					</li>
 					<li class="list-item">
@@ -473,7 +477,7 @@
 							id="nodeConnect"
 							type="checkbox"
 							bind:value={nodeConnect}
-							on:change={handleNodeConnectButtonClick}
+							onchange={handleNodeConnectButtonClick}
 						/>
 					</li>
 					<li class="list-item">
@@ -482,7 +486,7 @@
 							id="input"
 							type="checkbox"
 							bind:value={input}
-							on:change={handleInputButtonClick}
+							onchange={handleInputButtonClick}
 						/>
 					</li>
 					<li class="list-item">
@@ -491,7 +495,7 @@
 							id="output"
 							type="checkbox"
 							bind:value={output}
-							on:change={handleOutputButtonClick}
+							onchange={handleOutputButtonClick}
 						/>
 					</li>
 					<li class="list-item">
@@ -500,12 +504,12 @@
 							id="multiple"
 							type="checkbox"
 							bind:value={multiple}
-							on:change={handleMultipleButtonClick}
+							onchange={handleMultipleButtonClick}
 						/>
 					</li>
 					<li class="list-item">
 						<label for="direction">Direction: </label>
-						<select id="direction" bind:value={direction} on:change={handleDirectionButtonClick}>
+						<select id="direction" bind:value={direction} onchange={handleDirectionButtonClick}>
 							<option value="">-</option>
 							<option value="north">North</option>
 							<option value="south">South</option>
@@ -520,7 +524,7 @@
 							id="dynamic"
 							type="checkbox"
 							bind:value={dynamic}
-							on:change={handleDynamicButtonClick}
+							onchange={handleDynamicButtonClick}
 						/>
 					</li>
 					<li class="list-item">
@@ -534,13 +538,13 @@
 							id="anchorLocked"
 							type="checkbox"
 							bind:value={anchorLocked}
-							on:change={handleAnchorLockedButtonClick}
+							onchange={handleAnchorLockedButtonClick}
 						/>
 					</li>
 					<li class="list-item">
 						<button
 							class="anchorResetBtn btn"
-							on:click|stopPropagation={handleAnchorResetButtonClick}>Reset</button
+							onclick={stopPropagation(handleAnchorResetButtonClick)}>Reset</button
 						>
 					</li>
 				</ul>
@@ -578,12 +582,12 @@
 							id="straight"
 							type="checkbox"
 							bind:value={straight}
-							on:change={handleStraightButtonClick}
+							onchange={handleStraightButtonClick}
 						/>
 					</li>
 					<li class="list-item">
 						<label for="step">Step : </label>
-						<input id="step" type="checkbox" bind:value={step} on:change={handleStepButtonClick} />
+						<input id="step" type="checkbox" bind:value={step} onchange={handleStepButtonClick} />
 					</li>
 					<li class="list-item">
 						<label for="animate">Animate : </label>
@@ -591,7 +595,7 @@
 							id="animate"
 							type="checkbox"
 							bind:value={animate}
-							on:change={handleAnimateButtonClick}
+							onchange={handleAnimateButtonClick}
 						/>
 					</li>
 
@@ -600,7 +604,7 @@
 						<input id="edgeLabel" type="text" bind:value={edgeLabel} />
 					</li>
 					<li class="list-item">
-						<button class="edgeResetBtn btn" on:click|stopPropagation={handleEdgeResetButtonClick}
+						<button class="edgeResetBtn btn" onclick={stopPropagation(handleEdgeResetButtonClick)}
 							>Reset</button
 						>
 					</li>
diff --git a/src/routes/edge-delete/+page.svelte b/src/routes/edge-delete/+page.svelte
index 5426dae47..1f41b5b14 100644
--- a/src/routes/edge-delete/+page.svelte
+++ b/src/routes/edge-delete/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { Svelvet, Minimap, Node, Anchor, Background } from '$lib';
 
-	let graph: Svelvet;
-	let anchor: Anchor;
+	let graph: Svelvet = $state();
+	let anchor: Anchor = $state();
 </script>
 
-<svelte:window on:keydown={() => anchor.disconnect([5, 5])} />
+<svelte:window onkeydown={() => anchor.disconnect([5, 5])} />
 
 <body>
 	<Svelvet fitView bind:this={graph}>
@@ -41,7 +41,9 @@
 			connections={[2, 3, '4', [5, '1'], 6, ['custom', 'custom']]}
 		/>
 
-		<Background style="dots" majorGrid={4} slot="background" />
+		{#snippet background()}
+				<Background style="dots" majorGrid={4}  />
+			{/snippet}
 	</Svelvet>
 </body>
 
diff --git a/src/routes/edges/+page.svelte b/src/routes/edges/+page.svelte
index baf8cdd71..471e117bb 100644
--- a/src/routes/edges/+page.svelte
+++ b/src/routes/edges/+page.svelte
@@ -10,7 +10,9 @@
 		<Svelvet TD theme="dark" width={800} height={500} zoom={0.5} controls title="tests" minimap>
 			<Node connections={[2, 3]} useDefaults width={200} height={100}>
 				<Anchor output>
-					<Edge slot="edge" color="yellow" label="Hello" />
+					{#snippet edge()}
+										<Edge  color="yellow" label="Hello" />
+									{/snippet}
 				</Anchor>
 			</Node>
 		</Svelvet>
diff --git a/src/routes/hiding-nodes/+page.svelte b/src/routes/hiding-nodes/+page.svelte
index b807d209f..927c12b98 100644
--- a/src/routes/hiding-nodes/+page.svelte
+++ b/src/routes/hiding-nodes/+page.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { Svelvet, Minimap, Node, Anchor } from '$lib';
 
-	let childrenHidden = true;
+	let childrenHidden = $state(true);
 </script>
 
 <body>
 	<div class="wrapper">
 		<Svelvet TD theme="dark" width={800} height={500} zoom={0.5} controls title="tests" minimap>
 			<Node connections={[2, 3]} useDefaults width={200} height={100}>
-				<button on:click={() => (childrenHidden = !childrenHidden)}>Hide Children</button>
+				<button onclick={() => (childrenHidden = !childrenHidden)}>Hide Children</button>
 				<Anchor output />
 			</Node>
 			{#if childrenHidden}
@@ -16,7 +16,8 @@
 				<Node position={{ x: -100, y: 300 }} connections={[4]} />
 				<Node position={{ x: -100, y: 500 }} />
 			{/if}
-			<Minimap slot="minimap" />
+			<!-- @migration-task: migrate this slot by hand, `minimap` would shadow a prop on the parent component -->
+	<Minimap slot="minimap" />
 		</Svelvet>
 	</div>
 </body>
diff --git a/src/routes/knob-test/+page.svelte b/src/routes/knob-test/+page.svelte
index 2987511ad..ebfa7798c 100644
--- a/src/routes/knob-test/+page.svelte
+++ b/src/routes/knob-test/+page.svelte
@@ -23,7 +23,9 @@
 		<Treble />
 		<!-- <Bass /> -->
 		<Audio />
-		<ThemeToggle main="light" alt="dark" slot="toggle" />
+		{#snippet toggle()}
+				<ThemeToggle main="light" alt="dark"  />
+			{/snippet}
 	</Svelvet>
 </body>
 
diff --git a/src/routes/movement/+page.svelte b/src/routes/movement/+page.svelte
index f8422570d..674a8b5aa 100644
--- a/src/routes/movement/+page.svelte
+++ b/src/routes/movement/+page.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Svelvet, Node, Anchor } from '$lib';
 
-	let position = { x: 300, y: 300 };
-	$: console.log(position);
+	let position = $state({ x: 300, y: 300 });
+	run(() => {
+		console.log(position);
+	});
 </script>
 
 <body>
@@ -11,7 +15,7 @@
 			<div class="node-body">
 				<p>{JSON.stringify(position)}</p>
 				<button
-					on:click={() => {
+					onclick={() => {
 						position = { x: 100, y: 100 };
 					}}>Move</button
 				>
diff --git a/src/routes/sandbox/+page.svelte b/src/routes/sandbox/+page.svelte
index a7aff556d..97ae7c719 100644
--- a/src/routes/sandbox/+page.svelte
+++ b/src/routes/sandbox/+page.svelte
@@ -28,7 +28,9 @@
 		<Output />
 		<span id="state" class="note"> Stateful Anchors</span>
 		<span id="groups" class="note">Group Boxes</span>
-		<ThemeToggle main="dark" alt="light" slot="toggle" />
+		{#snippet toggle()}
+				<ThemeToggle main="dark" alt="light"  />
+			{/snippet}
 	</Svelvet>
 </body>
 
diff --git a/src/routes/scroll-issue/+page.svelte b/src/routes/scroll-issue/+page.svelte
index 63f986974..5e296f011 100644
--- a/src/routes/scroll-issue/+page.svelte
+++ b/src/routes/scroll-issue/+page.svelte
@@ -43,7 +43,9 @@
 			connections={[2, 3, '4', [5, '1'], 6, ['custom', 'custom']]}
 		/>
 
-		<Background style="dots" majorGrid={4} slot="background" />
+		{#snippet background()}
+				<Background style="dots" majorGrid={4}  />
+			{/snippet}
 	</Svelvet>
 </body>
 
diff --git a/src/routes/shapes/+page.svelte b/src/routes/shapes/+page.svelte
index 489fe5de1..3af47748d 100644
--- a/src/routes/shapes/+page.svelte
+++ b/src/routes/shapes/+page.svelte
@@ -135,7 +135,9 @@
 				<Anchor direction="west" invisible />
 			</div>
 		</Node>
-		<ThemeToggle main="dark" alt="light" slot="toggle" />
+		{#snippet toggle()}
+				<ThemeToggle main="dark" alt="light"  />
+			{/snippet}
 	</Svelvet>
 </body>
 
diff --git a/src/routes/styling/+page.svelte b/src/routes/styling/+page.svelte
index 690b3f75e..cfdf91b43 100644
--- a/src/routes/styling/+page.svelte
+++ b/src/routes/styling/+page.svelte
@@ -15,7 +15,9 @@
 		<Node --node-color="red" --node-border-radius="40px" id="node2" label="test" />
 		<Node label="what" position={{ x: 10, y: 200 }} inputs={3} TD />
 		<Node label="what" position={{ x: 100, y: 200 }} inputs={2} TD blocked />
-		<ThemeToggle slot="toggle" main="light" alt="custom-theme" />
+		{#snippet toggle()}
+				<ThemeToggle  main="light" alt="custom-theme" />
+			{/snippet}
 	</Svelvet>
 </body>
 
diff --git a/src/routes/tests/+page.svelte b/src/routes/tests/+page.svelte
index 7a4ff1eba..de8b4c4a0 100644
--- a/src/routes/tests/+page.svelte
+++ b/src/routes/tests/+page.svelte
@@ -2,8 +2,8 @@
 	import { Svelvet, Minimap, Node } from '$lib';
 	import type { SvelvetConnectionEvent } from '$lib/types';
 	import CustomEdge from '../../example-components/CustomEdge.svelte';
-	let position = { x: 300, y: 300 };
-	let label = 'test';
+	let position = $state({ x: 300, y: 300 });
+	let label = $state('test');
 
 	function handleConnection(e: CustomEvent<SvelvetConnectionEvent>) {
 		console.log(e.detail);
@@ -37,7 +37,9 @@
 				edge={CustomEdge}
 			/>
 			<Node label="what" position={{ x: 10, y: 200 }} inputs={3} TD />
-			<Minimap slot="minimap" />
+			{#snippet minimap()}
+						<Minimap  />
+					{/snippet}
 		</Svelvet>
 	</div>
 </body>
diff --git a/src/routes/theme-toggle/+page.svelte b/src/routes/theme-toggle/+page.svelte
index a4424cd43..04c49680d 100644
--- a/src/routes/theme-toggle/+page.svelte
+++ b/src/routes/theme-toggle/+page.svelte
@@ -5,6 +5,8 @@
 <body>
 	<Svelvet width={500} height={500}>
 		<Node />
-		<ThemeToggle slot="toggle" />
+		{#snippet toggle()}
+				<ThemeToggle  />
+			{/snippet}
 	</Svelvet>
 </body>
diff --git a/src/routes/website/+page.svelte b/src/routes/website/+page.svelte
index 3e88ac5da..937b9fb3e 100644
--- a/src/routes/website/+page.svelte
+++ b/src/routes/website/+page.svelte
@@ -31,7 +31,9 @@
 		<Output />
 		<span id="state" class="note"> Stateful Anchors</span>
 		<span id="groups" class="note">Group Boxes</span>
-		<ThemeToggle main="light" alt="dark" slot="toggle" />
+		{#snippet toggle()}
+				<ThemeToggle main="light" alt="dark"  />
+			{/snippet}
 	</Svelvet>
 </div>
 

From ed1a3924c9f3bb00a4fe850c25f605282f582dbe Mon Sep 17 00:00:00 2001
From: jknohr <johann@nohr.com>
Date: Sat, 25 Jan 2025 22:56:40 +0700
Subject: [PATCH 23/26] insta

---
 src/lib/components/Anchor/Anchor.svelte                 | 2 ++
 src/lib/components/ContrastTheme/ContrastTheme.svelte   | 2 ++
 src/lib/components/Controls/Controls.svelte             | 2 ++
 src/lib/components/Drawer/Drawer.svelte                 | 2 ++
 src/lib/components/Drawer/DrawerAnchor.svelte           | 2 ++
 src/lib/components/Drawer/DrawerController.svelte       | 2 ++
 src/lib/components/Edge/Edge.svelte                     | 2 ++
 src/lib/components/Editor/Editor.svelte                 | 2 ++
 src/lib/components/FlowChart/FlowChart.svelte           | 2 ++
 src/lib/components/Group/Group.svelte                   | 2 ++
 src/lib/components/Minimap/Minimap.svelte               | 2 ++
 src/lib/components/Node/DefaultNode.svelte              | 2 ++
 src/lib/components/Node/InternalNode.svelte             | 2 ++
 src/lib/components/Node/Node.svelte                     | 2 ++
 src/lib/components/Resizer/Resizer.svelte               | 2 ++
 src/lib/components/ThemeToggle/ThemeToggle.svelte       | 2 ++
 src/lib/components/data/ColorPicker/ColorWheel.svelte   | 2 ++
 src/lib/components/data/Knob/Knob.svelte                | 2 ++
 src/lib/components/data/RadioGroup/RadioGroup.svelte    | 2 ++
 src/lib/components/data/Toggle/Toggle.svelte            | 2 ++
 src/lib/containers/Graph/Graph.svelte                   | 2 ++
 src/lib/containers/Svelvet/Svelvet.svelte               | 2 ++
 src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte | 2 ++
 src/lib/renderers/GraphRenderer/GraphRenderer.svelte    | 2 ++
 src/routes/+page.svelte                                 | 2 ++
 src/routes/arrows/ArrowEdge.svelte                      | 1 +
 src/routes/arrows/ArrowEdgeBlue.svelte                  | 1 +
 src/routes/hiding-nodes/+page.svelte                    | 1 +
 28 files changed, 53 insertions(+)

diff --git a/src/lib/components/Anchor/Anchor.svelte b/src/lib/components/Anchor/Anchor.svelte
index d8d9da9ab..e4e03bcd0 100644
--- a/src/lib/components/Anchor/Anchor.svelte
+++ b/src/lib/components/Anchor/Anchor.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script context="module" lang="ts">
 	import DefaultAnchor from './DefaultAnchor.svelte';
 	import Edge from '../Edge/Edge.svelte';
diff --git a/src/lib/components/ContrastTheme/ContrastTheme.svelte b/src/lib/components/ContrastTheme/ContrastTheme.svelte
index 3862ef74d..7d1eff533 100644
--- a/src/lib/components/ContrastTheme/ContrastTheme.svelte
+++ b/src/lib/components/ContrastTheme/ContrastTheme.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unterminated regular expression
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unterminated regular expression
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import type { CSSColorString } from '$lib/types';
 
diff --git a/src/lib/components/Controls/Controls.svelte b/src/lib/components/Controls/Controls.svelte
index 3e961f019..acdf98fc4 100644
--- a/src/lib/components/Controls/Controls.svelte
+++ b/src/lib/components/Controls/Controls.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import type { Graph } from '$lib/types';
 	import { getContext } from 'svelte';
diff --git a/src/lib/components/Drawer/Drawer.svelte b/src/lib/components/Drawer/Drawer.svelte
index cc6ec5cd0..254fb1f4c 100644
--- a/src/lib/components/Drawer/Drawer.svelte
+++ b/src/lib/components/Drawer/Drawer.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Expected token >
 https://svelte.dev/e/expected_token -->
+<!-- @migration-task Error while migrating Svelte code: Expected token >
+https://svelte.dev/e/expected_token -->
 <script lang="ts">
 	import { Node, Svelvet, Anchor, Edge } from '$lib';
 	import type { SvelvetConfig, NodeConfig, XYPair, EdgeStyle, NodeDrawerConfig } from '$lib/types';
diff --git a/src/lib/components/Drawer/DrawerAnchor.svelte b/src/lib/components/Drawer/DrawerAnchor.svelte
index de80c234e..50dea1744 100644
--- a/src/lib/components/Drawer/DrawerAnchor.svelte
+++ b/src/lib/components/Drawer/DrawerAnchor.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
 https://svelte.dev/e/rune_missing_parentheses -->
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script context="module" lang="ts">
 	import { writable } from 'svelte/store';
 	import type { CSSColorString, Direction, AnchorDrawerConfig, AnchorProps } from '$lib/types';
diff --git a/src/lib/components/Drawer/DrawerController.svelte b/src/lib/components/Drawer/DrawerController.svelte
index bd1980b19..225bbb61e 100644
--- a/src/lib/components/Drawer/DrawerController.svelte
+++ b/src/lib/components/Drawer/DrawerController.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
 https://svelte.dev/e/rune_missing_parentheses -->
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import DrawerNode from './DrawerNode.svelte';
 	import DrawerAnchor from './DrawerAnchor.svelte';
diff --git a/src/lib/components/Edge/Edge.svelte b/src/lib/components/Edge/Edge.svelte
index 859e5b2d7..cf97577d2 100644
--- a/src/lib/components/Edge/Edge.svelte
+++ b/src/lib/components/Edge/Edge.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script context="module" lang="ts">
 	import { calculateStepPath, calculateRadius, calculatePath } from '$lib/utils/calculators';
 	import { onMount, onDestroy, getContext, afterUpdate } from 'svelte';
diff --git a/src/lib/components/Editor/Editor.svelte b/src/lib/components/Editor/Editor.svelte
index 210c8eb32..7f2ae1470 100644
--- a/src/lib/components/Editor/Editor.svelte
+++ b/src/lib/components/Editor/Editor.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import Slider from '../data/Slider/Slider.svelte';
 	import TextField from '../data/TextField/TextField.svelte';
diff --git a/src/lib/components/FlowChart/FlowChart.svelte b/src/lib/components/FlowChart/FlowChart.svelte
index 6155aca59..4d1189f5f 100644
--- a/src/lib/components/FlowChart/FlowChart.svelte
+++ b/src/lib/components/FlowChart/FlowChart.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
 https://svelte.dev/e/rune_missing_parentheses -->
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import type { Graph, NodeConfig, NodeKey, Node as NodeType } from '$lib/types';
 	import type { FlowChart } from '$lib/types/parser';
diff --git a/src/lib/components/Group/Group.svelte b/src/lib/components/Group/Group.svelte
index ed475087b..90799e1b0 100644
--- a/src/lib/components/Group/Group.svelte
+++ b/src/lib/components/Group/Group.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
 https://svelte.dev/e/rune_missing_parentheses -->
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import { setContext, getContext } from 'svelte';
 	import type { Group, Graph, GroupBox, XYPair, CSSColorString, GroupKey } from '$lib/types';
diff --git a/src/lib/components/Minimap/Minimap.svelte b/src/lib/components/Minimap/Minimap.svelte
index a7944702f..4565c4ea9 100644
--- a/src/lib/components/Minimap/Minimap.svelte
+++ b/src/lib/components/Minimap/Minimap.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import MiniNode from './MiniNode.svelte';
diff --git a/src/lib/components/Node/DefaultNode.svelte b/src/lib/components/Node/DefaultNode.svelte
index a5c12fd2f..0ff8511be 100644
--- a/src/lib/components/Node/DefaultNode.svelte
+++ b/src/lib/components/Node/DefaultNode.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
 https://svelte.dev/e/rune_missing_parentheses -->
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script context="module" lang="ts">
 	import Resizer from '$lib/components/Resizer/Resizer.svelte';
 	import Anchor from '$lib/components/Anchor/Anchor.svelte';
diff --git a/src/lib/components/Node/InternalNode.svelte b/src/lib/components/Node/InternalNode.svelte
index 8f9a99aa2..a0436a0ee 100644
--- a/src/lib/components/Node/InternalNode.svelte
+++ b/src/lib/components/Node/InternalNode.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Identifier 'anchorsMounted' has already been declared
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Identifier 'anchorsMounted' has already been declared
+https://svelte.dev/e/js_parse_error -->
 <script context="module" lang="ts">
 	import { initialClickPosition, tracking } from '$lib/stores';
 	import { captureGroup } from '$lib/utils';
diff --git a/src/lib/components/Node/Node.svelte b/src/lib/components/Node/Node.svelte
index 05881cd73..a8c3a5635 100644
--- a/src/lib/components/Node/Node.svelte
+++ b/src/lib/components/Node/Node.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script context="module" lang="ts">
 	import InternalNode from './InternalNode.svelte';
 	import DefaultNode from './DefaultNode.svelte';
diff --git a/src/lib/components/Resizer/Resizer.svelte b/src/lib/components/Resizer/Resizer.svelte
index abee5af4b..76e630e4b 100644
--- a/src/lib/components/Resizer/Resizer.svelte
+++ b/src/lib/components/Resizer/Resizer.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { calculateFitContentWidth } from '$lib/utils';
 	import { beforeUpdate, getContext, onMount } from 'svelte';
diff --git a/src/lib/components/ThemeToggle/ThemeToggle.svelte b/src/lib/components/ThemeToggle/ThemeToggle.svelte
index 38c72fa58..2ccf4c8d3 100644
--- a/src/lib/components/ThemeToggle/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle/ThemeToggle.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
 https://svelte.dev/e/rune_missing_parentheses -->
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import type { CSSColorString } from '$lib/types';
 	import { getJSONState } from '$lib/utils/savers/saveStore';
diff --git a/src/lib/components/data/ColorPicker/ColorWheel.svelte b/src/lib/components/data/ColorPicker/ColorWheel.svelte
index c098f0543..8b877ccf2 100644
--- a/src/lib/components/data/ColorPicker/ColorWheel.svelte
+++ b/src/lib/components/data/ColorPicker/ColorWheel.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import type {
diff --git a/src/lib/components/data/Knob/Knob.svelte b/src/lib/components/data/Knob/Knob.svelte
index 0793364d2..a4e57b7f9 100644
--- a/src/lib/components/data/Knob/Knob.svelte
+++ b/src/lib/components/data/Knob/Knob.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import { isArrow } from '$lib/types';
diff --git a/src/lib/components/data/RadioGroup/RadioGroup.svelte b/src/lib/components/data/RadioGroup/RadioGroup.svelte
index d5489ddb4..a68c8c488 100644
--- a/src/lib/components/data/RadioGroup/RadioGroup.svelte
+++ b/src/lib/components/data/RadioGroup/RadioGroup.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
 https://svelte.dev/e/rune_missing_parentheses -->
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import type { CustomWritable } from '$lib/types';
 
diff --git a/src/lib/components/data/Toggle/Toggle.svelte b/src/lib/components/data/Toggle/Toggle.svelte
index 4b26d3d41..8c44ffad7 100644
--- a/src/lib/components/data/Toggle/Toggle.svelte
+++ b/src/lib/components/data/Toggle/Toggle.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
 https://svelte.dev/e/rune_missing_parentheses -->
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	$props = {
 		parameterStore: null,
diff --git a/src/lib/containers/Graph/Graph.svelte b/src/lib/containers/Graph/Graph.svelte
index 81b29b4b0..8036f2987 100644
--- a/src/lib/containers/Graph/Graph.svelte
+++ b/src/lib/containers/Graph/Graph.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: `{@render ...}` tags can only contain call expressions
 https://svelte.dev/e/render_tag_invalid_expression -->
+<!-- @migration-task Error while migrating Svelte code: `{@render ...}` tags can only contain call expressions
+https://svelte.dev/e/render_tag_invalid_expression -->
 <script context="module" lang="ts">
 	import SelectionBox from '$lib/components/SelectionBox/SelectionBox.svelte';
 	import Background from '../Background/Background.svelte';
diff --git a/src/lib/containers/Svelvet/Svelvet.svelte b/src/lib/containers/Svelvet/Svelvet.svelte
index 17d392810..f1275441c 100644
--- a/src/lib/containers/Svelvet/Svelvet.svelte
+++ b/src/lib/containers/Svelvet/Svelvet.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: `{@render ...}` tags can only contain call expressions
 https://svelte.dev/e/render_tag_invalid_expression -->
+<!-- @migration-task Error while migrating Svelte code: `{@render ...}` tags can only contain call expressions
+https://svelte.dev/e/render_tag_invalid_expression -->
 <script context="module" lang="ts">
 	import Graph from '../Graph/Graph.svelte';
 	import FlowChart from '$lib/components/FlowChart/FlowChart.svelte';
diff --git a/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte b/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte
index 2337ac3ae..69e89d430 100644
--- a/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte
+++ b/src/lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
 https://svelte.dev/e/rune_missing_parentheses -->
+<!-- @migration-task Error while migrating Svelte code: Cannot use rune without parentheses
+https://svelte.dev/e/rune_missing_parentheses -->
 <script lang="ts">
 	import type { Graph } from '$lib/types';
 	import { getContext } from 'svelte';
diff --git a/src/lib/renderers/GraphRenderer/GraphRenderer.svelte b/src/lib/renderers/GraphRenderer/GraphRenderer.svelte
index 6abb3ab45..03cb3d1e7 100644
--- a/src/lib/renderers/GraphRenderer/GraphRenderer.svelte
+++ b/src/lib/renderers/GraphRenderer/GraphRenderer.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import GroupBoxRenderer from '$lib/renderers/GroupBoxRenderer/GroupBoxRenderer.svelte';
 	import ZoomPanWrapper from '$lib/containers/ZoomPanWrapper/ZoomPanWrapper.svelte';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index acedde8f6..83dd521b9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token
 https://svelte.dev/e/js_parse_error -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { Svelvet, Node, Anchor, Resizer, Group } from '$lib';
 	import Connector from '../example-components/Connector.svelte';
diff --git a/src/routes/arrows/ArrowEdge.svelte b/src/routes/arrows/ArrowEdge.svelte
index 9c7a057a5..3ec602e52 100644
--- a/src/routes/arrows/ArrowEdge.svelte
+++ b/src/routes/arrows/ArrowEdge.svelte
@@ -1,4 +1,5 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot read properties of undefined (reading 'end') -->
+<!-- @migration-task Error while migrating Svelte code: Cannot read properties of undefined (reading 'end') -->
 <script>
 	import { Edge } from '$lib';
 </script>
diff --git a/src/routes/arrows/ArrowEdgeBlue.svelte b/src/routes/arrows/ArrowEdgeBlue.svelte
index 0f290546c..f1616f824 100644
--- a/src/routes/arrows/ArrowEdgeBlue.svelte
+++ b/src/routes/arrows/ArrowEdgeBlue.svelte
@@ -1,4 +1,5 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot read properties of undefined (reading 'end') -->
+<!-- @migration-task Error while migrating Svelte code: Cannot read properties of undefined (reading 'end') -->
 <script>
 	import { Edge } from '$lib';
 </script>
diff --git a/src/routes/hiding-nodes/+page.svelte b/src/routes/hiding-nodes/+page.svelte
index 927c12b98..afd95aad8 100644
--- a/src/routes/hiding-nodes/+page.svelte
+++ b/src/routes/hiding-nodes/+page.svelte
@@ -17,6 +17,7 @@
 				<Node position={{ x: -100, y: 500 }} />
 			{/if}
 			<!-- @migration-task: migrate this slot by hand, `minimap` would shadow a prop on the parent component -->
+	<!-- @migration-task: migrate this slot by hand, `minimap` would shadow a prop on the parent component -->
 	<Minimap slot="minimap" />
 		</Svelvet>
 	</div>

From d3e25876bddc92006d319f0565e2cb7430f1950a Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 23:01:43 +0700
Subject: [PATCH 24/26] Update code to ES2022 standards

Update code to ES2022 standards and fix syntax error in `src/routes/+page.svelte`.

* **package.json**
  - Update `ecmaVersion` to 2022 in `parserOptions`.

* **src/routes/+page.svelte**
  - Fix syntax error in the script section.
  - Replace `{@render}` with `<Component />` syntax.

* **src/lib/stores/GraphStore.ts**
  - Update to use ES2022 syntax.
  - Remove commented-out code and update `source` to use `Graph | null` type.

* **src/example-components/CustomNode.svelte**
  - Update to use ES2022 syntax.
  - Remove unnecessary space in `<Node>` tag.
---
 package.json                             | 2 +-
 src/example-components/CustomNode.svelte | 2 +-
 src/lib/stores/GraphStore.ts             | 5 +----
 src/routes/+page.svelte                  | 8 +++-----
 4 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 6004bdfaa..a98380fc4 100644
--- a/package.json
+++ b/package.json
@@ -77,4 +77,4 @@
 	"peerDependencies": {
 		"svelte": "^5.19.3"
 	}
-}
\ No newline at end of file
+}
diff --git a/src/example-components/CustomNode.svelte b/src/example-components/CustomNode.svelte
index 6d8731a59..25a272ad4 100644
--- a/src/example-components/CustomNode.svelte
+++ b/src/example-components/CustomNode.svelte
@@ -5,7 +5,7 @@
 	const parameter = writable(10);
 </script>
 
-<Node  >
+<Node>
 	{#snippet children({ grabHandle, selected })}
 		<div class="node" use:grabHandle class:selected>
 			<Slider parameterStore={parameter} />
diff --git a/src/lib/stores/GraphStore.ts b/src/lib/stores/GraphStore.ts
index 67fbea794..c6fe12252 100644
--- a/src/lib/stores/GraphStore.ts
+++ b/src/lib/stores/GraphStore.ts
@@ -4,7 +4,4 @@ import { writable } from 'svelte/store';
 
 export const graphStore = createStore<Graph, GraphKey>();
 
-export const source = writable(null);
-
-// create new graph store, less strict type check
-// export const graphStore = writable<Graph | null>(null);
+export const source = writable<Graph | null>(null);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index acedde8f6..4dc98bd1b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: Unexpected token
-https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { Svelvet, Node, Anchor, Resizer, Group } from '$lib';
 	import Connector from '../example-components/Connector.svelte';
@@ -49,7 +47,7 @@ https://svelte.dev/e/js_parse_error -->
 
 <body>
 	<Svelvet minimap title="test" controls>
-		{@render Connector /}
+			<Connector />
 		<Node bgColor="red" inputs={4} position={{ x: 600, y: 200 }}>
 			<button onclick={() => $state.widthCount++} />
 			{#each { length: $state.widthCount } as item}
@@ -65,7 +63,7 @@ https://svelte.dev/e/js_parse_error -->
 			<button onclick={logCurrentGraphState}>Log Current Graph State</button>
 		</Node>
 		<Node inputs={5} position={{ x: 600, y: 600 }}>
-			{@render TextField placeholder="name" /}
+				<TextField placeholder="name" />
 		</Node>
 		<Node $props={{ selected }} dimensions={{ width: 400, height: 100 }}>
 			<div class="node" class:selected>
@@ -82,7 +80,7 @@ https://svelte.dev/e/js_parse_error -->
 			<Node $props={{ connect }} useDefaults position={{ x: Math.random() * 200, y: Math.random() * 400 }} />
 		{/each}
 		<ThemeToggle slot="toggle" />
-		{@render ContrastTheme slot="contrast" /}
+			<ContrastTheme slot="contrast" />
 	</Svelvet>
 </body>
 

From 15eac29732267b8d66c8a798a7cda066e6b688a6 Mon Sep 17 00:00:00 2001
From: Johann <149050251+jknohr@users.noreply.github.com>
Date: Sat, 25 Jan 2025 23:25:56 +0700
Subject: [PATCH 25/26] Refactor components to use function-based syntax

Refactor components to use function-based syntax and update event handling.

* **Anchor.svelte**
  - Replace class-based components with function-based components.
  - Update event handling to use standard properties (onclick, onmouseup, ontouchstart, ontouchend).
  - Simplify label assignment in edgeConfig.

* **RadioGroup.svelte**
  - Update event handling to use standard properties (onmousedown).

* **TextField.svelte**
  - Replace class-based components with function-based components.
  - Update event handling to use standard properties (onkeydown, onclick, onmousedown).
  - Use $props for placeholder.

* **Toggle.svelte**
  - Update event handling to use standard properties (onkeydown, onclick).

* **Drawer.svelte**
  - Replace class-based components with function-based components.
  - Update event handling to use standard properties (onmouseenter, onmouseleave, onmousemove, onmouseup).
  - Use $props for width, height, minimap, translation, controls, edge, edgeStyle, snapTo, editable, fitView, locked, zoom, theme, mermaid, mermaidConfig, TD, disableSelection, raiseEdgesOnSelect, modifier, trackpadPan, toggle, position.
---
 src/lib/components/Anchor/Anchor.svelte       | 14 ++--
 src/lib/components/Drawer/Drawer.svelte       | 75 +++++++------------
 .../data/RadioGroup/RadioGroup.svelte         |  2 +-
 .../data/TextField/TextField.svelte           | 14 ++--
 src/lib/components/data/Toggle/Toggle.svelte  |  4 +-
 5 files changed, 45 insertions(+), 64 deletions(-)

diff --git a/src/lib/components/Anchor/Anchor.svelte b/src/lib/components/Anchor/Anchor.svelte
index d9c69fc02..e3ab28319 100644
--- a/src/lib/components/Anchor/Anchor.svelte
+++ b/src/lib/components/Anchor/Anchor.svelte
@@ -336,7 +336,7 @@
 	function createCursorEdge(source, target, disconnect = false) {
 		const edgeConfig = {
 			color: edgeColor,
-			label: { text: edgeLabel }
+			label: edgeLabel
 		};
 
 		if (disconnect) edgeConfig.disconnect = true;
@@ -396,7 +396,7 @@
 		if (get(source.connected).has(anchor)) return false;
 		const edgeConfig = {
 			color: edgeColor,
-			label: { text: edgeLabel }
+			label: edgeLabel
 		};
 
 		// get edge style from flowchart if edge is defined in flowchart
@@ -414,7 +414,7 @@
 				if (targetInSourceChildren) {
 					// configure the edge with data defined in the flowchart
 					const edgeData = targetInSourceChildren;
-					edgeConfig.label = { text: edgeData.content };
+					edgeConfig.label = edgeData.content;
 				}
 			}
 		}
@@ -617,10 +617,10 @@
 	title={title || ''}
 	onmouseenter={() => ( $state.hovering = true)}
 	onmouseleave={() => ( $state.hovering = false)}
-	onmousedown|stopPropagation|preventDefault={handleClick}
-	onmouseup|stopPropagation={handleMouseUp}
-	ontouchstart|stopPropagation|preventDefault={handleClick}
-	ontouchend|stopPropagation={handleMouseUp}
+	onclick={handleClick}
+	onmouseup={handleMouseUp}
+	ontouchstart={handleClick}
+	ontouchend={handleMouseUp}
 	bind:this={anchorElement}
 >
 	{@render linked={$connectedAnchors?.size >= 1} {hovering} {connecting}}
diff --git a/src/lib/components/Drawer/Drawer.svelte b/src/lib/components/Drawer/Drawer.svelte
index 9d48ac3c5..6bb42568c 100644
--- a/src/lib/components/Drawer/Drawer.svelte
+++ b/src/lib/components/Drawer/Drawer.svelte
@@ -5,52 +5,29 @@
 	import { defaultNodePropsStore } from './DrawerNode.svelte';
 	import { writable } from 'svelte/store';
 
-	export let width: number;
-	export let height: number;
-	export let minimap: boolean;
-	export let translation: XYPair;
-	export let controls: boolean;
-	export let edge: ComponentType;
-	export let edgeStyle: EdgeStyle;
-	export let snapTo: number;
-	export let editable: boolean;
-	export let fitView: boolean;
-	export let locked: boolean;
-	export let zoom: number;
-	export let theme: string;
-	export let mermaid: string;
-	export let mermaidConfig: object;
-	export let TD: boolean;
-	export let disableSelection: boolean;
-	export let raiseEdgesOnSelect: boolean;
-	export let modifier: string;
-	export let trackpadPan: boolean;
-	export let toggle: boolean;
-	export let position: string; // New customization option for position
-
 	$props = {
-		width,
-		height,
-		minimap,
-		translation,
-		controls,
-		edge,
-		edgeStyle,
-		snapTo,
-		editable,
-		fitView,
-		locked,
-		zoom,
-		theme,
-		mermaid,
-		mermaidConfig,
-		TD,
-		disableSelection,
-		raiseEdgesOnSelect,
-		modifier,
-		trackpadPan,
-		toggle,
-		position // New customization option for position
+		width: null,
+		height: null,
+		minimap: false,
+		translation: null,
+		controls: false,
+		edge: null,
+		edgeStyle: null,
+		snapTo: 0,
+		editable: false,
+		fitView: false,
+		locked: false,
+		zoom: 0,
+		theme: '',
+		mermaid: '',
+		mermaidConfig: {},
+		TD: false,
+		disableSelection: false,
+		raiseEdgesOnSelect: false,
+		modifier: '',
+		trackpadPan: false,
+		toggle: false,
+		position: '' // New customization option for position
 	};
 
 	$state = {
@@ -93,10 +70,10 @@
 <div
 	role="presentation"
 	class="drop_zone"
-	ondragenter={handleDragEnter}
-	ondragleave={handleDragLeave}
-	ondragover={onDragOver}
-	ondrop={handleDrop}
+	onmouseenter={handleDragEnter}
+	onmouseleave={handleDragLeave}
+	onmousemove={onDragOver}
+	onmouseup={handleDrop}
 	style:width={$props.width ? $props.width + 'px' : '100%'} // Apply width customization
 	style:height={$props.height ? $props.height + 'px' : '100%'} // Apply height customization
 	style:position={$props.position ? $props.position : 'relative'} // Apply position customization
diff --git a/src/lib/components/data/RadioGroup/RadioGroup.svelte b/src/lib/components/data/RadioGroup/RadioGroup.svelte
index 40a1113d5..dd1194ede 100644
--- a/src/lib/components/data/RadioGroup/RadioGroup.svelte
+++ b/src/lib/components/data/RadioGroup/RadioGroup.svelte
@@ -34,7 +34,7 @@
 <div class="radio-group" role="radiogroup" onkeydown={cycleThroughGroup} tabindex={0}>
 	{#each $props.options as label, index}
 		<button
-			onmousedown|stopPropagation={() => {
+			onmousedown={() => {
 				$state.initial = index;
 			}}
 			aria-checked={$state.initial === index}
diff --git a/src/lib/components/data/TextField/TextField.svelte b/src/lib/components/data/TextField/TextField.svelte
index a453d064b..48091ae3c 100644
--- a/src/lib/components/data/TextField/TextField.svelte
+++ b/src/lib/components/data/TextField/TextField.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
-	import type { Writable } from 'svelte/store';
 	import { getContext } from 'svelte';
-	export let placeholder: string;
+	import type { Writable } from 'svelte/store';
+
+	$props = {
+		placeholder: ''
+	};
+
 	const textStore = getContext<Writable<string>>('textStore');
 </script>
 
 <input
-	on:keydown|stopPropagation
-	on:click|stopPropagation
-	on:mousedown|stopPropagation
+	onkeydown={event => event.stopPropagation()}
+	onclick={event => event.stopPropagation()}
+	onmousedown={event => event.stopPropagation()}
 	{placeholder}
 	type="text"
 	bind:value={$textStore}
diff --git a/src/lib/components/data/Toggle/Toggle.svelte b/src/lib/components/data/Toggle/Toggle.svelte
index 292733abb..581cea4fb 100644
--- a/src/lib/components/data/Toggle/Toggle.svelte
+++ b/src/lib/components/data/Toggle/Toggle.svelte
@@ -23,7 +23,7 @@
 <div
 	class="toggle-wrapper"
 	role="switch"
-	onkeydown|stopPropagation={handleKeyToggle}
+	onkeydown={handleKeyToggle}
 	tabindex={0}
 	aria-checked={$state.parameterStore}
 	aria-label="Toggle Switch"
@@ -31,7 +31,7 @@
 	<label class="switch">
 		<input
 			type="checkbox"
-			onclick|stopPropagation={handleClickToggle}
+			onclick={handleClickToggle}
 			bind:checked={$state.parameterStore}
 		/>
 		<span class="slider round" style:--prop-toggle-color={color} />

From 7a8fe2b17be860fb40514e1d81c166fb77f96891 Mon Sep 17 00:00:00 2001
From: jknohr <johann@nohr.com>
Date: Sat, 25 Jan 2025 23:43:43 +0700
Subject: [PATCH 26/26]  Please enter the commit message for your changes.
 Lines starting  with '' will be ignored, and an empty message aborts the
 commit.

 On branch main
 Your branch and 'origin/main' have diverged,
 and have 1 and 5 different commits each, respectively.

 Changes to be committed:
	modified:   src/lib/db/SurrealConnection.ts
	modified:   src/lib/db/SurrealManager.ts
---
 src/lib/db/SurrealConnection.ts | 19 ++++++++++++-------
 src/lib/db/SurrealManager.ts    |  7 +++++--
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/lib/db/SurrealConnection.ts b/src/lib/db/SurrealConnection.ts
index fcd75591a..83a786851 100644
--- a/src/lib/db/SurrealConnection.ts
+++ b/src/lib/db/SurrealConnection.ts
@@ -1,13 +1,14 @@
 import { Surreal } from 'surrealdb.js';
 
 export class SurrealConnection {
-	private static instance: Surreal;
+	private static instance: Surreal | undefined;
 	private static config = {
 		url: 'ws://localhost:8000',
-		user: 'root',
-		pass: 'root',
+		username: 'root',
+		password: 'root',
 		namespace: 'test',
-		database: 'test'
+		database: 'test',
+		scope: 'global'
 	};
 
 	private constructor() {}
@@ -18,10 +19,14 @@ export class SurrealConnection {
 			try {
 				await this.instance.connect(this.config.url);
 				await this.instance.signin({
-					user: this.config.user,
-					pass: this.config.pass
+					username: this.config.username,
+					password: this.config.password,
+					scope: this.config.scope
+				});
+				await this.instance.use({
+					namespace: this.config.namespace,
+					database: this.config.database
 				});
-				await this.instance.use(this.config.namespace, this.config.database);
 			} catch (error) {
 				throw new Error(`Database connection failed: ${error}`);
 			}
diff --git a/src/lib/db/SurrealManager.ts b/src/lib/db/SurrealManager.ts
index 2a102977c..b2553fa18 100644
--- a/src/lib/db/SurrealManager.ts
+++ b/src/lib/db/SurrealManager.ts
@@ -1,7 +1,7 @@
 import { Surreal } from 'surrealdb.js';
 
 export class SurrealManager {
-	private static instance: Surreal;
+	private static instance: Surreal | undefined;
 
 	static async connect(
 		config = {
@@ -13,7 +13,10 @@ export class SurrealManager {
 		if (!this.instance) {
 			this.instance = new Surreal();
 			await this.instance.connect(config.url);
-			await this.instance.use(config.namespace, config.database);
+			await this.instance.use({
+				namespace: config.namespace,
+				database: config.database
+			});
 		}
 		return this.instance;
 	}