From 8f6cf9322db4bd39f16004ea6e1994b43d7fd7d1 Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Thu, 1 Aug 2024 11:40:24 +0100
Subject: [PATCH 1/5] migrating

switch bundler to @svelte/package
add svelte-preprocess to handle global styles
---
 packages/ui/package.json                      |  22 ++
 .../ui/src/components/AccountModal.svelte     |   5 +-
 .../ui/src/components/Common/Modal.svelte     |   1 -
 .../ConnectModal/ConnectModal.svelte          |   4 +-
 packages/ui/src/components/index.ts           |  32 +-
 packages/ui/src/components/zorb/Zorb.svelte   |   3 +-
 packages/ui/src/components/zorb/index.ts      |   2 +-
 packages/ui/src/index.ts                      |  45 ++-
 packages/ui/src/styles/index.css              |  41 +--
 packages/ui/svelte.config.js                  |   8 +-
 pnpm-lock.yaml                                | 314 +++++++++++-------
 11 files changed, 280 insertions(+), 197 deletions(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 804bd4b..0a6fff1 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -22,6 +22,21 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"import": "./dist/index.js"
+		},
+		"./svelte": {
+			"types": "./dist/components/index.d.ts",
+			"import": "./dist/components/index.js",
+			"svelte": "./dist/components/index.ts"
+		}
+	},
+	"typesVersions": {
+		">4.0": {
+			"index.d.ts": [
+				"./dist/index.d.ts"
+			],
+			"svelte": [
+				"./dist/components/index.d.ts"
+			]
 		}
 	},
 	"scripts": {
@@ -32,18 +47,25 @@
 	"devDependencies": {
 		"@fractl-ui/types": "workspace:^",
 		"@melt-ui/svelte": "^0.67.0",
+		"@sveltejs/package": "^2.3.2",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"@tsconfig/svelte": "^5.0.2",
 		"@types/qrcode": "^1.5.5",
 		"@wagmi/core": "2.0.1",
+		"postcss": "^8.4.40",
 		"postcss-preset-env": "^9.3.0",
 		"qrcode": "^1.5.3",
+		"sass": "^1.77.8",
 		"svelte": "^4.2.9",
 		"svelte-check": "^3.6.3",
+		"svelte-preprocess": "^6.0.2",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
 		"viem": "2.0.1",
 		"vite": "^5.0.12",
 		"vite-plugin-dts": "^3.7.2"
+	},
+	"peerDependencies": {
+		"svelte": "^3 || ^4 || ^5.0.0-next.180"
 	}
 }
