diff --git a/package.json b/package.json
index c9a4904..4e090cc 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@sveltejs/adapter-auto": "^3.2.5",
     "@sveltejs/adapter-vercel": "^5.4.5",
     "@sveltejs/kit": "^2.7.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tanstack/svelte-query-devtools": "^5.59.13",
     "@types/cli-progress": "^3.11.6",
     "@types/js-yaml": "^4.0.9",
@@ -40,7 +40,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
     "sass": "1.78.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.5",
     "svelte-check": "^4.0.5",
     "trpc-sveltekit": "^3.6.2",
     "tslib": "^2.8.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bb19fce..3c4bd96 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,7 +25,7 @@ importers:
         version: 0.9.5
       '@skeletonlabs/skeleton':
         specifier: ^2.10.2
-        version: 2.10.2(svelte@4.2.19)
+        version: 2.10.2(svelte@5.0.5)
       '@skeletonlabs/tw-plugin':
         specifier: ^0.4.0
         version: 0.4.0(tailwindcss@3.4.14)
@@ -34,7 +34,7 @@ importers:
         version: 0.5.9(tailwindcss@3.4.14)
       '@tanstack/svelte-query':
         specifier: ^5.59.13
-        version: 5.59.13(svelte@4.2.19)
+        version: 5.59.13(svelte@5.0.5)
       '@trpc/client':
         specifier: ^10.45.2
         version: 10.45.2(@trpc/server@10.45.2)
@@ -46,7 +46,7 @@ importers:
         version: 0.7.34
       ai:
         specifier: ^3.4.16
-        version: 3.4.16(openai@4.68.1(zod@3.23.8))(react@18.3.1)(sswr@2.1.0(svelte@4.2.19))(svelte@4.2.19)(vue@3.5.12(typescript@5.6.3))(zod@3.23.8)
+        version: 3.4.16(openai@4.68.1(zod@3.23.8))(react@18.3.1)(sswr@2.1.0(svelte@5.0.5))(svelte@5.0.5)(vue@3.5.12(typescript@5.6.3))(zod@3.23.8)
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
@@ -76,7 +76,7 @@ importers:
         version: 3.10.1
       mode-watcher:
         specifier: ^0.4.1
-        version: 0.4.1(svelte@4.2.19)
+        version: 0.4.1(svelte@5.0.5)
       ms:
         specifier: ^2.1.3
         version: 2.1.3
@@ -91,13 +91,13 @@ importers:
         version: 6.0.1(jiti@1.21.6)(postcss@8.4.47)(tsx@4.19.1)(yaml@2.6.0)
       prettier-plugin-tailwindcss:
         specifier: ^0.6.8
-        version: 0.6.8(prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@4.2.19))(prettier@3.3.3)
+        version: 0.6.8(prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@5.0.5))(prettier@3.3.3)
       superjson:
         specifier: ^2.2.1
         version: 2.2.1
       svelte-icons-pack:
         specifier: ^3.1.3
-        version: 3.1.3(svelte@4.2.19)
+        version: 3.1.3(svelte@5.0.5)
       tailwind-merge:
         specifier: ^2.5.4
         version: 2.5.4
@@ -106,7 +106,7 @@ importers:
         version: 3.4.14
       trpc-svelte-query:
         specifier: ^2.1.0
-        version: 2.1.0(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(@tanstack/svelte-query@5.59.13(svelte@4.2.19))(@trpc/client@10.45.2(@trpc/server@10.45.2))(@trpc/server@10.45.2)(svelte@4.2.19)
+        version: 2.1.0(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(@tanstack/svelte-query@5.59.13(svelte@5.0.5))(@trpc/client@10.45.2(@trpc/server@10.45.2))(@trpc/server@10.45.2)(svelte@5.0.5)
       vite-plugin-tailwind-purgecss:
         specifier: ^0.3.3
         version: 0.3.3(tailwindcss@3.4.14)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
@@ -119,19 +119,19 @@ importers:
         version: 1.1.0(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
       '@sveltejs/adapter-auto':
         specifier: ^3.2.5
-        version: 3.2.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))
+        version: 3.2.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))
       '@sveltejs/adapter-vercel':
         specifier: ^5.4.5
-        version: 5.4.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))
+        version: 5.4.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))
       '@sveltejs/kit':
         specifier: ^2.7.1