diff --git a/packages/ui/src/components/AccountModal.svelte b/packages/ui/src/components/AccountModal.svelte
index a0c893f..de8929e 100644
--- a/packages/ui/src/components/AccountModal.svelte
+++ b/packages/ui/src/components/AccountModal.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '../styles/index.css'
 	import { truncate } from '../utils.js'
 	import type {
 		AccountData,
@@ -38,7 +37,7 @@
 	<button
 		aria-haspopup="dialog"
 		data-fractl-trigger
-		class="address {btnClass}"
+		class="address fcl_el {btnClass}"
 		on:click={open}
 	>
 		{#if avatar}
@@ -52,7 +51,7 @@
 
 	<Modal titleText="Connected" bind:open bind:close customTrigger>
 		<!-- header>div*2+div.balance+hr+div>div.header -->
-		<div class="fcl__layout-3col">
+		<div class="fcl__layout-3col fcl__el">
 			{#if avatar}
 				<img class="fcl__graphic-primary rounded" src={avatar} alt="" />
 			{:else}
diff --git a/packages/ui/src/components/Common/Modal.svelte b/packages/ui/src/components/Common/Modal.svelte
index 2b866fe..e1a9c1c 100644
--- a/packages/ui/src/components/Common/Modal.svelte
+++ b/packages/ui/src/components/Common/Modal.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '../../styles/index.css'
 	import { createEventDispatcher, onDestroy } from 'svelte'
 	const dispatch = createEventDispatcher()
 
diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
index dd43bc4..71bbff2 100644
--- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte
+++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '../../styles/index.css'
 	import { onDestroy, onMount } from 'svelte'
 	import copyEN from '../../copy/copy.EN.js'
 	import Modal from '../Common/Modal.svelte'
@@ -7,6 +6,7 @@
 	import type {
 		ConfigConnected,
 		ConfigDisconnected,
+		Config,
 		Connector,
 		StateDisconnected
 	} from '@fractl-ui/types'
@@ -97,7 +97,7 @@
 		</button>
 	</svelte:fragment>
 
-	<div class="fcl__layout-1col">
+	<div id="fractl-connect" class="fcl__layout-1col fcl__el">
 		{#if activeRequest}
 			{#if activeRequest.type === 'injected'}
 				<!-- <Injected connector={activeRequest}></Injected> -->
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index bcf0e9b..8edf8af 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,34 +1,6 @@
-import ConnectModal from './ConnectModal/ConnectModal.svelte'
 import AccountModal from './AccountModal.svelte'
 import FractlModal from './FractlModal.svelte'
-import type { Config, Connector, StateConnected } from '@fractl-ui/types'
-
-export const create = async <C extends Connector>(
-	config: Promise<Config<C>>
-) => {
-	const _config = await Promise.resolve(config)
-
-	//TODO: return singleton when modal is dismissed without completing connection
-	return () => {
-		const getTarget = () => document.body
+import ConnectModal from './ConnectModal/ConnectModal.svelte'
+import '../styles/index.css'
 
-		return new Promise((resolve, reject) => {
-			const modal = new ConnectModal({
-				target: getTarget(),
-				props: {
-					config: _config,
-					state: _config.state,
-					onConnect: (state: StateConnected<C>) => {
-						resolve(state)
-						modal.$destroy()
-					},
-					onConnectFail: (error) => {
-						reject(error)
-						modal.$destroy()
-					}
-				}
-			})
-		})
-	}
-}
 export { ConnectModal, AccountModal, FractlModal }
diff --git a/packages/ui/src/components/zorb/Zorb.svelte b/packages/ui/src/components/zorb/Zorb.svelte
index 4540082..bb32cec 100644
--- a/packages/ui/src/components/zorb/Zorb.svelte
+++ b/packages/ui/src/components/zorb/Zorb.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '../../styles/index.css'
 	import { gradientForAddress } from './lib.js'
 	export let size = '100%'
 	export let address = '0x0000000000000000000000000000000000000000'
@@ -37,3 +36,5 @@
 		<ellipse fill="url(#gzr)" cx="45" cy="45" rx="45" ry="45"></ellipse>
 	</g>
 </svg>
+
+<!-- <style src='../../styles/index.css'></style> -->
diff --git a/packages/ui/src/components/zorb/index.ts b/packages/ui/src/components/zorb/index.ts
index 29a07bb..6f9cc06 100644
--- a/packages/ui/src/components/zorb/index.ts
+++ b/packages/ui/src/components/zorb/index.ts
@@ -23,5 +23,5 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
 
-import * as lib from './lib'
+import * as lib from './lib.js'
 export { lib }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 14cd4bc..d7237d8 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,7 +1,44 @@
-import FractlModal from './components/FractlModal.svelte'
 import ConnectModal from './components/ConnectModal/ConnectModal.svelte'
-import AccountModal from './components/AccountModal.svelte'
+import type { Config, Connector } from '@fractl-ui/types'
+
+export const create = async <C extends Connector>(
+	config: Promise<Config<C>>
+): Promise<() => Promise<Config<C>>> => {
+	const _config = await Promise.resolve(config)
+	const SINGLETON = 'fractl-connect'
+
+	return () => {
+		const getTarget = () => {
+			const el = document.getElementById(SINGLETON)
+			if (el) {
+				//TODO: target only gives a mount point. Need a way of calling show instead to avoid deleting each time
+				el.remove()
+			}
+			const target = document.createElement('div')
+			target.id = SINGLETON
+			document.body.appendChild(target)
+
+			return target
+		}
+
+		return new Promise((resolve, reject) => {
+			const modal = new ConnectModal({
+				target: getTarget(),
+				props: {
+					config: _config,
+					state: _config.state,
+					onConnect: (state: Config<C>) => {
+						resolve(state)
+						modal.$destroy()
+					},
+					onConnectFail: (error) => {
+						reject(error)
+						modal.$destroy()
+					}
+				}
+			})
+		})
+	}
+}
 
-export { create } from './components/index.js'
-export { FractlModal, AccountModal, ConnectModal }
 // export T&C text prop
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index d6946e8..2dd3af4 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -240,24 +240,25 @@ button.fcl__btn-primary svg,
 /* =============== */
 /* Utility Classes */
 /* =============== */
-
-.justify-center {
-	justify-content: center;
-	text-align: center;
-}
-.justify-between {
-	justify-content: space-between;
-}
-.rounded {
-	border-radius: 50%;
-}
-.error {
-	color: var(--fcl-text-color-error, oklch(80% 0.16 8));
-}
-button.address {
-	font-feature-settings: 'tnum', 'zero';
-	transition: opacity 150ms ease-out;
-}
-.mt-1 {
-	margin-top: 1em;
+.fcl__el {
+	.justify-center {
+		justify-content: center;
+		text-align: center;
+	}
+	.justify-between {
+		justify-content: space-between;
+	}
+	.rounded {
+		border-radius: 50%;
+	}
+	.error {
+		color: var(--fcl-text-color-error, oklch(80% 0.16 8));
+	}
+	button.address {
+		font-feature-settings: 'tnum', 'zero';
+		transition: opacity 150ms ease-out;
+	}
+	.mt-1 {
+		margin-top: 1em;
+	}
 }
diff --git a/packages/ui/svelte.config.js b/packages/ui/svelte.config.js
index 5777275..f9d2cc5 100644
--- a/packages/ui/svelte.config.js
+++ b/packages/ui/svelte.config.js
@@ -1,11 +1,7 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
-
+import { sveltePreprocess } from 'svelte-preprocess'
 export default {
 	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
 	// for more information about preprocessors
 
-	preprocess: vitePreprocess(),
-	compilerOptions: {
-		customElement: true
-	}
+	preprocess: sveltePreprocess()
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 574e802..2332835 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,10 +55,10 @@ importers:
         version: link:../../packages/starknet
       '@sveltejs/adapter-vercel':
         specifier: ^5.1.0
-        version: 5.1.0(@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))
+        version: 5.1.0(@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.0.2
-        version: 3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))
+        version: 3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       '@tsconfig/svelte':
         specifier: ^5.0.2
         version: 5.0.2
@@ -73,13 +73,13 @@ importers:
         version: 4.2.12
       svelte-check:
         specifier: ^3.6.6
-        version: 3.6.9(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.12)
+        version: 3.6.9(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.12)
       viem:
         specifier: ^2.7.16
         version: 2.9.8(typescript@5.5.4)
       vite:
         specifier: ^5.3.5
-        version: 5.3.5(@types/node@22.0.0)
+        version: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
 
   examples/vanilla:
     devDependencies:
@@ -106,7 +106,7 @@ importers:
         version: 2.5.0(typescript@5.3.3)
       vite:
         specifier: ^5.0.8
-        version: 5.0.11(@types/node@22.0.0)
+        version: 5.0.11(@types/node@22.0.0)(sass@1.77.8)
 
   examples/vue:
     dependencies:
@@ -128,13 +128,13 @@ importers:
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^4.6.2
-        version: 4.6.2(vite@5.0.12(@types/node@22.0.0))(vue@3.4.15(typescript@5.3.3))
+        version: 4.6.2(vite@5.0.12(@types/node@22.0.0)(sass@1.77.8))(vue@3.4.15(typescript@5.3.3))
       typescript:
         specifier: ^5.3.3
         version: 5.3.3
       vite:
         specifier: ^5.0.12
-        version: 5.0.12(@types/node@22.0.0)
+        version: 5.0.12(@types/node@22.0.0)(sass@1.77.8)
       vue-tsc:
         specifier: ^1.8.27
         version: 1.8.27(typescript@5.3.3)
@@ -159,10 +159,10 @@ importers:
         version: link:../types
       vite:
         specifier: ^5.3.5
-        version: 5.3.5(@types/node@22.0.0)
+        version: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
       vite-plugin-dts:
         specifier: ^3.7.2
-        version: 3.7.2(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.5.4)(vite@5.3.5(@types/node@22.0.0))
+        version: 3.7.2(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.5.4)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
 
   packages/fuel:
     dependencies:
@@ -187,10 +187,10 @@ importers:
         version: 1.42.1
       vite:
         specifier: ^5.3.5
-        version: 5.3.5(@types/node@22.0.0)
+        version: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
       vite-plugin-dts:
         specifier: ^3.7.2
-        version: 3.7.2(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.5.4)(vite@5.3.5(@types/node@22.0.0))
+        version: 3.7.2(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.5.4)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
 
   packages/starknet:
     dependencies:
@@ -209,10 +209,10 @@ importers:
         version: link:../types
       vite:
         specifier: ^5.0.12
-        version: 5.0.12(@types/node@22.0.0)
+        version: 5.0.12(@types/node@22.0.0)(sass@1.77.8)
       vite-plugin-dts:
         specifier: ^3.7.2
-        version: 3.7.2(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.5.4)(vite@5.0.12(@types/node@22.0.0))
+        version: 3.7.2(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.5.4)(vite@5.0.12(@types/node@22.0.0)(sass@1.77.8))
 
   packages/types:
     devDependencies:
@@ -231,9 +231,12 @@ importers:
       '@melt-ui/svelte':
         specifier: ^0.67.0
         version: 0.67.0(svelte@4.2.9)
+      '@sveltejs/package':
+        specifier: ^2.3.2
+        version: 2.3.2(svelte@4.2.9)(typescript@5.3.3)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.0.1
-        version: 3.1.1(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0))
+        version: 3.1.1(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       '@tsconfig/svelte':
         specifier: ^5.0.2
         version: 5.0.2
@@ -243,18 +246,27 @@ importers:
       '@wagmi/core':
         specifier: 2.0.1
         version: 2.0.1(react@18.2.0)(typescript@5.3.3)(viem@2.0.1(typescript@5.3.3))
+      postcss:
+        specifier: ^8.4.40
+        version: 8.4.40
       postcss-preset-env:
         specifier: ^9.3.0
         version: 9.6.0(postcss@8.4.40)
       qrcode:
         specifier: ^1.5.3
         version: 1.5.3
+      sass:
+        specifier: ^1.77.8
+        version: 1.77.8
       svelte:
         specifier: ^4.2.9
         version: 4.2.9
       svelte-check:
         specifier: ^3.6.3
-        version: 3.8.5(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.9)
+        version: 3.8.5(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.9)
+      svelte-preprocess:
+        specifier: ^6.0.2
+        version: 6.0.2(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.9)(typescript@5.3.3)
       tslib:
         specifier: ^2.6.2
         version: 2.6.3
@@ -266,10 +278,10 @@ importers:
         version: 2.0.1(typescript@5.3.3)
       vite:
         specifier: ^5.0.12
-        version: 5.3.5(@types/node@22.0.0)
+        version: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
       vite-plugin-dts:
         specifier: ^3.7.2
-        version: 3.9.1(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.3.3)(vite@5.3.5(@types/node@22.0.0))
+        version: 3.9.1(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.3.3)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
 
   site:
     devDependencies:
@@ -290,10 +302,10 @@ importers:
         version: 0.67.0(svelte@4.2.12)
       '@sveltejs/adapter-auto':
         specifier: ^3.2.0
-        version: 3.2.0(@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))
+        version: 3.2.0(@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.0.2
-        version: 3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))
+        version: 3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       '@tsconfig/svelte':
         specifier: ^5.0.2
         version: 5.0.2
@@ -308,13 +320,13 @@ importers:
         version: 4.2.12
       svelte-check:
         specifier: ^3.6.6
-        version: 3.8.5(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.12)
+        version: 3.8.5(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.12)
       viem:
         specifier: ^2.7.16
         version: 2.9.8(typescript@5.5.4)
       vite:
         specifier: ^5.3.5
-        version: 5.3.5(@types/node@22.0.0)
+        version: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
 
 packages:
 
@@ -1916,6 +1928,13 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3
 
+  '@sveltejs/package@2.3.2':
+    resolution: {integrity: sha512-6M8/Te7iXRG7SiH92wugqfyoJpuepjn78L433LnXicUeMso9M/N4vdL9DPK3MfTkVVY4klhNRptVqme3p4oZWA==}
+    engines: {node: ^16.14 || >=18}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
+
   '@sveltejs/vite-plugin-svelte-inspector@2.0.0':
     resolution: {integrity: sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==}
     engines: {node: ^18.0.0 || >=20}
@@ -2442,9 +2461,6 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  buffer-crc32@0.2.13:
-    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
-
   buffer-crc32@1.0.0:
     resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
     engines: {node: '>=8.0.0'}
@@ -2666,6 +2682,9 @@ packages:
     resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
     engines: {node: '>=0.10'}
 
+  dedent-js@1.0.1:
+    resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -3146,6 +3165,9 @@ packages:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
 
+  immutable@4.3.7:
+    resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
+
   import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -3411,6 +3433,9 @@ packages:
   lossless-json@2.0.11:
     resolution: {integrity: sha512-BP0vn+NGYvzDielvBZaFain/wgeJ1hTvURCqtKvhr1SCPePdaaTanmmcplrHfEJSJOUql7hk4FHwToNJjWRY3g==}
 
+  lower-case@2.0.2:
+    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
+
   lru-cache@10.2.0:
     resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
     engines: {node: 14 || >=16.14}
@@ -3568,6 +3593,9 @@ packages:
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
+  no-case@3.0.4:
+    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
+
   node-addon-api@7.1.0:
     resolution: {integrity: sha512-mNcltoe1R8o7STTegSOHdnJNN7s5EUvhoS7ShnTHDyOSd+8H+UdWODq6qSv67PjC8Zc5JRT8+oLAMCr0SIXw7g==}
     engines: {node: ^16 || ^18 || >= 20}
@@ -3686,6 +3714,9 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  pascal-case@3.1.2:
+    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
+
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
@@ -3960,10 +3991,6 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.4.33:
-    resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.4.40:
     resolution: {integrity: sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==}
     engines: {node: ^10 || ^12 || >=14}
@@ -4138,6 +4165,11 @@ packages:
   sander@0.5.1:
     resolution: {integrity: sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==}
 
+  sass@1.77.8:
+    resolution: {integrity: sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -4200,18 +4232,10 @@ packages:
   sonic-boom@2.8.0:
     resolution: {integrity: sha512-kuonw1YOYYNOve5iHdSahXPOK49GqwA+LZhI6Wz/l0rP57iKyXXIHaRagOBHAPmGwJC6od2Z9zgvZ5loSgMlVg==}
 
-  sorcery@0.11.0:
-    resolution: {integrity: sha512-J69LQ22xrQB1cIFJhPfgtLuI6BpWRiWu1Y3vSsIwK/eAScqJxd/+CJlUuHQRdX2C9NGFamq+KqNywGgaThwfHw==}
-    hasBin: true
-
   sorcery@0.11.1:
     resolution: {integrity: sha512-o7npfeJE6wi6J9l0/5LKshFzZ2rMatRiCDwYeDQaOzqdzRJwALhX7mk/A/ecg6wjMu7wdZbmXfD2S/vpOg0bdQ==}
     hasBin: true
 
-  source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
-    engines: {node: '>=0.10.0'}
-
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -4342,9 +4366,9 @@ packages:
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0
 
-  svelte-preprocess@5.1.3:
-    resolution: {integrity: sha512-xxAkmxGHT+J/GourS5mVJeOXZzne1FR5ljeOUAMXUkfEhkLEllRreXpbl3dIYJlcJRfL1LO1uIAPpBpBfiqGPw==}
-    engines: {node: '>= 16.0.0', pnpm: ^8.0.0}
+  svelte-preprocess@5.1.4:
+    resolution: {integrity: sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==}
+    engines: {node: '>= 16.0.0'}
     peerDependencies:
       '@babel/core': ^7.10.2
       coffeescript: ^2.5.1
@@ -4379,21 +4403,21 @@ packages:
       typescript:
         optional: true
 
-  svelte-preprocess@5.1.4:
-    resolution: {integrity: sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==}
-    engines: {node: '>= 16.0.0'}
+  svelte-preprocess@6.0.2:
+    resolution: {integrity: sha512-OvDTLfaOkkhjprbDKO0SOCkjNYuHy16dbD4SpqbIi6QiabOMHxRT4km5/dzbFFkmW1L0E2INF3MFltG2pgOyKQ==}
+    engines: {node: '>= 18.0.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 || ^5.0.0
+      postcss-load-config: '>=3'
       pug: ^3.0.0
       sass: ^1.26.8
-      stylus: ^0.55.0
+      stylus: '>=0.55'
       sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
-      svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
-      typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0'
+      svelte: ^4.0.0 || ^5.0.0-next.100 || ^5.0.0
+      typescript: ^5.0.0
     peerDependenciesMeta:
       '@babel/core':
         optional: true
@@ -4416,6 +4440,12 @@ packages:
       typescript:
         optional: true
 
+  svelte2tsx@0.7.15:
+    resolution: {integrity: sha512-91RbLJI448FR1UEZqXSS3ucVMERuWo8ACOhxfkBPK1CL2ocGMOC5bwc8tzFvb/Ji8NqZ7wmSGfvRebcUsiauKA==}
+    peerDependencies:
+      svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
+      typescript: ^4.9.4 || ^5.0.0
+
   svelte@4.2.12:
     resolution: {integrity: sha512-d8+wsh5TfPwqVzbm4/HCXC783/KPHV60NvwitJnyTA5lWn1elhXMNWhXGCJ7PwPa8qFUnyJNIyuIRt2mT0WMug==}
     engines: {node: '>=16'}
@@ -6846,23 +6876,23 @@ snapshots:
       '@stablelib/random': 1.0.2
       '@stablelib/wipe': 1.0.1
 
-  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))':
+  '@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))':
     dependencies:
-      '@sveltejs/kit': 2.5.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))
+      '@sveltejs/kit': 2.5.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.1.0(@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))':
+  '@sveltejs/adapter-vercel@5.1.0(@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))':
     dependencies:
-      '@sveltejs/kit': 2.5.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))
+      '@sveltejs/kit': 2.5.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       '@vercel/nft': 0.26.4
       esbuild: 0.19.11
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))':
+  '@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))
+      '@sveltejs/vite-plugin-svelte': 3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 4.3.3
@@ -6876,11 +6906,11 @@ snapshots:
       sirv: 2.0.4
       svelte: 4.2.12
       tiny-glob: 0.2.9
-      vite: 5.3.5(@types/node@22.0.0)
+      vite: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
 
-  '@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))':
+  '@sveltejs/kit@2.5.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))
+      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 4.3.3
@@ -6894,74 +6924,85 @@ snapshots:
       sirv: 2.0.4
       svelte: 4.2.12
       tiny-glob: 0.2.9
-      vite: 5.3.5(@types/node@22.0.0)
+      vite: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))':
+  '@sveltejs/package@2.3.2(svelte@4.2.9)(typescript@5.3.3)':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))
+      chokidar: 3.6.0
+      kleur: 4.1.5
+      sade: 1.8.1
+      semver: 7.6.3
+      svelte: 4.2.9
+      svelte2tsx: 0.7.15(svelte@4.2.9)(typescript@5.3.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       debug: 4.3.4
       svelte: 4.2.12
-      vite: 5.3.5(@types/node@22.0.0)
+      vite: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))':
+  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))
+      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       debug: 4.3.6
       svelte: 4.2.12