-        version: 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
+        version: 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.2
-        version: 3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
+        specifier: ^4.0.0
+        version: 4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
       '@tanstack/svelte-query-devtools':
         specifier: ^5.59.13
-        version: 5.59.13(@tanstack/svelte-query@5.59.13(svelte@4.2.19))(svelte@4.2.19)
+        version: 5.59.13(@tanstack/svelte-query@5.59.13(svelte@5.0.5))(svelte@5.0.5)
       '@types/cli-progress':
         specifier: ^3.11.6
         version: 3.11.6
@@ -176,19 +176,19 @@ importers:
         version: 3.3.3
       prettier-plugin-svelte:
         specifier: ^3.2.7
-        version: 3.2.7(prettier@3.3.3)(svelte@4.2.19)
+        version: 3.2.7(prettier@3.3.3)(svelte@5.0.5)
       sass:
         specifier: 1.78.0
         version: 1.78.0
       svelte:
-        specifier: ^4.2.19
-        version: 4.2.19
+        specifier: ^5.0.5
+        version: 5.0.5
       svelte-check:
         specifier: ^4.0.5
-        version: 4.0.5(picomatch@4.0.2)(svelte@4.2.19)(typescript@5.6.3)
+        version: 4.0.5(picomatch@4.0.2)(svelte@5.0.5)(typescript@5.6.3)
       trpc-sveltekit:
         specifier: ^3.6.2
-        version: 3.6.2(@sveltejs/adapter-node@5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))))(@trpc/client@10.45.2(@trpc/server@10.45.2))(@trpc/server@10.45.2)(ws@8.18.0)
+        version: 3.6.2(@sveltejs/adapter-node@5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))))(@trpc/client@10.45.2(@trpc/server@10.45.2))(@trpc/server@10.45.2)(ws@8.18.0)
       tslib:
         specifier: ^2.8.0
         version: 2.8.0