-      vite: 5.3.5(@types/node@22.0.0)
+      vite: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0))':
+  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0))
+      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       debug: 4.3.6
       svelte: 4.2.9
-      vite: 5.3.5(@types/node@22.0.0)
+      vite: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))':
+  '@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))
+      '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.0.2(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.5
       svelte: 4.2.12
       svelte-hmr: 0.15.3(svelte@4.2.12)
-      vite: 5.3.5(@types/node@22.0.0)
-      vitefu: 0.2.5(vite@5.3.5(@types/node@22.0.0))
+      vite: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
+      vitefu: 0.2.5(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))':
+  '@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0))
+      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.12)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       debug: 4.3.6
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.11
       svelte: 4.2.12
       svelte-hmr: 0.16.0(svelte@4.2.12)
-      vite: 5.3.5(@types/node@22.0.0)
-      vitefu: 0.2.5(vite@5.3.5(@types/node@22.0.0))
+      vite: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
+      vitefu: 0.2.5(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0))':
+  '@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0)))(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0))
+      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)))(svelte@4.2.9)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
       debug: 4.3.6
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.11
       svelte: 4.2.9
       svelte-hmr: 0.16.0(svelte@4.2.9)
-      vite: 5.3.5(@types/node@22.0.0)
-      vitefu: 0.2.5(vite@5.3.5(@types/node@22.0.0))
+      vite: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
+      vitefu: 0.2.5(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8))
     transitivePeerDependencies:
       - supports-color
 
@@ -7140,9 +7181,9 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vitejs/plugin-vue@4.6.2(vite@5.0.12(@types/node@22.0.0))(vue@3.4.15(typescript@5.3.3))':
+  '@vitejs/plugin-vue@4.6.2(vite@5.0.12(@types/node@22.0.0)(sass@1.77.8))(vue@3.4.15(typescript@5.3.3))':
     dependencies:
-      vite: 5.0.12(@types/node@22.0.0)
+      vite: 5.0.12(@types/node@22.0.0)(sass@1.77.8)
       vue: 3.4.15(typescript@5.3.3)
 
   '@volar/language-core@1.11.1':
@@ -7164,7 +7205,7 @@ snapshots:
       '@vue/shared': 3.4.15
       entities: 4.5.0
       estree-walker: 2.0.2
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
 
   '@vue/compiler-dom@3.4.15':
     dependencies:
@@ -7180,8 +7221,8 @@ snapshots:
       '@vue/shared': 3.4.15
       estree-walker: 2.0.2
       magic-string: 0.30.11
-      postcss: 8.4.33
-      source-map-js: 1.0.2
+      postcss: 8.4.40
+      source-map-js: 1.2.0
 
   '@vue/compiler-ssr@3.4.15':
     dependencies:
@@ -7776,8 +7817,6 @@ snapshots:
       node-releases: 2.0.18
       update-browserslist-db: 1.1.0(browserslist@4.23.2)
 