@@ -1108,19 +1108,19 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0':
-    resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1':
+    resolution: {integrity: sha512-2CKypmj1sM4GE7HjllT7UKmo4Q6L5xFRd7VMGEWhYnZ+wc6AUVU01IBd7yUi6WnFndEwWoMNOd6e8UjoN0nbvQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      '@sveltejs/vite-plugin-svelte': ^3.0.0
-      svelte: ^4.0.0 || ^5.0.0-next.0
+      '@sveltejs/vite-plugin-svelte': ^4.0.0-next.0||^4.0.0
+      svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
-  '@sveltejs/vite-plugin-svelte@3.1.2':
-    resolution: {integrity: sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte@4.0.0':
+    resolution: {integrity: sha512-kpVJwF+gNiMEsoHaw+FJL76IYiwBikkxYU83+BpqQLdVMff19KeRKLd2wisS8niNBMJ2omv5gG+iGDDwd8jzag==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.0
+      svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
   '@tailwindcss/forms@0.5.9':
@@ -1290,6 +1290,11 @@ packages:
     peerDependencies:
       acorn: ^8
 
+  acorn-typescript@1.4.13:
+    resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
+    peerDependencies:
+      acorn: '>=8.9.0'
+
   acorn-walk@8.3.4:
     resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
     engines: {node: '>=0.4.0'}
@@ -1516,9 +1521,6 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
-  code-red@1.0.4:
-    resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1842,6 +1844,9 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  esrap@1.2.2:
+    resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==}
+
   estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
@@ -2389,9 +2394,6 @@ packages:
     resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
     engines: {node: '>= 14.16'}
 
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-
   pg-int8@1.0.1:
     resolution: {integrity: sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==}
     engines: {node: '>=4.0.0'}
@@ -2802,20 +2804,14 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       typescript: '>=5.0.0'
 
-  svelte-hmr@0.16.0:
-    resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
-    engines: {node: ^12.20 || ^14.13.1 || >= 16}
-    peerDependencies:
-      svelte: ^3.19.0 || ^4.0.0
-
   svelte-icons-pack@3.1.3:
     resolution: {integrity: sha512-sJ/ZiFkbim5zfU+T8V/kEendOluEYtJ7rp207Gc2c/NFgaj4CvWScUbuiByZrdf3Xm8n731Fug36IiXuLTkR9A==}
     peerDependencies:
       svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1
 
-  svelte@4.2.19:
-    resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==}
-    engines: {node: '>=16'}
+  svelte@5.0.5:
+    resolution: {integrity: sha512-f4WBlP5g8W6pEoDfx741lewMlemy+LIGpEqjGPWqnHVP92wqlQXl87U5O5Bi2tkSUrO95OxOoqwU8qlqiHmFKA==}
+    engines: {node: '>=18'}
 
   swr@2.2.5:
     resolution: {integrity: sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==}
@@ -3024,10 +3020,10 @@ packages:
       terser:
         optional: true
 
-  vitefu@0.2.5:
-    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
+  vitefu@1.0.3:
+    resolution: {integrity: sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0
     peerDependenciesMeta:
       vite:
         optional: true
@@ -3146,6 +3142,9 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+
   zip-stream@4.1.1:
     resolution: {integrity: sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==}
     engines: {node: '>= 10'}
@@ -3195,13 +3194,13 @@ snapshots:
     transitivePeerDependencies:
       - zod
 
-  '@ai-sdk/svelte@0.0.52(svelte@4.2.19)(zod@3.23.8)':
+  '@ai-sdk/svelte@0.0.52(svelte@5.0.5)(zod@3.23.8)':
     dependencies:
       '@ai-sdk/provider-utils': 1.0.20(zod@3.23.8)
       '@ai-sdk/ui-utils': 0.0.46(zod@3.23.8)
-      sswr: 2.1.0(svelte@4.2.19)
+      sswr: 2.1.0(svelte@5.0.5)
     optionalDependencies:
-      svelte: 4.2.19
+      svelte: 5.0.5
     transitivePeerDependencies:
       - zod
 
@@ -3738,40 +3737,40 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.24.0':
     optional: true
 
-  '@skeletonlabs/skeleton@2.10.2(svelte@4.2.19)':
+  '@skeletonlabs/skeleton@2.10.2(svelte@5.0.5)':
     dependencies:
       esm-env: 1.0.0
-      svelte: 4.2.19
+      svelte: 5.0.5
 
   '@skeletonlabs/tw-plugin@0.4.0(tailwindcss@3.4.14)':
     dependencies:
       tailwindcss: 3.4.14
 
-  '@sveltejs/adapter-auto@3.2.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))':
+  '@sveltejs/adapter-auto@3.2.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))':
     dependencies:
-      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
+      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-node@5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))':
+  '@sveltejs/adapter-node@5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))':
     dependencies:
       '@rollup/plugin-commonjs': 28.0.1(rollup@4.24.0)
       '@rollup/plugin-json': 6.1.0(rollup@4.24.0)
       '@rollup/plugin-node-resolve': 15.3.0(rollup@4.24.0)
-      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
+      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
       rollup: 4.24.0
 
-  '@sveltejs/adapter-vercel@5.4.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))':
+  '@sveltejs/adapter-vercel@5.4.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))':
     dependencies:
-      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
+      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
       '@vercel/nft': 0.27.4
       esbuild: 0.21.5
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))':
+  '@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -3783,30 +3782,29 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.0
       sirv: 3.0.0
-      svelte: 4.2.19
+      svelte: 5.0.5
       tiny-glob: 0.2.9
       vite: 5.4.9(@types/node@22.7.7)(sass@1.78.0)
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
       debug: 4.3.7
-      svelte: 4.2.19
+      svelte: 5.0.5
       vite: 5.4.9(@types/node@22.7.7)(sass@1.78.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))':
+  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
       debug: 4.3.7
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.12
-      svelte: 4.2.19
-      svelte-hmr: 0.16.0(svelte@4.2.19)
+      svelte: 5.0.5
       vite: 5.4.9(@types/node@22.7.7)(sass@1.78.0)