-  buffer-crc32@0.2.13: {}
-
   buffer-crc32@1.0.0: {}
 
   bundle-require@4.0.2(esbuild@0.19.12):
@@ -7976,6 +8015,8 @@ snapshots:
 
   decode-uri-component@0.2.2: {}
 
+  dedent-js@1.0.1: {}
+
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
@@ -8627,6 +8668,8 @@ snapshots:
 
   ignore@5.3.1: {}
 
+  immutable@4.3.7: {}
+
   import-fresh@3.3.0:
     dependencies:
       parent-module: 1.0.1
@@ -8904,6 +8947,10 @@ snapshots:
 
   lossless-json@2.0.11: {}
 
+  lower-case@2.0.2:
+    dependencies:
+      tslib: 2.6.3
+
   lru-cache@10.2.0: {}
 
   lru-cache@4.1.5:
@@ -9048,6 +9095,11 @@ snapshots:
 
   neo-async@2.6.2: {}
 
+  no-case@3.0.4:
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.6.3
+
   node-addon-api@7.1.0: {}
 
   node-fetch-native@1.6.1: {}
@@ -9148,6 +9200,11 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  pascal-case@3.1.2:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.6.3
+
   path-browserify@1.0.1: {}
 
   path-exists@4.0.0: {}
@@ -9466,12 +9523,6 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.4.33:
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-
   postcss@8.4.40:
     dependencies:
       nanoid: 3.3.7
@@ -9676,6 +9727,12 @@ snapshots:
       mkdirp: 0.5.6
       rimraf: 2.7.1
 
+  sass@1.77.8:
+    dependencies:
+      chokidar: 3.6.0
+      immutable: 4.3.7
+      source-map-js: 1.2.0
+
   semver@6.3.1: {}
 
   semver@7.5.4:
@@ -9726,13 +9783,6 @@ snapshots:
     dependencies:
       atomic-sleep: 1.0.0
 
-  sorcery@0.11.0:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      buffer-crc32: 0.2.13
-      minimist: 1.2.8
-      sander: 0.5.1
-
   sorcery@0.11.1:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -9740,8 +9790,6 @@ snapshots:
       minimist: 1.2.8
       sander: 0.5.1
 
-  source-map-js@1.0.2: {}
-
   source-map-js@1.2.0: {}
 
   source-map@0.6.1: {}
@@ -9833,7 +9881,7 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@3.6.9(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.12):
+  svelte-check@3.6.9(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.12):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.20
       chokidar: 3.5.3