-      vitefu: 0.2.5(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
+      vitefu: 1.0.3(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -3819,17 +3817,17 @@ snapshots:
 
   '@tanstack/query-devtools@5.58.0': {}
 
-  '@tanstack/svelte-query-devtools@5.59.13(@tanstack/svelte-query@5.59.13(svelte@4.2.19))(svelte@4.2.19)':
+  '@tanstack/svelte-query-devtools@5.59.13(@tanstack/svelte-query@5.59.13(svelte@5.0.5))(svelte@5.0.5)':
     dependencies:
       '@tanstack/query-devtools': 5.58.0
-      '@tanstack/svelte-query': 5.59.13(svelte@4.2.19)
+      '@tanstack/svelte-query': 5.59.13(svelte@5.0.5)
       esm-env: 1.0.0
-      svelte: 4.2.19
+      svelte: 5.0.5
 
-  '@tanstack/svelte-query@5.59.13(svelte@4.2.19)':
+  '@tanstack/svelte-query@5.59.13(svelte@5.0.5)':
     dependencies:
       '@tanstack/query-core': 5.59.13
-      svelte: 4.2.19
+      svelte: 5.0.5
 
   '@tootallnate/once@2.0.0':
     optional: true
@@ -4030,6 +4028,10 @@ snapshots:
     dependencies:
       acorn: 8.13.0
 
+  acorn-typescript@1.4.13(acorn@8.13.0):
+    dependencies:
+      acorn: 8.13.0
+
   acorn-walk@8.3.4:
     dependencies:
       acorn: 8.13.0
@@ -4047,13 +4049,13 @@ snapshots:
     dependencies:
       humanize-ms: 1.2.1
 
-  ai@3.4.16(openai@4.68.1(zod@3.23.8))(react@18.3.1)(sswr@2.1.0(svelte@4.2.19))(svelte@4.2.19)(vue@3.5.12(typescript@5.6.3))(zod@3.23.8):
+  ai@3.4.16(openai@4.68.1(zod@3.23.8))(react@18.3.1)(sswr@2.1.0(svelte@5.0.5))(svelte@5.0.5)(vue@3.5.12(typescript@5.6.3))(zod@3.23.8):
     dependencies:
       '@ai-sdk/provider': 0.0.24
       '@ai-sdk/provider-utils': 1.0.20(zod@3.23.8)
       '@ai-sdk/react': 0.0.64(react@18.3.1)(zod@3.23.8)
       '@ai-sdk/solid': 0.0.50(zod@3.23.8)
-      '@ai-sdk/svelte': 0.0.52(svelte@4.2.19)(zod@3.23.8)
+      '@ai-sdk/svelte': 0.0.52(svelte@5.0.5)(zod@3.23.8)
       '@ai-sdk/ui-utils': 0.0.46(zod@3.23.8)
       '@ai-sdk/vue': 0.0.55(vue@3.5.12(typescript@5.6.3))(zod@3.23.8)
       '@opentelemetry/api': 1.9.0
@@ -4066,8 +4068,8 @@ snapshots:
     optionalDependencies:
       openai: 4.68.1(zod@3.23.8)
       react: 18.3.1
-      sswr: 2.1.0(svelte@4.2.19)
-      svelte: 4.2.19
+      sswr: 2.1.0(svelte@5.0.5)
+      svelte: 5.0.5
       zod: 3.23.8
     transitivePeerDependencies:
       - solid-js
@@ -4275,14 +4277,6 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  code-red@1.0.4:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
-      acorn: 8.13.0
-      estree-walker: 3.0.3
-      periscopic: 3.1.0
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -4577,6 +4571,11 @@ snapshots:
   esprima@4.0.1:
     optional: true
 
+  esrap@1.2.2:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.6
+
   estraverse@5.3.0:
     optional: true
 
@@ -5009,9 +5008,9 @@ snapshots:
 
   mkdirp@1.0.4: {}
 
-  mode-watcher@0.4.1(svelte@4.2.19):
+  mode-watcher@0.4.1(svelte@5.0.5):
     dependencies:
-      svelte: 4.2.19
+      svelte: 5.0.5
 
   mri@1.2.0: {}
 
@@ -5112,12 +5111,6 @@ snapshots:
 
   pathval@2.0.0: {}
 
-  periscopic@3.1.0:
-    dependencies:
-      '@types/estree': 1.0.6
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
-
   pg-int8@1.0.1: {}
 
   pg-numeric@1.0.2: {}
@@ -5204,16 +5197,16 @@ snapshots:
 
   postgres@3.4.4: {}
 
-  prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@4.2.19):
+  prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@5.0.5):
     dependencies:
       prettier: 3.3.3
-      svelte: 4.2.19
+      svelte: 5.0.5
 
-  prettier-plugin-tailwindcss@0.6.8(prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@4.2.19))(prettier@3.3.3):
+  prettier-plugin-tailwindcss@0.6.8(prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@5.0.5))(prettier@3.3.3):
     dependencies:
       prettier: 3.3.3
     optionalDependencies:
-      prettier-plugin-svelte: 3.2.7(prettier@3.3.3)(svelte@4.2.19)
+      prettier-plugin-svelte: 3.2.7(prettier@3.3.3)(svelte@5.0.5)
 
   prettier@3.3.3: {}
 
@@ -5406,9 +5399,9 @@ snapshots:
 
   source-map@0.6.1: {}
 
-  sswr@2.1.0(svelte@4.2.19):
+  sswr@2.1.0(svelte@5.0.5):
     dependencies:
-      svelte: 4.2.19
+      svelte: 5.0.5
       swrev: 4.0.0
 
   stackback@0.0.2: {}
@@ -5459,42 +5452,37 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@4.0.5(picomatch@4.0.2)(svelte@4.2.19)(typescript@5.6.3):
+  svelte-check@4.0.5(picomatch@4.0.2)(svelte@5.0.5)(typescript@5.6.3):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.1
       fdir: 6.4.2(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 4.2.19
+      svelte: 5.0.5
       typescript: 5.6.3
     transitivePeerDependencies:
       - picomatch
 
-  svelte-hmr@0.16.0(svelte@4.2.19):
+  svelte-icons-pack@3.1.3(svelte@5.0.5):
     dependencies:
-      svelte: 4.2.19
+      svelte: 5.0.5
 
-  svelte-icons-pack@3.1.3(svelte@4.2.19):
-    dependencies:
-      svelte: 4.2.19
-
-  svelte@4.2.19:
+  svelte@5.0.5:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
       '@types/estree': 1.0.6
       acorn: 8.13.0
+      acorn-typescript: 1.4.13(acorn@8.13.0)
       aria-query: 5.3.2
       axobject-query: 4.1.0
-      code-red: 1.0.4
-      css-tree: 2.3.1
-      estree-walker: 3.0.3
+      esm-env: 1.0.0
+      esrap: 1.2.2
       is-reference: 3.0.2
       locate-character: 3.0.0
       magic-string: 0.30.12
-      periscopic: 3.1.0
+      zimmerframe: 1.1.2
 
   swr@2.2.5(react@18.3.1):
     dependencies:
@@ -5614,18 +5602,18 @@ snapshots:
 
   traverse@0.3.9: {}
 
-  trpc-svelte-query@2.1.0(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(@tanstack/svelte-query@5.59.13(svelte@4.2.19))(@trpc/client@10.45.2(@trpc/server@10.45.2))(@trpc/server@10.45.2)(svelte@4.2.19):
+  trpc-svelte-query@2.1.0(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(@tanstack/svelte-query@5.59.13(svelte@5.0.5))(@trpc/client@10.45.2(@trpc/server@10.45.2))(@trpc/server@10.45.2)(svelte@5.0.5):
     dependencies:
-      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
-      '@tanstack/svelte-query': 5.59.13(svelte@4.2.19)
+      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))
+      '@tanstack/svelte-query': 5.59.13(svelte@5.0.5)
       '@trpc/client': 10.45.2(@trpc/server@10.45.2)
       '@trpc/server': 10.45.2
       esm-env: 1.0.0
-      svelte: 4.2.19
+      svelte: 5.0.5
 
-  trpc-sveltekit@3.6.2(@sveltejs/adapter-node@5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))))(@trpc/client@10.45.2(@trpc/server@10.45.2))(@trpc/server@10.45.2)(ws@8.18.0):
+  trpc-sveltekit@3.6.2(@sveltejs/adapter-node@5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0))))(@trpc/client@10.45.2(@trpc/server@10.45.2))(@trpc/server@10.45.2)(ws@8.18.0):
     dependencies:
-      '@sveltejs/adapter-node': 5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@4.2.19)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))
+      '@sveltejs/adapter-node': 5.2.8(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))(svelte@5.0.5)(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)))
       '@trpc/client': 10.45.2(@trpc/server@10.45.2)
       '@trpc/server': 10.45.2
       ws: 8.18.0
@@ -5720,7 +5708,7 @@ snapshots:
       fsevents: 2.3.3
       sass: 1.78.0
 
-  vitefu@0.2.5(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)):
+  vitefu@1.0.3(vite@5.4.9(@types/node@22.7.7)(sass@1.78.0)):
     optionalDependencies:
       vite: 5.4.9(@types/node@22.7.7)(sass@1.78.0)
 
@@ -5839,6 +5827,8 @@ snapshots:
 
   yaml@2.6.0: {}
 
+  zimmerframe@1.1.2: {}
+
   zip-stream@4.1.1:
     dependencies:
       archiver-utils: 3.0.4
diff --git a/src/components/ImageSpan.svelte b/src/components/ImageSpan.svelte
index d8488bb..6ce1fb7 100644
--- a/src/components/ImageSpan.svelte
+++ b/src/components/ImageSpan.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
   import { cl_join } from '~/tools/cl_join';
-  let className = '';
-  export { className as class };
-  export let src: string;
+  
+  interface Props {
+    class?: string;
+    src: string;
+  }
+
+  let { class: className = '', src }: Props = $props();
 </script>
 
-<span class={cl_join('inline-block bg-cover', className)} style:background-image={`url(${src})`} />
+<span class={cl_join('inline-block bg-cover', className)} style:background-image={`url(${src})`}></span>
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index 126a39f..66e506a 100644
--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -1,24 +1,39 @@
 <script lang="ts">
   import { cl_join } from '~/tools/cl_join';
-  import { onDestroy, onMount } from 'svelte';
-  import { type Writable } from 'svelte/store';
-  import { scale, slide, fly } from 'svelte/transition';
+  import { onMount } from 'svelte';
+  import { scale, slide } from 'svelte/transition';
   import { AiOutlineClose } from 'svelte-icons-pack/ai';
   import Icon from '~/tools/Icon.svelte';
+  import { untrack } from 'svelte';
 
-  let className: string | null = null!;
-  export { className as class };
-  export let outterClass: string | null = null!;
-  export let modal_open: Writable<boolean>;
-  export let cancel_btn_txt: string | null = null!;
-  export let confirm_btn_txt: string | null = null!;
-  export let onOpen: () => void = null!;
-  export let onClose: () => void = null!;
-  export let onConfirm: () => void = null!;
-  export let close_on_click_outside = true;
+  interface Props {
+    class?: string | null;
+    outterClass?: string | null;
+    modal_open: boolean;
+    cancel_btn_txt?: string | null;
+    confirm_btn_txt?: string | null;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onConfirm?: () => void;
+    close_on_click_outside?: boolean;
+    children?: import('svelte').Snippet;
+  }
 
-  let modalElement: HTMLElement;
-  let opened = false;
+  let {
+    class: className = null!,
+    outterClass = null!,
+    modal_open = $bindable(),
+    cancel_btn_txt = null!,
+    confirm_btn_txt = null!,
+    onOpen = null!,
+    onClose = null!,
+    onConfirm = null!,
+    close_on_click_outside = true,
+    children
+  }: Props = $props();
+
+  let modalElement = $state<HTMLElement>();
+  let opened = $state(false);
 
   const lockScroll = () => {
     document.body.style.overflow = 'hidden';
@@ -29,13 +44,13 @@
   };
 
   const animationDuration = 400;
-  let is_closing = false; // to fix transition not being displayed while exiting
+  let is_closing = $state(false); // to fix transition not being displayed while exiting
   let visibleModal: HTMLElement | null = null;
 
   const openModal = () => {
     if (opened) return;
     setTimeout(() => {
-      visibleModal = modalElement;
+      modalElement && (visibleModal = modalElement);
     }, animationDuration);
     opened = true;
     lockScroll();
@@ -49,7 +64,7 @@
       opened = false;
       is_closing = false;
       unlockScroll();
-      $modal_open = false;
+      modal_open = false;
       if (onClose) onClose();
     }, animationDuration);
   };
@@ -70,12 +85,10 @@
       }
     });
   });