@@ -9842,7 +9890,7 @@ snapshots:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 4.2.12
-      svelte-preprocess: 5.1.3(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.12)(typescript@5.5.4)
+      svelte-preprocess: 5.1.4(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.12)(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
       - '@babel/core'
@@ -9855,14 +9903,14 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-check@3.8.5(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.12):
+  svelte-check@3.8.5(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.12):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.6.0
       picocolors: 1.0.1
       sade: 1.8.1
       svelte: 4.2.12
-      svelte-preprocess: 5.1.4(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.12)(typescript@5.5.4)
+      svelte-preprocess: 5.1.4(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.12)(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
       - '@babel/core'
@@ -9875,14 +9923,14 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-check@3.8.5(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.9):
+  svelte-check@3.8.5(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.9):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.6.0
       picocolors: 1.0.1
       sade: 1.8.1
       svelte: 4.2.9
-      svelte-preprocess: 5.1.4(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.9)(typescript@5.5.4)
+      svelte-preprocess: 5.1.4(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.9)(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
       - '@babel/core'
@@ -9917,44 +9965,49 @@ snapshots:
     dependencies:
       svelte: 4.2.9
 
-  svelte-preprocess@5.1.3(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.12)(typescript@5.5.4):
+  svelte-preprocess@5.1.4(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.12)(typescript@5.5.4):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
       magic-string: 0.30.11
-      sorcery: 0.11.0
+      sorcery: 0.11.1
       strip-indent: 3.0.0
       svelte: 4.2.12
     optionalDependencies:
       postcss: 8.4.40
       postcss-load-config: 3.1.4(postcss@8.4.40)
+      sass: 1.77.8
       typescript: 5.5.4
 
-  svelte-preprocess@5.1.4(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.12)(typescript@5.5.4):
+  svelte-preprocess@5.1.4(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.9)(typescript@5.5.4):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
       magic-string: 0.30.11
       sorcery: 0.11.1
       strip-indent: 3.0.0
-      svelte: 4.2.12
+      svelte: 4.2.9
     optionalDependencies:
       postcss: 8.4.40
       postcss-load-config: 3.1.4(postcss@8.4.40)
+      sass: 1.77.8
       typescript: 5.5.4
 
-  svelte-preprocess@5.1.4(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.9)(typescript@5.5.4):
+  svelte-preprocess@6.0.2(postcss-load-config@3.1.4(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@4.2.9)(typescript@5.3.3):
     dependencies:
-      '@types/pug': 2.0.10
-      detect-indent: 6.1.0
-      magic-string: 0.30.11
-      sorcery: 0.11.1
-      strip-indent: 3.0.0
       svelte: 4.2.9
     optionalDependencies:
       postcss: 8.4.40
       postcss-load-config: 3.1.4(postcss@8.4.40)
-      typescript: 5.5.4
+      sass: 1.77.8
+      typescript: 5.3.3
+
+  svelte2tsx@0.7.15(svelte@4.2.9)(typescript@5.3.3):
+    dependencies:
+      dedent-js: 1.0.1
+      pascal-case: 3.1.2
+      svelte: 4.2.9
+      typescript: 5.3.3
 
   svelte@4.2.12:
     dependencies:
@@ -10265,7 +10318,7 @@ snapshots:
       - utf-8-validate
       - zod
 
-  vite-plugin-dts@3.7.2(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.5.4)(vite@5.0.12(@types/node@22.0.0)):
+  vite-plugin-dts@3.7.2(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.5.4)(vite@5.0.12(@types/node@22.0.0)(sass@1.77.8)):
     dependencies:
       '@microsoft/api-extractor': 7.39.0(@types/node@22.0.0)
       '@rollup/pluginutils': 5.1.0(rollup@4.19.1)
@@ -10275,13 +10328,13 @@ snapshots:
       typescript: 5.5.4
       vue-tsc: 1.8.27(typescript@5.5.4)
     optionalDependencies:
-      vite: 5.0.12(@types/node@22.0.0)
+      vite: 5.0.12(@types/node@22.0.0)(sass@1.77.8)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite-plugin-dts@3.7.2(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.5.4)(vite@5.3.5(@types/node@22.0.0)):
+  vite-plugin-dts@3.7.2(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.5.4)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)):
     dependencies:
       '@microsoft/api-extractor': 7.39.0(@types/node@22.0.0)
       '@rollup/pluginutils': 5.1.0(rollup@4.19.1)
@@ -10291,13 +10344,13 @@ snapshots:
       typescript: 5.5.4
       vue-tsc: 1.8.27(typescript@5.5.4)
     optionalDependencies:
-      vite: 5.3.5(@types/node@22.0.0)
+      vite: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite-plugin-dts@3.9.1(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.3.3)(vite@5.3.5(@types/node@22.0.0)):
+  vite-plugin-dts@3.9.1(@types/node@22.0.0)(rollup@4.19.1)(typescript@5.3.3)(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)):
     dependencies:
       '@microsoft/api-extractor': 7.43.0(@types/node@22.0.0)
       '@rollup/pluginutils': 5.1.0(rollup@4.19.1)
@@ -10308,31 +10361,33 @@ snapshots:
       typescript: 5.3.3
       vue-tsc: 1.8.27(typescript@5.3.3)
     optionalDependencies:
-      vite: 5.3.5(@types/node@22.0.0)
+      vite: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite@5.0.11(@types/node@22.0.0):
+  vite@5.0.11(@types/node@22.0.0)(sass@1.77.8):
     dependencies:
       esbuild: 0.19.11
-      postcss: 8.4.33
+      postcss: 8.4.40
       rollup: 4.9.4
     optionalDependencies:
       '@types/node': 22.0.0
       fsevents: 2.3.3
+      sass: 1.77.8
 
-  vite@5.0.12(@types/node@22.0.0):
+  vite@5.0.12(@types/node@22.0.0)(sass@1.77.8):
     dependencies:
       esbuild: 0.19.12
-      postcss: 8.4.33
+      postcss: 8.4.40
       rollup: 4.9.6
     optionalDependencies:
       '@types/node': 22.0.0
       fsevents: 2.3.3
+      sass: 1.77.8
 
-  vite@5.3.5(@types/node@22.0.0):
+  vite@5.3.5(@types/node@22.0.0)(sass@1.77.8):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.40
@@ -10340,10 +10395,11 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.0.0
       fsevents: 2.3.3
+      sass: 1.77.8
 
-  vitefu@0.2.5(vite@5.3.5(@types/node@22.0.0)):
+  vitefu@0.2.5(vite@5.3.5(@types/node@22.0.0)(sass@1.77.8)):
     optionalDependencies:
-      vite: 5.3.5(@types/node@22.0.0)
+      vite: 5.3.5(@types/node@22.0.0)(sass@1.77.8)
 
   vue-template-compiler@2.7.16:
     dependencies:

From acd8385bc7b2b448a540a999811078e9fc892c32 Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Thu, 1 Aug 2024 16:44:13 +0100
Subject: [PATCH 2/5] correct types

---
 .../src/components/ConnectModal/ConnectModal.d.ts  | 10 ++++++++++
 .../components/ConnectModal/ConnectModal.svelte    | 14 ++++----------
 2 files changed, 14 insertions(+), 10 deletions(-)
 create mode 100644 packages/ui/src/components/ConnectModal/ConnectModal.d.ts

diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.d.ts b/packages/ui/src/components/ConnectModal/ConnectModal.d.ts
new file mode 100644
index 0000000..b2017e0
--- /dev/null
+++ b/packages/ui/src/components/ConnectModal/ConnectModal.d.ts
@@ -0,0 +1,10 @@
+import { SvelteComponent } from 'svelte'
+
+export class ConnectModal extends SvelteComponent<{
+	config: Config<Connector>
+	state: Readable<StateDisconnected<Connector>>
+	btnClass: string
+	triggerText: string
+	onConnect: (fractl: Config<Connector>) => void
+	onConnectFail: (error: unknown) => void
+}> {}
diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
index 71bbff2..0e73eb3 100644
--- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte
+++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
@@ -3,21 +3,15 @@
 	import copyEN from '../../copy/copy.EN.js'
 	import Modal from '../Common/Modal.svelte'
 	import Scannable from './Scannable.svelte'
-	import type {
-		ConfigConnected,
-		ConfigDisconnected,
-		Config,
-		Connector,
-		StateDisconnected
-	} from '@fractl-ui/types'
+	import type { Config, Connector, StateDisconnected } from '@fractl-ui/types'
 	import type { Readable } from 'svelte/store'
 
-	export let config: ConfigDisconnected<Connector>
+	export let config: Config<Connector>
 	export let state: Readable<StateDisconnected<Connector>>
 	export let btnClass = ''
 	export let triggerText = 'Connect Wallet'
-	export let onConnect: (fractl: ConfigConnected<Connector>) => void
-	export let onConnectFail: (error: Error) => void
+	export let onConnect: (fractl: Config<Connector>) => void
+	export let onConnectFail: (error: unknown) => void
 
 	let open: () => void
 	let close: () => void

From ba17a4b395f96e363e33a8162bc73411fcfcefa1 Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Thu, 1 Aug 2024 16:50:04 +0100
Subject: [PATCH 3/5] update example

---
 examples/svelte/src/App.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
index 550894f..221ba13 100644
--- a/examples/svelte/src/App.svelte
+++ b/examples/svelte/src/App.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { addEvmConnection } from '@fractl-ui/evm'
-	import { create, AccountModal } from 'fractl-ui'
+	import { create } from 'fractl-ui'
+	import { ConnectModal, AccountModal } from 'fractl-ui/svelte'
 	import wagmiConfig from './lib/wagmiConfig'
 	import { onMount } from 'svelte'
 	import { reconnect } from '@wagmi/core'

From a8c95c9644337095298212f0c5a04ccf75e7dd17 Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Thu, 1 Aug 2024 17:05:37 +0100
Subject: [PATCH 4/5] account might be null

---
 packages/ui/src/components/AccountModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/AccountModal.svelte b/packages/ui/src/components/AccountModal.svelte
index de8929e..fff9f06 100644
--- a/packages/ui/src/components/AccountModal.svelte
+++ b/packages/ui/src/components/AccountModal.svelte
@@ -83,7 +83,7 @@
 				<!-- <button on:click={handleDisconnect} disabled> Switch</button> -->
 
 				<button
-					on:click={() => handleDisconnect($accountData.account.connector)}
+					on:click={() => handleDisconnect($accountData.account?.connector)}
 					class="fcl__btn-primary row justify-center"
 				>
 					<!-- prettier-ignore -->

From d6cd66408f8fcffa49534ca860f0ed4941655e34 Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Thu, 1 Aug 2024 17:36:26 +0100
Subject: [PATCH 5/5] clarify component use

---
 examples/svelte/src/App.svelte | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
index 221ba13..202acd0 100644
--- a/examples/svelte/src/App.svelte
+++ b/examples/svelte/src/App.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { addEvmConnection } from '@fractl-ui/evm'
 	import { create } from 'fractl-ui'
-	import { ConnectModal, AccountModal } from 'fractl-ui/svelte'
+	import { AccountModal } from 'fractl-ui/svelte'
 	import wagmiConfig from './lib/wagmiConfig'
 	import { onMount } from 'svelte'
 	import { reconnect } from '@wagmi/core'
@@ -49,11 +49,12 @@
 	{#if account}
 		<AccountModal {...account} />
 	{/if}
-
 	<!-- 
-	{#if connected}
-		<AccountDialog config={$config}></AccountDialog>
-	{/if} -->
+	Future versions of ConnectModal will not include a button.
+	FractlModal will take care of transitions swapping between connection states. 
+	A reuglar button can also be used to trigger the connect moadal
+	<FractlModal {config} />
+	-->
 </main>
 <footer class="links">
 	<a href="https://github.com/sameoldlab/fractl-ui">