-  const mode_open_unsubscriber = modal_open.subscribe((value) => {
-    if (value && !opened) openModal();
-    else if (!value && opened) closeModal();
-  });
-  onDestroy(() => {
-    mode_open_unsubscriber();
+  $effect(() => {
+    const _opened = untrack(() => opened);
+    if (modal_open && !_opened) openModal();
+    else if (!modal_open && _opened) closeModal();
   });
 </script>
 
@@ -99,22 +112,22 @@
         <button
           aria-label="Close"
           class="absolute cursor-pointer text-gray-500 hover:text-gray-700"
-          on:click={closeModal}><Icon src={AiOutlineClose} /></button
+          onclick={closeModal}><Icon src={AiOutlineClose} /></button
         >
       </div>
       <article class="overflow-scroll rounded-lg bg-white p-3 pt-2 shadow-lg dark:bg-gray-800">
-        <slot />
+        {@render children?.()}
         {#if cancel_btn_txt || confirm_btn_txt}
           <footer class="mt-4 flex justify-end space-x-2">
             {#if cancel_btn_txt}
-              <button class="variant-outline-error btn rounded-lg px-2.5 py-2" on:click={closeModal}
+              <button class="variant-outline-error btn rounded-lg px-2.5 py-2" onclick={closeModal}
                 >{cancel_btn_txt}</button
               >
             {/if}
             {#if confirm_btn_txt}
               <button
                 class="variant-filled-secondary btn rounded-lg px-2.5 py-2"
-                on:click={() => {
+                onclick={() => {
                   closeModal();
                   if (onConfirm) onConfirm();
                 }}>{confirm_btn_txt}</button
diff --git a/src/components/PreviewExcel.svelte b/src/components/PreviewExcel.svelte
index 7429cd1..1a614fe 100644
--- a/src/components/PreviewExcel.svelte
+++ b/src/components/PreviewExcel.svelte
@@ -9,12 +9,16 @@
   import { get_text_font_class } from '~/tools/font_tools';
   import type { script_and_lang_list_type } from '~/tools/lang_list';
 
-  export let file_link: string;
-  export let workbook: Workbook;
-  export let file_name: string;
-  export let file_preview_opened: Writable<boolean>;
+  type Props = {
+    file_link: string;
+    workbook: Workbook;
+    file_name: string;
+    file_preview_opened: Writable<boolean>;
+  };
+
+  let { file_link, workbook, file_name, file_preview_opened }: Props = $props();
 
-  let sheet_number = 0;
+  let sheet_number = $state(0);
 
   const get_lang_code_of_columnn = (worksheet: Worksheet, column_i: number) => {
     const lang = normalize_lang_code(
@@ -23,7 +27,7 @@
     return lang || '';
   };
 
-  let overflow_behavior = 'hidden';
+  let overflow_behavior: 'hidden' | 'scroll' = $state('hidden');
 </script>
 
 <div>
@@ -55,7 +59,7 @@
           <span class="font-bold">{worksheet.name}</span>
         </Tab>
       {/each}
-      <div slot="panel" class="overflow-scroll">
+      <div class="overflow-scroll" slot="panel">
         {@const worksheet = workbook.worksheets[sheet_number]}
         <table class="table table-hover table-compact table-cell-fit">
           <thead>
diff --git a/src/components/Select.svelte b/src/components/Select.svelte
index 35fbf8e..f1b02fd 100644
--- a/src/components/Select.svelte
+++ b/src/components/Select.svelte
@@ -1,37 +1,45 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { createEventDispatcher } from 'svelte';
   import { z } from 'zod';
 
-  export let zodType: any = z.string();
-  export let value: any;
-  let className: string = undefined!;
-  export let disabled = false;
-  export { className as class };
-  export let options: {
+  type Props = {
+    zodType?: any;
     value: any;
-    text: string;
-    className?: string | undefined;
-  }[];
-  export let resize = false;
-
-  const dispatch = createEventDispatcher<{
-    change: {
+    class?: string;
+    disabled?: boolean;
+    options: {
       value: any;
-      currentTarget: HTMLSelectElement;
-    };
-  }>();
+      text: string;
+      className?: string | undefined;
+    }[];
+    resize?: boolean;
+    onchange?: (
+      e: Event & {
+        currentTarget: EventTarget & HTMLSelectElement;
+      }
+    ) => void;
+  };
+
+  let {
+    zodType = z.string(),
+    value = $bindable(),
+    class: className = undefined!,
+    disabled = false,
+    options,
+    resize = false,
+    onchange
+  }: Props = $props();
 
-  let width = 0;
-  let mounted = false;
+  let width = $state(0);
+  let mounted = $state(false);
   onMount(() => {
-    if (resize) width = resize_select(elm);
+    if (resize && elm) width = resize_select(elm);
     mounted = true;
   });
 
-  let elm: HTMLSelectElement;
+  let elm = $state<HTMLSelectElement>();
 
-  const on_change = (
+  const on_change_func = (
     e: Event & {
       currentTarget: EventTarget & HTMLSelectElement;
     }
@@ -39,7 +47,7 @@
     const { currentTarget } = e;
     if (resize) width = resize_select(currentTarget);
     value = zodType.parse(currentTarget.value);
-    dispatch('change', { value, currentTarget });
+    onchange && onchange(e);
   };
 
   const replace_all = (str: string, replaceWhat: string, replaceTo: string) => {
@@ -66,7 +74,7 @@
 <select
   bind:this={elm}
   {disabled}
-  on:change={on_change}
+  onchange={on_change_func}
   class={className}
   style:width={resize && mounted ? `${width}px` : null}
 >
diff --git a/src/components/ThemeChanger.svelte b/src/components/ThemeChanger.svelte
index 47bd11e..4a92581 100644
--- a/src/components/ThemeChanger.svelte
+++ b/src/components/ThemeChanger.svelte
@@ -7,7 +7,7 @@
 
 <button
   class="group btn-xl -mb-1 ml-0 mr-0 inline-flex items-center p-0 outline-none"
-  on:click={() => setMode('system')}
+  onclick={() => setMode('system')}
 >
   <Icon
     src={SlScreenDesktop}
@@ -16,13 +16,13 @@
 </button>
 <button
   class="group btn-xl -mb-1 ml-0 mr-0 inline-flex items-center p-0 outline-none"
-  on:click={() => setMode('light')}
+  onclick={() => setMode('light')}
 >
   <Icon src={LuSun} class="h-5 w-5 rotate-0 scale-100 dark:group-hover:text-yellow-300" />
 </button>
 <button
   class="group btn-xl -mb-1 ml-0 mr-0 inline-flex items-center p-0 outline-none"
-  on:click={() => setMode('dark')}
+  onclick={() => setMode('dark')}
 >
   <Icon
     src={LuMoon}
diff --git a/src/components/TopAppBar.svelte b/src/components/TopAppBar.svelte
index a2b6c3f..a067c3a 100644
--- a/src/components/TopAppBar.svelte
+++ b/src/components/TopAppBar.svelte
@@ -12,9 +12,17 @@
   import { main_app_bar_info } from '~/state/app_bar';
   import { PAGE_TITLES } from '~/state/page_titles';
 
-  $: page_url = $page.url.pathname;
+  type Props = {
+    start?: import('svelte').Snippet;
+    headline?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+  };
+
+  let { start, headline, end }: Props = $props();
+
+  let page_url = $derived($page.url.pathname);
 
-  $: {
+  $effect(() => {
     if (page_url in PAGE_TITLES) {
       const [TITLE, CLASS]: string[] = PAGE_TITLES[page_url as keyof typeof PAGE_TITLES];
       main_app_bar_info.set({
@@ -27,7 +35,7 @@
         className: null
       });
     }
-  }
+  });
 
   const app_menu_popup: PopupSettings = {
     event: 'click',
@@ -38,25 +46,25 @@
 </script>
 
 <AppBar>
-  <svelte:fragment slot="lead">
-    <slot name="start" />
+  {#snippet lead()}
+    {@render start?.()}
     <!-- {#if page_url !== '/'}
-      <a class="mr-2 text-xl" href="/" title="श्रीरामायणम्">
-        <Icon
-          src={BiArrowBack}
-          class="-mt-1 mr-1 text-2xl hover:fill-blue-600 dark:hover:fill-sky-500"
-        />
-      </a>
-    {/if} -->
-    <slot name="headline">
+        <a class="mr-2 text-xl" href="/" title="श्रीरामायणम्">
+          <Icon
+            src={BiArrowBack}
+            class="-mt-1 mr-1 text-2xl hover:fill-blue-600 dark:hover:fill-sky-500"
+          />
+        </a>
+      {/if} -->
+    {#if headline}{@render headline()}{:else}
       <span class={$main_app_bar_info.className ?? ''}>{$main_app_bar_info.title ?? ''}</span>
-    </slot>
-  </svelte:fragment>
+    {/if}
+  {/snippet}
   <!-- <svelte:fragment slot="headline">
 		<slot name="headline"><span></span></slot>
 	</svelte:fragment> -->
-  <svelte:fragment slot="trail">
-    <slot name="end"></slot>
+  {#snippet trail()}
+    {@render end?.()}
     <div class="space-x-2">
       {#if page_url !== '/convert'}
         <a class="text-xl" href="/convert" title="Lipi Parivartak">
@@ -120,5 +128,5 @@
         <ThemeChanger />
       </div>
     </div>
-  </svelte:fragment>
+  {/snippet}
 </AppBar>